fix: set swap src chain based on selected asset cp-13.0.0 (#34385)

<!--
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**

The Asset overview pages and the useBridging hook use the current
selected network to set the native asset when navigating to the Swap
page. When the user navigates to the Swap page from portfolio view, the
src network is not set correctly if the selected asset is not in the
current selected network

Changes
- Remove `defaultSwapsToken` prop from asset/account overview components
and only retrieve the value from state as needed (`CoinButtons` and
`useBridging`)
- Deprecate `getSwapsDefaultToken` selector since it only supports EVM
networks
- `CoinButtons` uses the `getNativeAssetForChainId` util to get the
native asset when loading the Swap page
- `useBridging` defaults to the selected network's native asset if not
passed in as a parameter

<!--
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/34385?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: #34483

## **Manual testing steps**

1. Go to Swap page and note src network
2. Go back to home page
3. Click on native asset of other network
4. Click Swap
5. The asset from step 3 should be set as the src token

## **Screenshots/Recordings**

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

See recording in linked issue

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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

shared/constants/bridge.ts

@@ -35,9 +35,10 @@ export const ALLOWED_BRIDGE_CHAIN_IDS = [
   ///: END:ONLY_INCLUDE_IF
 ];
 
-const ALLOWED_BRIDGE_CHAIN_IDS_IN_CAIP = ALLOWED_EVM_BRIDGE_CHAIN_IDS.map(
-  toEvmCaipChainId,
-).concat(ALLOWED_MULTICHAIN_BRIDGE_CHAIN_IDS);
+export const ALLOWED_BRIDGE_CHAIN_IDS_IN_CAIP =
+  ALLOWED_EVM_BRIDGE_CHAIN_IDS.map(toEvmCaipChainId).concat(
+    ALLOWED_MULTICHAIN_BRIDGE_CHAIN_IDS,
+  );
 
 export type AllowedBridgeChainIds =
   | (typeof ALLOWED_BRIDGE_CHAIN_IDS)[number]

ui/components/app/wallet-overview/coin-buttons.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { toHex } from '@metamask/controller-utils';
 import { isCaipChainId, CaipChainId } from '@metamask/utils';
+import { getNativeAssetForChainId } from '@metamask/bridge-controller';
 
 ///: BEGIN:ONLY_INCLUDE_IF(multichain)
 import { isEvmAccountType } from '@metamask/keyring-api';
@@ -16,11 +17,11 @@ import {
   SEND_ROUTE,
 } from '../../../helpers/constants/routes';
 import {
-  SwapsEthToken,
   getCurrentKeyring,
   getUseExternalServices,
   getNetworkConfigurationIdByChainId,
   isNonEvmAccount,
+  getSwapsDefaultToken,
 } from '../../../selectors';
 import Tooltip from '../../ui/tooltip';
 import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
@@ -71,7 +72,6 @@ type CoinButtonsProps = {
   isSigningEnabled: boolean;
   isBridgeChain: boolean;
   isBuyableChain: boolean;
-  defaultSwapsToken?: SwapsEthToken;
   classPrefix?: string;
   iconButtonClassName?: string;
 };
@@ -84,7 +84,6 @@ const CoinButtons = ({
   isSigningEnabled,
   isBridgeChain,
   isBuyableChain,
-  defaultSwapsToken,
   classPrefix = 'coin',
 }: CoinButtonsProps) => {
   const t = useContext(I18nContext);
@@ -102,6 +101,15 @@ const CoinButtons = ({
   const currentChainId = useSelector(getCurrentChainId);
   const displayNewIconButtons = process.env.REMOVE_GNS;
 
+  const defaultSwapsToken = useSelector((state) =>
+    getSwapsDefaultToken(state, chainId.toString()),
+  );
+
+  // Pre-conditions
+  if (isSwapsChain && defaultSwapsToken === undefined) {
+    throw new Error('defaultSwapsToken is required');
+  }
+
   ///: BEGIN:ONLY_INCLUDE_IF(multichain)
   const handleSendNonEvm = useHandleSendNonEvm();
   ///: END:ONLY_INCLUDE_IF
@@ -286,17 +294,15 @@ const CoinButtons = ({
 
   const handleBridgeOnClick = useCallback(
     async (isSwap: boolean) => {
-      if (!defaultSwapsToken) {
-        return;
-      }
       await setCorrectChain();
+      // Handle clicking from the wallet overview page
       openBridgeExperience(
         MetaMetricsSwapsEventSource.MainView,
-        defaultSwapsToken,
+        getNativeAssetForChainId(chainId),
         isSwap,
       );
     },
-    [defaultSwapsToken, location, openBridgeExperience],
+    [location, openBridgeExperience],
   );
 
   const handleSwapOnClick = useCallback(async () => {

ui/components/app/wallet-overview/coin-overview.tsx

@@ -39,7 +39,6 @@ import {
   getDataCollectionForMarketing,
   getMetaMetricsId,
   getParticipateInMetaMetrics,
-  SwapsEthToken,
   getEnabledNetworksByNamespace,
   isGlobalNetworkSelectorRemoved,
 } from '../../../selectors';
@@ -72,8 +71,6 @@ export type CoinOverviewProps = {
   className?: string;
   classPrefix?: string;
   chainId: CaipChainId | Hex;
-  // FIXME: This seems to be for Ethereum only
-  defaultSwapsToken?: SwapsEthToken;
   isBridgeChain: boolean;
   isBuyableChain: boolean;
   isSwapsChain: boolean;
@@ -197,19 +194,13 @@ export const CoinOverview = ({
   className,
   classPrefix = 'coin',
   chainId,
-  defaultSwapsToken,
   isBridgeChain,
   isBuyableChain,
   isSwapsChain,
   isSigningEnabled,
 }: CoinOverviewProps) => {
   const enabledNetworks = useSelector(getEnabledNetworksByNamespace);
 
-  // Pre-conditions
-  if (isSwapsChain && defaultSwapsToken === undefined) {
-    throw new Error('defaultSwapsToken is required');
-  }
-
   const t: ReturnType<typeof useI18nContext> = useContext(I18nContext);
 
   const trackEvent = useContext(MetaMetricsContext);
@@ -355,7 +346,6 @@ export const CoinOverview = ({
             isSigningEnabled,
             isBridgeChain,
             isBuyableChain,
-            defaultSwapsToken,
             classPrefix,
           }}
         />

ui/components/app/wallet-overview/eth-overview.js

@@ -9,7 +9,6 @@ import {
   getIsSwapsChain,
   getSelectedInternalAccount,
   getSelectedAccountCachedBalance,
-  getSwapsDefaultToken,
   getIsBridgeChain,
 } from '../../../selectors';
 import { getIsNativeTokenBuyable } from '../../../ducks/ramps';
@@ -18,8 +17,6 @@ import { CoinOverview } from './coin-overview';
 const EthOverview = ({ className }) => {
   const isBridgeChain = useSelector(getIsBridgeChain);
   const isBuyableChain = useSelector(getIsNativeTokenBuyable);
-  // FIXME: This causes re-renders, so use isEqual to avoid this
-  const defaultSwapsToken = useSelector(getSwapsDefaultToken, isEqual);
   const balanceIsCached = useSelector(isBalanceCached);
   const chainId = useSelector(getCurrentChainId);
   const balance = useSelector(getSelectedAccountCachedBalance);
@@ -43,7 +40,6 @@ const EthOverview = ({ className }) => {
       isSwapsChain={isSwapsChain}
       isBridgeChain={isBridgeChain}
       isBuyableChain={isBuyableChain}
-      defaultSwapsToken={defaultSwapsToken}
     />
   );
 };

ui/components/app/wallet-overview/non-evm-overview.tsx

@@ -10,7 +10,6 @@ import {
   getIsBridgeChain,
   ///: END:ONLY_INCLUDE_IF
   getSelectedInternalAccount,
-  getSwapsDefaultToken,
 } from '../../../selectors';
 import { CoinOverview } from './coin-overview';
 
@@ -23,7 +22,6 @@ const NonEvmOverview = ({ className }: NonEvmOverviewProps) => {
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
   const account = useSelector(getSelectedInternalAccount);
   const isNativeTokenBuyable = useSelector(getIsNativeTokenBuyable);
-  const defaultSwapsToken = useSelector(getSwapsDefaultToken);
 
   let isSwapsChain = false;
   let isBridgeChain = false;
@@ -42,7 +40,6 @@ const NonEvmOverview = ({ className }: NonEvmOverviewProps) => {
       chainId={chainId}
       isSigningEnabled={true}
       isSwapsChain={isSwapsChain}
-      defaultSwapsToken={defaultSwapsToken}
       isBridgeChain={isBridgeChain}
       isBuyableChain={isNativeTokenBuyable}
     />

ui/components/multichain/account-overview/account-overview-layout.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { isEqual } from 'lodash';
 import { useHistory } from 'react-router-dom';
 
 import {
@@ -15,7 +14,6 @@ import { Carousel } from '..';
 import {
   getAppIsLoading,
   getSelectedAccount,
-  getSwapsDefaultToken,
   ///: BEGIN:ONLY_INCLUDE_IF(solana)
   hasCreatedSolanaAccount,
   ///: END:ONLY_INCLUDE_IF
@@ -74,8 +72,6 @@ export const AccountOverviewLayout = ({
   const selectedSolanaAccount = useSelector(getLastSelectedSolanaAccount);
   ///: END:ONLY_INCLUDE_IF
 
-  const defaultSwapsToken = useSelector(getSwapsDefaultToken, isEqual);
-
   const [showDownloadMobileAppModal, setShowDownloadMobileAppModal] =
     useState(false);
 
@@ -85,7 +81,8 @@ export const AccountOverviewLayout = ({
 
   const handleCarouselClick = (id: string) => {
     if (id === 'bridge') {
-      openBridgeExperience('Carousel', defaultSwapsToken);
+      // Handle clicking from the wallet overview page carousel
+      openBridgeExperience('Carousel');
     }
 
     if (id === BASIC_FUNCTIONALITY_SLIDE.id) {

ui/hooks/bridge/useBridging.ts

@@ -5,6 +5,7 @@ import {
   type BridgeAsset,
   formatChainIdToCaip,
   type GenericQuoteRequest,
+  getNativeAssetForChainId,
   UnifiedSwapBridgeEventName,
 } from '@metamask/bridge-controller';
 import { trackUnifiedSwapBridgeEvent } from '../../ducks/bridge/actions';
@@ -26,9 +27,10 @@ import {
   PREPARE_SWAP_ROUTE,
 } from '../../helpers/constants/routes';
 import { BridgeQueryParams } from '../../../shared/lib/deep-links/routes/swap';
-import { getProviderConfig } from '../../../shared/modules/selectors/networks';
 import { trace, TraceName } from '../../../shared/lib/trace';
 import { toAssetId } from '../../../shared/lib/asset-utils';
+import { ALLOWED_BRIDGE_CHAIN_IDS_IN_CAIP } from '../../../shared/constants/bridge';
+import { getMultichainProviderConfig } from '../../selectors/multichain';
 import { useCrossChainSwapsEventTracker } from './useCrossChainSwapsEventTracker';
 
 const useBridging = () => {
@@ -40,19 +42,30 @@ const useBridging = () => {
   const metaMetricsId = useSelector(getMetaMetricsId);
   const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
   const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
-  const providerConfig = useSelector(getProviderConfig);
 
-  const isBridgeChain = useSelector(getIsBridgeChain);
+  const providerConfig = useSelector(getMultichainProviderConfig);
 
+  const isBridgeChain = useSelector((state) =>
+    getIsBridgeChain(state, providerConfig?.chainId),
+  );
   const openBridgeExperience = useCallback(
     (
       location: string,
-      token: Pick<BridgeAsset, 'symbol' | 'address'> & {
+      srcToken?: Pick<BridgeAsset, 'symbol' | 'address'> & {
         chainId: GenericQuoteRequest['srcChainId'];
       },
       isSwap = false,
     ) => {
-      if (!isBridgeChain || !providerConfig) {
+      const token =
+        srcToken ?? getNativeAssetForChainId(providerConfig.chainId);
+      const isBridgeToken =
+        token?.chainId &&
+        ALLOWED_BRIDGE_CHAIN_IDS_IN_CAIP.includes(
+          formatChainIdToCaip(token.chainId),
+        );
+      const isChainOrTokenSupported = isBridgeChain || isBridgeToken;
+
+      if (!isChainOrTokenSupported || !providerConfig) {
         return;
       }
 

ui/pages/asset/components/asset-page.tsx

@@ -55,7 +55,6 @@ import {
   getSelectedAccountNativeTokenCachedBalanceByChainId,
   getSelectedInternalAccount,
   getShowFiatInTestnets,
-  getSwapsDefaultToken,
 } from '../../../selectors';
 import {
   getImageForChainId,
@@ -101,11 +100,6 @@ const AssetPage = ({
 
   const isNative = type === AssetType.native;
 
-  // These need to be specific to the asset and not the current chain
-  const defaultSwapsToken = useSelector(
-    (state) => getSwapsDefaultToken(state, chainId),
-    isEqual,
-  );
   const isSwapsChain = useSelector((state) => getIsSwapsChain(state, chainId));
   const isBridgeChain = useSelector((state) =>
     getIsBridgeChain(state, chainId),
@@ -315,7 +309,6 @@ const AssetPage = ({
               isSwapsChain,
               isBridgeChain,
               chainId,
-              defaultSwapsToken,
             }}
           />
         ) : (

ui/pages/asset/components/token-buttons.tsx

@@ -216,11 +216,10 @@ const TokenButtons = ({
   const handleBridgeOnClick = useCallback(
     async (isSwap: boolean) => {
       await setCorrectChain();
+      // Handle clicking from the asset details page
       openBridgeExperience(
         MetaMetricsSwapsEventSource.TokenView,
-        {
-          ...token,
-        },
+        token,
         isSwap,
       );
     },

ui/selectors/selectors.js

@@ -1832,6 +1832,7 @@ export function getWeb3ShimUsageStateForOrigin(state, origin) {
  * `balance` and `string` values of the same type as in regular ERC-20 token
  * objects, per the above description.
  *
+ * @deprecated Use getNativeAssetForChainId instead because this only supports EVM chains
  * @param {object} state - the redux state object
  * @param {string} overrideChainId - the chainId to override the current chainId
  * @returns {SwapsEthToken} The token object representation of the currently