From 8f39fa0000d63f9f1fd73b7c76ae55c557ea38fa Mon Sep 17 00:00:00 2001
From: Bahar <bahar@regentmarkets.com>
Date: Thu, 5 Jan 2023 10:59:11 +0800
Subject: [PATCH 1/2] feat:
 integrate-create-new-account-with-diel-account-switcher

---
 .../account-transfer-modal.tsx                |  17 +-
 .../src/components/modals/modal-manager.tsx   |   4 +-
 packages/appstore/src/stores/index.ts         |   1 +
 .../__tests__/account-transfer.spec.tsx       |   3 +-
 .../account-transfer-no-account.spec.tsx      |   1 +
 .../account-transfer-no-account.tsx           |  27 ++-
 .../account-transfer/account-transfer.tsx     | 173 +++++++++---------
 .../currency-selection-modal.scss             |   0
 .../CurrencySelectionModal/currency/index.tsx |  35 ++++
 .../curreny-selection-modal.tsx               |  55 ++++--
 .../CurrencySelectionModal}/index.ts          |   0
 .../CurrencySelectionModal/types.tsx          |  38 ++++
 .../Layout/header/trading-hub-header.jsx      |   5 +
 packages/stores/types.ts                      |   6 +
 14 files changed, 253 insertions(+), 112 deletions(-)
 rename packages/{appstore/src/components/modals/currency-selection-modal => core/src/App/Containers/CurrencySelectionModal}/currency-selection-modal.scss (100%)
 create mode 100644 packages/core/src/App/Containers/CurrencySelectionModal/currency/index.tsx
 rename packages/{appstore/src/components/modals/currency-selection-modal => core/src/App/Containers/CurrencySelectionModal}/curreny-selection-modal.tsx (68%)
 rename packages/{appstore/src/components/modals/currency-selection-modal => core/src/App/Containers/CurrencySelectionModal}/index.ts (100%)
 create mode 100644 packages/core/src/App/Containers/CurrencySelectionModal/types.tsx

diff --git a/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx b/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx
index 83fcddb3de85..c681d8386c97 100644
--- a/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx
+++ b/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx
@@ -18,10 +18,16 @@ const AccountTransferModal = ({ is_modal_open, toggleModal }: TAccountTransferMo
                 account_transfer: { is_transfer_confirm, should_switch_account },
             },
         },
+        traders_hub: { closeModal, openModal },
     } = useStore();
 
     const history = useHistory();
 
+    React.useEffect(() => {
+        return () => closeModal();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     const modal_title = !is_transfer_confirm && <Localize i18n_default_text={'Transfer funds to your account'} />;
 
     const onClickDeposit = () => {
@@ -34,6 +40,10 @@ const AccountTransferModal = ({ is_modal_open, toggleModal }: TAccountTransferMo
         history.push(routes.cashier_acc_transfer);
     };
 
+    const openAccountSwitcherModal = () => {
+        openModal('currency_selection');
+    };
+
     return (
         <Modal
             className={should_switch_account ? 'account-transfer-modal' : ''}
@@ -46,7 +56,12 @@ const AccountTransferModal = ({ is_modal_open, toggleModal }: TAccountTransferMo
             should_header_stick_body={false}
         >
             <Modal.Body>
-                <AccountTransfer onClickDeposit={onClickDeposit} onClickNotes={onClickNotes} onClose={toggleModal} />
+                <AccountTransfer
+                    openAccountSwitcherModal={openAccountSwitcherModal}
+                    onClickDeposit={onClickDeposit}
+                    onClickNotes={onClickNotes}
+                    onClose={toggleModal}
+                />
             </Modal.Body>
         </Modal>
     );
diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx
index aa5743f35f74..53fa7b1fb3b4 100644
--- a/packages/appstore/src/components/modals/modal-manager.tsx
+++ b/packages/appstore/src/components/modals/modal-manager.tsx
@@ -18,7 +18,6 @@ import RegulatorsCompareModal from './regulators-compare-modal';
 import ExitTradersHubModal from './exit-traders-hub-modal';
 import { useStores } from 'Stores';
 import { TOpenAccountTransferMeta } from 'Types';
-import CurrencySelectionModal from './currency-selection-modal';
 import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
 import AccountTransferModal from 'Components/account-transfer-modal';
 
@@ -40,7 +39,7 @@ const ModalManager = () => {
         getRealSyntheticAccountsExistingData,
         getRealFinancialAccountsExistingData,
     } = modules.cfd;
-    const { is_demo, modal_data, is_account_transfer_modal_open, toggleAccountTransferModal } = traders_hub;
+    const { is_demo, is_account_transfer_modal_open, toggleAccountTransferModal } = traders_hub;
 
     const [password_manager, setPasswordManager] = React.useState<{
         is_visible: boolean;
@@ -138,7 +137,6 @@ const ModalManager = () => {
                 openPasswordModal={openRealPasswordModal}
                 is_real_enabled={has_active_real_account || !is_demo}
             />
-            <CurrencySelectionModal is_visible={modal_data.active_modal === 'currency_selection'} />
             <AccountTransferModal
                 is_modal_open={is_account_transfer_modal_open}
                 toggleModal={toggleAccountTransferModal}
diff --git a/packages/appstore/src/stores/index.ts b/packages/appstore/src/stores/index.ts
index d87c6789b2bb..7f15b07398b9 100644
--- a/packages/appstore/src/stores/index.ts
+++ b/packages/appstore/src/stores/index.ts
@@ -14,4 +14,5 @@ export const initContext = (core_store: TRootStore, websocket: Record<string, un
     }
 };
 
+/** @deprecated Use `useStore` from `@deriv/stores` package instead. */
 export const useStores = (): TRootStore => React.useContext(stores_context);
diff --git a/packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx b/packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx
index 36b2c60314cd..f5038d204c3d 100644
--- a/packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx
+++ b/packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx
@@ -24,6 +24,7 @@ jest.mock('@deriv/shared/src/services/ws-methods', () => ({
 jest.mock('../account-transfer-form', () => jest.fn(() => 'mockedAccountTransferForm'));
 jest.mock('Components/crypto-transactions-history', () => jest.fn(() => 'mockedCryptoTransactionsHistory'));
 jest.mock('Components/cashier-locked', () => jest.fn(() => 'mockedCashierLocked'));
+jest.mock('../account-transfer-no-account', () => jest.fn(() => 'mockedAccountTransferNoAccount'));
 jest.mock('../account-transfer-receipt', () => jest.fn(() => 'mockedAccountTransferReceipt'));
 jest.mock('Components/error', () => jest.fn(() => 'mockedError'));
 
@@ -140,7 +141,7 @@ describe('<AccountTransfer />', () => {
 
         renderAccountTransfer();
 
-        expect(await screen.findByText('You need at least two accounts')).toBeInTheDocument();
+        expect(await screen.findByText('mockedAccountTransferNoAccount')).toBeInTheDocument();
     });
 
     it('should render the no balance component if the account has no balance', async () => {
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-no-account/__tests__/account-transfer-no-account.spec.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-no-account/__tests__/account-transfer-no-account.spec.tsx
index 523a144e463a..5b2c5a1ca9e5 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-no-account/__tests__/account-transfer-no-account.spec.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-no-account/__tests__/account-transfer-no-account.spec.tsx
@@ -19,6 +19,7 @@ describe('<AccountTransferNoAccount />', () => {
             ui: {
                 toggleAccountsDialog: jest.fn(),
             },
+            traders_hub: { openModal: jest.fn(), closeModal: jest.fn() },
         };
     });
 
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-no-account/account-transfer-no-account.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-no-account/account-transfer-no-account.tsx
index 798ef383dd87..e9e3d5f35e65 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-no-account/account-transfer-no-account.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-no-account/account-transfer-no-account.tsx
@@ -5,12 +5,22 @@ import { Localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
 import './account-transfer-no-account.scss';
 
-const AccountTransferNoAccount = observer(() => {
+type TAccountTransferNoAccount = {
+    openAccountSwitcherModal?: () => void;
+};
+
+const AccountTransferNoAccount = observer(({ openAccountSwitcherModal }: TAccountTransferNoAccount) => {
     const {
-        client: { is_dxtrade_allowed },
+        client: { is_dxtrade_allowed, is_pre_appstore },
         ui: { toggleAccountsDialog },
+        traders_hub: { openModal, closeModal },
     } = useStore();
 
+    React.useEffect(() => {
+        closeModal();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return (
         <div className='cashier__wrapper cashier__no-balance'>
             <Icon icon='IcCashierNoBalance' className='cashier__no-balance-icon' size={116} />
@@ -33,7 +43,18 @@ const AccountTransferNoAccount = observer(() => {
                     />
                 )}
             </Text>
-            <Button className='account-transfer-no-account__button' primary large onClick={toggleAccountsDialog}>
+            <Button
+                className='account-transfer-no-account__button'
+                primary
+                large
+                onClick={() =>
+                    openAccountSwitcherModal
+                        ? openAccountSwitcherModal()
+                        : is_pre_appstore
+                        ? openModal('currency_selection')
+                        : toggleAccountsDialog()
+                }
+            >
                 <Localize i18n_default_text='Create account' />
             </Button>
         </div>
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer.tsx b/packages/cashier/src/pages/account-transfer/account-transfer.tsx
index b077bb20a6a4..10390d070601 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer.tsx
@@ -17,106 +17,109 @@ type TAccountTransferProps = {
     onClickDeposit?: () => void;
     onClickNotes?: () => void;
     onClose?: () => void;
+    openAccountSwitcherModal?: () => void;
     setSideNotes?: (notes: TSideNotesProps) => void;
 };
 
-const AccountTransfer = observer(({ onClickDeposit, onClickNotes, onClose, setSideNotes }: TAccountTransferProps) => {
-    const {
-        modules: {
-            cashier: { account_transfer, general_store, transaction_history },
-        },
-        client,
-    } = useStore();
+const AccountTransfer = observer(
+    ({ onClickDeposit, onClickNotes, onClose, openAccountSwitcherModal, setSideNotes }: TAccountTransferProps) => {
+        const {
+            modules: {
+                cashier: { account_transfer, general_store, transaction_history },
+            },
+            client,
+        } = useStore();
 
-    const {
-        accounts_list,
-        container,
-        error,
-        has_no_account,
-        has_no_accounts_balance,
-        is_transfer_confirm,
-        is_transfer_locked,
-        onMountAccountTransfer: onMount,
-        setAccountTransferAmount,
-        setIsTransferConfirm,
-    } = account_transfer;
+        const {
+            accounts_list,
+            container,
+            error,
+            has_no_account,
+            has_no_accounts_balance,
+            is_transfer_confirm,
+            is_transfer_locked,
+            onMountAccountTransfer: onMount,
+            setAccountTransferAmount,
+            setIsTransferConfirm,
+        } = account_transfer;
 
-    const { is_cashier_locked, is_loading, setActiveTab } = general_store;
+        const { is_cashier_locked, is_loading, setActiveTab } = general_store;
 
-    const { is_crypto_transactions_visible, onMount: recentTransactionOnMount } = transaction_history;
+        const { is_crypto_transactions_visible, onMount: recentTransactionOnMount } = transaction_history;
 
-    const { is_pre_appstore, is_switching, is_virtual } = client;
+        const { is_pre_appstore, is_switching, is_virtual } = client;
 
-    const [is_loading_status, setIsLoadingStatus] = React.useState(true);
-    const is_from_pre_appstore = is_pre_appstore && !location.pathname.startsWith(routes.cashier);
+        const [is_loading_status, setIsLoadingStatus] = React.useState(true);
+        const is_from_pre_appstore = is_pre_appstore && !location.pathname.startsWith(routes.cashier);
 
-    React.useEffect(() => {
-        if (!is_crypto_transactions_visible) {
-            recentTransactionOnMount();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [is_switching]);
+        React.useEffect(() => {
+            if (!is_crypto_transactions_visible) {
+                recentTransactionOnMount();
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [is_switching]);
+
+        React.useEffect(() => {
+            setActiveTab(container);
+            onMount();
 
-    React.useEffect(() => {
-        setActiveTab(container);
-        onMount();
+            WS.wait('authorize', 'website_status', 'get_settings', 'paymentagent_list').then(() => {
+                setIsLoadingStatus(false);
+            });
 
-        WS.wait('authorize', 'website_status', 'get_settings', 'paymentagent_list').then(() => {
-            setIsLoadingStatus(false);
-        });
+            return () => {
+                setAccountTransferAmount('');
+                setIsTransferConfirm(false);
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
 
-        return () => {
-            setAccountTransferAmount('');
-            setIsTransferConfirm(false);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        React.useEffect(() => {
+            if (typeof setSideNotes === 'function' && (has_no_accounts_balance || is_switching)) {
+                setSideNotes(null);
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [setSideNotes, has_no_accounts_balance]);
 
-    React.useEffect(() => {
-        if (typeof setSideNotes === 'function' && (has_no_accounts_balance || is_switching)) {
-            setSideNotes(null);
+        if (is_virtual) {
+            return <Virtual />;
+        }
+        if (is_loading || is_switching || is_loading_status) {
+            return <Loading className='cashier__loader' is_fullscreen={false} />;
+        }
+        if (is_cashier_locked) {
+            return <CashierLocked />;
+        }
+        if (is_transfer_locked) {
+            return <AccountTransferLocked />;
+        }
+        if (error.is_show_full_page || (error.message && !accounts_list.length)) {
+            // for errors with CTA hide the form and show the error,
+            // for others show them at the bottom of the form next to submit button
+            return <Error error={error} />;
+        }
+        if (has_no_account) {
+            return <AccountTransferNoAccount openAccountSwitcherModal={openAccountSwitcherModal} />;
+        }
+        if (has_no_accounts_balance) {
+            return <NoBalance />;
+        }
+        if (is_transfer_confirm) {
+            return <AccountTransferReceipt onClose={onClose} />;
+        }
+        if (!is_from_pre_appstore && is_crypto_transactions_visible) {
+            return <CryptoTransactionsHistory />;
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [setSideNotes, has_no_accounts_balance]);
 
-    if (is_virtual) {
-        return <Virtual />;
+        return (
+            <AccountTransferForm
+                error={error}
+                setSideNotes={setSideNotes}
+                onClickDeposit={onClickDeposit}
+                onClickNotes={onClickNotes}
+            />
+        );
     }
-    if (is_loading || is_switching || is_loading_status) {
-        return <Loading className='cashier__loader' is_fullscreen={false} />;
-    }
-    if (is_cashier_locked) {
-        return <CashierLocked />;
-    }
-    if (is_transfer_locked) {
-        return <AccountTransferLocked />;
-    }
-    if (error.is_show_full_page || (error.message && !accounts_list.length)) {
-        // for errors with CTA hide the form and show the error,
-        // for others show them at the bottom of the form next to submit button
-        return <Error error={error} />;
-    }
-    if (has_no_account) {
-        return <AccountTransferNoAccount />;
-    }
-    if (has_no_accounts_balance) {
-        return <NoBalance />;
-    }
-    if (is_transfer_confirm) {
-        return <AccountTransferReceipt onClose={onClose} />;
-    }
-    if (!is_from_pre_appstore && is_crypto_transactions_visible) {
-        return <CryptoTransactionsHistory />;
-    }
-
-    return (
-        <AccountTransferForm
-            error={error}
-            setSideNotes={setSideNotes}
-            onClickDeposit={onClickDeposit}
-            onClickNotes={onClickNotes}
-        />
-    );
-});
+);
 
 export default AccountTransfer;
diff --git a/packages/appstore/src/components/modals/currency-selection-modal/currency-selection-modal.scss b/packages/core/src/App/Containers/CurrencySelectionModal/currency-selection-modal.scss
similarity index 100%
rename from packages/appstore/src/components/modals/currency-selection-modal/currency-selection-modal.scss
rename to packages/core/src/App/Containers/CurrencySelectionModal/currency-selection-modal.scss
diff --git a/packages/core/src/App/Containers/CurrencySelectionModal/currency/index.tsx b/packages/core/src/App/Containers/CurrencySelectionModal/currency/index.tsx
new file mode 100644
index 000000000000..cf6aa04895d6
--- /dev/null
+++ b/packages/core/src/App/Containers/CurrencySelectionModal/currency/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+import { capitalizeFirstLetter } from '@deriv/shared';
+import { IconProps } from '../types';
+
+// TODO: This probably can be moved somewhere else.
+export type Currency =
+    | 'AUD'
+    | 'BCH'
+    | 'BTC'
+    | 'BUSD'
+    | 'DAI'
+    | 'ETH'
+    | 'EURCHECK'
+    | 'EUR'
+    | 'EURS'
+    | 'EUSDT'
+    | 'GBP'
+    | 'IDK'
+    | 'LTC'
+    | 'PAX'
+    | 'TUSD'
+    | 'TUSDT'
+    | 'UNKNOWN'
+    | 'USD'
+    | 'USDC'
+    | 'USDK'
+    | 'UST'
+    | 'VIRTUAL';
+
+const CurrencyIcon = ({ icon, ...props }: IconProps<Currency>) => {
+    return <Icon icon={`IcCurrency${capitalizeFirstLetter(icon.toLowerCase())}`} {...props} />;
+};
+
+export default CurrencyIcon;
diff --git a/packages/appstore/src/components/modals/currency-selection-modal/curreny-selection-modal.tsx b/packages/core/src/App/Containers/CurrencySelectionModal/curreny-selection-modal.tsx
similarity index 68%
rename from packages/appstore/src/components/modals/currency-selection-modal/curreny-selection-modal.tsx
rename to packages/core/src/App/Containers/CurrencySelectionModal/curreny-selection-modal.tsx
index 511accf97351..1c954a70105a 100644
--- a/packages/appstore/src/components/modals/currency-selection-modal/curreny-selection-modal.tsx
+++ b/packages/core/src/App/Containers/CurrencySelectionModal/curreny-selection-modal.tsx
@@ -1,23 +1,36 @@
 import React from 'react';
-import { observer } from 'mobx-react-lite';
 import { Button, Icon, Modal, Money, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { getCurrencyName } from '@deriv/shared';
-import CurrencyIcon from 'Assets/svgs/currency';
-import { useStores } from 'Stores/index';
-import { AccountListDetail } from 'Types';
+import { connect } from 'Stores/connect';
+import RootStore from 'Stores/index';
+import CurrencyIcon from './currency';
+import { AccountListDetail } from './types';
 import classNames from 'classnames';
-import StatusBadge from 'Components/currency-switcher-card/real/switcher-status-badge';
 
 type CurrencySelectionModalProps = {
+    //TODO: Replace the type with a proper one when ts migration cards merged
+    account_list: object[];
+    //TODO: Replace the type with a proper one when ts migration cards merged
+    accounts: any;
+    closeModal: () => void;
     is_visible: boolean;
+    loginid: string;
+    openRealAccountSignup: (account_type: string) => void;
+    selected_region: string;
+    switchAccount: (loginid: string) => void;
 };
 
-const CurrencySelectionModal = ({ is_visible }: CurrencySelectionModalProps) => {
-    const { client, traders_hub, ui } = useStores();
-    const { accounts, account_list, loginid: current_loginid, switchAccount, is_authentication_needed } = client;
-    const { closeModal, selected_region } = traders_hub;
-
+const CurrencySelectionModal = ({
+    account_list,
+    accounts,
+    closeModal,
+    is_visible,
+    loginid: current_loginid,
+    openRealAccountSignup,
+    selected_region,
+    switchAccount,
+}: CurrencySelectionModalProps) => {
     return (
         <Modal is_open={is_visible} toggleModal={closeModal} width='422px' height='422px'>
             <div className='currency-selection-modal__header'>
@@ -57,13 +70,9 @@ const CurrencySelectionModal = ({ is_visible }: CurrencySelectionModalProps) =>
                                     </Text>
                                 </div>
                                 <div className='currency-item-card__balance'>
-                                    {is_selected && selected_region === 'EU' && is_authentication_needed ? (
-                                        <StatusBadge />
-                                    ) : (
-                                        <Text size='xs' color='prominent'>
-                                            <Money amount={balance} currency={currency} show_currency />
-                                        </Text>
-                                    )}
+                                    <Text size='xs' color='prominent'>
+                                        <Money amount={balance} currency={currency} show_currency />
+                                    </Text>
                                 </div>
                             </div>
                         );
@@ -73,7 +82,7 @@ const CurrencySelectionModal = ({ is_visible }: CurrencySelectionModalProps) =>
                 <Button
                     className='block-button'
                     onClick={() => {
-                        setTimeout(() => ui.openRealAccountSignup('manage'), 500);
+                        setTimeout(() => openRealAccountSignup('manage'), 500);
                         closeModal();
                     }}
                     secondary
@@ -86,4 +95,12 @@ const CurrencySelectionModal = ({ is_visible }: CurrencySelectionModalProps) =>
     );
 };
 
-export default observer(CurrencySelectionModal);
+export default connect(({ client, traders_hub, ui }: RootStore) => ({
+    account_list: client.account_list,
+    accounts: client.accounts,
+    closeModal: traders_hub.closeModal,
+    loginid: client.loginid,
+    openRealAccountSignup: ui.openRealAccountSignup,
+    selected_region: traders_hub.selected_region,
+    switchAccount: client.switchAccount,
+}))(CurrencySelectionModal);
diff --git a/packages/appstore/src/components/modals/currency-selection-modal/index.ts b/packages/core/src/App/Containers/CurrencySelectionModal/index.ts
similarity index 100%
rename from packages/appstore/src/components/modals/currency-selection-modal/index.ts
rename to packages/core/src/App/Containers/CurrencySelectionModal/index.ts
diff --git a/packages/core/src/App/Containers/CurrencySelectionModal/types.tsx b/packages/core/src/App/Containers/CurrencySelectionModal/types.tsx
new file mode 100644
index 000000000000..5a3d52e2b33e
--- /dev/null
+++ b/packages/core/src/App/Containers/CurrencySelectionModal/types.tsx
@@ -0,0 +1,38 @@
+export interface IconProps<T> {
+    icon: T;
+    className?: string;
+    size?: number;
+    onClick?: () => void;
+}
+
+export type Currency =
+    | 'AUD'
+    | 'BCH'
+    | 'BTC'
+    | 'BUSD'
+    | 'DAI'
+    | 'ETH'
+    | 'EURCHECK'
+    | 'EUR'
+    | 'EURS'
+    | 'EUSDT'
+    | 'GBP'
+    | 'IDK'
+    | 'LTC'
+    | 'PAX'
+    | 'TUSD'
+    | 'TUSDT'
+    | 'UNKNOWN'
+    | 'USD'
+    | 'USDC'
+    | 'USDK'
+    | 'UST'
+    | 'VIRTUAL';
+
+export interface AccountListDetail {
+    icon: Currency;
+    is_disabled: boolean;
+    is_virtual: boolean;
+    loginid: string;
+    title: string;
+}
diff --git a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
index 78d116564077..27dacfa8923f 100644
--- a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
+++ b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
@@ -13,6 +13,7 @@ import { BinaryLink } from 'App/Components/Routes';
 import DerivBrandLogo from 'Assets/SvgComponents/header/deriv-brand-logo.svg';
 import DerivBrandLogoDark from 'Assets/SvgComponents/header/deriv-brand-logo-dark.svg';
 import RealAccountSignup from 'App/Containers/RealAccountSignup';
+import CurrencySelectionModal from '../../CurrencySelectionModal';
 
 const Divider = () => {
     return <div className='trading-hub-header__divider' />;
@@ -125,6 +126,7 @@ const TradingHubHeader = ({
     loginid,
     logoutClient,
     menu_items,
+    modal_data,
     notifications_count,
     replaceCashierMenuOnclick,
     setDarkMode,
@@ -273,6 +275,7 @@ const TradingHubHeader = ({
                 </div>
                 <RealAccountSignup />
             </MobileWrapper>
+            <CurrencySelectionModal is_visible={modal_data.active_modal === 'currency_selection'} />
         </header>
     );
 };
@@ -302,6 +305,7 @@ TradingHubHeader.propTypes = {
     loginid: PropTypes.string,
     logoutClient: PropTypes.func,
     menu_items: PropTypes.array,
+    modal_data: PropTypes.object,
     notifications_count: PropTypes.number,
     replaceCashierMenuOnclick: PropTypes.func,
     setDarkMode: PropTypes.func,
@@ -335,6 +339,7 @@ export default connect(({ client, common, modules, notifications, ui, menu, trad
     is_pre_appstore: client.is_pre_appstore,
     is_virtual: client.is_virtual,
     logoutClient: client.logout,
+    modal_data: traders_hub.modal_data,
     notifications_count: notifications.notifications.length,
     setDarkMode: ui.setDarkMode,
     should_allow_authentication: client.should_allow_authentication,
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 35dd83020009..6c6e31411f23 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -100,9 +100,15 @@ type TUiStore = {
     toggleCashier: () => void;
 };
 
+type TTradersHubStore = {
+    closeModal: () => void;
+    openModal: (modal_id: string, props?: any) => void;
+};
+
 export type TRootStore = {
     client: TClientStore;
     common: TCommonStore;
     ui: TUiStore;
     modules: Record<string, any>;
+    traders_hub: TTradersHubStore;
 };

From b0de604dbef4ec11f3509cc4ecd08e0626fa67d2 Mon Sep 17 00:00:00 2001
From: Bahar <bahar@regentmarkets.com>
Date: Thu, 5 Jan 2023 11:05:04 +0800
Subject: [PATCH 2/2] fix: merge_conflicts

---
 .../real/real-account-switcher.tsx            | 10 +++++++---
 .../src/components/status-badge/index.ts      |  4 ++++
 .../status-badge/status-badge.scss}           |  0
 .../components/status-badge/status-badge.tsx} | 14 ++++++++------
 packages/components/src/index.js              |  1 +
 .../curreny-selection-modal.tsx               | 19 +++++++++++++++----
 6 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 packages/components/src/components/status-badge/index.ts
 rename packages/{appstore/src/components/currency-switcher-card/real/switcher-status-badge.scss => components/src/components/status-badge/status-badge.scss} (100%)
 rename packages/{appstore/src/components/currency-switcher-card/real/switcher-status-badge.tsx => components/src/components/status-badge/status-badge.tsx} (88%)

diff --git a/packages/appstore/src/components/currency-switcher-card/real/real-account-switcher.tsx b/packages/appstore/src/components/currency-switcher-card/real/real-account-switcher.tsx
index 8e3bb2bb56a4..0c6e60a9272c 100644
--- a/packages/appstore/src/components/currency-switcher-card/real/real-account-switcher.tsx
+++ b/packages/appstore/src/components/currency-switcher-card/real/real-account-switcher.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { StatusBadge } from '@deriv/components';
 import CurrencySwitcherContainer from 'Components/containers/currency-switcher-container';
 import CurrencySwitcherLoader from 'Components/pre-loader/currency-switcher-loader';
 import { useStores } from 'Stores/index';
-import StatusBadge from './switcher-status-badge';
 import RealAccountCard from './real-account-card';
 import './real-account-switcher.scss';
 
 const AccountNeedsVerification = observer(() => {
     const { client, traders_hub } = useStores();
-    const { account_list, loginid } = client;
+    const {
+        authentication_status: { document_status },
+        account_list,
+        loginid,
+    } = client;
     const { openModal } = traders_hub;
 
     const title = account_list.find((acc: { loginid: string }) => loginid === acc.loginid).title;
@@ -24,7 +28,7 @@ const AccountNeedsVerification = observer(() => {
                 openModal('currency_selection');
             }}
         >
-            <StatusBadge />
+            <StatusBadge document_status={document_status} />
         </CurrencySwitcherContainer>
     );
 });
diff --git a/packages/components/src/components/status-badge/index.ts b/packages/components/src/components/status-badge/index.ts
new file mode 100644
index 000000000000..6b27ebe05ffb
--- /dev/null
+++ b/packages/components/src/components/status-badge/index.ts
@@ -0,0 +1,4 @@
+import StatusBadge from './status-badge';
+import './status-badge.scss';
+
+export default StatusBadge;
diff --git a/packages/appstore/src/components/currency-switcher-card/real/switcher-status-badge.scss b/packages/components/src/components/status-badge/status-badge.scss
similarity index 100%
rename from packages/appstore/src/components/currency-switcher-card/real/switcher-status-badge.scss
rename to packages/components/src/components/status-badge/status-badge.scss
diff --git a/packages/appstore/src/components/currency-switcher-card/real/switcher-status-badge.tsx b/packages/components/src/components/status-badge/status-badge.tsx
similarity index 88%
rename from packages/appstore/src/components/currency-switcher-card/real/switcher-status-badge.tsx
rename to packages/components/src/components/status-badge/status-badge.tsx
index c08cde50c89c..114d745c6264 100644
--- a/packages/appstore/src/components/currency-switcher-card/real/switcher-status-badge.tsx
+++ b/packages/components/src/components/status-badge/status-badge.tsx
@@ -2,10 +2,14 @@ import React from 'react';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores/index';
-import { Icon, Text } from '@deriv/components';
+import Icon from '../icon';
+import Text from '../text';
 import { Localize } from '@deriv/translations';
-import './switcher-status-badge.scss';
+import './status-badge.scss';
+
+type TStatusBadge = {
+    document_status: any;
+};
 
 const status_text = {
     pending: {
@@ -43,9 +47,7 @@ const status_text = {
     },
 };
 
-const StatusBadge = () => {
-    const { client } = useStores();
-    const { document_status } = client.authentication_status;
+const StatusBadge = ({ document_status }: TStatusBadge) => {
     const { text, icon } = status_text[document_status as keyof typeof status_text] ?? status_text.default;
 
     return (
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 897d7785cd21..a4eb3924a540 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -87,6 +87,7 @@ export { default as RouteWithSubroutes } from './components/route-with-subroutes
 export { default as SelectNative } from './components/select-native';
 export { default as StaticUrl } from './components/static-url';
 export { default as SendEmailTemplate } from './components/send-email-template';
+export { default as StatusBadge } from './components/status-badge';
 export { default as SwipeableWrapper } from './components/swipeable-wrapper';
 export { default as RelativeDatepicker } from './components/relative-datepicker';
 export { default as RemainingTime } from './components/remaining-time';
diff --git a/packages/core/src/App/Containers/CurrencySelectionModal/curreny-selection-modal.tsx b/packages/core/src/App/Containers/CurrencySelectionModal/curreny-selection-modal.tsx
index 1c954a70105a..ef81c5c9f396 100644
--- a/packages/core/src/App/Containers/CurrencySelectionModal/curreny-selection-modal.tsx
+++ b/packages/core/src/App/Containers/CurrencySelectionModal/curreny-selection-modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Icon, Modal, Money, Text } from '@deriv/components';
+import { Button, Icon, Modal, Money, StatusBadge, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { getCurrencyName } from '@deriv/shared';
 import { connect } from 'Stores/connect';
@@ -12,8 +12,11 @@ type CurrencySelectionModalProps = {
     //TODO: Replace the type with a proper one when ts migration cards merged
     account_list: object[];
     //TODO: Replace the type with a proper one when ts migration cards merged
+    authentication_status: any;
+    //TODO: Replace the type with a proper one when ts migration cards merged
     accounts: any;
     closeModal: () => void;
+    is_authentication_needed: boolean;
     is_visible: boolean;
     loginid: string;
     openRealAccountSignup: (account_type: string) => void;
@@ -23,8 +26,10 @@ type CurrencySelectionModalProps = {
 
 const CurrencySelectionModal = ({
     account_list,
+    authentication_status,
     accounts,
     closeModal,
+    is_authentication_needed,
     is_visible,
     loginid: current_loginid,
     openRealAccountSignup,
@@ -70,9 +75,13 @@ const CurrencySelectionModal = ({
                                     </Text>
                                 </div>
                                 <div className='currency-item-card__balance'>
-                                    <Text size='xs' color='prominent'>
-                                        <Money amount={balance} currency={currency} show_currency />
-                                    </Text>
+                                    {is_selected && selected_region === 'EU' && is_authentication_needed ? (
+                                        <StatusBadge document_status={authentication_status.document_status} />
+                                    ) : (
+                                        <Text size='xs' color='prominent'>
+                                            <Money amount={balance} currency={currency} show_currency />
+                                        </Text>
+                                    )}
                                 </div>
                             </div>
                         );
@@ -98,7 +107,9 @@ const CurrencySelectionModal = ({
 export default connect(({ client, traders_hub, ui }: RootStore) => ({
     account_list: client.account_list,
     accounts: client.accounts,
+    authentication_status: client.authentication_status,
     closeModal: traders_hub.closeModal,
+    is_authentication_needed: client.is_authentication_needed,
     loginid: client.loginid,
     openRealAccountSignup: ui.openRealAccountSignup,
     selected_region: traders_hub.selected_region,