feat: log minimum_output_after_slippage to amplitude (#6769)

* feat: log minimum_output_after_slippage to amplitude

* fix: memoize logging props

* fix: dont memoize at all

src/components/swap/SwapDetailsDropdown.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import { TraceEvent } from '@uniswap/analytics'
+import { TraceEvent, useTrace } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
 import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
@@ -8,6 +8,7 @@ import Column from 'components/Column'
 import { LoadingOpacityContainer } from 'components/Loader/styled'
 import { RowBetween, RowFixed } from 'components/Row'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
+import { formatEventPropertiesForTrade } from 'lib/utils/analytics'
 import { useState } from 'react'
 import { ChevronDown } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
@@ -102,6 +103,7 @@ export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSl
   const theme = useTheme()
   const { chainId } = useWeb3React()
   const [showDetails, setShowDetails] = useState(false)
+  const trace = useTrace()
 
   return (
     <Wrapper>
@@ -109,6 +111,10 @@ export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSl
         events={[BrowserEvent.onClick]}
         name={SwapEventName.SWAP_DETAILS_EXPANDED}
         element={InterfaceElementName.SWAP_DETAILS_DROPDOWN}
+        properties={{
+          ...(trade ? formatEventPropertiesForTrade(trade, allowedSlippage) : {}),
+          ...trace,
+        }}
         shouldLogImpression={!showDetails}
       >
         <StyledHeaderRow

src/hooks/useUniversalRouter.ts

@@ -93,6 +93,7 @@ export function useUniversalRouterSwapCallback(
             sendAnalyticsEvent(SwapEventName.SWAP_SIGNED, {
               ...formatSwapSignedAnalyticsEventProperties({
                 trade,
+                allowedSlippage: options.slippageTolerance,
                 fiatValues,
                 txHash: response.hash,
               }),

src/lib/utils/analytics.ts

@@ -36,31 +36,24 @@ export const getPriceUpdateBasisPoints = (
 
 export const formatSwapSignedAnalyticsEventProperties = ({
   trade,
+  allowedSlippage,
   fiatValues,
   txHash,
 }: {
   trade: InterfaceTrade | Trade<Currency, Currency, TradeType>
+  allowedSlippage: Percent
   fiatValues: { amountIn?: number; amountOut?: number }
   txHash: string
 }) => ({
   transaction_hash: txHash,
-  token_in_address: getTokenAddress(trade.inputAmount.currency),
-  token_out_address: getTokenAddress(trade.outputAmount.currency),
-  token_in_symbol: trade.inputAmount.currency.symbol,
-  token_out_symbol: trade.outputAmount.currency.symbol,
-  token_in_amount: formatToDecimal(trade.inputAmount, trade.inputAmount.currency.decimals),
-  token_out_amount: formatToDecimal(trade.outputAmount, trade.outputAmount.currency.decimals),
   token_in_amount_usd: fiatValues.amountIn,
   token_out_amount_usd: fiatValues.amountOut,
-  price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)),
-  chain_id:
-    trade.inputAmount.currency.chainId === trade.outputAmount.currency.chainId
-      ? trade.inputAmount.currency.chainId
-      : undefined,
+  ...formatEventPropertiesForTrade(trade, allowedSlippage),
 })
 
-export const formatSwapQuoteReceivedEventProperties = (
+export const formatEventPropertiesForTrade = (
   trade: Trade<Currency, Currency, TradeType>,
+  allowedSlippage: Percent,
   gasUseEstimateUSD?: string
 ) => {
   return {
@@ -76,5 +69,7 @@ export const formatSwapQuoteReceivedEventProperties = (
         : undefined,
     token_in_amount: formatToDecimal(trade.inputAmount, trade.inputAmount.currency.decimals),
     token_out_amount: formatToDecimal(trade.outputAmount, trade.outputAmount.currency.decimals),
+    minimum_output_after_slippage: trade.minimumAmountOut(allowedSlippage).toSignificant(6),
+    allowed_slippage: formatPercentNumber(allowedSlippage),
   }
 }

src/pages/Swap/index.tsx

@@ -29,7 +29,7 @@ import { useSwapCallback } from 'hooks/useSwapCallback'
 import { useSwitchChain } from 'hooks/useSwitchChain'
 import { useUSDPrice } from 'hooks/useUSDPrice'
 import JSBI from 'jsbi'
-import { formatSwapQuoteReceivedEventProperties } from 'lib/utils/analytics'
+import { formatEventPropertiesForTrade } from 'lib/utils/analytics'
 import { ReactNode, useCallback, useEffect, useMemo, useReducer, useState } from 'react'
 import { ArrowDown } from 'react-feather'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -528,10 +528,10 @@ export function Swap({
 
     setSwapQuoteReceivedDate(new Date())
     sendAnalyticsEvent(SwapEventName.SWAP_QUOTE_RECEIVED, {
-      ...formatSwapQuoteReceivedEventProperties(trade, trade.gasUseEstimateUSD ?? undefined),
+      ...formatEventPropertiesForTrade(trade, allowedSlippage, trade.gasUseEstimateUSD ?? undefined),
       ...trace,
     })
-  }, [prevTrade, trade, trace])
+  }, [prevTrade, trade, trace, allowedSlippage])
 
   const showDetailsDropdown = Boolean(
     !showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing)