chore: Bump @metamask/swaps-controller to 12.0.0

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -11,6 +11,7 @@ import AppConstants from '../../../core/AppConstants';
 import Engine from '../../../core/Engine';
 import {
   selectChainId,
+  selectNetworkClientId,
   selectTicker,
   selectNativeCurrencyByChainId,
 } from '../../../selectors/networkController';
@@ -58,7 +59,7 @@ import Routes from '../../../constants/navigation/Routes';
 import TokenDetails from './TokenDetails';
 import { RootState } from '../../../reducers';
 import useGoToBridge from '../Bridge/utils/useGoToBridge';
-import SwapsController, { swapsUtils } from '@metamask/swaps-controller';
+import { swapsUtils } from '@metamask/swaps-controller';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import {
   getDecimalChainId,
@@ -114,6 +115,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
     ? (asset.chainId as Hex)
     : selectedChainId;
   const ticker = isPortfolioViewEnabled() ? nativeCurrency : selectedTicker;
+  const selectedNetworkClientId = useSelector(selectNetworkClientId);
 
   let currentAddress: Hex;
 
@@ -136,12 +138,12 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    const { SwapsController: SwapsControllerFromEngine } = Engine.context as {
-      SwapsController: SwapsController;
-    };
+    const { SwapsController } = Engine.context;
     const fetchTokenWithCache = async () => {
       try {
-        await SwapsControllerFromEngine.fetchTokenWithCache();
+        await SwapsController.fetchTokenWithCache({
+          networkClientId: selectedNetworkClientId,
+        });
         // TODO: Replace "any" with type
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
@@ -152,7 +154,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
       }
     };
     fetchTokenWithCache();
-  }, []);
+  }, [selectedNetworkClientId]);
 
   const onReceive = () => {
     navigation.navigate(Routes.QR_TAB_SWITCHER, {

app/components/UI/Swaps/QuotesView.js

@@ -8,7 +8,7 @@ import {
   TouchableOpacity,
   Linking,
 } from 'react-native';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import IonicIcon from 'react-native-vector-icons/Ionicons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import BigNumber from 'bignumber.js';
@@ -96,7 +96,7 @@ import {
 import {
   selectChainId,
   selectIsEIP1559Network,
-  selectNetworkClientId,
+  selectSelectedNetworkClientId,
   selectTicker,
 } from '../../../selectors/networkController';
 import {
@@ -304,6 +304,7 @@ async function resetAndStartPolling({
   destinationToken,
   sourceAmount,
   walletAddress,
+  networkClientId,
 }) {
   if (!sourceToken || !destinationToken) {
     return;
@@ -316,6 +317,7 @@ async function resetAndStartPolling({
     destinationToken,
     sourceAmount,
     walletAddress,
+    networkClientId,
   });
   await SwapsController.stopPollingAndResetState();
   await SwapsController.startFetchAndSetQuotes(
@@ -762,6 +764,8 @@ function SwapsQuotesView({
     }
   }, [error, navigation]);
 
+  const selectedNetworkClientId = useSelector(selectSelectedNetworkClientId);
+
   const handleRetryFetchQuotes = useCallback(() => {
     if (error?.key === swapsUtils.SwapsError.QUOTES_EXPIRED_ERROR) {
       navigation.setParams({ leftAction: strings('navigation.back') });
@@ -776,6 +780,7 @@ function SwapsQuotesView({
         destinationToken,
         sourceAmount,
         walletAddress: selectedAddress,
+        networkClientId: selectedNetworkClientId,
       });
     } else {
       navigation.pop();
@@ -788,6 +793,7 @@ function SwapsQuotesView({
     sourceAmount,
     selectedAddress,
     navigation,
+    selectedNetworkClientId,
   ]);
 
   const updateSwapsTransactions = useCallback(
@@ -1396,6 +1402,7 @@ function SwapsQuotesView({
       destinationToken,
       sourceAmount,
       walletAddress: selectedAddress,
+      networkClientId: selectedNetworkClientId,
     });
 
     return () => {
@@ -1409,6 +1416,7 @@ function SwapsQuotesView({
     slippage,
     sourceAmount,
     sourceToken.address,
+    selectedNetworkClientId,
   ]);
 
   /** selectedQuote alert effect */
@@ -2384,7 +2392,7 @@ SwapsQuotesView.propTypes = {
 const mapStateToProps = (state) => ({
   accounts: selectAccounts(state),
   chainId: selectChainId(state),
-  networkClientId: selectNetworkClientId(state),
+  networkClientId: selectSelectedNetworkClientId(state),
   ticker: selectTicker(state),
   balances: selectContractBalances(state),
   selectedAddress: selectSelectedInternalAccountFormattedAddress(state),

app/components/UI/Swaps/QuotesView.test.ts

@@ -17,6 +17,7 @@ import {
 } from '../../../util/test/accountsControllerTestUtils';
 import { SwapsViewSelectors } from '../../../../e2e/selectors/swaps/SwapsView.selectors';
 import Engine from '../../../core/Engine';
+import { RpcEndpointType } from '@metamask/network-controller';
 
 jest.mock('../../../core/Engine', () => ({
   context: {
@@ -203,7 +204,14 @@ const mockInitialState: DeepPartial<RootState> = {
             defaultRpcEndpointIndex: 0,
             name: 'Ethereum Mainnet',
             nativeCurrency: 'ETH',
-            rpcEndpoints: [],
+            rpcEndpoints: [
+              {
+                name: 'Ethereum Mainnet',
+                networkClientId: 'mainnet',
+                type: RpcEndpointType.Infura,
+                url: 'https://mainnet.infura.io/v3/{infuraProjectId}',
+              },
+            ],
           },
         },
       },

app/components/UI/Swaps/__snapshots__/QuotesView.test.ts.snap

@@ -194,9 +194,7 @@ exports[`QuotesView should render quote screen 1`] = `
                           "width": 5,
                         },
                         {
-                          "backgroundColor": "transparent",
-                          "borderColor": "#bbc0c5",
-                          "borderWidth": 1,
+                          "backgroundColor": "#3cc29e",
                         },
                       ]
                     }
@@ -215,7 +213,7 @@ exports[`QuotesView should render quote screen 1`] = `
                       }
                     }
                   >
-                    Private Network
+                    Ethereum Main Network
                   </Text>
                 </View>
               </TouchableOpacity>