feat: add amplitude to proposal list page and pagination

CHANGELOG.md

@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#317](https://github.com/alleslabs/celatone-frontend/pull/317) Add amplitude for proposal list page and pagination
+
 ### Improvements
 
 ### Bug fixes

src/lib/components/InputWithIcon.tsx

@@ -2,19 +2,23 @@ import type { InputProps } from "@chakra-ui/react";
 import { Input, InputGroup, InputRightElement } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { AmpTrackUseInput } from "lib/services/amplitude";
+
 import { CustomIcon } from "./icon";
 
 interface InputWithIconProps {
   placeholder: string;
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   size?: InputProps["size"];
+  action?: string;
 }
 
 const InputWithIcon = ({
   placeholder,
   value,
   size,
+  action,
   onChange,
 }: InputWithIconProps) => (
   <InputGroup>
@@ -23,6 +27,7 @@ const InputWithIcon = ({
       value={value}
       onChange={onChange}
       size={size}
+      onClick={action ? () => AmpTrackUseInput(action) : undefined}
     />
     <InputRightElement h="56px" alignItems="center" mr="1">
       <CustomIcon name="search" />

src/lib/components/button/NewProposalButton.tsx

@@ -10,6 +10,7 @@ import {
 import { TooltipComponent } from "../TooltipComponent";
 import { useCurrentNetwork, useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 const StyledMenuItem = chakra(MenuItem, {
   baseStyle: {
@@ -24,6 +25,7 @@ export const NewProposalButton = () => {
   return (
     <Menu>
       <MenuButton
+        onClick={() => AmpTrack(AmpEvent.USE_CREATE_NEW_PROPOSAL)}
         variant="primary"
         color="text.main"
         as={Button}
@@ -32,17 +34,16 @@ export const NewProposalButton = () => {
         Create New Proposal
       </MenuButton>
       <MenuList>
-        {/* <StyledMenuItem
+        <StyledMenuItem
           icon={<CustomIcon name="code" />}
-          // TODO - Change navigation path
           onClick={() => {
             navigate({
-              pathname: "/proposal-storecode",
+              pathname: "/proposal/store-code",
             });
           }}
         >
           To Store Code
-        </StyledMenuItem> */}
+        </StyledMenuItem>
         {/* <StyledMenuItem
           icon={<CustomIcon name="contract-address" />}
           onClick={() => {

src/lib/components/pagination/Next.tsx

@@ -3,6 +3,8 @@ import { Button } from "@chakra-ui/react";
 import type { FC } from "react";
 import { useContext } from "react";
 
+import { AmpTrackPaginationNavigate } from "lib/services/amplitude";
+
 import { PaginatorContext } from "./PaginatorProvider";
 
 export const Next: FC<ButtonProps> = ({ children, ...buttonProps }) => {
@@ -13,6 +15,7 @@ export const Next: FC<ButtonProps> = ({ children, ...buttonProps }) => {
   const isLast = pagesQuantity ? currentPage > pagesQuantity - 1 : true;
 
   const handleNextClick = () => {
+    AmpTrackPaginationNavigate("next");
     if (!isLast) changePage(currentPage + 1);
   };
 

src/lib/components/pagination/Previous.tsx

@@ -3,6 +3,8 @@ import { Button } from "@chakra-ui/react";
 import type { FC } from "react";
 import { useContext } from "react";
 
+import { AmpTrackPaginationNavigate } from "lib/services/amplitude";
+
 import { PaginatorContext } from "./PaginatorProvider";
 
 export const Previous: FC<ButtonProps> = ({ children, ...buttonProps }) => {
@@ -13,6 +15,7 @@ export const Previous: FC<ButtonProps> = ({ children, ...buttonProps }) => {
   const isFirst = currentPage === 1;
 
   const handlePreviousClick = () => {
+    AmpTrackPaginationNavigate("previous");
     if (!isFirst) changePage(currentPage - 1);
   };
 

src/lib/components/pagination/index.tsx

@@ -3,6 +3,7 @@ import type { ChangeEvent } from "react";
 import { useEffect, useMemo } from "react";
 
 import { CustomIcon } from "../icon";
+import { AmpTrackPaginationPage } from "lib/services/amplitude";
 import { scrollToComponent, scrollToTop, scrollYPosition } from "lib/utils";
 
 import { Next } from "./Next";
@@ -31,6 +32,7 @@ export const Pagination = ({
 }: PaginationProps) => {
   useEffect(() => {
     const windowPosition = scrollYPosition();
+    AmpTrackPaginationPage(pageSize, currentPage);
     if (windowPosition) {
       if (!scrollComponentId) {
         scrollToTop();

src/lib/components/table/proposals/Proposer.tsx

@@ -4,14 +4,21 @@ import { useGetAddressType } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { Addr, Option } from "lib/types";
 
-export const Proposer = ({ proposer }: { proposer: Option<Addr> }) => {
+export const Proposer = ({
+  proposer,
+  amptrackSection,
+}: {
+  proposer: Option<Addr>;
+  amptrackSection?: string;
+}) => {
   const getAddressType = useGetAddressType();
 
   return proposer ? (
     <ExplorerLink
       type={getAddressType(proposer)}
       value={proposer}
       showCopyOnHover
+      ampCopierSection={amptrackSection}
     />
   ) : (
     <Text color="text.dark">N/A</Text>

src/lib/components/table/proposals/ResolvedHeight.tsx

@@ -8,10 +8,12 @@ export const ResolvedHeight = ({
   resolvedHeight,
   isDepositFailed,
   isDepositOrVoting,
+  amptrackSection,
 }: {
   resolvedHeight: ProposalsTableRowProps["proposal"]["resolvedHeight"];
   isDepositFailed: boolean;
   isDepositOrVoting: boolean;
+  amptrackSection?: string;
 }) => {
   if (isDepositOrVoting) return <Text color="text.dark">Pending</Text>;
   if (!resolvedHeight || isDepositFailed)
@@ -21,6 +23,7 @@ export const ResolvedHeight = ({
       type="block_height"
       value={resolvedHeight.toString()}
       showCopyOnHover
+      ampCopierSection={amptrackSection}
     />
   );
 };

src/lib/pages/proposals/components/ProposalStatusFilter.tsx

@@ -9,6 +9,7 @@ import { DropdownContainer } from "lib/components/filter/FilterComponents";
 import { FilterDropdownItem } from "lib/components/filter/FilterDropdownItem";
 import { FilterInput } from "lib/components/filter/FilterInput";
 import { StatusChip } from "lib/components/table/proposals/StatusChip";
+import { AmpEvent, AmpTrackUseFilter } from "lib/services/amplitude";
 import { ProposalStatus } from "lib/types";
 
 export interface ProposalStatusFilterProps extends InputProps {
@@ -59,8 +60,14 @@ export const ProposalStatusFilter = forwardRef<
         inputRef.current.value = "";
       }
       if (result.includes(option)) {
+        AmpTrackUseFilter(
+          AmpEvent.USE_FILTER_PROPOSALS_STATUS,
+          result,
+          "remove"
+        );
         setResult((prevState) => prevState.filter((value) => value !== option));
       } else {
+        AmpTrackUseFilter(AmpEvent.USE_FILTER_PROPOSALS_STATUS, result, "add");
         setResult((prevState) => [...prevState, option]);
       }
     };

src/lib/pages/proposals/components/ProposalTypeFilter.tsx

@@ -15,6 +15,7 @@ import { DropdownContainer } from "lib/components/filter/FilterComponents";
 import { FilterDropdownItem } from "lib/components/filter/FilterDropdownItem";
 import { FilterInput } from "lib/components/filter/FilterInput";
 import { CustomIcon } from "lib/components/icon";
+import { AmpEvent, AmpTrackUseFilter } from "lib/services/amplitude";
 import { useProposalTypes } from "lib/services/proposalService";
 import type { ProposalType } from "lib/types";
 import { ProposalTypeCosmos } from "lib/types";
@@ -75,8 +76,10 @@ export const ProposalTypeFilter = forwardRef<
         inputRef.current.value = "";
       }
       if (result.includes(option)) {
+        AmpTrackUseFilter(AmpEvent.USE_FILTER_PROPOSALS_TYPE, result, "remove");
         setResult((prevState) => prevState.filter((value) => value !== option));
       } else {
+        AmpTrackUseFilter(AmpEvent.USE_FILTER_PROPOSALS_TYPE, result, "add");
         setResult((prevState) => [...prevState, option]);
       }
     };

src/lib/pages/proposals/index.tsx

@@ -63,7 +63,7 @@ const Proposals = () => {
   );
 
   useEffect(() => {
-    if (router.isReady) AmpTrack(AmpEvent.TO_PROPOSALS);
+    if (router.isReady) AmpTrack(AmpEvent.TO_PROPOSAL_LIST);
   }, [router.isReady]);
 
   useEffect(() => {
@@ -99,6 +99,7 @@ const Proposals = () => {
             onChange={(e) => setSearch(e.target.value)}
             size="lg"
             value={search}
+            action="proposal-list-search"
           />
           <Tooltip
             isDisabled={!!address}
@@ -122,8 +123,14 @@ const Proposals = () => {
                 disabled={!address}
                 onChange={(e) => {
                   if (e.target.checked && address) {
+                    AmpTrack(AmpEvent.USE_FILTER_MY_PROPOSALS, {
+                      toggle: "on",
+                    });
                     setProposer(address as Addr);
                   } else {
+                    AmpTrack(AmpEvent.USE_FILTER_MY_PROPOSALS, {
+                      toggle: "off",
+                    });
                     setProposer(undefined);
                   }
                   setIsSelected(e.target.checked);

src/lib/pages/proposals/table/ProposalTableRow.tsx

@@ -10,6 +10,7 @@ import { Proposer } from "lib/components/table/proposals/Proposer";
 import { ResolvedHeight } from "lib/components/table/proposals/ResolvedHeight";
 import { StatusChip } from "lib/components/table/proposals/StatusChip";
 import { VotingEndTime } from "lib/components/table/proposals/VotingEndTime";
+import { AmpTrackMintscan } from "lib/services/amplitude";
 import type { Proposal, Option } from "lib/types";
 import { ProposalStatus } from "lib/types";
 
@@ -44,15 +45,22 @@ export const ProposalTableRow = ({
       minW="min-content"
       cursor={isDepositFailed ? "default" : "pointer"}
       _hover={{ "> div": { bgColor: hoverBg } }}
-      onClick={() =>
-        !isDepositFailed &&
-        window.open(
-          `${getExplorerProposalUrl(
-            currentChainName
-          )}/${proposal.proposalId.toString()}`,
-          "_blank",
-          "noopener,noreferrer"
-        )
+      onClick={
+        !isDepositFailed
+          ? () => {
+              AmpTrackMintscan("proposal-detail", {
+                type: proposal.type,
+                status: proposal.status,
+              });
+              window.open(
+                `${getExplorerProposalUrl(
+                  currentChainName
+                )}/${proposal.proposalId.toString()}`,
+                "_blank",
+                "noopener,noreferrer"
+              );
+            }
+          : undefined
       }
     >
       <TableRowFreeze left="0">
@@ -61,6 +69,7 @@ export const ProposalTableRow = ({
           type="proposal_id"
           value={proposal.proposalId.toString()}
           showCopyOnHover
+          ampCopierSection="proposal-list"
         />
       </TableRowFreeze>
       <TableRowFreeze
@@ -89,10 +98,14 @@ export const ProposalTableRow = ({
           resolvedHeight={proposal.resolvedHeight}
           isDepositFailed={isDepositFailed}
           isDepositOrVoting={isDepositOrVoting}
+          amptrackSection="proposal-list"
         />
       </TableRow>
       <TableRow>
-        <Proposer proposer={proposal.proposer} />
+        <Proposer
+          proposer={proposal.proposer}
+          amptrackSection="proposal-list"
+        />
       </TableRow>
     </Grid>
   );

src/lib/services/amplitude.tsx

@@ -1,7 +1,7 @@
 import { track } from "@amplitude/analytics-browser";
 
 import type { AttachFundsType } from "lib/components/fund/types";
-import type { Option } from "lib/types";
+import type { Dict, Option } from "lib/types";
 
 export enum AmpEvent {
   INVALID_STATE = "To Invalid State",
@@ -35,7 +35,7 @@ export enum AmpEvent {
   TO_DEPLOY = "To Deploy",
   TO_UPLOAD = "To Upload",
   TO_INSTANTIATE = "To Instantiate",
-  TO_PROPOSALS = "To Proposals",
+  TO_PROPOSAL_LIST = "To Proposal List",
   TO_QUERY = "To Query",
   TO_EXECUTE = "To Execute",
   TO_MIGRATE = "To Migrate",
@@ -96,6 +96,13 @@ export enum AmpEvent {
   USE_UNSUPPORTED_ASSETS = "Use Unsupported Assets",
   USE_TX_MSG_EXPAND = "Use Transaction Message Expand",
   USE_EXPAND = "Use General Expand",
+  USE_INPUT = "Use Input",
+  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_PAGINATION_PAGE = "Use Pagination Page",
+  USE_PAGINATION_NAVIGATION = "Use Pagination Navigation",
+  USE_CREATE_NEW_PROPOSAL = "Use Create New Proposal",
   // TX
   TX_SUCCEED = "Tx Succeed",
   TX_FAILED = "Tx Failed",
@@ -131,7 +138,12 @@ type SpecialAmpEvent =
   | AmpEvent.USE_VIEW_JSON
   | AmpEvent.USE_UNSUPPORTED_ASSETS
   | AmpEvent.USE_COPIER
-  | AmpEvent.USE_EXPAND;
+  | AmpEvent.USE_EXPAND
+  | AmpEvent.USE_INPUT
+  | AmpEvent.USE_PAGINATION_PAGE
+  | AmpEvent.USE_PAGINATION_NAVIGATION
+  | AmpEvent.USE_FILTER_PROPOSALS_STATUS
+  | AmpEvent.USE_FILTER_PROPOSALS_TYPE;
 
 export const AmpTrackInvalidState = (title: string) =>
   track(AmpEvent.INVALID_STATE, { title });
@@ -174,8 +186,11 @@ export const AmpTrackUseRadio = (radio: string) =>
 export const AmpTrackUseOtherModal = (title: string) =>
   track(AmpEvent.USE_OTHER_MODAL, { title });
 
-export const AmpTrackMintscan = (type: string) =>
-  track(AmpEvent.MINTSCAN, { type });
+export const AmpTrackMintscan = (
+  type: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  properties?: Dict<string, any>
+) => track(AmpEvent.MINTSCAN, { type, properties });
 
 export const AmpTrackWebsite = (url: string) =>
   track(AmpEvent.WEBSITE, { url });
@@ -199,3 +214,18 @@ export const AmpTrackExpand = (
   component: "assets" | "json" | "permission_address" | "event_box",
   section: Option<string>
 ) => track(AmpEvent.USE_EXPAND, { action, component, section });
+
+export const AmpTrackUseInput = (action: string) =>
+  track(AmpEvent.USE_INPUT, { action });
+
+export const AmpTrackUseFilter = (
+  ampEvent: AmpEvent,
+  filters: string[],
+  action: string
+) => track(ampEvent, { action, filters });
+
+export const AmpTrackPaginationPage = (pageSize: number, currentPage: number) =>
+  track(AmpEvent.USE_PAGINATION_PAGE, { pageSize, currentPage });
+
+export const AmpTrackPaginationNavigate = (navigate: string) =>
+  track(AmpEvent.USE_PAGINATION_NAVIGATION, { navigate });