Remove open/close walletSelectModal logic at components/account-management-panel/*

src/components/messenger/user-profile/account-management-panel/container.test.tsx

@@ -40,16 +40,6 @@ describe('Container', () => {
       });
     });
 
-    describe('isModalOpen', () => {
-      it('is true when wallet select modal is open', () => {
-        const props = subject({
-          accountManagement: { isWalletSelectModalOpen: true } as AccountManagementState,
-        });
-
-        expect(props.isModalOpen).toEqual(true);
-      });
-    });
-
     describe('currentUser', () => {
       test('currentUser', () => {
         const props = subject({

src/components/messenger/user-profile/account-management-panel/container.tsx

@@ -4,31 +4,19 @@ import { RootState } from '../../../../store/reducer';
 import { connectContainer } from '../../../../store/redux-container';
 
 import { AccountManagementPanel } from './index';
-import { Connectors } from '../../../../lib/web3';
-import {
-  addNewWallet,
-  openWalletSelectModal,
-  closeWalletSelectModal,
-  openAddEmailAccountModal,
-  closeAddEmailAccountModal,
-  Errors,
-} from '../../../../store/account-management';
+import { openAddEmailAccountModal, closeAddEmailAccountModal, Errors } from '../../../../store/account-management';
 import { currentUserSelector } from '../../../../store/authentication/selectors';
 
 export interface PublicProperties {
   onClose?: () => void;
 }
 
 export interface Properties extends PublicProperties {
-  isModalOpen: boolean;
   isAddEmailModalOpen: boolean;
   error: string;
   currentUser: any;
   canAddEmail: boolean;
 
-  addNewWallet: (payload: { connector: Connectors }) => void;
-  openWalletSelectModal: () => void;
-  closeWalletSelectModal: () => void;
   openAddEmailAccountModal: () => void;
   closeAddEmailAccountModal: () => void;
 }
@@ -42,7 +30,6 @@ export class Container extends React.Component<Properties> {
 
     return {
       error: Container.mapErrors(accountManagement.errors),
-      isModalOpen: accountManagement.isWalletSelectModalOpen,
       isAddEmailModalOpen: accountManagement.isAddEmailAccountModalOpen,
       currentUser: {
         userId: currentUser?.id,
@@ -58,9 +45,6 @@ export class Container extends React.Component<Properties> {
 
   static mapActions(_props: Properties): Partial<Properties> {
     return {
-      addNewWallet,
-      openWalletSelectModal,
-      closeWalletSelectModal,
       openAddEmailAccountModal,
       closeAddEmailAccountModal,
     };
@@ -77,21 +61,13 @@ export class Container extends React.Component<Properties> {
     return error;
   }
 
-  connectorSelected = async (connector) => {
-    this.props.addNewWallet({ connector });
-  };
-
   render() {
     return (
       <AccountManagementPanel
         error={this.props.error}
-        isModalOpen={this.props.isModalOpen}
         isAddEmailModalOpen={this.props.isAddEmailModalOpen}
         currentUser={this.props.currentUser}
         canAddEmail={this.props.canAddEmail}
-        onSelect={this.connectorSelected}
-        onOpenModal={() => this.props.openWalletSelectModal()}
-        onCloseModal={() => this.props.closeWalletSelectModal()}
         onOpenAddEmailModal={() => this.props.openAddEmailAccountModal()}
         onCloseAddEmailModal={() => this.props.closeAddEmailAccountModal()}
         onBack={this.props.onClose}

src/components/messenger/user-profile/account-management-panel/index.test.tsx

@@ -11,15 +11,11 @@ describe(AccountManagementPanel, () => {
   const subject = (props: Partial<Properties> = {}) => {
     const allProps: Properties = {
       error: '',
-      isModalOpen: false,
       isAddEmailModalOpen: false,
       currentUser: {},
       canAddEmail: false,
 
       onBack: () => {},
-      onSelect: () => {},
-      onOpenModal: () => {},
-      onCloseModal: () => {},
       onOpenAddEmailModal: () => {},
       onCloseAddEmailModal: () => {},
       ...props,
@@ -37,44 +33,6 @@ describe(AccountManagementPanel, () => {
     expect(onBack).toHaveBeenCalled();
   });
 
-  it('renders wallet select modal if isModalOpen is true', () => {
-    const wrapper = subject({ isModalOpen: true });
-
-    expect(wrapper.find('Modal').at(0).prop('open')).toEqual(true);
-  });
-
-  it('does not render wallet select modal if isModalOpen is false', () => {
-    const wrapper = subject({ isModalOpen: false });
-
-    expect(wrapper.find('Modal').at(0).prop('open')).toEqual(false);
-  });
-
-  it('publishes onOpenModal event when modal is opened', () => {
-    const onOpenModal = jest.fn();
-    const wrapper = subject({ onOpenModal, isModalOpen: false });
-
-    wrapper.find('Modal').at(0).simulate('openChange', true);
-
-    expect(onOpenModal).toHaveBeenCalled();
-  });
-
-  it('publishes onCloseModal event when modal is closed', () => {
-    const onCloseModal = jest.fn();
-    const wrapper = subject({ onCloseModal, isModalOpen: true });
-
-    wrapper.find('Modal').at(0).simulate('openChange', false);
-
-    expect(onCloseModal).toHaveBeenCalled();
-  });
-
-  it('publishes onSelect event when wallet is selected', () => {
-    const onSelect = jest.fn();
-    const wrapper = subject({ onSelect });
-
-    wrapper.find('WalletSelect').simulate('select', 'MetaMask');
-    expect(onSelect).toHaveBeenCalledWith('MetaMask');
-  });
-
   it('renders error alert if error is present', () => {
     const wrapper = subject({ error: 'An error occurred' });
 
@@ -176,14 +134,14 @@ describe(AccountManagementPanel, () => {
     it('renders add email modal if isAddEmailModalOpen is true', () => {
       const wrapper = subject({ isAddEmailModalOpen: true });
 
-      expect(wrapper.find('Modal').at(1).prop('open')).toEqual(true);
+      expect(wrapper.find('Modal').prop('open')).toEqual(true);
       expect(wrapper.find(c('add-email-title')).text()).toEqual('Add Email');
     });
 
     it('does not render add email modal if isAddEmailModalOpen is false', () => {
       const wrapper = subject({ isAddEmailModalOpen: false });
 
-      expect(wrapper.find('Modal').at(1).prop('open')).toEqual(false);
+      expect(wrapper.find('Modal').prop('open')).toEqual(false);
     });
 
     it('publishes onOpenAddEmailModal when add email is clicked', () => {
@@ -199,7 +157,7 @@ describe(AccountManagementPanel, () => {
       const onCloseAddEmailModal = jest.fn();
       const wrapper = subject({ onCloseAddEmailModal, isAddEmailModalOpen: true });
 
-      wrapper.find('Modal').at(1).simulate('openChange', false);
+      wrapper.find('Modal').simulate('openChange', false);
 
       expect(onCloseAddEmailModal).toHaveBeenCalled();
     });

src/components/messenger/user-profile/account-management-panel/index.tsx

@@ -7,7 +7,6 @@ import { Alert, Modal, IconButton } from '@zero-tech/zui/components';
 
 import { IconPlus } from '@zero-tech/zui/icons';
 import './styles.scss';
-import { WalletSelect } from '../../../wallet-select';
 import { WalletListItem } from '../../../wallet-list-item';
 import { CitizenListItem } from '../../../citizen-list-item';
 import { IconXClose } from '@zero-tech/zui/icons';
@@ -16,49 +15,26 @@ import { CreateEmailAccountContainer } from '../../../../authentication/create-e
 const cn = bemClassName('account-management-panel');
 
 export interface Properties {
-  isModalOpen: boolean;
   isAddEmailModalOpen: boolean;
   error: string;
   currentUser: any;
   canAddEmail: boolean;
 
   onBack: () => void;
-  onOpenModal: () => void;
-  onCloseModal: () => void;
   onOpenAddEmailModal: () => void;
   onCloseAddEmailModal: () => void;
-  onSelect: (connector: any) => void;
 }
 
 export class AccountManagementPanel extends React.Component<Properties> {
   back = () => {
     this.props.onBack();
   };
 
-  renderWalletSelectModal = () => {
-    return (
-      <Modal
-        open={this.props.isModalOpen}
-        onOpenChange={(isOpen) => {
-          isOpen ? this.props.onOpenModal() : this.props.onCloseModal();
-        }}
-      >
-        <div {...cn('wallet-select-modal')}>
-          <WalletSelect isConnecting={false} onSelect={this.props.onSelect} />
-        </div>
-      </Modal>
-    );
-  };
-
   // note: hiding this for now
   renderAddNewWalletButton = () => {
     return (
       <div {...cn('add-wallet')}>
-        <Button
-          variant={ButtonVariant.Secondary}
-          onPress={this.props.onOpenModal}
-          startEnhancer={<IconPlus size={20} isFilled />}
-        >
+        <Button variant={ButtonVariant.Secondary} onPress={() => {}} startEnhancer={<IconPlus size={20} isFilled />}>
           Add new wallet
         </Button>
       </div>
@@ -169,7 +145,6 @@ export class AccountManagementPanel extends React.Component<Properties> {
           )}
         </div>
 
-        {this.renderWalletSelectModal()}
         {this.renderAddEmailAccountModal()}
       </div>
     );