feat: log approve token and wrap token events directly in hooks (#4258)

* init

* clean up

* remove unnecessary constants

* undo yarn.lock change

src/components/AmplitudeAnalytics/constants.ts

@@ -83,7 +83,6 @@ export const enum ModalName {
  * Use to identify low-level components given a TraceContext
  */
 export const enum ElementName {
-  APPROVE_TOKEN_BUTTON = 'approve-token-button',
   AUTOROUTER_VISUALIZATION_ROW = 'expandable-autorouter-visualization-row',
   COMMON_BASES_CURRENCY_BUTTON = 'common-bases-currency-button',
   CONFIRM_SWAP_BUTTON = 'confirm-swap-or-send',
@@ -96,7 +95,6 @@ export const enum ElementName {
   SWAP_TOKENS_REVERSE_ARROW_BUTTON = 'swap-tokens-reverse-arrow-button',
   TOKEN_SELECTOR_ROW = 'token-selector-row',
   WALLET_TYPE_OPTION = 'wallet-type-option',
-  WRAP_TOKEN_BUTTON = 'wrap-token-button',
   // alphabetize additional element names.
 }
 

src/hooks/useWrapCallback.tsx

 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import { sendAnalyticsEvent } from 'components/AmplitudeAnalytics'
+import { EventName } from 'components/AmplitudeAnalytics/constants'
+import { formatToDecimal, getTokenAddress } from 'components/AmplitudeAnalytics/utils'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { useMemo } from 'react'
@@ -75,6 +78,15 @@ export default function useWrapCallback(
     const hasInputAmount = Boolean(inputAmount?.greaterThan('0'))
     const sufficientBalance = inputAmount && balance && !balance.lessThan(inputAmount)
 
+    const eventProperties = {
+      token_in_address: getTokenAddress(inputCurrency),
+      token_out_address: getTokenAddress(outputCurrency),
+      token_in_symbol: inputCurrency.symbol,
+      token_out_symbol: outputCurrency.symbol,
+      chain_id: inputCurrency.chainId,
+      amount: inputAmount ? formatToDecimal(inputAmount, inputAmount?.currency.decimals) : undefined,
+    }
+
     if (inputCurrency.isNative && weth.equals(outputCurrency)) {
       return {
         wrapType: WrapType.WRAP,
@@ -89,6 +101,7 @@ export default function useWrapCallback(
                     currencyAmountRaw: inputAmount?.quotient.toString(),
                     chainId,
                   })
+                  sendAnalyticsEvent(EventName.WRAP_TOKEN_TXN_SUBMITTED, { ...eventProperties, type: WrapType.WRAP })
                 } catch (error) {
                   console.error('Could not deposit', error)
                 }
@@ -114,6 +127,7 @@ export default function useWrapCallback(
                     currencyAmountRaw: inputAmount?.quotient.toString(),
                     chainId,
                   })
+                  sendAnalyticsEvent(EventName.WRAP_TOKEN_TXN_SUBMITTED, { ...eventProperties, type: WrapType.UNWRAP })
                 } catch (error) {
                   console.error('Could not withdraw', error)
                 }

src/lib/hooks/useApproval.ts

@@ -2,6 +2,9 @@ import { MaxUint256 } from '@ethersproject/constants'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import { sendAnalyticsEvent } from 'components/AmplitudeAnalytics'
+import { EventName } from 'components/AmplitudeAnalytics/constants'
+import { getTokenAddress } from 'components/AmplitudeAnalytics/utils'
 import { useTokenContract } from 'hooks/useContract'
 import { useTokenAllowance } from 'hooks/useTokenAllowance'
 import { useCallback, useMemo } from 'react'
@@ -88,11 +91,19 @@ export function useApproval(
       .approve(spender, useExact ? amountToApprove.quotient.toString() : MaxUint256, {
         gasLimit: calculateGasMargin(estimatedGas),
       })
-      .then((response) => ({
+      .then((response) => {
+        const eventProperties = {
+          chain_id: chainId,
+          token_symbol: token?.symbol,
+          token_address: getTokenAddress(token),
+        }
+        sendAnalyticsEvent(EventName.APPROVE_TOKEN_TXN_SUBMITTED, eventProperties)
+        return {
           response,
           tokenAddress: token.address,
           spenderAddress: spender,
-      }))
+        }
+      })
       .catch((error: Error) => {
         logFailure(error)
         throw error

src/pages/Swap/index.tsx

@@ -85,37 +85,6 @@ export function getIsValidSwapQuote(
   return !!swapInputError && !!trade && (tradeState === TradeState.VALID || tradeState === TradeState.SYNCING)
 }
 
-const formatApproveTokenTxnSubmittedEventProperties = (
-  approvalOptimizedTrade:
-    | Trade<Currency, Currency, TradeType>
-    | V2Trade<Currency, Currency, TradeType>
-    | V3Trade<Currency, Currency, TradeType>
-    | undefined
-) => {
-  if (!approvalOptimizedTrade) return {}
-  return {
-    chain_id: approvalOptimizedTrade.inputAmount.currency.chainId,
-    token_symbol: approvalOptimizedTrade.inputAmount.currency.symbol,
-    token_address: getTokenAddress(approvalOptimizedTrade.inputAmount.currency),
-  }
-}
-
-const formatWrapTokenTxnSubmittedEventProperties = (
-  inputCurrency: Currency | null | undefined,
-  outputCurrency: Currency | null | undefined,
-  parsedAmount: CurrencyAmount<Currency> | undefined
-) => {
-  if (!inputCurrency || !outputCurrency || !parsedAmount) return {}
-  return {
-    token_in_address: getTokenAddress(inputCurrency),
-    token_out_address: getTokenAddress(outputCurrency),
-    token_in_symbol: inputCurrency.symbol,
-    token_out_symbol: outputCurrency.symbol,
-    chain_id: inputCurrency.chainId,
-    amount: parsedAmount ? formatToDecimal(parsedAmount, parsedAmount?.currency.decimals) : undefined,
-  }
-}
-
 function largerPercentValue(a?: Percent, b?: Percent) {
   if (a && b) {
     return a.greaterThan(b) ? a : b
@@ -653,17 +622,6 @@ export default function Swap() {
                     </ButtonLight>
                   </TraceEvent>
                 ) : showWrap ? (
-                  <TraceEvent
-                    events={[Event.onClick]}
-                    name={EventName.WRAP_TOKEN_TXN_SUBMITTED}
-                    element={ElementName.WRAP_TOKEN_BUTTON}
-                    properties={formatWrapTokenTxnSubmittedEventProperties(
-                      currencies[Field.INPUT],
-                      currencies[Field.OUTPUT],
-                      parsedAmount
-                    )}
-                    shouldLogImpression={!Boolean(wrapInputError)}
-                  >
                   <ButtonPrimary disabled={Boolean(wrapInputError)} onClick={onWrap}>
                     {wrapInputError ? (
                       <WrapErrorText wrapInputError={wrapInputError} />
@@ -673,7 +631,6 @@ export default function Swap() {
                       <Trans>Unwrap</Trans>
                     ) : null}
                   </ButtonPrimary>
-                  </TraceEvent>
                 ) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? (
                   <GreyCard style={{ textAlign: 'center' }}>
                     <ThemedText.DeprecatedMain mb="4px">
@@ -683,13 +640,6 @@ export default function Swap() {
                 ) : showApproveFlow ? (
                   <AutoRow style={{ flexWrap: 'nowrap', width: '100%' }}>
                     <AutoColumn style={{ width: '100%' }} gap="12px">
-                      <TraceEvent
-                        events={[Event.onClick]}
-                        name={EventName.APPROVE_TOKEN_TXN_SUBMITTED}
-                        element={ElementName.APPROVE_TOKEN_BUTTON}
-                        properties={formatApproveTokenTxnSubmittedEventProperties(approvalOptimizedTrade)}
-                        shouldLogImpression={!approveTokenButtonDisabled}
-                      >
                       <ButtonConfirmed
                         onClick={handleApprove}
                         disabled={approveTokenButtonDisabled}
@@ -733,7 +683,6 @@ export default function Swap() {
                           )}
                         </AutoRow>
                       </ButtonConfirmed>
-                      </TraceEvent>
                       <ButtonError
                         onClick={() => {
                           if (isExpertMode) {