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;
}