From c2fad63baa23ef49e87c032ea27422c6e183aad0 Mon Sep 17 00:00:00 2001
From: Micaela Estabillo <micaela.estabillo@consensys.net>
Date: Wed, 4 Sep 2024 18:32:34 -0700
Subject: [PATCH] fix: lint and unit tests

---
 .../asset-picker-modal.test.tsx               | 37 +++++++++++++++++--
 .../asset-picker-modal/asset-picker-modal.tsx |  6 +--
 .../asset-picker-modal/index.scss             |  3 +-
 .../asset-picker/asset-picker.test.tsx        | 33 +++++++++++++++--
 .../asset-picker/asset-picker.tsx             |  2 +-
 .../asset-picker/index.scss                   |  2 +-
 6 files changed, 69 insertions(+), 14 deletions(-)

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(
       <AssetPickerModal
         {...defaultProps}
         header="selectNetworkHeader"
         network={{
-          type: 'rpc',
           ticker: 'ETH',
           chainId: '0x1',
+          rpcUrl: 'https://rpcurl',
+          rpcPrefs: {
+            blockExplorerUrl: 'https://explorerurl',
+            imageUrl: 'https://image.com',
+          },
+          nickname: 'Network name',
         }}
       />,
       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(
+      <AssetPickerModal
+        {...defaultProps}
+        onNetworkPickerClick={undefined}
+        header="selectNetworkHeader"
+        network={{
+          ticker: 'ETH',
+          chainId: '0x1',
+          rpcUrl: 'https://rpcurl',
+          rpcPrefs: {
+            blockExplorerUrl: 'https://explorerurl',
+            imageUrl: 'https://image.com',
+          },
+          nickname: 'Network name',
+        }}
+      />,
+      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({
           <Box className="network-picker">
             <PickerNetwork
               label={network?.nickname ?? 'Select network'}
-              src={
-                network?.rpcPrefs && 'imageUrl' in network.rpcPrefs
-                  ? (network.rpcPrefs.imageUrl as string)
-                  : undefined
-              }
+              src={network?.rpcPrefs?.imageUrl}
               onClick={onNetworkPickerClick}
               data-testid="multichain-asset-picker__network"
             />
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;
   }