From c8a81491279dbdbc558696ce953d3756c7ecd631 Mon Sep 17 00:00:00 2001
From: eddie <66155195+just-toby@users.noreply.github.com>
Date: Thu, 4 May 2023 11:20:12 -0400
Subject: [PATCH] fix: add amplitude page context to swap flow events (#6489)

---
 src/hooks/useUniversalRouter.ts | 21 +++++++++++++++------
 src/pages/Swap/index.tsx        | 19 +++++++++++++------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/hooks/useUniversalRouter.ts b/src/hooks/useUniversalRouter.ts
index c784eb2f29..02973243bd 100644
--- a/src/hooks/useUniversalRouter.ts
+++ b/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,
diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx
index 461874a078..9a6b2354c9 100644
--- a/src/pages/Swap/index.tsx
+++ b/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(