thisyahlen/ add total assets (#6754)

* added title

* added total assets

* total assets logic real and demo

* moved to totalassets

* header preloader fix

* code refactor exchangerate

* code refactor

* isDemo fix

packages/appstore/src/components/total-assets/total-assets.scss

@@ -1,8 +1,13 @@
 .total-assets {
     display: flex;
 
+    &-amount {
+        color: var(--text-profit-success);
+    }
+
     &-currency {
         margin-left: 0.4rem;
+        color: var(--text-profit-success);
     }
 
     &-tooltip {

packages/appstore/src/components/total-assets/total-assets.tsx

@@ -1,22 +1,110 @@
-import React from 'react';
-import { Popover, Text } from '@deriv/components';
-import { localize } from '@deriv/translations';
+import { DetailsOfEachMT5Loginid, Mt5LoginList } from '@deriv/api-types';
 import { formatMoney } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import { observer } from 'mobx-react-lite';
+import { Popover, Text } from '@deriv/components';
 import { TAccountCategory } from 'Types';
+import { useStores } from 'Stores';
+import React from 'react';
 
 type TTotalAssets = {
-    amount: string;
-    currency: string;
     category: TAccountCategory;
 };
 
-const TotalAssets = ({ amount, currency, category }: TTotalAssets) => {
+const TotalAssets = ({ category }: TTotalAssets) => {
+    const { client, common } = useStores();
+    const { account_list, accounts, dxtrade_accounts_list, mt5_login_list, obj_total_balance } = client;
+    const { getExchangeRate } = common;
+
+    const [exchanged_rate_cfd_real, setExchangedRateCfdReal] = React.useState(1);
+    const [exchanged_rate_demo, setExchangedRateDemo] = React.useState(1);
+    const [exchanged_rate_cfd_demo, setExchangedRateCfdDemo] = React.useState(1);
+
+    const isDemo = (account: DetailsOfEachMT5Loginid) => account.account_type === 'demo';
+
+    const cfd_real_currency =
+        mt5_login_list.find((mt5_account: DetailsOfEachMT5Loginid) => !isDemo(mt5_account))?.currency ||
+        dxtrade_accounts_list.find((mt5_accounts: DetailsOfEachMT5Loginid) => !isDemo(mt5_accounts))?.currency;
+
+    const cfd_demo_currency =
+        mt5_login_list.find((mt5_account: DetailsOfEachMT5Loginid) => isDemo(mt5_account))?.currency ||
+        dxtrade_accounts_list.find((mt5_account: DetailsOfEachMT5Loginid) => isDemo(mt5_account))?.currency;
+
+    React.useEffect(() => {
+        const getCurrentExchangeRate = (
+            currency: string,
+            setExchangeRate: React.Dispatch<React.SetStateAction<number>>
+        ) => {
+            getExchangeRate(currency, account_total_balance_currency).then((res: number) => {
+                setExchangeRate(res);
+            });
+        };
+        if (cfd_real_currency !== account_total_balance_currency) {
+            getCurrentExchangeRate(cfd_real_currency, setExchangedRateCfdReal);
+        }
+        if (vrtc_currency !== account_total_balance_currency) {
+            getCurrentExchangeRate(vrtc_currency, setExchangedRateDemo);
+        }
+        if (cfd_demo_currency !== account_total_balance_currency) {
+            getCurrentExchangeRate(cfd_demo_currency, setExchangedRateCfdDemo);
+        }
+    }, []);
+
+    const vrtc_loginid = account_list.find((account: { is_virtual: boolean }) => account.is_virtual).loginid;
+    const vrtc_currency = accounts[vrtc_loginid] ? accounts[vrtc_loginid].currency : 'USD';
+    const account_total_balance_currency = obj_total_balance.currency;
+
+    const getTotalBalanceCfd = (mt5_accounts: Mt5LoginList, is_demo: boolean, exchange_rate: number) => {
+        return mt5_accounts
+            .filter((mt5_account: DetailsOfEachMT5Loginid) => (is_demo ? isDemo(mt5_account) : !isDemo(mt5_account)))
+            .reduce(
+                (
+                    total: {
+                        balance: number;
+                    },
+                    mt5_account: DetailsOfEachMT5Loginid
+                ) => {
+                    total.balance += (mt5_account?.balance ?? 1) * exchange_rate;
+                    return total;
+                },
+                { balance: 0 }
+            );
+    };
+
+    const getTotalDemoAssets = (): number => {
+        const vrtc_balance = accounts[vrtc_loginid] ? accounts[vrtc_loginid].balance : 0;
+        const mt5_demo_total = getTotalBalanceCfd(mt5_login_list, true, exchanged_rate_cfd_demo);
+        const dxtrade_demo_total = getTotalBalanceCfd(dxtrade_accounts_list, true, exchanged_rate_cfd_demo);
+
+        const total =
+            (vrtc_currency !== account_total_balance_currency ? vrtc_balance * exchanged_rate_demo : vrtc_balance) +
+            mt5_demo_total.balance +
+            dxtrade_demo_total.balance;
+
+        return total;
+    };
+
+    const getTotalRealAssets = (): number => {
+        const mt5_total = getTotalBalanceCfd(mt5_login_list, false, exchanged_rate_cfd_real);
+        const dxtrade_total = getTotalBalanceCfd(dxtrade_accounts_list, false, exchanged_rate_cfd_real);
+
+        let total = obj_total_balance.amount_real;
+
+        total += obj_total_balance.amount_mt5 > 0 ? obj_total_balance.amount_mt5 : mt5_total.balance;
+        total += obj_total_balance.amount_dxtrade > 0 ? obj_total_balance.amount_dxtrade : dxtrade_total.balance;
+
+        return total;
+    };
+
+    const currency = account_total_balance_currency;
+    const total_assets = category === 'real' ? getTotalRealAssets() : getTotalDemoAssets();
+
     return (
         <div className='total-assets'>
-            <Text weight='bold' className='total-assets-amount'>
-                {formatMoney(currency, amount, true)}
+            <Text weight='bold' size='m' className='total-assets-amount'>
+                {formatMoney(currency, total_assets, true)}
             </Text>
-            <Text weight='bold' className='total-assets-currency'>
+            <Text weight='bold' size='m' color='prominent' className='total-assets-currency'>
                 {currency}
             </Text>
             <div>
@@ -35,4 +123,4 @@ const TotalAssets = ({ amount, currency, category }: TTotalAssets) => {
     );
 };
 
-export default TotalAssets;
+export default observer(TotalAssets);

packages/appstore/src/modules/trading-hub/index.tsx

@@ -10,6 +10,7 @@ import { Localize, localize } from '@deriv/translations';
 import { Button } from '@deriv/components';
 import { useHistory } from 'react-router-dom';
 import { routes } from '@deriv/shared';
+import TotalAssets from 'Components/total-assets';
 
 const TradingHub = () => {
     const { ui } = useStores();
@@ -46,8 +47,12 @@ const TradingHub = () => {
 
     return (
         <React.Fragment>
-            <ToggleAccountType accountTypeChange={(event: any) => accountTypeChange(event)} value={account_type} />
-            <div className='trading-hub'>
+            <div>
+                <TotalAssets category={account_type} />
+                <ToggleAccountType accountTypeChange={(event: any) => accountTypeChange(event)} value={account_type} />
+            </div>
+
+            <div className='trading-hub__body'>
                 <CFDAccounts account_type={account_type} />
             </div>
             <Joyride

packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx

@@ -25,7 +25,6 @@ import {
 import { localize, Localize } from '@deriv/translations';
 import { getAccountTitle } from 'App/Containers/RealAccountSignup/helpers/constants';
 import { connect } from 'Stores/connect';
-import { getExchangeRate } from 'Utils/ExchangeCurrencyRate/exchange_currency_rate';
 import { AccountsItemLoader } from 'App/Components/Layout/Header/Components/Preloader';
 import AccountList from './account-switcher-account-list.jsx';
 import AccountWrapper from './account-switcher-account-wrapper.jsx';
@@ -70,7 +69,7 @@ const AccountSwitcher = props => {
 
     React.useEffect(() => {
         const getCurrentExchangeRate = (currency, setExchangeRate) => {
-            getExchangeRate(currency, account_total_balance_currency).then(res => {
+            props.getExchangeRate(currency, account_total_balance_currency).then(res => {
                 setExchangeRate(res);
             });
         };
@@ -1012,6 +1011,7 @@ AccountSwitcher.propTypes = {
     country_standpoint: PropTypes.object,
     dxtrade_accounts_list: PropTypes.array,
     dxtrade_accounts_list_error: PropTypes.string, // is this correct?
+    getExchangeRate: PropTypes.func,
     has_active_real_account: PropTypes.bool,
     has_any_real_account: PropTypes.bool,
     has_fiat: PropTypes.bool,
@@ -1071,6 +1071,7 @@ const account_switcher = withRouter(
         can_upgrade_to: client.can_upgrade_to,
         client_residence: client.residence,
         country_standpoint: client.country_standpoint,
+        getExchangeRate: common.getExchangeRate,
         is_dark_mode_on: ui.is_dark_mode_on,
         is_eu: client.is_eu,
         is_fully_authenticated: client.is_fully_authenticated,

packages/core/src/Stores/common-store.js

@@ -259,6 +259,13 @@ export default class CommonStore extends BaseStore {
         });
     };
 
+    @action.bound
+    getExchangeRate = async (from_currency, to_currency) => {
+        const { exchange_rates } = await BinarySocket.exchange_rates(from_currency);
+
+        return exchange_rates?.rates?.[to_currency];
+    };
+
     @action.bound
     routeBackInApp(history, additional_platform_path = []) {
         let route_to_item_idx = -1;

packages/core/src/sass/app/_common/components/account-switcher.scss

@@ -12,7 +12,7 @@
         position: absolute;
         top: 0;
         right: 0;
-        width: 29rem;
+        width: 30rem;
         height: 4rem;
         z-index: 2;
         background: var(--general-main-1);