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 index 000a280244..13cfccfad3 100644 --- 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 index 61199ceedd..fd2a9d2cb1 100644 --- 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,6 +41,10 @@ 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'; @@ -48,8 +52,8 @@ 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,