(Swap tool) Add top gainer ampli event and add feature flag (#3962)

osmosis-labs · Nov 21, 2024 · 8419dea · 8419dea
1 parent 3d3c557
commit 8419dea
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 15 deletions.
diff --git a/packages/types/src/feature-flags-types.ts b/packages/types/src/feature-flags-types.ts
@@ -22,4 +22,5 @@ export type AvailableFlags =
   | "sqsActiveOrders"
   | "alloyedAssets"
   | "bridgeDepositAddress"
-  | "nomicWithdrawAmount";
+  | "nomicWithdrawAmount"
+  | "swapToolTopGainers";
diff --git a/packages/web/components/assets/highlights-categories.tsx b/packages/web/components/assets/highlights-categories.tsx
@@ -145,6 +145,7 @@ export const AssetHighlights: FunctionComponent<
     isLoading?: boolean;
     disableLinking?: boolean;
     highlight: Highlight;
+    onClickAsset?: (asset: HighlightAsset) => void;
   } & CustomClasses
 > = ({
   title,
@@ -154,6 +155,7 @@ export const AssetHighlights: FunctionComponent<
   isLoading = false,
   className,
   highlight,
+  onClickAsset,
 }) => {
   const { t } = useTranslation();
 
@@ -192,6 +194,7 @@ export const AssetHighlights: FunctionComponent<
                 asset={asset}
                 extraInfo={extraInfo}
                 highlight={highlight}
+                onClick={onClickAsset}
               />
             ))}
           </>
@@ -201,21 +204,21 @@ export const AssetHighlights: FunctionComponent<
   );
 };
 
+type HighlightAsset = {
+  coinDenom: string;
+  coinName: string;
+  coinImageUrl?: string;
+  href?: string;
+  externalLink?: boolean;
+};
+
 const AssetHighlightRow: FunctionComponent<{
-  asset: {
-    coinDenom: string;
-    coinName: string;
-    coinImageUrl?: string;
-    href?: string;
-    externalLink?: boolean;
-  };
+  asset: HighlightAsset;
   extraInfo: ReactNode;
   highlight: Highlight;
-}> = ({
-  asset: { coinDenom, coinName, coinImageUrl, href, externalLink },
-  extraInfo,
-  highlight,
-}) => {
+  onClick?: (asset: HighlightAsset) => void;
+}> = ({ asset, extraInfo, highlight, onClick }) => {
+  const { coinDenom, coinName, coinImageUrl, href, externalLink } = asset;
   const { logEvent } = useAmplitudeAnalytics();
 
   const AssetContent = (
@@ -234,7 +237,10 @@ const AssetHighlightRow: FunctionComponent<{
   );
 
   return !href ? (
-    <div className="-mx-2 flex items-center justify-between gap-4 rounded-lg p-2">
+    <div
+      className="-mx-2 flex items-center justify-between gap-4 rounded-lg p-2"
+      onClick={() => onClick?.(asset)}
+    >
       {AssetContent}
     </div>
   ) : (
@@ -245,6 +251,7 @@ const AssetHighlightRow: FunctionComponent<{
       className="-mx-2 flex items-center justify-between gap-4 rounded-lg p-2 transition-colors duration-200 ease-in-out hover:cursor-pointer hover:bg-osmoverse-850"
       onClick={() => {
         logEvent([EventName.Assets.assetClicked, { coinDenom, highlight }]);
+        onClick?.(asset);
       }}
     >
       {AssetContent}

diff --git a/packages/web/config/analytics-events.ts b/packages/web/config/analytics-events.ts
@@ -82,6 +82,7 @@ export type EventProperties = {
   section: string;
   tokenIn: string;
   tokenOut: string;
+  token: string;
   option: string;
   numberOfValidators: number;
   validatorNames: string[];
@@ -114,6 +115,7 @@ export const EventName = {
     swapCompleted: "Swap: Swap completed",
     swapFailed: "Swap: Swap failed",
     dropdownAssetSelected: "Swap: Dropdown asset selected",
+    checkTopGainers: "Swap: Check Top Gainers",
   },
   // Events in Sidebar UI
   Sidebar: {

diff --git a/packages/web/hooks/use-feature-flags.ts b/packages/web/hooks/use-feature-flags.ts
@@ -29,6 +29,7 @@ const defaultFlags: Record<AvailableFlags, boolean> = {
   alloyedAssets: false,
   bridgeDepositAddress: false,
   nomicWithdrawAmount: false,
+  swapToolTopGainers: false,
 };
 
 export function useFeatureFlags() {

diff --git a/packages/web/pages/index.tsx b/packages/web/pages/index.tsx
@@ -61,7 +61,7 @@ const Home = () => {
                 setPreviousTrade={setPreviousTrade}
               />
             </ClientOnly>
-            <TopGainers />
+            {featureFlags.swapToolTopGainers && <TopGainers />}
           </div>
         </div>
       </div>
@@ -72,6 +72,7 @@ const Home = () => {
 const TopGainers = () => {
   const { t } = useTranslation();
   const router = useRouter();
+  const { logEvent } = useAmplitudeAnalytics();
 
   const { data: topGainerAssets, isLoading: isTopGainerAssetsLoading } =
     api.edge.assets.getTopGainerAssets.useQuery({
@@ -86,8 +87,12 @@ const TopGainers = () => {
       isLoading={isTopGainerAssetsLoading}
       assets={(topGainerAssets ?? []).map(highlightPrice24hChangeAsset)}
       onClickSeeAll={() => {
+        logEvent([EventName.Swap.checkTopGainers, { token: "All" }]);
         router.push(`/assets?category=topGainers`);
       }}
+      onClickAsset={(asset) => {
+        logEvent([EventName.Swap.checkTopGainers, { token: asset.coinDenom }]);
+      }}
       highlight="topGainers"
     />
   );