Fix: deep-linked tx status and internal state

src/logic/hooks/useLocalTxStatus.ts

@@ -0,0 +1,22 @@
+import { useSelector } from 'react-redux'
+import { TransactionStatus } from '@gnosis.pm/safe-react-gateway-sdk'
+import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
+import { AppReduxState } from 'src/store'
+import { selectTxStatus } from 'src/logic/safe/store/selectors/txStatus'
+import { useState } from 'react'
+import { useDebounce } from './useDebounce'
+
+const useLocalTxStatus = (transaction: Transaction): TransactionStatus => {
+  const storedStatus = useSelector((state: AppReduxState) => selectTxStatus(state, transaction))
+  const [localStatus, setLocalStatus] = useState(storedStatus)
+
+  useDebounce(() => {
+    if (storedStatus) {
+      setLocalStatus(storedStatus)
+    }
+  }, 100)
+
+  return localStatus
+}
+
+export default useLocalTxStatus

src/logic/safe/store/actions/__tests__/utils.test.ts

@@ -1,5 +1,4 @@
 import { FEATURES } from '@gnosis.pm/safe-react-gateway-sdk'
-import { TransactionStatus } from '@gnosis.pm/safe-react-gateway-sdk'
 
 import { ChainId } from 'src/config/chain.d'
 import {
@@ -10,6 +9,7 @@ import {
 } from 'src/logic/safe/store/actions/utils'
 import { SafeRecordProps } from 'src/logic/safe/store/models/safe'
 import { getMockedSafeInstance, getMockedStoredTServiceModel } from 'src/test/utils/safeHelper'
+import { LocalTransactionStatus } from '../../models/types/gateway.d'
 import {
   inMemoryPartialSafeInformation,
   localSafesInfo,
@@ -37,7 +37,7 @@ describe('shouldExecuteTransaction', () => {
     const nonce = '1'
     const threshold = '1'
     const safeInstance = getMockedSafeInstance({ threshold, nonce })
-    const lastTxFromStoreExecuted = { ...lastTxFromStore, txStatus: TransactionStatus.SUCCESS }
+    const lastTxFromStoreExecuted = { ...lastTxFromStore, txStatus: LocalTransactionStatus.SUCCESS }
 
     // when
     const result = await shouldExecuteTransaction(safeInstance, nonce, lastTxFromStoreExecuted)
@@ -50,7 +50,7 @@ describe('shouldExecuteTransaction', () => {
     const nonce = '10'
     const threshold = '1'
     const safeInstance = getMockedSafeInstance({ threshold, nonce })
-    const lastTxFromStoreExecuted = { ...lastTxFromStore, txStatus: TransactionStatus.SUCCESS }
+    const lastTxFromStoreExecuted = { ...lastTxFromStore, txStatus: LocalTransactionStatus.SUCCESS }
 
     // when
     const result = await shouldExecuteTransaction(safeInstance, nonce, lastTxFromStoreExecuted)
@@ -63,7 +63,7 @@ describe('shouldExecuteTransaction', () => {
     const nonce = '10'
     const threshold = '1'
     const safeInstance = getMockedSafeInstance({ threshold })
-    const lastTxFromStoreExecuted = { ...lastTxFromStore, txStatus: TransactionStatus.FAILED }
+    const lastTxFromStoreExecuted = { ...lastTxFromStore, txStatus: LocalTransactionStatus.FAILED }
 
     // when
     const result = await shouldExecuteTransaction(safeInstance, nonce, lastTxFromStoreExecuted)

src/logic/safe/store/actions/createTransaction.ts

@@ -1,4 +1,4 @@
-import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
+import { Operation, TransactionDetails } from '@gnosis.pm/safe-react-gateway-sdk'
 import { AnyAction } from 'redux'
 import { ThunkAction } from 'redux-thunk'
 
@@ -36,6 +36,8 @@ import { getPrefixedSafeAddressSlug, SAFE_ADDRESS_SLUG, TRANSACTION_ID_SLUG } fr
 import { generatePath } from 'react-router-dom'
 import { getContractErrorMessage } from 'src/logic/contracts/safeContractErrors'
 import { getLastTransaction, getLastTxNonce } from '../selectors/gatewayTransactions'
+import { isMultiSigExecutionDetails, LocalTransactionStatus } from '../models/types/gateway.d'
+import { updateTransactionStatus } from './updateTransactionStatus'
 
 export interface CreateTransactionArgs {
   navigateToTransactionsTab?: boolean
@@ -62,11 +64,14 @@ export const isKeystoneError = (err: Error): boolean => {
   return err.message.startsWith('#ktek_error')
 }
 
-const navigateToTx = (safeAddress: string, txId: string) => {
+const navigateToTx = (safeAddress: string, txDetails: TransactionDetails) => {
+  if (!isMultiSigExecutionDetails(txDetails.detailedExecutionInfo)) {
+    return
+  }
   const prefixedSafeAddress = getPrefixedSafeAddressSlug({ shortName: extractShortChainName(), safeAddress })
   const txRoute = generatePath(SAFE_ROUTES.TRANSACTIONS_SINGULAR, {
     [SAFE_ADDRESS_SLUG]: prefixedSafeAddress,
-    [TRANSACTION_ID_SLUG]: txId,
+    [TRANSACTION_ID_SLUG]: txDetails.detailedExecutionInfo.safeTxHash,
   })
 
   history.push(txRoute)
@@ -125,7 +130,7 @@ export const createTransaction =
     const notificationsQueue = getNotificationsFromTxType(notifiedTransaction, origin)
     const beforeExecutionKey = dispatch(enqueueSnackbar(notificationsQueue.beforeExecution))
 
-    let txHash
+    let txHash = ''
     const txArgs: TxArgs & { sender: string } = {
       safeInstance,
       to,
@@ -142,8 +147,14 @@ export const createTransaction =
       sigs,
     }
 
+    let safeTxHash = ''
+
     try {
-      const safeTxHash = await generateSafeTxHash(safeAddress, safeVersion, txArgs)
+      safeTxHash = await generateSafeTxHash(safeAddress, safeVersion, txArgs)
+
+      if (isExecution) {
+        dispatch(updateTransactionStatus({ safeTxHash, status: LocalTransactionStatus.PENDING }))
+      }
 
       if (checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion)) {
         const signature = await tryOffChainSigning(safeTxHash, { ...txArgs, safeAddress }, hardwareWallet, safeVersion)
@@ -154,7 +165,7 @@ export const createTransaction =
 
           dispatch(fetchTransactions(chainId, safeAddress))
           if (navigateToTransactionsTab) {
-            navigateToTx(safeAddress, txDetails.txId)
+            navigateToTx(safeAddress, txDetails)
           }
           onUserConfirm?.(safeTxHash)
           return
@@ -180,8 +191,9 @@ export const createTransaction =
 
           try {
             const txDetails = await saveTxToHistory({ ...txArgs, origin })
+
             if (navigateToTransactionsTab) {
-              navigateToTx(safeAddress, txDetails.txId)
+              navigateToTx(safeAddress, txDetails)
             }
           } catch (err) {
             logError(Errors._803, err.message)
@@ -207,6 +219,10 @@ export const createTransaction =
 
       dispatch(closeSnackbarAction({ key: beforeExecutionKey }))
 
+      if (isExecution && safeTxHash) {
+        dispatch(updateTransactionStatus({ safeTxHash, status: LocalTransactionStatus.PENDING_FAILED }))
+      }
+
       const executeDataUsedSignatures = safeInstance.methods
         .execTransaction(to, valueInWei, txData, operation, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, sigs)
         .encodeABI()

src/logic/safe/store/actions/processTransaction.ts

@@ -27,13 +27,14 @@ import { Dispatch, DispatchReturn } from './types'
 import { PayableTx } from 'src/types/contracts/types'
 import { updateTransactionStatus } from 'src/logic/safe/store/actions/updateTransactionStatus'
 import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
-import { Operation, TransactionStatus } from '@gnosis.pm/safe-react-gateway-sdk'
+import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
 import { isTxPendingError } from 'src/logic/wallets/getWeb3'
 import { Errors, logError } from 'src/logic/exceptions/CodedException'
 import { getContractErrorMessage } from 'src/logic/contracts/safeContractErrors'
 import { onboardUser } from 'src/components/ConnectButton'
 import { getGasParam } from '../../transactions/gas'
 import { getLastTransaction, getLastTxNonce } from '../selectors/gatewayTransactions'
+import { LocalTransactionStatus } from '../models/types/gateway.d'
 
 interface ProcessTransactionArgs {
   approveAndExecute: boolean
@@ -130,15 +131,6 @@ export const processTransaction =
         if (signature) {
           dispatch(closeSnackbarAction({ key: beforeExecutionKey }))
 
-          dispatch(
-            updateTransactionStatus({
-              chainId,
-              txStatus: TransactionStatus.PENDING,
-              safeAddress,
-              nonce: tx.nonce,
-              id: tx.id,
-            }),
-          )
           await saveTxToHistory({ ...txArgs, signature })
 
           dispatch(fetchTransactions(chainId, safeAddress))
@@ -162,17 +154,9 @@ export const processTransaction =
           txHash = hash
           dispatch(closeSnackbarAction({ key: beforeExecutionKey }))
 
-          dispatch(
-            updateTransactionStatus({
-              chainId,
-              txStatus: TransactionStatus.PENDING,
-              safeAddress,
-              nonce: tx.nonce,
-              // if we provide the tx ID that sole tx will have the _pending_ status.
-              // if not, all the txs that share the same nonce will have the _pending_ status.
-              id: tx.id,
-            }),
-          )
+          if (isExecution) {
+            dispatch(updateTransactionStatus({ safeTxHash: tx.safeTxHash, status: LocalTransactionStatus.PENDING }))
+          }
 
           try {
             await saveTxToHistory({ ...txArgs })
@@ -185,17 +169,6 @@ export const processTransaction =
             logError(Errors._804, e.message)
           }
         })
-        .on('error', () => {
-          dispatch(
-            updateTransactionStatus({
-              chainId,
-              txStatus: TransactionStatus.PENDING_FAILED,
-              safeAddress,
-              nonce: tx.nonce,
-              id: tx.id,
-            }),
-          )
-        })
         .then(async (receipt) => {
           dispatch(fetchTransactions(chainId, safeAddress))
 
@@ -210,15 +183,9 @@ export const processTransaction =
 
       dispatch(closeSnackbarAction({ key: beforeExecutionKey }))
 
-      dispatch(
-        updateTransactionStatus({
-          chainId,
-          txStatus: TransactionStatus.PENDING_FAILED,
-          safeAddress,
-          nonce: tx.nonce,
-          id: tx.id,
-        }),
-      )
+      if (isExecution) {
+        dispatch(updateTransactionStatus({ safeTxHash: tx.safeTxHash, status: LocalTransactionStatus.PENDING_FAILED }))
+      }
 
       const executeData = safeInstance.methods.approveHash(txHash || '').encodeABI()
       const contractErrorMessage = await getContractErrorMessage({

src/logic/safe/store/actions/updateTransactionStatus.ts

@@ -1,6 +1,6 @@
 import { createAction } from 'redux-actions'
 
-import { TransactionStatusPayload } from 'src/logic/safe/store/reducer/gatewayTransactions'
+import { TransactionStatusPayload } from 'src/logic/safe/store/reducer/localTransactions'
 
 export const UPDATE_TRANSACTION_STATUS = 'UPDATE_TRANSACTION_STATUS'
 export const updateTransactionStatus = createAction<TransactionStatusPayload>(UPDATE_TRANSACTION_STATUS)

src/logic/safe/store/actions/utils.ts

@@ -7,8 +7,12 @@ import { buildModulesLinkedList } from 'src/logic/safe/utils/modules'
 import { enabledFeatures, safeNeedsUpdate } from 'src/logic/safe/utils/safeVersion'
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { ChainId } from 'src/config/chain.d'
-import { SafeInfo, TransactionStatus } from '@gnosis.pm/safe-react-gateway-sdk'
-import { Transaction, isMultisigExecutionInfo } from 'src/logic/safe/store/models/types/gateway.d'
+import { SafeInfo } from '@gnosis.pm/safe-react-gateway-sdk'
+import {
+  Transaction,
+  isMultisigExecutionInfo,
+  LocalTransactionStatus,
+} from 'src/logic/safe/store/models/types/gateway.d'
 
 export const getNewTxNonce = async (lastTxNonce: number | undefined, safeInstance: GnosisSafe): Promise<string> => {
   // use current's safe nonce as fallback
@@ -44,7 +48,7 @@ export const shouldExecuteTransaction = async (
   // Once the previous tx is executed, the current tx will be available to be executed
   // by the user using the exec button.
   if (lastTx && isMultisigExecutionInfo(lastTx.executionInfo)) {
-    return lastTx.txStatus === TransactionStatus.SUCCESS && lastTx.executionInfo.nonce + 1 === Number(nonce)
+    return lastTx.txStatus === LocalTransactionStatus.SUCCESS && lastTx.executionInfo.nonce + 1 === Number(nonce)
   }
 
   return false

src/logic/safe/store/middleware/notificationsMiddleware.ts

@@ -23,6 +23,8 @@ import { store as reduxStore } from 'src/store/index'
 import { HistoryPayload } from 'src/logic/safe/store/reducer/gatewayTransactions'
 import { history, extractSafeAddress, generateSafeRoute, ADDRESSED_ROUTE, SAFE_ROUTES } from 'src/routes/routes'
 import { getShortName } from 'src/config'
+import { localStatuses } from '../selectors/txStatus'
+import { currentChainId } from 'src/logic/config/store/selectors'
 
 const watchedActions = [ADD_OR_UPDATE_SAFE, ADD_QUEUED_TRANSACTIONS, ADD_HISTORY_TRANSACTIONS]
 
@@ -105,7 +107,23 @@ const notificationsMiddleware =
           const safesMap = safesAsMap(state)
           const currentSafe = safesMap.get(safeAddress)
 
-          if (!currentSafe || !isUserAnOwner(currentSafe, userAddress) || awaitingTransactions.length === 0) {
+          const chainId = currentChainId(state)
+          const localStatusedSafeTxHashes = Object.keys(localStatuses(state)?.[chainId] || {})
+
+          if (!localStatusedSafeTxHashes.length) {
+            break
+          }
+
+          const hasLocalStatus = transactions.some((tx) =>
+            localStatusedSafeTxHashes.some((safeTxHash) => tx.id.includes(safeTxHash)),
+          )
+
+          if (
+            hasLocalStatus ||
+            !currentSafe ||
+            !isUserAnOwner(currentSafe, userAddress) ||
+            awaitingTransactions.length === 0
+          ) {
             break
           }