Merge branch 'main' into jc/WAPI-728

Author: ffmcgee725

ui/components/multichain-accounts/address-qr-code-modal/address-qr-code-modal.test.tsx

@@ -1,32 +1,43 @@
 import React from 'react';
-import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/jest';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { openBlockExplorer } from '../../multichain/menu-items/view-explorer-menu-item';
+import { getBlockExplorerInfo } from '../../../helpers/utils/multichain/getBlockExplorerInfo';
 import { AddressQRCodeModal } from './address-qr-code-modal';
 
-// Mock copy to clipboard hook
+// Import the mocked function
+
+// Mock only the essential dependencies that the component actually uses
 jest.mock('../../../hooks/useCopyToClipboard', () => ({
   useCopyToClipboard: jest.fn(),
 }));
 
-// Mock the openBlockExplorer function
 jest.mock(
   '../../../components/multichain/menu-items/view-explorer-menu-item',
   () => ({
     openBlockExplorer: jest.fn(),
   }),
 );
 
+jest.mock('../../../helpers/utils/multichain/getBlockExplorerInfo', () => ({
+  getBlockExplorerInfo: jest.fn(),
+}));
+
 const mockUseCopyToClipboard = useCopyToClipboard as jest.MockedFunction<
   typeof useCopyToClipboard
 >;
 const mockOpenBlockExplorer = openBlockExplorer as jest.Mock;
 
+const mockGetBlockExplorerInfo = getBlockExplorerInfo as jest.Mock;
+
 describe('AddressQRCodeModal', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockUseCopyToClipboard.mockReturnValue([false, jest.fn(), jest.fn()]);
+
+    // Set up default mock return values
+    mockGetBlockExplorerInfo.mockReturnValue(null);
   });
 
   it('should render the modal when isOpen is true', () => {
@@ -37,6 +48,7 @@ describe('AddressQRCodeModal', () => {
         address="0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
         accountName="Test Account"
         networkName="Ethereum"
+        chainId="eip155:1"
         networkImageSrc="./images/eth_logo.svg"
       />,
     );
@@ -58,6 +70,7 @@ describe('AddressQRCodeModal', () => {
         address="0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
         accountName="Test Account"
         networkName="Ethereum"
+        chainId="eip155:1"
         networkImageSrc="./images/eth_logo.svg"
       />,
     );
@@ -75,28 +88,33 @@ describe('AddressQRCodeModal', () => {
         address="0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
         accountName="Test Account"
         networkName="Ethereum"
+        chainId="eip155:1"
         networkImageSrc="./images/eth_logo.svg"
       />,
     );
 
-    // The address is displayed in segments: start + middle + end (0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc)
-    // Start: first 6 chars, End: last 5 chars
-    expect(screen.getByText('0x0dcd')).toBeInTheDocument(); // First 6 chars
-    expect(
-      screen.getByText('5d886577d5081b0c52e242ef29e70be'),
-    ).toBeInTheDocument();
+    // The address is displayed in segments, so we check for the last 5 characters
     expect(screen.getByText('3e7bc')).toBeInTheDocument(); // Last 5 chars
     expect(screen.getByText('Copy address')).toBeInTheDocument();
   });
 
   it('should render the view on explorer button for Ethereum', () => {
+    // Mock the getBlockExplorerInfo to return Ethereum explorer info
+    mockGetBlockExplorerInfo.mockReturnValue({
+      addressUrl:
+        'https://etherscan.io/address/0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+      name: 'Etherscan',
+      buttonText: 'View on Etherscan',
+    });
+
     renderWithProvider(
       <AddressQRCodeModal
         isOpen={true}
         onClose={jest.fn()}
         address="0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
         accountName="Test Account"
         networkName="Ethereum"
+        chainId="eip155:1"
         networkImageSrc="./images/eth_logo.svg"
       />,
     );
@@ -115,22 +133,20 @@ describe('AddressQRCodeModal', () => {
         address="0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
         accountName="Test Account"
         networkName="Ethereum"
+        chainId="eip155:1"
         networkImageSrc="./images/eth_logo.svg"
       />,
     );
 
     const copyButton = screen.getByText('Copy address');
     fireEvent.click(copyButton);
 
-    await waitFor(() => {
-      expect(mockHandleCopy).toHaveBeenCalledWith(
-        '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
-      );
-    });
+    expect(mockHandleCopy).toHaveBeenCalledTimes(1);
   });
 
-  it('should show copy success state when copy is successful', () => {
-    mockUseCopyToClipboard.mockReturnValue([true, jest.fn(), jest.fn()]);
+  it('should show copy success state when copy is successful', async () => {
+    const mockHandleCopy = jest.fn();
+    mockUseCopyToClipboard.mockReturnValue([true, mockHandleCopy, jest.fn()]);
 
     renderWithProvider(
       <AddressQRCodeModal
@@ -139,6 +155,7 @@ describe('AddressQRCodeModal', () => {
         address="0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
         accountName="Test Account"
         networkName="Ethereum"
+        chainId="eip155:1"
         networkImageSrc="./images/eth_logo.svg"
       />,
     );
@@ -151,13 +168,21 @@ describe('AddressQRCodeModal', () => {
   it('should navigate to the correct URL for Ethereum explorer when button is clicked', () => {
     const address = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc';
 
+    // Mock the getBlockExplorerInfo to return Ethereum explorer info
+    mockGetBlockExplorerInfo.mockReturnValue({
+      addressUrl: `https://etherscan.io/address/${address}`,
+      name: 'Etherscan',
+      buttonText: 'View on Etherscan',
+    });
+
     renderWithProvider(
       <AddressQRCodeModal
         isOpen={true}
         onClose={jest.fn()}
         address={address}
         accountName="Test Account"
         networkName="Ethereum"
+        chainId="eip155:1"
         networkImageSrc="./images/eth_logo.svg"
       />,
     );
@@ -183,97 +208,104 @@ describe('AddressQRCodeModal', () => {
         address="0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
         accountName="Test Account"
         networkName="Ethereum"
+        chainId="eip155:1"
         networkImageSrc="./images/eth_logo.svg"
       />,
     );
 
-    const closeButton = screen.getByRole('button', { name: 'Close' });
+    const closeButton = screen.getByLabelText('Close');
     fireEvent.click(closeButton);
 
-    expect(onClose).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it('should handle different network types and navigate to Solana explorer correctly', () => {
-    // Test Solana
-    const solanaAddress = 'Dh9ZYBBCdD5FjjgKpAi9w9GQvK4f8k3b8a8HHKhz7kLa';
+    const address = '9WzDXwBbmkg8ZTbNMqUxvQRAyrZzDsGYdLVL9zYtAWWM';
+
+    // Mock the getBlockExplorerInfo to return Solana explorer info
+    mockGetBlockExplorerInfo.mockReturnValue({
+      addressUrl: `https://solscan.io/account/${address}`,
+      name: 'Solscan',
+      buttonText: 'View on Solscan',
+    });
+
     renderWithProvider(
       <AddressQRCodeModal
         isOpen={true}
         onClose={jest.fn()}
-        address={solanaAddress}
-        accountName="Solana Account"
+        address={address}
+        accountName="Test Account"
         networkName="Solana"
+        chainId="solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp"
         networkImageSrc="./images/sol_logo.svg"
       />,
     );
 
-    expect(screen.getByText('Solana Account / Solana')).toBeInTheDocument();
-    expect(screen.getByText('Solana Address')).toBeInTheDocument();
-    expect(screen.getByText('Dh9ZYB')).toBeInTheDocument(); // First 6 chars
-    expect(screen.getByText('z7kLa')).toBeInTheDocument(); // Last 5 chars
-
     const explorerButton = screen.getByRole('button', {
       name: 'View on Solscan',
     });
-    expect(explorerButton).toBeInTheDocument();
 
     fireEvent.click(explorerButton);
 
     expect(mockOpenBlockExplorer).toHaveBeenCalledTimes(1);
     expect(mockOpenBlockExplorer.mock.calls[0][0]).toBe(
-      `https://solscan.io/address/${solanaAddress}`,
+      `https://solscan.io/account/${address}`,
     );
   });
 
   it('should handle Bitcoin network and navigate to Bitcoin explorer correctly', () => {
-    const bitcoinAddress = 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh';
+    const address = '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa';
+
+    // Mock the getBlockExplorerInfo to return Bitcoin explorer info
+    mockGetBlockExplorerInfo.mockReturnValue({
+      addressUrl: `https://blockstream.info/address/${address}`,
+      name: 'Blockstream',
+      buttonText: 'View on Blockstream',
+    });
+
     renderWithProvider(
       <AddressQRCodeModal
         isOpen={true}
         onClose={jest.fn()}
-        address={bitcoinAddress}
-        accountName="Bitcoin Account"
+        address={address}
+        accountName="Test Account"
         networkName="Bitcoin"
+        chainId="bitcoin:0"
         networkImageSrc="./images/btc_logo.svg"
       />,
     );
 
-    expect(screen.getByText('Bitcoin Account / Bitcoin')).toBeInTheDocument();
-    expect(screen.getByText('Bitcoin Address')).toBeInTheDocument();
-
     const explorerButton = screen.getByRole('button', {
       name: 'View on Blockstream',
     });
-    expect(explorerButton).toBeInTheDocument();
 
     fireEvent.click(explorerButton);
 
     expect(mockOpenBlockExplorer).toHaveBeenCalledTimes(1);
     expect(mockOpenBlockExplorer.mock.calls[0][0]).toBe(
-      `https://blockstream.info/address/${bitcoinAddress}`,
+      `https://blockstream.info/address/${address}`,
     );
   });
 
   it('should handle unknown network gracefully', () => {
+    // Mock the getBlockExplorerInfo to return null for unknown network
+    mockGetBlockExplorerInfo.mockReturnValue(null);
+
     renderWithProvider(
       <AddressQRCodeModal
         isOpen={true}
         onClose={jest.fn()}
-        address="unknown_address_format"
+        address="0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
         accountName="Test Account"
         networkName="Unknown Network"
+        chainId="unknown:123"
+        networkImageSrc="./images/unknown_logo.svg"
       />,
     );
 
+    // Should not render explorer button for unknown network
     expect(
-      screen.getByText('Test Account / Unknown Network'),
-    ).toBeInTheDocument();
-    expect(screen.getByText('Unknown Network Address')).toBeInTheDocument();
-    // Explorer button should not be rendered for unknown networks
-    expect(
-      screen.queryByRole('button', { name: /view.*explorer/iu }),
+      screen.queryByRole('button', { name: /View on/u }),
     ).not.toBeInTheDocument();
-    // Make sure openBlockExplorer was not called
-    expect(mockOpenBlockExplorer).not.toHaveBeenCalled();
   });
 });

ui/components/multichain-accounts/address-qr-code-modal/address-qr-code-modal.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useContext, useMemo } from 'react';
 import qrCode from 'qrcode-generator';
+import { CaipChainId } from '@metamask/utils';
 import {
   Text,
   TextVariant,
@@ -28,6 +29,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { openBlockExplorer } from '../../multichain/menu-items/view-explorer-menu-item';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { getBlockExplorerInfo } from '../../../helpers/utils/multichain/getBlockExplorerInfo';
 
 // Constants for QR code generation
 const QR_CODE_TYPE_NUMBER = 4;
@@ -48,6 +50,7 @@ export type AddressQRCodeModalProps = Omit<
   address: string;
   accountName: string;
   networkName: string;
+  chainId: CaipChainId;
   networkImageSrc?: string | undefined;
 };
 
@@ -57,6 +60,7 @@ export const AddressQRCodeModal: React.FC<AddressQRCodeModalProps> = ({
   address,
   accountName,
   networkName,
+  chainId,
   networkImageSrc,
 }) => {
   const t = useI18nContext();
@@ -88,47 +92,24 @@ export const AddressQRCodeModal: React.FC<AddressQRCodeModalProps> = ({
     handleCopy(address);
   }, [address, handleCopy]);
 
-  // TODO: Move this out into a utility or selector
-  // Centralized explorer configuration
-  const explorerInfo = useMemo(() => {
-    const networkNameLower = networkName.toLowerCase();
-
-    if (networkNameLower.includes('ethereum')) {
-      return {
-        url: 'https://etherscan.io',
-        name: 'Etherscan',
-        buttonText: t('viewAddressOnExplorer', ['Etherscan']),
-      };
-    }
-
-    if (networkNameLower.includes('solana')) {
-      return {
-        url: 'https://solscan.io',
-        name: 'Solscan',
-        buttonText: t('viewAddressOnExplorer', ['Solscan']),
-      };
-    }
-
-    if (networkNameLower.includes('bitcoin')) {
-      return {
-        url: 'https://blockstream.info',
-        name: 'Blockstream',
-        buttonText: t('viewAddressOnExplorer', ['Blockstream']),
-      };
-    }
-
-    // Return null if no valid explorer found - button won't be shown
-    return null;
-  }, [networkName, t]);
+  // Get block explorer info from network configuration
+  const explorerInfo = getBlockExplorerInfo(
+    t as (key: string, ...args: string[]) => string,
+    address,
+    { networkName, chainId },
+  );
 
   const handleExplorerNavigation = useCallback(() => {
     if (!explorerInfo) {
       return;
     }
 
-    const addressLink = `${explorerInfo.url}/address/${address}`;
-    openBlockExplorer(addressLink, 'Address QR Code Modal', trackEvent);
-  }, [address, explorerInfo, trackEvent]);
+    openBlockExplorer(
+      explorerInfo.addressUrl,
+      'Address QR Code Modal',
+      trackEvent,
+    );
+  }, [explorerInfo, trackEvent]);
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>