Merge pull request #847 from alleslabs/feat/proposal-detail-amp

Add Amplitude tracking on proposal details page
alleslabs · Mar 26, 2024 · 867cbc9 · 867cbc9
2 parents f66daea + f3d1663
commit 867cbc9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git 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
 
+- [#847](https://github.com/alleslabs/celatone-frontend/pull/847) Add Amplitude tracking on Proposal details page
 - [#840](https://github.com/alleslabs/celatone-frontend/pull/840) Add chip total count in instantiated by me title
 - [#837](https://github.com/alleslabs/celatone-frontend/pull/837) Voting power in validator detail overview
 - [#836](https://github.com/alleslabs/celatone-frontend/pull/836) Add recent 100 blocks chart

diff --git a/src/lib/amplitude/types.ts b/src/lib/amplitude/types.ts
@@ -138,6 +138,8 @@ export enum AmpEvent {
   USE_FILTER_MY_PROPOSALS = "Use Filter My Proposals",
   USE_FILTER_PROPOSALS_STATUS = "Use Filter Proposals Status",
   USE_FILTER_PROPOSALS_TYPE = "Use Filter Proposals Types",
+  USE_SEE_VALIDATOR_VOTES = "Use See Validator Votes",
+  USE_SEE_VOTES = "Use See Votes",
   USE_FILTER_POOL_TYPE = "Use Filter Pool Types",
   USE_PAGINATION_PAGE_SIZE = "Use Pagination Page Size",
   USE_PAGINATION_NAVIGATION = "Use Pagination Navigation",

diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/index.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/index.tsx
@@ -11,6 +11,7 @@ import { isNull } from "lodash";
 import type { ReactNode } from "react";
 
 import type { VoteDetailsProps } from "..";
+import { AmpEvent, track } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { TableTitle } from "lib/components/table";
@@ -24,6 +25,8 @@ import { ProposalVotesTable } from "./votes-table";
 import { VotingQuorum } from "./VotingQuorum";
 import { VotingThreshold } from "./VotingThreshold";
 
+type VoterVariant = "validator" | "all";
+
 const ContentContainer = ({
   children,
   transparent = false,
@@ -55,13 +58,20 @@ export const VotingPeriod = ({ proposalData, ...props }: VoteDetailsProps) => {
 
   const isProposalResolved = !isNull(proposalData?.resolvedHeight);
 
-  const toggleDisclosure = (
-    disclosure: typeof validatorVoteDisclosure | typeof allVoteDisclosure
-  ) => {
+  const toggleDisclosure = (voter: VoterVariant) => {
+    let disclosure = validatorVoteDisclosure;
+    let ampEvent = AmpEvent.USE_SEE_VALIDATOR_VOTES;
+
+    if (voter === "all") {
+      disclosure = allVoteDisclosure;
+      ampEvent = AmpEvent.USE_SEE_VOTES;
+    }
+
     if (disclosure.isOpen) {
       disclosure.onClose();
     } else {
       disclosure.onOpen();
+      track(ampEvent);
     }
 
     const windowPosition = scrollYPosition();
@@ -116,7 +126,7 @@ export const VotingPeriod = ({ proposalData, ...props }: VoteDetailsProps) => {
                 />
                 <Button
                   variant="ghost-primary"
-                  onClick={() => toggleDisclosure(validatorVoteDisclosure)}
+                  onClick={() => toggleDisclosure("validator")}
                   rightIcon={<CustomIcon name="chevron-right" boxSize={3} />}
                   isDisabled={!answers?.validator.total}
                 >
@@ -143,9 +153,7 @@ export const VotingPeriod = ({ proposalData, ...props }: VoteDetailsProps) => {
                 fullVersion={false}
                 isProposalResolved={isProposalResolved}
                 onViewMore={
-                  isMobile
-                    ? () => toggleDisclosure(validatorVoteDisclosure)
-                    : undefined
+                  isMobile ? () => toggleDisclosure("validator") : undefined
                 }
               />
             </ContentContainer>
@@ -161,7 +169,7 @@ export const VotingPeriod = ({ proposalData, ...props }: VoteDetailsProps) => {
                 />
                 <Button
                   variant="ghost-primary"
-                  onClick={() => toggleDisclosure(allVoteDisclosure)}
+                  onClick={() => toggleDisclosure("all")}
                   rightIcon={<CustomIcon name="chevron-right" boxSize={3} />}
                   isDisabled={!answers?.all.total}
                 >
@@ -173,9 +181,7 @@ export const VotingPeriod = ({ proposalData, ...props }: VoteDetailsProps) => {
                 answers={answers?.all}
                 fullVersion={false}
                 onViewMore={
-                  isMobile
-                    ? () => toggleDisclosure(allVoteDisclosure)
-                    : undefined
+                  isMobile ? () => toggleDisclosure("all") : undefined
                 }
               />
             </ContentContainer>