diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx index a3f8cfe354..214538befc 100644 --- a/src/components/WalletModal/index.tsx +++ b/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) { diff --git a/src/hooks/useMonitoringEventCallback.ts b/src/hooks/useMonitoringEventCallback.ts index 71028057d8..9e3668f108 100644 --- a/src/hooks/useMonitoringEventCallback.ts +++ b/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 + +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) => ({ 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] ) } diff --git a/src/hooks/useSwapCallback.tsx b/src/hooks/useSwapCallback.tsx index ad80b07eae..92cb3e1874 100644 --- a/src/hooks/useSwapCallback.tsx +++ b/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]) } diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index 1f74324906..7900ed1b1a 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/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) => { diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx index 660835d8f4..ecf7e99feb 100644 --- a/src/pages/AddLiquidityV2/index.tsx +++ b/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) => { diff --git a/src/pages/RemoveLiquidity/V3.tsx b/src/pages/RemoveLiquidity/V3.tsx index 0469f449de..b8f4f831ba 100644 --- a/src/pages/RemoveLiquidity/V3.tsx +++ b/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, ]) diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx index 1b8bf4b696..b740bacb55 100644 --- a/src/pages/RemoveLiquidity/index.tsx +++ b/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) diff --git a/src/state/transactions/hooks.tsx b/src/state/transactions/hooks.tsx index eea44954a2..c6b1bd5899 100644 --- a/src/state/transactions/hooks.tsx +++ b/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] ) }