diff --git a/ui/components/app/assets/nfts/nft-details/nft-details.tsx b/ui/components/app/assets/nfts/nft-details/nft-details.tsx index 0ca9a83c6ec5..0064dc38976c 100644 --- a/ui/components/app/assets/nfts/nft-details/nft-details.tsx +++ b/ui/components/app/assets/nfts/nft-details/nft-details.tsx @@ -345,7 +345,7 @@ export default function NftDetails({ nft }: { nft: Nft }) { alt={image ? nftImageAlt : ''} name={name} tokenId={tokenId} - networkName={currentChain.nickname} + networkName={currentChain.nickname ?? ''} networkSrc={currentChain.rpcPrefs?.imageUrl} isIpfsURL={isIpfsURL} onClick={handleImageClick} diff --git a/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx b/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx index 68562bc6d857..3d09cba1ddc4 100644 --- a/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx +++ b/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx @@ -82,7 +82,7 @@ export default function NftFullImage() { alt={image ? nftImageAlt : ''} name={name} tokenId={tokenId} - networkName={currentChain.nickname} + networkName={currentChain.nickname ?? ''} networkSrc={currentChain.rpcPrefs?.imageUrl} isIpfsURL={isIpfsURL} badgeWrapperClassname="badge-wrapper" diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx index 56aa58ed4f74..ea382450fbd1 100644 --- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx +++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx @@ -184,7 +184,7 @@ export function AssetPicker({ badge={ { return ( dispatch(toggleNetworkMenu())} data-testid="send-page-network-picker" diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap index 8fd320c388cc..b8a02a46e7e5 100644 --- a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap +++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap @@ -17,12 +17,14 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
- ? + T
+ > + Test initial state + - ? + T + > + Test initial state + - ? + T + > + Test initial state + []} allNetworks - All network configurations. + * @param {Record} providerConfig - The configuration for the current network's provider. + * @returns {{ + * chainId: `0x${string}`; + * id?: string; + * nickname?: string; + * providerType?: string; + * rpcPrefs?: { blockExplorerUrl?: string; imageUrl?: string; }; + * rpcUrl: string; + * ticker: string; + * }} networkConfiguration - Configuration for the current network. + */ (allNetworks, providerConfig) => { const filter = providerConfig.type === 'rpc' ? (network) => network.id === providerConfig.id : (network) => network.id === providerConfig.type; - return allNetworks.find(filter); + return ( + allNetworks.find(filter) ?? { + chainId: providerConfig.chainId, + nickname: providerConfig.nickname, + rpcPrefs: providerConfig.rpcPrefs, + rpcUrl: providerConfig.rpcUrl, + ticker: providerConfig.ticker, + } + ); }, ); diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js index a8546bc5fdec..f27d60af9756 100644 --- a/ui/selectors/selectors.test.js +++ b/ui/selectors/selectors.test.js @@ -782,6 +782,102 @@ describe('Selectors', () => { }); describe('#getCurrentNetwork', () => { + it('returns built-in network configuration', () => { + const modifiedMockState = { + ...mockState, + metamask: { + ...mockState.metamask, + providerConfig: { + ...mockState.metamask.providerConfig, + chainId: '0x1', + type: 'sepolia', + }, + }, + }; + const currentNetwork = selectors.getCurrentNetwork(modifiedMockState); + + expect(currentNetwork).toMatchInlineSnapshot(` + { + "chainId": "0xaa36a7", + "id": "sepolia", + "nickname": "Sepolia", + "providerType": "sepolia", + "removable": false, + "rpcUrl": "https://sepolia.infura.io/v3/undefined", + "ticker": "SepoliaETH", + } + `); + }); + + it('returns custom network configuration', () => { + const mockNetworkConfigurationId = 'mock-network-config-id'; + const modifiedMockState = { + ...mockState, + metamask: { + ...mockState.metamask, + networkConfigurations: { + ...mockState.networkConfigurations, + [mockNetworkConfigurationId]: { + rpcUrl: 'https://mock-rpc-endpoint.test', + chainId: '0x9999', + ticker: 'TST', + id: mockNetworkConfigurationId, + }, + }, + providerConfig: { + rpcUrl: 'https://mock-rpc-endpoint.test', + chainId: '0x9999', + ticker: 'TST', + id: mockNetworkConfigurationId, + type: 'rpc', + }, + }, + }; + + const currentNetwork = selectors.getCurrentNetwork(modifiedMockState); + + expect(currentNetwork).toMatchInlineSnapshot(` + { + "blockExplorerUrl": undefined, + "chainId": "0x9999", + "id": "mock-network-config-id", + "removable": true, + "rpcPrefs": { + "imageUrl": undefined, + }, + "rpcUrl": "https://mock-rpc-endpoint.test", + "ticker": "TST", + } + `); + }); + + it('returns custom network configuration that is missing from networkConfigurations state', () => { + const modifiedMockState = { + ...mockState, + metamask: { + ...mockState.metamask, + providerConfig: { + rpcUrl: 'https://mock-rpc-endpoint.test', + chainId: '0x9999', + ticker: 'TST', + type: 'rpc', + }, + }, + }; + + const currentNetwork = selectors.getCurrentNetwork(modifiedMockState); + + expect(currentNetwork).toMatchInlineSnapshot(` + { + "chainId": "0x9999", + "nickname": undefined, + "rpcPrefs": undefined, + "rpcUrl": "https://mock-rpc-endpoint.test", + "ticker": "TST", + } + `); + }); + it('returns the correct custom network when there is a chainId collision', () => { const modifiedMockState = { ...mockState,