metamask-extension/ui/app/hooks/useShouldShowSpeedUp.js

import { useEffect, useState } from 'react'

/**
 * Evaluates whether the transaction is eligible to be sped up, and registers
 * an effect to check the logic again after the transaction has surpassed 5 seconds
 * of queue time.
 * @param {Object} transactionGroup - the transaction group to check against
 * @param {boolean} isEarliestNonce - Whether this group is currently the earliest nonce
 */
export function useShouldShowSpeedUp (transactionGroup, isEarliestNonce) {
  const { transactions, hasRetried } = transactionGroup
  const [earliestTransaction = {}] = transactions
  const { submittedTime } = earliestTransaction
  const [speedUpEnabled, setSpeedUpEnabled] = useState(() => {
    return Date.now() - submittedTime > 5000 && isEarliestNonce && !hasRetried
  })
  useEffect(() => {
    // because this hook is optimized to only run on changes we have to
    // key into the changing time delta between submittedTime and now()
    // and if the status of the transaction changes based on that difference
    // trigger a setState call to tell react to re-render. This effect will
    // also immediately set retryEnabled and not create a timeout if the
    // condition is already met. This effect will run anytime the variables
    // for determining enabled status change
    let timeoutId
    if (!hasRetried && isEarliestNonce && !speedUpEnabled) {
      if (Date.now() - submittedTime > 5000) {
        setSpeedUpEnabled(true)
      } else {
        timeoutId = setTimeout(() => {
          setSpeedUpEnabled(true)
          clearTimeout(timeoutId)
        }, 5001 - (Date.now() - submittedTime))
      }
    }
    // Anytime the effect is re-ran, make sure to remove a previously set timeout
    // so as to avoid multiple timers potentially overlapping
    return () => {
      if (timeoutId) {
        clearTimeout(timeoutId)
      }
    }
  }, [submittedTime, hasRetried, isEarliestNonce])

  return speedUpEnabled
}