add transaction status in selector

src/routes/safe/components/TransactionsNew/TxsTable/columns.js

@@ -22,26 +22,14 @@ type TxData = {
   type: string,
   date: string,
   amount: number | string,
-  status: string,
   tx: Transaction,
+  status?: string,
 }
 
 export const formatDate = (date: Date): string => format(date, 'MMM D, YYYY - h:m:s')
 
 export type TransactionRow = SortRow<TxData>
 
-const getTxStatus = (tx: Transaction): string => {
-  let txStatus = 'awaiting'
-
-  if (tx.isExecuted) {
-    txStatus = 'success'
-  } else if (tx.cancelled) {
-    txStatus = 'cancelled'
-  }
-
-  return txStatus
-}
-
 export const getTxTableData = (transactions: List<Transaction>): List<TransactionRow> => {
   const rows = transactions.map((tx: Transaction) => {
     const txDate = tx.isExecuted ? tx.executionDate : tx.submissionDate
@@ -52,7 +40,7 @@ export const getTxTableData = (transactions: List<Transaction>): List<Transactio
       [TX_TABLE_DATE_ID]: formatDate(tx.isExecuted ? tx.executionDate : tx.submissionDate),
       [buildOrderFieldFrom(TX_TABLE_DATE_ID)]: getTime(txDate),
       [TX_TABLE_AMOUNT_ID]: Number(tx.value) > 0 ? `${fromWei(toBN(tx.value), 'ether')} ${tx.symbol}` : 'n/a',
-      [TX_TABLE_STATUS_ID]: getTxStatus(tx),
+      [TX_TABLE_STATUS_ID]: tx.status,
       [TX_TABLE_RAW_TX_ID]: tx,
     }
   })

src/routes/safe/container/selector.js

@@ -17,7 +17,7 @@ import { sameAddress } from '~/logic/wallets/ethAddresses'
 import { safeTransactionsSelector } from '~/routes/safe/store/selectors/index'
 import { orderedTokenListSelector, tokensSelector } from '~/logic/tokens/store/selectors'
 import { type Token } from '~/logic/tokens/store/model/token'
-import { type Transaction } from '~/routes/safe/store/models/transaction'
+import { type Transaction, type TransactionStatus } from '~/routes/safe/store/models/transaction'
 import { type TokenBalance } from '~/routes/safe/store/models/tokenBalance'
 import { safeParamAddressSelector } from '../store/selectors'
 import { getEthAsToken } from '~/logic/tokens/utils/tokenHelpers'
@@ -33,6 +33,18 @@ export type SelectorProps = {
   transactions: List<Transaction>,
 }
 
+const getTxStatus = (tx: Transaction): TransactionStatus => {
+  let txStatus = 'awaiting'
+
+  if (tx.isExecuted) {
+    txStatus = 'success'
+  } else if (tx.cancelled) {
+    txStatus = 'cancelled'
+  }
+
+  return txStatus
+}
+
 export const grantedSelector: Selector<GlobalState, RouterProps, boolean> = createSelector(
   userAccountSelector,
   safeSelector,
@@ -94,21 +106,21 @@ const extendedTransactionsSelector: Selector<GlobalState, RouterProps, List<Tran
   safeTransactionsSelector,
   (transactions) => {
     const extendedTransactions = transactions.map((tx: Transaction) => {
-      if (tx.isExecuted) {
-        return tx
-      }
+      let extendedTx = tx
 
       // If transactions is not executed, but there's a transaction with the same nonce submitted later
       // it means that the transaction was cancelled (Replaced) and shouldn't get executed
-      const replacementTransaction = transactions.findLast(
+      let replacementTransaction
+      if (!tx.isExecuted) {
+        replacementTransaction = transactions.findLast(
           transaction => transaction.nonce === tx.nonce && isAfter(transaction.submissionDate, tx.submissionDate),
         )
-
-      if (!replacementTransaction) {
-        return tx
+        if (replacementTransaction) {
+          extendedTx = tx.set('cancelled', true)
+        }
       }
 
-      return tx.set('cancelled', true)
+      return extendedTx.set('status', getTxStatus(extendedTx))
     })
 
     return extendedTransactions

src/routes/safe/store/models/transaction.js

@@ -3,6 +3,8 @@ import { List, Record } from 'immutable'
 import type { RecordFactory, RecordOf } from 'immutable'
 import { type Confirmation } from '~/routes/safe/store/models/confirmation'
 
+export type TransactionStatus = 'awaiting' | 'success' | 'cancelled'
+
 export type TransactionProps = {
   name: string,
   nonce: number,
@@ -17,6 +19,7 @@ export type TransactionProps = {
   creationTxHash: string,
   executionTxHash?: string,
   cancelled?: boolean,
+  status?: TransactionStatus,
 }
 
 export const makeTransaction: RecordFactory<TransactionProps> = Record({
@@ -33,6 +36,7 @@ export const makeTransaction: RecordFactory<TransactionProps> = Record({
   executionTxHash: undefined,
   creationTxHash: '',
   cancelled: false,
+  status: 'awaiting',
 })
 
 export type Transaction = RecordOf<TransactionProps>