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, speedUpEnabled, hasRetried, isEarliestNonce]);

  return speedUpEnabled;
}