fix: use Hex or CaipChainId type for chains

Author: micaelae

ui/pages/bridge/prepare/prepare-bridge-page.tsx

@@ -10,14 +10,15 @@ import {
   isNonEvmChainId,
   isValidQuoteRequest,
   BRIDGE_QUOTE_MAX_RETURN_DIFFERENCE_PERCENTAGE,
-  getNativeAssetForChainId,
   isNativeAddress,
   UnifiedSwapBridgeEventName,
   type BridgeController,
   isCrossChain,
+  formatChainIdToHex,
   isBitcoinChainId,
+  getNativeAssetForChainId,
 } from '@metamask/bridge-controller';
-import type { Hex } from '@metamask/utils';
+import { type CaipChainId, type Hex, parseCaipChainId } from '@metamask/utils';
 import {
   setFromToken,
   setFromTokenInputValue,
@@ -81,7 +82,6 @@ import {
   isQuoteExpiredOrInvalid as isQuoteExpiredOrInvalidUtil,
   safeAmountForCalc,
 } from '../utils/quote';
-import { isNetworkAdded } from '../../../ducks/bridge/utils';
 import MascotBackgroundAnimation from '../../swaps/mascot-background-animation/mascot-background-animation';
 import { Column } from '../layout';
 import useRamps from '../../../hooks/ramps/useRamps/useRamps';
@@ -115,6 +115,7 @@ import { useEnableMissingNetwork } from '../hooks/useEnableMissingNetwork';
 import { BridgeInputGroup } from './bridge-input-group';
 import { PrepareBridgePageFooter } from './prepare-bridge-page-footer';
 import { DestinationAccountPickerModal } from './components/destination-account-picker-modal';
+import { NetworkConfiguration } from '@metamask/network-controller';
 
 const PrepareBridgePage = ({
   onOpenSettings,
@@ -466,12 +467,12 @@ const PrepareBridgePage = ({
     return t('swapSelectToken');
   };
 
-  const getTokenOccurrences = (chainId: Hex | undefined): number => {
+  const getTokenOccurrences = (chainId: Hex | CaipChainId | undefined): number => {
     if (!chainId) {
       return MINIMUM_TOKEN_OCCURRENCES;
     }
     return (
-      TOKEN_OCCURRENCES_MAP[chainId as ChainId] ?? MINIMUM_TOKEN_OCCURRENCES
+      TOKEN_OCCURRENCES_MAP[chainId as keyof typeof TOKEN_OCCURRENCES_MAP] ?? MINIMUM_TOKEN_OCCURRENCES
     );
   };
 
@@ -500,11 +501,10 @@ const PrepareBridgePage = ({
               address: token.address ?? zeroAddress(),
             };
             dispatch(setFromToken(bridgeToken));
-            dispatch(setFromTokenInputValue(null));
           }}
           networkProps={{
-            network: fromChain,
-            networks: fromChains,
+            network: fromChain as NetworkConfiguration,
+            networks: fromChains as NetworkConfiguration[],
             onNetworkChange: (networkConfig) => {
               enableMissingNetwork(networkConfig.chainId);
               dispatch(
@@ -590,7 +590,14 @@ const PrepareBridgePage = ({
               disabled={
                 isSwitchingTemporarilyDisabled ||
                 !isValidQuoteRequest(quoteRequest, false) ||
-                (toChain && !isNetworkAdded(toChain))
+                // Check if the toChain is an enabled fromChain
+                (toChain &&
+                  !fromChains.some(
+                    ({ chainId: fromChainId }) =>
+                      fromChainId === toChain.chainId ||
+                      formatChainIdToCaip(fromChainId) ===
+                        formatChainIdToCaip(toChain.chainId),
+                  ))
               }
               onClick={() => {
                 dispatch(setSelectedQuote(null));
@@ -604,10 +611,10 @@ const PrepareBridgePage = ({
                       {
                         // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
                         // eslint-disable-next-line @typescript-eslint/naming-convention
-                        token_symbol_source: toToken?.symbol ?? null,
+                        token_symbol_source: toToken.symbol,
                         // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
                         // eslint-disable-next-line @typescript-eslint/naming-convention
-                        token_symbol_destination: fromToken?.symbol ?? null,
+                        token_symbol_destination: fromToken.symbol,
                         // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
                         // eslint-disable-next-line @typescript-eslint/naming-convention
                         token_address_source: toToken?.assetId,
@@ -656,12 +663,10 @@ const PrepareBridgePage = ({
               dispatch(setToToken(bridgeToken));
             }}
             networkProps={{
-              network: toChain,
-              networks: toChains,
+              network: toChain as NetworkConfiguration,
+              networks: toChains as NetworkConfiguration[],
               onNetworkChange: (networkConfig) => {
-                if (isNetworkAdded(networkConfig)) {
-                  enableMissingNetwork(networkConfig.chainId);
-                }
+                enableMissingNetwork(networkConfig.chainId);
                 dispatch(setToChainId(networkConfig.chainId));
               },
               header: t('yourNetworks'),

ui/pages/bridge/utils/quote.ts

@@ -13,7 +13,7 @@ import type {
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
 import { DEFAULT_PRECISION } from '../../../hooks/useCurrencyDisplay';
 import { formatAmount } from '../../confirmations/components/simulation-details/formatAmount';
-import type { BridgeToken } from '../../../ducks/bridge/types';
+import type { BridgeNetwork, BridgeToken } from '../../../ducks/bridge/types';
 
 export const formatTokenAmount = (
   locale: string,
@@ -151,8 +151,8 @@ export const isQuoteExpiredOrInvalid = ({
 }: {
   activeQuote: QuoteResponse | null;
   toToken: BridgeToken | null;
-  toChain?: NetworkConfiguration | AddNetworkFields;
-  fromChain?: NetworkConfiguration;
+  toChain?: BridgeNetwork;
+  fromChain?: BridgeNetwork;
   isQuoteExpired: boolean;
   insufficientBal?: boolean;
 }): boolean => {