feat: add amp pool detail

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#358](https://github.com/alleslabs/celatone-frontend/pull/358) Add Amp for Pool Detail page
 - [#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

src/lib/components/ValidatorBadge.tsx

@@ -10,6 +10,7 @@ import { removeSpecialChars } from "lib/utils";
 interface ValidatorBadgeProps {
   validator: ValidatorInfo | null;
   badgeSize?: ImageProps["boxSize"];
+  ampCopierSection?: string;
 }
 
 const FallbackRender = ({
@@ -33,6 +34,7 @@ const FallbackRender = ({
 export const ValidatorBadge = ({
   validator,
   badgeSize = 10,
+  ampCopierSection,
 }: ValidatorBadgeProps) => {
   const { currentChainName } = useWallet();
   return (
@@ -56,6 +58,7 @@ export const ValidatorBadge = ({
             type="validator_address"
             textFormat="ellipsis"
             showCopyOnHover
+            ampCopierSection={ampCopierSection}
           />
         </>
       ) : (

src/lib/components/action-msg/MsgToken.tsx

@@ -10,13 +10,15 @@ interface MsgTokenProps {
   symbol?: string;
   precision?: number;
   fontWeight?: number;
+  ampCopierSection?: string;
 }
 
 export const MsgToken = ({
   coin,
   symbol,
   precision,
   fontWeight = 600,
+  ampCopierSection,
 }: MsgTokenProps) => (
   <Flex role="group" align="center" gap={1}>
     <Text fontWeight={fontWeight}>
@@ -37,6 +39,7 @@ export const MsgToken = ({
       copyLabel="Token ID Copied!"
       display="none"
       ml="4px"
+      amptrackSection={ampCopierSection}
     />
   </Flex>
 );

src/lib/pages/pools/components/pool-details/JsonModalButton.tsx

@@ -13,6 +13,7 @@ import {
 
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { AmpTrackViewJson } from "lib/services/amplitude";
 import { jsonPrettify } from "lib/utils";
 
 interface JsonModalButtonProps {
@@ -41,7 +42,10 @@ export const JsonModalButton = ({
             m={0}
           />
         }
-        onClick={onOpen}
+        onClick={() => {
+          AmpTrackViewJson(`pool_page_(${modalHeader})`);
+          onOpen();
+        }}
       >
         View JSON
       </Button>

src/lib/pages/pools/components/pool-details/PoolAssets.tsx

@@ -4,6 +4,7 @@ import big from "big.js";
 import Link from "next/link";
 
 import { CustomIcon } from "lib/components/icon";
+import { AmpTrackWebsite } from "lib/services/amplitude";
 import type { PoolDetail, USD } from "lib/types";
 import { formatPrice } from "lib/utils";
 
@@ -47,6 +48,11 @@ export const PoolAssets = ({ pool }: PoolAssetsProps) => {
           href="https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
           target="_blank"
           rel="noopener noreferrer"
+          onClick={() =>
+            AmpTrackWebsite(
+              "https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
+            )
+          }
         >
           <Flex gap="2px" alignItems="center">
             <Text color="lilac.main" variant="body2">

src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx

@@ -10,6 +10,7 @@ import {
 
 import { usePoolTxsCount } from "../../data";
 import { CustomTab } from "lib/components/CustomTab";
+import { AmpTrackUseTab } from "lib/services/amplitude";
 import type { PoolDetail } from "lib/types";
 
 import { PoolRelatedTxsTable } from "./tables/pool-txs";
@@ -45,12 +46,37 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
           borderBottom="1px"
           borderColor="pebble.800"
         >
-          <CustomTab count={countDisplayAllTxs}>All</CustomTab>
-          <CustomTab count={countDisplaySwapTxs}>Swap</CustomTab>
-          <CustomTab count={countDisplayLpTxs}>LP</CustomTab>
-          <CustomTab count={countDisplayBondTxs}>Bonding</CustomTab>
+          <CustomTab
+            count={countDisplayAllTxs}
+            onClick={() => AmpTrackUseTab("All")}
+          >
+            All
+          </CustomTab>
+          <CustomTab
+            count={countDisplaySwapTxs}
+            onClick={() => AmpTrackUseTab("Swap")}
+          >
+            Swap
+          </CustomTab>
+          <CustomTab
+            count={countDisplayLpTxs}
+            onClick={() => AmpTrackUseTab("LP")}
+          >
+            LP
+          </CustomTab>
+          <CustomTab
+            count={countDisplayBondTxs}
+            onClick={() => AmpTrackUseTab("Bonding")}
+          >
+            Bonding
+          </CustomTab>
           {pool.isSuperfluid && (
-            <CustomTab count={countDisplaySuperfluidTxs}>Superfluid</CustomTab>
+            <CustomTab
+              count={countDisplaySuperfluidTxs}
+              onClick={() => AmpTrackUseTab("Superfluid")}
+            >
+              Superfluid
+            </CustomTab>
           )}
         </TabList>
         <TabPanels>

src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx

@@ -29,10 +29,10 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
       <LabelText label="Pool ID">
         <CopyLink
           value={pool.id.toString()}
-          amptrackSection="pool_details_id"
           type="pool_id"
           showCopyOnHover
           w="50px"
+          amptrackSection="pool_info"
         />
       </LabelText>
       <LabelText label="Created Height">
@@ -41,6 +41,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           value={(pool.blockHeight ?? "N/A").toString()}
           showCopyOnHover
           isReadOnly={!pool.blockHeight}
+          ampCopierSection="pool_info"
         />
       </LabelText>
       <LabelText label="Pool Created by">
@@ -51,6 +52,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           showCopyOnHover
           textFormat="truncate"
           w="140px"
+          ampCopierSection="pool_info"
         />
       </LabelText>
       <LabelText

src/lib/pages/pools/components/pool-details/header/index.tsx

@@ -6,6 +6,7 @@ import { getPoolUrl } from "lib/app-fns/explorer";
 import { useLCDEndpoint } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { openNewTab } from "lib/hooks";
+import { AmpTrackViewJson, AmpTrackWebsite } from "lib/services/amplitude";
 import type { PoolDetail } from "lib/types";
 
 import { PoolInfo } from "./PoolInfo";
@@ -18,10 +19,14 @@ export const PoolTopSection = ({ pool }: PoolTopSectionProps) => {
   const { currentChainName } = useWallet();
   const lcdEndpoint = useLCDEndpoint();
 
-  const openPoolLcd = () =>
+  const openPoolLcd = () => {
+    AmpTrackViewJson("pool_page_pool_lcd");
     openNewTab(`${lcdEndpoint}/osmosis/gamm/v1beta1/pools/${pool.id}`);
-  const openOsmosisPool = () =>
+  };
+  const openOsmosisPool = () => {
+    AmpTrackWebsite(`${getPoolUrl(currentChainName)}/${pool.id}`);
     openNewTab(`${getPoolUrl(currentChainName)}/${pool.id}`);
+  };
   return (
     <>
       <Flex justifyContent="space-between" align="center" w="full">

src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx

@@ -69,6 +69,7 @@ export const PoolAssetsTableRow = ({
                   value={token.denom}
                   copyLabel="Token ID Copied!"
                   ml={0}
+                  amptrackSection="pool_assets"
                 />
               </Flex>
             </Flex>

src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx

@@ -4,6 +4,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
 import { Tooltip } from "lib/components/Tooltip";
+import { AmpTrackExpand } from "lib/services/amplitude";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Message, Option, PoolDetail, Transaction } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
@@ -37,7 +38,6 @@ export const PoolTxsMsg = ({
     .concat("1fr")
     .join(" ");
   const isFirstSubRow = msgIndex === 0;
-
   return (
     <Box
       w="full"
@@ -54,9 +54,19 @@ export const PoolTxsMsg = ({
       <Grid
         className="copier-wrapper"
         templateColumns={templateColumns}
-        onClick={onToggle}
         transition="all .25s ease-in-out"
         cursor="pointer"
+        onClick={() => {
+          if (message) {
+            AmpTrackExpand({
+              action: !isOpen ? "expand" : "collapse",
+              component: "pool_tx_msg",
+              info: { msgType: message.type.split(".").at(-1) },
+              section: `pool_txs`,
+            });
+          }
+          onToggle();
+        }}
       >
         <TableNoBorderRow pl={2}>
           {transaction.success && message && (
@@ -75,6 +85,7 @@ export const PoolTxsMsg = ({
                 value={transaction.hash.toLocaleUpperCase()}
                 type="tx_hash"
                 showCopyOnHover
+                ampCopierSection={`pool_txs-${transaction.messages.length}-tx_hash`}
               />
               {transaction.messages.length > 1 && (
                 <Tooltip label="There are at least one messages within this transaction that related to this pool.">
@@ -96,7 +107,14 @@ export const PoolTxsMsg = ({
         </TableNoBorderRow>
         <TableNoBorderRow>
           {message ? (
-            <PoolMsgAction msg={message} pool={pool} assetInfos={assetInfos} />
+            <PoolMsgAction
+              msg={message}
+              pool={pool}
+              assetInfos={assetInfos}
+              ampCopierSection={`pool_txs-${message.type
+                .split(".")
+                .at(-1)}-row`}
+            />
           ) : (
             <PoolOtherMsgs otherMsgs={otherMsgs} isIbc={transaction.isIbc} />
           )}
@@ -107,6 +125,7 @@ export const PoolTxsMsg = ({
             value={transaction.sender}
             type="user_address"
             showCopyOnHover
+            ampCopierSection={`pool_txs-${transaction.messages.length}-sender`}
           />
         </TableNoBorderRow>
 
@@ -139,6 +158,9 @@ export const PoolTxsMsg = ({
               pool={pool}
               assetInfos={assetInfos}
               isOpened={isOpen}
+              ampCopierSection={`pool_txs-${message.type
+                .split(".")
+                .at(-1)}-detail`}
             />
           </TableNoBorderRow>
         </Grid>

src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx

@@ -10,7 +10,7 @@ interface PoolOtherMsgsProps {
 export const PoolOtherMsgs = ({ otherMsgs, isIbc }: PoolOtherMsgsProps) => {
   const typePaths = Object.keys(otherMsgs);
   return (
-    <Flex gap={2} flexWrap="wrap" alignItems="center">
+    <Flex gap={2} flexWrap="wrap" alignContent="center">
       Total
       {typePaths.map((typePath, index) => {
         const type = extractMsgType(typePath);

src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx

@@ -17,14 +17,14 @@ interface AssetCardProps extends FlexProps {
   amount: string;
   denom: string;
   assetInfo: Option<AssetInfo>;
-  amptrackSection?: string;
+  ampCopierSection?: string;
 }
 
 export const AssetCard = ({
   amount,
   denom,
   assetInfo,
-  amptrackSection,
+  ampCopierSection,
   ...cardProps
 }: AssetCardProps) => {
   const symbol = assetInfo?.symbol ?? denom;
@@ -36,7 +36,6 @@ export const AssetCard = ({
         minH="100px"
         gap={2}
         p={3}
-        minW="250px"
         background="pebble.800"
         borderRadius="8px"
         {...cardProps}
@@ -69,7 +68,7 @@ export const AssetCard = ({
             copyLabel="Token ID Copied!"
             display="none"
             ml="1px"
-            amptrackSection={amptrackSection}
+            amptrackSection={ampCopierSection}
           />
         </Flex>
 

src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx

@@ -20,6 +20,7 @@ interface PoolAssetCardProps {
   poolAsset: Coin;
   poolAssetInfo: Option<AssetInfo>;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const PoolAssetCard = ({
@@ -29,6 +30,7 @@ export const PoolAssetCard = ({
   poolAsset,
   poolAssetInfo,
   isOpened,
+  ampCopierSection,
 }: PoolAssetCardProps) => {
   const { data: poolAssets, isLoading } = usePoolAssetsbyPoolIds(
     [poolId],
@@ -104,6 +106,7 @@ export const PoolAssetCard = ({
             type="pool_id"
             value={poolId.toString()}
             showCopyOnHover
+            ampCopierSection={ampCopierSection}
           />
         </div>
       </Flex>

src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx

@@ -6,16 +6,22 @@ import type { PoolDetail } from "lib/types";
 
 interface PoolLogoLinkProps {
   pool: PoolDetail;
+  ampCopierSection?: string;
 }
 
-export const PoolLogoLink = ({ pool }: PoolLogoLinkProps) => (
+export const PoolLogoLink = ({ pool, ampCopierSection }: PoolLogoLinkProps) => (
   <Flex gap={1}>
     <PoolLogo
       tokens={pool.poolLiquidity}
       logoSize={5}
       marginLeft={-4}
       minW={0}
     />
-    <ExplorerLink type="pool_id" value={pool.id.toString()} showCopyOnHover />
+    <ExplorerLink
+      type="pool_id"
+      value={pool.id.toString()}
+      showCopyOnHover
+      ampCopierSection={ampCopierSection}
+    />
   </Flex>
 );