Merge branch 'master' of github.com:binary-com/deriv-app into niloo/8…

…4471/ts-migration-parent

packages/appstore/package.json

@@ -33,6 +33,7 @@
         "@deriv/stores": "^1.0.0",
         "@deriv/trader": "^3.8.0",
         "@deriv/translations": "^1.0.0",
+        "@deriv/hooks": "^1.0.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
         "mobx": "^6.6.1",

packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx

@@ -3,17 +3,19 @@ import { observer } from 'mobx-react-lite';
 import { Button, Text } from '@deriv/components';
 import CurrencySwitcherContainer from 'Components/containers/currency-switcher-container';
 import BalanceText from 'Components/elements/text/balance-text';
-import { useStores } from 'Stores/index';
 import './demo-account-card.scss';
 import { localize } from '@deriv/translations';
+import { usePlatformAccounts } from '@deriv/hooks';
+import { useStore } from '@deriv/stores';
 
 const DemoAccountCard = () => {
-    const { client, traders_hub } = useStores();
-    const { accounts, loginid, resetVirtualBalance } = client;
-    const { platform_demo_balance, selected_account_type } = traders_hub;
+    const { client, traders_hub } = useStore();
+    const { accounts, loginid, resetVirtualBalance, default_currency } = client;
+    const { selected_account_type } = traders_hub;
+    const { demo: platform_demo_account } = usePlatformAccounts();
 
     const canResetBalance = () => {
-        return accounts[loginid]?.balance !== 10000;
+        return loginid && (accounts[loginid]?.balance || 0) !== 10000;
     };
 
     return (
@@ -33,7 +35,11 @@ const DemoAccountCard = () => {
                 )
             }
         >
-            <BalanceText currency={platform_demo_balance.currency} balance={platform_demo_balance.balance} size='xs' />
+            <BalanceText
+                currency={platform_demo_account?.currency || default_currency}
+                balance={platform_demo_account?.balance || 0}
+                size='xs'
+            />
         </CurrencySwitcherContainer>
     );
 };

packages/appstore/src/components/main-title-bar/asset-summary.tsx

@@ -1,71 +1,25 @@
 import React from 'react';
-import { observer } from 'mobx-react-lite';
 import { Text, Popover } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { isMobile } from '@deriv/shared';
 import BalanceText from 'Components/elements/text/balance-text';
-import { useStores } from 'Stores';
+import { observer, useStore } from '@deriv/stores';
 import './asset-summary.scss';
 import TotalAssetsLoader from 'Components/pre-loader/total-assets-loader';
+import { useTotalAccountBalance, useCfdAccounts, usePlatformAccounts } from '@deriv/hooks';
 
-const AssetSummary = () => {
-    const { traders_hub, client, common } = useStores();
-    const {
-        selected_account_type,
-        platform_real_balance,
-        cfd_demo_balance,
-        platform_demo_balance,
-        cfd_real_balance,
-        is_eu_user,
-        no_CR_account,
-        no_MF_account,
-    } = traders_hub;
-    const { is_logging_in, is_switching } = client;
-    const { getExchangeRate } = common;
-
-    const [exchanged_rate_cfd_real, setExchangedRateCfdReal] = React.useState(1);
-    const [exchanged_rate_cfd_demo, setExchangedRateCfdDemo] = React.useState(1);
-
-    React.useEffect(() => {
-        const getCurrentExchangeRate = (
-            currency: string,
-            setExchangeRate: React.Dispatch<React.SetStateAction<number>>,
-            base_currency = platform_real_balance.currency
-        ) => {
-            if (currency) {
-                getExchangeRate(currency, base_currency).then((res: number) => {
-                    setExchangeRate(res);
-                });
-            }
-        };
-
-        if (cfd_real_balance.currency !== platform_real_balance.currency) {
-            getCurrentExchangeRate(cfd_real_balance.currency, setExchangedRateCfdReal);
-        }
-        if (cfd_demo_balance.currency !== platform_demo_balance.currency) {
-            getCurrentExchangeRate(cfd_demo_balance.currency, setExchangedRateCfdDemo, platform_demo_balance.currency);
-        }
-    }, [
-        cfd_demo_balance.currency,
-        cfd_real_balance.currency,
-        getExchangeRate,
-        platform_demo_balance.currency,
-        platform_real_balance.currency,
-    ]);
-
-    const getTotalBalance = () => {
-        if (selected_account_type === 'real') {
-            return {
-                balance: platform_real_balance.balance + cfd_real_balance.balance * exchanged_rate_cfd_real,
-                currency: platform_real_balance.currency,
-            };
-        }
-
-        return {
-            balance: platform_demo_balance.balance + cfd_demo_balance.balance * exchanged_rate_cfd_demo,
-            currency: platform_demo_balance.currency,
-        };
-    };
+const AssetSummary = observer(() => {
+    const { traders_hub, client } = useStore();
+    const { selected_account_type, is_eu_user, no_CR_account, no_MF_account } = traders_hub;
+    const { is_logging_in, is_switching, default_currency } = client;
+    const { real: platform_real_accounts, demo: platform_demo_account } = usePlatformAccounts();
+    const { real: cfd_real_accounts, demo: cfd_demo_accounts } = useCfdAccounts();
+    const platform_real_balance = useTotalAccountBalance(platform_real_accounts);
+    const cfd_real_balance = useTotalAccountBalance(cfd_real_accounts);
+    const cfd_demo_balance = useTotalAccountBalance(cfd_demo_accounts);
+    const is_real = selected_account_type === 'real';
+    const real_total_balance = platform_real_balance.balance + cfd_real_balance.balance;
+    const demo_total_balance = (platform_demo_account?.balance || 0) + cfd_demo_balance.balance;
 
     const has_active_related_deriv_account = !((no_CR_account && !is_eu_user) || (no_MF_account && is_eu_user)); // if selected region is non-eu, check active cr accounts, if selected region is eu- check active mf accounts
     const eu_account = is_eu_user && !no_MF_account;
@@ -98,15 +52,19 @@ const AssetSummary = () => {
                         is_bubble_hover_enabled
                     >
                         <BalanceText
-                            currency={getTotalBalance().currency}
-                            balance={getTotalBalance().balance}
+                            currency={
+                                is_real
+                                    ? platform_real_balance.currency
+                                    : platform_demo_account?.currency || default_currency
+                            }
+                            balance={is_real ? real_total_balance : demo_total_balance}
                             underline_style='dotted'
                         />
                     </Popover>
                 </React.Fragment>
             ) : null}
         </div>
     );
-};
+});
 
-export default observer(AssetSummary);
+export default AssetSummary;

packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx

@@ -29,6 +29,7 @@ jest.mock('@deriv/shared/src/services/ws-methods', () => ({
             return Promise.resolve([...payload]);
         },
     },
+    useWS: () => undefined,
 }));
 
 jest.mock('../account-transfer-form', () => jest.fn(() => 'mockedAccountTransferForm'));

packages/components/src/components/icon/icons.js

@@ -358,6 +358,7 @@ import './common/ic-email-firewall.svg';
 import './common/ic-email-outline-new.svg';
 import './common/ic-email-outline.svg';
 import './common/ic-email-sent-dashboard.svg';
+import './common/ic-email-sent-expired.svg';
 import './common/ic-email-sent-p2p.svg';
 import './common/ic-email-sent.svg';
 import './common/ic-email-spam.svg';

packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import { Div100vhContainer, Icon, useOnClickOutside } from '@deriv/components';
+import { Div100vhContainer, Icon, useOnClickOutside, Text } from '@deriv/components';
 import { routes, isDesktop, isMobile, getActivePlatform } from '@deriv/shared';
 import { BinaryLink } from 'App/Components/Routes';
-
 import 'Sass/app/_common/components/platform-dropdown.scss';
+import { Localize } from '@deriv/translations';
+import { useHistory } from 'react-router';
 
 const PlatformBox = ({ platform: { icon, title, description } }) => (
     <React.Fragment>
@@ -24,32 +24,54 @@ const PlatformBox = ({ platform: { icon, title, description } }) => (
     </React.Fragment>
 );
 
-const PlatformDropdownContent = ({ platform, app_routing_history, hide_dropdown_items }) => {
-    return !hide_dropdown_items
-        ? (platform.link_to && (
-              <BinaryLink
-                  data-testid='dt_platform_dropdown'
-                  to={platform.link_to}
-                  // This is here because in routes-config it needs to have children, but not in menu
-                  exact={platform.link_to === routes.trade}
-                  className='platform-dropdown__list-platform'
-                  isActive={() => getActivePlatform(app_routing_history) === platform.name}
-              >
-                  <PlatformBox platform={platform} />
-              </BinaryLink>
-          )) || (
-              <a
-                  data-testid='dt_platform_dropdown_link'
-                  href={platform.href}
-                  className='platform-dropdown__list-platform'
-              >
-                  <PlatformBox platform={platform} />
-              </a>
-          )
-        : null;
+const PlatformDropdownContent = ({ platform, app_routing_history }) => {
+    return (
+        (platform.link_to && (
+            <BinaryLink
+                data-testid='dt_platform_dropdown'
+                to={platform.link_to}
+                // This is here because in routes-config it needs to have children, but not in menu
+                exact={platform.link_to === routes.trade}
+                className='platform-dropdown__list-platform'
+                isActive={() => getActivePlatform(app_routing_history) === platform.name}
+            >
+                <PlatformBox platform={platform} />
+            </BinaryLink>
+        )) || (
+            <a
+                data-testid='dt_platform_dropdown_link'
+                href={platform.href}
+                className='platform-dropdown__list-platform'
+            >
+                <PlatformBox platform={platform} />
+            </a>
+        )
+    );
 };
 
-const PlatformDropdown = ({ app_routing_history, closeDrawer, platform_config }) => {
+const PlatformDropdown = ({ app_routing_history, closeDrawer, platform_config, setTogglePlatformType }) => {
+    const history = useHistory();
+
+    const TradersHubRedirect = () => {
+        return (
+            <div className='platform-dropdown__cta'>
+                <BinaryLink
+                    onClick={() => {
+                        if (isMobile()) {
+                            history.push(routes.traders_hub);
+                            setTogglePlatformType('cfd');
+                        }
+                        history.push(routes.traders_hub);
+                    }}
+                >
+                    <Text size='xs' weight='bold' align='center' className='platform-dropdown__cta--link'>
+                        <Localize i18n_default_text="Looking for CFDs? Go to Trader's hub" />
+                    </Text>
+                </BinaryLink>
+            </div>
+        );
+    };
+
     React.useEffect(() => {
         window.addEventListener('popstate', closeDrawer);
 
@@ -70,14 +92,15 @@ const PlatformDropdown = ({ app_routing_history, closeDrawer, platform_config })
 
     const platform_dropdown = (
         <div className='platform-dropdown'>
-            <Div100vhContainer className='platform-dropdown__list' height_offset='156px' is_disabled={isDesktop()}>
+            <Div100vhContainer className='platform-dropdown__list' height_offset='15rem' is_disabled={isDesktop()}>
                 {platform_config.map(platform => {
                     return (
                         <div key={platform.name} onClick={closeDrawer} ref={ref}>
                             <PlatformDropdownContent platform={platform} app_routing_history={app_routing_history} />
                         </div>
                     );
                 })}
+                <TradersHubRedirect />
             </Div100vhContainer>
         </div>
     );
@@ -89,8 +112,4 @@ const PlatformDropdown = ({ app_routing_history, closeDrawer, platform_config })
     return ReactDOM.createPortal(platform_dropdown, document.getElementById('deriv_app'));
 };
 
-PlatformDropdown.propTypes = {
-    platform_configs: PropTypes.array,
-};
-
 export { PlatformDropdown, PlatformBox };

packages/core/src/App/Components/Layout/Header/platform-switcher.jsx

@@ -18,6 +18,7 @@ const PlatformSwitcher = ({
     is_landing_company_loaded,
     is_logged_in,
     is_logging_in,
+    setTogglePlatformType,
 }) => {
     const [is_open, setIsOpen] = React.useState(false);
 
@@ -81,6 +82,7 @@ const PlatformSwitcher = ({
                     platform_config={platform_config}
                     closeDrawer={closeDrawer}
                     app_routing_history={app_routing_history}
+                    setTogglePlatformType={setTogglePlatformType}
                 />
             </CSSTransition>
         </React.Fragment>
@@ -91,10 +93,10 @@ PlatformSwitcher.propTypes = {
     platform_config: PropTypes.array,
     toggleDrawer: PropTypes.func,
     app_routing_history: PropTypes.array,
-
     is_landing_company_loaded: PropTypes.bool,
     is_logged_in: PropTypes.bool,
     is_logging_in: PropTypes.bool,
+    setTogglePlatformType: PropTypes.func,
 };
 
 export default withRouter(PlatformSwitcher);

packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx

@@ -183,7 +183,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
     const { is_p2p_enabled } = general_store;
     const { is_payment_agent_transfer_visible } = payment_agent_transfer;
     const { is_payment_agent_visible } = payment_agent;
-    const { show_eu_related_content } = traders_hub;
+    const { show_eu_related_content, setTogglePlatformType } = traders_hub;
     const is_account_transfer_visible = useAccountTransferVisible();
     const is_onramp_visible = useOnrampVisible();
 
@@ -499,6 +499,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                                         is_logging_in={is_logging_in}
                                         platform_config={platform_config}
                                         toggleDrawer={toggleDrawer}
+                                        setTogglePlatformType={setTogglePlatformType}
                                     />
                                 </MobileDrawer.SubHeader>
                             )}