log full signed tx (#2681)

src/hooks/useMonitoringEventCallback.ts

@@ -1,3 +1,4 @@
+import { TransactionResponse } from '@ethersproject/providers'
 import { initializeApp } from 'firebase/app'
 import { getDatabase, push, ref } from 'firebase/database'
 import { useCallback } from 'react'
@@ -16,7 +17,7 @@ const FIREBASE_API_KEY = process.env.REACT_APP_FIREBASE_KEY
 
 const firebaseEnabled = typeof FIREBASE_API_KEY !== 'undefined'
 
-initializeFirebase()
+if (firebaseEnabled) initializeFirebase()
 
 export function useMonitoringEventCallback() {
   const { account, chainId } = useActiveWeb3React()
@@ -24,7 +25,10 @@ export function useMonitoringEventCallback() {
   return useCallback(
     async function log(
       type: MonitoringEvent,
-      { hash, walletAddress = account }: { hash?: string; walletAddress?: typeof account }
+      {
+        transactionResponse,
+        walletAddress = account,
+      }: { transactionResponse?: TransactionResponse; walletAddress?: typeof account }
     ) {
       if (!firebaseEnabled) return
 
@@ -38,7 +42,11 @@ export function useMonitoringEventCallback() {
         push(ref(db, 'trm'), {
           chainId,
           origin: location.origin,
-          signedTransactionHash: hash ?? 'n/a',
+          tx: transactionResponse
+            ? (({ hash, v, r, s }: Pick<TransactionResponse, 'hash' | 'v' | 'r' | 's'>) => ({ hash, v, r, s }))(
+                transactionResponse
+              )
+            : undefined,
           timestamp: Date.now(),
           type,
           walletAddress,
@@ -52,7 +60,6 @@ export function useMonitoringEventCallback() {
 }
 
 function initializeFirebase() {
-  if (!firebaseEnabled) return
   initializeApp({
     apiKey: process.env.REACT_APP_FIREBASE_KEY,
     authDomain: 'interface-monitoring.firebaseapp.com',

src/hooks/useSwapCallback.tsx

@@ -17,6 +17,7 @@ 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'
 
@@ -278,6 +279,8 @@ export function useSwapCallback(
 
   const addTransaction = useTransactionAdder()
 
+  const logMonitoringEvent = useMonitoringEventCallback()
+
   const { address: recipientAddress } = useENS(recipientAddressOrName)
   const recipient = recipientAddressOrName === null ? account : recipientAddress
 
@@ -391,6 +394,7 @@ export function useSwapCallback(
                     expectedInputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
                   }
             )
+            logMonitoringEvent('swap', { transactionResponse: response })
 
             return response.hash
           })
@@ -408,5 +412,16 @@ export function useSwapCallback(
       },
       error: null,
     }
-  }, [trade, library, account, chainId, recipient, recipientAddressOrName, swapCalls, addTransaction, allowedSlippage])
+  }, [
+    trade,
+    library,
+    account,
+    chainId,
+    recipient,
+    recipientAddressOrName,
+    swapCalls,
+    addTransaction,
+    allowedSlippage,
+    logMonitoringEvent,
+  ])
 }

src/pages/AddLiquidity/index.tsx

@@ -348,7 +348,7 @@ export default function AddLiquidity({
                 action: 'Add',
                 label: [currencies[Field.CURRENCY_A]?.symbol, currencies[Field.CURRENCY_B]?.symbol].join('/'),
               })
-              logMonitoringEvent('add liquidity/v3', { hash: response.hash })
+              logMonitoringEvent('add liquidity/v3', { transactionResponse: response })
             })
         })
         .catch((error) => {

src/pages/AddLiquidityV2/index.tsx

@@ -206,7 +206,7 @@ export default function AddLiquidity({
             action: 'Add',
             label: [currencies[Field.CURRENCY_A]?.symbol, currencies[Field.CURRENCY_B]?.symbol].join('/'),
           })
-          logMonitoringEvent('add liquidity/v2', { hash: response.hash })
+          logMonitoringEvent('add liquidity/v2', { transactionResponse: response })
         })
       )
       .catch((error) => {

src/pages/RemoveLiquidity/V3.tsx

@@ -155,7 +155,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               action: 'RemoveV3',
               label: [liquidityValue0.currency.symbol, liquidityValue1.currency.symbol].join('/'),
             })
-            logMonitoringEvent('remove liquidity/v3', { hash: response.hash })
+            logMonitoringEvent('remove liquidity/v3', { transactionResponse: response })
             setTxnHash(response.hash)
             setAttemptingTxn(false)
             addTransaction(response, {

src/pages/RemoveLiquidity/index.tsx

@@ -283,7 +283,7 @@ export default function RemoveLiquidity({
             action: 'Remove',
             label: [currencyA.symbol, currencyB.symbol].join('/'),
           })
-          logMonitoringEvent('remove liquidity/v2', { hash: response.hash })
+          logMonitoringEvent('remove liquidity/v2', { transactionResponse: response })
         })
         .catch((error: Error) => {
           setAttemptingTxn(false)

src/pages/Swap/index.tsx

@@ -10,7 +10,6 @@ import SwapRoute from 'components/swap/SwapRoute'
 import TradePrice from 'components/swap/TradePrice'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import { MouseoverTooltip, MouseoverTooltipContent } from 'components/Tooltip'
-import { useMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
 import JSBI from 'jsbi'
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { ArrowDown, CheckCircle, HelpCircle, Info } from 'react-feather'
@@ -81,8 +80,6 @@ export default function Swap({ history }: RouteComponentProps) {
   const { account } = useActiveWeb3React()
   const loadedUrlParams = useDefaultsFromURLSearch()
 
-  const logMonitoringEvent = useMonitoringEventCallback()
-
   // token warning stuff
   const [loadedInputCurrency, loadedOutputCurrency] = [
     useCurrency(loadedUrlParams?.inputCurrencyId),
@@ -288,7 +285,6 @@ export default function Swap({ history }: RouteComponentProps) {
             'MH',
           ].join('/'),
         })
-        logMonitoringEvent('swap', { hash })
       })
       .catch((error) => {
         setSwapState({
@@ -299,17 +295,7 @@ export default function Swap({ history }: RouteComponentProps) {
           txHash: undefined,
         })
       })
-  }, [
+  }, [swapCallback, priceImpact, tradeToConfirm, showConfirm, recipient, recipientAddress, account, trade])
-    swapCallback,
-    priceImpact,
-    tradeToConfirm,
-    showConfirm,
-    recipient,
-    recipientAddress,
-    account,
-    trade,
-    logMonitoringEvent,
-  ])
 
   // errors
   const [showInverted, setShowInverted] = useState<boolean>(false)