fix: replace hardcoded slippage + expire bridge quotes (#29028)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Changes
- Replaces hardcoded slippage with the slippage percentage included in
the quote request
- Disables tx submission 30s after final quote fetch

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29028?quickstart=1)

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-1771

## **Manual testing steps**

1. Submit a tx
2. Request quotes with sufficient balance
3. 30 seconds after the last fetch, the CTA should be disabled

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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-extension/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: micaelae

app/_locales/en/messages.json

@@ -1,11 +1,12 @@
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { zeroAddress } from 'ethereumjs-util';
 import { useHistory } from 'react-router-dom';
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { QuoteMetadata, QuoteResponse } from '../types';
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
 import { setDefaultHomeActiveTabName } from '../../../store/actions';
 import { startPollingForBridgeTxStatus } from '../../../ducks/bridge-status/actions';
+import { getQuoteRequest } from '../../../ducks/bridge/selectors';
 import useAddToken from './useAddToken';
 import useHandleApprovalTx from './useHandleApprovalTx';
 import useHandleBridgeTx from './useHandleBridgeTx';
@@ -16,6 +17,7 @@ export default function useSubmitBridgeTransaction() {
   const { addSourceToken, addDestToken } = useAddToken();
   const { handleApprovalTx } = useHandleApprovalTx();
   const { handleBridgeTx } = useHandleBridgeTx();
+  const { slippage } = useSelector(getQuoteRequest);
 
   const submitBridgeTransaction = async (
     quoteResponse: QuoteResponse & QuoteMetadata,
@@ -51,7 +53,7 @@ export default function useSubmitBridgeTransaction() {
         bridgeTxMeta,
         statusRequest,
         quoteResponse,
-        slippagePercentage: 0, // TODO pull this from redux/bridgecontroller once it's implemented. currently hardcoded in quoteRequest.slippage right now
+        slippagePercentage: slippage ?? 0,
         startTime: bridgeTxMeta.time,
       }),
     );

ui/pages/bridge/hooks/useSubmitBridgeTransaction.ts

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Button } from '../../../components/component-library';
 import {
@@ -8,6 +8,7 @@ import {
   getToToken,
   getBridgeQuotes,
   getValidationErrors,
+  getBridgeQuotesConfig,
 } from '../../../ducks/bridge/selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import useSubmitBridgeTransaction from '../hooks/useSubmitBridgeTransaction';
@@ -29,7 +30,9 @@ export const BridgeCTAButton = () => {
 
   const fromAmount = useSelector(getFromAmount);
 
-  const { isLoading, activeQuote } = useSelector(getBridgeQuotes);
+  const { isLoading, activeQuote, isQuoteGoingToRefresh, quotesRefreshCount } =
+    useSelector(getBridgeQuotes);
+  const { maxRefreshCount, refreshRate } = useSelector(getBridgeQuotesConfig);
 
   const { submitBridgeTransaction } = useSubmitBridgeTransaction();
 
@@ -44,7 +47,28 @@ export const BridgeCTAButton = () => {
   const requestMetadataProperties = useRequestMetadataProperties();
   const tradeProperties = useTradeProperties();
 
+  const [isQuoteExpired, setIsQuoteExpired] = useState(false);
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    // Reset the isQuoteExpired if quote fethching restarts
+    if (quotesRefreshCount === 0) {
+      setIsQuoteExpired(false);
+      return () => clearTimeout(timeout);
+    }
+    // After the last quote refresh, set a timeout to expire the quote and disable the CTA
+    if (quotesRefreshCount >= maxRefreshCount && !isQuoteGoingToRefresh) {
+      timeout = setTimeout(() => {
+        setIsQuoteExpired(true);
+      }, refreshRate);
+    }
+    return () => clearTimeout(timeout);
+  }, [isQuoteGoingToRefresh, quotesRefreshCount]);
+
   const label = useMemo(() => {
+    if (isQuoteExpired) {
+      return t('bridgeQuoteExpired');
+    }
+
     if (isLoading && !isTxSubmittable) {
       return t('swapFetchingQuotes');
     }
@@ -76,6 +100,7 @@ export const BridgeCTAButton = () => {
     isTxSubmittable,
     balanceAmount,
     isInsufficientBalance,
+    isQuoteExpired,
   ]);
 
   return (
@@ -97,7 +122,7 @@ export const BridgeCTAButton = () => {
           submitBridgeTransaction(activeQuote);
         }
       }}
-      disabled={!isTxSubmittable}
+      disabled={!isTxSubmittable || isQuoteExpired}
     >
       {label}
     </Button>