fix: transaction remain pending

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

@@ -105,7 +105,7 @@ export class TxSender {
   txId: string
 
   // On transaction completion (either confirming or executing)
-  async onComplete(signature?: string, confirmCallback?: ConfirmEventHandler): Promise<void> {
+  async onComplete(signature?: string, confirmCallback?: ConfirmEventHandler, txHash?: string): Promise<void> {
     const { txArgs, safeTxHash, txProps, dispatch, notifications, isFinalization } = this
 
     // Propose the tx to the backend
@@ -114,17 +114,16 @@ export class TxSender {
     let txDetails: TransactionDetails | null = null
     if (!isFinalization || !this.txId) {
       try {
-        txDetails = await saveTxToHistory({ ...txArgs, signature, origin })
+        txDetails = await saveTxToHistory({ ...txArgs, signature, origin: txProps.origin })
       } catch (err) {
         logError(Errors._816, err.message)
         return
       }
     }
 
-    // If threshold reached except for last sig, and owner chooses to execute the created tx immediately
-    // we retrieve txId of newly created tx from the proposal response
-    if (isFinalization && txDetails) {
-      dispatch(addPendingTransaction({ id: txDetails.txId }))
+    const id = txDetails?.txId || this.txId
+    if (isFinalization && id && txHash) {
+      dispatch(addPendingTransaction({ id, txHash }))
     }
 
     notifications.closePending()
@@ -184,26 +183,21 @@ export class TxSender {
     )
   }
 
-  async sendTx(): Promise<string> {
-    const { txArgs, isFinalization, from, safeTxHash, txProps, dispatch, txId } = this
+  async sendTx(confirmCallback?: ConfirmEventHandler): Promise<string> {
+    const { txArgs, isFinalization, from, safeTxHash, txProps } = this
 
     const tx = isFinalization ? getExecutionTransaction(txArgs) : getApprovalTransaction(this.safeInstance, safeTxHash)
     const sendParams = createSendParams(from, txProps.ethParameters || {})
-    const promiEvent = tx.send(sendParams)
 
-    // When signing on-chain don't mark as pending as it is never removed
-    if (isFinalization) {
-      // Finalising existing transaction (txId exists)
-      if (txId) {
-        dispatch(addPendingTransaction({ id: txId }))
-      }
-      aboutToExecuteTx.setNonce(txArgs.nonce)
-    }
-
-    return new Promise((resolve, reject) => {
-      promiEvent.once('transactionHash', resolve) // this happens much faster than receipt
-      promiEvent.once('error', reject)
-    })
+    return await tx
+      .send(sendParams)
+      .once('transactionHash', (txHash) => {
+        if (isFinalization) {
+          aboutToExecuteTx.setNonce(txArgs.nonce)
+        }
+        this.onComplete(undefined, confirmCallback, txHash)
+      })
+      .then(({ transactionHash }) => transactionHash)
   }
 
   async submitTx(
@@ -228,8 +222,7 @@ export class TxSender {
 
     // On-chain signature or execution
     try {
-      await this.sendTx()
-      this.onComplete(undefined, confirmCallback)
+      await this.sendTx(confirmCallback)
     } catch (err) {
       this.onError(err, errorCallback)
     }

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

@@ -1,10 +1,15 @@
 import { createAction } from 'redux-actions'
-import { PendingTransactionPayload } from 'src/logic/safe/store/reducer/pendingTransactions'
+import {
+  AddPendingTransactionPayload,
+  RemovePendingTransactionPayload,
+} from 'src/logic/safe/store/reducer/pendingTransactions'
 
 export enum PENDING_TRANSACTIONS_ACTIONS {
   ADD = 'pendingTransactions/add',
   REMOVE = 'pendingTransactions/remove',
 }
 
-export const addPendingTransaction = createAction<PendingTransactionPayload>(PENDING_TRANSACTIONS_ACTIONS.ADD)
-export const removePendingTransaction = createAction<PendingTransactionPayload>(PENDING_TRANSACTIONS_ACTIONS.REMOVE)
+export const addPendingTransaction = createAction<AddPendingTransactionPayload>(PENDING_TRANSACTIONS_ACTIONS.ADD)
+export const removePendingTransaction = createAction<RemovePendingTransactionPayload>(
+  PENDING_TRANSACTIONS_ACTIONS.REMOVE,
+)

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

@@ -7,7 +7,7 @@ import {
   addPendingTransaction,
   removePendingTransaction,
 } from 'src/logic/safe/store/actions/pendingTransactions'
-import { PENDING_TRANSACTIONS_ID, PendingTransactionPayload } from 'src/logic/safe/store/reducer/pendingTransactions'
+import { PENDING_TRANSACTIONS_ID, PendingTransactionPayloads } from 'src/logic/safe/store/reducer/pendingTransactions'
 import { Dispatch } from 'src/logic/safe/store/actions/types'
 import { allPendingTxIds } from 'src/logic/safe/store/selectors/pendingTransactions'
 
@@ -46,7 +46,7 @@ if (channel) {
 export const pendingTransactionsMiddleware =
   ({ getState }: typeof reduxStore) =>
   (next: Dispatch) =>
-  async (action: Action<PendingTransactionPayload>): Promise<Action<PendingTransactionPayload>> => {
+  async (action: Action<PendingTransactionPayloads>): Promise<Action<PendingTransactionPayloads>> => {
     const handledAction = next(action)
 
     switch (action.type) {

src/logic/safe/store/reducer/pendingTransactions.ts

@@ -7,32 +7,38 @@ import { _getChainId } from 'src/config'
 
 export const PENDING_TRANSACTIONS_ID = 'pendingTransactions'
 
-export type PendingTransactionsState = Record<ChainId, Record<string, boolean>>
+export type PendingTransactionsState = Record<ChainId, Record<string, string | boolean>>
 
 const initialPendingTxsState = session.getItem<PendingTransactionsState>(PENDING_TRANSACTIONS_ID) || {}
 
-export type PendingTransactionPayload = {
+export type RemovePendingTransactionPayload = {
   id: string
   isBroadcast?: boolean
 }
 
-export const pendingTransactionsReducer = handleActions<PendingTransactionsState, PendingTransactionPayload>(
+export type AddPendingTransactionPayload = RemovePendingTransactionPayload & {
+  txHash: string | boolean
+}
+
+export type PendingTransactionPayloads = AddPendingTransactionPayload | RemovePendingTransactionPayload
+
+export const pendingTransactionsReducer = handleActions<PendingTransactionsState, PendingTransactionPayloads>(
   {
     [PENDING_TRANSACTIONS_ACTIONS.ADD]: (
       state: PendingTransactionsState,
-      action: Action<PendingTransactionPayload>,
+      action: Action<AddPendingTransactionPayload>,
     ) => {
       const chainId = _getChainId()
-      const { id } = action.payload
+      const { id, txHash } = action.payload
 
       return {
         ...state,
-        [chainId]: { ...state[chainId], [id]: true },
+        [chainId]: { ...state[chainId], [id]: txHash },
       }
     },
     [PENDING_TRANSACTIONS_ACTIONS.REMOVE]: (
       state: PendingTransactionsState,
-      action: Action<PendingTransactionPayload>,
+      action: Action<RemovePendingTransactionPayload>,
     ) => {
       const chainId = _getChainId()
       const { id } = action.payload