fix: lint and unit tests

MetaMask · Sep 5, 2024 · c2fad63 · c2fad63
1 parent 47e6a43
commit c2fad63
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -26,7 +26,7 @@
     cursor: not-allowed;
   }
 
-  &__fallback{
+  &__fallback {
     text-wrap: nowrap;
     padding-left: 8px;
   }