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 = ({
+ onClick={() => {
+ AmpTrackWebsite(
+ `${getPoolUrl(currentChainName)}/${item.id}`
+ );
window.open(
`${getPoolUrl(currentChainName)}/${item.id}`,
"_blank",
"noopener,noreferrer"
- )
- }
+ );
+ }}
size="sm"
variant="outline-primary"
rightIcon={
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 20319a783..9398ef341 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -22,6 +22,11 @@ import InputWithIcon from "lib/components/InputWithIcon";
import { Pagination } from "lib/components/pagination";
import { usePaginator } from "lib/components/pagination/usePaginator";
import { Order_By } from "lib/gql/graphql";
+import {
+ AmpTrackExpandAll,
+ AmpTrackUseSort,
+ AmpTrackUseToggle,
+} from "lib/services/amplitude";
import { usePoolListCountQuery } from "lib/services/poolService";
import type { PoolTypeFilter } from "lib/types";
@@ -52,9 +57,8 @@ export const UnsupportedSection = ({
const [expandedIndexes, setExpandedIndexes] = useState([]);
- const updateExpandedIndexes = (indexes: number[]) => {
+ const updateExpandedIndexes = (indexes: number[]) =>
setExpandedIndexes(indexes);
- };
const {
pagesQuantity,
@@ -83,7 +87,7 @@ export const UnsupportedSection = ({
refetchCount();
setPageSize(size);
setCurrentPage(1);
- updateExpandedIndexes([]);
+ setExpandedIndexes([]);
};
const { pools, isLoading } = usePools(
@@ -99,14 +103,16 @@ export const UnsupportedSection = ({
return (
<>
-
+
) =>
- setValue("keyword", e.target.value)
- }
+ onChange={(e: ChangeEvent) => {
+ setCurrentPage(1);
+ setValue("keyword", e.target.value);
+ }}
size="lg"
+ action="unsupported-pool-list-search"
/>
setValue("isSuperfluidOnly", e.target.checked)}
+ onChange={(e) => {
+ setCurrentPage(1);
+ AmpTrackUseToggle("isSuperfluidOnly", e.target.checked);
+ setValue("isSuperfluidOnly", e.target.checked);
+ }}
/>
-
+
Show only
@@ -143,42 +153,40 @@ export const UnsupportedSection = ({
-
+
Sort Pool ID:
- {showNewest ? (
- setShowNewest(!showNewest)}
- >
- Newest First
-
-
- ) : (
- setShowNewest(!showNewest)}
- >
- Oldest First
-
-
- )}
+ {
+ const isDesc = !showNewest;
+ AmpTrackUseSort(isDesc ? "descending" : "ascending");
+ setShowNewest(isDesc);
+ }}
+ >
+ {showNewest ? "Newest First" : "Oldest First"}
+
+
-
+
+ onClick={() => {
+ AmpTrackExpandAll(
+ !expandedIndexes.length ? "expand" : "collapse"
+ );
setExpandedIndexes((prev) =>
- prev.length ? [] : Array.from(Array(pageSize).keys())
- )
- }
+ !prev.length ? Array.from(Array(pageSize).keys()) : []
+ );
+ }}
>
{expandedIndexes.length ? "Collapse All" : "Expand All"}
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;
}