diff --git a/packages/trader/src/App/Components/Layout/Header/toggle-account-management.jsx b/packages/trader/src/App/Components/Layout/Header/toggle-account-management.jsx
index f6d3244133a7..06e1f385f954 100644
--- a/packages/trader/src/App/Components/Layout/Header/toggle-account-management.jsx
+++ b/packages/trader/src/App/Components/Layout/Header/toggle-account-management.jsx
@@ -7,6 +7,7 @@ import MenuAccordion from 'App/Components/Elements/MenuAccordion';
import Lazy from 'App/Containers/Lazy';
import UILoader from '../../Elements/ui-loader.jsx';
import Icon from 'Assets/icon.jsx';
+import { connect } from 'Stores/connect';
// Profile
const PersonalDetails = () => import('App/Containers/AccountManagementModal/Profile/personal-details.jsx');
@@ -18,13 +19,13 @@ const ProofOfIdentity = () => import('App/Containers/AccountManagementModal/Veri
// Security and Safety
const AccountLimits = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx');
-const ApiToken = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/api-token.jsx');
-const ConnectedApps = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/connected-apps.jsx');
-const DerivPassword = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/DerivPassword');
-const LoginHistory = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/login-history.jsx');
-const SelfExclusion = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/self-exclusion.jsx');
-const TwoFactorAuthentication = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/two-factor-authentication.jsx');
-const Vpn = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/vpn.jsx');
+// const ApiToken = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/api-token.jsx');
+// const ConnectedApps = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/connected-apps.jsx');
+const DerivPassword = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/DerivPassword/');
+// const LoginHistory = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/login-history.jsx');
+// const SelfExclusion = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/self-exclusion.jsx');
+// const TwoFactorAuthentication = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/two-factor-authentication.jsx');
+// const Vpn = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/vpn.jsx');
const modal_content = [
{
@@ -100,18 +101,18 @@ const modal_content = [
/>
)
},
- {
- label: localize('Self-exclusion'),
- // eslint-disable-next-line react/display-name
- value: () => (
-
- )
+ // {
+ // label: localize('Self-exclusion'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
- },
+ // },
{
label: localize('Account limits'),
// eslint-disable-next-line react/display-name
@@ -124,79 +125,102 @@ const modal_content = [
)
},
- {
- label: localize('Login history'),
- // eslint-disable-next-line react/display-name
- value: () => (
-
- )
+ // {
+ // label: localize('Login history'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
- },
- {
- label: localize('API token'),
- // eslint-disable-next-line react/display-name
- value: () => (
-
- )
+ // },
+ // {
+ // label: localize('API token'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
- },
- {
- label: localize('Connected apps'),
- // eslint-disable-next-line react/display-name
- value: () => (
-
- )
+ // },
+ // {
+ // label: localize('Connected apps'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
- },
- {
- label: localize('Two-factor authentication'),
- // eslint-disable-next-line react/display-name
- value: () => (
-
- )
+ // },
+ // {
+ // label: localize('Two-factor authentication'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
- },
- {
- label: localize('VPN'),
- // eslint-disable-next-line react/display-name
- value: () => (
-
- )
+ // },
+ // {
+ // label: localize('VPN'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
- }
+ // }
],
}
];
+const Header = ({ text, currency }) => (
+ <>
+ {currency ?
+
+
{text}
+
+ For your {currency} account
+
+
+
+ : {text}
+ }
+ >)
+
+const makeHeader = (header_text, currency) => {
+ const has_currency = header_text === 'Account limits';
+
+ if (has_currency) return
+
+ return
+}
+
class ToggleAccountManagement extends React.PureComponent {
state = {
header: modal_content[0].sub_tab_list[0].label,
};
- onChangeHeader = (header) => this.setState({ header });
+ onChangeHeader = header => this.setState({ header });
render() {
- const { disableApp, enableApp, is_open } = this.props;
+ const { disableApp, enableApp, is_open, currency } = this.props;
+ const HeaderComponent = makeHeader(this.state.header, currency);
return (
}>
@@ -207,12 +231,13 @@ class ToggleAccountManagement extends React.PureComponent {
className='account-management'
disableApp={disableApp}
enableApp={enableApp}
- header={this.state.header}
+ header={HeaderComponent}
menu_type='accordion'
modal_content={modal_content}
is_open={is_open}
title={localize('Settings')}
toggleModal={this.props.toggleModal}
+ id='account-management-modal'
>
({
+ currency : client.currency,
+ })
+)(ToggleAccountManagement);
diff --git a/packages/trader/src/App/Containers/AccountManagementModal/Components/layout-components.jsx b/packages/trader/src/App/Containers/AccountManagementModal/Components/layout-components.jsx
index 1e15caa40dc5..63c05e34ef01 100644
--- a/packages/trader/src/App/Containers/AccountManagementModal/Components/layout-components.jsx
+++ b/packages/trader/src/App/Containers/AccountManagementModal/Components/layout-components.jsx
@@ -1,17 +1,33 @@
-import React from 'react';
-import { Scrollbars } from 'tt-react-custom-scrollbars';
+import classNames from 'classnames';
+import React from 'react';
+import { Scrollbars } from 'tt-react-custom-scrollbars';
export const FormFooter = ({ children }) => (
{children}
);
export const FormBody = ({ children, scroll_offset }) => (
-
- {children}
-
+
+ {children}
+
+ );
+
+export const FormSubHeader = ({ text }) => (
+ {text}
+);
+
+export const TextContainer = ({ children }) => {children}
+
+export const Text = ({ children, size, color, className }) => (
+ {children}
);
diff --git a/packages/trader/src/App/Containers/AccountManagementModal/Profile/personal-details.jsx b/packages/trader/src/App/Containers/AccountManagementModal/Profile/personal-details.jsx
index 1536a264c571..f6453400f7d9 100644
--- a/packages/trader/src/App/Containers/AccountManagementModal/Profile/personal-details.jsx
+++ b/packages/trader/src/App/Containers/AccountManagementModal/Profile/personal-details.jsx
@@ -2,15 +2,12 @@
import React from 'react';
import { WS } from 'Services';
import { connect } from 'Stores/connect';
-import {
- Autocomplete,
- Button,
- Checkbox,
- Input,
- Form,
-} from 'deriv-components';
-import DatePicker from 'App/Components/Form/DatePicker';
-import { formatDate } from 'Utils/Date';
+import { Button } from 'deriv-components';
+// import DatePicker from 'App/Components/Form/DatePicker';
+import { Formik } from 'formik';
+import { formatDate } from 'Utils/Date';
+import Loading from '../../../../templates/app/components/loading.jsx';
+import { FormFooter, FormSubHeader } from '../Components/layout-components.jsx';
const makeSettingsRequest = (settings, residence_list) => {
let citizen = residence_list.find(location => location.text === settings.tax_residence_text).value
@@ -25,19 +22,13 @@ const makeSettingsRequest = (settings, residence_list) => {
// TODO: localize
// TODO: make dynamic
-const InputGroup = ({ children }) => {children}
-const DatepickerInput = ({ children }) => {children}
+const InputGroup = ({ children }) => {children}
+const DatepickerInput = ({ children }) => {children}
const account_opening_reasons = ['Speculative', 'Income Earning', 'Hedging'];
class PersonalDetailsForm extends React.Component {
- state = {
- date_of_birth: '',
- email: '',
- first_name: '',
- last_name: '',
- citizen: '',
- is_loading: true,
- }
+ state = { is_loading: true }
+
updateSettings = settings => {
const request = makeSettingsRequest(settings, this.props.residence_list);
WS.setSettings(request).then(() => {
@@ -47,129 +38,121 @@ class PersonalDetailsForm extends React.Component {
}
render() {
- return (div
)
- // const {
- // date_of_birth,
- // first_name,
- // last_name,
- // citizen,
- // email,
- // tax_identification_number,
- // tax_residence,
- // email_consent,
- // is_loading } = this.state
+ const {
+ date_of_birth,
+ first_name,
+ last_name,
+ citizen,
+ email,
+ tax_identification_number,
+ tax_residence,
+ email_consent,
+ is_loading } = this.state;
+
+ if (is_loading || !this.props.residence_list.length) return ;
+
+ let citizen_text = '';
+ let tax_residence_text = '';
+ if (this.props.residence_list.length) {
+ // console.log('citizen', citizen, this.props.residence_list.find(location => location.value === citizen));
+ // console.log('residence_list', this.props.residence_list);
+ // citizen_text = citizen ? this.props.residence_list.find(location => location.value === citizen).text : '';
+ // tax_residence_text = this.props.residence_list.find(location => location.value === tax_residence).text;
+ }
+ const date_of_birth_human = formatDate(date_of_birth)
- // let citizen_text = '';
- // let tax_residence_text = '';
- // if (this.props.residence_list.length && !is_loading) {
- // citizen_text = this.props.residence_list.find(location => location.value === citizen).text
- // tax_residence_text = this.props.residence_list.find(location => location.value === tax_residence).text
- // }
- // const date_of_birth_human = formatDate(date_of_birth)
- // return (
- // <>
- // {(!is_loading && this.props.residence_list.length) &&
- //
- // }
- // >
- // );
+ return (
+
+ {({
+ values,
+ errors,
+ touched,
+ handleChange,
+ handleBlur,
+ handleSubmit,
+ isSubmitting,
+ validateField,
+ }) => (
+
+ )}
+
+ )
}
componentDidMount() {
this.props.fetchResidenceList();
WS.getSettings().then((data) => {
- const {
- date_of_birth,
- first_name,
- last_name,
- citizen,
- email,
- tax_residence,
- tax_identification_number,
- email_consent } = data.get_settings;
console.log(data.get_settings);
- this.setState({
- date_of_birth,
- first_name,
- last_name,
- citizen,
- email,
- tax_identification_number,
- tax_residence,
- email_consent,
- is_loading: false
- })
+ this.setState({ ...data.get_settings, is_loading: false });
});
}
}
diff --git a/packages/trader/src/App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx b/packages/trader/src/App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx
index 89e9f18f32ce..8152a58079c1 100644
--- a/packages/trader/src/App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx
+++ b/packages/trader/src/App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx
@@ -1,10 +1,199 @@
// import PropTypes from 'prop-types';
+import classNames from 'classnames';
import React from 'react';
+import { Scrollbars } from 'tt-react-custom-scrollbars';
+import { localize } from 'App/i18n';
+import Localize from 'App/Components/Elements/localize.jsx';
+import { WS } from 'Services';
+import Loading from '../../../../templates/app/components/loading.jsx';
+import { addCommaToNumber } from '../../../Components/Elements/PositionsDrawer/helpers/positions-helper';
+import { Popover } from 'deriv-components';
+import { TextContainer, Text } from '../Components/layout-components';
+
+const display_decimals = 2;
+const makeTurnoverLimitRow = arr => (
+ <>
+ { arr &&
+ arr.map(item =>
+
+ {item.name} |
+ {addCommaToNumber(item.turnover_limit, display_decimals)} |
+
+ )
+ }
+ >
+);
+
+const TableHeader = ({ children, is_flex }) => (
+ {children} |
+);
+
+const Row = ({ children }) => (
+
+ {children}
+
+);
+
+const Td = ({ children, is_flex }) => (
+ {children} |
+);
class AccountLimits extends React.Component {
+ state = { is_loading: true }
+
+ componentDidMount() {
+ WS.getAccountLimits().then((data) => {
+ this.setState({ ...data.get_limits, is_loading: false });
+ });
+ }
+
render() {
+ const {
+ is_loading,
+ open_positions,
+ account_balance,
+ payout,
+ market_specific,
+ num_of_days_limit,
+ remainder,
+ withdrawal_since_inception_monetary } = this.state;
+
+ if (is_loading) return
+
+ const { commodities, forex, indices, volidx } = market_specific;
+
return (
- Account Limits
+
+
+
+ ,
+ ]}
+ />
+
+
+
+
+ {localize('Trading limits - item')}
+ {localize('Limit')}
+
+
+ |
+
+
+
+
+
+ {localize('*Maximum number of open positions')}
+
+ |
+ { addCommaToNumber(open_positions, 0) } |
+
+
+
+ {localize('*Maximum account cash balance')}
+
+ |
+ { addCommaToNumber(account_balance, display_decimals) } |
+
+
+
+ {localize('Maximum aggregate payouts on open positions')}
+
+ |
+ { addCommaToNumber(payout, display_decimals) } |
+
+
+
+
+ {localize('*Any limits in your Self-exclusion settings will override these default limits.')}
+
+
+
+
+
+ {localize('Trading limits - Maximum daily turnover')}
+
+
+ {localize('Limit')}
+
+
+ |
+
+
+
+ { makeTurnoverLimitRow(commodities) }
+ { makeTurnoverLimitRow(forex) }
+ { makeTurnoverLimitRow(indices) }
+ { makeTurnoverLimitRow(volidx) }
+
+
+
+
+
+ {localize('Withdrawal limits')}
+ {localize('Limit')}
+
+
+ |
+
+
+
+
+ {localize('Total withdrawal allowed')} |
+ {addCommaToNumber(num_of_days_limit, display_decimals)} |
+
+
+ {localize('Total withdrawn')} |
+ {addCommaToNumber(withdrawal_since_inception_monetary, display_decimals)} |
+
+
+ {localize('Maximum withdrawal remaining')} |
+ {addCommaToNumber(remainder, display_decimals)} |
+
+
+
+
+ {localize('Stated limits are subject to change without prior notice.')}
+
+
+
);
}
}
diff --git a/packages/trader/src/Modules/Account/Containers/account.jsx b/packages/trader/src/Modules/Account/Containers/account.jsx
index d6654214f817..fa5b5500cbe4 100644
--- a/packages/trader/src/Modules/Account/Containers/account.jsx
+++ b/packages/trader/src/Modules/Account/Containers/account.jsx
@@ -1,14 +1,200 @@
import PropTypes from 'prop-types';
import React from 'react';
+import Lazy from 'App/Containers/Lazy';
import { withRouter } from 'react-router-dom';
import { localize } from 'App/i18n';
import { FadeWrapper } from 'App/Components/Animations';
-import VerticalTab from 'App/Components/Elements/VerticalTabs/vertical-tab.jsx';
+// import VerticalTab from 'App/Components/Elements/VerticalTabs/vertical-tab.jsx';
+import MenuAccordion from 'App/Components/Elements/MenuAccordion';
import AppRoutes from 'Constants/routes';
import { connect } from 'Stores/connect';
-import 'Sass/app/modules/reports.scss';
+import 'Sass/app/modules/account.scss';
+
+// Profile
+const PersonalDetails = () => import('App/Containers/AccountManagementModal/Profile/personal-details.jsx');
+const FinancialAssessment = () => import('App/Containers/AccountManagementModal/Profile/financial-assessment.jsx');
+
+// Verification
+const ProofOfAddress = () => import('App/Containers/AccountManagementModal/Verification/proof-of-address.jsx');
+const ProofOfIdentity = () => import('App/Containers/AccountManagementModal/Verification/proof-of-identity.jsx');
+
+// Security and Safety
+const AccountLimits = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx');
+// const ApiToken = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/api-token.jsx');
+// const ConnectedApps = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/connected-apps.jsx');
+const DerivPassword = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/DerivPassword/');
+// const LoginHistory = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/login-history.jsx');
+// const SelfExclusion = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/self-exclusion.jsx');
+// const TwoFactorAuthentication = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/two-factor-authentication.jsx');
+// const Vpn = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/vpn.jsx');
+
+const modal_content = [
+ {
+ icon : 'IconUser',
+ label : localize('Profile'),
+ sub_tab_list: [
+ {
+ label: localize('Personal details'),
+ // eslint-disable-next-line react/display-name
+ value: () => (
+
+ )
+ },
+ {
+ label: localize('Financial assessment'),
+ // eslint-disable-next-line react/display-name
+ value: () => (
+
+ )
+
+ }
+ ],
+ },
+ {
+ icon : 'IconVerification',
+ label : localize('Verification'),
+ sub_tab_list: [
+ {
+ label: localize('Proof of identity'),
+ // eslint-disable-next-line react/display-name
+ value: () => (
+
+ )
+ },
+ {
+ label: localize('Proof of address'),
+ // eslint-disable-next-line react/display-name
+ value: () => (
+
+ )
+
+ }
+ ],
+ },
+ {
+ icon : 'IconSecurity',
+ label : localize('Security and safety'),
+ sub_tab_list: [
+ {
+ label: localize('Deriv password'),
+ // eslint-disable-next-line react/display-name
+ value: () => (
+
+ )
+ },
+ // {
+ // label: localize('Self-exclusion'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
+
+ // },
+ {
+ label: localize('Account limits'),
+ // eslint-disable-next-line react/display-name
+ value: () => (
+
+ )
+
+ },
+ // {
+ // label: localize('Login history'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
+
+ // },
+ // {
+ // label: localize('API token'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
+
+ // },
+ // {
+ // label: localize('Connected apps'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
+
+ // },
+ // {
+ // label: localize('Two-factor authentication'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
+
+ // },
+ // {
+ // label: localize('VPN'),
+ // // eslint-disable-next-line react/display-name
+ // value: () => (
+ //
+ // )
+
+ // }
+ ],
+ }
+];
class Account extends React.Component {
+ state = {
+ header: modal_content[0].sub_tab_list[0].label,
+ };
+
setWrapperRef = (node) => {
this.wrapper_ref = node;
};
@@ -31,6 +217,8 @@ class Account extends React.Component {
document.removeEventListener('mousedown', this.handleClickOutside);
}
+ onChangeHeader = header => this.setState({ header });
+
render () {
const menu_options = () => {
const options = [];
@@ -65,7 +253,7 @@ class Account extends React.Component {
keyname='account-page-wrapper'
>
- */}
+
diff --git a/packages/trader/src/Modules/Account/Containers/personal-details.jsx b/packages/trader/src/Modules/Account/Containers/personal-details.jsx
index 1536a264c571..fca7947e2ae4 100644
--- a/packages/trader/src/Modules/Account/Containers/personal-details.jsx
+++ b/packages/trader/src/Modules/Account/Containers/personal-details.jsx
@@ -2,15 +2,12 @@
import React from 'react';
import { WS } from 'Services';
import { connect } from 'Stores/connect';
-import {
- Autocomplete,
- Button,
- Checkbox,
- Input,
- Form,
-} from 'deriv-components';
-import DatePicker from 'App/Components/Form/DatePicker';
-import { formatDate } from 'Utils/Date';
+import { Button } from 'deriv-components';
+// import DatePicker from 'App/Components/Form/DatePicker';
+import { Formik } from 'formik';
+import { formatDate } from 'Utils/Date';
+import Loading from '../../../templates/app/components/loading.jsx';
+import { FormFooter, FormSubHeader } from '../Components/layout-components.jsx';
const makeSettingsRequest = (settings, residence_list) => {
let citizen = residence_list.find(location => location.text === settings.tax_residence_text).value
@@ -25,19 +22,13 @@ const makeSettingsRequest = (settings, residence_list) => {
// TODO: localize
// TODO: make dynamic
-const InputGroup = ({ children }) => {children}
-const DatepickerInput = ({ children }) => {children}
+const InputGroup = ({ children }) => {children}
+const DatepickerInput = ({ children }) => {children}
const account_opening_reasons = ['Speculative', 'Income Earning', 'Hedging'];
class PersonalDetailsForm extends React.Component {
- state = {
- date_of_birth: '',
- email: '',
- first_name: '',
- last_name: '',
- citizen: '',
- is_loading: true,
- }
+ state = { is_loading: true }
+
updateSettings = settings => {
const request = makeSettingsRequest(settings, this.props.residence_list);
WS.setSettings(request).then(() => {
@@ -47,129 +38,121 @@ class PersonalDetailsForm extends React.Component {
}
render() {
- return (div
)
- // const {
- // date_of_birth,
- // first_name,
- // last_name,
- // citizen,
- // email,
- // tax_identification_number,
- // tax_residence,
- // email_consent,
- // is_loading } = this.state
+ const {
+ date_of_birth,
+ first_name,
+ last_name,
+ citizen,
+ email,
+ tax_identification_number,
+ tax_residence,
+ email_consent,
+ is_loading } = this.state;
+
+ if (is_loading || !this.props.residence_list.length) return ;
+
+ let citizen_text = '';
+ let tax_residence_text = '';
+ if (this.props.residence_list.length) {
+ // console.log('citizen', citizen, this.props.residence_list.find(location => location.value === citizen));
+ // console.log('residence_list', this.props.residence_list);
+ // citizen_text = citizen ? this.props.residence_list.find(location => location.value === citizen).text : '';
+ // tax_residence_text = this.props.residence_list.find(location => location.value === tax_residence).text;
+ }
+ const date_of_birth_human = formatDate(date_of_birth)
- // let citizen_text = '';
- // let tax_residence_text = '';
- // if (this.props.residence_list.length && !is_loading) {
- // citizen_text = this.props.residence_list.find(location => location.value === citizen).text
- // tax_residence_text = this.props.residence_list.find(location => location.value === tax_residence).text
- // }
- // const date_of_birth_human = formatDate(date_of_birth)
- // return (
- // <>
- // {(!is_loading && this.props.residence_list.length) &&
- //
- // }
- // >
- // );
+ return (
+
+ {({
+ values,
+ errors,
+ touched,
+ handleChange,
+ handleBlur,
+ handleSubmit,
+ isSubmitting,
+ validateField,
+ }) => (
+
+ )}
+
+ )
}
componentDidMount() {
this.props.fetchResidenceList();
WS.getSettings().then((data) => {
- const {
- date_of_birth,
- first_name,
- last_name,
- citizen,
- email,
- tax_residence,
- tax_identification_number,
- email_consent } = data.get_settings;
console.log(data.get_settings);
- this.setState({
- date_of_birth,
- first_name,
- last_name,
- citizen,
- email,
- tax_identification_number,
- tax_residence,
- email_consent,
- is_loading: false
- })
+ this.setState({ ...data.get_settings, is_loading: false });
});
}
}
diff --git a/packages/trader/src/Services/ws-methods.js b/packages/trader/src/Services/ws-methods.js
index c31652d3cd8b..1af53cdefb1b 100644
--- a/packages/trader/src/Services/ws-methods.js
+++ b/packages/trader/src/Services/ws-methods.js
@@ -16,6 +16,9 @@ const WS = (() => {
const contractsFor = (symbol) =>
BinarySocket.send({ contracts_for: symbol });
+ const getAccountLimits = () =>
+ BinarySocket.send({ get_limits: 1 });
+
const getAccountStatus = () =>
BinarySocket.send({ get_account_status: 1 });
@@ -132,6 +135,7 @@ const WS = (() => {
buy,
cashier,
contractsFor,
+ getAccountLimits,
getAccountStatus,
getFinancialAssessment,
getSelfExclusion,
diff --git a/packages/trader/src/sass/app.scss b/packages/trader/src/sass/app.scss
index a9059a9b8a58..e76fe7295c06 100644
--- a/packages/trader/src/sass/app.scss
+++ b/packages/trader/src/sass/app.scss
@@ -45,7 +45,6 @@
@import 'app/_common/components/trade-type-info-dialog';
@import 'app/_common/components/date-picker';
@import 'app/_common/components/error-boundary';
-@import 'app/_common/components/input-group';
@import 'app/_common/components/login-prompt';
@import 'app/_common/components/market-is-closed-overlay';
@import 'app/_common/components/market-symbol-icon';
diff --git a/packages/trader/src/sass/app/_common/components/input-group.scss b/packages/trader/src/sass/app/_common/components/input-group.scss
deleted file mode 100644
index 7a13ccbca27c..000000000000
--- a/packages/trader/src/sass/app/_common/components/input-group.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.dt-input-group {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 4px;
-}
-
-.dt-datepicker-input {
- div.datepicker {
- margin: 13px 0 !important;
- }
-}
\ No newline at end of file
diff --git a/packages/trader/src/sass/app/modules/account-management.scss b/packages/trader/src/sass/app/modules/account-management.scss
index a9a6d27b7da0..3941c819f852 100644
--- a/packages/trader/src/sass/app/modules/account-management.scss
+++ b/packages/trader/src/sass/app/modules/account-management.scss
@@ -18,10 +18,10 @@
position: relative;
height: 1.4em;
margin: 0 0 1em;
+ font-size: 1.4em;
+ font-weight: bold;
&-text {
- font-size: 1.4em;
- font-weight: bold;
position: absolute;
padding: 0 8px;
@include themify($themes) {
@@ -102,6 +102,121 @@
}
}
+.account-management-modal-header {
+ display: flex;
+
+ &__icon-wrapper {
+ display: flex;
+ align-content: center;
+ font-size: 12px;
+ font-weight: normal;
+
+ span {
+ padding: 0 8px;
+ }
+ svg {
+ height: 24px;
+ width: 24px;
+ }
+ }
+}
+
+.account-management-text {
+ @include typeface(--paragraph-left-normal-black, none);
+ @include themify($themes) {
+ color: themed('text_primary_color');
+ }
+
+ &--small {
+ @include typeface(--small-left-normal-black, none);
+ }
+ &--xsmall {
+ @include typeface(--xsmall-left-normal-black, none);
+ }
+ &--grey {
+ @include themify($themes) {
+ color: themed('active_color');
+ }
+ }
+}
+
+.account-management-flex-wrapper {
+ display: flex;
+}
+
+.account-management-text-container {
+ margin-top: 12px;
+ margin-bottom: 24px;
+}
+
+.account-management-table {
+ width: 100%;
+ max-width: 546px;
+
+ thead {
+ position: relative;
+ tr {
+ padding-bottom: 8px;
+ }
+ th {
+ @include typeface(--paragraph-left-bold-black, none);
+ }
+ }
+ &__divider {
+ position: relative;
+ display: block;
+
+ th {
+ position: absolute;
+ width: 100%;
+ height: 1px;
+ left: 0px;
+ @include themify($themes) {
+ border-bottom: 1px solid themed('tab_background_color');
+ }
+ }
+ }
+ tbody {
+ tr {
+ &:not(:first-child):not(:last-child) {
+ padding: 8px 0;
+ }
+ &:first-child {
+ padding-top: 8px;
+ padding-bottom: 4px;
+ }
+ &:last-child {
+ padding-top: 4px;
+ }
+ }
+ }
+ &--last {
+ margin-top: 28px;
+ }
+}
+
+.account-limit-container {
+ margin-top: -24px;
+ height: 100%;
+ width: 100%;
+ overflow: scroll;
+
+ &__main-text {
+ margin: 16px 0;
+ }
+}
+
+.account-limit-popover {
+ display: flex;
+ align-content: center;
+ padding-left: 4px;
+}
+
+.account-limit-popover-target {
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
/**
* Deriv password
*/
diff --git a/packages/trader/src/sass/app/modules/account.scss b/packages/trader/src/sass/app/modules/account.scss
new file mode 100644
index 000000000000..ce19a6cd8616
--- /dev/null
+++ b/packages/trader/src/sass/app/modules/account.scss
@@ -0,0 +1,5 @@
+@import '../_common/base/index';
+
+.account {
+ margin: 0 16px;
+}
\ No newline at end of file