diff --git a/ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.test.tsx b/ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.test.tsx index 6917513efed0..ed0092ffa719 100644 --- a/ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.test.tsx +++ b/ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { screen, fireEvent } from '@testing-library/react'; -import { renderWithProvider } from '../../../../test/jest'; +import { useSelector } from 'react-redux'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import { ADD_WALLET_PAGE_ROUTE, CONNECT_HARDWARE_ROUTE, @@ -10,6 +11,7 @@ import { AddWalletModal } from './add-wallet-modal'; const mockHistoryPush = jest.fn(); const mockOpenExtensionInBrowser = jest.fn(); +const mockUseSelector = useSelector as jest.MockedFunction; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), @@ -18,6 +20,15 @@ jest.mock('react-router-dom', () => ({ }), })); +jest.mock('react-redux', () => ({ + ...jest.requireActual('react-redux'), + useSelector: jest.fn(), +})); + +jest.mock('../../../hooks/useI18nContext', () => ({ + useI18nContext: () => (key: string) => key, +})); + jest.mock('../../../../app/scripts/lib/util', () => ({ ...jest.requireActual('../../../../app/scripts/lib/util'), getEnvironmentType: () => 'popup', @@ -31,6 +42,9 @@ describe('AddWalletModal', () => { mockHistoryPush.mockClear(); mockOpenExtensionInBrowser.mockClear(); + // Mock useSelector to return false for manageInstitutionalWallets by default + mockUseSelector.mockReturnValue(false); + // @ts-expect-error mocking platform global.platform = { openExtensionInBrowser: mockOpenExtensionInBrowser, @@ -40,21 +54,21 @@ describe('AddWalletModal', () => { it('renders the modal when isOpen is true', () => { renderWithProvider(); - expect(screen.getByText('Add wallet')).toBeInTheDocument(); + expect(screen.getByText('addWallet')).toBeInTheDocument(); }); it('renders all wallet options', () => { renderWithProvider(); - expect(screen.getByText('Import a wallet')).toBeInTheDocument(); - expect(screen.getByText('Import an account')).toBeInTheDocument(); - expect(screen.getByText('Add a hardware wallet')).toBeInTheDocument(); + expect(screen.getByText('importAWallet')).toBeInTheDocument(); + expect(screen.getByText('importAnAccount')).toBeInTheDocument(); + expect(screen.getByText('addAHardwareWallet')).toBeInTheDocument(); }); it('calls onClose and navigates when import wallet option is clicked', () => { renderWithProvider(); - fireEvent.click(screen.getByText('Import a wallet')); + fireEvent.click(screen.getByText('importAWallet')); expect(mockOnClose).toHaveBeenCalledTimes(1); expect(mockHistoryPush).toHaveBeenCalledWith(IMPORT_SRP_ROUTE); @@ -63,7 +77,7 @@ describe('AddWalletModal', () => { it('calls onClose and navigates when import account option is clicked', () => { renderWithProvider(); - fireEvent.click(screen.getByText('Import an account')); + fireEvent.click(screen.getByText('importAnAccount')); expect(mockOnClose).toHaveBeenCalledTimes(1); expect(mockHistoryPush).toHaveBeenCalledWith(ADD_WALLET_PAGE_ROUTE); @@ -72,7 +86,7 @@ describe('AddWalletModal', () => { it('calls onClose and opens hardware wallet route in expanded view', () => { renderWithProvider(); - fireEvent.click(screen.getByText('Add a hardware wallet')); + fireEvent.click(screen.getByText('addAHardwareWallet')); expect(mockOnClose).toHaveBeenCalledTimes(1); expect(mockOpenExtensionInBrowser).toHaveBeenCalledWith( @@ -84,6 +98,26 @@ describe('AddWalletModal', () => { it('does not render when isOpen is false', () => { renderWithProvider(); - expect(screen.queryByText('Add wallet')).not.toBeInTheDocument(); + expect(screen.queryByText('addWallet')).not.toBeInTheDocument(); + }); + + it('does not render the institutional wallet option if institutional wallets are disabled', () => { + // Mock useSelector to return false for manageInstitutionalWallets + mockUseSelector.mockReturnValue(false); + + renderWithProvider(); + + expect( + screen.queryByText('manageInstitutionalWallets'), + ).not.toBeInTheDocument(); + }); + + it('renders the institutional wallet option if institutional wallets are enabled', () => { + // Mock useSelector to return true for manageInstitutionalWallets + mockUseSelector.mockReturnValue(true); + + renderWithProvider(); + + expect(screen.getByText('manageInstitutionalWallets')).toBeInTheDocument(); }); }); diff --git a/ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.tsx b/ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.tsx index 5ff848752430..27efb6e2144b 100644 --- a/ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.tsx +++ b/ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.tsx @@ -16,6 +16,7 @@ import { BoxBorderColor, } from '@metamask/design-system-react'; +import { useSelector } from 'react-redux'; import { Modal, ModalOverlay, @@ -35,6 +36,8 @@ import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; // TODO: Remove restricted import // eslint-disable-next-line import/no-restricted-paths import { getEnvironmentType } from '../../../../app/scripts/lib/util'; +import { getManageInstitutionalWallets } from '../../../selectors'; +import { INSTITUTIONAL_WALLET_SNAP_ID } from '../../../../shared/lib/accounts'; export type AddWalletModalProps = Omit< ModalProps, @@ -58,6 +61,9 @@ export const AddWalletModal: React.FC = ({ }) => { const t = useI18nContext(); const history = useHistory(); + const institutionalWalletsEnabled = useSelector( + getManageInstitutionalWallets, + ); const walletOptions: WalletOption[] = [ { @@ -78,6 +84,18 @@ export const AddWalletModal: React.FC = ({ iconName: IconName.Hardware, route: CONNECT_HARDWARE_ROUTE, }, + ...(institutionalWalletsEnabled + ? [ + { + id: 'institutional-wallet', + titleKey: 'manageInstitutionalWallets', + iconName: IconName.Add, + route: `/snaps/view/${encodeURIComponent( + INSTITUTIONAL_WALLET_SNAP_ID, + )}`, + }, + ] + : []), ]; const handleOptionClick = (option: WalletOption) => {