From 628eb0239f49356ee980a1f8acd98535507b69b3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 2 May 2023 14:41:12 +0700
Subject: [PATCH] feat: add landing amp on block(s), txs, network overview

---
 CHANGELOG.md                             |  1 +
 src/lib/pages/block-details/index.tsx    |  6 +++++
 src/lib/pages/blocks/index.tsx           |  8 ++++++
 src/lib/pages/network-overview/index.tsx |  8 ++++++
 src/lib/pages/txs/index.tsx              | 32 ++++++++++++++++--------
 src/lib/services/amplitude.tsx           |  4 +++
 6 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dfddd4401..1d6aeeee2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#310](https://github.com/alleslabs/celatone-frontend/pull/310) Add amplitude for landing on the following pages - blocks, block detail, txs, network overview
 - [#268](https://github.com/alleslabs/celatone-frontend/pull/268) Wireup create proposal to whitelisting
 - [#266](https://github.com/alleslabs/celatone-frontend/pull/250) Add proposal whitelisting page
 - [#286](https://github.com/alleslabs/celatone-frontend/pull/286) Add block proposer
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index b012aef90..b6132185b 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -1,9 +1,11 @@
 import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 import { BackButton } from "lib/components/button";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { useBlockDetailsQuery } from "lib/services/blockService";
 import { getFirstQueryParam } from "lib/utils";
 
@@ -20,6 +22,10 @@ const BlockDetail = () => {
     Number(heightParam)
   );
 
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_BLOCK_DETAIL);
+  }, [router.isReady]);
+
   if (isLoading) return <Loading />;
 
   return (
diff --git a/src/lib/pages/blocks/index.tsx b/src/lib/pages/blocks/index.tsx
index 4ff10b50a..6ac44ad29 100644
--- a/src/lib/pages/blocks/index.tsx
+++ b/src/lib/pages/blocks/index.tsx
@@ -1,10 +1,18 @@
 import { Heading, Text } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 import PageContainer from "lib/components/PageContainer";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 import { BlocksTable } from "./components/BlocksTable";
 
 const BlocksPage = () => {
+  const router = useRouter();
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_BLOCKS);
+  }, [router.isReady]);
+
   return (
     <PageContainer>
       <Heading as="h5" variant="h5">
diff --git a/src/lib/pages/network-overview/index.tsx b/src/lib/pages/network-overview/index.tsx
index 762140f83..a39a1e79a 100644
--- a/src/lib/pages/network-overview/index.tsx
+++ b/src/lib/pages/network-overview/index.tsx
@@ -1,4 +1,6 @@
 import { Box, Flex, Heading, Spinner, Text, Tooltip } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
@@ -6,6 +8,7 @@ import PageContainer from "lib/components/PageContainer";
 import { ViewMore } from "lib/components/table";
 import { BlocksTable } from "lib/pages/blocks/components/BlocksTable";
 import { TxsTable } from "lib/pages/txs/components/TxsTable";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { useLatestBlockInfo } from "lib/services/blockService";
 import { useTxsCount } from "lib/services/txService";
 import { dateFromNow, formatUTC } from "lib/utils";
@@ -83,8 +86,13 @@ const CardInfo = ({
 );
 
 const NetworkOverview = () => {
+  const router = useRouter();
   const navigate = useInternalNavigate();
 
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_NETWORK_OVERVIEW);
+  }, [router.isReady]);
+
   const {
     data: latestBlockInfo,
     isLoading: isLoadingLatestBlockInfo,
diff --git a/src/lib/pages/txs/index.tsx b/src/lib/pages/txs/index.tsx
index 25ab85b41..af59b1aea 100644
--- a/src/lib/pages/txs/index.tsx
+++ b/src/lib/pages/txs/index.tsx
@@ -1,19 +1,29 @@
 import { Heading, Text } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 import PageContainer from "lib/components/PageContainer";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 import { TxsTable } from "./components/TxsTable";
 
-const Txs = () => (
-  <PageContainer>
-    <Heading variant="h5" as="h5">
-      Transactions
-    </Heading>
-    <Text variant="body2" color="text.dark" mb={8} mt={1}>
-      This page displays all transactions in this network sorted by recency
-    </Text>
-    <TxsTable isViewMore={false} />
-  </PageContainer>
-);
+const Txs = () => {
+  const router = useRouter();
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_TXS);
+  }, [router.isReady]);
+
+  return (
+    <PageContainer>
+      <Heading variant="h5" as="h5">
+        Transactions
+      </Heading>
+      <Text variant="body2" color="text.dark" mb={8} mt={1}>
+        This page displays all transactions in this network sorted by recency
+      </Text>
+      <TxsTable isViewMore={false} />
+    </PageContainer>
+  );
+};
 
 export default Txs;
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index bebd8aff2..abb845856 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -27,6 +27,10 @@ export enum AmpEvent {
   PUBLIC_REMOVE = "Public Project Remove",
   // NAVIGATE
   TO_OVERVIEW = "To Overview",
+  TO_NETWORK_OVERVIEW = "To Network Overview",
+  TO_BLOCKS = "To Blocks",
+  TO_BLOCK_DETAIL = "To Block Detail",
+  TO_TXS = "To Txs",
   TO_PAST_TXS = "To Past Txs",
   TO_DEPLOY = "To Deploy",
   TO_UPLOAD = "To Upload",