fix: use NetworkConfiguration instead of ProviderConfig/RPCEndpoint

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { useSelector } from 'react-redux';
+import { NetworkConfiguration } from '@metamask/network-controller';
 import {
   Display,
   FlexDirection,
@@ -13,15 +14,12 @@ import {
   Modal,
   Box,
 } from '../../../component-library';
-import {
-  CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
-  RPCDefinition,
-} from '../../../../../shared/constants/network';
+import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../shared/constants/network';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 ///: END:ONLY_INCLUDE_IF
 import { NetworkListItem } from '../../network-list-item';
-import { getNetworkConfigurations } from '../../../../selectors';
+import { getNetworkConfigurationsByChainId } from '../../../../selectors';
 import { getProviderConfig } from '../../../../ducks/metamask/metamask';
 
 /**
@@ -45,9 +43,9 @@ export const AssetPickerModalNetwork = ({
   onNetworkChange,
 }: {
   isOpen: boolean;
-  network?: RPCDefinition;
-  networks?: RPCDefinition[];
-  onNetworkChange: (network: RPCDefinition) => void;
+  network?: NetworkConfiguration;
+  networks?: NetworkConfiguration[];
+  onNetworkChange: (network: NetworkConfiguration) => void;
   onClose: () => void;
   onBack: () => void;
 }) => {
@@ -56,10 +54,13 @@ export const AssetPickerModalNetwork = ({
   ///: END:ONLY_INCLUDE_IF
 
   const currentNetwork = useSelector(getProviderConfig);
-  const allNetworks: RPCDefinition[] = useSelector(getNetworkConfigurations);
+  const allNetworks = useSelector(getNetworkConfigurationsByChainId);
+
+  const selectedNetwork =
+    network ?? (currentNetwork?.chainId && allNetworks[currentNetwork.chainId]);
 
-  const selectedNetwork: RPCDefinition = network ?? currentNetwork;
-  const networksList = networks ?? allNetworks ?? [];
+  const networksList: NetworkConfiguration[] =
+    networks ?? Object.values(allNetworks) ?? [];
 
   return (
     <Modal
@@ -83,18 +84,17 @@ export const AssetPickerModalNetwork = ({
             height={BlockSize.Full}
           >
             {networksList.map((networkConfig) => {
-              const { nickname } = networkConfig;
+              const { name } = networkConfig;
               return (
                 <NetworkListItem
                   key={networkConfig.chainId}
-                  name={nickname ?? networkConfig.chainId}
+                  name={name ?? networkConfig.chainId}
                   selected={selectedNetwork?.chainId === networkConfig.chainId}
                   onClick={() => {
                     onNetworkChange(networkConfig);
                     onBack();
                   }}
                   iconSrc={
-                    networkConfig?.rpcPrefs?.imageUrl ??
                     CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
                       networkConfig.chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
                     ]

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx

@@ -4,6 +4,7 @@ import configureStore from 'redux-mock-store';
 import { useSelector } from 'react-redux';
 import thunk from 'redux-thunk';
 import sinon from 'sinon';
+import { RpcEndpointType } from '@metamask/network-controller';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useNftsCollections } from '../../../../hooks/useNftsCollections';
 import { useTokenTracker } from '../../../../hooks/useTokenTracker';
@@ -302,14 +303,19 @@ describe('AssetPickerModal', () => {
         {...defaultProps}
         header="selectNetworkHeader"
         network={{
-          ticker: 'ETH',
+          nativeCurrency: 'ETH',
           chainId: '0x1',
-          rpcUrl: 'https://rpcurl',
-          rpcPrefs: {
-            blockExplorerUrl: 'https://explorerurl',
-            imageUrl: 'https://image.com',
-          },
-          nickname: 'Network name',
+          defaultBlockExplorerUrlIndex: 0,
+          blockExplorerUrls: ['https://explorerurl'],
+          defaultRpcEndpointIndex: 0,
+          rpcEndpoints: [
+            {
+              networkClientId: 'test1',
+              url: 'https://rpcurl',
+              type: RpcEndpointType.Custom,
+            },
+          ],
+          name: 'Network name',
         }}
       />,
       store,
@@ -330,14 +336,19 @@ describe('AssetPickerModal', () => {
         onNetworkPickerClick={undefined}
         header="selectNetworkHeader"
         network={{
-          ticker: 'ETH',
+          nativeCurrency: 'ETH',
           chainId: '0x1',
-          rpcUrl: 'https://rpcurl',
-          rpcPrefs: {
-            blockExplorerUrl: 'https://explorerurl',
-            imageUrl: 'https://image.com',
-          },
-          nickname: 'Network name',
+          defaultBlockExplorerUrlIndex: 0,
+          blockExplorerUrls: ['https://explorerurl'],
+          defaultRpcEndpointIndex: 0,
+          rpcEndpoints: [
+            {
+              networkClientId: 'test1',
+              url: 'https://rpcurl',
+              type: RpcEndpointType.Custom,
+            },
+          ],
+          name: 'Network name',
         }}
       />,
       store,

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx

@@ -50,6 +50,7 @@ import { getTopAssets } from '../../../../ducks/swaps/swaps';
 import { getRenderableTokenData } from '../../../../hooks/useTokensToSearch';
 import { getSwapsBlockedTokens } from '../../../../ducks/send';
 import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
+import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../shared/constants/network';
 import {
   ERC20Asset,
   NativeAsset,
@@ -329,8 +330,13 @@ export function AssetPickerModal({
         {onNetworkPickerClick && (
           <Box className="network-picker">
             <PickerNetwork
-              label={network?.nickname ?? 'Select network'}
-              src={network?.rpcPrefs?.imageUrl}
+              label={network?.name ?? 'Select network'}
+              src={
+                network?.chainId &&
+                CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+                  network.chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+                ]
+              }
               onClick={onNetworkPickerClick}
               data-testid="multichain-asset-picker__network"
             />

ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap

@@ -135,13 +135,13 @@ exports[`AssetPicker render if disabled 1`] = `
 exports[`AssetPicker should render network picker when networks prop is defined 1`] = `
 <DocumentFragment>
   <button
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--disabled asset-picker mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--disabled asset-picker mm-text--body-md-medium mm-box--padding-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-pill"
     data-testid="asset-picker-button"
     disabled=""
     title="[swapTokenNotAvailable]"
   >
     <span
-      class="mm-box mm-text mm-text--inherit mm-box--color-primary-inverse"
+      class="mm-box mm-text mm-text--inherit mm-box--color-text-default"
     >
       <div
         class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
@@ -176,7 +176,9 @@ exports[`AssetPicker should render network picker when networks prop is defined
             </div>
           </div>
         </div>
-        <div>
+        <div
+          class="mm-box"
+        >
           <div
             aria-describedby="tippy-tooltip-4"
             class=""

ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.stories.tsx

@@ -6,8 +6,13 @@ import { AssetType } from '../../../../../shared/constants/transaction';
 import { AssetPicker } from './asset-picker';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { TabName } from '../asset-picker-modal/asset-picker-modal-tabs';
-import { CHAIN_ID_TOKEN_IMAGE_MAP } from '../../../../../shared/constants/network';
+import {
+  CHAIN_ID_TOKEN_IMAGE_MAP,
+  CHAIN_IDS,
+} from '../../../../../shared/constants/network';
 import { ERC20Asset } from '../asset-picker-modal/types';
+import { mockNetworkState } from '../../../../../test/stub/networks';
+import { RpcEndpointType } from '@metamask/network-controller';
 
 const storybook = {
   title: 'Components/Multichain/AssetPicker',
@@ -73,12 +78,11 @@ function store() {
   const defaultMockState = { ...mockState };
   defaultMockState.metamask = {
     ...defaultMockState.metamask,
-    providerConfig: {
-      ...defaultMockState.metamask.providerConfig,
-      chainId: '0x1',
-      ticker: 'ETH',
-      nickname: 'Ethereum Mainnet',
-    },
+    ...(mockNetworkState(
+      { chainId: CHAIN_IDS.MAINNET },
+      { chainId: CHAIN_IDS.LINEA_MAINNET },
+      { chainId: CHAIN_IDS.GOERLI },
+    ) as any),
   };
   return configureStore(defaultMockState);
 }
@@ -104,25 +108,46 @@ export const NetworksStory = ({ isOpen }: { isOpen: boolean }) => {
       networkProps={{
         network: {
           chainId: '0x1',
-          nickname: 'Mainnet',
-          rpcUrl: 'https://mainnet.infura.io/v3/',
-          type: 'rpc',
-          ticker: 'ETH',
+          name: 'Mainnet',
+          blockExplorerUrls: [],
+          defaultRpcEndpointIndex: 0,
+          rpcEndpoints: [
+            {
+              networkClientId: 'test1',
+              url: 'https://mainnet.infura.io/v3/',
+              type: RpcEndpointType.Custom,
+            },
+          ],
+          nativeCurrency: 'ETH',
         },
         networks: [
           {
             chainId: '0x1',
-            nickname: 'Mainnet',
-            rpcUrl: 'https://mainnet.infura.io/v3/',
-            type: 'rpc',
-            ticker: 'ETH',
+            name: 'Mainnet',
+            blockExplorerUrls: [],
+            defaultRpcEndpointIndex: 0,
+            rpcEndpoints: [
+              {
+                networkClientId: 'test1',
+                url: 'https://mainnet.infura.io/v3/',
+                type: RpcEndpointType.Custom,
+              },
+            ],
+            nativeCurrency: 'ETH',
           },
           {
             chainId: '0x10',
-            nickname: 'Optimism',
-            rpcUrl: 'https://optimism.infura.io/v3/',
-            type: 'rpc',
-            ticker: 'ETH',
+            name: 'Optimism',
+            blockExplorerUrls: [],
+            defaultRpcEndpointIndex: 0,
+            rpcEndpoints: [
+              {
+                networkClientId: 'test2',
+                url: 'https://optimism.infura.io/v3/',
+                type: RpcEndpointType.Custom,
+              },
+            ],
+            nativeCurrency: 'ETH',
           },
         ],
         onNetworkChange: () => ({}),

ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { Hex } from '@metamask/utils';
+import { RpcEndpointType } from '@metamask/network-controller';
 import { AssetType } from '../../../../../shared/constants/transaction';
 import mockSendState from '../../../../../test/data/mock-send-state.json';
 import configureStore from '../../../../store/store';
@@ -316,34 +317,49 @@ describe('AssetPicker', () => {
           networkProps={{
             network: {
               chainId: '0x1',
-              ticker: 'ETH',
-              rpcUrl: 'https://rpcurl',
-              rpcPrefs: {
-                blockExplorerUrl: 'https://explorerurl',
-                imageUrl: './images/eth_logo.svg',
-              },
-              nickname: 'network',
+              nativeCurrency: 'ETH',
+              defaultBlockExplorerUrlIndex: 0,
+              blockExplorerUrls: ['https://explorerurl'],
+              defaultRpcEndpointIndex: 0,
+              rpcEndpoints: [
+                {
+                  networkClientId: 'test1',
+                  url: 'https://rpcurl',
+                  type: RpcEndpointType.Custom,
+                },
+              ],
+              name: 'network',
             },
             networks: [
               {
                 chainId: '0x1',
-                ticker: 'ETH',
-                rpcUrl: 'https://rpcurl',
-                rpcPrefs: {
-                  blockExplorerUrl: 'https://explorerurl',
-                  imageUrl: 'https://image.com',
-                },
-                nickname: 'Network name 3',
+                nativeCurrency: 'ETH',
+                defaultBlockExplorerUrlIndex: 0,
+                blockExplorerUrls: ['https://explorerurl'],
+                defaultRpcEndpointIndex: 0,
+                rpcEndpoints: [
+                  {
+                    networkClientId: 'test1',
+                    url: 'https://rpcurl',
+                    type: RpcEndpointType.Custom,
+                  },
+                ],
+                name: 'Network name 3',
               },
               {
                 chainId: '0xa',
-                ticker: 'ETH',
-                rpcUrl: 'https://rpcurl',
-                rpcPrefs: {
-                  blockExplorerUrl: 'https://explorerurl',
-                  imageUrl: 'https://image.com',
-                },
-                nickname: 'Network name 4',
+                nativeCurrency: 'ETH',
+                defaultBlockExplorerUrlIndex: 0,
+                blockExplorerUrls: ['https://explorerurl'],
+                defaultRpcEndpointIndex: 0,
+                rpcEndpoints: [
+                  {
+                    networkClientId: 'test2',
+                    url: 'https://rpcurl',
+                    type: RpcEndpointType.Custom,
+                  },
+                ],
+                name: 'Network name 4',
               },
             ],
             onNetworkChange: jest.fn(),