From c258fafcaff91c9a9836a342b0fc05c5ba6c7515 Mon Sep 17 00:00:00 2001 From: balakrishna-binary Date: Thu, 1 Aug 2024 15:24:21 +0800 Subject: [PATCH 1/3] fix: ticks history api call --- src/javascript/app/pages/trade/charts/highchart.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/javascript/app/pages/trade/charts/highchart.js b/src/javascript/app/pages/trade/charts/highchart.js index 6c1dd26e5f3..5e946b14d65 100644 --- a/src/javascript/app/pages/trade/charts/highchart.js +++ b/src/javascript/app/pages/trade/charts/highchart.js @@ -338,7 +338,6 @@ const Highchart = (() => { start : ((purchase_time || start_time) - margin).toFixed(0), /* load more ticks first */ end : end_time ? (end_time + margin).toFixed(0) : 'latest', style : granularity === 0 ? 'ticks' : 'candles', - count : 4999, /* maximum number of ticks possible */ adjust_start_time: 1, }; From a07de517569d50a9bcf68f03dfa2c59707dfb2f6 Mon Sep 17 00:00:00 2001 From: balakrishna-binary Date: Wed, 14 Aug 2024 15:15:59 +0800 Subject: [PATCH 2/3] chore: update charts package --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index c26d2d87bbb..2b28f3271c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@babel/polyfill": "7.12.1", "@binary-com/binary-document-uploader": "^2.4.4", "@binary-com/binary-style": "^0.2.26", - "@binary-com/webtrader-charts": "^0.6.1", + "@binary-com/webtrader-charts": "^0.6.2", "@deriv-com/quill-ui": "^1.13.44", "@deriv/deriv-api": "^1.0.15", "@deriv/quill-icons": "^1.23.1", @@ -2375,9 +2375,9 @@ } }, "node_modules/@binary-com/webtrader-charts": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@binary-com/webtrader-charts/-/webtrader-charts-0.6.1.tgz", - "integrity": "sha512-QKOnKP4nTTxtTeJeKfLEHWPmO3rF4k7gmjT2wT1cuwnZKHAsIpaLc0umm5x4rh1Fnh3zzIkPd13SoxXZTeIRFg==", + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/@binary-com/webtrader-charts/-/webtrader-charts-0.6.2.tgz", + "integrity": "sha512-uDyWnNA0KtFJvYQvytOwgYTzbsazs2WueMKHwyMT5qktXOBHi/H4IXc31q7rfWK9eZm+XjpztuIb39ATSEK11A==", "dependencies": { "datatables.net-dt": "^2.0.7", "imports-loader": "^5.0.0", diff --git a/package.json b/package.json index 924f56e0c3c..18523969c86 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@babel/polyfill": "7.12.1", "@binary-com/binary-document-uploader": "^2.4.4", "@binary-com/binary-style": "^0.2.26", - "@binary-com/webtrader-charts": "^0.6.1", + "@binary-com/webtrader-charts": "^0.6.2", "@deriv-com/quill-ui": "^1.13.44", "@deriv/deriv-api": "^1.0.15", "@deriv/quill-icons": "^1.23.1", From 0104066d10acf5e762a94da412f48d3d25a22fc4 Mon Sep 17 00:00:00 2001 From: prince-deriv <82309725+prince-deriv@users.noreply.github.com> Date: Tue, 20 Aug 2024 09:55:01 +0400 Subject: [PATCH 3/3] Prince/Purchase section refactor (#800) * chore: refactored camelCase to snake_case * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: other refactor * chore: refactor fix * chore: refactor fix * chore: refactor fix * chore: refactor fix * chore: refactor fix * chore: refactor fix * chore: refactor fix * chore: refactor fix * chore: refactor fix * chore: text default size is md --- src/javascript/app/common/data_manager.js | 16 +- .../app/components/loading-spinner.js | 2 +- .../app/pages/bottom/data/explanation.js | 2 +- .../app/pages/bottom/explanation.jsx | 60 ++--- src/javascript/app/pages/bottom/tabs.jsx | 60 ++--- .../app/pages/form/barrier-fields.jsx | 8 +- .../app/pages/form/form-component.jsx | 48 ++-- src/javascript/app/pages/loader.jsx | 8 +- src/javascript/app/pages/trade/analysis.js | 4 +- src/javascript/app/pages/trade/common.js | 16 +- .../trade/markets/contracts-dropdown.jsx | 58 ++--- .../pages/trade/markets/market-selector.jsx | 12 +- .../pages/trade/markets/markets-dropdown.jsx | 6 +- .../app/pages/trade/not-available.jsx | 2 +- src/javascript/app/pages/trade/price.js | 34 +-- src/javascript/app/pages/trade/process.js | 4 +- src/javascript/app/pages/trade/purchase.js | 48 ++-- .../pages/trade/purchase/contract-details.jsx | 52 ++--- .../pages/trade/purchase/contract-table.jsx | 110 ++++----- .../app/pages/trade/purchase/purchase.jsx | 216 +++++++++--------- .../app/pages/trade/update_values.js | 22 +- .../app/pages/user/view_popup/view_popup.js | 146 ++++++------ 22 files changed, 470 insertions(+), 464 deletions(-) diff --git a/src/javascript/app/common/data_manager.js b/src/javascript/app/common/data_manager.js index 5729f1ec916..1c898d55825 100644 --- a/src/javascript/app/common/data_manager.js +++ b/src/javascript/app/common/data_manager.js @@ -23,19 +23,19 @@ class DataManager { set(data, data_type, optional_trigger) { if (typeof data === 'object') { - const oldValues = {}; - const newValues = {}; + const old_values = {}; + const new_values = {}; Object.entries(data).forEach(([key, value]) => { if (this.data[data_type][key] !== value) { - oldValues[key] = this.data[data_type][key]; - newValues[key] = value; + old_values[key] = this.data[data_type][key]; + new_values[key] = value; } this.data[data_type][key] = value; }); - if (Object.keys(newValues).length > 0) { + if (Object.keys(new_values).length > 0) { // Trigger a custom event with old and new values window.dispatchEvent(new CustomEvent(changeTypeMap[data_type], { - detail: { oldValues, newValues }, + detail: { old_values, new_values }, })); switch (data_type) { @@ -74,11 +74,11 @@ class DataManager { } clear(data_type) { - const oldValues = { ...this.data[data_type] }; + const old_values = { ...this.data[data_type] }; this.data[data_type] = {}; window.dispatchEvent(new CustomEvent(changeTypeMap[data_type], { - detail: { oldValues, newValues: {} }, + detail: { old_values, new_values: {} }, })); if (data_type === 'trade') { triggerTradeChange(); diff --git a/src/javascript/app/components/loading-spinner.js b/src/javascript/app/components/loading-spinner.js index 368790f2109..4dde80174d6 100644 --- a/src/javascript/app/components/loading-spinner.js +++ b/src/javascript/app/components/loading-spinner.js @@ -29,7 +29,7 @@ export const show = (content_id) => { */ export const hide = (content_id) => { dataManager.setContract({ - hidePageLoader: true, + hide_page_loader: true, }); assertContainerExists(content_id); diff --git a/src/javascript/app/pages/bottom/data/explanation.js b/src/javascript/app/pages/bottom/data/explanation.js index 763d42e143e..43dc2c43d75 100644 --- a/src/javascript/app/pages/bottom/data/explanation.js +++ b/src/javascript/app/pages/bottom/data/explanation.js @@ -1,6 +1,6 @@ import { localize } from '../../../../_common/localize.js'; -export const contractExplanationData = { +export const contract_explanation_data = { winning: { asian: { diff --git a/src/javascript/app/pages/bottom/explanation.jsx b/src/javascript/app/pages/bottom/explanation.jsx index 5e8ddf5b4d2..84b30d80e68 100644 --- a/src/javascript/app/pages/bottom/explanation.jsx +++ b/src/javascript/app/pages/bottom/explanation.jsx @@ -1,28 +1,28 @@ import React, { useEffect, useState } from 'react'; import parse from 'html-react-parser'; import { SectionMessage, Skeleton, Text } from '@deriv-com/quill-ui'; -import { contractExplanationData } from './data/explanation.js'; +import { contract_explanation_data } from './data/explanation.js'; import Language from '../../../_common/language'; import Url from '../../../_common/url'; import { localize } from '../../../_common/localize.js'; import dataManager from '../../common/data_manager.js'; import { useContractChange } from '../../hooks/events.js'; -export const Explanation = ({ explanationOnly = false }) => { +export const Explanation = ({ explanation_only = false }) => { - const [formName,setFormName] = useState(null); + const [form_name, setFormName] = useState(null); - const hasContractChanges = useContractChange(); + const has_contract_changes = useContractChange(); useEffect(() => { - const actualFormName = dataManager.getContract('explanationFormName'); + const actual_form_name = dataManager.getContract('explanation_form_name'); setFormName(null); setTimeout(() => { - setFormName(actualFormName); + setFormName(actual_form_name); }, 500); - }, [hasContractChanges]); + }, [has_contract_changes]); const language = Language.get(); const image_path = Url.urlForStatic( @@ -31,7 +31,7 @@ export const Explanation = ({ explanationOnly = false }) => { const Notes = () => ( <> {localize('Note')}: - {contractExplanationData.note[formName].content.map((data, idx) => ( + {contract_explanation_data.note[form_name].content.map((data, idx) => ( {parse(data)} ))} @@ -93,21 +93,21 @@ export const Explanation = ({ explanationOnly = false }) => { }, }; - if (formName) { + if (form_name) { return (
{/* ========== Winning ========== */} - {!explanationOnly && ( + {!explanation_only && ( <>
-
+
- {localize('Winning the contract')} + {localize('Winning the contract')}
- {contractExplanationData.winning[formName].content.map( + {contract_explanation_data.winning[form_name].content.map( (data, idx) => ( - {parse(data)} + {parse(data)} ) )}
@@ -116,7 +116,7 @@ export const Explanation = ({ explanationOnly = false }) => {
{/* ========== Image ========== */} - {images[formName] && ( + {images[form_name] && (
@@ -127,15 +127,15 @@ export const Explanation = ({ explanationOnly = false }) => {
- {images[formName].image2 && ( + {images[form_name].image2 && (
)} @@ -149,31 +149,31 @@ export const Explanation = ({ explanationOnly = false }) => { {/* ========== Explain ========== */}
-
+
- {contractExplanationData.explain[formName].title} + {contract_explanation_data.explain[form_name].title}
- {contractExplanationData.explain[formName].content.map( + {contract_explanation_data.explain[form_name].content.map( (data, idx) => ( - {parse(data)} + {parse(data)} ) )}
- {contractExplanationData.explain[formName].title_secondary && ( + {contract_explanation_data.explain[form_name].title_secondary && (
- {contractExplanationData.explain[formName].title_secondary} + {contract_explanation_data.explain[form_name].title_secondary}
)} - {contractExplanationData.explain[formName].content_secondary && ( + {contract_explanation_data.explain[form_name].content_secondary && (
- {contractExplanationData.explain[formName].content_secondary.map( + {contract_explanation_data.explain[form_name].content_secondary.map( (data, idx) => ( - {parse(data)} + {parse(data)} ) )}
@@ -183,8 +183,8 @@ export const Explanation = ({ explanationOnly = false }) => {
{/* ========== Note ========== */} - {!explanationOnly && ( - contractExplanationData.note[formName] && ( + {!explanation_only && ( + contract_explanation_data.note[form_name] && ( } size='sm' /> ) )} @@ -192,7 +192,7 @@ export const Explanation = ({ explanationOnly = false }) => { ); } - if (explanationOnly) { + if (explanation_only) { return (
diff --git a/src/javascript/app/pages/bottom/tabs.jsx b/src/javascript/app/pages/bottom/tabs.jsx index ece2317e004..c353340cf83 100644 --- a/src/javascript/app/pages/bottom/tabs.jsx +++ b/src/javascript/app/pages/bottom/tabs.jsx @@ -11,14 +11,14 @@ import dataManager from '../../common/data_manager.js'; import LastDigit from '../trade/last_digit.jsx'; const BottomTabs = () => { - const hasMarketChange = useMarketChange(); - const [selectedTab, setSelectedTab] = useState(1); - const [hasLastDigit, setHasLastDigit] = useState(false); - const [formName, setFormName] = useState(''); - const hasContractChange = useContractChange(); - const savedTab = sessionStorage.getItem('currentTab'); - const triggerOldTabTimer = useRef(); - const [isShowGraph, setIsShowGraph] = useState(false); + const has_market_change = useMarketChange(); + const [selected_tab, setSelectedTab] = useState(1); + const [has_last_digit, setHasLastDigit] = useState(false); + const [form_name, setFormName] = useState(''); + const has_contract_change = useContractChange(); + const saved_tab = sessionStorage.getItem('currentTab'); + const [is_show_graph, setIsShowGraph] = useState(false); + const trigger_old_tab_timer = useRef(); const handleChange = (e) => { setSelectedTab(e); @@ -31,43 +31,43 @@ const BottomTabs = () => { const tabs = [{ label: localize('Chart') }, { label: localize('Explanation') }]; - const bottomTabOptions = hasLastDigit + const bottom_tab_options = has_last_digit ? [...tabs, { label: localize('Last Digit Stats') }] : tabs; useEffect(() => { - setFormName(dataManager.getContract('explanationFormName')); - }, [hasContractChange, hasMarketChange]); + setFormName(dataManager.getContract('explanation_form_name')); + }, [has_contract_change, has_market_change]); useEffect(() => { - setHasLastDigit(formName === 'digits' || formName === 'evenodd' || formName === 'overunder'); - }, [formName]); + setHasLastDigit(form_name === 'digits' || form_name === 'evenodd' || form_name === 'overunder'); + }, [form_name]); useEffect(() => { - if (savedTab !== null) { - const tabIndex = parseInt(savedTab); - if (tabIndex === 2 && !hasLastDigit) { + if (saved_tab !== null) { + const tab_index = parseInt(saved_tab); + if (tab_index === 2 && !has_last_digit) { setSelectedTab(1); } else { - setSelectedTab(tabIndex); + setSelectedTab(tab_index); } } else { setSelectedTab(1); } - }, [hasLastDigit]); + }, [has_last_digit]); useEffect(() => { - const oppositeTab = (selectedTab + 1) > 2 ? 0 : (selectedTab + 1); + const opposite_tab = (selected_tab + 1) > 2 ? 0 : (selected_tab + 1); - triggerOldTab(oppositeTab); + triggerOldTab(opposite_tab); - triggerOldTabTimer.current = setTimeout(() => { - triggerOldTab(selectedTab); + trigger_old_tab_timer.current = setTimeout(() => { + triggerOldTab(selected_tab); }, 100); - }, [selectedTab, savedTab]); + }, [selected_tab, saved_tab]); useEffect(() => () => { - clearTimeout(triggerOldTabTimer.current); + clearTimeout(trigger_old_tab_timer.current); WebtraderChart.cleanupChart(); WebtraderChart.showChart(); },[]); @@ -76,20 +76,20 @@ const BottomTabs = () => { <>
- {selectedTab === 0 && setIsShowGraph(false)} onLoad={() => setIsShowGraph(true)} />} - {selectedTab === 1 && } - {selectedTab === 2 && hasLastDigit && } + {selected_tab === 1 && } + {selected_tab === 2 && has_last_digit && } -
+

diff --git a/src/javascript/app/pages/form/barrier-fields.jsx b/src/javascript/app/pages/form/barrier-fields.jsx index 14ecf3a1bea..ffd0335c7db 100644 --- a/src/javascript/app/pages/form/barrier-fields.jsx +++ b/src/javascript/app/pages/form/barrier-fields.jsx @@ -12,18 +12,18 @@ import Defaults, { PARAM_NAMES } from '../trade/defaults.js'; const BarrierFields = ({ form_name, handleAmountChange }) => { const [barrierData, setBarrierData] = useState(); - const hasBarrierChange = useBarrierChange(); + const has_barrier_change = useBarrierChange(); const barrier = Defaults.get(PARAM_NAMES.BARRIER); const barrier_high = Defaults.get(PARAM_NAMES.BARRIER_HIGH); const barrier_low = Defaults.get(PARAM_NAMES.BARRIER_LOW); useEffect(() => { - setBarrierData((oldData) => ({ - ...oldData, + setBarrierData((old_data) => ({ + ...old_data, ...dataManager.getAllTrades(), })); - }, [hasBarrierChange]); + }, [has_barrier_change]); if (!barrierData) return null; diff --git a/src/javascript/app/pages/form/form-component.jsx b/src/javascript/app/pages/form/form-component.jsx index 1bafbbe889b..a6f1eada175 100644 --- a/src/javascript/app/pages/form/form-component.jsx +++ b/src/javascript/app/pages/form/form-component.jsx @@ -28,19 +28,19 @@ import { setDefaultParams } from '../../common/helpers.js'; import { isCryptocurrency } from '../../../_common/base/currency_base.js'; export const FormComponent = () => { - const [tradeData, setTradeData] = useState({}); + const [trade_data, setTradeData] = useState({}); - const hasTradeChange = useTradeChange(); - const hasMarketChange = useMarketChange(); - const hasContractChange = useContractChange(); - const hasSessionChange = useSessionChange(); + const has_trade_change = useTradeChange(); + const has_market_change = useMarketChange(); + const has_contract_change = useContractChange(); + const has_session_change = useSessionChange(); useEffect(() => { - setTradeData((oldData) => ({ - ...oldData, + setTradeData((old_data) => ({ + ...old_data, ...dataManager.getAllTrades(), })); - }, [hasMarketChange, hasContractChange, hasTradeChange, hasSessionChange]); + }, [has_market_change, has_contract_change, has_trade_change, has_session_change]); const form_name = Defaults.get(PARAM_NAMES.FORM_NAME); const expiry_type = Defaults.get(PARAM_NAMES.EXPIRY_TYPE); @@ -68,9 +68,9 @@ export const FormComponent = () => { currency_list, reset_message, show_allow_equals, - } = tradeData; + } = trade_data; - const contractForms = [ + const contract_forms = [ 'risefall', 'callputequal', 'touchnotouch', @@ -91,33 +91,33 @@ export const FormComponent = () => { const onExpiryDateChange = (value) => { const element = common_functions.getElementById('expiry_date'); - const newDate = moment(value).format('YYYY-MM-DD'); - if (newDate !== expiry_date) { + const new_date = moment(value).format('YYYY-MM-DD'); + if (new_date !== expiry_date) { if (!endtime_data.show_datepicker) { Array.from(element.options).map((option) => { if (moment(option.text).format('YYYY-MM-DD') === value) { option.setAttribute('selected', true); - option.setAttribute('data-value', newDate); + option.setAttribute('data-value', new_date); } else { option.setAttribute('selected', false); - option.setAttribute('data-value', newDate); + option.setAttribute('data-value', new_date); } }); } else { - element.setAttribute('data-value', newDate); + element.setAttribute('data-value', new_date); } eventDispatcher(element, 'change'); } }; - const updateFormField = (elementId, value, eventType) => { - const element = common_functions.getElementById(elementId); - if (elementId === 'callputequal') { + const updateFormField = (element_id, value, event_type) => { + const element = common_functions.getElementById(element_id); + if (element_id === 'callputequal') { element.checked = !+is_equal; } else { element.value = value; } - eventDispatcher(element, eventType); + eventDispatcher(element, event_type); }; const getMessage = (form) => { @@ -135,7 +135,7 @@ export const FormComponent = () => { const findTextByValue = (arr, value) => arr.find(item => item.value === value)?.text || null; const isEmpty = (obj) => Object.keys(obj).length === 0; - if (isEmpty(tradeData)) { + if (isEmpty(trade_data)) { return null; } @@ -152,7 +152,7 @@ export const FormComponent = () => { return { minDate, maxDate }; }; - const payoutTypeOptions = [ + const payout_type_options = [ { text: localize('Stake'), value: 'stake' }, { text: localize('Payout'), value: 'payout' }, ]; @@ -170,7 +170,7 @@ export const FormComponent = () => { return (
- {contractForms.includes(form_name) && ( + {contract_forms.includes(form_name) && ( <> {form_name === 'highlowticks' && (
@@ -323,8 +323,8 @@ export const FormComponent = () => {
diff --git a/src/javascript/app/pages/loader.jsx b/src/javascript/app/pages/loader.jsx index d3c66892ae1..03ba28b455f 100644 --- a/src/javascript/app/pages/loader.jsx +++ b/src/javascript/app/pages/loader.jsx @@ -36,7 +36,7 @@ const pageTypes = [ ]; const Loader = () => { - const hasContractChange = useContractChange(); + const has_contract_change = useContractChange(); const [loading, setLoading] = useState(true); @@ -45,13 +45,13 @@ const Loader = () => { const page = getPageType().name; useEffect(() => { - const hidePageLoader = dataManager.getContract('hidePageLoader'); + const hide_page_loader = dataManager.getContract('hide_page_loader'); - if (hidePageLoader) { + if (hide_page_loader) { setLoading(false); } - }, [hasContractChange]); + }, [has_contract_change]); useEffect(() => { const handleLoad = () => { diff --git a/src/javascript/app/pages/trade/analysis.js b/src/javascript/app/pages/trade/analysis.js index 58180200df0..1d735ddd8f9 100644 --- a/src/javascript/app/pages/trade/analysis.js +++ b/src/javascript/app/pages/trade/analysis.js @@ -37,8 +37,8 @@ const TradingAnalysis = (() => { form_name = map_obj[form_name] || form_name; dataManager.setContract({ - actualFormName : form_name, - explanationFormName: tab_form_name, + actual_form_name : form_name, + explanation_form_name: tab_form_name, }); $('#tab_last_digit').setVisibility(/digits|overunder|evenodd/.test(tab_form_name)); diff --git a/src/javascript/app/pages/trade/common.js b/src/javascript/app/pages/trade/common.js index 005e3e79803..fcc7343cc3c 100644 --- a/src/javascript/app/pages/trade/common.js +++ b/src/javascript/app/pages/trade/common.js @@ -52,10 +52,10 @@ const commonTrading = (() => { if (!contracts_element) { dataManager.setContract({ - contractsTree : contracts_tree, - contracts : all_contracts, - formName : selected || Defaults.get('formname'), - contractElement: getElementById('contract'), + contracts_tree, + contracts : all_contracts, + form_name : selected || Defaults.get('formname'), + contract_element: getElementById('contract'), }); } else { // Update the component. contracts_element.updater.enqueueSetState(contracts_element, { @@ -158,7 +158,7 @@ const commonTrading = (() => { showHideOverlay('contracts_list', 'flex'); $('.purchase_button').text(localize('Purchase')); dataManager.setPurchase({ - showPurchaseResults: false, + show_purchase_results: false, }); }; @@ -254,7 +254,7 @@ const commonTrading = (() => { node.show(); elementInnerHtml(node, comment); dataManager.setPurchase({ - [`${position}Comment`]: comment, + [`${position}_comment`]: comment, }); } } @@ -476,13 +476,13 @@ const commonTrading = (() => { showPriceOverlay: () => { showHideOverlay('loading_container2', 'block'); dataManager.setPurchase({ - isPurchaseFormDisabled: true, + is_purchase_form_disabled: true, }); }, hidePriceOverlay: () => { showHideOverlay('loading_container2', 'none'); dataManager.setPurchase({ - isPurchaseFormDisabled: false, + is_purchase_form_disabled: false, }); }, hideFormOverlay: () => { showHideOverlay('loading_container3', 'none'); }, diff --git a/src/javascript/app/pages/trade/markets/contracts-dropdown.jsx b/src/javascript/app/pages/trade/markets/contracts-dropdown.jsx index cfaef047e1a..706df05ec8e 100644 --- a/src/javascript/app/pages/trade/markets/contracts-dropdown.jsx +++ b/src/javascript/app/pages/trade/markets/contracts-dropdown.jsx @@ -6,56 +6,56 @@ import Defaults, { PARAM_NAMES } from '../defaults'; export const ContractDropdown = () => { const { close } = useDropdown(); - const hasContractChange = useContractChange(); + const has_contract_change = useContractChange(); const [data, setData] = useState(dataManager.getAllContracts()); - const selectedRef = useRef(null); - const containerRef = useRef(null); - const closeDropdownTimer = useRef(); + const selected_ref = useRef(null); + const container_ref = useRef(null); + const close_dropdown_timer = useRef(); - const onContractClick = (formName) => { - if (formName === data?.formName) { + const onContractClick = (form_name) => { + if (form_name === data?.form_name) { close(); return; } - const contractElement = data?.contractElement; + const contract_element = data?.contract_element; - if (contractElement) { + if (contract_element) { const event = new Event('change'); - contractElement.value = formName; - contractElement.dispatchEvent(event); + contract_element.value = form_name; + contract_element.dispatchEvent(event); } - Defaults.set(PARAM_NAMES.FORM_NAME, formName); + Defaults.set(PARAM_NAMES.FORM_NAME, form_name); dataManager.setContract({ - formName, + form_name, }); triggerContractChange(); - closeDropdownTimer.current = setTimeout(() => { + close_dropdown_timer.current = setTimeout(() => { close(); }, 10); }; - useEffect(() => () => clearTimeout(closeDropdownTimer.current), []); + useEffect(() => () => clearTimeout(close_dropdown_timer.current), []); useEffect(() => { - setData(oldData => ({ - ...oldData, + setData(old_data => ({ + ...old_data, ...dataManager.getAllContracts(), })); - }, [hasContractChange]); + }, [has_contract_change]); useEffect(() => { - if (selectedRef.current && containerRef.current) { - const selectedRect = selectedRef.current.getBoundingClientRect(); - const containerRect = containerRef.current.getBoundingClientRect(); + if (selected_ref.current && container_ref.current) { + const selected_rect = selected_ref.current.getBoundingClientRect(); + const container_rect = container_ref.current.getBoundingClientRect(); const offset = 96; - if (selectedRect.top < containerRect.top + offset || selectedRect.bottom > containerRect.bottom) { - containerRef.current.scrollTo({ - top : containerRef.current.scrollTop + selectedRect.top - containerRect.top - offset, + if (selected_rect.top < container_rect.top + offset || selected_rect.bottom > container_rect.bottom) { + container_ref.current.scrollTo({ + top : container_ref.current.scrollTop + selected_rect.top - container_rect.top - offset, behavior: 'auto', }); } @@ -64,8 +64,8 @@ export const ContractDropdown = () => { return (
-
- {data?.contractsTree?.map((contract, idx) => { +
+ {data?.contracts_tree?.map((contract, idx) => { if (typeof contract === 'object') { return ( @@ -75,10 +75,10 @@ export const ContractDropdown = () => { key={i} onClick={() => onContractClick(subtype)} label={data?.contracts[subtype]} - selected={subtype === data?.formName} + selected={subtype === data?.form_name} size='md' className='trade-item-selected' - ref={subtype === data?.formName ? selectedRef : null} + ref={subtype === data?.form_name ? selected_ref : null} /> ) )} @@ -93,10 +93,10 @@ export const ContractDropdown = () => { onContractClick(contract)} label={data?.contracts[contract]} - selected={contract === data?.formName} + selected={contract === data?.form_name} size='md' className='contract-item-clickables' - ref={contract === data?.formName ? selectedRef : null} + ref={contract === data?.form_name ? selected_ref : null} /> diff --git a/src/javascript/app/pages/trade/markets/market-selector.jsx b/src/javascript/app/pages/trade/markets/market-selector.jsx index d6b221c1208..ea679f4257b 100644 --- a/src/javascript/app/pages/trade/markets/market-selector.jsx +++ b/src/javascript/app/pages/trade/markets/market-selector.jsx @@ -11,18 +11,18 @@ import { localize } from '../../../../_common/localize'; import { useContractChange, useMarketChange } from '../../../hooks/events.js'; const MarketSelector = () => { - const [marketLabel, setMarketLabel] = useState(getMarketName()); + const [market_label, setMarketLabel] = useState(getMarketName()); const [tradeTypeLabel, setTradeTypeLabel] = useState(getContractName()); - const hasContractChange = useContractChange(); - const hasMarketChange = useMarketChange(); + const has_contract_change = useContractChange(); + const has_market_change = useMarketChange(); useEffect(() => { setTradeTypeLabel(getContractName()); - }, [hasContractChange]); + }, [has_contract_change]); useEffect(() => { setMarketLabel(getMarketName()); - }, [hasMarketChange]); + }, [has_market_change]); return ( @@ -30,7 +30,7 @@ const MarketSelector = () => { diff --git a/src/javascript/app/pages/trade/markets/markets-dropdown.jsx b/src/javascript/app/pages/trade/markets/markets-dropdown.jsx index bf1e9898a2d..6a3fb27eb75 100644 --- a/src/javascript/app/pages/trade/markets/markets-dropdown.jsx +++ b/src/javascript/app/pages/trade/markets/markets-dropdown.jsx @@ -42,16 +42,16 @@ export const getContractName = () => { const data = dataManager.getAllContracts('contract'); let name = ''; // eslint-disable-next-line consistent-return - data?.contractsTree?.forEach((contract) => { + data?.contracts_tree?.forEach((contract) => { if (typeof contract === 'object') { contract[1].forEach((subtype) => { - if (subtype === data?.actualFormName) { + if (subtype === data?.actual_form_name) { name = data?.contracts[subtype]; } }); - } else if (contract === data?.actualFormName) { + } else if (contract === data?.actual_form_name) { name = data?.contracts[contract]; } diff --git a/src/javascript/app/pages/trade/not-available.jsx b/src/javascript/app/pages/trade/not-available.jsx index 130f9a3c599..54294ef8556 100644 --- a/src/javascript/app/pages/trade/not-available.jsx +++ b/src/javascript/app/pages/trade/not-available.jsx @@ -30,7 +30,7 @@ const NotAvailable = ({ title, body }) => ( export const init = ({ ...props }) => { dataManager.setContract({ - hidePageLoader: true, + hide_page_loader: true, }); ReactDOM.render(, getElementById('content')); }; diff --git a/src/javascript/app/pages/trade/price.js b/src/javascript/app/pages/trade/price.js index 266aae10fe0..f2ebdc2567b 100644 --- a/src/javascript/app/pages/trade/price.js +++ b/src/javascript/app/pages/trade/price.js @@ -215,8 +215,8 @@ const Price = (() => { CommonFunctions.elementTextContent(h4, display_text); dataManager.setPurchase({ - [`${position}DisplayText`] : display_text, - [`${position}ContractType`]: type, + [`${position}_display_text`] : display_text, + [`${position}_contract_type`]: type, }); } @@ -227,7 +227,7 @@ const Price = (() => { if (!data.display_value) { amount.classList.remove('price_moved_up', 'price_moved_down'); dataManager.setPurchase({ - [`${position}AmountClassname`]: '', + [`${position}_amount_classname`]: '', }); } CommonFunctions.elementTextContent(stake, `${localize('Stake')}: `); @@ -236,7 +236,7 @@ const Price = (() => { if (!data.payout) { amount.classList.remove('price_moved_up', 'price_moved_down'); dataManager.setPurchase({ - [`${position}AmountClassname`]: '', + [`${position}_amount_classname`]: '', }); } CommonFunctions.elementTextContent(payout, `${localize('Payout')}: `); @@ -246,22 +246,22 @@ const Price = (() => { CommonFunctions.elementInnerHtml(contract_multiplier, data.multiplier ? formatMoney(currentCurrency, data.multiplier, false, 0, 2) : '-'); dataManager.setPurchase({ - [`${position}Amount`] : data.display_value ? formatMoney(currentCurrency, data.display_value, true) : '-', - [`${position}PayoutAmount`]: data.payout ? formatMoney(currentCurrency, data.payout, true) : '-', - [`${position}Multiplier`] : data.multiplier ? formatMoney(currentCurrency, data.multiplier, true, 0, 2) : '-', - currency : getCurrencyDisplayCode(currentCurrency), + [`${position}_amount`] : data.display_value ? formatMoney(currentCurrency, data.display_value, true) : '-', + [`${position}_payout_amount`]: data.payout ? formatMoney(currentCurrency, data.payout, true) : '-', + [`${position}_multiplier`] : data.multiplier ? formatMoney(currentCurrency, data.multiplier, true, 0, 2) : '-', + currency : getCurrencyDisplayCode(currentCurrency), }); if (data.longcode && window.innerWidth > 500) { dataManager.setPurchase({ - [`${position}Description`]: data.longcode, + [`${position}_description`]: data.longcode, }); if (description) description.setAttribute('data-balloon', data.longcode); if (longcode) CommonFunctions.elementTextContent(longcode, data.longcode); } else { dataManager.setPurchase({ - [`${position}Description`]: '', + [`${position}_description`]: '', }); if (description) description.removeAttribute('data-balloon'); @@ -271,7 +271,7 @@ const Price = (() => { const setPurchaseStatus = (enable) => { dataManager.setPurchase({ - [`${position}PurchaseDisabled`]: !enable, + [`${position}_purchase_disabled`]: !enable, }); purchase.parentNode.classList[enable ? 'remove' : 'add']('button-disabled'); }; @@ -283,7 +283,7 @@ const Price = (() => { error.show(); CommonFunctions.elementTextContent(error, details.error.message); dataManager.setPurchase({ - [`${position}Comment`]: details.error.message, + [`${position}_comment`]: details.error.message, }); } else { setData(proposal); @@ -298,15 +298,15 @@ const Price = (() => { const multiplier_value = formatMoney(Client.get('currency'), proposal.multiplier, false, 3, 2); CommonFunctions.elementInnerHtml(comment, `${localize('Payout')}: ${getLookBackFormula(type, multiplier_value)}`); dataManager.setPurchase({ - [`${position}Comment`]: `${localize('Payout')}: ${getLookBackFormula(type, multiplier_value)}`, + [`${position}_comment`]: `${localize('Payout')}: ${getLookBackFormula(type, multiplier_value)}`, }); } else { commonTrading.displayCommentPrice(comment, (currency.value || currency.getAttribute('value')), proposal.display_value, proposal.payout, position); } const old_price = purchase.getAttribute('data-display_value'); const old_payout = purchase.getAttribute('data-payout'); - if (amount) displayPriceMovement(amount, old_price, proposal.display_value,`${position}AmountClassname`); - if (payout_amount) displayPriceMovement(payout_amount, old_payout, proposal.payout,`${position}PayoutAmountClassname`); + if (amount) displayPriceMovement(amount, old_price, proposal.display_value,`${position}_amount_classname`); + if (payout_amount) displayPriceMovement(payout_amount, old_payout, proposal.payout,`${position}_payout_amount_classname`); Array.from(purchase.attributes).filter(attr => { if (!/^data/.test(attr.name) || /^data-balloon$/.test(attr.name) || @@ -463,14 +463,14 @@ const Price = (() => { if (position_is_visible[position]) { if (position === 'middle') { dataManager.setPurchase({ - showMidPurchase: true, + show_mid_purchase: true, }); } $(container).fadeIn(0); } else { if (position === 'middle') { dataManager.setPurchase({ - showMidPurchase: false, + show_mid_purchase: false, }); } $(container).fadeOut(0); diff --git a/src/javascript/app/pages/trade/process.js b/src/javascript/app/pages/trade/process.js index ef864e83263..fc215913f2a 100644 --- a/src/javascript/app/pages/trade/process.js +++ b/src/javascript/app/pages/trade/process.js @@ -129,7 +129,7 @@ const Process = (() => { const init_logo = getElementById('trading_init_progress'); dataManager.setContract({ - hidePageLoader: true, + hide_page_loader: true, }); if (init_logo && init_logo.style.display !== 'none') { @@ -153,7 +153,7 @@ const Process = (() => { if (getPropertyValue(contracts, ['error', 'code']) === 'InvalidSymbol') { Price.processForgetProposals(); dataManager.setPurchase({ - showPurchaseResults: true, + show_purchase_results: true, }); getElementById('contract_confirmation_container').style.display = 'block'; getElementById('contracts_list').style.display = 'none'; diff --git a/src/javascript/app/pages/trade/purchase.js b/src/javascript/app/pages/trade/purchase.js index b5ce0910cc3..8f7502a5424 100644 --- a/src/javascript/app/pages/trade/purchase.js +++ b/src/javascript/app/pages/trade/purchase.js @@ -95,18 +95,18 @@ const Purchase = (() => { dataManager.setPurchase({ error: { - showPurchaseResults: true, + show_purchase_results: true, ...error, - action : TopUpVirtualPopup.doTopUp, - title : localize('Top up Virtual Account?'), - isCustom : true, + action : TopUpVirtualPopup.doTopUp, + title : localize('Top up Virtual Account?'), + is_custom : true, }, }); } else { contracts_list.style.display = 'none'; container.style.display = 'block'; dataManager.setPurchase({ - showPurchaseResults: true, + show_purchase_results: true, }); message_container.hide(); @@ -123,9 +123,9 @@ const Purchase = (() => { dataManager.setPurchase({ error: { ...error, - signupUrl: signup_url, + signup_url, title : localize('Ready to trade?'), - isCustom : true, + is_custom: true, }, }); @@ -194,11 +194,11 @@ const Purchase = (() => { CommonFunctions.elementTextContent(reference, `${localize('Your transaction reference is')} ${receipt.transaction_id}`); dataManager.setPurchase({ - showPurchaseResults: true, - pr_heading : localize('Contract Confirmation'), - pr_description : receipt.longcode, - pr_barrier : '', - pr_reference : `${localize('Your transaction reference is')} ${receipt.transaction_id}`, + show_purchase_results: true, + pr_heading : localize('Contract Confirmation'), + pr_description : receipt.longcode, + pr_barrier : '', + pr_reference : `${localize('Your transaction reference is')} ${receipt.transaction_id}`, }); const currency = Client.get('currency'); @@ -216,16 +216,16 @@ const Purchase = (() => { CommonFunctions.elementInnerHtml(cost, `${localize('Total Cost')}

${formatMoney(currency, cost_value)}

`); dataManager.setPurchase({ - pr_tableCost : localize('Total Cost'), - pr_tableCostValue: formatMoney(currency, cost_value), + pr_table_cost : localize('Total Cost'), + pr_table_cost_value: formatMoney(currency, cost_value), }); if (isLookback(contract_type)) { CommonFunctions.elementInnerHtml(payout, `${localize('Potential Payout')}

${formula}

`); dataManager.setPurchase({ - pr_tablePayout : localize('Potential Payout'), - pr_tablePayoutValue: formula, - pr_showTableProfit : false, + pr_table_payout : localize('Potential Payout'), + pr_table_payout_value: formula, + pr_show_table_profit : false, }); profit.setVisibility(0); } else { @@ -234,11 +234,11 @@ const Purchase = (() => { CommonFunctions.elementInnerHtml(profit, `${localize('Potential Profit')}

${potential_profit_value}

`); dataManager.setPurchase({ - pr_tablePayout : localize('Potential Payout'), - pr_tablePayoutValue: formatMoney(currency, payout_value), - pr_tableProfit : localize('Potential Profit'), - pr_tableProfitValue: potential_profit_value, - pr_showTableProfit : true, + pr_table_payout : localize('Potential Payout'), + pr_table_payout_value: formatMoney(currency, payout_value), + pr_table_profit : localize('Potential Profit'), + pr_table_profit_value: potential_profit_value, + pr_show_table_profit : true, }); } @@ -264,13 +264,13 @@ const Purchase = (() => { button.setAttribute('contract_id', receipt.contract_id); button.show(); dataManager.setPurchase({ - pr_showBtn: true, + pr_show_button: true, }); $('#confirmation_message_container .open_contract_details').attr('contract_id', receipt.contract_id).setVisibility(1); } else { button.hide(); dataManager.setPurchase({ - pr_showBtn: false, + pr_show_button: false, }); $('#confirmation_message_container .open_contract_details').setVisibility(0); } diff --git a/src/javascript/app/pages/trade/purchase/contract-details.jsx b/src/javascript/app/pages/trade/purchase/contract-details.jsx index 5480ed33fbf..ef808be19a2 100644 --- a/src/javascript/app/pages/trade/purchase/contract-details.jsx +++ b/src/javascript/app/pages/trade/purchase/contract-details.jsx @@ -10,24 +10,24 @@ import { localize } from '../../../../_common/localize'; import { Explanation } from '../../bottom/explanation'; import { TimeTooltipWrapper, triggerClick } from '../../../common/helpers'; -const resetPopupData = (isAuditReset = false) => { +const resetPopupData = (is_audit_reset = false) => { const audit_reset_object = { - cd_showAudit: false, - auditDataEnd: [], - cd_infoMsg : null, - cd_sellMsg : null, + cd_show_audit : false, + audit_data_end: [], }; const contract_reset_object = { ...audit_reset_object, - showContractDetailsPopup: false, - cd_showSell : false, - cd_contractEnded : false, - cd_showAuditBtn : false, + show_contract_details_popup: false, + cd_show_sell : false, + cd_contract_ended : false, + cd_show_audit_button : false, + cd_sell_msg : null, + cd_info_msg : null, }; dataManager.setPurchase({ - ...(isAuditReset ? { ...audit_reset_object } : contract_reset_object), + ...(is_audit_reset ? { ...audit_reset_object } : contract_reset_object), }); }; @@ -35,15 +35,15 @@ const AuditSection = ({ data }) => { const audit_data = { start: { title : localize('Contract starts'), - content: data?.auditDataStart, + content: data?.audit_data_start, }, end: { title : localize('Contract ends'), - content: data?.auditDataEnd, + content: data?.audit_data_end, }, details: { title : localize('Contract details'), - content: data?.auditDataDetails, + content: data?.audit_data_details, }, }; @@ -61,7 +61,7 @@ const AuditSection = ({ data }) => { }} />
- + {localize('Audit page')}
@@ -82,7 +82,7 @@ const AuditSection = ({ data }) => { return (
- + {title}
@@ -126,7 +126,7 @@ const AuditSection = ({ data }) => { return null; })}
- +
@@ -151,7 +151,7 @@ const DetailsSection = ({ data }) => ( }} />
- + {localize('Contract Details')}
@@ -164,7 +164,7 @@ const DetailsSection = ({ data }) => ( {data?.cd_description}
-
+
@@ -174,7 +174,7 @@ const DetailsSection = ({ data }) => ( ); const Contents = ({ data }) => { - if (data?.cd_showAudit) { + if (data?.cd_show_audit) { return ( ); @@ -186,7 +186,7 @@ const Contents = ({ data }) => { }; const ContractDetails = () => { - const hasPurchaseChange = usePurchaseChange(); + const has_purchase_change = usePurchaseChange(); const [data, setData] = useState({}); useEffect(() => { @@ -201,16 +201,16 @@ const ContractDetails = () => { return () => { window.removeEventListener('keydown', handleKeyDown); }; - }, [hasPurchaseChange]); + }, [has_purchase_change]); useEffect(() => { - const newData = dataManager.getAllPurchases(); + const new_data = dataManager.getAllPurchases(); - setData((oldData) => ({ - ...oldData, - ...newData, + setData((old_data) => ({ + ...old_data, + ...new_data, })); - }, [hasPurchaseChange]); + }, [has_purchase_change]); return ( diff --git a/src/javascript/app/pages/trade/purchase/contract-table.jsx b/src/javascript/app/pages/trade/purchase/contract-table.jsx index 60dd68a2472..3dfef8e21d7 100644 --- a/src/javascript/app/pages/trade/purchase/contract-table.jsx +++ b/src/javascript/app/pages/trade/purchase/contract-table.jsx @@ -8,7 +8,7 @@ import { parseData, TimeTooltipWrapper, triggerClick } from '../../../common/hel const ContractTable = ({ data }) => (
- + {localize('Contract information')}
@@ -17,7 +17,7 @@ const ContractTable = ({ data }) => ( {localize('Contract type')}
- {data?.cd_contractType} + {data?.cd_contract_type}
@@ -26,39 +26,39 @@ const ContractTable = ({ data }) => (
{data?.cd_transaction_ids && - Object.keys(data?.cd_transaction_ids).map((tik) => { - const transactionName = - tik === 'buy' ? localize('Buy') : localize('Sell'); - return ( - - {data?.cd_transaction_ids[tik]} ({transactionName}) - - ); - })} + Object.keys(data?.cd_transaction_ids).map((tik) => { + const transaction_name = + tik === 'buy' ? localize('Buy') : localize('Sell'); + return ( + + {data?.cd_transaction_ids[tik]} ({transaction_name}) + + ); + })}
- {data?.cd_purchaseTime && ( + {data?.cd_purchase_time && (
{localize('Purchase time')}
{TimeTooltipWrapper( - {data.cd_purchaseTime}, - data.cd_purchaseTime + {data.cd_purchase_time}, + data.cd_purchase_time )}
)} - {data?.cd_startTime && !data?.soldBeforeStart && ( + {data?.cd_start_time && !data?.sold_before_start && (
{localize('Start time')}
{TimeTooltipWrapper( - {data.cd_startTime}, - data.cd_startTime + {data.cd_start_time}, + data.cd_start_time )}
@@ -68,52 +68,52 @@ const ContractTable = ({ data }) => ( {localize('Remaining time')}
- {data?.cd_remainingTime} + {data?.cd_remaining_time}
- {data?.cd_showEntrySpot && ( + {data?.cd_show_entry_spot && (
{localize('Entry spot')}
- {data?.cd_entrySpot} + {data?.cd_entry_spot}
)} {data?.cd_barrier && (
- {data?.cd_barrierLabel} + {data?.cd_barrier_label}
{data?.cd_barrier}
)} - {data?.cd_showBarrierLow && ( + {data?.cd_show_barrier_low && (
{localize('Low barrier')}
- {data?.cd_barrierLow} + {data?.cd_barrier_low}
)} - {data?.cd_showBarrierReset && ( + {data?.cd_show_barrier_reset && (
{localize('Reset barrier')}
- {data?.cd_barrierReset} + {data?.cd_barrier_reset}
)}
- {data?.cd_payoutLabel} + {data?.cd_payout_label}
{parseData(data.cd_payout)} @@ -124,70 +124,70 @@ const ContractTable = ({ data }) => ( {localize('Purchase price')}
- {parseData(data.cd_purchasePrice)} + {parseData(data.cd_purchase_price)}
- - {data?.cd_currentLabel} + + {data?.cd_current_label}
- {data?.cd_showCurrentSpot && ( + {data?.cd_show_current_spot && (
- {data?.cd_spotLabel} + {data?.cd_spot_label}
- {data?.cd_currentSpot} + {data?.cd_current_spot}
)}
- {data?.cd_endLabel || data?.cd_spotTimeLabel} + {data?.cd_end_label || data?.cd_spot_time_label}
{TimeTooltipWrapper( - {data?.cd_endDate || data?.cd_currentDate}, - data?.cd_endDate || data?.cd_currentDate + {data?.cd_end_date || data?.cd_current_date}, + data?.cd_end_date || data?.cd_current_date )}
- {!data?.cd_contractEnded && ( + {!data?.cd_contract_ended && (
{localize('Current time')}
{TimeTooltipWrapper( - {data?.cd_currentTime}, - data?.cd_currentTime + {data?.cd_current_time}, + data?.cd_current_time )}
)}
- {data?.cd_indicativeLabel} + {data?.cd_indicative_label}
- {parseData(data.cd_indicativePrice)} + {parseData(data.cd_indicative_price)}
- {data?.cd_profitLossLabel} + {data?.cd_profit_loss_label}
- - {parseData(data.cd_profitLoss)} + + {parseData(data.cd_profit_loss)}
- {data?.cd_contractEnded ? ( + {data?.cd_contract_ended ? ( <> - {(data?.cd_showAuditBtn && !data?.cd_showAudit) && ( + {(data?.cd_show_audit_button && !data?.cd_show_audit) && (
)} - {data?.cd_sellMsg && ( + {data?.cd_sell_msg && (
)} ) : ( - data?.cd_infoMsg && ( + data?.cd_info_msg && (
) )} - {data?.cd_showSell && ( + {data?.cd_show_sell && (
- {parseData(data.middleComment)} + {parseData(data.middle_comment)}
) : ( <> -
-
-
-
- {data?.topDisplayText} -
-
-
-
- {localize('Stake')}: - {data?.topAmount} {displayCurrency(data?.topAmount)} -
-
- {localize('Payout')}: - {data?.topPayoutAmount} {displayCurrency(data?.topPayoutAmount)} -
-
-
- {ButtonTooltipWrapper(
-
-
-
- {parseData(data.topComment)} -
-
-
-
-
-
- {data?.bottomDisplayText} -
-
-
-
- {localize('Stake')}: - {data?.bottomAmount} {displayCurrency(data?.bottomAmount)} + {purchase_positions.map(position => { + const contract_type = data?.[`${position}_contract_type`]; + const display_text = data?.[`${position}_display_text`]; + const amount = data?.[`${position}_amount`]; + const amount_classname = data?.[`${position}_amount_classname`]; + const payout_amount_classname = data?.[`${position}_payout_amount_classname`]; + const payout_amount = data?.[`${position}_payout_amount`]; + const purchase_disabled = data?.[`${position}_purchase_disabled`]; + const description = data?.[`${position}_description`]; + const comment = data?.[`${position}_comment`]; + + return ( + +
+
+
+
+ {display_text} +
+ +
+
+
+ {localize('Stake')}: + {amount} {displayCurrency(amount)} + +
+
+ {localize('Payout')}: + {payout_amount} {displayCurrency(payout_amount)} + +
+
+ +
+ {ButtonTooltipWrapper(
+
-
- {localize('Payout')}: - {data?.bottomPayoutAmount} {displayCurrency(data?.bottomPayoutAmount)} + +
+ {parseData(comment)}
-
- {ButtonTooltipWrapper(
-
-
- -
- {parseData(data.bottomComment)} -
- -
+ + ); + })} )}
@@ -213,7 +219,7 @@ const Purchase = () => {
- {data?.error?.isCustom ? ( + {data?.error?.is_custom ? ( <> {data?.error.code === 'AuthorizationRequired' && ( <> @@ -221,7 +227,7 @@ const Purchase = () => { variant='primary' size='lg' label={localize('Open a free account')} - onClick={() => window.location.href = data?.error.signupUrl} + onClick={() => window.location.href = data?.error.signup_url} /> {localize('Already have an account?')}
@@ -279,29 +285,29 @@ const Purchase = () => { {data?.pr_description}
- {data?.pr_tablePayoutValue && ( + {data?.pr_table_payout_value && (
- {data?.pr_tablePayout} - {parseData(data.pr_tablePayoutValue)} + {data?.pr_table_payout} + {parseData(data.pr_table_payout_value)}
)} - { data?.pr_tableCostValue && ( + { data?.pr_table_cost_value && (
- {data?.pr_tableCost} - {parseData(data.pr_tableCostValue)} + {data?.pr_table_cost} + {parseData(data.pr_table_cost_value)}
)} - { data?.pr_tableProfitValue && data?.pr_showTableProfit && ( + { data?.pr_table_profit_value && data?.pr_show_table_profit && (
- {data?.pr_tableProfit} - {parseData(data.pr_tableProfitValue)} + {data?.pr_table_profit} + {parseData(data.pr_table_profit_value)}
)}
{data?.pr_barrier && {parseData(data.pr_barrier)}} {data?.pr_reference && {parseData(data.pr_reference)}} - {data?.pr_showBtn &&
{data?.pr_balance} - {parseData(data.pr_balanceValue)} + {parseData(data.pr_balance_value)}
); diff --git a/src/javascript/app/pages/trade/update_values.js b/src/javascript/app/pages/trade/update_values.js index b9f8a168920..743159ab4d6 100644 --- a/src/javascript/app/pages/trade/update_values.js +++ b/src/javascript/app/pages/trade/update_values.js @@ -13,25 +13,25 @@ const updatePurchaseStatus = (final_price, pnl, profit, localized_contract_statu $payout.html($('
', { text: localize('Buy price') }).append($('

', { html: formatMoney(currency, Math.abs(pnl)) }))); $cost.html($('

', { text: localize('Final price') }).append($('

', { html: formatMoney(currency, final_price) }))); dataManager.setPurchase({ - pr_heading : localized_contract_status, - pr_tablePayout : localize('Buy price') , - pr_tablePayoutValue: formatMoney(currency, Math.abs(pnl)), - pr_tableCost : localize('Final price'), - pr_tableCostValue : formatMoney(currency, final_price), + pr_heading : localized_contract_status, + pr_table_payout : localize('Buy price') , + pr_table_payout_value: formatMoney(currency, Math.abs(pnl)), + pr_table_cost : localize('Final price'), + pr_table_cost_value : formatMoney(currency, final_price), }); if (!final_price) { $profit.html($('

', { text: localize('Loss') }).append($('

', { html: formatMoney(currency, pnl) }))); dataManager.setPurchase({ - pr_tableProfit : localize('Loss'), - pr_tableProfitValue: formatMoney(currency, pnl), + pr_table_profit : localize('Loss'), + pr_table_profit_value: formatMoney(currency, pnl), }); } else { $profit.html($('

', { text: localize('Profit') }).append($('

', { html: formatMoney(currency, profit) }))); updateContractBalance(Client.get('balance')); dataManager.setPurchase({ - pr_tableProfit : localize('Profit'), - pr_tableProfitValue: formatMoney(currency, profit), + pr_table_profit : localize('Profit'), + pr_table_profit_value: formatMoney(currency, profit), }); } @@ -40,8 +40,8 @@ const updatePurchaseStatus = (final_price, pnl, profit, localized_contract_statu const updateContractBalance = (balance) => { $('#contract_purchase_balance').html(localize('Account balance:')).append($('

', { html: formatMoney(Client.get('currency'), balance) })); dataManager.setPurchase({ - pr_balance : localize('Account balance:'), - pr_balanceValue: formatMoney(Client.get('currency'), balance), + pr_balance : localize('Account balance:'), + pr_balance_value: formatMoney(Client.get('currency'), balance), }); }; diff --git a/src/javascript/app/pages/user/view_popup/view_popup.js b/src/javascript/app/pages/user/view_popup/view_popup.js index 330281843b0..f609b459d4c 100644 --- a/src/javascript/app/pages/user/view_popup/view_popup.js +++ b/src/javascript/app/pages/user/view_popup/view_popup.js @@ -64,8 +64,8 @@ const ViewPopup = (() => { getContract(); dataManager.setPurchase({ - showContractDetailsPopup: true, - cd_description : null, + show_contract_details_popup: true, + cd_description : null, }); }; @@ -161,10 +161,10 @@ const ViewPopup = (() => { ViewPopupUI.repositionConfirmation(); dataManager.setPurchase({ - cd_contractType : ContractTypeDisplay()[contract.contract_type], - cd_purchasePrice: formatMoney(contract.currency, contract.buy_price), - cd_multiplier : formatMoney(contract.currency, multiplier, false, 3, 2), - cd_payout : Lookback.isLookback(contract.contract_type) ? + cd_contract_type : ContractTypeDisplay()[contract.contract_type], + cd_purchase_price: formatMoney(contract.currency, contract.buy_price), + cd_multiplier : formatMoney(contract.currency, multiplier, false, 3, 2), + cd_payout : Lookback.isLookback(contract.contract_type) ? Lookback.getFormula(contract.contract_type, formatMoney(contract.currency, multiplier, false, 3, 2)) : formatMoney(contract.currency, contract.payout), @@ -181,15 +181,15 @@ const ViewPopup = (() => { $('#trade_details_start_date').parent().setVisibility(0); containerSetText('trade_details_purchase_time', epochToDateTime(contract.purchase_time), '', true); dataManager.setPurchase({ - cd_purchaseTime: epochToDateTime(contract.purchase_time), - soldBeforeStart: true, + cd_purchase_time : epochToDateTime(contract.purchase_time), + sold_before_start: true, }); } else { $('#trade_details_purchase_time').parent().setVisibility(0); containerSetText('trade_details_start_date', epochToDateTime(contract.date_start), '', true); dataManager.setPurchase({ - cd_startTime : epochToDateTime(contract.date_start), - soldBeforeStart: false, + cd_start_time : epochToDateTime(contract.date_start), + sold_before_start: false, }); } @@ -201,8 +201,8 @@ const ViewPopup = (() => { containerSetText('trade_details_barrier', is_sold_before_start ? '-' : addComma(contract.high_barrier), '', true); containerSetText('trade_details_barrier_low', is_sold_before_start ? '-' : addComma(contract.low_barrier), '', true); dataManager.setPurchase({ - cd_barrier : is_sold_before_start ? '-' : addComma(contract.high_barrier), - cd_barrierLow: is_sold_before_start ? '-' : addComma(contract.low_barrier), + cd_barrier : is_sold_before_start ? '-' : addComma(contract.high_barrier), + cd_barrier_low: is_sold_before_start ? '-' : addComma(contract.low_barrier), }); } else if (contract.barrier) { const formatted_barrier = addComma(contract.barrier); @@ -236,8 +236,8 @@ const ViewPopup = (() => { true); dataManager.setPurchase({ - cd_barrier : is_sold_before_start ? '-' : contract.entry_spot_display_value, - cd_barrierReset: contract.entry_tick_time && is_sold_before_start ? '-' : (barrier_prefix + formatted_barrier), + cd_barrier : is_sold_before_start ? '-' : contract.entry_spot_display_value, + cd_barrier_reset: contract.entry_tick_time && is_sold_before_start ? '-' : (barrier_prefix + formatted_barrier), }); } } @@ -252,15 +252,15 @@ const ViewPopup = (() => { if (current_spot) { containerSetText('trade_details_current_spot > span', current_spot); dataManager.setPurchase({ - cd_currentSpot : current_spot, - cd_showCurrentSpot: true, + cd_current_spot : current_spot, + cd_show_current_spot: true, }); $('#trade_details_current_spot').parent().setVisibility(1); } else { $('#trade_details_current_spot').parent().setVisibility(0); dataManager.setPurchase({ - cd_showCurrentSpot: false, + cd_show_current_spot: false, }); } @@ -272,7 +272,7 @@ const ViewPopup = (() => { } containerSetText('trade_details_current_date', epochToDateTime(current_spot_time)); dataManager.setPurchase({ - cd_currentDate: epochToDateTime(current_spot_time), + cd_current_date: epochToDateTime(current_spot_time), }); $('#trade_details_current_date').parent().setVisibility(1); } else { @@ -283,15 +283,15 @@ const ViewPopup = (() => { containerSetText('trade_details_indicative_price', indicative_price ? formatMoney(contract.currency, indicative_price) : '-'); dataManager.setPurchase({ - cd_transaction_ids: contract.transaction_ids, - cd_indicativePrice: indicative_price ? formatMoney(contract.currency, indicative_price) : '-', + cd_transaction_ids : contract.transaction_ids, + cd_indicative_price: indicative_price ? formatMoney(contract.currency, indicative_price) : '-', }); if (is_ended && !contract.sell_price) { containerSetText('trade_details_profit_loss', localize('Waiting for contract settlement.'), { class: 'pending' }); dataManager.setPurchase({ - cd_profitLoss : localize('Waiting for contract settlement.'), - cd_profitLossClass: 'pending', + cd_profit_loss : localize('Waiting for contract settlement.'), + cd_profit_loss_class: 'pending', }); } else if (contract.sell_price || contract.bid_price) { containerSetText('trade_details_profit_loss', @@ -299,14 +299,14 @@ const ViewPopup = (() => { { class: (contract.profit >= 0 ? 'profit' : 'loss') } ); dataManager.setPurchase({ - cd_profitLoss : `${formatMoney(contract.currency, contract.profit)}(${(contract.profit_percentage > 0 ? '+' : '')}${addComma(contract.profit_percentage, 2)}%)`, - cd_profitLossClass: (contract.profit >= 0 ? 'profit' : 'loss'), + cd_profit_loss : `${formatMoney(contract.currency, contract.profit)}(${(contract.profit_percentage > 0 ? '+' : '')}${addComma(contract.profit_percentage, 2)}%)`, + cd_profit_loss_class: (contract.profit >= 0 ? 'profit' : 'loss'), }); } else { containerSetText('trade_details_profit_loss', '-', { class: 'loss' }); dataManager.setPurchase({ - cd_profitLoss : '-', - cd_profitLossClass: 'loss', + cd_profit_loss : '-', + cd_profit_loss_class: 'loss', }); } @@ -330,20 +330,20 @@ const ViewPopup = (() => { containerSetText('trade_details_entry_spot > span', '-'); containerSetText('trade_details_message', localize('Contract has not started yet')); dataManager.setPurchase({ - cd_entrySpot: '-', - cd_infoMsg : localize('Contract has not started yet'), + cd_entry_spot: '-', + cd_info_msg : localize('Contract has not started yet'), }); } else { if (contract.entry_spot > 0) { // only show entry spot if available and contract was not sold before start time containerSetText('trade_details_entry_spot > span', is_sold_before_start ? '-' : contract.entry_spot_display_value); dataManager.setPurchase({ - cd_entrySpot: is_sold_before_start ? '-' : contract.entry_spot_display_value, + cd_entry_spot: is_sold_before_start ? '-' : contract.entry_spot_display_value, }); } containerSetText('trade_details_message', contract.validation_error && !is_unsupported_contract ? contract.validation_error : ' '); dataManager.setPurchase({ - cd_infoMsg: contract.validation_error && !is_unsupported_contract ? contract.validation_error : null, + cd_info_msg: contract.validation_error && !is_unsupported_contract ? contract.validation_error : null, }); if (is_unsupported_contract) { const redirect = ``; @@ -404,7 +404,7 @@ const ViewPopup = (() => { Clock.setExternalTimer(); // stop timer dataManager.setPurchase({ - cd_remainingTime: '-', + cd_remaining_time: '-', }); } else { $container.find('#notice_ongoing').setVisibility(1); @@ -427,7 +427,7 @@ const ViewPopup = (() => { const now = Math.max(Math.floor((window.time || 0) / 1000), contract.current_spot_time || 0); containerSetText('trade_details_live_date', epochToDateTime(now)); dataManager.setPurchase({ - cd_currentTime: epochToDateTime(now), + cd_current_time: epochToDateTime(now), }); Clock.showLocalTimeOnHover('#trade_details_live_date'); @@ -436,7 +436,7 @@ const ViewPopup = (() => { if (!is_started || contract.status !== 'open' || remained < 0) { containerSetText('trade_details_live_remaining', '-'); dataManager.setPurchase({ - cd_remainingTime: '-', + cd_remaining_time: '-', }); } else { let days = 0; @@ -449,8 +449,8 @@ const ViewPopup = (() => { (days > 0 ? `${days} ${days > 1 ? localize('days') : localize('day')}, ` : '') + moment((remained) * 1000).utc().format('HH:mm:ss')); dataManager.setPurchase({ - cd_remainingTime: (days > 0 ? `${days} ${days > 1 ? localize('days') : localize('day')}, ` : '') + moment((remained) * 1000).utc().format('HH:mm:ss'), - cd_contractEnded: false, + cd_remaining_time: (days > 0 ? `${days} ${days > 1 ? localize('days') : localize('day')}, ` : '') + moment((remained) * 1000).utc().format('HH:mm:ss'), + cd_contract_ended: false, }); } }; @@ -466,33 +466,33 @@ const ViewPopup = (() => { containerSetText('trade_details_profit_loss_label', localize('Profit/loss')); dataManager.setPurchase({ - cd_currentLabel : localize('Contract result'), - cd_indicativeLabel: localize('Payout'), - cd_profitLossLabel: localize('Profit/loss'), - cd_contractEnded : true, + cd_current_label : localize('Contract result'), + cd_indicative_label : localize('Payout'), + cd_profit_loss_label: localize('Profit/loss'), + cd_contract_ended : true, }); if (contract.status === 'sold') { containerSetText('trade_details_end_label', localize('Exit time')); containerSetText('trade_details_end_date', epochToDateTime(contract.sell_time), '', true); dataManager.setPurchase({ - cd_endLabel: localize('Exit time'), - cd_endDate : epochToDateTime(contract.sell_time), + cd_end_label: localize('Exit time'), + cd_end_date : epochToDateTime(contract.sell_time), }); } if (Lookback.isLookback(contract.contract_type)) { containerSetText('trade_details_spot_label', localize('Close')); containerSetText('trade_details_spottime_label', localize('Close time')); dataManager.setPurchase({ - cd_spotLabel : localize('Close'), - cd_spotTimeLabel: localize('Close time'), + cd_spot_label : localize('Close'), + cd_spot_time_label: localize('Close time'), }); } else { containerSetText('trade_details_spot_label', localize('Exit spot')); containerSetText('trade_details_spottime_label', localize('Exit spot time')); dataManager.setPurchase({ - cd_spotLabel : localize('Exit spot'), - cd_spotTimeLabel: localize('Exit spot time'), + cd_spot_label : localize('Exit spot'), + cd_spot_time_label: localize('Exit spot time'), }); } @@ -540,12 +540,12 @@ const ViewPopup = (() => { if (show) { setAuditVisibility(1); dataManager.setPurchase({ - cd_showAudit: true, + cd_show_audit: true, }); } else { setAuditButtonsVisibility(1); dataManager.setPurchase({ - cd_showAudit: false, + cd_show_audit: false, }); } return; @@ -724,7 +724,7 @@ const ViewPopup = (() => { createAuditHeader(contract_starts.table); appendAuditLink('trade_details_entry_spot'); dataManager.setPurchase({ - cd_showAuditBtn: true, + cd_show_audit_button: true, }); } else { contract_starts.div.remove(); @@ -737,7 +737,7 @@ const ViewPopup = (() => { createAuditHeader(contract_ends.table); appendAuditLink('trade_details_current_spot'); dataManager.setPurchase({ - cd_showAuditBtn: true, + cd_show_audit_button: true, }); } else { contract_ends.div.remove(); @@ -756,7 +756,7 @@ const ViewPopup = (() => { appendAuditLink('trade_details_entry_spot'); appendAuditLink('trade_details_current_spot'); dataManager.setPurchase({ - cd_showAuditBtn: true, + cd_show_audit_button: true, }); } else { contract_details.div.remove(); @@ -838,20 +838,20 @@ const ViewPopup = (() => { // Pass all contract details to new quill contract detail popup // cd_ prefix is Contract Details dataManager.setPurchase({ - cd_description : longcode, - cd_showEntrySpot : should_show_entry_spot, - cd_showBarrier : should_show_barrier, - cd_showBarrierReset: Reset.isReset(contract.contract_type), - cd_showBarrierLow : contract.barrier_count > 1 , - cd_barrierLabel : barrier_text, - cd_spotLabel : localize('Spot'), - cd_lowBarrierText : low_barrier_text, - cd_payoutLabel : Callputspread.isCallputspread(contract.contract_type) ? localize('Maximum payout') : localize('Potential payout'), - cd_chartId : (contract.tick_count ? id_tick_chart : 'analysis_live_chart'), - cd_currentLabel : localize('Current'), - cd_spotTimeLabel : localize('Spot time'), - cd_indicativeLabel : localize('Indicative'), - cd_profitLossLabel : localize('Potential profit/loss'), + cd_description : longcode, + cd_show_entry_spot : should_show_entry_spot, + cd_show_barrier : should_show_barrier, + cd_show_barrier_reset: Reset.isReset(contract.contract_type), + cd_show_barrier_low : contract.barrier_count > 1 , + cd_barrier_label : barrier_text, + cd_spot_label : localize('Spot'), + cd_low_barrier_text : low_barrier_text, + cd_payout_label : Callputspread.isCallputspread(contract.contract_type) ? localize('Maximum payout') : localize('Potential payout'), + cd_chart_id : (contract.tick_count ? id_tick_chart : 'analysis_live_chart'), + cd_current_label : localize('Current'), + cd_spot_time_label : localize('Spot time'), + cd_indicative_label : localize('Indicative'), + cd_profit_loss_label : localize('Potential profit/loss'), }); return $(`#${wrapper_id}`); @@ -885,7 +885,7 @@ const ViewPopup = (() => { } } else if ($loading) { dataManager.setContract({ - hidePageLoader: true, + hide_page_loader: true, }); if ($loading.length) { @@ -921,7 +921,7 @@ const ViewPopup = (() => { const is_started = !contract.is_forward_starting || contract.current_spot_time > contract.date_start; const $sell_wrapper = $container.find('#contract_sell_wrapper'); dataManager.setPurchase({ - cd_showSell: true, + cd_show_sell: true, }); if (is_exist) { @@ -929,7 +929,7 @@ const ViewPopup = (() => { addSellNote($sell_wrapper); $sell_wrapper.find(`#${sell_button_id}`).text(localize('Sell at market')); dataManager.setPurchase({ - cd_sellLabel: localize('Sell at market'), + cd_sell_label: localize('Sell at market'), }); } return; @@ -943,7 +943,7 @@ const ViewPopup = (() => { } dataManager.setPurchase({ - cd_sellLabel: is_started ? localize('Sell at market') : localize('Sell'), + cd_sell_label: is_started ? localize('Sell at market') : localize('Sell'), }); $container.find(`#${sell_button_id}`).unbind('click').click((e) => { @@ -958,7 +958,7 @@ const ViewPopup = (() => { }); } else { dataManager.setPurchase({ - cd_showSell: false, + cd_show_sell: false, }); if (!is_exist) return; @@ -974,8 +974,8 @@ const ViewPopup = (() => { .append($('', { text: localize('Contract will be sold at the prevailing market price when the request is received by our servers. This price may differ from the indicated price.') }))); dataManager.setPurchase({ - cd_sellInfo: `${localize('Note')}: ${localize('Contract will be sold at the prevailing market price when the request is received by our servers. This price may differ from the indicated price.')}`, - cd_showSell: true, + cd_sell_info: `${localize('Note')}: ${localize('Contract will be sold at the prevailing market price when the request is received by our servers. This price may differ from the indicated price.')}`, + cd_show_sell: true, }); }; @@ -1001,7 +1001,7 @@ const ViewPopup = (() => { } else { $container.find('#errMsg').text(response.error.message).setVisibility(1); dataManager.setPurchase({ - cd_errorMsg: response.error.message, + cd_error_msg: response.error.message, }); } sellSetVisibility(true); @@ -1018,7 +1018,7 @@ const ViewPopup = (() => {
${localize('Your transaction reference number is [_1]', response.sell.transaction_id)}`); dataManager.setPurchase({ - cd_sellMsg: `${localize('You have sold this contract at [_1] [_2]', [formatted_sell_price, getCurrencyDisplayCode(contract.currency)])} + cd_sell_msg: `${localize('You have sold this contract at [_1] [_2]', [formatted_sell_price, getCurrencyDisplayCode(contract.currency)])}
${localize('Your transaction reference number is [_1]', response.sell.transaction_id)}`, });