[NO CHANGELOGS] [Add Funds] Analytics events (#2300)

immutable · Oct 14, 2024 · c951308 · c951308
1 parent 6d960c6
commit c951308
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 1 deletion.
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
@@ -56,6 +56,10 @@ import { getProviderSlugFromRdns } from '../../../lib/provider';
 import { useProvidersContext } from '../../../context/providers-context/ProvidersContext';
 import { sendConnectProviderSuccessEvent } from '../AddFundsWidgetEvents';
 import { convertToUsd } from '../functions/convertToUsd';
+import {
+  useAnalytics,
+  UserJourney,
+} from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { validateToAmount } from '../functions/amountValidation';
 import { OnboardingDrawer } from '../components/OnboardingDrawer';
 
@@ -100,6 +104,7 @@ export function AddFunds({
   } = useContext(AddFundsContext);
 
   const { viewDispatch } = useContext(ViewContext);
+  const { track, page } = useAnalytics();
 
   const {
     eventTargetState: { eventTarget },
@@ -124,6 +129,16 @@ export function AddFunds({
   );
 
   const setSelectedAmount = debounce((value: string) => {
+    track({
+      userJourney: UserJourney.ADD_FUNDS,
+      screen: 'InputScreen',
+      control: 'AmountInput',
+      controlType: 'TextInput',
+      extras: {
+        toAmount: value,
+      },
+    });
+
     addFundsDispatch({
       payload: {
         type: AddFundsActions.SET_SELECTED_AMOUNT,
@@ -133,6 +148,16 @@ export function AddFunds({
   }, 2500);
 
   const setSelectedToken = (token: TokenInfo | undefined) => {
+    track({
+      userJourney: UserJourney.ADD_FUNDS,
+      screen: 'InputScreen',
+      control: 'TokensMenu',
+      controlType: 'MenuItem',
+      extras: {
+        tokenAddress: token?.address,
+      },
+    });
+
     addFundsDispatch({
       payload: {
         type: AddFundsActions.SET_SELECTED_TOKEN,
@@ -142,6 +167,21 @@ export function AddFunds({
   };
 
   const setSelectedRouteData = (route: RouteData | undefined) => {
+    track({
+      userJourney: UserJourney.ADD_FUNDS,
+      screen: 'InputScreen',
+      control: 'RoutesMenu',
+      controlType: 'MenuItem',
+      extras: {
+        toTokenAddress: route?.amountData.toToken.address,
+        toTokenChainId: route?.amountData.toToken.chainId,
+        fromTokenAddress: route?.amountData.fromToken.address,
+        fromTokenChainId: route?.amountData.fromToken.chainId,
+        toAmount: route?.amountData.toAmount,
+        fromAmount: route?.amountData.fromAmount,
+      },
+    });
+
     addFundsDispatch({
       payload: {
         type: AddFundsActions.SET_SELECTED_ROUTE_DATA,
@@ -207,6 +247,17 @@ export function AddFunds({
     [viewDispatch],
   );
 
+  useEffect(() => {
+    page({
+      userJourney: UserJourney.ADD_FUNDS,
+      screen: 'InputScreen',
+      extras: {
+        toAmount,
+        toTokenAddress,
+      },
+    });
+  }, []);
+
   useEffect(() => {
     if (!toAmount) return;
     setSelectedAmount(toAmount);
@@ -356,6 +407,21 @@ export function AddFunds({
   const handleReviewClick = () => {
     if (!selectedRouteData || !selectedToken?.address) return;
 
+    track({
+      userJourney: UserJourney.ADD_FUNDS,
+      screen: 'InputScreen',
+      control: 'RoutesMenu',
+      controlType: 'MenuItem',
+      extras: {
+        toTokenAddress: selectedRouteData.amountData.toToken.address,
+        toTokenChainId: selectedRouteData.amountData.toToken.chainId,
+        fromTokenAddress: selectedRouteData.amountData.fromToken.address,
+        fromTokenChainId: selectedRouteData.amountData.fromToken.chainId,
+        toAmount: selectedRouteData.amountData.toAmount,
+        fromAmount: selectedRouteData.amountData.fromAmount,
+      },
+    });
+
     viewDispatch({
       payload: {
         type: ViewActions.UPDATE_VIEW,

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx
@@ -41,15 +41,19 @@ import { HandoverTarget } from '../../../context/handover-context/HandoverContex
 import { HandoverContent } from '../../../components/Handover/HandoverContent';
 import { getRemoteRive } from '../../../lib/utils';
 import { SQUID_NATIVE_TOKEN } from '../utils/config';
+import {
+  useAnalytics,
+  UserJourney,
+} from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { useProvidersContext } from '../../../context/providers-context/ProvidersContext';
 import { LoadingView } from '../../../views/loading/LoadingView';
 import { getDurationFormatted } from '../functions/getDurationFormatted';
 import { RouteFees } from '../components/RouteFees';
 import { getTotalRouteFees } from '../functions/getTotalRouteFees';
 import { getRouteChains } from '../functions/getRouteChains';
 import {
-  getFormattedNumber,
   getFormattedAmounts,
+  getFormattedNumber,
 } from '../functions/getFormattedNumber';
 
 interface ReviewProps {
@@ -78,6 +82,7 @@ export function Review({
   onCloseButtonClick,
 }: ReviewProps) {
   const { viewDispatch } = useContext(ViewContext);
+  const { track, page } = useAnalytics();
   const {
     addFundsState: { squid, chains, tokens },
   } = useContext(AddFundsContext);
@@ -105,6 +110,18 @@ export function Review({
     execute,
   } = useExecute();
 
+  useEffect(() => {
+    page({
+      userJourney: UserJourney.SWAP,
+      screen: 'Review',
+      extras: {
+        toAmount: data.toAmount,
+        toChainId: data.toChainId,
+        toTokenAddress: data.toTokenAddress,
+      },
+    });
+  }, []);
+
   const getFromAmountAndRoute = async () => {
     if (!squid || !tokens) return;
 
@@ -265,6 +282,14 @@ export function Review({
       );
 
       const txReceipt = await execute(squid, changeableProvider, route);
+      track({
+        userJourney: UserJourney.ADD_FUNDS,
+        screen: 'FundsAdded',
+        action: 'Succeeded',
+        extras: {
+          txHash: txReceipt.transactionHash,
+        },
+      });
 
       showHandover(
         EXECUTE_TXN_ANIMATION,