From 8102a8c7844ba39d5a556f84bfdafcc2ab11938a Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Mon, 17 Oct 2022 18:05:05 +0800 Subject: [PATCH] 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 --- .../components/total-assets/total-assets.scss | 5 + .../components/total-assets/total-assets.tsx | 108 ++++++++++++++++-- .../src/modules/trading-hub/index.tsx | 9 +- .../AccountSwitcher/account-switcher.jsx | 5 +- packages/core/src/Stores/common-store.js | 7 ++ .../exchange_currency_rate.js | 7 -- .../src/Utils/ExchangeCurrencyRate/index.js | 1 - .../_common/components/account-switcher.scss | 2 +- 8 files changed, 121 insertions(+), 23 deletions(-) delete mode 100644 packages/core/src/Utils/ExchangeCurrencyRate/exchange_currency_rate.js delete mode 100644 packages/core/src/Utils/ExchangeCurrencyRate/index.js diff --git a/packages/appstore/src/components/total-assets/total-assets.scss b/packages/appstore/src/components/total-assets/total-assets.scss index 07a263d8300e..2524aeb359b3 100644 --- a/packages/appstore/src/components/total-assets/total-assets.scss +++ b/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 { diff --git a/packages/appstore/src/components/total-assets/total-assets.tsx b/packages/appstore/src/components/total-assets/total-assets.tsx index be2b8d3f9ab0..1893152500db 100644 --- a/packages/appstore/src/components/total-assets/total-assets.tsx +++ b/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> + ) => { + 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 (
- - {formatMoney(currency, amount, true)} + + {formatMoney(currency, total_assets, true)} - + {currency}
@@ -35,4 +123,4 @@ const TotalAssets = ({ amount, currency, category }: TTotalAssets) => { ); }; -export default TotalAssets; +export default observer(TotalAssets); diff --git a/packages/appstore/src/modules/trading-hub/index.tsx b/packages/appstore/src/modules/trading-hub/index.tsx index f234b51b2378..7c389e1642d4 100644 --- a/packages/appstore/src/modules/trading-hub/index.tsx +++ b/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 ( - accountTypeChange(event)} value={account_type} /> -
+
+ + accountTypeChange(event)} value={account_type} /> +
+ +
{ 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, diff --git a/packages/core/src/Stores/common-store.js b/packages/core/src/Stores/common-store.js index 0c55a1bfaef6..8518776d3439 100644 --- a/packages/core/src/Stores/common-store.js +++ b/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; diff --git a/packages/core/src/Utils/ExchangeCurrencyRate/exchange_currency_rate.js b/packages/core/src/Utils/ExchangeCurrencyRate/exchange_currency_rate.js deleted file mode 100644 index 50e78e3b1197..000000000000 --- a/packages/core/src/Utils/ExchangeCurrencyRate/exchange_currency_rate.js +++ /dev/null @@ -1,7 +0,0 @@ -import BinarySocket from '_common/base/socket_base'; - -export const getExchangeRate = async (from_currency, to_currency) => { - const { exchange_rates } = await BinarySocket.exchange_rates(from_currency); - - return exchange_rates?.rates?.[to_currency]; -}; diff --git a/packages/core/src/Utils/ExchangeCurrencyRate/index.js b/packages/core/src/Utils/ExchangeCurrencyRate/index.js deleted file mode 100644 index 3a92b58cd082..000000000000 --- a/packages/core/src/Utils/ExchangeCurrencyRate/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './exchange_currency_rate'; diff --git a/packages/core/src/sass/app/_common/components/account-switcher.scss b/packages/core/src/sass/app/_common/components/account-switcher.scss index 06eef77beed2..75c6a8034c5e 100644 --- a/packages/core/src/sass/app/_common/components/account-switcher.scss +++ b/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);