Fix use transaction time remaining (#9630)

* Only format timeRemaining if in useTransactionTimeRemaining if it is truthy

* Only setTimeRemaining in useTransactionTimeRemaining if submitted time is a number

* Use isSubmitted as a check, instead of isPending and submittedTime, before calculating timeRemaining

ui/app/components/app/transaction-list-item/transaction-list-item.component.js

@@ -50,9 +50,10 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
     displayedStatusKey,
     isPending,
     senderAddress,
+    isSubmitted,
   } = useTransactionDisplayData(transactionGroup)
 
-  const timeRemaining = useTransactionTimeRemaining(isPending, isEarliestNonce, submittedTime, gasPrice)
+  const timeRemaining = useTransactionTimeRemaining(isSubmitted, isEarliestNonce, submittedTime, gasPrice)
 
   const isSignatureReq = category === TRANSACTION_CATEGORY_SIGNATURE_REQUEST
   const isApproval = category === TRANSACTION_CATEGORY_APPROVAL

ui/app/hooks/tests/useTransactionDisplayData.test.js

@@ -27,6 +27,7 @@ const expectedResults = [
     secondaryCurrency: '-1 ETH',
     isPending: false,
     displayedStatusKey: 'confirmed',
+    isSubmitted: false,
   },
   {
     title: 'Send ETH',

ui/app/hooks/useTransactionDisplayData.js

@@ -23,6 +23,7 @@ import {
   TOKEN_CATEGORY_HASH,
   SWAP,
   SWAP_APPROVAL,
+  SUBMITTED_STATUS,
 } from '../helpers/constants/transactions'
 import { getTokens } from '../ducks/metamask/metamask'
 import { useI18nContext } from './useI18nContext'
@@ -74,6 +75,7 @@ export function useTransactionDisplayData (transactionGroup) {
 
   const displayedStatusKey = getStatusKey(primaryTransaction)
   const isPending = displayedStatusKey in PENDING_STATUS_HASH
+  const isSubmitted = displayedStatusKey === SUBMITTED_STATUS
 
   const primaryValue = primaryTransaction.txParams?.value
   let prefix = '-'
@@ -213,5 +215,6 @@ export function useTransactionDisplayData (transactionGroup) {
     ) ? undefined : secondaryCurrency,
     displayedStatusKey,
     isPending,
+    isSubmitted,
   }
 }

ui/app/hooks/useTransactionTimeRemaining.js

@@ -26,7 +26,7 @@ function calcTransactionTimeRemaining (initialTimeEstimate, submittedTime) {
  * returns a string representing the number of minutes predicted for the transaction to be
  * completed. Only returns this prediction if the transaction is the earliest pending
  * transaction, and the feature flag for showing timing is enabled.
- * @param {bool} isPending         - is the transaction currently pending
+ * @param {bool} isSubmitted       - is the transaction currently in the 'submitted' state
  * @param {bool} isEarliestNonce   - is this transaction the earliest nonce in list
  * @param {number} submittedTime   - the timestamp for when the transaction was submitted
  * @param {number} currentGasPrice - gas price to use for calculation of time
@@ -34,7 +34,7 @@ function calcTransactionTimeRemaining (initialTimeEstimate, submittedTime) {
  * @returns {string | undefined} i18n formatted string if applicable
  */
 export function useTransactionTimeRemaining (
-  isPending,
+  isSubmitted,
   isEarliestNonce,
   submittedTime,
   currentGasPrice,
@@ -73,7 +73,7 @@ export function useTransactionTimeRemaining (
     if (
       (isMainNet &&
       (transactionTimeFeatureActive || forceAllow)) &&
-      isPending &&
+      isSubmitted &&
       isEarliestNonce &&
       !isNaN(initialTimeEstimate)
     ) {
@@ -93,10 +93,10 @@ export function useTransactionTimeRemaining (
     isMainNet,
     transactionTimeFeatureActive,
     isEarliestNonce,
-    isPending,
     submittedTime,
     initialTimeEstimate,
     forceAllow,
+    isSubmitted,
   ])
 
   // there are numerous checks to determine if time should be displayed.
@@ -104,8 +104,10 @@ export function useTransactionTimeRemaining (
   // User is currently not on the mainnet
   // User does not have the transactionTime feature flag enabled
   // The transaction is not pending, or isn't the earliest nonce
-  const usedFormat = dontFormat
-    ? timeRemaining
-    : rtf.format(timeRemaining, 'minute')
-  return timeRemaining ? usedFormat : undefined
+  if (timeRemaining && dontFormat) {
+    return timeRemaining
+  } else if (timeRemaining) {
+    return rtf.format(timeRemaining, 'minute')
+  }
+  return undefined
 }

ui/app/pages/swaps/awaiting-swap/awaiting-swap.js

@@ -19,7 +19,7 @@ import { useTransactionTimeRemaining } from '../../../hooks/useTransactionTimeRe
 import { usePrevious } from '../../../hooks/usePrevious'
 import Mascot from '../../../components/ui/mascot'
 import PulseLoader from '../../../components/ui/pulse-loader'
-import { getBlockExplorerUrlForTx } from '../../../helpers/utils/transactions.util'
+import { getBlockExplorerUrlForTx, getStatusKey } from '../../../helpers/utils/transactions.util'
 import CountdownTimer from '../countdown-timer'
 import {
   QUOTES_EXPIRED_ERROR,
@@ -28,6 +28,7 @@ import {
   QUOTES_NOT_AVAILABLE_ERROR,
   OFFLINE_FOR_MAINTENANCE,
 } from '../../../helpers/constants/swaps'
+import { SUBMITTED_STATUS } from '../../../helpers/constants/transactions'
 import { ASSET_ROUTE, DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 
 import { getRenderableGasFeesForQuote } from '../swaps.util'
@@ -96,7 +97,14 @@ export default function AwaitingSwap ({
     rpcPrefs,
   )
 
-  const timeRemaining = useTransactionTimeRemaining(true, true, tradeTxData?.submittedTime, usedGasPrice, true, true)
+  const timeRemaining = useTransactionTimeRemaining(
+    getStatusKey(tradeTxData) === SUBMITTED_STATUS,
+    true,
+    tradeTxData?.submittedTime,
+    usedGasPrice,
+    true,
+    true,
+  )
   const previousTimeRemaining = usePrevious(timeRemaining)
   const timeRemainingIsNumber = typeof timeRemaining === 'number' && !isNaN(timeRemaining)
   const previousTimeRemainingIsNumber = typeof previousTimeRemaining === 'number' && !isNaN(previousTimeRemaining)