feat: amplitude swap fixes (#4627)

* init

* add back txn completed event

src/components/AmplitudeAnalytics/constants.ts

@@ -15,7 +15,8 @@ export enum EventName {
   SWAP_MAX_TOKEN_AMOUNT_SELECTED = 'Swap Max Token Amount Selected',
   SWAP_PRICE_UPDATE_ACKNOWLEDGED = 'Swap Price Update Acknowledged',
   SWAP_QUOTE_RECEIVED = 'Swap Quote Received',
-  SWAP_SUBMITTED = 'Swap Submitted',
+  SWAP_SIGNED = 'Swap Signed',
+  SWAP_SUBMITTED_BUTTON_CLICKED = 'Swap Submit Button Clicked',
   SWAP_TOKENS_REVERSED = 'Swap Tokens Reversed',
   SWAP_TRANSACTION_COMPLETED = 'Swap Transaction Completed',
   TOKEN_IMPORTED = 'Token Imported',

src/components/swap/ConfirmSwapModal.tsx

 import { Trans } from '@lingui/macro'
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
+import { sendAnalyticsEvent } from 'components/AmplitudeAnalytics'
 import { ModalName } from 'components/AmplitudeAnalytics/constants'
+import { EventName } from 'components/AmplitudeAnalytics/constants'
 import { Trace } from 'components/AmplitudeAnalytics/Trace'
-import { ReactNode, useCallback, useMemo, useState } from 'react'
+import { formatPercentInBasisPointsNumber, formatToDecimal, getTokenAddress } from 'components/AmplitudeAnalytics/utils'
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
+import { computeRealizedPriceImpact } from 'utils/prices'
 import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
 
 import TransactionConfirmationModal, {
@@ -14,6 +18,27 @@ import TransactionConfirmationModal, {
 import SwapModalFooter from './SwapModalFooter'
 import SwapModalHeader from './SwapModalHeader'
 
+const formatAnalyticsEventProperties = ({
+  trade,
+  txHash,
+}: {
+  trade: InterfaceTrade<Currency, Currency, TradeType>
+  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),
+  price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)),
+  chain_id:
+    trade.inputAmount.currency.chainId === trade.outputAmount.currency.chainId
+      ? trade.inputAmount.currency.chainId
+      : undefined,
+})
+
 export default function ConfirmSwapModal({
   trade,
   originalTrade,
@@ -48,6 +73,7 @@ export default function ConfirmSwapModal({
   // shouldLogModalCloseEvent lets the child SwapModalHeader component know when modal has been closed
   // and an event triggered by modal closing should be logged.
   const [shouldLogModalCloseEvent, setShouldLogModalCloseEvent] = useState(false)
+  const [lastTxnHashLogged, setLastTxnHashLogged] = useState<string | null>(null)
   const showAcceptChanges = useMemo(
     () => Boolean(trade && originalTrade && tradeMeaningfullyDiffers(trade, originalTrade)),
     [originalTrade, trade]
@@ -121,8 +147,15 @@ export default function ConfirmSwapModal({
     [onModalDismiss, modalBottom, modalHeader, swapErrorMessage]
   )
 
+  useEffect(() => {
+    if (!attemptingTxn && isOpen && txHash && trade && txHash !== lastTxnHashLogged) {
+      sendAnalyticsEvent(EventName.SWAP_SIGNED, formatAnalyticsEventProperties({ trade, txHash }))
+      setLastTxnHashLogged(txHash)
+    }
+  }, [attemptingTxn, isOpen, txHash, trade, lastTxnHashLogged])
+
   return (
-    <Trace modal={ModalName.CONFIRM_SWAP} shouldLogImpression={isOpen}>
+    <Trace modal={ModalName.CONFIRM_SWAP}>
       <TransactionConfirmationModal
         isOpen={isOpen}
         onDismiss={onModalDismiss}

src/components/swap/SwapModalFooter.tsx

@@ -132,7 +132,7 @@ export default function SwapModalFooter({
         <TraceEvent
           events={[Event.onClick]}
           element={ElementName.CONFIRM_SWAP_BUTTON}
-          name={EventName.SWAP_SUBMITTED}
+          name={EventName.SWAP_SUBMITTED_BUTTON_CLICKED}
           properties={formatAnalyticsEventProperties({
             trade,
             hash,

src/state/transactions/updater.tsx

@@ -78,6 +78,7 @@ export default function Updater() {
           },
         })
       )
+
       const tx = transactions[chainId]?.[hash]
 
       if (tx.info.type === TransactionType.SWAP && trade) {