+
{icon &&
{icon}
}
diff --git a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
index 9547a6725a85..d13461c7c3e4 100644
--- a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx
@@ -4,7 +4,6 @@ import { Money, Icon, ThemedScrollbars } from '@deriv/components';
import { localize } from '@deriv/translations';
import {
epochToMoment,
- formatMoney,
toGMTFormat,
getCancellationPrice,
isAccumulatorContract,
@@ -103,11 +102,8 @@ const ContractDetails = ({ contract_end_time, contract_info, duration, duration_
id='dt_bt_label'
icon={}
label={localize('Payout per point')}
- value={
- `${formatMoney(currency, number_of_contracts, true)} ${getCurrencyDisplayCode(
- currency
- )}` || ' - '
- }
+ value={`${number_of_contracts} ${getCurrencyDisplayCode(currency)}` || ' - '}
+ should_format={!is_vanilla}
/>
)}
diff --git a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index fd0089c488a3..69ae2287e229 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -25,6 +25,7 @@ export const ValueMovement = ({
})}
currency={currency}
show_currency={show_currency}
+ should_format={!is_vanilla}
/>
)}
From 9d5033a66d4d721592fb1eb2c330b2241d6039bb Mon Sep 17 00:00:00 2001
From: maryia-matskevich-deriv
<103181650+maryia-matskevich-deriv@users.noreply.github.com>
Date: Thu, 22 Jun 2023 10:03:06 +0300
Subject: [PATCH 10/18] Maryia/bot-159/feat: send data to datadog (#8989)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: add flag bot is running or not & send to datadog all requests before & after run bot
* feat: improve with help creating single timer, refactor the code
* refactor: add forwardErrorsToLogs
* feat: add env variables to webpack.config.js
* feat: implem calc duration between user clicks the btn "run" & getting a response from proposal call
* feat: add configuration for the jest tests for bot-skelethon package
* feat: add jest tests for api middleware
* refactor: remove unneсessary config definitions
* refactor: config, defineMeasure()
* chore: trigger codecov
---
packages/bot-skeleton/jest.config.js | 19 +++
.../api/__tests__/datadog-middleware.spec.ts | 146 +++++++++++++++++
.../src/services/api/api-middleware.js | 149 ++++++++++++++++++
.../bot-skeleton/src/services/api/appId.js | 2 +
packages/bot-web-ui/package.json | 1 +
packages/bot-web-ui/src/stores/app-store.js | 13 +-
.../bot-web-ui/src/stores/run-panel-store.js | 6 +
packages/bot-web-ui/webpack.config.js | 8 +
8 files changed, 343 insertions(+), 1 deletion(-)
create mode 100644 packages/bot-skeleton/jest.config.js
create mode 100644 packages/bot-skeleton/src/services/api/__tests__/datadog-middleware.spec.ts
create mode 100644 packages/bot-skeleton/src/services/api/api-middleware.js
diff --git a/packages/bot-skeleton/jest.config.js b/packages/bot-skeleton/jest.config.js
new file mode 100644
index 000000000000..26391d325ed4
--- /dev/null
+++ b/packages/bot-skeleton/jest.config.js
@@ -0,0 +1,19 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
+module.exports = {
+ ...baseConfigForPackages,
+ clearMocks: true,
+ moduleNameMapper: {
+ '\\.s(c|a)ss$': '
/../../__mocks__/styleMock.js',
+ '^.+\\.svg$': '/../../__mocks__/styleMock.js',
+ '^Constants/(.*)$': '/src/constants/$1',
+ '^Scratch/(.*)$': '/src/scratch/$1',
+ '^Services/(.*)$': '/src/services/$1',
+ '^Utils/(.*)$': '/src/utils/$1',
+ },
+ // remove later
+ testRegex: 'packages/bot-skeleton/src/services/api/__tests__/datadog-middleware.spec.ts',
+ globals: {
+ __webpack_public_path__: '/',
+ },
+};
diff --git a/packages/bot-skeleton/src/services/api/__tests__/datadog-middleware.spec.ts b/packages/bot-skeleton/src/services/api/__tests__/datadog-middleware.spec.ts
new file mode 100644
index 000000000000..1a05a301c2c4
--- /dev/null
+++ b/packages/bot-skeleton/src/services/api/__tests__/datadog-middleware.spec.ts
@@ -0,0 +1,146 @@
+import APIMiddleware, { REQUESTS } from '../api-middleware';
+import { datadogLogs } from '@datadog/browser-logs';
+
+jest.mock('@datadog/browser-logs', () => {
+ return {
+ ...jest.requireActual('@datadog/browser-logs'),
+ datadogLogs: {
+ init: jest.fn(),
+ logger: {
+ info: jest.fn(),
+ },
+ },
+ };
+});
+
+describe('APIMiddleware', () => {
+ let api_middleware: APIMiddleware;
+ const info = jest.fn();
+ const mockMeasure = jest.fn(() => ({ startTime: 0 }));
+ const clearMarks = jest.fn();
+ const clearMeasures = jest.fn();
+ const mockSendRequestsStatistic = jest.fn();
+
+ const measure_object = {
+ name: 'time',
+ startTime: 15288.20000004768,
+ duration: 133,
+ detail: null,
+ isBotRunning: false,
+ };
+
+ beforeEach(() => {
+ Object.defineProperty(window, 'performance', {
+ value: {
+ mark: jest.fn(),
+ measure: mockMeasure,
+ getEntriesByName: jest.fn().mockReturnValue([{ name: 'entry_name' }]),
+ logger: {
+ info: jest.fn().mockReturnValue([{ measure: 'measure_name' }, measure_object]),
+ },
+ mockSendRequestsStatistic,
+ clearMeasures,
+ clearMarks,
+ },
+ });
+
+ api_middleware = new APIMiddleware();
+ });
+
+ it('Should get measure for each request, invoke method log(), clear measures', () => {
+ const spyLog = jest.spyOn(api_middleware, 'log');
+
+ api_middleware.sendRequestsStatistic(false);
+
+ REQUESTS.forEach(request_name => {
+ expect(spyLog).toHaveBeenCalledWith([{ name: 'entry_name' }], false, request_name);
+ });
+ expect(clearMeasures).toBeCalledTimes(1);
+ });
+
+ it('Should log info if measures are there', () => {
+ const datadog_logs = {
+ name: 'time',
+ startTimeDate: 15288.20000004768,
+ duration: 133,
+ detail: null,
+ isBotRunning: false,
+ };
+
+ const spyDatalogsInfo = jest.spyOn(datadogLogs.logger, 'info');
+
+ api_middleware.log([datadog_logs], false);
+
+ expect(spyDatalogsInfo).toHaveBeenCalledWith(datadog_logs.name, { ...measure_object });
+ });
+
+ it('Should not log info if measures are absent', () => {
+ api_middleware.log([], false);
+ expect(info).toBeCalledTimes(0);
+ });
+
+ it('GetRequestType', () => {
+ const spyGetRequestType = jest.spyOn(api_middleware, 'getRequestType');
+ const request_type = { authorize: 1 };
+ const result = api_middleware.getRequestType(request_type);
+ REQUESTS.forEach(type => {
+ if (type in request_type) {
+ expect(spyGetRequestType).toHaveBeenCalledWith(request_type);
+ expect(result).toBeDefined();
+ }
+ });
+ });
+
+ it('Should invoke the method defineMeasure()', async () => {
+ const spydefineMeasure = jest.spyOn(api_middleware, 'defineMeasure');
+ const response_promise = new Promise((res, rej) => res({ authorize: 1 }));
+
+ await api_middleware.sendIsCalled({ response_promise, args: [{ authorize: 1 }] });
+
+ expect(spydefineMeasure).toHaveBeenCalledWith('authorize');
+ });
+
+ describe('Define measure', () => {
+ it('Should define measure of history API call', () => {
+ const spydefineMeasure = jest.spyOn(api_middleware, 'defineMeasure');
+ const result = api_middleware.defineMeasure('history');
+
+ expect(spydefineMeasure).toHaveBeenCalledWith('history');
+ expect(mockMeasure).toHaveBeenCalledWith('ticks_history', 'ticks_history_start', 'ticks_history_end');
+ expect(result).toBeDefined();
+ });
+
+ it('Should define measure of proposal API call', () => {
+ const spydefineMeasure = jest.spyOn(api_middleware, 'defineMeasure');
+
+ const result = api_middleware.defineMeasure('proposal');
+
+ expect(spydefineMeasure).toHaveBeenCalledWith('proposal');
+ expect(mockMeasure).toHaveBeenCalledWith('run-proposal', 'bot-start', 'first_proposal_end');
+ expect(clearMarks).toBeCalledTimes(1);
+ expect(result).toBeDefined();
+ });
+
+ it('Should define measure for API calls except of proposal and history', () => {
+ const spydefineMeasure = jest.spyOn(api_middleware, 'defineMeasure');
+
+ REQUESTS.forEach(request_name => {
+ if (request_name !== 'proposal' && request_name !== 'history') {
+ const result = api_middleware.defineMeasure(request_name);
+ expect(spydefineMeasure).toHaveBeenCalledWith(request_name);
+ expect(mockMeasure).toHaveBeenCalledWith(
+ `${request_name}`,
+ `${request_name}_start`,
+ `${request_name}_end`
+ );
+ expect(result).toBeDefined();
+ }
+ });
+ });
+ });
+
+ it('Should be added the method sendRequestsStatistic to window', () => {
+ expect(window).not.toBeUndefined();
+ expect(mockSendRequestsStatistic).not.toBeUndefined();
+ });
+});
diff --git a/packages/bot-skeleton/src/services/api/api-middleware.js b/packages/bot-skeleton/src/services/api/api-middleware.js
new file mode 100644
index 000000000000..595a2bf427ef
--- /dev/null
+++ b/packages/bot-skeleton/src/services/api/api-middleware.js
@@ -0,0 +1,149 @@
+import { datadogLogs } from '@datadog/browser-logs';
+import { formatDate, formatTime } from '@deriv/shared';
+
+const DATADOG_CLIENT_TOKEN = process.env.DATADOG_CLIENT_TOKEN ?? '';
+const isProduction = process.env.CIRCLE_JOB === 'release_production';
+const isStaging = process.env.CIRCLE_JOB === 'release_staging';
+
+let dataDogSessionSampleRate = 0;
+let dataDogVersion = '';
+let dataDogEnv = '';
+
+if (isProduction) {
+ dataDogVersion = `deriv-app-${process.env.CIRCLE_TAG}`;
+ dataDogSessionSampleRate = +process.env.DATADOG_SESSION_SAMPLE_RATE ?? 10;
+ dataDogEnv = 'production';
+} else if (isStaging) {
+ dataDogVersion = `deriv-app-staging-v${formatDate(new Date(), 'YYYYMMDD')}-${formatTime(Date.now(), 'HH:mm')}`;
+ dataDogSessionSampleRate = 100;
+ dataDogEnv = 'staging';
+}
+
+datadogLogs.init({
+ clientToken: DATADOG_CLIENT_TOKEN,
+ site: 'datadoghq.eu',
+ forwardErrorsToLogs: false,
+ service: 'Dbot',
+ sessionSampleRate: dataDogSessionSampleRate,
+ version: dataDogVersion,
+ env: dataDogEnv,
+});
+
+export const REQUESTS = [
+ 'authorize',
+ 'balance',
+ 'active_symbols',
+ 'transaction',
+ 'ticks_history',
+ 'forget',
+ 'proposal_open_contract',
+ 'proposal',
+ 'buy',
+ 'exchange_rates',
+ 'trading_times',
+ 'time',
+ 'get_account_status',
+ 'get_settings',
+ 'payout_currencies',
+ 'website_status',
+ 'get_financial_assessment',
+ 'mt5_login_list',
+ 'get_self_exclusion',
+ 'landing_company',
+ 'get_limits',
+ 'paymentagent_list',
+ 'platform',
+ 'trading_platform_available_accounts',
+ 'trading_platform_accounts',
+ 'statement',
+ 'landing_company_details',
+ 'contracts_for',
+ 'residence_list',
+ 'account_security',
+ 'p2p_advertiser_info',
+ 'platform',
+ 'history',
+ 'amount',
+ 'run-proposal',
+];
+
+class APIMiddleware {
+ constructor(config) {
+ this.config = config;
+ this.debounced_calls = {};
+ this.addGlobalMethod();
+ }
+
+ getRequestType = request => {
+ let req_type;
+ REQUESTS.forEach(type => {
+ if (type in request && !req_type) req_type = type;
+ });
+
+ return req_type;
+ };
+
+ log = (measures = [], is_bot_running) => {
+ if (measures && measures.length) {
+ measures.forEach(measure => {
+ datadogLogs.logger.info(measure.name, {
+ name: measure.name,
+ startTime: measure.startTimeDate,
+ duration: measure.duration,
+ detail: measure.detail,
+ isBotRunning: is_bot_running,
+ });
+ });
+ }
+ };
+
+ defineMeasure = res_type => {
+ if (res_type) {
+ let measure;
+ if (res_type === 'proposal') {
+ performance.mark('first_proposal_end');
+ if (performance.getEntriesByName('bot-start', 'mark').length) {
+ measure = performance.measure('run-proposal', 'bot-start', 'first_proposal_end');
+ performance.clearMarks('bot-start');
+ }
+ }
+ if (res_type === 'history') {
+ performance.mark('ticks_history_end');
+ measure = performance.measure('ticks_history', 'ticks_history_start', 'ticks_history_end');
+ } else {
+ performance.mark(`${res_type}_end`);
+ measure = performance.measure(`${res_type}`, `${res_type}_start`, `${res_type}_end`);
+ }
+ return (measure.startTimeDate = new Date(Date.now() - measure.startTime));
+ }
+ return false;
+ };
+
+ sendIsCalled = ({ response_promise, args: [request] }) => {
+ const req_type = this.getRequestType(request);
+ if (req_type) performance.mark(`${req_type}_start`);
+ response_promise.then(res => {
+ const res_type = this.getRequestType(res);
+ if (res_type) {
+ this.defineMeasure(res_type);
+ }
+ });
+ return response_promise;
+ };
+
+ sendRequestsStatistic = is_bot_running => {
+ REQUESTS.forEach(req_type => {
+ const measure = performance.getEntriesByName(req_type);
+ if (measure && measure.length) {
+ this.log(measure, is_bot_running, req_type);
+ }
+ });
+ performance.clearMeasures();
+ };
+
+ addGlobalMethod() {
+ if (window) window.sendRequestsStatistic = this.sendRequestsStatistic;
+ }
+}
+
+export default APIMiddleware;
diff --git a/packages/bot-skeleton/src/services/api/appId.js b/packages/bot-skeleton/src/services/api/appId.js
index e56a9931fbea..d745eaedda9f 100644
--- a/packages/bot-skeleton/src/services/api/appId.js
+++ b/packages/bot-skeleton/src/services/api/appId.js
@@ -1,12 +1,14 @@
import DerivAPIBasic from '@deriv/deriv-api/dist/DerivAPIBasic';
import { getAppId, getSocketURL, website_name } from '@deriv/shared';
import { getLanguage } from '@deriv/translations';
+import APIMiddleware from './api-middleware';
export const generateDerivApiInstance = () => {
const socket_url = `wss://${getSocketURL()}/websockets/v3?app_id=${getAppId()}&l=${getLanguage()}&brand=${website_name.toLowerCase()}`;
const deriv_socket = new WebSocket(socket_url);
const deriv_api = new DerivAPIBasic({
connection: deriv_socket,
+ middleware: new APIMiddleware({}),
});
return deriv_api;
};
diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json
index c2e9dc401c09..6456cc12b46b 100644
--- a/packages/bot-web-ui/package.json
+++ b/packages/bot-web-ui/package.json
@@ -67,6 +67,7 @@
"webpack-cli": "^4.7.2"
},
"dependencies": {
+ "@datadog/browser-logs": "^4.36.0",
"@deriv/bot-skeleton": "^1.0.0",
"@deriv/components": "^1.0.0",
"@deriv/deriv-charts": "1.2.2",
diff --git a/packages/bot-web-ui/src/stores/app-store.js b/packages/bot-web-ui/src/stores/app-store.js
index 80f03c5e6e91..442359df96e9 100644
--- a/packages/bot-web-ui/src/stores/app-store.js
+++ b/packages/bot-web-ui/src/stores/app-store.js
@@ -23,11 +23,18 @@ export default class AppStore {
this.core = core;
this.dbot_store = null;
this.api_helpers_store = null;
+ this.timer = null;
}
onMount() {
- const { blockly_store } = this.root_store;
+ const { blockly_store, run_panel } = this.root_store;
const { client, common } = this.core;
+
+ this.timer = setInterval(() => {
+ window.sendRequestsStatistic(run_panel?.is_running);
+ performance.clearMeasures();
+ }, 10000);
+
this.showDigitalOptionsMaltainvestError(client, common);
blockly_store.setLoading(true);
@@ -78,6 +85,10 @@ export default class AppStore {
ui.setAccountSwitcherDisabledMessage(false);
ui.setPromptHandler(false);
+
+ if (this.timer) clearInterval(this.timer);
+ window.sendRequestsStatistic(false);
+ performance.clearMeasures();
}
onBeforeUnload = event => {
diff --git a/packages/bot-web-ui/src/stores/run-panel-store.js b/packages/bot-web-ui/src/stores/run-panel-store.js
index 7f2902308324..e4f53be5f6da 100644
--- a/packages/bot-web-ui/src/stores/run-panel-store.js
+++ b/packages/bot-web-ui/src/stores/run-panel-store.js
@@ -147,6 +147,10 @@ export default class RunPanelStore {
}
async onRunButtonClick() {
+ performance.mark('bot-start');
+
+ window.sendRequestsStatistic(false);
+ performance.clearMeasures();
const { summary_card, route_prompt_dialog, self_exclusion } = this.root_store;
const { client, ui } = this.core;
const is_ios = mobileOSDetect() === 'iOS';
@@ -230,6 +234,8 @@ export default class RunPanelStore {
if (this.error_type) {
this.error_type = undefined;
}
+ window.sendRequestsStatistic(true);
+ performance.clearMeasures();
}
onClearStatClick() {
diff --git a/packages/bot-web-ui/webpack.config.js b/packages/bot-web-ui/webpack.config.js
index 4b25cddd325a..473580b22df5 100644
--- a/packages/bot-web-ui/webpack.config.js
+++ b/packages/bot-web-ui/webpack.config.js
@@ -119,6 +119,14 @@ module.exports = function (env) {
'process.env.GD_CLIENT_ID': JSON.stringify(process.env.GD_CLIENT_ID),
'process.env.GD_API_KEY': JSON.stringify(process.env.GD_API_KEY),
'process.env.GD_APP_ID': JSON.stringify(process.env.GD_APP_ID),
+ 'process.env.DATADOG_APPLICATION_ID': JSON.stringify(process.env.DATADOG_APPLICATION_ID),
+ 'process.env.DATADOG_CLIENT_TOKEN': JSON.stringify(process.env.DATADOG_CLIENT_TOKEN),
+ 'process.env.DATADOG_SESSION_REPLAY_SAMPLE_RATE': JSON.stringify(
+ process.env.DATADOG_SESSION_REPLAY_SAMPLE_RATE
+ ),
+ 'process.env.DATADOG_SESSION_SAMPLE_RATE': JSON.stringify(process.env.DATADOG_SESSION_SAMPLE_RATE),
+ 'process.env.CIRCLE_TAG': JSON.stringify(process.env.CIRCLE_TAG),
+ 'process.env.CIRCLE_JOB': JSON.stringify(process.env.CIRCLE_JOB),
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
From 1b9467a60eff853aa98736bdfe92a9d6ee8e193c Mon Sep 17 00:00:00 2001
From: Sui Sin <103026762+suisin-deriv@users.noreply.github.com>
Date: Thu, 22 Jun 2023 15:05:23 +0800
Subject: [PATCH 11/18] chore: solve broken page redirect from error msg
(#8609)
Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
---
.../Containers/RealAccountSignup/real-account-signup.jsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx b/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx
index 125580a2ca35..51acaa22d6fe 100644
--- a/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx
+++ b/packages/core/src/App/Containers/RealAccountSignup/real-account-signup.jsx
@@ -213,7 +213,7 @@ const RealAccountSignup = ({
local_props.state_value.error_message || local_props.state_value.error_code?.message_to_client
}
code={local_props.state_value.error_code}
- onConfirm={onErrorConfirm}
+ onConfirm={() => onErrorConfirm(local_props.state_value.error_code)}
/>
),
title: () => localize('Add a real account'),
@@ -421,10 +421,10 @@ const RealAccountSignup = ({
redirectToLegacyPlatform();
};
- const onErrorConfirm = () => {
+ const onErrorConfirm = err_code => {
setParams({
active_modal_index:
- current_action === 'multi'
+ current_action === 'multi' || err_code === 'CurrencyTypeNotAllowed'
? modal_pages_indices.add_or_manage_account
: modal_pages_indices.account_wizard,
});
From 17da2ce819365bdd1b6aa492bb70ba0c5f40394a Mon Sep 17 00:00:00 2001
From: Akmal Djumakhodjaev
Date: Thu, 22 Jun 2023 15:07:30 +0800
Subject: [PATCH 12/18] Akmal / feat: vanilla options content update and UI
changes (#8941)
* feat: vanilla options content update and UI changes
* chore: remove console logs
* fix: add missing expiry epoch
* fix: update expiry date on mobile without proposal response
* fix: circle ci warning
* feat: remove vanilla stake tooltip from mobile
* fix: resolve post merge issues
* fix: remove unused variables
* fix: containt tooltip within smaller screens
* fix: change max width of content
* fix: expiry date label bugs
* fix: remove unused imports
* feat: trigger vercel
---
.../Form/Purchase/contract-info.jsx | 18 +-----
.../Duration/advanced-duration.jsx | 18 ++++--
.../TradeParams/Duration/duration-mobile.jsx | 57 ++++++++++++++-----
.../TradeParams/Duration/duration-wrapper.jsx | 24 ++++----
.../Form/TradeParams/Duration/duration.jsx | 18 +++---
.../Form/TradeParams/Duration/expiry-text.jsx | 22 +++++++
.../Components/Form/TradeParams/amount.jsx | 4 --
.../Components/Form/TradeParams/strike.jsx | 6 +-
.../Trading/Containers/strike-param-modal.jsx | 6 +-
.../Containers/trade-params-mobile.jsx | 33 ++---------
.../src/Stores/Modules/Trading/trade-store.js | 7 ++-
.../src/sass/app/modules/trading-mobile.scss | 6 +-
.../trader/src/sass/app/modules/trading.scss | 12 +++-
13 files changed, 136 insertions(+), 95 deletions(-)
create mode 100644 packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/expiry-text.jsx
diff --git a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index 69ae2287e229..b33394dea8b3 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -87,12 +87,7 @@ const ContractInfo = ({
if (['VANILLALONGCALL', 'VANILLALONGPUT'].includes(type)) {
return (
]}
- values={{
- trade_type: type === 'VANILLALONGCALL' ? localize('above') : localize('below'),
- title: type === 'VANILLALONGCALL' ? localize('Call') : localize('Put'),
- }}
+ i18n_default_text='The payout at expiry is equal to the payout per point multiplied by the difference between the final price and the strike price.'
/>
);
}
@@ -163,16 +158,7 @@ const ContractInfo = ({
zIndex={9999}
message={
]}
- values={{
- trade_type:
- type === 'VANILLALONGCALL'
- ? localize('above')
- : localize('below'),
- title:
- type === 'VANILLALONGCALL' ? localize('Call') : localize('Put'),
- }}
+ i18n_default_text='The payout at expiry is equal to the payout per point multiplied by the difference between the final price and the strike price.'
/>
}
/>
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
index 1fea7a11d937..2d52cecf4291 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
@@ -7,6 +7,7 @@ import { toMoment, hasIntradayDurationUnit } from '@deriv/shared';
import RangeSlider from 'App/Components/Form/RangeSlider';
import TradingDatePicker from '../../DatePicker';
import TradingTimePicker from '../../TimePicker';
+import ExpiryText from './expiry-text.jsx';
import { observer, useStore } from '@deriv/stores';
import { useTraderStore } from 'Stores/useTraderStores';
@@ -14,13 +15,14 @@ const AdvancedDuration = observer(
({
advanced_duration_unit,
advanced_expiry_type,
- duration_units_list,
- duration_t,
changeDurationUnit,
- getDurationFromUnit,
+ duration_t,
+ duration_units_list,
expiry_date,
+ expiry_epoch,
expiry_list,
expiry_type,
+ getDurationFromUnit,
number_input_props,
onChange,
onChangeUiStore,
@@ -30,7 +32,7 @@ const AdvancedDuration = observer(
}) => {
const { ui } = useStore();
const { current_focus, setCurrentFocus } = ui;
- const { contract_expiry_type, validation_errors } = useTraderStore();
+ const { contract_expiry_type, is_vanilla, validation_errors } = useTraderStore();
let is_24_hours_contract = false;
@@ -52,6 +54,8 @@ const AdvancedDuration = observer(
onChangeUiStore({ name, value });
};
+ const has_error = !!validation_errors?.duration?.length;
+
return (
<>
{expiry_list.length > 1 && (
@@ -92,6 +96,9 @@ const AdvancedDuration = observer(
is_24_hours_contract={is_24_hours_contract}
/>
)}
+ {advanced_duration_unit === 'd' && is_vanilla && (
+
+ )}
{advanced_duration_unit !== 't' && advanced_duration_unit !== 'd' && (
// validation_errors={validation_errors.end_time} TODO: add validation_errors for end time
}
+ {!is_24_hours_contract && is_vanilla && (
+
+ )}
)}
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx
index d6622b27a3ad..c53ae8a02a1c 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration-mobile.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Tabs, TickPicker, Numpad, RelativeDatepicker } from '@deriv/components';
+import { Tabs, TickPicker, Numpad, RelativeDatepicker, Text } from '@deriv/components';
import { isEmptyObject, addComma, getDurationMinMaxValues } from '@deriv/shared';
import { Localize, localize } from '@deriv/translations';
@@ -90,16 +90,19 @@ const Ticks = observer(
const Numbers = observer(
({
- setDurationError,
basis_option,
- toggleModal,
+ contract_expiry = 'intraday',
duration_unit_option,
+ duration_values,
+ expiry_epoch,
has_amount_error,
- contract_expiry = 'intraday',
+ is_vanilla,
payout_value,
- stake_value,
selected_duration,
+ setDurationError,
setSelectedDuration,
+ stake_value,
+ toggleModal,
}) => {
const { ui } = useStore();
const { addToast } = ui;
@@ -113,6 +116,7 @@ const Numbers = observer(
} = useTraderStore();
const { value: duration_unit } = duration_unit_option;
const [min, max] = getDurationMinMaxValues(duration_min_max, contract_expiry, duration_unit);
+ const [has_error, setHasError] = React.useState(false);
const validateDuration = value => {
const localized_message = (
@@ -127,17 +131,21 @@ const Numbers = observer(
if (parseInt(value) < min || parseInt(selected_duration) > max) {
addToast({ key: 'duration_error', content: localized_message, type: 'error', timeout: 2000 });
setDurationError(true);
+ setHasError(true);
return 'error';
} else if (parseInt(value) > max) {
addToast({ key: 'duration_error', content: localized_message, type: 'error', timeout: 2000 });
+ setHasError(true);
return 'error';
} else if (value.toString().length < 1) {
addToast({ key: 'duration_error', content: localized_message, type: 'error', timeout: 2000 });
setDurationError(true);
+ setHasError(true);
return false;
}
setDurationError(false);
+ setHasError(false);
return true;
};
@@ -158,6 +166,16 @@ const Numbers = observer(
toggleModal();
};
+ const setExpiryDate = (epoch, duration) => {
+ let expiry_date = new Date((epoch - (trade_duration * 24 * 60 * 60)) * 1000);
+
+ if (duration) {
+ expiry_date = new Date(expiry_date.getTime() + (duration) * 24 * 60 * 60 * 1000);
+ }
+
+ return expiry_date.toUTCString().replace('GMT', 'GMT +0').substring(5).replace(/(\d{2}) (\w{3} \d{4})/, '$1 $2,');
+ }
+
const onNumberChange = num => {
setSelectedDuration(duration_unit, num);
validateDuration(num);
@@ -165,6 +183,14 @@ const Numbers = observer(
return (
+ {is_vanilla && (
+
+
+
+ )}
{
const { duration_units_list, duration_min_max, duration_unit, basis: trade_basis } = useTraderStore();
const duration_values = {
@@ -315,6 +343,9 @@ const Duration = observer(
setSelectedDuration={setSelectedDuration}
stake_value={stake_value}
payout_value={payout_value}
+ expiry_epoch={expiry_epoch}
+ is_vanilla={is_vanilla}
+ duration_values={duration_values}
/>
{
duration_min_max,
expiry_type,
expiry_date,
+ expiry_epoch,
expiry_time,
start_date,
market_open_times,
@@ -34,26 +35,27 @@ const DurationWrapper = observer(() => {
} = useTraderStore();
const duration_props = {
- advanced_expiry_type,
advanced_duration_unit,
- getDurationFromUnit,
- is_advanced_duration,
- onChangeUiStore,
- simple_duration_unit,
+ advanced_expiry_type,
contract_expiry_type,
- duration,
- duration_unit,
+ contract_type,
+ duration_min_max,
duration_t,
+ duration_unit,
duration_units_list,
- duration_min_max,
- expiry_type,
+ duration,
expiry_date,
+ expiry_epoch,
expiry_time,
- start_date,
+ expiry_type,
+ getDurationFromUnit,
+ is_advanced_duration,
market_open_times,
onChange,
onChangeMultiple,
- contract_type,
+ onChangeUiStore,
+ simple_duration_unit,
+ start_date,
};
const hasDurationUnit = (duration_type, is_advanced) => {
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration.jsx
index 3cac13bb55ac..82eec441f0a0 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration.jsx
@@ -14,27 +14,28 @@ import SimpleDuration from './simple-duration.jsx';
const Duration = ({
advanced_duration_unit,
advanced_expiry_type,
- duration,
+ contract_type,
+ duration_t,
duration_unit,
duration_units_list,
- duration_t,
+ duration,
expiry_date,
+ expiry_epoch,
expiry_time,
expiry_type,
getDurationFromUnit,
hasDurationUnit,
is_advanced_duration,
is_minimized,
- min_value,
+ market_open_times,
max_value,
+ min_value,
onChange,
- onChangeUiStore,
onChangeMultiple,
- simple_duration_unit,
+ onChangeUiStore,
server_time,
+ simple_duration_unit,
start_date,
- market_open_times,
- contract_type,
}) => {
React.useEffect(() => {
if (contract_type === 'vanilla') {
@@ -163,12 +164,13 @@ const Duration = ({
<>
{is_advanced_duration && (
{
+ const formatted_date =
+ expiry_epoch && !has_error
+ ? new Date(expiry_epoch * 1000)
+ .toUTCString()
+ .replace('GMT', 'GMT +0')
+ .substring(5)
+ .replace(/(\d{2}) (\w{3} \d{4})/, '$1 $2,')
+ : '';
+
+ return (
+
+
+
+ );
+};
+
+export default ExpiryText;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.jsx
index 8432a61225e1..978d26394d8d 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.jsx
@@ -99,10 +99,6 @@ const Amount = observer(({ is_minimized, is_nativepicker }) => {
return (
);
- } else if (contract_type === 'vanilla') {
- return (
-
- );
}
return null;
};
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/strike.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/strike.jsx
index e7a894956939..3190606654e9 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/strike.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/strike.jsx
@@ -75,13 +75,13 @@ const Strike = observer(() => {
header={localize('Strike price')}
header_tooltip={
]}
values={{
trade_type:
vanilla_trade_type === 'VANILLALONGCALL'
- ? localize('For Call')
- : localize('For Put'),
+ ? localize('Call')
+ : localize('Put'),
payout_status:
vanilla_trade_type === 'VANILLALONGCALL' ? localize('above') : localize('below'),
}}
diff --git a/packages/trader/src/Modules/Trading/Containers/strike-param-modal.jsx b/packages/trader/src/Modules/Trading/Containers/strike-param-modal.jsx
index a83225974255..435dc5a80bda 100644
--- a/packages/trader/src/Modules/Trading/Containers/strike-param-modal.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/strike-param-modal.jsx
@@ -24,13 +24,13 @@ const StrikeParamModal = ({ is_open, toggleModal, strike, onChange, name, strike
is_bubble_hover_enabled
message={
]}
values={{
trade_type:
vanilla_trade_type === 'VANILLALONGCALL'
- ? localize('For Call')
- : localize('For Put'),
+ ? localize('Call')
+ : localize('Put'),
payout_status:
vanilla_trade_type === 'VANILLALONGCALL' ? localize('above') : localize('below'),
}}
diff --git a/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.jsx b/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.jsx
index 382cb95b7e0b..8a5873c816a9 100644
--- a/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.jsx
@@ -1,6 +1,6 @@
import 'Sass/app/modules/trading-mobile.scss';
-import { Div100vhContainer, Modal, Money, Tabs, ThemedScrollbars, usePreventIOSZoom, Popover } from '@deriv/components';
+import { Div100vhContainer, Modal, Money, Tabs, ThemedScrollbars, usePreventIOSZoom } from '@deriv/components';
import AmountMobile from 'Modules/Trading/Components/Form/TradeParams/amount-mobile.jsx';
import Barrier from 'Modules/Trading/Components/Form/TradeParams/barrier.jsx';
@@ -10,7 +10,7 @@ import { observer, useStore } from '@deriv/stores';
import { useTraderStore } from 'Stores/useTraderStores';
import React from 'react';
import classNames from 'classnames';
-import { localize, Localize } from '@deriv/translations';
+import { localize } from '@deriv/translations';
const DEFAULT_DURATION = Object.freeze({
t: 5,
@@ -34,7 +34,7 @@ const TradeParamsModal = observer(({ is_open, toggleModal }) => {
const { client, ui } = useStore();
const { currency } = client;
const { enableApp, disableApp } = ui;
- const { amount, form_components, duration, duration_unit, duration_units_list, is_vanilla } = useTraderStore();
+ const { amount, form_components, duration, duration_unit, duration_units_list } = useTraderStore();
// eslint-disable-next-line react-hooks/exhaustive-deps
const getDefaultDuration = React.useCallback(makeGetDefaultDuration(duration, duration_unit), []);
@@ -91,28 +91,6 @@ const TradeParamsModal = observer(({ is_open, toggleModal }) => {
const isVisible = component_key => form_components.includes(component_key);
- const setTooltipContent = () => {
- if (is_vanilla && state.trade_param_tab_idx === 1)
- return (
-
-
- }
- classNameWrapper='trade-params--modal-wrapper'
- classNameBubble='trade-params--modal-wrapper__content--vanilla'
- />
-
)}
diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js
index 96d4fa4a9086..ca21fb40b129 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.js
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js
@@ -78,10 +78,11 @@ export default class TradeStore extends BaseStore {
// Duration
duration = 5;
+ duration_min_max = {};
duration_unit = '';
duration_units_list = [];
- duration_min_max = {};
expiry_date = '';
+ expiry_epoch = '';
expiry_time = '';
expiry_type = 'duration';
@@ -223,6 +224,7 @@ export default class TradeStore extends BaseStore {
duration: observable,
expiration: observable,
expiry_date: observable,
+ expiry_epoch: observable,
expiry_time: observable,
expiry_type: observable,
form_components: observable,
@@ -265,8 +267,8 @@ export default class TradeStore extends BaseStore {
strike_price_choices: observable,
symbol: observable,
take_profit: observable,
- ticks_history_stats: observable,
tick_size_barrier: observable,
+ ticks_history_stats: observable,
trade_types: observable,
accountSwitcherListener: action.bound,
barrier_pipsize: computed,
@@ -1130,6 +1132,7 @@ export default class TradeStore extends BaseStore {
// add/update expiration or date_expiry for crypto indices from proposal
const date_expiry = response.proposal?.date_expiry;
+ this.expiry_epoch = date_expiry || this.expiry_epoch;
if (!response.error && !!date_expiry && this.is_crypto_multiplier) {
this.expiration = date_expiry;
diff --git a/packages/trader/src/sass/app/modules/trading-mobile.scss b/packages/trader/src/sass/app/modules/trading-mobile.scss
index a587d08e0e5c..ffa70084d1fc 100644
--- a/packages/trader/src/sass/app/modules/trading-mobile.scss
+++ b/packages/trader/src/sass/app/modules/trading-mobile.scss
@@ -256,11 +256,11 @@
&__amount {
&-keypad {
width: 100%;
- padding: 1.6rem;
+ padding: 2.4rem 1.6rem 1.6rem;
height: auto;
- margin-top: 0.8rem;
margin-bottom: 0.8rem;
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
@@ -511,7 +511,7 @@
left: 2.4rem !important;
&__content {
- max-width: 32.8rem;
+ max-width: calc(min(32.8rem, 85vw));
left: 2.5rem;
&--vanilla {
top: -0.9rem;
diff --git a/packages/trader/src/sass/app/modules/trading.scss b/packages/trader/src/sass/app/modules/trading.scss
index 94070d4292cd..7aaaaec72b4a 100644
--- a/packages/trader/src/sass/app/modules/trading.scss
+++ b/packages/trader/src/sass/app/modules/trading.scss
@@ -342,7 +342,7 @@
&-modal {
@include mobile {
&--vanilla {
- max-width: 33rem;
+ max-width: calc(min(33rem, 85vw));
}
}
}
@@ -781,6 +781,16 @@
}
}
+.expiry-text-container {
+ margin-top: 0.4rem;
+
+ &--mobile {
+ margin: 0 0 0.8rem;
+ position: relative;
+ top: -0.8rem;
+ }
+}
+
/** @define dc-collapsible */
@include mobile {
.dc-collapsible {
From 3f65a9ff17628c0e31e5dbb15be3dc7cb824deda Mon Sep 17 00:00:00 2001
From: henry-deriv <118344354+henry-deriv@users.noreply.github.com>
Date: Thu, 22 Jun 2023 15:09:47 +0800
Subject: [PATCH 13/18] henry/85290/fix: accumulators enabled for real trading
in DTrader (#8108)
* fix: accumulators enabled for real trading in DTrader
* fix: empty-commit
* chore: remove unnecessary comment
* fix: empty
* empty commit
* empty commit
---
.../src/Modules/Trading/Containers/trade.jsx | 8 ++----
.../src/Stores/Modules/Trading/trade-store.js | 26 +++----------------
2 files changed, 6 insertions(+), 28 deletions(-)
diff --git a/packages/trader/src/Modules/Trading/Containers/trade.jsx b/packages/trader/src/Modules/Trading/Containers/trade.jsx
index ef6c38c08555..1f9d85ea068a 100644
--- a/packages/trader/src/Modules/Trading/Containers/trade.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/trade.jsx
@@ -57,7 +57,7 @@ const Trade = observer(() => {
should_show_multipliers_onboarding,
is_dark_mode_on: is_dark_theme,
} = ui;
- const { is_eu, is_virtual } = client;
+ const { is_eu } = client;
const { network_status } = common;
const [digits, setDigits] = React.useState([]);
@@ -224,11 +224,7 @@ const Trade = observer(() => {
0 &&
- network_status.class === 'online' &&
- // TODO: delete the below line for releasing ACCU trade for real
- (is_virtual || !form_components.includes('accumulator'))
+ is_trade_enabled && form_components.length > 0 && network_status.class === 'online'
}
/>