From 2ecf7ef8ae995b009f751dae8a646e974e68c865 Mon Sep 17 00:00:00 2001 From: bkioshn Date: Tue, 9 May 2023 10:39:34 +0700 Subject: [PATCH 1/4] feat: add amplitude to proposal list page --- src/lib/components/InputWithIcon.tsx | 5 +++ .../components/button/NewProposalButton.tsx | 9 +++-- src/lib/components/pagination/Next.tsx | 3 ++ src/lib/components/pagination/Previous.tsx | 3 ++ src/lib/components/pagination/index.tsx | 2 + .../components/table/proposals/Proposer.tsx | 9 ++++- .../table/proposals/ResolvedHeight.tsx | 3 ++ .../components/ProposalStatusFilter.tsx | 7 ++++ .../components/ProposalTypeFilter.tsx | 3 ++ src/lib/pages/proposals/index.tsx | 9 ++++- .../proposals/table/ProposalTableRow.tsx | 33 ++++++++++------ src/lib/services/amplitude.tsx | 38 +++++++++++++++++-- 12 files changed, 103 insertions(+), 21 deletions(-) diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx index f96339333..66beb7558 100644 --- a/src/lib/components/InputWithIcon.tsx +++ b/src/lib/components/InputWithIcon.tsx @@ -2,6 +2,8 @@ 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 { @@ -9,12 +11,14 @@ interface InputWithIconProps { value: string; onChange: (e: ChangeEvent) => void; size?: InputProps["size"]; + action?: string; } const InputWithIcon = ({ placeholder, value, size, + action, onChange, }: InputWithIconProps) => ( @@ -23,6 +27,7 @@ const InputWithIcon = ({ value={value} onChange={onChange} size={size} + onClick={() => action && AmpTrackUseInput(action)} /> diff --git a/src/lib/components/button/NewProposalButton.tsx b/src/lib/components/button/NewProposalButton.tsx index ff1a8b376..17880ff27 100644 --- a/src/lib/components/button/NewProposalButton.tsx +++ b/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 ( AmpTrack(AmpEvent.USE_CREATE_NEW_PROPOSAL)} variant="primary" color="text.main" as={Button} @@ -32,17 +34,16 @@ export const NewProposalButton = () => { Create New Proposal - {/* } - // TODO - Change navigation path onClick={() => { navigate({ - pathname: "/proposal-storecode", + pathname: "/proposal/store-code", }); }} > To Store Code - */} + {/* } onClick={() => { diff --git a/src/lib/components/pagination/Next.tsx b/src/lib/components/pagination/Next.tsx index 865316843..4440f3aea 100644 --- a/src/lib/components/pagination/Next.tsx +++ b/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 = ({ children, ...buttonProps }) => { @@ -13,6 +15,7 @@ export const Next: FC = ({ children, ...buttonProps }) => { const isLast = pagesQuantity ? currentPage > pagesQuantity - 1 : true; const handleNextClick = () => { + AmpTrackPaginationNavigate("next"); if (!isLast) changePage(currentPage + 1); }; diff --git a/src/lib/components/pagination/Previous.tsx b/src/lib/components/pagination/Previous.tsx index 520095162..8066e926e 100644 --- a/src/lib/components/pagination/Previous.tsx +++ b/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 = ({ children, ...buttonProps }) => { @@ -13,6 +15,7 @@ export const Previous: FC = ({ children, ...buttonProps }) => { const isFirst = currentPage === 1; const handlePreviousClick = () => { + AmpTrackPaginationNavigate("previous"); if (!isFirst) changePage(currentPage - 1); }; diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx index 21590a7f3..8148bf0cd 100644 --- a/src/lib/components/pagination/index.tsx +++ b/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(); diff --git a/src/lib/components/table/proposals/Proposer.tsx b/src/lib/components/table/proposals/Proposer.tsx index 41f8ab3e7..563f29a6e 100644 --- a/src/lib/components/table/proposals/Proposer.tsx +++ b/src/lib/components/table/proposals/Proposer.tsx @@ -4,7 +4,13 @@ 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 }) => { +export const Proposer = ({ + proposer, + amptrackSection, +}: { + proposer: Option; + amptrackSection?: string; +}) => { const getAddressType = useGetAddressType(); return proposer ? ( @@ -12,6 +18,7 @@ export const Proposer = ({ proposer }: { proposer: Option }) => { type={getAddressType(proposer)} value={proposer} showCopyOnHover + ampCopierSection={amptrackSection} /> ) : ( N/A diff --git a/src/lib/components/table/proposals/ResolvedHeight.tsx b/src/lib/components/table/proposals/ResolvedHeight.tsx index e2641de19..2a51910d6 100644 --- a/src/lib/components/table/proposals/ResolvedHeight.tsx +++ b/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 Pending; if (!resolvedHeight || isDepositFailed) @@ -21,6 +23,7 @@ export const ResolvedHeight = ({ type="block_height" value={resolvedHeight.toString()} showCopyOnHover + ampCopierSection={amptrackSection} /> ); }; diff --git a/src/lib/pages/proposals/components/ProposalStatusFilter.tsx b/src/lib/pages/proposals/components/ProposalStatusFilter.tsx index 88e897838..1e249a1ea 100644 --- a/src/lib/pages/proposals/components/ProposalStatusFilter.tsx +++ b/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]); } }; diff --git a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx index 5e67408b1..4cd54d7b2 100644 --- a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx +++ b/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]); } }; diff --git a/src/lib/pages/proposals/index.tsx b/src/lib/pages/proposals/index.tsx index 4804096c0..f5004f4dd 100644 --- a/src/lib/pages/proposals/index.tsx +++ b/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" /> { 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); diff --git a/src/lib/pages/proposals/table/ProposalTableRow.tsx b/src/lib/pages/proposals/table/ProposalTableRow.tsx index d8b775578..7582c9e57 100644 --- a/src/lib/pages/proposals/table/ProposalTableRow.tsx +++ b/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,16 +45,21 @@ 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={() => { + if (!isDepositFailed) { + AmpTrackMintscan("proposal-detail", { + type: proposal.type, + status: proposal.status, + }); + window.open( + `${getExplorerProposalUrl( + currentChainName + )}/${proposal.proposalId.toString()}`, + "_blank", + "noopener,noreferrer" + ); + } + }} > - + ); diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx index abb845856..40fb80e35 100644 --- a/src/lib/services/amplitude.tsx +++ b/src/lib/services/amplitude.tsx @@ -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?: Record +) => 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 ) => 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 }); From 17704585b2a017d35358bcd915bbb6d06a8e7a11 Mon Sep 17 00:00:00 2001 From: bkioshn Date: Tue, 9 May 2023 10:48:51 +0700 Subject: [PATCH 2/4] chore: add changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 30f17eab8..198c092ba 100644 --- a/CHANGELOG.md +++ b/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 From 1c6a9251b3f8c887a84d0506e10dd44900f04c34 Mon Sep 17 00:00:00 2001 From: bkioshn Date: Tue, 9 May 2023 13:07:28 +0700 Subject: [PATCH 3/4] fix: fix type and condition --- src/lib/components/InputWithIcon.tsx | 2 +- .../proposals/table/ProposalTableRow.tsx | 32 ++++++++++--------- src/lib/services/amplitude.tsx | 4 +-- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx index 66beb7558..dc6470084 100644 --- a/src/lib/components/InputWithIcon.tsx +++ b/src/lib/components/InputWithIcon.tsx @@ -27,7 +27,7 @@ const InputWithIcon = ({ value={value} onChange={onChange} size={size} - onClick={() => action && AmpTrackUseInput(action)} + onClick={action ? () => AmpTrackUseInput(action) : undefined} /> diff --git a/src/lib/pages/proposals/table/ProposalTableRow.tsx b/src/lib/pages/proposals/table/ProposalTableRow.tsx index 7582c9e57..dcbb6a425 100644 --- a/src/lib/pages/proposals/table/ProposalTableRow.tsx +++ b/src/lib/pages/proposals/table/ProposalTableRow.tsx @@ -45,21 +45,23 @@ export const ProposalTableRow = ({ minW="min-content" cursor={isDepositFailed ? "default" : "pointer"} _hover={{ "> div": { bgColor: hoverBg } }} - onClick={() => { - if (!isDepositFailed) { - AmpTrackMintscan("proposal-detail", { - type: proposal.type, - status: proposal.status, - }); - 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 + } > export const AmpTrackMintscan = ( type: string, // eslint-disable-next-line @typescript-eslint/no-explicit-any - properties?: Record + properties?: Dict ) => track(AmpEvent.MINTSCAN, { type, properties }); export const AmpTrackWebsite = (url: string) => From 081de90d79bd12f5618cb52d4eccddc8f02b1c45 Mon Sep 17 00:00:00 2001 From: bkioshn Date: Tue, 9 May 2023 19:49:11 +0700 Subject: [PATCH 4/4] fix: amp pagination and search bar --- src/lib/components/InputWithIcon.tsx | 4 ++-- src/lib/components/pagination/Next.tsx | 14 +++++++++---- src/lib/components/pagination/Previous.tsx | 17 +++++++++++---- src/lib/components/pagination/index.tsx | 14 ++++++++----- src/lib/services/amplitude.tsx | 24 +++++++++++----------- 5 files changed, 46 insertions(+), 27 deletions(-) diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx index dc6470084..ff7b4f236 100644 --- a/src/lib/components/InputWithIcon.tsx +++ b/src/lib/components/InputWithIcon.tsx @@ -2,7 +2,7 @@ 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 { AmpEvent, AmpTrack } from "lib/services/amplitude"; import { CustomIcon } from "./icon"; @@ -27,7 +27,7 @@ const InputWithIcon = ({ value={value} onChange={onChange} size={size} - onClick={action ? () => AmpTrackUseInput(action) : undefined} + onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined} /> diff --git a/src/lib/components/pagination/Next.tsx b/src/lib/components/pagination/Next.tsx index 4440f3aea..cd12db938 100644 --- a/src/lib/components/pagination/Next.tsx +++ b/src/lib/components/pagination/Next.tsx @@ -1,13 +1,18 @@ import type { ButtonProps } from "@chakra-ui/react"; import { Button } from "@chakra-ui/react"; -import type { FC } from "react"; +import type react from "react"; import { useContext } from "react"; import { AmpTrackPaginationNavigate } from "lib/services/amplitude"; import { PaginatorContext } from "./PaginatorProvider"; -export const Next: FC = ({ children, ...buttonProps }) => { +interface NextProps extends ButtonProps { + children: react.ReactNode; + pageSize: number; +} + +export const Next = ({ children, pageSize, ...buttonProps }: NextProps) => { const { actions, state } = useContext(PaginatorContext); const { changePage } = actions; @@ -15,8 +20,9 @@ export const Next: FC = ({ children, ...buttonProps }) => { const isLast = pagesQuantity ? currentPage > pagesQuantity - 1 : true; const handleNextClick = () => { - AmpTrackPaginationNavigate("next"); - if (!isLast) changePage(currentPage + 1); + const currPage = currentPage + 1; + if (!isLast) changePage(currPage); + AmpTrackPaginationNavigate("next", pageSize, currPage); }; return ( diff --git a/src/lib/components/pagination/Previous.tsx b/src/lib/components/pagination/Previous.tsx index 8066e926e..747d26a60 100644 --- a/src/lib/components/pagination/Previous.tsx +++ b/src/lib/components/pagination/Previous.tsx @@ -1,13 +1,21 @@ import type { ButtonProps } from "@chakra-ui/react"; import { Button } from "@chakra-ui/react"; -import type { FC } from "react"; import { useContext } from "react"; +import type { ReactNode } from "react"; import { AmpTrackPaginationNavigate } from "lib/services/amplitude"; import { PaginatorContext } from "./PaginatorProvider"; -export const Previous: FC = ({ children, ...buttonProps }) => { +interface PreviousProps extends ButtonProps { + children: ReactNode; + pageSize: number; +} +export const Previous = ({ + children, + pageSize, + ...buttonProps +}: PreviousProps) => { const { actions, state } = useContext(PaginatorContext); const { changePage } = actions; @@ -15,8 +23,9 @@ export const Previous: FC = ({ children, ...buttonProps }) => { const isFirst = currentPage === 1; const handlePreviousClick = () => { - AmpTrackPaginationNavigate("previous"); - if (!isFirst) changePage(currentPage - 1); + const currPage = currentPage - 1; + if (!isFirst) changePage(currPage); + AmpTrackPaginationNavigate("previous", pageSize, currPage); }; return ( diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx index 8148bf0cd..8a0e4bf2e 100644 --- a/src/lib/components/pagination/index.tsx +++ b/src/lib/components/pagination/index.tsx @@ -3,7 +3,7 @@ import type { ChangeEvent } from "react"; import { useEffect, useMemo } from "react"; import { CustomIcon } from "../icon"; -import { AmpTrackPaginationPage } from "lib/services/amplitude"; +import { AmpEvent, AmpTrack } from "lib/services/amplitude"; import { scrollToComponent, scrollToTop, scrollYPosition } from "lib/utils"; import { Next } from "./Next"; @@ -32,7 +32,6 @@ export const Pagination = ({ }: PaginationProps) => { useEffect(() => { const windowPosition = scrollYPosition(); - AmpTrackPaginationPage(pageSize, currentPage); if (windowPosition) { if (!scrollComponentId) { scrollToTop(); @@ -67,7 +66,12 @@ export const Pagination = ({ focusBorderColor="none" cursor="pointer" value={pageSize} - onChange={onPageSizeChange} + onChange={(e) => { + AmpTrack(AmpEvent.USE_PAGINATION_PAGE_SIZE, { + pageSize: e.target.value, + }); + onPageSizeChange(e); + }} > @@ -78,10 +82,10 @@ export const Pagination = ({ {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()}`} - + - + diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx index ffc350917..9c5bb0f27 100644 --- a/src/lib/services/amplitude.tsx +++ b/src/lib/services/amplitude.tsx @@ -96,11 +96,11 @@ 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_SEARCH_INPUT = "Use Search 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_PAGE_SIZE = "Use Pagination Page Size", USE_PAGINATION_NAVIGATION = "Use Pagination Navigation", USE_CREATE_NEW_PROPOSAL = "Use Create New Proposal", // TX @@ -139,8 +139,6 @@ type SpecialAmpEvent = | AmpEvent.USE_UNSUPPORTED_ASSETS | AmpEvent.USE_COPIER | AmpEvent.USE_EXPAND - | AmpEvent.USE_INPUT - | AmpEvent.USE_PAGINATION_PAGE | AmpEvent.USE_PAGINATION_NAVIGATION | AmpEvent.USE_FILTER_PROPOSALS_STATUS | AmpEvent.USE_FILTER_PROPOSALS_TYPE; @@ -215,17 +213,19 @@ export const AmpTrackExpand = ( section: Option ) => 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 }); +export const AmpTrackPaginationNavigate = ( + navigate: string, + pageSize: number, + currentPage: number +) => + track(AmpEvent.USE_PAGINATION_NAVIGATION, { + navigate, + pageSize, + currentPage, + });