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 diff --git a/src/lib/amplitude/track-event/trackInteraction.ts b/src/lib/amplitude/track-event/trackInteraction.ts index f09f15dd8..f8bd384e7 100644 --- a/src/lib/amplitude/track-event/trackInteraction.ts +++ b/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 }); 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..d392d3708 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"; @@ -25,7 +25,10 @@ const InputWithIcon = ({ paddingLeft="36px !important" onClick={ amptrackSection - ? () => track(AmpEvent.USE_SEARCH_INPUT, { amptrackSection }) + ? () => + trackSearchInput({ + amptrackSection, + }) : undefined } /> 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..0dd712b50 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 { 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 ( - setUptimeBlock(100)}> + handleSetupBlock(100)}> Latest 100 Blocks - setUptimeBlock(1000)}> + handleSetupBlock(1000)}> Latest 1000 Blocks - setUptimeBlock(10000)}> + handleSetupBlock(10000)}> Latest 10000 Blocks @@ -100,7 +115,7 @@ export const UptimeSection = ({ @@ -122,7 +137,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..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,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(); + }} > @@ -173,6 +182,7 @@ export const VotedProposalsTable = ({ value={search} onChange={handleOnSearchChange} size="lg" + amptrackSection="voted-proposals-search" /> 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