feat: refresh metamask pay quotes (MetaMask#19365)

## **Description**

Automatically refresh quotes in confirmation based on the refresh rate
in the existing Bridge feature flags.

Automatically refresh quotes for all but first bridge in the `PayHook`.

Increase buffer on subsequent bridges using new `bufferSubsequent`
feature flag.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
[MetaMask#5734](MetaMask/MetaMask-planning#5734)

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: matthewwalsh0

app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx

@@ -33,7 +33,7 @@ export function PayWithRow() {
   const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation();
   const { payToken } = useTransactionPayToken();
-  const { totalFiat } = useTransactionRequiredFiat();
+  const { totalFiat } = useTransactionRequiredFiat({ log: true });
 
   useTransactionBridgeQuotes();
 

app/components/Views/confirmations/components/rows/total-row/total-row.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import Text from '../../../../../../component-library/components/Texts/Text';
 import InfoRow from '../../UI/info-row';
 import { useTransactionTotalFiat } from '../../../hooks/pay/useTransactionTotalFiat';
@@ -12,23 +12,15 @@ import AnimatedSpinner, {
 } from '../../../../../UI/AnimatedSpinner';
 import { View } from 'react-native';
 import { TransactionType } from '@metamask/transaction-controller';
-import { createProjectLogger } from '@metamask/utils';
-
-const log = createProjectLogger('transaction-pay');
 
 export function TotalRow() {
   const { id: transactionId, type } = useTransactionMetadataOrThrow();
-  const totals = useTransactionTotalFiat();
-  const { totalFormatted } = totals;
+  const { totalFormatted } = useTransactionTotalFiat({ log: true });
 
   const isQuotesLoading = useSelector((state: RootState) =>
     selectIsTransactionBridgeQuotesLoadingById(state, transactionId),
   );
 
-  useEffect(() => {
-    log('Total fiat', totals);
-  }, [totals]);
-
   return (
     <View testID="total-row">
       <InfoRow

app/components/Views/confirmations/external/perps-temp/components/deposit/deposit.test.tsx

@@ -23,6 +23,7 @@ jest.mock('../../hooks/usePerpsDepositView');
 jest.mock('../../../../hooks/useTokenAsset');
 jest.mock('../../../../hooks/useTokenAmount');
 jest.mock('../../../../hooks/ui/useClearConfirmationOnBackSwipe');
+jest.mock('../../../../hooks/pay/useTransactionBridgeQuotes');
 
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),

app/components/Views/confirmations/hooks/pay/useAutomaticTransactionPayToken.ts

@@ -34,7 +34,7 @@ export function useAutomaticTransactionPayToken({
   );
 
   const tokens = useTokensWithBalance({ chainIds });
-  const requiredTokens = useTransactionRequiredTokens();
+  const requiredTokens = useTransactionRequiredTokens({ log: true });
   const { chainId } = useTransactionMetadataRequest() ?? {};
   const { setPayToken } = useTransactionPayToken();
   const { totalFiat } = useTransactionRequiredFiat();

app/components/Views/confirmations/hooks/pay/useTransactionBridgeQuotes.test.ts

@@ -15,16 +15,26 @@ import {
   ATTEMPTS_MAX_DEFAULT,
   BUFFER_INITIAL_DEFAULT,
   BUFFER_STEP_DEFAULT,
-  SLIPPAGE_INITIAL_DEFAULT,
-  SLIPPAGE_SUBSEQUENT_DEFAULT,
+  BUFFER_SUBSEQUENT_DEFAULT,
+  SLIPPAGE_DEFAULT,
 } from '../../../../../selectors/featureFlagController/confirmations';
+import { initialState } from '../../../../UI/Bridge/_mocks_/initialState';
 
 jest.mock('./useTransactionPayToken');
 jest.mock('./useTransactionPayTokenAmounts');
 jest.mock('../transactions/useTransactionMetadataRequest');
 jest.mock('../../utils/bridge');
 jest.mock('../../context/alert-system-context');
 
+jest.mock(
+  '../../../../../core/redux/slices/bridge/utils/hasMinimumRequiredVersion',
+  () => ({
+    hasMinimumRequiredVersion: jest.fn().mockReturnValue(true),
+  }),
+);
+
+jest.useFakeTimers();
+
 const TRANSACTION_ID_MOCK = '1234-5678';
 const CHAIN_ID_SOURCE_MOCK = '0x1';
 const CHAIN_ID_TARGET_MOCK = '0x2';
@@ -43,8 +53,9 @@ const QUOTE_MOCK = {
 } as TransactionBridgeQuote;
 
 function runHook() {
-  return renderHookWithProvider(useTransactionBridgeQuotes, { state: {} })
-    .result;
+  return renderHookWithProvider(useTransactionBridgeQuotes, {
+    state: initialState,
+  });
 }
 
 describe('useTransactionBridgeQuotes', () => {
@@ -115,9 +126,9 @@ describe('useTransactionBridgeQuotes', () => {
         attemptsMax: ATTEMPTS_MAX_DEFAULT,
         bufferInitial: BUFFER_INITIAL_DEFAULT,
         bufferStep: BUFFER_STEP_DEFAULT,
+        bufferSubsequent: BUFFER_SUBSEQUENT_DEFAULT,
         from: ACCOUNT_ADDRESS_MOCK,
-        slippageInitial: SLIPPAGE_INITIAL_DEFAULT,
-        slippageSubsequent: SLIPPAGE_SUBSEQUENT_DEFAULT,
+        slippage: SLIPPAGE_DEFAULT,
         sourceBalanceRaw: SOURCE_BALANCE_RAW_MOCK,
         sourceChainId: CHAIN_ID_SOURCE_MOCK,
         sourceTokenAddress: TOKEN_ADDRESS_SOURCE_MOCK,
@@ -130,9 +141,9 @@ describe('useTransactionBridgeQuotes', () => {
         attemptsMax: ATTEMPTS_MAX_DEFAULT,
         bufferInitial: BUFFER_INITIAL_DEFAULT,
         bufferStep: BUFFER_STEP_DEFAULT,
+        bufferSubsequent: BUFFER_SUBSEQUENT_DEFAULT,
         from: ACCOUNT_ADDRESS_MOCK,
-        slippageInitial: SLIPPAGE_INITIAL_DEFAULT,
-        slippageSubsequent: SLIPPAGE_SUBSEQUENT_DEFAULT,
+        slippage: SLIPPAGE_DEFAULT,
         sourceBalanceRaw: SOURCE_BALANCE_RAW_MOCK,
         sourceChainId: CHAIN_ID_SOURCE_MOCK,
         sourceTokenAddress: TOKEN_ADDRESS_SOURCE_MOCK,
@@ -145,7 +156,7 @@ describe('useTransactionBridgeQuotes', () => {
   });
 
   it('returns bridge quotes', async () => {
-    const result = runHook();
+    const { result } = runHook();
 
     await act(async () => {
       // Intentionally empty
@@ -177,7 +188,7 @@ describe('useTransactionBridgeQuotes', () => {
       payToken: undefined,
     } as unknown as ReturnType<typeof useTransactionPayToken>);
 
-    const result = runHook();
+    const { result } = runHook();
 
     await act(async () => {
       // Intentionally empty
@@ -196,7 +207,7 @@ describe('useTransactionBridgeQuotes', () => {
       ],
     } as unknown as ReturnType<typeof useAlerts>);
 
-    const result = runHook();
+    const { result } = runHook();
 
     await act(async () => {
       // Intentionally empty
@@ -217,7 +228,7 @@ describe('useTransactionBridgeQuotes', () => {
         ],
       } as unknown as ReturnType<typeof useAlerts>);
 
-      const result = runHook();
+      const { result } = runHook();
 
       await act(async () => {
         // Intentionally empty
@@ -226,4 +237,24 @@ describe('useTransactionBridgeQuotes', () => {
       expect(result.current.quotes).toStrictEqual([QUOTE_MOCK, QUOTE_MOCK]);
     },
   );
+
+  it('refreshes quotes', async () => {
+    runHook();
+
+    await act(async () => {
+      // Intentionally empty
+    });
+
+    await act(async () => {
+      await jest.advanceTimersByTimeAsync(29000);
+    });
+
+    expect(getBridgeQuotesMock).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      await jest.advanceTimersByTimeAsync(2000);
+    });
+
+    expect(getBridgeQuotesMock).toHaveBeenCalledTimes(2);
+  });
 });

app/components/Views/confirmations/hooks/pay/useTransactionBridgeQuotes.ts

@@ -1,7 +1,7 @@
 import { useTransactionPayTokenAmounts } from './useTransactionPayTokenAmounts';
 import { useAsyncResult } from '../../../../hooks/useAsyncResult';
 import { BridgeQuoteRequest, getBridgeQuotes } from '../../utils/bridge';
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTransactionPayToken } from './useTransactionPayToken';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -14,6 +14,11 @@ import { useDeepMemo } from '../useDeepMemo';
 import { useAlerts } from '../../context/alert-system-context';
 import { AlertKeys } from '../../constants/alerts';
 import { selectMetaMaskPayFlags } from '../../../../../selectors/featureFlagController/confirmations';
+import {
+  getQuoteRefreshRate,
+  isQuoteExpired,
+} from '../../../../UI/Bridge/utils/quoteUtils';
+import { selectBridgeFeatureFlags } from '../../../../../core/redux/slices/bridge';
 
 const EXCLUDED_ALERTS = [
   AlertKeys.NoPayTokenQuotes,
@@ -26,14 +31,43 @@ export function useTransactionBridgeQuotes() {
   const dispatch = useDispatch();
   const transactionMeta = useTransactionMetadataOrThrow();
   const { alerts } = useAlerts();
+  const { payToken } = useTransactionPayToken() ?? {};
+  const { amounts: sourceAmounts } = useTransactionPayTokenAmounts({
+    log: true,
+  });
+  const bridgeFeatureFlags = useSelector(selectBridgeFeatureFlags);
+  const refreshRate = getQuoteRefreshRate(bridgeFeatureFlags);
+  const [lastFetched, setLastFetched] = useState(0);
+  const interval = useRef<NodeJS.Timer>();
+  const isExpired = useRef(false);
+  const [refreshIndex, setRefreshIndex] = useState(0);
 
-  const {
-    attemptsMax,
-    bufferInitial,
-    bufferStep,
-    slippageInitial,
-    slippageSubsequent,
-  } = useSelector(selectMetaMaskPayFlags);
+  useEffect(() => {
+    if (interval.current) {
+      clearInterval(interval.current as unknown as number);
+    }
+
+    interval.current = setInterval(() => {
+      if (
+        !isExpired.current &&
+        lastFetched &&
+        isQuoteExpired(false, refreshRate, lastFetched)
+      ) {
+        log('Quote expired', { refreshRate, lastFetched });
+        isExpired.current = true;
+        setRefreshIndex((index) => index + 1);
+      }
+    }, 1000);
+
+    return () => {
+      if (interval.current) {
+        clearInterval(interval.current as unknown as number);
+      }
+    };
+  }, [isExpired, lastFetched, refreshRate]);
+
+  const { attemptsMax, bufferInitial, bufferStep, bufferSubsequent, slippage } =
+    useSelector(selectMetaMaskPayFlags);
 
   const hasBlockingAlert = alerts.some(
     (a) => a.isBlocking && !EXCLUDED_ALERTS.includes(a.key as AlertKeys),
@@ -45,9 +79,6 @@ export function useTransactionBridgeQuotes() {
     txParams: { from },
   } = transactionMeta;
 
-  const { payToken } = useTransactionPayToken() ?? {};
-  const { amounts: sourceAmounts } = useTransactionPayTokenAmounts();
-
   const {
     address: sourceTokenAddress,
     balanceRaw,
@@ -77,9 +108,9 @@ export function useTransactionBridgeQuotes() {
         attemptsMax,
         bufferInitial,
         bufferStep,
+        bufferSubsequent,
         from: from as Hex,
-        slippageInitial,
-        slippageSubsequent,
+        slippage,
         sourceBalanceRaw,
         sourceChainId,
         sourceTokenAddress,
@@ -95,8 +126,7 @@ export function useTransactionBridgeQuotes() {
     bufferStep,
     from,
     hasBlockingAlert,
-    slippageInitial,
-    slippageSubsequent,
+    slippage,
     sourceAmounts,
     sourceBalanceRaw,
     sourceChainId,
@@ -110,7 +140,7 @@ export function useTransactionBridgeQuotes() {
     }
 
     return getBridgeQuotes(requests);
-  }, [requests]);
+  }, [requests, refreshIndex]);
 
   useEffect(() => {
     dispatch(
@@ -121,6 +151,11 @@ export function useTransactionBridgeQuotes() {
   useEffect(() => {
     dispatch(setTransactionBridgeQuotes({ transactionId, quotes }));
 
+    if (quotes?.length) {
+      isExpired.current = false;
+      setLastFetched(Date.now());
+    }
+
     log(
       'Bridge quotes',
       quotes?.map((quote) => ({

app/components/Views/confirmations/hooks/pay/useTransactionPayTokenAmounts.ts

@@ -5,19 +5,23 @@ import { useTokenFiatRates } from '../tokens/useTokenFiatRates';
 import { useTransactionRequiredFiat } from './useTransactionRequiredFiat';
 import { Hex, createProjectLogger } from '@metamask/utils';
 import { useDeepMemo } from '../useDeepMemo';
+import { noop } from 'lodash';
 
-const log = createProjectLogger('transaction-pay');
+const logger = createProjectLogger('transaction-pay');
 
 /**
  * Calculate the amount of the selected pay token, that is needed for each token required by the transaction.
  */
 export function useTransactionPayTokenAmounts({
   amountOverrides,
+  log: isLoggingEnabled,
 }: {
   amountOverrides?: Record<Hex, string>;
+  log?: boolean;
 } = {}) {
   const { payToken } = useTransactionPayToken();
   const { address, chainId, decimals } = payToken ?? {};
+  const log = isLoggingEnabled ? logger : noop;
 
   const fiatRequests = useMemo(() => {
     if (!address || !chainId) {
@@ -50,14 +54,15 @@ export function useTransactionPayTokenAmounts({
 
     return values
       .filter((value) => {
+        const { address: currentAddress } = value;
         const hasBalance = value.balanceFiat > value.amountFiat;
 
         const isSameTokenSelected =
           address.toLowerCase() === value.address.toLowerCase();
 
         const hasOtherTokenWithoutBalance = values.some(
           (v) =>
-            v.address.toLowerCase() !== address.toLowerCase() &&
+            v.address.toLowerCase() !== currentAddress.toLowerCase() &&
             v.balanceFiat < v.amountFiat,
         );
 
@@ -121,7 +126,7 @@ export function useTransactionPayTokenAmounts({
       totalHuman,
       totalRaw,
     });
-  }, [amounts, totalHuman, totalRaw]);
+  }, [amounts, log, totalHuman, totalRaw]);
 
   return {
     amounts,

app/components/Views/confirmations/hooks/pay/useTransactionRequiredFiat.test.ts

@@ -85,16 +85,16 @@ describe('useTransactionRequiredFiat', () => {
         amountFiat: 15,
         amountRaw: '3000',
         balanceFiat: 100,
-        feeFiat: 0.375,
+        feeFiat: 0.75,
         skipIfBalance: true,
-        totalFiat: 15.375,
+        totalFiat: 15.75,
       },
     ]);
   });
 
   it('returns total fiat value', () => {
     const { totalFiat } = runHook();
-    expect(totalFiat).toBe(23.575);
+    expect(totalFiat).toBe(23.95);
   });
 
   it('supports amount overrides', () => {
@@ -119,9 +119,9 @@ describe('useTransactionRequiredFiat', () => {
         amountFiat: 15,
         amountRaw: '3000',
         balanceFiat: 100,
-        feeFiat: 0.375,
+        feeFiat: 0.75,
         skipIfBalance: true,
-        totalFiat: 15.375,
+        totalFiat: 15.75,
       },
     ]);
   });