feat: Add USD amounts to swap analytics (#6108)

src/components/Widget/transactions.ts

@@ -107,6 +107,8 @@ export function useSyncWidgetTransactions() {
         const eventProperties = {
           ...formatSwapSignedAnalyticsEventProperties({
             trade,
+            // TODO: add once Widgets adds fiat values to callback
+            fiatValues: { amountIn: null, amountOut: null },
             txHash: transaction.receipt?.transactionHash ?? '',
           }),
           ...trace,

src/hooks/useSwapCallback.tsx

 import { Trade } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { PermitSignature } from 'hooks/usePermitAllowance'
 import { useMemo } from 'react'
 
@@ -13,6 +13,7 @@ import { useUniversalRouterSwapCallback } from './useUniversalRouter'
 // and the user has approved the slippage adjusted input amount for the trade
 export function useSwapCallback(
   trade: Trade<Currency, Currency, TradeType> | undefined, // trade to execute, required
+  fiatValues: { amountIn: CurrencyAmount<Currency> | null; amountOut: CurrencyAmount<Currency> | null }, // usd values for amount in and out, logged for analytics
   allowedSlippage: Percent, // in bips
   permitSignature: PermitSignature | undefined
 ): { callback: null | (() => Promise<string>) } {
@@ -20,7 +21,7 @@ export function useSwapCallback(
 
   const addTransaction = useTransactionAdder()
 
-  const universalRouterSwapCallback = useUniversalRouterSwapCallback(trade, {
+  const universalRouterSwapCallback = useUniversalRouterSwapCallback(trade, fiatValues, {
     slippageTolerance: allowedSlippage,
     deadline,
     permit: permitSignature,

src/hooks/useUniversalRouter.ts

@@ -4,7 +4,7 @@ import { t } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { SwapEventName } from '@uniswap/analytics-events'
 import { Trade } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { SwapRouter, UNIVERSAL_ROUTER_ADDRESS } from '@uniswap/universal-router-sdk'
 import { FeeOptions, toHex } from '@uniswap/v3-sdk'
 import { useWeb3React } from '@web3-react/core'
@@ -27,6 +27,7 @@ interface SwapOptions {
 
 export function useUniversalRouterSwapCallback(
   trade: Trade<Currency, Currency, TradeType> | undefined,
+  fiatValues: { amountIn: CurrencyAmount<Currency> | null; amountOut: CurrencyAmount<Currency> | null },
   options: SwapOptions
 ) {
   const { account, chainId, provider } = useWeb3React()
@@ -66,7 +67,7 @@ export function useUniversalRouterSwapCallback(
         .then((response) => {
           sendAnalyticsEvent(
             SwapEventName.SWAP_SIGNED,
-            formatSwapSignedAnalyticsEventProperties({ trade, txHash: response.hash })
+            formatSwapSignedAnalyticsEventProperties({ trade, fiatValues, txHash: response.hash })
           )
           if (tx.data !== response.data) {
             sendAnalyticsEvent(SwapEventName.SWAP_MODIFIED_IN_WALLET, { txHash: response.hash })
@@ -84,6 +85,7 @@ export function useUniversalRouterSwapCallback(
   }, [
     account,
     chainId,
+    fiatValues,
     options.deadline,
     options.feeOptions,
     options.permit,

src/lib/utils/analytics.ts

@@ -36,9 +36,11 @@ export const getPriceUpdateBasisPoints = (
 
 export const formatSwapSignedAnalyticsEventProperties = ({
   trade,
+  fiatValues,
   txHash,
 }: {
   trade: InterfaceTrade<Currency, Currency, TradeType> | Trade<Currency, Currency, TradeType>
+  fiatValues: { amountIn: CurrencyAmount<Currency> | null; amountOut: CurrencyAmount<Currency> | null }
   txHash: string
 }) => ({
   transaction_hash: txHash,
@@ -48,6 +50,8 @@ export const formatSwapSignedAnalyticsEventProperties = ({
   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 ? parseFloat(fiatValues.amountIn.toFixed(2)) : undefined,
+  token_out_amount_usd: fiatValues.amountOut ? parseFloat(fiatValues.amountOut.toFixed(2)) : undefined,
   price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)),
   chain_id:
     trade.inputAmount.currency.chainId === trade.outputAmount.currency.chainId

src/pages/Swap/index.tsx

@@ -333,10 +333,14 @@ export default function Swap({ className }: { className?: string }) {
     [currencyBalances]
   )
   const showMaxButton = Boolean(maxInputAmount?.greaterThan(0) && !parsedAmounts[Field.INPUT]?.equalTo(maxInputAmount))
+  const swapFiatValues = useMemo(() => {
+    return { amountIn: fiatValueTradeInput, amountOut: fiatValueTradeOutput }
+  }, [fiatValueTradeInput, fiatValueTradeOutput])
 
   // the callback to execute the swap
   const { callback: swapCallback } = useSwapCallback(
     trade,
+    swapFiatValues,
     allowedSlippage,
     allowance.state === AllowanceState.ALLOWED ? allowance.permitSignature : undefined
   )