Merge pull request #310 from alleslabs/feat/amp-blocks-tx-net

feat: add landing amp on block(s), txs, network overview

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

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 (

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">

src/lib/pages/network-overview/index.tsx

@@ -1,11 +1,14 @@
 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";
 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,

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;

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",