diff --git a/CHANGELOG.md b/CHANGELOG.md index c7d8136ad..51801c812 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 +- [#355](https://github.com/alleslabs/celatone-frontend/pull/355) Add Amp for Pool List page - [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table - [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page - [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list diff --git a/src/lib/components/ViewPermissionAddresses.tsx b/src/lib/components/ViewPermissionAddresses.tsx index 96ff89e09..cecec5d44 100644 --- a/src/lib/components/ViewPermissionAddresses.tsx +++ b/src/lib/components/ViewPermissionAddresses.tsx @@ -37,11 +37,11 @@ export const ViewPermissionAddresses = ({ - + View asset allocation in: setToggle(value)} + selectOption={(value: string) => { + AmpTrackUseView(value); + setToggle(value); + }} /> diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx index f2322f026..f12026c55 100644 --- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx +++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx @@ -19,6 +19,7 @@ import { useInternalNavigate } from "lib/app-provider"; import { Copier } from "lib/components/copy"; import { CustomIcon } from "lib/components/icon"; import { Tooltip } from "lib/components/Tooltip"; +import { AmpTrackExpand, AmpTrackWebsite } from "lib/services/amplitude"; import type { Pool } from "lib/types"; import { formatUTokenWithPrecision } from "lib/utils"; @@ -53,7 +54,16 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => { > {({ isExpanded }) => ( <> - + + AmpTrackExpand({ + action: !isExpanded ? "expand" : "collapse", + component: "unsupported_pool", + info: { poolId: item.id }, + section: "pool-list-page", + }) + } + > { e.stopPropagation()} + onClick={(e) => { + AmpTrackWebsite( + `${getPoolUrl(currentChainName)}/${item.id}` + ); + e.stopPropagation(); + }} target="_blank" rel="noopener noreferrer" > @@ -78,21 +93,18 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => { /> - {isExpanded ? ( - } - /> - ) : ( - } - /> - )} + + } + /> @@ -144,13 +156,16 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => { View Pool Details - ) : ( - - )} + - + diff --git a/src/lib/pages/pools/index.tsx b/src/lib/pages/pools/index.tsx index ab311567e..1b67614d6 100644 --- a/src/lib/pages/pools/index.tsx +++ b/src/lib/pages/pools/index.tsx @@ -1,9 +1,11 @@ import { Heading, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react"; +import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { CustomTab } from "lib/components/CustomTab"; import { LoadingOverlay } from "lib/components/LoadingOverlay"; import PageContainer from "lib/components/PageContainer"; +import { AmpEvent, AmpTrack, AmpTrackUseTab } from "lib/services/amplitude"; import { usePoolListCountQuery } from "lib/services/poolService"; import { SupportedSection } from "./components/supportedSection"; @@ -15,6 +17,7 @@ enum TabIndex { } export const PoolIndex = () => { + const router = useRouter(); const [tabIndex, setTabIndex] = useState(TabIndex.Supported); const { data: supportedPoolCount, isLoading: isLoadingSupported } = @@ -32,16 +35,25 @@ export const PoolIndex = () => { search: "", }); + const handleTabChange = (tab: TabIndex) => { + AmpTrackUseTab(TabIndex[tab]); + setTabIndex(tab); + }; + const sectionHeaderId = "poolListTab"; + useEffect(() => { + if (router.isReady) AmpTrack(AmpEvent.TO_POOL_LIST); + }, [router.isReady]); + useEffect(() => { if ( supportedPoolCount !== undefined && unsupportedPoolCount !== undefined ) { if (supportedPoolCount === 0 && unsupportedPoolCount > 0) - setTabIndex(TabIndex.Unsupported); - else setTabIndex(TabIndex.Supported); + handleTabChange(TabIndex.Unsupported); + else handleTabChange(TabIndex.Supported); } }, [supportedPoolCount, unsupportedPoolCount]); @@ -55,13 +67,13 @@ export const PoolIndex = () => { setTabIndex(TabIndex.Supported)} + onClick={() => handleTabChange(TabIndex.Supported)} > Pools setTabIndex(TabIndex.Unsupported)} + onClick={() => handleTabChange(TabIndex.Unsupported)} > Pools with unsupported tokens diff --git a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx index 0c5458a0b..6831e0918 100644 --- a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx +++ b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx @@ -114,11 +114,11 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => { justify="space-between" cursor="pointer" onClick={() => { - AmpTrackExpand( - expand ? "collapse" : "expand", - "event_box", - "tx_page" - ); + AmpTrackExpand({ + action: expand ? "collapse" : "expand", + component: "event_box", + section: "tx_page", + }); setExpand((prev) => !prev); }} p={4} diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx index 668c2ebe2..00e158f9a 100644 --- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx +++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx @@ -63,11 +63,11 @@ const MultiCoin = ({ showLessText="View Less Assets" toggleShowMore={showMore} setToggleShowMore={() => { - AmpTrackExpand( - showMore ? "collapse" : "expand", - "assets", - "tx_page" - ); + AmpTrackExpand({ + action: showMore ? "collapse" : "expand", + component: "assets", + section: "tx_page", + }); setShowMore(!showMore); }} /> diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx index 9c5bb0f27..4784492db 100644 --- a/src/lib/services/amplitude.tsx +++ b/src/lib/services/amplitude.tsx @@ -54,6 +54,7 @@ export enum AmpEvent { TO_TRANSACTION_DETAIL = "To Transaction Detail", TO_NOT_FOUND = "To 404 Not Found", TO_FAUCET = "To Faucet", + TO_POOL_LIST = "To Pool List", // ACTIONS ACTION_UPLOAD = "Act Upload", ACTION_INSTANTIATE = "Action Instantiate", @@ -96,13 +97,18 @@ export enum AmpEvent { USE_UNSUPPORTED_ASSETS = "Use Unsupported Assets", USE_TX_MSG_EXPAND = "Use Transaction Message Expand", USE_EXPAND = "Use General Expand", + USE_EXPAND_ALL = "Use Expand All", 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_FILTER_POOL_TYPE = "Use Filter Pool Types", USE_PAGINATION_PAGE_SIZE = "Use Pagination Page Size", USE_PAGINATION_NAVIGATION = "Use Pagination Navigation", USE_CREATE_NEW_PROPOSAL = "Use Create New Proposal", + USE_SORT = "Use Sort", + USE_VIEW = "Use View", + USE_TOGGLE = "Use Toggle", // TX TX_SUCCEED = "Tx Succeed", TX_FAILED = "Tx Failed", @@ -139,9 +145,14 @@ type SpecialAmpEvent = | AmpEvent.USE_UNSUPPORTED_ASSETS | AmpEvent.USE_COPIER | AmpEvent.USE_EXPAND + | AmpEvent.USE_EXPAND_ALL | AmpEvent.USE_PAGINATION_NAVIGATION | AmpEvent.USE_FILTER_PROPOSALS_STATUS - | AmpEvent.USE_FILTER_PROPOSALS_TYPE; + | AmpEvent.USE_FILTER_PROPOSALS_TYPE + | AmpEvent.USE_FILTER_POOL_TYPE + | AmpEvent.USE_SORT + | AmpEvent.USE_VIEW + | AmpEvent.USE_TOGGLE; export const AmpTrackInvalidState = (title: string) => track(AmpEvent.INVALID_STATE, { title }); @@ -207,11 +218,25 @@ export const AmpTrackUnsupportedToken = (page: Option) => export const AmpTrackCopier = (section: Option, type: string) => track(AmpEvent.USE_COPIER, { section, type }); -export const AmpTrackExpand = ( - action: "expand" | "collapse", - component: "assets" | "json" | "permission_address" | "event_box", - section: Option -) => track(AmpEvent.USE_EXPAND, { action, component, section }); +export const AmpTrackExpand = ({ + action, + component, + info, + section, +}: { + action: "expand" | "collapse"; + component: + | "assets" + | "json" + | "permission_address" + | "event_box" + | "unsupported_pool"; + info?: object; + section?: string; +}) => track(AmpEvent.USE_EXPAND, { action, component, info, section }); + +export const AmpTrackExpandAll = (action: "expand" | "collapse") => + track(AmpEvent.USE_EXPAND, { action }); export const AmpTrackUseFilter = ( ampEvent: AmpEvent, @@ -229,3 +254,12 @@ export const AmpTrackPaginationNavigate = ( pageSize, currentPage, }); + +export const AmpTrackUseSort = (order: "ascending" | "descending") => + track(AmpEvent.USE_SORT, { order }); + +export const AmpTrackUseView = (view: string) => + track(AmpEvent.USE_VIEW, { view }); + +export const AmpTrackUseToggle = (name: string, isActive: boolean) => + track(AmpEvent.USE_TOGGLE, { name, isActive }); diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts index 63bc7243c..2519b1316 100644 --- a/src/lib/types/pool.ts +++ b/src/lib/types/pool.ts @@ -37,8 +37,8 @@ export interface PoolDetail< swapFee: Ratio; exitFee: Ratio; futurePoolGovernor: string | null; + weight: PoolWeight[] | null; smoothWeightChangeParams: object | null; scalingFactors: string[] | null; scalingFactorController: string | null; - weight: PoolWeight[] | null; }