feat: enable tx submission before swap quotes are loaded

app/components/UI/Bridge/Views/BridgeView/BridgeView.test.tsx

@@ -1265,6 +1265,7 @@ describe('BridgeView', () => {
         await waitFor(() => {
           expect(mockSubmitBridgeTx).toHaveBeenCalledWith({
             quoteResponse: mockQuote,
+            warnings: [],
           });
           expect(mockNavigate).toHaveBeenCalledWith(Routes.TRANSACTIONS_VIEW);
         });
@@ -1331,6 +1332,7 @@ describe('BridgeView', () => {
         await waitFor(() => {
           expect(mockSubmitBridgeTx).toHaveBeenCalledWith({
             quoteResponse: mockQuote,
+            warnings: [],
           });
           expect(mockNavigate).toHaveBeenCalledWith(Routes.TRANSACTIONS_VIEW);
         });
@@ -1394,6 +1396,7 @@ describe('BridgeView', () => {
         await waitFor(() => {
           expect(mockSubmitBridgeTx).toHaveBeenCalledWith({
             quoteResponse: mockQuote,
+            warnings: [],
           });
           expect(mockNavigate).toHaveBeenCalledWith(Routes.TRANSACTIONS_VIEW);
         });
@@ -1454,6 +1457,7 @@ describe('BridgeView', () => {
         await waitFor(() => {
           expect(mockSubmitBridgeTx).toHaveBeenCalledWith({
             quoteResponse: mockQuote,
+            warnings: [],
           });
           expect(mockNavigate).toHaveBeenCalledWith(Routes.TRANSACTIONS_VIEW);
         });

app/components/UI/Bridge/Views/BridgeView/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import ScreenView from '../../../../Base/ScreenView';
 import {
@@ -77,7 +77,7 @@
 import { useRecipientInitialization } from '../../hooks/useRecipientInitialization';
 import ApprovalTooltip from '../../components/ApprovalText';
 import { RootState } from '../../../../../reducers/index.ts';
-import { BRIDGE_MM_FEE_RATE } from '@metamask/bridge-controller';
+import { BRIDGE_MM_FEE_RATE, QuoteWarning } from '@metamask/bridge-controller';
 import { isNullOrUndefined } from '@metamask/utils';
 import { useBridgeQuoteEvents } from '../../hooks/useBridgeQuoteEvents/index.ts';
 import { SwapsKeypad } from '../../components/SwapsKeypad/index.tsx';
@@ -206,20 +206,34 @@
   });
 
   const isSubmitDisabled =
-    isLoading ||
     hasInsufficientBalance ||
     isSubmittingTx ||
     (isHardwareAddress && isSolanaSourced) ||
     !!blockaidError ||
     !hasSufficientGas;
 
-  useBridgeQuoteEvents({
+  const warnings = useMemo(() => {
+    const latestWarnings: QuoteWarning[] = [];
+
+    isNoQuotesAvailable && latestWarnings.push('no_quotes');
+    !hasSufficientGas &&
+      latestWarnings.push('insufficient_gas_for_selected_quote');
+    hasInsufficientBalance && latestWarnings.push('insufficient_balance');
+    Boolean(blockaidError) && latestWarnings.push('tx_alert');
+    shouldShowPriceImpactWarning && latestWarnings.push('price_impact');
+
+    return latestWarnings;
+  }, [
+    isNoQuotesAvailable,
+    hasSufficientGas,
     hasInsufficientBalance,
-    hasNoQuotesAvailable: isNoQuotesAvailable,
-    hasInsufficientGas: !hasSufficientGas,
-    hasTxAlert: Boolean(blockaidError),
+    blockaidError,
+    shouldShowPriceImpactWarning,
+  ]);
+
+  useBridgeQuoteEvents({
+    warnings,
     isSubmitDisabled,
-    isPriceImpactWarningVisible: shouldShowPriceImpactWarning,
   });
 
   // Compute error state directly from dependencies
@@ -322,6 +336,7 @@
         dispatch(setIsSubmittingTx(true));
         await submitBridgeTx({
           quoteResponse: activeQuote,
+          warnings,
         });
       }
     } catch (error) {
@@ -402,7 +417,7 @@
       );
     }
 
     // TODO: remove this once controller types are updated
     // @ts-expect-error: controller types are not up to date yet
     const quoteBpsFee = activeQuote?.quote?.feeData?.metabridge?.quoteBpsFee;
     const feePercentage = !isNullOrUndefined(quoteBpsFee)
@@ -456,11 +471,11 @@
                 ? strings('bridge.fee_disclaimer', {
                     feePercentage,
                   })
                 : !hasFee && isNoFeeDestinationAsset
                   ? strings('bridge.no_mm_fee_disclaimer', {
                       destTokenSymbol: destToken?.symbol,
                     })
                   : ''}
               {approval
                 ? ` ${strings('bridge.approval_needed', approval)}`
                 : ''}{' '}

app/components/UI/Bridge/hooks/useBridgeQuoteEvents/index.ts

@@ -3,77 +3,41 @@ import {
   selectBridgeControllerState,
   selectBridgeQuotes,
 } from '../../../../../core/redux/slices/bridge';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import Engine from '../../../../../core/Engine';
 import {
-  formatProviderLabel,
+  getQuotesReceivedProperties,
+  type QuoteWarning,
   UnifiedSwapBridgeEventName,
 } from '@metamask/bridge-controller';
 
 /**
  * Hook for publishing the QuotesReceived event
  */
 export const useBridgeQuoteEvents = ({
-  hasInsufficientBalance,
-  hasNoQuotesAvailable,
-  hasInsufficientGas,
-  hasTxAlert,
   isSubmitDisabled,
-  isPriceImpactWarningVisible,
+  warnings,
 }: {
-  hasInsufficientBalance: boolean;
-  hasNoQuotesAvailable: boolean;
-  hasInsufficientGas: boolean;
-  hasTxAlert: boolean;
   isSubmitDisabled: boolean;
-  isPriceImpactWarningVisible: boolean;
+  warnings: QuoteWarning[];
 }) => {
   const { quoteFetchError, quotesRefreshCount } = useSelector(
     selectBridgeControllerState,
   );
   const { activeQuote, recommendedQuote, isLoading } =
     useSelector(selectBridgeQuotes);
 
-  const warnings = useMemo(() => {
-    const latestWarnings = [];
-
-    hasNoQuotesAvailable && latestWarnings.push('no_quotes');
-    hasInsufficientGas &&
-      latestWarnings.push('insufficient_gas_for_selected_quote');
-    hasInsufficientBalance && latestWarnings.push('insufficient_balance');
-    hasTxAlert && latestWarnings.push('tx_alert');
-    isPriceImpactWarningVisible && latestWarnings.push('price_impact_warning');
-
-    return latestWarnings;
-  }, [
-    hasNoQuotesAvailable,
-    hasInsufficientGas,
-    hasInsufficientBalance,
-    hasTxAlert,
-    isPriceImpactWarningVisible,
-  ]);
-
   // Emit QuotesReceived event each time quotes are fetched successfully
   useEffect(() => {
     if (!isLoading && quotesRefreshCount > 0 && !quoteFetchError) {
       Engine.context.BridgeController.trackUnifiedSwapBridgeEvent(
         UnifiedSwapBridgeEventName.QuotesReceived,
-        {
-          can_submit: !isSubmitDisabled,
-          gas_included: Boolean(activeQuote?.quote?.gasIncluded),
-          gas_included_7702: Boolean(activeQuote?.quote?.gasIncluded7702),
-          quoted_time_minutes: activeQuote?.estimatedProcessingTimeInSeconds
-            ? activeQuote.estimatedProcessingTimeInSeconds / 60
-            : 0,
-          usd_quoted_gas: Number(activeQuote?.gasFee?.effective?.usd ?? 0),
-          usd_quoted_return: Number(activeQuote?.toTokenAmount?.usd ?? 0),
-          best_quote_provider: recommendedQuote
-            ? formatProviderLabel(recommendedQuote.quote)
-            : undefined,
-          provider: activeQuote ? formatProviderLabel(activeQuote.quote) : '_',
+        getQuotesReceivedProperties(
+          activeQuote,
           warnings,
-          price_impact: Number(activeQuote?.quote.priceData?.priceImpact ?? 0),
-        },
+          !isSubmitDisabled,
+          recommendedQuote,
+        ),
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

app/components/UI/Bridge/hooks/useBridgeQuoteEvents/useBridgeQuoteEvents.test.tsx

@@ -3,7 +3,7 @@ import { useBridgeQuoteEvents } from '.';
 import Engine from '../../../../../core/Engine';
 import { createBridgeTestState } from '../../testUtils';
 import { mockQuoteWithMetadata } from '../../_mocks_/bridgeQuoteWithMetadata';
-import { RequestStatus } from '@metamask/bridge-controller';
+import { QuoteWarning, RequestStatus } from '@metamask/bridge-controller';
 
 jest.mock('../../../../../core/Engine', () => ({
   context: {
@@ -39,12 +39,8 @@ describe('useBridgeQuoteEvents', () => {
       renderHookWithProvider(
         () =>
           useBridgeQuoteEvents({
-            hasNoQuotesAvailable: false,
-            hasInsufficientBalance: false,
-            hasInsufficientGas: false,
-            hasTxAlert: false,
             isSubmitDisabled: false,
-            isPriceImpactWarningVisible: false,
+            warnings: [],
           }),
         { state: testState },
       );
@@ -80,12 +76,8 @@ describe('useBridgeQuoteEvents', () => {
       renderHookWithProvider(
         () =>
           useBridgeQuoteEvents({
-            hasNoQuotesAvailable: false,
-            hasInsufficientBalance: false,
-            hasInsufficientGas: false,
-            hasTxAlert: false,
             isSubmitDisabled: false,
-            isPriceImpactWarningVisible: false,
+            warnings: warnings as QuoteWarning[],
             ...hookArgs,
           }),
         { state: testState },

app/util/bridge/hooks/useSubmitBridgeTx.test.tsx

@@ -152,6 +152,7 @@ describe('useSubmitBridgeTx', () => {
 
     const txResult = await result.current.submitBridgeTx({
       quoteResponse: mockQuoteResponse as QuoteResponse & QuoteMetadata,
+      warnings: [],
     });
 
     expect(mockSubmitTx).toHaveBeenCalledWith(
@@ -161,6 +162,18 @@ describe('useSubmitBridgeTx', () => {
         approval: undefined,
       },
       true,
+      {
+        best_quote_provider: 'lifi_across',
+        can_submit: true,
+        gas_included: false,
+        gas_included_7702: false,
+        price_impact: 0,
+        provider: 'lifi_across',
+        quoted_time_minutes: 0.03333333333333333,
+        usd_quoted_gas: 0.6491483498924696,
+        usd_quoted_return: 9.707614272223898,
+        warnings: [],
+      },
     );
     expect(txResult).toEqual({
       chainId: '0x1',
@@ -197,6 +210,7 @@ describe('useSubmitBridgeTx', () => {
 
     const txResult = await result.current.submitBridgeTx({
       quoteResponse: mockQuoteResponse as QuoteResponse & QuoteMetadata,
+      warnings: [],
     });
 
     expect(mockSubmitTx).toHaveBeenCalledWith(
@@ -206,6 +220,18 @@ describe('useSubmitBridgeTx', () => {
         approval: mockQuoteResponse.approval ?? undefined,
       },
       true,
+      {
+        best_quote_provider: 'lifi_across',
+        can_submit: true,
+        gas_included: false,
+        gas_included_7702: false,
+        price_impact: 0,
+        provider: 'lifi_across',
+        quoted_time_minutes: 0.3,
+        usd_quoted_gas: 0.6491483498924696,
+        usd_quoted_return: 9.707614272223898,
+        warnings: [],
+      },
     );
     expect(txResult).toEqual({
       chainId: '0x1',
@@ -235,6 +261,7 @@ describe('useSubmitBridgeTx', () => {
     await expect(
       result.current.submitBridgeTx({
         quoteResponse: mockQuoteResponse as QuoteResponse & QuoteMetadata,
+        warnings: [],
       }),
     ).rejects.toThrow('Approval failed');
   });
@@ -255,6 +282,7 @@ describe('useSubmitBridgeTx', () => {
     await expect(
       result.current.submitBridgeTx({
         quoteResponse: mockQuoteResponse as QuoteResponse & QuoteMetadata,
+        warnings: [],
       }),
     ).rejects.toThrow('Bridge transaction failed');
   });
@@ -280,6 +308,7 @@ describe('useSubmitBridgeTx', () => {
     await expect(
       result.current.submitBridgeTx({
         quoteResponse: invalidQuoteResponse as QuoteResponse & QuoteMetadata,
+        warnings: [],
       }),
     ).rejects.toThrow('Serialization failed');
   });
@@ -300,6 +329,7 @@ describe('useSubmitBridgeTx', () => {
     await expect(
       result.current.submitBridgeTx({
         quoteResponse: mockQuoteResponse as QuoteResponse & QuoteMetadata,
+        warnings: [],
       }),
     ).rejects.toThrow('Wallet address is not set');
   });

app/util/bridge/hooks/useSubmitBridgeTx.ts

@@ -1,5 +1,10 @@
 import Engine from '../../../core/Engine';
-import { QuoteMetadata, QuoteResponse } from '@metamask/bridge-controller';
+import {
+  getQuotesReceivedProperties,
+  QuoteMetadata,
+  QuoteResponse,
+  QuoteWarning,
+} from '@metamask/bridge-controller';
 import { useSelector } from 'react-redux';
 import { selectShouldUseSmartTransaction } from '../../../selectors/smartTransactionsController';
 import { selectSourceWalletAddress } from '../../../selectors/bridge';
@@ -10,8 +15,10 @@ export default function useSubmitBridgeTx() {
 
   const submitBridgeTx = async ({
     quoteResponse,
+    warnings,
   }: {
     quoteResponse: QuoteResponse & QuoteMetadata;
+    warnings: QuoteWarning[];
   }) => {
     if (!walletAddress) {
       throw new Error('Wallet address is not set');
@@ -23,6 +30,7 @@ export default function useSubmitBridgeTx() {
         approval: quoteResponse.approval ?? undefined,
       },
       stxEnabled,
+      getQuotesReceivedProperties(quoteResponse, warnings, true),
     );
 
     return txResult;

package.json

@@ -201,8 +201,8 @@
     "@metamask/assets-controllers": "patch:@metamask/assets-controllers@npm%3A89.0.1#~/.yarn/patches/@metamask-assets-controllers-npm-89.0.1-02fa7acd54.patch",
     "@metamask/base-controller": "^9.0.0",
     "@metamask/bitcoin-wallet-snap": "^1.7.0",
-    "@metamask/bridge-controller": "^61.0.0",
-    "@metamask/bridge-status-controller": "^61.0.0",
+    "@metamask/bridge-controller": "^63.2.0",
+    "@metamask/bridge-status-controller": "^63.1.0",
     "@metamask/chain-agnostic-permission": "^1.2.2",
     "@metamask/composable-controller": "^12.0.0",
     "@metamask/controller-utils": "^11.11.0",