From 88139c08c1ee32a292ccc12f7b0169c375c46d13 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Mon, 8 Apr 2024 11:57:13 +0700 Subject: [PATCH 1/5] feat(components): add amplitude to validator detail overview --- src/lib/amplitude/track-event/trackInteraction.ts | 6 ++++++ src/lib/components/delegations/DelegationInfo.tsx | 4 ++-- src/lib/components/table/ViewMore.tsx | 4 ++-- .../bonded-token-changes/VotingPowerChart.tsx | 12 ++++++++++-- .../components/performance/UptimeSection.tsx | 12 ++++++++++-- .../components/tables/proposed-blocks/index.tsx | 10 +++++++++- .../components/tables/voted-proposals/index.tsx | 11 ++++++++++- .../components/validator-top/WebsiteButton.tsx | 2 ++ 8 files changed, 51 insertions(+), 10 deletions(-) diff --git a/src/lib/amplitude/track-event/trackInteraction.ts b/src/lib/amplitude/track-event/trackInteraction.ts index f09f15dd8..9a29e13dd 100644 --- a/src/lib/amplitude/track-event/trackInteraction.ts +++ b/src/lib/amplitude/track-event/trackInteraction.ts @@ -23,6 +23,12 @@ export const trackUseTab = (tab: string, section?: string, info?: string) => info, }); +export const trackUseViewMore = (section?: string) => { + amp.track(AmpEvent.USE_VIEW_MORE, { + section, + }); +}; + export const trackUseRadio = (radio: string, section?: string) => amp.track(AmpEvent.USE_RADIO, { radio, diff --git a/src/lib/components/delegations/DelegationInfo.tsx b/src/lib/components/delegations/DelegationInfo.tsx index 164eebf00..4b21bd689 100644 --- a/src/lib/components/delegations/DelegationInfo.tsx +++ b/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={} onClick={() => { - track(AmpEvent.USE_VIEW_MORE); + trackUseViewMore(); onViewMore(); }} > diff --git a/src/lib/components/table/ViewMore.tsx b/src/lib/components/table/ViewMore.tsx index 79358c701..0c9b23f65 100644 --- a/src/lib/components/table/ViewMore.tsx +++ b/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(); }} > diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx index d2c396e52..7afd5c0f1 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx +++ b/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 ? ( See all related transactions diff --git a/src/lib/pages/validator-details/components/performance/UptimeSection.tsx b/src/lib/pages/validator-details/components/performance/UptimeSection.tsx index 86a4d69f6..a37313394 100644 --- a/src/lib/pages/validator-details/components/performance/UptimeSection.tsx +++ b/src/lib/pages/validator-details/components/performance/UptimeSection.tsx @@ -11,6 +11,7 @@ import { } from "@chakra-ui/react"; import { useMemo } from "react"; +import { 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,13 @@ export const UptimeSection = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [JSON.stringify(uptimeData.uptime)]); + const handleOnViewMore = () => { + if (!onViewMore) return; + + trackUseViewMore(); + onViewMore(); + }; + return ( } - onClick={onViewMore} + onClick={handleOnViewMore} > View Performance @@ -122,7 +130,7 @@ export const UptimeSection = ({ diff --git a/src/lib/pages/validator-details/components/tables/proposed-blocks/index.tsx b/src/lib/pages/validator-details/components/tables/proposed-blocks/index.tsx index 5677c26ea..7e70436d3 100644 --- a/src/lib/pages/validator-details/components/tables/proposed-blocks/index.tsx +++ b/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 ? ( diff --git a/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx b/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx index 7dfef4d20..5f1a33a1d 100644 --- a/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx +++ b/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 { trackUseViewMore } from "lib/amplitude"; import { useMobile } from "lib/app-provider"; import { SelectInput } from "lib/components/forms"; import type { IconKeys } from "lib/components/icon"; @@ -30,6 +31,7 @@ interface VotedProposalsTableProps { export const VotedProposalsTable = ({ validatorAddress, onViewMore, + // eslint-disable-next-line sonarjs/cognitive-complexity }: VotedProposalsTableProps) => { const isMobile = useMobile(); const isMobileOverview = isMobile && !!onViewMore; @@ -130,6 +132,13 @@ export const VotedProposalsTable = ({ setAnswerFilter(newAnswer); }; + const handleOnViewMore = () => { + if (!onViewMore) return; + + trackUseViewMore(); + onViewMore(); + }; + return isMobileOverview ? ( diff --git a/src/lib/pages/validator-details/components/validator-top/WebsiteButton.tsx b/src/lib/pages/validator-details/components/validator-top/WebsiteButton.tsx index 259f0ba8a..406b75954 100644 --- a/src/lib/pages/validator-details/components/validator-top/WebsiteButton.tsx +++ b/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 From 3726749dc4c7f96eb5df080bb4a4c209406a15b9 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Mon, 8 Apr 2024 12:02:24 +0700 Subject: [PATCH 2/5] feat(components): add amplitude to validator details overview --- .../components/tables/voted-proposals/index.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx b/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx index 5f1a33a1d..36d218ff7 100644 --- a/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx +++ b/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx @@ -31,7 +31,6 @@ interface VotedProposalsTableProps { export const VotedProposalsTable = ({ validatorAddress, onViewMore, - // eslint-disable-next-line sonarjs/cognitive-complexity }: VotedProposalsTableProps) => { const isMobile = useMobile(); const isMobileOverview = isMobile && !!onViewMore; @@ -132,13 +131,6 @@ export const VotedProposalsTable = ({ setAnswerFilter(newAnswer); }; - const handleOnViewMore = () => { - if (!onViewMore) return; - - trackUseViewMore(); - onViewMore(); - }; - return isMobileOverview ? ( { + trackUseViewMore(); + onViewMore(); + }} > From e89d698b8ed92d333660b455509674d2d0c7866a Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Mon, 8 Apr 2024 14:21:46 +0700 Subject: [PATCH 3/5] feat(components): add amplitude to votes, performance, and bonded token changed validator details --- .../amplitude/track-event/trackInteraction.ts | 17 +++++++++++++++-- src/lib/amplitude/types.ts | 2 ++ src/lib/components/InputWithIcon.tsx | 8 ++++++-- .../components/performance/UptimeSection.tsx | 15 +++++++++++---- .../components/tables/voted-proposals/index.tsx | 8 +++++++- 5 files changed, 41 insertions(+), 9 deletions(-) diff --git a/src/lib/amplitude/track-event/trackInteraction.ts b/src/lib/amplitude/track-event/trackInteraction.ts index 9a29e13dd..468f355fb 100644 --- a/src/lib/amplitude/track-event/trackInteraction.ts +++ b/src/lib/amplitude/track-event/trackInteraction.ts @@ -23,12 +23,24 @@ export const trackUseTab = (tab: string, section?: string, info?: string) => info, }); -export const trackUseViewMore = (section?: string) => { +export const trackUseViewMore = (section?: { [key: string]: string }) => { amp.track(AmpEvent.USE_VIEW_MORE, { section, }); }; +export const trackUseUpTime = (section?: { [key: string]: string }) => { + amp.track(AmpEvent.USE_UPTIME, { + section, + }); +}; + +export const trackSearchInput = (section?: { [key: string]: string }) => { + amp.track(AmpEvent.USE_SEARCH_INPUT, { + section, + }); +}; + export const trackUseRadio = (radio: string, section?: string) => amp.track(AmpEvent.USE_RADIO, { radio, @@ -178,7 +190,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 }); diff --git a/src/lib/amplitude/types.ts b/src/lib/amplitude/types.ts index 37edfbb38..4e86fb6c3 100644 --- a/src/lib/amplitude/types.ts +++ b/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", diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx index 3c6e1d357..7d027dde3 100644 --- a/src/lib/components/InputWithIcon.tsx +++ b/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"; @@ -13,6 +13,7 @@ const InputWithIcon = ({ my, size = "md", amptrackSection, + value, ...inputProps }: InputWithIconProps) => ( @@ -25,7 +26,10 @@ const InputWithIcon = ({ paddingLeft="36px !important" onClick={ amptrackSection - ? () => track(AmpEvent.USE_SEARCH_INPUT, { amptrackSection }) + ? () => + trackSearchInput({ + amptrackSection, + }) : undefined } /> diff --git a/src/lib/pages/validator-details/components/performance/UptimeSection.tsx b/src/lib/pages/validator-details/components/performance/UptimeSection.tsx index a37313394..0dd712b50 100644 --- a/src/lib/pages/validator-details/components/performance/UptimeSection.tsx +++ b/src/lib/pages/validator-details/components/performance/UptimeSection.tsx @@ -11,7 +11,7 @@ import { } from "@chakra-ui/react"; import { useMemo } from "react"; -import { trackUseViewMore } from "lib/amplitude"; +import { trackUseUpTime, trackUseViewMore } from "lib/amplitude"; import { useMobile } from "lib/app-provider"; import { CustomIcon } from "lib/components/icon"; import { ValueWithIcon } from "lib/components/ValueWithIcon"; @@ -63,6 +63,13 @@ export const UptimeSection = ({ onViewMore(); }; + const handleSetupBlock = (block: number) => { + if (!setUptimeBlock) return; + + trackUseUpTime({ block: String(block) }); + setUptimeBlock(block); + }; + return ( - setUptimeBlock(100)}> + handleSetupBlock(100)}> Latest 100 Blocks - setUptimeBlock(1000)}> + handleSetupBlock(1000)}> Latest 1000 Blocks - setUptimeBlock(10000)}> + handleSetupBlock(10000)}> Latest 10000 Blocks diff --git a/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx b/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx index 36d218ff7..6850e4845 100644 --- a/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx +++ b/src/lib/pages/validator-details/components/tables/voted-proposals/index.tsx @@ -2,7 +2,7 @@ import { Alert, Flex, Grid, GridItem, Text } from "@chakra-ui/react"; import type { ChangeEvent } from "react"; import { useMemo, useState } from "react"; -import { trackUseViewMore } from "lib/amplitude"; +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"; @@ -127,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); }; @@ -177,6 +182,7 @@ export const VotedProposalsTable = ({ value={search} onChange={handleOnSearchChange} size="lg" + amptrackSection="voted-proposals-search" /> From 8e557f67788e630c35f1ee25432cfb419ab54d3b Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Mon, 8 Apr 2024 14:23:52 +0700 Subject: [PATCH 4/5] docs: add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e9db4d1c7..a0a0045d4 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 +- [#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 From fb194188c3f984dce7f2b866d4d7b3952f4efc65 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 9 Apr 2024 17:03:13 +0700 Subject: [PATCH 5/5] fix(components): fix pr comments --- .../amplitude/track-event/trackInteraction.ts | 21 ++++++------------- src/lib/components/InputWithIcon.tsx | 1 - 2 files changed, 6 insertions(+), 16 deletions(-) diff --git a/src/lib/amplitude/track-event/trackInteraction.ts b/src/lib/amplitude/track-event/trackInteraction.ts index 468f355fb..f8bd384e7 100644 --- a/src/lib/amplitude/track-event/trackInteraction.ts +++ b/src/lib/amplitude/track-event/trackInteraction.ts @@ -23,23 +23,14 @@ export const trackUseTab = (tab: string, section?: string, info?: string) => info, }); -export const trackUseViewMore = (section?: { [key: string]: string }) => { - amp.track(AmpEvent.USE_VIEW_MORE, { - section, - }); -}; +export const trackUseViewMore = (properties?: { [key: string]: string }) => + amp.track(AmpEvent.USE_VIEW_MORE, properties); -export const trackUseUpTime = (section?: { [key: string]: string }) => { - amp.track(AmpEvent.USE_UPTIME, { - section, - }); -}; +export const trackUseUpTime = (properties?: { [key: string]: string }) => + amp.track(AmpEvent.USE_UPTIME, properties); -export const trackSearchInput = (section?: { [key: string]: string }) => { - amp.track(AmpEvent.USE_SEARCH_INPUT, { - section, - }); -}; +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, { diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx index 7d027dde3..d392d3708 100644 --- a/src/lib/components/InputWithIcon.tsx +++ b/src/lib/components/InputWithIcon.tsx @@ -13,7 +13,6 @@ const InputWithIcon = ({ my, size = "md", amptrackSection, - value, ...inputProps }: InputWithIconProps) => (