Add extra telemetry events for Add Tokens

- Adding a new event for when the routes drawer opens - Enriching the Succeed event with extra props
immutable · Nov 29, 2024 · 46ee641 · 46ee641
1 parent 9aa3529
commit 46ee641
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 9 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/components/OptionsDrawer.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/components/OptionsDrawer.tsx
@@ -1,6 +1,6 @@
 import { Drawer, EllipsizedText, MenuItem } from '@biom3/react';
 import { motion } from 'framer-motion';
-import { useContext, useRef } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 
 import { Checkout } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
@@ -9,6 +9,7 @@ import { Options } from './Options';
 import { FiatOptionType, RouteData } from '../types';
 import { AddTokensContext } from '../context/AddTokensContext';
 import { useProvidersContext } from '../../../context/providers-context/ProvidersContext';
+import { useAnalytics, UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 type OptionsDrawerProps = {
   checkout: Checkout;
@@ -38,8 +39,10 @@ export function OptionsDrawer({
   insufficientBalance,
 }: OptionsDrawerProps) {
   const { t } = useTranslation();
+  const { track } = useAnalytics();
+
   const {
-    addTokensState: { chains },
+    addTokensState: { id, chains },
   } = useContext(AddTokensContext);
 
   const {
@@ -53,6 +56,27 @@ export function OptionsDrawer({
     onRouteClick(route);
   };
 
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    track({
+      userJourney: UserJourney.ADD_TOKENS,
+      screen: 'InputScreen',
+      control: 'RoutesMenu',
+      controlType: 'MenuItem',
+      action: 'Opened',
+      extras: {
+        contextId: id,
+        showOnrampOption: Boolean(showOnrampOption),
+        showSwapOption: Boolean(showSwapOption),
+        insufficientBalance: Boolean(insufficientBalance),
+        routesAvailable: routes?.length ?? 0,
+      },
+    });
+  }, [visible]);
+
   return (
     <Drawer
       size="full"

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx
@@ -34,7 +34,7 @@ import {
   AddTokensReviewData,
   AddTokensWidgetViews,
 } from '../../../context/view-context/AddTokensViewContextTypes';
-import { AddTokensErrorTypes, RiveStateMachineInput } from '../types';
+import { AddTokensErrorTypes, AmountData, RiveStateMachineInput } from '../types';
 import { useExecute } from '../hooks/useExecute';
 import {
   ViewActions,
@@ -117,6 +117,7 @@ export function Review({
   } = useContext(EventTargetContext);
 
   const [route, setRoute] = useState<RouteResponse | undefined>();
+  const [amountData, setAmountData] = useState<AmountData | undefined>();
   const [proceedDisabled, setProceedDisabled] = useState(true);
   const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
   const [showAddressMissmatchDrawer, setShowAddressMissmatchDrawer] = useState(false);
@@ -149,7 +150,7 @@ export function Review({
 
     if (!fromAddress || !toAddress) return;
 
-    const amountData = getAmountData(
+    const updatedAmountData = getAmountData(
       tokens,
       data.balance,
       data.toAmount,
@@ -159,20 +160,21 @@ export function Review({
         : data.toTokenAddress,
       data.additionalBuffer,
     );
-    if (!amountData) return;
+    if (!updatedAmountData) return;
 
     const routeResponse = await getRoute(
       squid,
-      amountData?.fromToken,
-      amountData?.toToken,
+      updatedAmountData?.fromToken,
+      updatedAmountData?.toToken,
       toAddress,
-      amountData.fromAmount,
-      amountData.toAmount,
+      updatedAmountData.fromAmount,
+      updatedAmountData.toAmount,
       fromAddress,
       false,
     );
 
     setRoute(routeResponse.route);
+    setAmountData(updatedAmountData);
     setProceedDisabled(false);
   };
 
@@ -385,6 +387,16 @@ export function Review({
             && { txHash: executeTxnReceipt.transactionHash }),
           ...(route.route.params.fromChain === ChainId.IMTBL_ZKEVM_MAINNET.toString()
             && { immutableZkEVMTxHash: executeTxnReceipt.transactionHash }),
+          toTokenAddress: route.route.params.toToken,
+          toTokenChainId: route.route.params.toChain,
+          fromTokenAddress: route.route.params.fromToken,
+          fromTokenChainId: route.route.params.fromChain,
+          fromAmount: route.route.params.fromAmount,
+          fromAddress: route.route.params.fromAddress,
+          toAddress: route.route.params.toAddress,
+          toAmount: data.toAmount,
+          fromTokenSymbol: amountData?.fromToken.symbol,
+          toTokenSymbol: amountData?.toToken.symbol,
         },
       });