chore: update availableRoutes widget-event (#1313)

Author: dennyscode

package.json

@@ -48,6 +48,7 @@
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^15.0.2",
     "react-router-dom": "^6.26.2",
+    "shallow-equal": "^3.1.0",
     "sharp": "^0.33.5",
     "siwe": "^2.3.2",
     "typescript": "^5.6.2",

src/components/ProfilePage/ProfilePage.tsx

@@ -13,10 +13,8 @@ import { QuestCarousel } from './QuestCarousel/QuestCarousel';
 import { QuestCompletedList } from './QuestsCompleted/QuestsCompletedList';
 import { Leaderboard } from './Leaderboard/Leaderboard';
 import { RewardsCarousel } from './Rewards/RewardsCarousel';
-import {
-  AvailableRewards,
-  useMerklRewardsOnCampaigns,
-} from 'src/hooks/useMerklRewardsOnCampaigns';
+import type { AvailableRewards } from 'src/hooks/useMerklRewardsOnCampaigns';
+import { useMerklRewardsOnCampaigns } from 'src/hooks/useMerklRewardsOnCampaigns';
 import { useMemo } from 'react';
 
 const shouldHideComponent = (

src/components/Widgets/WidgetEvents.tsx

@@ -1,7 +1,4 @@
 'use client';
-import type { RouteExtended } from '@lifi/sdk';
-import { type Route } from '@lifi/sdk';
-
 import { MultisigConfirmationModal } from '@/components/MultisigConfirmationModal';
 import { MultisigConnectedAlert } from '@/components/MultisigConnectedAlert';
 import {
@@ -16,6 +13,8 @@ import { useActiveTabStore } from '@/stores/activeTab';
 import { useChainTokenSelectionStore } from '@/stores/chainTokenSelection';
 import { useMenuStore } from '@/stores/menu';
 import { useMultisigStore } from '@/stores/multisig';
+import type { RouteExtended } from '@lifi/sdk';
+import { type Route } from '@lifi/sdk';
 import type {
   ChainTokenSelected,
   ContactSupport,
@@ -24,13 +23,21 @@ import type {
 } from '@lifi/widget';
 import { WidgetEvent, useWidgetEvents } from '@lifi/widget';
 import { useEffect, useRef, useState } from 'react';
+import { shallowEqualObjects } from 'shallow-equal';
+import type { JumperEventData } from 'src/hooks/useJumperTracking';
+import type { TransformedRoute } from 'src/types/internal';
+import { calcPriceImpact } from 'src/utils/calcPriceImpact';
 import { handleTransactionDetails } from 'src/utils/routesInterpreterUtils';
 
 export function WidgetEvents() {
-  const lastTxHashRef = useRef<string>();
+  const previousRoutesRef = useRef<JumperEventData>({});
   const { activeTab } = useActiveTabStore();
-  const { setDestinationChainToken, setSourceChainToken } =
-    useChainTokenSelectionStore();
+  const {
+    sourceChainToken,
+    destinationChainToken,
+    setDestinationChainToken,
+    setSourceChainToken,
+  } = useChainTokenSelectionStore();
   const { trackTransaction, trackEvent } = useUserTracking();
   const [setSupportModalState] = useMenuStore((state) => [
     state.setSupportModalState,
@@ -68,36 +75,22 @@ export function WidgetEvents() {
 
     const onRouteExecutionUpdated = async (update: RouteExecutionUpdate) => {
       // check if multisig and open the modal
-      const data = handleTransactionDetails(update.route, {
-        [TrackingEventParameter.Action]: 'execution_updated',
-      });
       const isMultisigRouteActive = shouldOpenMultisigSignatureModal(
         update.route,
       );
-
       if (isMultisigRouteActive) {
         setIsMultiSigConfirmationModalOpen(true);
       }
-
-      if (update.process && update.route) {
-        if (update.process.txHash !== lastTxHashRef.current) {
-          lastTxHashRef.current = update.process.txHash;
-          // trackTransaction({
-          //   category: TrackingCategory.WidgetEvent,
-          //   action: TrackingAction.OnRouteExecutionUpdated,
-          //   label: 'execution_update',
-          //   data,
-          //   enableAddressable: true,
-          // });
-        }
-      }
     };
+
     const onRouteExecutionCompleted = async (route: Route) => {
       if (route.id) {
         const data = handleTransactionDetails(route, {
           [TrackingEventParameter.Action]: 'execution_completed',
           [TrackingEventParameter.TransactionStatus]: 'COMPLETED',
         });
+        // reset ref obj
+        previousRoutesRef.current = {};
         trackTransaction({
           category: TrackingCategory.WidgetEvent,
           action: TrackingAction.OnRouteExecutionCompleted,
@@ -108,6 +101,7 @@ export function WidgetEvents() {
         });
       }
     };
+
     const onRouteExecutionFailed = async (update: RouteExecutionUpdate) => {
       const data = handleTransactionDetails(update.route, {
         [TrackingEventParameter.Action]: 'execution_failed',
@@ -118,6 +112,8 @@ export function WidgetEvents() {
         [TrackingEventParameter.IsFinal]: true,
         [TrackingEventParameter.ErrorCode]: update.process.error?.code || '',
       });
+      // reset ref obj
+      previousRoutesRef.current = {};
       trackTransaction({
         category: TrackingCategory.WidgetEvent,
         action: TrackingAction.OnRouteExecutionFailed,
@@ -204,17 +200,73 @@ export function WidgetEvents() {
     };
 
     const onAvailableRoutes = async (availableRoutes: Route[]) => {
-      trackEvent({
-        category: TrackingCategory.WidgetEvent,
-        action: TrackingAction.OnAvailableRoutes,
-        label: `routes_available`,
-        enableAddressable: true,
-        data: {
-          [TrackingEventParameter.AvailableRoutesCount]: availableRoutes.length,
-        },
-      });
-    };
+      // current available routes
+      const newObj: JumperEventData = {
+        [TrackingEventParameter.FromToken]: sourceChainToken.tokenAddress || '',
+        [TrackingEventParameter.FromChainId]: sourceChainToken.chainId || '',
+        [TrackingEventParameter.ToToken]:
+          destinationChainToken.tokenAddress || '',
+        [TrackingEventParameter.ToChainId]: destinationChainToken.chainId || '',
+      };
 
+      // compare current availableRoutes with the previous one
+      const isSameObject = shallowEqualObjects(
+        previousRoutesRef.current,
+        newObj,
+      );
+      // if the object has changed, then track the event
+      if (
+        !isSameObject &&
+        previousRoutesRef.current &&
+        sourceChainToken.chainId &&
+        sourceChainToken.tokenAddress &&
+        destinationChainToken.chainId &&
+        destinationChainToken.tokenAddress
+      ) {
+        previousRoutesRef.current = newObj;
+        const transformedRoutes = availableRoutes.reduce<
+          Record<number, TransformedRoute>
+        >((acc, route, index) => {
+          const priceImpact = calcPriceImpact(route);
+          acc[index] = {
+            [TrackingEventParameter.NbOfSteps]: route.steps.length,
+            [TrackingEventParameter.Steps]: route.steps.map(
+              (step) => step.tool,
+            ),
+            [TrackingEventParameter.ToAmountUSD]: Number(route.toAmountUSD),
+            [TrackingEventParameter.GasCostUSD]: route.steps.reduce(
+              (acc, step) =>
+                acc +
+                (step.estimate.gasCosts?.reduce(
+                  (sum, gasCost) => sum + parseFloat(gasCost.amountUSD),
+                  0,
+                ) || 0),
+              0,
+            ),
+            [TrackingEventParameter.Time]: route.steps.reduce(
+              (acc, step) => acc + step.estimate.executionDuration,
+              0,
+            ),
+            [TrackingEventParameter.Slippage]: priceImpact,
+          };
+          return acc;
+        }, {});
+        trackEvent({
+          category: TrackingCategory.WidgetEvent,
+          action: TrackingAction.OnAvailableRoutes,
+          label: `routes_available`,
+          enableAddressable: true,
+          data: {
+            ...newObj,
+            [TrackingEventParameter.FromAmountUSD]: Number(
+              availableRoutes[0].fromAmountUSD,
+            ),
+            [TrackingEventParameter.NbOfSteps]: availableRoutes.length,
+            [TrackingEventParameter.Routes]: transformedRoutes,
+          },
+        });
+      }
+    };
     widgetEvents.on(WidgetEvent.RouteExecutionStarted, onRouteExecutionStarted);
     widgetEvents.on(WidgetEvent.RouteExecutionUpdated, onRouteExecutionUpdated);
     widgetEvents.on(
@@ -237,6 +289,7 @@ export function WidgetEvents() {
       WidgetEvent.DestinationChainTokenSelected,
       onDestinationChainTokenSelection,
     );
+
     // widgetEvents.on(WidgetEvent.WidgetExpanded, onWidgetExpanded);
 
     return () => {
@@ -275,11 +328,14 @@ export function WidgetEvents() {
     };
   }, [
     activeTab,
+    destinationChainToken.chainId,
+    destinationChainToken.tokenAddress,
     setDestinationChain,
     setDestinationChainToken,
     setSourceChainToken,
     setSupportModalState,
     shouldOpenMultisigSignatureModal,
+    sourceChainToken,
     trackEvent,
     trackTransaction,
     widgetEvents,

src/const/trackingKeys.ts

@@ -168,8 +168,12 @@ export enum TrackingEventParameter {
   ErrorCode = 'param_error_code',
   ErrorMessage = 'param_error_message',
   ValueLoss = 'param_value_loss',
-  AvailableRoutesCount = 'param_available_routes_count',
   TransactionStatus = 'param_transaction_status',
+  Routes = 'param_routes',
+  NbOfSteps = 'param_nb_of_steps',
+  Steps = 'param_steps',
+  Time = 'param_time',
+  Slippage = 'param_slippage',
 
   // Blog
   ArticleCardId = 'param_article_card_id',

src/hooks/useJumperTracking.ts

@@ -7,13 +7,19 @@ import {
   JUMPER_ANALYTICS_EVENT,
   JUMPER_ANALYTICS_TRANSACTION,
 } from 'src/const/abi/jumperApiUrls';
+import type { TransformedRoute } from 'src/types/internal';
+
+export type JumperEventData = {
+  [key: string]: string | number | boolean | Record<number, TransformedRoute>;
+};
+
 interface JumperDataTrackEventProps {
   category: string;
   action: string;
   label: string;
   url: string;
   value: number;
-  data?: { [key: string]: string | number | boolean };
+  data?: JumperEventData;
   isConnected: boolean;
   walletAddress?: string;
   browserFingerprint: string;

src/hooks/userTracking/useUserTracking.ts

@@ -5,6 +5,7 @@ import {
   TrackingEventParameter,
 } from '@/const/trackingKeys';
 import { useAccounts } from '@/hooks/useAccounts';
+import type { JumperEventData } from '@/hooks/useJumperTracking';
 import { useJumperTracking } from '@/hooks/useJumperTracking';
 import { useSession } from '@/hooks/useSession';
 import type {
@@ -16,6 +17,7 @@ import { EventTrackingTool } from '@/types/userTracking';
 import type { Theme } from '@mui/material';
 import { useMediaQuery } from '@mui/material';
 import { useCallback, useEffect } from 'react';
+import type { TransformedRoute } from 'src/types/internal';
 import { useFingerprint } from '../useFingerprint';
 
 const googleEvent = ({
@@ -27,7 +29,13 @@ const googleEvent = ({
   category: string;
   data?:
     | TrackTransactionDataProps
-    | { [key: string]: string | number | boolean };
+    | {
+        [key: string]:
+          | string
+          | number
+          | boolean
+          | Record<number, TransformedRoute>;
+      };
 }) => {
   typeof window !== 'undefined' &&
     window?.gtag('event', action, {
@@ -44,9 +52,7 @@ const addressableEvent = ({
 }: {
   action: string;
   label: string;
-  data:
-    | TrackTransactionDataProps
-    | { [key: string]: string | number | boolean };
+  data: TrackTransactionDataProps | JumperEventData;
   isConversion?: boolean;
 }) => {
   const dataArray = [];

src/types/internal.ts

@@ -3,6 +3,7 @@ import type { WidgetConfig, WidgetSubvariant } from '@lifi/widget';
 import type { SxProps, Theme } from '@mui/material';
 import type { MenuItemLinkType } from 'src/components/Menu';
 import type { MenuKeysEnum } from 'src/const/menuKeys';
+import type { TrackingEventParameter } from 'src/const/trackingKeys';
 
 declare global {
   interface Window {
@@ -63,3 +64,11 @@ export interface DataItem {
   logoURI?: string;
   name: string;
 }
+export interface TransformedRoute {
+  [TrackingEventParameter.NbOfSteps]: number;
+  [TrackingEventParameter.Steps]: object;
+  [TrackingEventParameter.ToAmountUSD]: number;
+  [TrackingEventParameter.GasCostUSD]: number | null;
+  [TrackingEventParameter.Time]: number;
+  [TrackingEventParameter.Slippage]: number;
+}

src/types/userTracking.ts

@@ -1,4 +1,5 @@
 import type { TrackingEventParameter } from 'src/const/trackingKeys';
+import type { JumperEventData } from 'src/hooks/useJumperTracking';
 
 export enum EventTrackingTool {
   GA,
@@ -14,7 +15,7 @@ export interface TrackEventProps {
   category: string;
   label: string;
   value?: number;
-  data?: { [key: string]: string | number | boolean };
+  data?: JumperEventData;
   disableTrackingTool?: EventTrackingTool[];
   enableAddressable?: boolean;
   isConversion?: boolean;

src/utils/calcPriceImpact.ts

@@ -0,0 +1,23 @@
+import type { Route } from '@lifi/sdk';
+import { formatTokenAmount, formatTokenPrice } from './format';
+
+export const calcPriceImpact = (route: Route) => {
+  const fromTokenAmount = formatTokenAmount(
+    BigInt(route.fromAmount),
+    route.fromToken.decimals,
+  );
+  const fromTokenPrice = formatTokenPrice(
+    fromTokenAmount,
+    route.fromToken.priceUSD,
+  );
+  const toTokenAmount = formatTokenAmount(
+    BigInt(route.toAmount),
+    route.toToken.decimals,
+  );
+  const toTokenPrice =
+    formatTokenPrice(toTokenAmount, route.toToken.priceUSD) || 0.01;
+
+  const priceImpact = (toTokenPrice / fromTokenPrice - 1).toFixed(6);
+
+  return Number(priceImpact);
+};

src/utils/format.ts

@@ -0,0 +1,29 @@
+import { formatUnits } from './formatUnit';
+
+export const precisionFormatter = new Intl.NumberFormat('en', {
+  notation: 'standard',
+  roundingPriority: 'morePrecision',
+  maximumSignificantDigits: 4,
+  maximumFractionDigits: 4,
+  useGrouping: false,
+});
+
+export function formatTokenAmount(amount: bigint = 0n, decimals: number) {
+  const formattedAmount = amount ? formatUnits(amount, decimals) : '0';
+  const parsedAmount = parseFloat(formattedAmount);
+  if (parsedAmount === 0 || isNaN(Number(formattedAmount))) {
+    return '0';
+  }
+
+  return precisionFormatter.format(parsedAmount);
+}
+
+export function formatTokenPrice(amount?: string, price?: string) {
+  if (!amount || !price) {
+    return 0;
+  }
+  if (isNaN(Number(amount)) || isNaN(Number(price))) {
+    return 0;
+  }
+  return parseFloat(amount) * parseFloat(price);
+}