fix: add amplitude page context to swap flow events (#6489)

src/hooks/useUniversalRouter.ts

@@ -1,7 +1,7 @@
 import { TransactionResponse } from '@ethersproject/abstract-provider'
 import { BigNumber } from '@ethersproject/bignumber'
 import { t } from '@lingui/macro'
-import { sendAnalyticsEvent } from '@uniswap/analytics'
+import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
 import { SwapEventName } from '@uniswap/analytics-events'
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
@@ -49,6 +49,7 @@ export function useUniversalRouterSwapCallback(
   options: SwapOptions
 ) {
   const { account, chainId, provider } = useWeb3React()
+  const analyticsContext = useTrace()
 
   return useCallback(async (): Promise<TransactionResponse> => {
     return trace(
@@ -90,12 +91,19 @@ export function useUniversalRouterSwapCallback(
             .getSigner()
             .sendTransaction({ ...tx, gasLimit })
             .then((response) => {
-              sendAnalyticsEvent(
-                SwapEventName.SWAP_SIGNED,
-                formatSwapSignedAnalyticsEventProperties({ trade, fiatValues, txHash: response.hash })
-              )
+              sendAnalyticsEvent(SwapEventName.SWAP_SIGNED, {
+                ...formatSwapSignedAnalyticsEventProperties({
+                  trade,
+                  fiatValues,
+                  txHash: response.hash,
+                }),
+                ...analyticsContext,
+              })
               if (tx.data !== response.data) {
-                sendAnalyticsEvent(SwapEventName.SWAP_MODIFIED_IN_WALLET, { txHash: response.hash })
+                sendAnalyticsEvent(SwapEventName.SWAP_MODIFIED_IN_WALLET, {
+                  txHash: response.hash,
+                  ...analyticsContext,
+                })
                 throw new ModifiedSwapError()
               }
               return response
@@ -117,6 +125,7 @@ export function useUniversalRouterSwapCallback(
     )
   }, [
     account,
+    analyticsContext,
     chainId,
     fiatValues,
     options.deadline,

src/pages/Swap/index.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import { sendAnalyticsEvent, Trace, TraceEvent } from '@uniswap/analytics'
+import { sendAnalyticsEvent, Trace, TraceEvent, useTrace } from '@uniswap/analytics'
 import {
   BrowserEvent,
   InterfaceElementName,
@@ -189,6 +189,7 @@ export function Swap({
   const { account, chainId: connectedChainId, connector } = useWeb3React()
   const [newSwapQuoteNeedsLogging, setNewSwapQuoteNeedsLogging] = useState(true)
   const [fetchingSwapQuoteStartTime, setFetchingSwapQuoteStartTime] = useState<Date | undefined>()
+  const trace = useTrace()
 
   // token warning stuff
   const prefilledInputCurrency = useCurrency(prefilledState?.[Field.INPUT]?.currencyId)
@@ -392,13 +393,14 @@ export function Swap({
         chain_id: chainId,
         token_symbol: maximumAmountIn?.currency.symbol,
         token_address: maximumAmountIn?.currency.address,
+        ...trace,
       })
     } catch (e) {
       console.error(e)
     } finally {
       setIsAllowancePending(false)
     }
-  }, [allowance, chainId, maximumAmountIn?.currency.address, maximumAmountIn?.currency.symbol])
+  }, [allowance, chainId, maximumAmountIn?.currency.address, maximumAmountIn?.currency.symbol, trace])
 
   const maxInputAmount: CurrencyAmount<Currency> | undefined = useMemo(
     () => maxAmountSpend(currencyBalances[Field.INPUT]),
@@ -534,10 +536,14 @@ export function Swap({
       // Set the current datetime as the time of receipt of latest swap quote.
       setSwapQuoteReceivedDate(now)
       // Log swap quote.
-      sendAnalyticsEvent(
-        SwapEventName.SWAP_QUOTE_RECEIVED,
-        formatSwapQuoteReceivedEventProperties(trade, trade.gasUseEstimateUSD ?? undefined, fetchingSwapQuoteStartTime)
-      )
+      sendAnalyticsEvent(SwapEventName.SWAP_QUOTE_RECEIVED, {
+        ...formatSwapQuoteReceivedEventProperties(
+          trade,
+          trade.gasUseEstimateUSD ?? undefined,
+          fetchingSwapQuoteStartTime
+        ),
+        ...trace,
+      })
       // Latest swap quote has just been logged, so we don't need to log the current trade anymore
       // unless user inputs change again and a new trade is in the process of being generated.
       setNewSwapQuoteNeedsLogging(false)
@@ -556,6 +562,7 @@ export function Swap({
     fetchingSwapQuoteStartTime,
     trade,
     setSwapQuoteReceivedDate,
+    trace,
   ])
 
   const showDetailsDropdown = Boolean(