[CFE-387 ] Feat(components): add amplitude to validator detail

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#875](https://github.com/alleslabs/celatone-frontend/pull/875) Add Amplitude tracking to validator details page
 - [#865](https://github.com/alleslabs/celatone-frontend/pull/865) Apply voted proposals filter and search input to table
 - [#860](https://github.com/alleslabs/celatone-frontend/pull/860) Add voted proposals in voted tab
 - [#862](https://github.com/alleslabs/celatone-frontend/pull/862) View failed reason

src/lib/amplitude/track-event/trackInteraction.ts

@@ -23,6 +23,15 @@ export const trackUseTab = (tab: string, section?: string, info?: string) =>
     info,
   });
 
+export const trackUseViewMore = (properties?: { [key: string]: string }) =>
+  amp.track(AmpEvent.USE_VIEW_MORE, properties);
+
+export const trackUseUpTime = (properties?: { [key: string]: string }) =>
+  amp.track(AmpEvent.USE_UPTIME, properties);
+
+export const trackSearchInput = (properties?: { [key: string]: string }) =>
+  amp.track(AmpEvent.USE_SEARCH_INPUT, properties);
+
 export const trackUseRadio = (radio: string, section?: string) =>
   amp.track(AmpEvent.USE_RADIO, {
     radio,
@@ -172,7 +181,8 @@ export const trackUseFilter = (
     | AmpEvent.USE_FILTER_POOL_TYPE
     | AmpEvent.USE_FILTER_PROPOSALS_TYPE
     | AmpEvent.USE_FILTER_PROPOSALS_STATUS
-    | AmpEvent.USE_FILTER_VALIDATORS_ACTIVE,
+    | AmpEvent.USE_FILTER_VALIDATORS_ACTIVE
+    | AmpEvent.USE_FILTER_VOTED_PROPOSALS_ANSWER,
   filters: string[],
   action: string
 ) => amp.track(event, { action, filters });

src/lib/amplitude/types.ts

@@ -185,6 +185,8 @@ export enum AmpEvent {
   USE_NFT_VIEW_RESOURCE_CTA = "Use NFT View Resource CTA",
   USE_NFT_CARD = "Use NFT Card",
   USE_SELECT_NFT_COLLECTION_GROUP = "Use Select NFT Selection Group",
+  USE_UPTIME = "Use Uptime",
+  USE_FILTER_VOTED_PROPOSALS_ANSWER = "Use Filter Voted Proposals Answer",
 
   // TX
   TX_SUCCEED = "Tx Succeed",

src/lib/components/InputWithIcon.tsx

@@ -1,7 +1,7 @@
 import type { InputProps } from "@chakra-ui/react";
 import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
 
-import { AmpEvent, track } from "lib/amplitude";
+import { trackSearchInput } from "lib/amplitude";
 
 import { CustomIcon } from "./icon";
 
@@ -25,7 +25,10 @@ const InputWithIcon = ({
       paddingLeft="36px !important"
       onClick={
         amptrackSection
-          ? () => track(AmpEvent.USE_SEARCH_INPUT, { amptrackSection })
+          ? () =>
+              trackSearchInput({
+                amptrackSection,
+              })
           : undefined
       }
     />

src/lib/components/delegations/DelegationInfo.tsx

@@ -2,7 +2,7 @@ import { Button, Flex, Heading } from "@chakra-ui/react";
 import type { MouseEventHandler } from "react";
 
 import { TableTitle } from "../table";
-import { AmpEvent, track } from "lib/amplitude";
+import { trackUseViewMore } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 
@@ -67,7 +67,7 @@ export const DelegationInfo = ({
                 minW="fit-content"
                 rightIcon={<CustomIcon name="chevron-right" />}
                 onClick={() => {
-                  track(AmpEvent.USE_VIEW_MORE);
+                  trackUseViewMore();
                   onViewMore();
                 }}
               >

src/lib/components/table/ViewMore.tsx

@@ -2,7 +2,7 @@ import type { BorderProps, LayoutProps } from "@chakra-ui/react";
 import { Button, Flex } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
-import { AmpEvent, track } from "lib/amplitude";
+import { trackUseViewMore } from "lib/amplitude";
 
 interface ViewMoreProps {
   onClick: () => void;
@@ -25,7 +25,7 @@ export const ViewMore = ({
       variant="ghost-gray"
       gap={2}
       onClick={() => {
-        track(AmpEvent.USE_VIEW_MORE);
+        trackUseViewMore();
         onClick();
       }}
     >

src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx

@@ -2,6 +2,7 @@ import { Box, Button, Flex } from "@chakra-ui/react";
 import type { BigSource } from "big.js";
 import type { ScriptableContext, TooltipModel } from "chart.js";
 
+import { trackUseViewMore } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { LineChart } from "lib/components/chart/LineChart";
 import { CustomIcon } from "lib/components/icon";
@@ -97,6 +98,13 @@ export const VotingPowerChart = ({
     `;
   };
 
+  const handleOnViewMore = () => {
+    if (!onViewMore) return;
+
+    trackUseViewMore();
+    onViewMore();
+  };
+
   return isMobileOverview ? (
     <Flex
       backgroundColor="gray.900"
@@ -105,7 +113,7 @@ export const VotingPowerChart = ({
       w="100%"
       justifyContent="space-between"
       alignItems="center"
-      onClick={onViewMore}
+      onClick={handleOnViewMore}
     >
       <VotingPowerChartDetails
         historicalPowers={historicalPowers}
@@ -138,7 +146,7 @@ export const VotingPowerChart = ({
             p="unset"
             size="md"
             pl={2}
-            onClick={onViewMore}
+            onClick={handleOnViewMore}
           >
             See all related transactions
             <CustomIcon name="chevron-right" boxSize={3} />

src/lib/pages/validator-details/components/performance/UptimeSection.tsx

@@ -11,6 +11,7 @@ import {
 } from "@chakra-ui/react";
 import { useMemo } from "react";
 
+import { trackUseUpTime, trackUseViewMore } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { ValueWithIcon } from "lib/components/ValueWithIcon";
@@ -55,6 +56,20 @@ export const UptimeSection = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(uptimeData.uptime)]);
 
+  const handleOnViewMore = () => {
+    if (!onViewMore) return;
+
+    trackUseViewMore();
+    onViewMore();
+  };
+
+  const handleSetupBlock = (block: number) => {
+    if (!setUptimeBlock) return;
+
+    trackUseUpTime({ block: String(block) });
+    setUptimeBlock(block);
+  };
+
   return (
     <Flex
       direction="column"
@@ -79,13 +94,13 @@ export const UptimeSection = ({
                   </Text>
                 </MenuButton>
                 <MenuList>
-                  <MenuItem onClick={() => setUptimeBlock(100)}>
+                  <MenuItem onClick={() => handleSetupBlock(100)}>
                     Latest 100 Blocks
                   </MenuItem>
-                  <MenuItem onClick={() => setUptimeBlock(1000)}>
+                  <MenuItem onClick={() => handleSetupBlock(1000)}>
                     Latest 1000 Blocks
                   </MenuItem>
-                  <MenuItem onClick={() => setUptimeBlock(10000)}>
+                  <MenuItem onClick={() => handleSetupBlock(10000)}>
                     Latest 10000 Blocks
                   </MenuItem>
                 </MenuList>
@@ -100,7 +115,7 @@ export const UptimeSection = ({
             <Button
               variant="ghost-primary"
               rightIcon={<CustomIcon name="chevron-right" />}
-              onClick={onViewMore}
+              onClick={handleOnViewMore}
             >
               View Performance
             </Button>
@@ -122,7 +137,7 @@ export const UptimeSection = ({
             <Button
               variant="ghost-primary"
               rightIcon={<CustomIcon name="chevron-right" />}
-              onClick={onViewMore}
+              onClick={handleOnViewMore}
             >
               View Performance
             </Button>

src/lib/pages/validator-details/components/tables/proposed-blocks/index.tsx

@@ -1,5 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 
+import { trackUseViewMore } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Pagination } from "lib/components/pagination";
@@ -49,6 +50,13 @@ export const ProposedBlocksTable = ({
     }
   );
 
+  const handleOnViewMore = () => {
+    if (!onViewMore) return;
+
+    trackUseViewMore();
+    onViewMore();
+  };
+
   return isMoibleOverview ? (
     <Flex
       backgroundColor="gray.900"
@@ -57,7 +65,7 @@ export const ProposedBlocksTable = ({
       w="100%"
       justifyContent="space-between"
       alignItems="center"
-      onClick={onViewMore}
+      onClick={handleOnViewMore}
     >
       <TableTitle title="Proposed Blocks" count={data?.total ?? 0} mb={0} />
       <CustomIcon boxSize={6} m={0} name="chevron-right" color="gray.600" />

src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx

@@ -2,6 +2,7 @@ import { Alert, Flex, Grid, GridItem, Text } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useMemo, useState } from "react";
 
+import { AmpEvent, trackUseFilter, trackUseViewMore } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { SelectInput } from "lib/components/forms";
 import type { IconKeys } from "lib/components/icon";
@@ -126,6 +127,11 @@ export const VotedProposalsTable = ({
   };
 
   const handleOnAnswerFilterChange = (newAnswer: ProposalVoteType) => {
+    trackUseFilter(
+      AmpEvent.USE_FILTER_VOTED_PROPOSALS_ANSWER,
+      Object.values(ProposalVoteType),
+      newAnswer
+    );
     setCurrentPage(1);
     setAnswerFilter(newAnswer);
   };
@@ -138,7 +144,10 @@ export const VotedProposalsTable = ({
       w="100%"
       justifyContent="space-between"
       alignItems="center"
-      onClick={onViewMore}
+      onClick={() => {
+        trackUseViewMore();
+        onViewMore();
+      }}
     >
       <TableTitle title="Voted Proposals" count={answer?.all ?? 0} mb={0} />
       <CustomIcon boxSize={6} m={0} name="chevron-right" color="gray.600" />
@@ -173,6 +182,7 @@ export const VotedProposalsTable = ({
                 value={search}
                 onChange={handleOnSearchChange}
                 size="lg"
+                amptrackSection="voted-proposals-search"
               />
             </GridItem>
           </Grid>

src/lib/pages/validator-details/components/validator-top/WebsiteButton.tsx

@@ -1,6 +1,7 @@
 import { Button, Link } from "@chakra-ui/react";
 import type { ButtonProps } from "@chakra-ui/react";
 
+import { trackWebsite } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
 
@@ -16,6 +17,7 @@ const RenderWebsiteButton = ({ href, ...props }: WebsiteButtonProps) => (
     variant="outline-primary"
     width={{ base: "full", md: "auto" }}
     isDisabled={!href}
+    onClick={() => trackWebsite(href)}
     {...props}
   >
     Website