Amp/pool nav

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

src/lib/components/ViewPermissionAddresses.tsx

@@ -37,11 +37,11 @@ export const ViewPermissionAddresses = ({
         <Button
           variant="ghost-lilac"
           onClick={() => {
-            AmpTrackExpand(
-              viewAll ? "collapse" : "expand",
-              "permission_address",
-              amptrackSection
-            );
+            AmpTrackExpand({
+              action: viewAll ? "collapse" : "expand",
+              component: "permission_address",
+              section: amptrackSection,
+            });
             setViewAll((prev) => !prev);
           }}
           size="sm"

src/lib/components/json/JsonReadOnly.tsx

@@ -88,11 +88,11 @@ const JsonReadOnly = ({
       {showExpandButton && (
         <ViewFullMsgButton
           onClick={() => {
-            AmpTrackExpand(
-              viewFull ? "collapse" : "expand",
-              "json",
-              amptrackSection
-            );
+            AmpTrackExpand({
+              action: viewFull ? "collapse" : "expand",
+              component: "json",
+              section: amptrackSection,
+            });
             setViewFull((prev) => !prev);
           }}
           viewFull={viewFull}

src/lib/pages/pools/components/FilterByPoolType.tsx

@@ -2,6 +2,7 @@ import { Grid } from "@chakra-ui/react";
 
 import { BALANCER_ICON, STABLESWAP_ICON } from "../constant";
 import { SelectInput } from "lib/components/forms";
+import { AmpEvent, AmpTrackUseFilter } from "lib/services/amplitude";
 import type { PoolTypeFilter } from "lib/types";
 
 interface PoolTypeOption {
@@ -46,7 +47,10 @@ export const FilterByPoolType = ({
     <SelectInput<PoolTypeFilter>
       formLabel="Filter by Pool Type"
       options={options}
-      onChange={setPoolTypeValue}
+      onChange={(newVal) => {
+        AmpTrackUseFilter(AmpEvent.USE_FILTER_POOL_TYPE, [newVal], newVal);
+        setPoolTypeValue(newVal);
+      }}
       initialSelected={initialSelected}
       labelBgColor={labelBgColor}
     />

src/lib/pages/pools/components/PoolLogo.tsx

@@ -34,22 +34,28 @@ export const PoolLogo = ({
   marginLeft = -12,
   minW = 24,
   textVariant = "body2",
-}: PoolLogoProps) => (
-  <Flex
-    css={{
-      ">:not(:first-of-type)": {
-        marginLeft,
-      },
-    }}
-    minW={minW}
-    alignItems="center"
-    justifyContent="center"
-  >
-    {tokens.length > 3 ? (
-      <>
-        {tokens.slice(0, 2).map((token, idx) => (
-          <PoolAssetLogo token={token} logoSize={logoSize} idx={idx} />
-        ))}
+}: PoolLogoProps) => {
+  const isShortened = tokens.length > 3;
+  return (
+    <Flex
+      css={{
+        ">:not(:first-of-type)": {
+          marginLeft,
+        },
+      }}
+      minW={minW}
+      alignItems="center"
+      justifyContent="center"
+    >
+      {tokens.slice(0, isShortened ? 2 : undefined).map((token, idx) => (
+        <PoolAssetLogo
+          key={token.denom}
+          token={token}
+          logoSize={logoSize}
+          idx={idx}
+        />
+      ))}
+      {isShortened && (
         <Flex
           width={logoSize}
           height={logoSize}
@@ -61,11 +67,7 @@ export const PoolLogo = ({
         >
           <Text variant={textVariant}> +{tokens.length - 2}</Text>
         </Flex>
-      </>
-    ) : (
-      tokens.map((token, idx) => (
-        <PoolAssetLogo token={token} logoSize={logoSize} idx={idx} />
-      ))
-    )}
-  </Flex>
-);
+      )}
+    </Flex>
+  );
+};

src/lib/pages/pools/components/supportedSection/PoolCard.tsx

@@ -9,6 +9,7 @@ import { getPoolUrl } from "lib/app-fns/explorer";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
+import { AmpTrackWebsite } from "lib/services/amplitude";
 import type { USD, Pool, Token, U } from "lib/types";
 import { formatPrice } from "lib/utils";
 
@@ -64,7 +65,10 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
         <Tooltip label="See in osmosis.zone">
           <Link
             href={`${getPoolUrl(currentChainName)}/${item.id}`}
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              AmpTrackWebsite(`${getPoolUrl(currentChainName)}/${item.id}`);
+              e.stopPropagation();
+            }}
             target="_blank"
             rel="noopener noreferrer"
           >

src/lib/pages/pools/components/supportedSection/index.tsx

@@ -24,6 +24,11 @@ import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { ToggleWithName } from "lib/components/ToggleWithName";
 import { Order_By } from "lib/gql/graphql";
+import {
+  AmpTrackUseSort,
+  AmpTrackUseToggle,
+  AmpTrackUseView,
+} from "lib/services/amplitude";
 import { useAssetInfos } from "lib/services/assetService";
 import { usePoolListCountQuery } from "lib/services/poolService";
 import type { PoolTypeFilter } from "lib/types";
@@ -123,7 +128,7 @@ export const SupportedSection = ({
   return (
     <>
       <Flex alignItems="center" mb={12}>
-        <Flex grow="2" gap={4}>
+        <Flex grow={2} gap={4}>
           <InputWithIcon
             placeholder="Search with Pool ID, Symbol or Token ID"
             value={keyword}
@@ -132,6 +137,7 @@ export const SupportedSection = ({
               setValue("keyword", e.target.value);
             }}
             size="lg"
+            action="supported-pool-list-search"
           />
           <FilterByPoolType
             initialSelected="All"
@@ -148,6 +154,7 @@ export const SupportedSection = ({
                 defaultChecked={isSuperfluidOnly}
                 onChange={(e) => {
                   setCurrentPage(1);
+                  AmpTrackUseToggle("isSuperfluidOnly", e.target.checked);
                   setValue("isSuperfluidOnly", e.target.checked);
                 }}
               />
@@ -172,15 +179,19 @@ export const SupportedSection = ({
           </Badge>
         </Flex>
         <Flex gap={4}>
-          <Flex gap="2" alignItems="center">
+          <Flex gap={2} alignItems="center">
             <Text variant="body2" color="text.dark">
               Sort Pool ID:
             </Text>
             <Button
               variant="outline-gray"
               size="sm"
-              pr="1"
-              onClick={() => setShowNewest(!showNewest)}
+              pr={1}
+              onClick={() => {
+                const isDesc = !showNewest;
+                AmpTrackUseSort(isDesc ? "descending" : "ascending");
+                setShowNewest(isDesc);
+              }}
             >
               {showNewest ? "Newest First" : "Oldest First"}
               <CustomIcon
@@ -189,14 +200,17 @@ export const SupportedSection = ({
               />
             </Button>
           </Flex>
-          <Flex gap="2" alignItems="center">
+          <Flex gap={2} alignItems="center">
             <Text variant="body2" color="text.dark">
               View asset allocation in:
             </Text>
             <ToggleWithName
               selectedValue={toggle}
               options={OPTIONS}
-              selectOption={(value: string) => setToggle(value)}
+              selectOption={(value: string) => {
+                AmpTrackUseView(value);
+                setToggle(value);
+              }}
             />
           </Flex>
         </Flex>

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 }) => (
         <>
-          <AccordionButton>
+          <AccordionButton
+            onClick={() =>
+              AmpTrackExpand({
+                action: !isExpanded ? "expand" : "collapse",
+                component: "unsupported_pool",
+                info: { poolId: item.id },
+                section: "pool-list-page",
+              })
+            }
+          >
             <Flex gap={4} flexDirection="column" p={4} w="full">
               <Flex alignItems="center" justifyContent="space-between">
                 <PoolHeader
@@ -66,7 +76,12 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
                   <Tooltip label="See in osmosis.zone">
                     <Link
                       href={`${getPoolUrl(currentChainName)}/${item.id}`}
-                      onClick={(e) => 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) => {
                       />
                     </Link>
                   </Tooltip>
-                  {isExpanded ? (
-                    <StyledIconButton
-                      variant="none"
-                      aria-label="external"
-                      _hover={{ backgroundColor: hoverBgColor }}
-                      icon={<CustomIcon name="chevron-up" />}
-                    />
-                  ) : (
-                    <StyledIconButton
-                      variant="none"
-                      aria-label="external"
-                      _hover={{ backgroundColor: hoverBgColor }}
-                      icon={<CustomIcon name="chevron-down" />}
-                    />
-                  )}
+                  <StyledIconButton
+                    variant="none"
+                    aria-label="external"
+                    _hover={{ backgroundColor: hoverBgColor }}
+                    icon={
+                      <CustomIcon
+                        name="chevron-down"
+                        transform={isExpanded ? "rotate(180deg)" : "rotate(0)"}
+                        transition="all .25s ease-in-out"
+                      />
+                    }
+                  />
                 </Flex>
               </Flex>
             </Flex>
@@ -144,13 +156,16 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
                     View Pool Details
                   </Button>
                   <Button
-                    onClick={() =>
+                    onClick={() => {
+                      AmpTrackWebsite(
+                        `${getPoolUrl(currentChainName)}/${item.id}`
+                      );
                       window.open(
                         `${getPoolUrl(currentChainName)}/${item.id}`,
                         "_blank",
                         "noopener,noreferrer"
-                      )
-                    }
+                      );
+                    }}
                     size="sm"
                     variant="outline-primary"
                     rightIcon={