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 3a93f01821da..4a2a82d00906 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 @@ -296,15 +296,20 @@ describe('AssetPickerModal', () => { ).toBe(true); }); - it('should render network picker when networks prop is defined', () => { + it('should render network picker when onNetworkPickerClick prop is defined', () => { const { getByText, getAllByRole } = renderWithProvider( , store, @@ -314,7 +319,33 @@ describe('AssetPickerModal', () => { expect(modalTitle).toBeInTheDocument(); expect(getAllByRole('img')).toHaveLength(2); - const modalContent = getByText('Select network'); + const modalContent = getByText('Network name'); expect(modalContent).toBeInTheDocument(); }); + + it('should not render network picker when onNetworkPickerClick prop is not defined', () => { + const { getByText, getAllByRole } = renderWithProvider( + , + store, + ); + + const modalTitle = getByText('selectNetworkHeader'); + expect(modalTitle).toBeInTheDocument(); + + expect(getAllByRole('img')).toHaveLength(1); + }); }); 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 9361b9653224..c29f73081e73 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 @@ -330,11 +330,7 @@ export function AssetPickerModal({ diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss b/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss index b3822894fa16..be1e27dc1416 100644 --- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss +++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss @@ -1,7 +1,8 @@ @use "design-system"; .multichain-asset-picker__network-modal { - overflow-y:auto; + overflow-y: auto; + .mm-modal-content__dialog { overflow-y: scroll; } diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx index 3624b445dd67..cce42bc9593a 100644 --- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx +++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx @@ -314,10 +314,37 @@ describe('AssetPicker', () => { onAssetChange={() => mockAssetChange()} isDisabled networkProps={{ - network: { chainId: '0x1', type: 'rpc', ticker: 'ETH' }, + network: { + chainId: '0x1', + ticker: 'ETH', + rpcUrl: 'https://rpcurl', + rpcPrefs: { + blockExplorerUrl: 'https://explorerurl', + imageUrl: './images/eth_logo.svg', + }, + nickname: 'network', + }, networks: [ - { chainId: '0x1', type: 'rpc', ticker: 'ETH' }, - { chainId: '0xa', type: 'rpc', ticker: 'ETH' }, + { + chainId: '0x1', + ticker: 'ETH', + rpcUrl: 'https://rpcurl', + rpcPrefs: { + blockExplorerUrl: 'https://explorerurl', + imageUrl: 'https://image.com', + }, + nickname: 'Network name 3', + }, + { + chainId: '0xa', + ticker: 'ETH', + rpcUrl: 'https://rpcurl', + rpcPrefs: { + blockExplorerUrl: 'https://explorerurl', + imageUrl: 'https://image.com', + }, + nickname: 'Network name 4', + }, ], onNetworkChange: jest.fn(), }} 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 b3f3b038ba78..23f01618e322 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 @@ -196,7 +196,7 @@ export function AssetPicker({ selectedNetwork?.rpcPrefs?.imageUrl ?? (selectedNetwork?.chainId && CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[ - selectedNetwork.chainId + selectedNetwork.chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ]) } backgroundColor={ diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/index.scss b/ui/components/multichain/asset-picker-amount/asset-picker/index.scss index 8218c7f3a1c3..6cfaf877efbd 100644 --- a/ui/components/multichain/asset-picker-amount/asset-picker/index.scss +++ b/ui/components/multichain/asset-picker-amount/asset-picker/index.scss @@ -26,7 +26,7 @@ cursor: not-allowed; } - &__fallback{ + &__fallback { text-wrap: nowrap; padding-left: 8px; }