diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx index 0297a39e3667..5d325aad1918 100644 --- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx +++ b/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 ( {networksList.map((networkConfig) => { - const { nickname } = networkConfig; + const { name } = networkConfig; return ( { 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 ] diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx index 4a2a82d00906..4d8a81f8ad3e 100644 --- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx +++ b/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, diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx index c29f73081e73..d7c88efa2bf6 100644 --- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx +++ b/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 && ( diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap index 75e2b5505601..42c7b204d708 100644 --- a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap +++ b/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`] = `