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 ; 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 ( 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 = () => ( - - - Transactions - - - This page displays all transactions in this network sorted by recency - - - -); +const Txs = () => { + const router = useRouter(); + useEffect(() => { + if (router.isReady) AmpTrack(AmpEvent.TO_TXS); + }, [router.isReady]); + + return ( + + + Transactions + + + This page displays all transactions in this network sorted by recency + + + + ); +}; 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",