chore: emit cross-chain swaps metrics + validation error logic

app/scripts/constants/sentry-state.ts

@@ -116,8 +116,10 @@ export const SENTRY_BACKGROUND_STATE = {
         srcTokenAmount: true,
       },
       quotes: [],
+      quotesInitialLoadTime: true,
       quotesLastFetched: true,
       quotesLoadingStatus: true,
+      quoteFetchError: true,
       quotesRefreshCount: true,
     },
   },

app/scripts/controllers/bridge/bridge-controller.test.ts

@@ -413,6 +413,7 @@ describe('BridgeController', function () {
           ...mockBridgeQuotesNativeErc20Eth,
         ],
         quotesLoadingStatus: 1,
+        quoteFetchError: undefined,
         quotesRefreshCount: 2,
       }),
     );
@@ -433,12 +434,14 @@ describe('BridgeController', function () {
           ...mockBridgeQuotesNativeErc20Eth,
         ],
         quotesLoadingStatus: 2,
+        quoteFetchError: 'Network error',
         quotesRefreshCount: 3,
       }),
     );
-    expect(bridgeController.state.bridgeState.quotesLastFetched).toStrictEqual(
-      secondFetchTime,
-    );
+    secondFetchTime &&
+      expect(
+        bridgeController.state.bridgeState.quotesLastFetched,
+      ).toBeGreaterThan(secondFetchTime);
 
     expect(hasSufficientBalanceSpy).toHaveBeenCalledTimes(1);
     expect(getLayer1GasFeeMock).not.toHaveBeenCalled();
@@ -507,6 +510,7 @@ describe('BridgeController', function () {
         quoteRequest: { ...quoteRequest, walletAddress: undefined },
         quotes: DEFAULT_BRIDGE_CONTROLLER_STATE.quotes,
         quotesLastFetched: DEFAULT_BRIDGE_CONTROLLER_STATE.quotesLastFetched,
+        quotesInitialLoadTime: undefined,
         quotesLoadingStatus:
           DEFAULT_BRIDGE_CONTROLLER_STATE.quotesLoadingStatus,
       }),
@@ -544,6 +548,7 @@ describe('BridgeController', function () {
         quotes: mockBridgeQuotesNativeErc20Eth,
         quotesLoadingStatus: 1,
         quotesRefreshCount: 1,
+        quotesInitialLoadTime: 11000,
       }),
     );
     const firstFetchTime =
@@ -560,6 +565,7 @@ describe('BridgeController', function () {
         quotes: mockBridgeQuotesNativeErc20Eth,
         quotesLoadingStatus: 1,
         quotesRefreshCount: 1,
+        quotesInitialLoadTime: 11000,
       }),
     );
     const secondFetchTime =

app/scripts/controllers/bridge/bridge-controller.ts

@@ -70,6 +70,8 @@ export default class BridgeController extends StaticIntervalPollingController<Br
 > {
   #abortController: AbortController | undefined;
 
+  #quotesFirstFetched: number | undefined;
+
   #getLayer1GasFee: (params: {
     transactionParams: TransactionParams;
     chainId: ChainId;
@@ -150,11 +152,15 @@ export default class BridgeController extends StaticIntervalPollingController<Br
         quotesLastFetched: DEFAULT_BRIDGE_CONTROLLER_STATE.quotesLastFetched,
         quotesLoadingStatus:
           DEFAULT_BRIDGE_CONTROLLER_STATE.quotesLoadingStatus,
+        quoteFetchError: DEFAULT_BRIDGE_CONTROLLER_STATE.quoteFetchError,
         quotesRefreshCount: DEFAULT_BRIDGE_CONTROLLER_STATE.quotesRefreshCount,
+        quotesInitialLoadTime:
+          DEFAULT_BRIDGE_CONTROLLER_STATE.quotesInitialLoadTime,
       };
     });
 
     if (isValidQuoteRequest(updatedQuoteRequest)) {
+      this.#quotesFirstFetched = Date.now();
       const walletAddress = this.#getSelectedAccount().address;
       const srcChainIdInHex = add0x(
         decimalToHex(updatedQuoteRequest.srcChainId),
@@ -242,36 +248,23 @@ export default class BridgeController extends StaticIntervalPollingController<Br
         ...bridgeState,
         quotesLoadingStatus: RequestStatus.LOADING,
         quoteRequest: updatedQuoteRequest,
+        quoteFetchError: DEFAULT_BRIDGE_CONTROLLER_STATE.quoteFetchError,
       };
     });
-    const { maxRefreshCount } =
-      bridgeState.bridgeFeatureFlags[BridgeFeatureFlagsKey.EXTENSION_CONFIG];
-    const newQuotesRefreshCount = bridgeState.quotesRefreshCount + 1;
 
     try {
       const quotes = await fetchBridgeQuotes(
         updatedQuoteRequest,
         this.#abortController.signal,
       );
 
-      // Stop polling if the maximum number of refreshes has been reached
-      if (
-        (updatedQuoteRequest.insufficientBal && newQuotesRefreshCount >= 1) ||
-        (!updatedQuoteRequest.insufficientBal &&
-          newQuotesRefreshCount >= maxRefreshCount)
-      ) {
-        this.stopAllPolling();
-      }
-
       const quotesWithL1GasFees = await this.#appendL1GasFees(quotes);
 
       this.update((_state) => {
         _state.bridgeState = {
           ..._state.bridgeState,
           quotes: quotesWithL1GasFees,
-          quotesLastFetched: Date.now(),
           quotesLoadingStatus: RequestStatus.FETCHED,
-          quotesRefreshCount: newQuotesRefreshCount,
         };
       });
     } catch (error) {
@@ -284,11 +277,39 @@ export default class BridgeController extends StaticIntervalPollingController<Br
       this.update((_state) => {
         _state.bridgeState = {
           ...bridgeState,
+          quoteFetchError:
+            error instanceof Error ? error.message : 'Unknown error',
           quotesLoadingStatus: RequestStatus.ERROR,
-          quotesRefreshCount: newQuotesRefreshCount,
         };
       });
       console.log('Failed to fetch bridge quotes', error);
+    } finally {
+      const { maxRefreshCount } =
+        bridgeState.bridgeFeatureFlags[BridgeFeatureFlagsKey.EXTENSION_CONFIG];
+
+      const updatedQuotesRefreshCount = bridgeState.quotesRefreshCount + 1;
+      // Stop polling if the maximum number of refreshes has been reached
+      if (
+        updatedQuoteRequest.insufficientBal ||
+        (!updatedQuoteRequest.insufficientBal &&
+          updatedQuotesRefreshCount >= maxRefreshCount)
+      ) {
+        this.stopAllPolling();
+      }
+
+      // Update quote fetching stats
+      const quotesLastFetched = Date.now();
+      this.update((_state) => {
+        _state.bridgeState = {
+          ..._state.bridgeState,
+          quotesInitialLoadTime:
+            updatedQuotesRefreshCount === 1 && this.#quotesFirstFetched
+              ? quotesLastFetched - this.#quotesFirstFetched
+              : bridgeState.quotesInitialLoadTime,
+          quotesLastFetched,
+          quotesRefreshCount: updatedQuotesRefreshCount,
+        };
+      });
     }
   };
 

app/scripts/controllers/bridge/constants.ts

@@ -1,13 +1,15 @@
 import { zeroAddress } from 'ethereumjs-util';
 import { Hex } from '@metamask/utils';
-import { METABRIDGE_ETHEREUM_ADDRESS } from '../../../../shared/constants/bridge';
+import {
+  BRIDGE_DEFAULT_SLIPPAGE,
+  METABRIDGE_ETHEREUM_ADDRESS,
+} from '../../../../shared/constants/bridge';
 import { CHAIN_IDS } from '../../../../shared/constants/network';
 import { BridgeControllerState, BridgeFeatureFlagsKey } from './types';
 
 export const BRIDGE_CONTROLLER_NAME = 'BridgeController';
 export const REFRESH_INTERVAL_MS = 30 * 1000;
 const DEFAULT_MAX_REFRESH_COUNT = 5;
-const DEFAULT_SLIPPAGE = 0.5;
 
 export enum RequestStatus {
   LOADING,
@@ -31,11 +33,13 @@ export const DEFAULT_BRIDGE_CONTROLLER_STATE: BridgeControllerState = {
   quoteRequest: {
     walletAddress: undefined,
     srcTokenAddress: zeroAddress(),
-    slippage: DEFAULT_SLIPPAGE,
+    slippage: BRIDGE_DEFAULT_SLIPPAGE,
   },
+  quotesInitialLoadTime: undefined,
   quotes: [],
   quotesLastFetched: undefined,
   quotesLoadingStatus: undefined,
+  quoteFetchError: undefined,
   quotesRefreshCount: 0,
 };
 

app/scripts/controllers/bridge/types.ts

@@ -41,8 +41,10 @@ export type BridgeControllerState = {
   destTopAssets: { address: string }[];
   quoteRequest: Partial<QuoteRequest>;
   quotes: (QuoteResponse & L1GasFees)[];
+  quotesInitialLoadTime?: number;
   quotesLastFetched?: number;
   quotesLoadingStatus?: RequestStatus;
+  quoteFetchError?: string;
   quotesRefreshCount: number;
 };
 

shared/constants/bridge.ts

@@ -30,3 +30,4 @@ export const BRIDGE_QUOTE_MAX_ETA_SECONDS = 60 * 60; // 1 hour
 export const BRIDGE_QUOTE_MAX_RETURN_DIFFERENCE_PERCENTAGE = 0.8; // if a quote returns in x times less return than the best quote, ignore it
 
 export const BRIDGE_PREFERRED_GAS_ESTIMATE = 'medium';
+export const BRIDGE_DEFAULT_SLIPPAGE = 0.5;

shared/constants/metametrics.ts

@@ -861,7 +861,6 @@ export enum MetaMetricsEventName {
   NotificationsActivated = 'Notifications Activated',
   PushNotificationReceived = 'Push Notification Received',
   PushNotificationClicked = 'Push Notification Clicked',
-
   // Send
   sendAssetSelected = 'Send Asset Selected',
   sendFlowExited = 'Send Flow Exited',
@@ -870,6 +869,19 @@ export enum MetaMetricsEventName {
   sendSwapQuoteRequested = 'Send Swap Quote Requested',
   sendSwapQuoteReceived = 'Send Swap Quote Received',
   sendTokenModalOpened = 'Send Token Modal Opened',
+  // Cross Chain Swaps
+  ActionCompleted = 'Action Completed',
+  ActionFailed = 'Action Failed',
+  ActionOpened = 'Action Opened',
+  ActionSubmitted = 'Action Submitted',
+  AllQuotesOpened = 'All Quotes Opened',
+  AllQuotesSorted = 'All Quotes Sorted',
+  InputChanged = 'Input Changed',
+  InputSourceDestinationFlipped = 'Source and Destination Flipped',
+  CrossChainSwapsQuoteError = 'Cross-chain Quote Error',
+  QuoteSelected = 'Quote Selected',
+  CrossChainSwapsQuotesReceived = 'Cross-chain Quotes Received',
+  CrossChainSwapsQuotesRequested = 'Cross-chain Quotes Requested',
 }
 
 export enum MetaMetricsEventAccountType {
@@ -931,6 +943,7 @@ export enum MetaMetricsEventCategory {
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   MMI = 'Institutional',
   ///: END:ONLY_INCLUDE_IF
+  CrossChainSwaps = 'Cross Chain Swaps',
 }
 
 export enum MetaMetricsEventLinkType {

test/e2e/tests/metrics/errors.spec.js

@@ -877,6 +877,8 @@ describe('Sentry errors', function () {
         quotesLastFetched: true,
         quotesLoadingStatus: true,
         quotesRefreshCount: true,
+        quoteFetchError: true,
+        quotesInitialLoadTime: true,
       },
       currentPopupId: false, // Initialized as undefined
       // Part of transaction controller store, but missing from the initial

test/jest/mock-store.js

@@ -722,7 +722,7 @@ export const createBridgeMockStore = (
     ...swapsStore,
     bridge: {
       toChainId: null,
-      sortOrder: 0,
+      sortOrder: 'cost_ascending',
       ...bridgeSliceOverrides,
     },
     metamask: {

ui/ducks/bridge/bridge.test.ts

@@ -150,7 +150,7 @@ describe('Ducks - Bridge', () => {
         fromToken: null,
         toToken: null,
         fromTokenInputValue: null,
-        sortOrder: 0,
+        sortOrder: 'cost_ascending',
         toTokenExchangeRate: null,
         fromTokenExchangeRate: null,
       });
@@ -213,7 +213,7 @@ describe('Ducks - Bridge', () => {
         fromTokenExchangeRate: null,
         fromTokenInputValue: null,
         selectedQuote: null,
-        sortOrder: 0,
+        sortOrder: 'cost_ascending',
         toChainId: null,
         toToken: null,
         toTokenExchangeRate: null,
@@ -260,7 +260,7 @@ describe('Ducks - Bridge', () => {
       expect(newState).toStrictEqual({
         toChainId: null,
         toTokenExchangeRate: 0.356628,
-        sortOrder: 0,
+        sortOrder: 'cost_ascending',
       });
     });
 
@@ -305,7 +305,7 @@ describe('Ducks - Bridge', () => {
       expect(newState).toStrictEqual({
         toChainId: null,
         toTokenExchangeRate: 0.999881,
-        sortOrder: 0,
+        sortOrder: 'cost_ascending',
       });
     });
   });

ui/ducks/bridge/bridge.ts

@@ -15,8 +15,8 @@ export type BridgeState = {
   fromToken: SwapsTokenObject | SwapsEthToken | null;
   toToken: SwapsTokenObject | SwapsEthToken | null;
   fromTokenInputValue: string | null;
-  fromTokenExchangeRate: number | null;
-  toTokenExchangeRate: number | null;
+  fromTokenExchangeRate: number | null; // Exchange rate from selected token to the default currency (can be fiat or crypto)
+  toTokenExchangeRate: number | null; // Exchange rate from the selected token to the default currency (can be fiat or crypto)
   sortOrder: SortOrder;
   selectedQuote: (QuoteResponse & QuoteMetadata) | null; // Alternate quote selected by user. When quotes refresh, the best match will be activated.
 };
@@ -70,6 +70,12 @@ const bridgeSlice = createSlice({
     },
   },
   extraReducers: (builder) => {
+    builder.addCase(setDestTokenExchangeRates.pending, (state) => {
+      state.toTokenExchangeRate = null;
+    });
+    builder.addCase(setSrcTokenExchangeRates.pending, (state) => {
+      state.fromTokenExchangeRate = null;
+    });
     builder.addCase(setDestTokenExchangeRates.fulfilled, (state, action) => {
       state.toTokenExchangeRate = action.payload ?? null;
     });