feat: add volume trade info to swap completed event (#4506)

add volume trade info to swap completed event

src/components/swap/ConfirmSwapModal.tsx

@@ -73,7 +73,7 @@ export default function ConfirmSwapModal({
       <SwapModalFooter
         onConfirm={onConfirm}
         trade={trade}
-        txHash={txHash}
+        hash={txHash}
         allowedSlippage={allowedSlippage}
         disabledConfirm={showAcceptChanges}
         swapErrorMessage={swapErrorMessage}

src/components/swap/SwapModalFooter.tsx

@@ -25,7 +25,7 @@ import { getTokenPath, RoutingDiagramEntry } from './SwapRoute'
 
 interface AnalyticsEventProps {
   trade: InterfaceTrade<Currency, Currency, TradeType>
-  txHash: string | undefined
+  hash: string | undefined
   allowedSlippage: Percent
   transactionDeadlineSecondsSinceEpoch: number | undefined
   isAutoSlippage: boolean
@@ -65,7 +65,7 @@ const formatRoutesEventProperties = (routes: RoutingDiagramEntry[]) => {
 
 const formatAnalyticsEventProperties = ({
   trade,
-  txHash,
+  hash,
   allowedSlippage,
   transactionDeadlineSecondsSinceEpoch,
   isAutoSlippage,
@@ -76,7 +76,7 @@ const formatAnalyticsEventProperties = ({
   routes,
 }: AnalyticsEventProps) => ({
   estimated_network_fee_usd: trade.gasUseEstimateUSD ? formatToDecimal(trade.gasUseEstimateUSD, 2) : undefined,
-  transaction_hash: txHash,
+  transaction_hash: hash,
   transaction_deadline_seconds: getDurationUntilTimestampSeconds(transactionDeadlineSecondsSinceEpoch),
   token_in_amount_usd: tokenInAmountUsd ? parseFloat(tokenInAmountUsd) : undefined,
   token_out_amount_usd: tokenOutAmountUsd ? parseFloat(tokenOutAmountUsd) : undefined,
@@ -104,14 +104,14 @@ const formatAnalyticsEventProperties = ({
 export default function SwapModalFooter({
   trade,
   allowedSlippage,
-  txHash,
+  hash,
   onConfirm,
   swapErrorMessage,
   disabledConfirm,
   swapQuoteReceivedDate,
 }: {
   trade: InterfaceTrade<Currency, Currency, TradeType>
-  txHash: string | undefined
+  hash: string | undefined
   allowedSlippage: Percent
   onConfirm: () => void
   swapErrorMessage: ReactNode | undefined
@@ -134,7 +134,7 @@ export default function SwapModalFooter({
           name={EventName.SWAP_SUBMITTED}
           properties={formatAnalyticsEventProperties({
             trade,
-            txHash,
+            hash,
             allowedSlippage,
             transactionDeadlineSecondsSinceEpoch,
             isAutoSlippage,

src/state/transactions/updater.tsx

+import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent } from 'components/AmplitudeAnalytics'
 import { EventName } from 'components/AmplitudeAnalytics/constants'
+import { formatPercentInBasisPointsNumber, formatToDecimal, getTokenAddress } from 'components/AmplitudeAnalytics/utils'
 import { DEFAULT_TXN_DISMISS_MS, L2_TXN_DISMISS_MS } from 'constants/misc'
+import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import LibUpdater from 'lib/hooks/transactions/updater'
 import { useCallback, useMemo } from 'react'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { InterfaceTrade } from 'state/routing/types'
 import { TransactionType } from 'state/transactions/types'
+import { computeRealizedPriceImpact } from 'utils/prices'
 
 import { L2_CHAIN_IDS } from '../../constants/chains'
+import { useDerivedSwapInfo } from '../../state/swap/hooks'
 import { useAddPopup } from '../application/hooks'
 import { checkedTransaction, finalizeTransaction } from './reducer'
 import { SerializableTransactionReceipt } from './types'
 
+interface AnalyticsEventProps {
+  trade: InterfaceTrade<Currency, Currency, TradeType>
+  hash: string | undefined
+  allowedSlippage: Percent
+  tokenInAmountUsd: string | undefined
+  tokenOutAmountUsd: string | undefined
+  succeeded: boolean
+}
+
+const formatAnalyticsEventProperties = ({
+  trade,
+  hash,
+  allowedSlippage,
+  tokenInAmountUsd,
+  tokenOutAmountUsd,
+  succeeded,
+}: AnalyticsEventProps) => ({
+  estimated_network_fee_usd: trade.gasUseEstimateUSD ? formatToDecimal(trade.gasUseEstimateUSD, 2) : undefined,
+  transaction_hash: hash,
+  token_in_amount_usd: tokenInAmountUsd ? parseFloat(tokenInAmountUsd) : undefined,
+  token_out_amount_usd: tokenOutAmountUsd ? parseFloat(tokenOutAmountUsd) : undefined,
+  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),
+  price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)),
+  allowed_slippage_basis_points: formatPercentInBasisPointsNumber(allowedSlippage),
+  chain_id:
+    trade.inputAmount.currency.chainId === trade.outputAmount.currency.chainId
+      ? trade.inputAmount.currency.chainId
+      : undefined,
+  swap_quote_block_number: trade.blockNumber,
+  succeeded,
+})
+
 export default function Updater() {
   const { chainId } = useWeb3React()
   const addPopup = useAddPopup()
   // speed up popup dismisall time if on L2
   const isL2 = Boolean(chainId && L2_CHAIN_IDS.includes(chainId))
   const transactions = useAppSelector((state) => state.transactions)
+  const {
+    trade: { trade },
+    allowedSlippage,
+  } = useDerivedSwapInfo()
+  const tokenInAmountUsd = useStablecoinValue(trade?.inputAmount)?.toFixed(2)
+  const tokenOutAmountUsd = useStablecoinValue(trade?.outputAmount)?.toFixed(2)
 
   const dispatch = useAppDispatch()
   const onCheck = useCallback(
@@ -44,11 +93,19 @@ export default function Updater() {
         })
       )
       const tx = transactions[chainId]?.[hash]
-      if (tx.info.type === TransactionType.SWAP) {
-        sendAnalyticsEvent(EventName.SWAP_TRANSACTION_COMPLETED, {
-          transaction_hash: tx.hash,
-          succeeded: receipt.status === 1,
-        })
+
+      if (tx.info.type === TransactionType.SWAP && trade) {
+        sendAnalyticsEvent(
+          EventName.SWAP_TRANSACTION_COMPLETED,
+          formatAnalyticsEventProperties({
+            trade,
+            hash,
+            allowedSlippage,
+            tokenInAmountUsd,
+            tokenOutAmountUsd,
+            succeeded: receipt.status === 1,
+          })
+        )
       }
       addPopup(
         {
@@ -58,7 +115,7 @@ export default function Updater() {
         isL2 ? L2_TXN_DISMISS_MS : DEFAULT_TXN_DISMISS_MS
       )
     },
-    [addPopup, dispatch, isL2, transactions]
+    [addPopup, allowedSlippage, dispatch, isL2, tokenInAmountUsd, tokenOutAmountUsd, trade, transactions]
   )
 
   const pendingTransactions = useMemo(() => (chainId ? transactions[chainId] ?? {} : {}), [chainId, transactions])