Skip to content

Commit

Permalink
Merge branch 'master' into chart-bug-fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@prince-deriv
prince-deriv committed Aug 20, 2024
2 parents f996312 + 0104066 commit b33e4b1
Show file tree
Hide file tree
Showing 25 changed files with 475 additions and 470 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.46",
"@deriv/deriv-api": "^1.0.15",
"@deriv/quill-icons": "^1.23.1",
Expand Down
16 changes: 8 additions & 8 deletions src/javascript/app/common/data_manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion src/javascript/app/components/loading-spinner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/javascript/app/pages/bottom/data/explanation.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { localize } from '../../../../_common/localize.js';

export const contractExplanationData = {
export const contract_explanation_data = {
winning: {
asian: {

Expand Down
60 changes: 30 additions & 30 deletions src/javascript/app/pages/bottom/explanation.jsx
View file
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -31,7 +31,7 @@ export const Explanation = ({ explanationOnly = false }) => {
const Notes = () => (
<>
<strong>{localize('Note')}: </strong>
{contractExplanationData.note[formName].content.map((data, idx) => (
{contract_explanation_data.note[form_name].content.map((data, idx) => (
<span key={idx}>{parse(data)}</span>
))}
</>
Expand Down Expand Up @@ -93,21 +93,21 @@ export const Explanation = ({ explanationOnly = false }) => {
},
};

if (formName) {
if (form_name) {
return (
<div className='tab-explanation'>
{/* ========== Winning ========== */}
{!explanationOnly && (
{!explanation_only && (
<>
<div id='explanation_winning'>
<div id={`winning_${formName}`}>
<div id={`winning_${form_name}`}>
<div className='explanation-heading'>
<Text size='lg' bold >{localize('Winning the contract')}</Text>
<Text size='lg' bold>{localize('Winning the contract')}</Text>
</div>
<div className='explanation-content'>
{contractExplanationData.winning[formName].content.map(
{contract_explanation_data.winning[form_name].content.map(
(data, idx) => (
<Text size='md' key={idx}>{parse(data)}</Text>
<Text key={idx}>{parse(data)}</Text>
)
)}
</div>
Expand All @@ -116,7 +116,7 @@ export const Explanation = ({ explanationOnly = false }) => {
</div>

{/* ========== Image ========== */}
{images[formName] && (
{images[form_name] && (
<div id='explanation_image'>
<div className='gr-row'>
<div className='gr-2 hide-mobile' />
Expand All @@ -127,15 +127,15 @@ export const Explanation = ({ explanationOnly = false }) => {
<img
id='explanation_image_1'
className='responsive'
src={`${image_path}${images[formName].image1}?${process.env.BUILD_HASH}`}
src={`${image_path}${images[form_name].image1}?${process.env.BUILD_HASH}`}
/>
</div>
{images[formName].image2 && (
{images[form_name].image2 && (
<div className='gr-4 gr-12-m padding-left'>
<img
id='explanation_image_2'
className='responsive'
src={`${image_path}${images[formName].image2}?${process.env.BUILD_HASH}`}
src={`${image_path}${images[form_name].image2}?${process.env.BUILD_HASH}`}
/>
</div>
)}
Expand All @@ -149,31 +149,31 @@ export const Explanation = ({ explanationOnly = false }) => {

{/* ========== Explain ========== */}
<div id='explanation_explain' className='gr-child'>
<div id={`explain_${formName}`} >
<div id={`explain_${form_name}`} >
<div className='explanation-heading'>
<Text size='lg' bold >{contractExplanationData.explain[formName].title}</Text>
<Text size='lg' bold >{contract_explanation_data.explain[form_name].title}</Text>
</div>
<div className='explanation-content'>
{contractExplanationData.explain[formName].content.map(
{contract_explanation_data.explain[form_name].content.map(
(data, idx) => (
<Text size='md' key={idx}>{parse(data)}</Text>
<Text key={idx}>{parse(data)}</Text>
)
)}
</div>

{contractExplanationData.explain[formName].title_secondary && (
{contract_explanation_data.explain[form_name].title_secondary && (
<div className='explanation-heading secondary-heading'>
<Text size='lg' bold>
{contractExplanationData.explain[formName].title_secondary}
{contract_explanation_data.explain[form_name].title_secondary}
</Text>
</div>
)}

{contractExplanationData.explain[formName].content_secondary && (
{contract_explanation_data.explain[form_name].content_secondary && (
<div className='explanation-content'>
{contractExplanationData.explain[formName].content_secondary.map(
{contract_explanation_data.explain[form_name].content_secondary.map(
(data, idx) => (
<Text size='md' key={idx}>{parse(data)}</Text>
<Text key={idx}>{parse(data)}</Text>
)
)}
</div>
Expand All @@ -183,16 +183,16 @@ export const Explanation = ({ explanationOnly = false }) => {
</div>

{/* ========== Note ========== */}
{!explanationOnly && (
contractExplanationData.note[formName] && (
{!explanation_only && (
contract_explanation_data.note[form_name] && (
<SectionMessage status='info' message={<Notes />} size='sm' />
)
)}
</div>
);
}

if (explanationOnly) {
if (explanation_only) {
return (
<div className='explanation-container-loader'>
<Skeleton.Square width={250} height={50} rounded />
Expand Down
60 changes: 30 additions & 30 deletions src/javascript/app/pages/bottom/tabs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();
},[]);
Expand All @@ -76,20 +76,20 @@ const BottomTabs = () => {
<>
<div className='quill-container-centered'>
<SegmentedControlSingleChoice
options={bottomTabOptions}
selectedItemIndex={selectedTab}
options={bottom_tab_options}
selectedItemIndex={selected_tab}
onChange={handleChange}
/>
</div>
<div className='bottom-content-section'>
{selectedTab === 0 && <Graph
{selected_tab === 0 && <Graph
onUnload={() => setIsShowGraph(false)}
onLoad={() => setIsShowGraph(true)}
/>}
{selectedTab === 1 && <Explanation />}
{selectedTab === 2 && hasLastDigit && <LastDigit />}
{selected_tab === 1 && <Explanation />}
{selected_tab === 2 && has_last_digit && <LastDigit />}

<div id='tab_graph' className={`chart-section ${isShowGraph ? '' : 'graph-hide'}`}>
<div id='tab_graph' className={`chart-section ${is_show_graph ? '' : 'graph-hide'}`}>
<p className='error-msg' id='chart-error' />
<div id='trade_live_chart'>
<div id='webtrader_chart' />
Expand Down
8 changes: 4 additions & 4 deletions src/javascript/app/pages/form/barrier-fields.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Loading

0 comments on commit b33e4b1

Please sign in to comment.