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, 'title'> { actions?: ReactNode; @@ -16,80 +14,86 @@ interface CurrentSwitcherContainerProps extends Omit { - 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 = ( -
- -
- ); + const Dropdown = () => { + const icon_dropdown = ( +
+ +
+ ); - 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' ? ( - - ) : ( - - ); + const CurrencyPlatformIcon = () => + icon === 'Options' ? ( + + ) : ( + + ); - return ( -
-
- -
+ return ( +
+
+
- {title} +
+ {title} +
+ {children}
- {children} +
+
+ {actions} + {show_dropdown && }
-
- {actions} - {show_dropdown && } -
-
- ); -}; + ); + } +); -export default observer(CurrentSwitcherContainer); +export default CurrentSwitcherContainer;