From d1da2234084da4e7f44e3640fe68a930dc59994d Mon Sep 17 00:00:00 2001
From: Sergei Baranovski <sergei@deriv.com>
Date: Tue, 6 Jun 2023 10:41:15 +0300
Subject: [PATCH] chore: change currency-switcher-account

---
 .../currency-switcher-container.tsx           | 138 +++++++++---------
 1 file changed, 71 insertions(+), 67 deletions(-)

diff --git a/packages/appstore/src/components/containers/currency-switcher-container.tsx b/packages/appstore/src/components/containers/currency-switcher-container.tsx
index 23dbe4bbd767..1fd74411e615 100644
--- a/packages/appstore/src/components/containers/currency-switcher-container.tsx
+++ b/packages/appstore/src/components/containers/currency-switcher-container.tsx
@@ -2,11 +2,9 @@ import React, { HTMLAttributes, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Icon } from '@deriv/components';
 import CurrencyIcon, { Currency } from 'Assets/svgs/currency';
-import './currency-switcher-container.scss';
-import { useStores } from 'Stores/index';
-import { observer } from 'mobx-react-lite';
-import { TRootStore } from 'Types';
+import { useStore, observer } from '@deriv/stores';
 import TradingPlatformIcon from 'Assets/svgs/trading-platform';
+import './currency-switcher-container.scss';
 
 interface CurrentSwitcherContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     actions?: ReactNode;
@@ -16,80 +14,86 @@ interface CurrentSwitcherContainerProps extends Omit<HTMLAttributes<HTMLDivEleme
     show_dropdown?: boolean;
 }
 
-const CurrentSwitcherContainer = ({
-    actions,
-    children,
-    className,
-    has_interaction = false,
-    icon,
-    title,
-    show_dropdown = true,
-    ...props
-}: CurrentSwitcherContainerProps) => {
-    const store = useStores();
-    const { client, modules, traders_hub }: TRootStore = store;
+const CurrentSwitcherContainer = observer(
+    ({
+        actions,
+        children,
+        className,
+        has_interaction = false,
+        icon,
+        title,
+        show_dropdown = true,
+        ...props
+    }: CurrentSwitcherContainerProps) => {
+        const store = useStore();
+        const { client, modules, traders_hub } = store;
 
-    const { document_status } = client.authentication_status;
-    const { is_eu_user, is_demo } = traders_hub;
-    const { current_list } = modules.cfd;
+        const { document_status } = client.authentication_status;
+        const { is_eu_user, is_demo } = traders_hub;
+        const { current_list } = modules.cfd;
 
-    const has_mf_mt5_account = Object.keys(current_list)
-        .map(key => current_list[key])
-        .some(account => account.landing_company_short === 'maltainvest');
+        const has_mf_mt5_account = Object.keys(current_list)
+            .map(key => current_list[key])
+            .some(account => account.landing_company_short === 'maltainvest');
 
-    const Dropdown = () => {
-        const icon_dropdown = (
-            <div className='currency-switcher-container__arrow' {...props}>
-                <Icon icon='IcChevronDownBold' />
-            </div>
-        );
+        const Dropdown = () => {
+            const icon_dropdown = (
+                <div
+                    data-testid='dt_currency_switcher__arrow'
+                    className='currency-switcher-container__arrow'
+                    {...props}
+                >
+                    <Icon icon='IcChevronDownBold' />
+                </div>
+            );
 
-        if ((is_eu_user && has_mf_mt5_account) || is_demo) {
-            return null;
-        }
-        return icon_dropdown;
-    };
+            if ((is_eu_user && has_mf_mt5_account) || is_demo) {
+                return null;
+            }
+            return icon_dropdown;
+        };
 
-    const CurrencyPlatformIcon = () =>
-        icon === 'Options' ? (
-            <TradingPlatformIcon icon={icon} size={32} className='currency-switcher__currency--icon' />
-        ) : (
-            <CurrencyIcon icon={icon} size={32} className='currency-switcher__currency--icon' />
-        );
+        const CurrencyPlatformIcon = () =>
+            icon === 'Options' ? (
+                <TradingPlatformIcon icon={icon} size={32} className='currency-switcher__currency--icon' />
+            ) : (
+                <CurrencyIcon icon={icon} size={32} className='currency-switcher__currency--icon' />
+            );
 
-    return (
-        <div
-            className={classNames(className, 'currency-switcher-container', {
-                'currency-switcher-container--has-interaction': has_interaction,
-            })}
-        >
-            <div className='currency-switcher-container--left'>
-                <CurrencyPlatformIcon />
-                <div
-                    className={classNames(
-                        'currency-switcher-container__content',
-                        `currency-switcher-container--${document_status || 'failed' || 'pending' || 'default'}`
-                    )}
-                >
+        return (
+            <div
+                className={classNames(className, 'currency-switcher-container', {
+                    'currency-switcher-container--has-interaction': has_interaction,
+                })}
+            >
+                <div className='currency-switcher-container--left'>
+                    <CurrencyPlatformIcon />
                     <div
                         className={classNames(
-                            'currency-switcher-container__content--text',
-                            `currency-switcher-container__content--text--${
-                                document_status || 'failed' || 'pending' || 'default'
-                            }`
+                            'currency-switcher-container__content',
+                            `currency-switcher-container--${document_status || 'failed' || 'pending' || 'default'}`
                         )}
                     >
-                        {title}
+                        <div
+                            className={classNames(
+                                'currency-switcher-container__content--text',
+                                `currency-switcher-container__content--text--${
+                                    document_status || 'failed' || 'pending' || 'default'
+                                }`
+                            )}
+                        >
+                            {title}
+                        </div>
+                        {children}
                     </div>
-                    {children}
+                </div>
+                <div className='currency-switcher-container--right'>
+                    {actions}
+                    {show_dropdown && <Dropdown />}
                 </div>
             </div>
-            <div className='currency-switcher-container--right'>
-                {actions}
-                {show_dropdown && <Dropdown />}
-            </div>
-        </div>
-    );
-};
+        );
+    }
+);
 
-export default observer(CurrentSwitcherContainer);
+export default CurrentSwitcherContainer;