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 index 0a3f042feb..6aafc6e527 100644 --- 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 ( (); + const [amountData, setAmountData] = useState(); 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, }, });