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 (
-
@@ -100,7 +115,7 @@ export const UptimeSection = ({
}
- onClick={onViewMore}
+ onClick={handleOnViewMore}
>
View Performance
@@ -122,7 +137,7 @@ export const UptimeSection = ({
}
- onClick={onViewMore}
+ onClick={handleOnViewMore}
>
View Performance
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