refactor monitoring (#2682)

src/components/WalletModal/index.tsx

@@ -5,7 +5,7 @@ import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { AutoColumn } from 'components/Column'
 import { PrivacyPolicy } from 'components/PrivacyPolicy'
 import Row, { AutoRow, RowBetween } from 'components/Row'
-import { useMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
+import { useWalletConnectMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
 import { useEffect, useState } from 'react'
 import { ArrowLeft, ArrowRight, Info } from 'react-feather'
 import ReactGA from 'react-ga'
@@ -151,7 +151,7 @@ export default function WalletModal({
 
   const previousAccount = usePrevious(account)
 
-  const logMonitoringEvent = useMonitoringEventCallback()
+  const logMonitoringEvent = useWalletConnectMonitoringEventCallback()
 
   // close on connection, when logged out before
   useEffect(() => {
@@ -203,7 +203,7 @@ export default function WalletModal({
       activate(connector, undefined, true)
         .then(async () => {
           const walletAddress = await connector.getAccount()
-          logMonitoringEvent('wallet connected', { walletAddress })
+          logMonitoringEvent({ walletAddress })
         })
         .catch((error) => {
           if (error instanceof UnsupportedChainIdError) {

src/hooks/useMonitoringEventCallback.ts

@@ -2,33 +2,34 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { initializeApp } from 'firebase/app'
 import { getDatabase, push, ref } from 'firebase/database'
 import { useCallback } from 'react'
+import { TransactionInfo, TransactionType } from 'state/transactions/actions'
 
 import { useActiveWeb3React } from './web3'
 
-type MonitoringEvent =
-  | 'wallet connected'
-  | 'swap'
-  | 'add liquidity/v3'
-  | 'add liquidity/v2'
-  | 'remove liquidity/v3'
-  | 'remove liquidity/v2'
+type PartialTransactionResponse = Pick<TransactionResponse, 'hash' | 'v' | 'r' | 's'>
+
+const SUPPORTED_TRANSACTION_TYPES = [
+  TransactionType.ADD_LIQUIDITY_V2_POOL,
+  TransactionType.ADD_LIQUIDITY_V3_POOL,
+  TransactionType.CREATE_V3_POOL,
+  TransactionType.REMOVE_LIQUIDITY_V3,
+  TransactionType.SWAP,
+]
 
 const FIREBASE_API_KEY = process.env.REACT_APP_FIREBASE_KEY
-
 const firebaseEnabled = typeof FIREBASE_API_KEY !== 'undefined'
-
 if (firebaseEnabled) initializeFirebase()
 
-export function useMonitoringEventCallback() {
-  const { account, chainId } = useActiveWeb3React()
+function useMonitoringEventCallback() {
+  const { chainId } = useActiveWeb3React()
 
   return useCallback(
     async function log(
-      type: MonitoringEvent,
+      type: string,
       {
         transactionResponse,
-        walletAddress = account,
-      }: { transactionResponse?: TransactionResponse; walletAddress?: typeof account }
+        walletAddress,
+      }: { transactionResponse?: PartialTransactionResponse; walletAddress: string | undefined }
     ) {
       if (!firebaseEnabled) return
 
@@ -42,12 +43,8 @@ export function useMonitoringEventCallback() {
         push(ref(db, 'trm'), {
           chainId,
           origin: location.origin,
-          tx: transactionResponse
-            ? (({ hash, v, r, s }: Pick<TransactionResponse, 'hash' | 'v' | 'r' | 's'>) => ({ hash, v, r, s }))(
-                transactionResponse
-              )
-            : undefined,
           timestamp: Date.now(),
+          tx: transactionResponse,
           type,
           walletAddress,
         })
@@ -55,7 +52,37 @@ export function useMonitoringEventCallback() {
         console.debug('Error adding document: ', e)
       }
     },
-    [account, chainId]
+    [chainId]
+  )
+}
+
+export function useTransactionMonitoringEventCallback() {
+  const { account } = useActiveWeb3React()
+  const log = useMonitoringEventCallback()
+
+  return useCallback(
+    (info: TransactionInfo, transactionResponse: TransactionResponse) => {
+      if (SUPPORTED_TRANSACTION_TYPES.includes(info.type)) {
+        log(TransactionType[info.type], {
+          transactionResponse: (({ hash, v, r, s }: PartialTransactionResponse) => ({ hash, v, r, s }))(
+            transactionResponse
+          ),
+          walletAddress: account ?? undefined,
+        })
+      }
+    },
+    [account, log]
+  )
+}
+
+export function useWalletConnectMonitoringEventCallback() {
+  const log = useMonitoringEventCallback()
+
+  return useCallback(
+    (walletAddress) => {
+      log('WALLET_CONNECTED', { walletAddress })
+    },
+    [log]
   )
 }
 

src/hooks/useSwapCallback.tsx

@@ -17,7 +17,6 @@ import { useArgentWalletContract } from './useArgentWalletContract'
 import { useV2RouterContract } from './useContract'
 import useENS from './useENS'
 import { SignatureData } from './useERC20Permit'
-import { useMonitoringEventCallback } from './useMonitoringEventCallback'
 import useTransactionDeadline from './useTransactionDeadline'
 import { useActiveWeb3React } from './web3'
 
@@ -279,8 +278,6 @@ export function useSwapCallback(
 
   const addTransaction = useTransactionAdder()
 
-  const logMonitoringEvent = useMonitoringEventCallback()
-
   const { address: recipientAddress } = useENS(recipientAddressOrName)
   const recipient = recipientAddressOrName === null ? account : recipientAddress
 
@@ -394,7 +391,6 @@ export function useSwapCallback(
                     expectedInputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
                   }
             )
-            logMonitoringEvent('swap', { transactionResponse: response })
 
             return response.hash
           })
@@ -412,16 +408,5 @@ export function useSwapCallback(
       },
       error: null,
     }
-  }, [
-    trade,
-    library,
-    account,
-    chainId,
-    recipient,
-    recipientAddressOrName,
-    swapCalls,
-    addTransaction,
-    allowedSlippage,
-    logMonitoringEvent,
-  ])
+  }, [trade, library, account, chainId, recipient, recipientAddressOrName, swapCalls, addTransaction, allowedSlippage])
 }

src/pages/AddLiquidity/index.tsx

@@ -5,7 +5,6 @@ import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk'
 import DowntimeWarning from 'components/DowntimeWarning'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
-import { useMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
 import ReactGA from 'react-ga'
@@ -90,8 +89,6 @@ export default function AddLiquidity({
   const addTransaction = useTransactionAdder()
   const positionManager = useV3NFTPositionManagerContract()
 
-  const logMonitoringEvent = useMonitoringEventCallback()
-
   // check for existing position if tokenId in url
   const { position: existingPositionDetails, loading: positionLoading } = useV3PositionFromTokenId(
     tokenId ? BigNumber.from(tokenId) : undefined
@@ -348,7 +345,6 @@ export default function AddLiquidity({
                 action: 'Add',
                 label: [currencies[Field.CURRENCY_A]?.symbol, currencies[Field.CURRENCY_B]?.symbol].join('/'),
               })
-              logMonitoringEvent('add liquidity/v3', { transactionResponse: response })
             })
         })
         .catch((error) => {

src/pages/AddLiquidityV2/index.tsx

@@ -4,7 +4,6 @@ import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
-import { useMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
 import { useCallback, useContext, useState } from 'react'
 import { Plus } from 'react-feather'
 import ReactGA from 'react-ga'
@@ -57,8 +56,6 @@ export default function AddLiquidity({
   const { account, chainId, library } = useActiveWeb3React()
   const theme = useContext(ThemeContext)
 
-  const logMonitoringEvent = useMonitoringEventCallback()
-
   const currencyA = useCurrency(currencyIdA)
   const currencyB = useCurrency(currencyIdB)
 
@@ -206,7 +203,6 @@ export default function AddLiquidity({
             action: 'Add',
             label: [currencies[Field.CURRENCY_A]?.symbol, currencies[Field.CURRENCY_B]?.symbol].join('/'),
           })
-          logMonitoringEvent('add liquidity/v2', { transactionResponse: response })
         })
       )
       .catch((error) => {

src/pages/RemoveLiquidity/V3.tsx

@@ -19,7 +19,6 @@ import Toggle from 'components/Toggle'
 import { SupportedChainId } from 'constants/chains'
 import { useV3NFTPositionManagerContract } from 'hooks/useContract'
 import useDebouncedChangeHandler from 'hooks/useDebouncedChangeHandler'
-import { useMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
 import useTheme from 'hooks/useTheme'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
@@ -69,8 +68,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
   const theme = useTheme()
   const { account, chainId, library } = useActiveWeb3React()
 
-  const logMonitoringEvent = useMonitoringEventCallback()
-
   // flag for receiving WETH
   const [receiveWETH, setReceiveWETH] = useState(false)
 
@@ -155,7 +152,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               action: 'RemoveV3',
               label: [liquidityValue0.currency.symbol, liquidityValue1.currency.symbol].join('/'),
             })
-            logMonitoringEvent('remove liquidity/v3', { transactionResponse: response })
             setTxnHash(response.hash)
             setAttemptingTxn(false)
             addTransaction(response, {
@@ -185,7 +181,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
     library,
     tokenId,
     allowedSlippage,
-    logMonitoringEvent,
     addTransaction,
   ])
 

src/pages/RemoveLiquidity/index.tsx

@@ -3,7 +3,6 @@ import { Contract } from '@ethersproject/contracts'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
 import { Currency, Percent } from '@uniswap/sdk-core'
-import { useMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
 import { useCallback, useContext, useMemo, useState } from 'react'
 import { ArrowDown, Plus } from 'react-feather'
 import ReactGA from 'react-ga'
@@ -58,8 +57,6 @@ export default function RemoveLiquidity({
 
   const theme = useContext(ThemeContext)
 
-  const logMonitoringEvent = useMonitoringEventCallback()
-
   // toggle wallet when disconnected
   const toggleWalletModal = useWalletModalToggle()
 
@@ -283,7 +280,6 @@ export default function RemoveLiquidity({
             action: 'Remove',
             label: [currencyA.symbol, currencyB.symbol].join('/'),
           })
-          logMonitoringEvent('remove liquidity/v2', { transactionResponse: response })
         })
         .catch((error: Error) => {
           setAttemptingTxn(false)

src/state/transactions/hooks.tsx

@@ -1,4 +1,5 @@
 import { TransactionResponse } from '@ethersproject/providers'
+import { useTransactionMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
 import { useCallback, useMemo } from 'react'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 
@@ -11,6 +12,8 @@ export function useTransactionAdder(): (response: TransactionResponse, info: Tra
   const { chainId, account } = useActiveWeb3React()
   const dispatch = useAppDispatch()
 
+  const logMonitoringEvent = useTransactionMonitoringEventCallback()
+
   return useCallback(
     (response: TransactionResponse, info: TransactionInfo) => {
       if (!account) return
@@ -21,8 +24,10 @@ export function useTransactionAdder(): (response: TransactionResponse, info: Tra
         throw Error('No transaction hash found.')
       }
       dispatch(addTransaction({ hash, from: account, info, chainId }))
+
+      logMonitoringEvent(info, response)
     },
-    [dispatch, chainId, account]
+    [account, chainId, dispatch, logMonitoringEvent]
   )
 }