From 5849358e3fba3f1e5280b284da47a8ea9fa72aaf Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Mon, 3 Jun 2019 15:34:12 +0800 Subject: [PATCH 01/21] switch to contract mode on response of buy --- .../app/Stores/Modules/Contract/contract-store.js | 12 ++++++++++-- .../Stores/Modules/SmartChart/smart-chart-store.js | 8 ++++++++ .../app/Stores/Modules/Trading/trade-store.js | 9 +++++++-- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index 8d5d35e6611c..c3ee7d3dbb89 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -8,6 +8,8 @@ import { localize } from '_common/localize'; import { WS } from 'Services'; import { createChartBarrier } from './Helpers/chart-barriers'; import { createChartMarkers } from './Helpers/chart-markers'; +import { + createMarkerStartTime } from './Helpers/chart-marker-helpers'; import { getDetailsExpiry, getDetailsInfo } from './Helpers/details'; @@ -114,10 +116,10 @@ export default class ContractStore extends BaseStore { } @action.bound - onMount(contract_id, is_from_positions) { + onMount(contract_id, is_from_positions, purchase_time, longcode) { if (contract_id === +this.contract_id) return; - if (this.root_store.modules.smart_chart.is_contract_mode) this.onCloseContract(); this.onSwitchAccount(this.accountSwitcherListener.bind(null)); + if (this.is_from_positions) this.onCloseContract(); this.has_error = false; this.error_message = ''; this.contract_id = contract_id; @@ -129,6 +131,12 @@ export default class ContractStore extends BaseStore { if (this.is_from_positions) { this.smart_chart.setIsChartLoading(true); } + if (!this.is_from_positions) { + const contract_info = { date_start: purchase_time }; + this.contract_info.longcode = longcode; + createMarkerStartTime(contract_info); + createChartMarkers(this.smart_chart, contract_info); + } this.smart_chart.saveAndClearTradeChartLayout('contract'); this.smart_chart.setContractMode(true); WS.subscribeProposalOpenContract(this.contract_id.toString(), this.updateProposal, false); diff --git a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js index 1e8c39500df5..1beaeda91696 100644 --- a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js +++ b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js @@ -40,6 +40,14 @@ export default class SmartChartStore extends BaseStore { @observable trade_chart_layout = null; trade_chart_symbol = null; + @action.bound + switchToContractMode(purchase_time) { + this.setContractMode(true); + this.setChartView(purchase_time); + this.updateGranularity(0); + this.updateChartType('mountain'); + } + @action.bound getChartStatus(status) { this.is_chart_ready = status; diff --git a/src/javascript/app/Stores/Modules/Trading/trade-store.js b/src/javascript/app/Stores/Modules/Trading/trade-store.js index 412ae52669b6..b224a36addbe 100644 --- a/src/javascript/app/Stores/Modules/Trading/trade-store.js +++ b/src/javascript/app/Stores/Modules/Trading/trade-store.js @@ -274,10 +274,15 @@ export default class TradeStore extends BaseStore { ...this.proposal_info[type], buy_price: response.buy.buy_price, }; + const { + contract_id, + longcode, + purchase_time, + } = response.buy; // toggle smartcharts to contract mode - const contract_id = getPropertyValue(response, ['buy', 'contract_id']); if (contract_id) { - this.root_store.modules.contract.onMount(contract_id); + this.root_store.modules.smart_chart.switchToContractMode(purchase_time); + this.root_store.modules.contract.onMount(contract_id, false, purchase_time, longcode); this.root_store.ui.openPositionsDrawer(); } GTM.pushPurchaseData(contract_data, this.root_store); From 8d4bb120e63bcd6cdbae244d23a599d33fb7393b Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Mon, 3 Jun 2019 16:19:53 +0800 Subject: [PATCH 02/21] set static chart to false if tick_count is 1 --- .../app/Stores/Modules/Contract/contract-store.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index c3ee7d3dbb89..c9c4c3e9d19e 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -8,8 +8,7 @@ import { localize } from '_common/localize'; import { WS } from 'Services'; import { createChartBarrier } from './Helpers/chart-barriers'; import { createChartMarkers } from './Helpers/chart-markers'; -import { - createMarkerStartTime } from './Helpers/chart-marker-helpers'; +import { createMarkerStartTime } from './Helpers/chart-marker-helpers'; import { getDetailsExpiry, getDetailsInfo } from './Helpers/details'; @@ -65,7 +64,7 @@ export default class ContractStore extends BaseStore { @action.bound drawChart(SmartChartStore, contract_info) { this.forget_id = contract_info.id; - const { date_start } = contract_info; + const { date_start, tick_count } = contract_info; const end_time = getEndTime(contract_info); SmartChartStore.setChartView(contract_info.purchase_time); @@ -73,7 +72,7 @@ export default class ContractStore extends BaseStore { // finish contracts if end_time exists if (end_time) { - if (!this.is_ongoing_contract) { + if (!this.is_ongoing_contract && !(tick_count < 2)) { SmartChartStore.setStaticChart(true); } else { SmartChartStore.setStaticChart(false); From c161a2c164931cdc0661b0f749a087e7de2dcc6d Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Mon, 3 Jun 2019 17:01:40 +0800 Subject: [PATCH 03/21] setChartView first --- .../app/Stores/Modules/SmartChart/smart-chart-store.js | 3 +-- src/javascript/app/Stores/Modules/Trading/trade-store.js | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js index 1beaeda91696..cbbe66716e2c 100644 --- a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js +++ b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js @@ -41,9 +41,8 @@ export default class SmartChartStore extends BaseStore { trade_chart_symbol = null; @action.bound - switchToContractMode(purchase_time) { + switchToContractMode() { this.setContractMode(true); - this.setChartView(purchase_time); this.updateGranularity(0); this.updateChartType('mountain'); } diff --git a/src/javascript/app/Stores/Modules/Trading/trade-store.js b/src/javascript/app/Stores/Modules/Trading/trade-store.js index b224a36addbe..ea6299716a27 100644 --- a/src/javascript/app/Stores/Modules/Trading/trade-store.js +++ b/src/javascript/app/Stores/Modules/Trading/trade-store.js @@ -281,7 +281,8 @@ export default class TradeStore extends BaseStore { } = response.buy; // toggle smartcharts to contract mode if (contract_id) { - this.root_store.modules.smart_chart.switchToContractMode(purchase_time); + this.root_store.modules.smart_chart.setChartView(purchase_time); + this.root_store.modules.smart_chart.switchToContractMode(); this.root_store.modules.contract.onMount(contract_id, false, purchase_time, longcode); this.root_store.ui.openPositionsDrawer(); } From f69851f9dd79d26d958c6b36d46fe54c480c78af Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 4 Jun 2019 00:11:21 +0800 Subject: [PATCH 04/21] check if is_from_positions --- src/javascript/app/Stores/Modules/Contract/contract-store.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index c9c4c3e9d19e..0bf280ec4432 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -118,7 +118,7 @@ export default class ContractStore extends BaseStore { onMount(contract_id, is_from_positions, purchase_time, longcode) { if (contract_id === +this.contract_id) return; this.onSwitchAccount(this.accountSwitcherListener.bind(null)); - if (this.is_from_positions) this.onCloseContract(); + if (is_from_positions) this.onCloseContract(); this.has_error = false; this.error_message = ''; this.contract_id = contract_id; From 6241dada63de96167c83b493c9a9ce9eebf937b9 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 4 Jun 2019 10:33:02 +0800 Subject: [PATCH 05/21] refactor, add comments --- .../Stores/Modules/Contract/contract-store.js | 101 +++++++++--------- .../Modules/SmartChart/smart-chart-store.js | 3 + .../app/Stores/Modules/Trading/trade-store.js | 9 +- 3 files changed, 61 insertions(+), 52 deletions(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index 0bf280ec4432..25a9fedc4414 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -8,7 +8,6 @@ import { localize } from '_common/localize'; import { WS } from 'Services'; import { createChartBarrier } from './Helpers/chart-barriers'; import { createChartMarkers } from './Helpers/chart-markers'; -import { createMarkerStartTime } from './Helpers/chart-marker-helpers'; import { getDetailsExpiry, getDetailsInfo } from './Helpers/details'; @@ -62,52 +61,61 @@ export default class ContractStore extends BaseStore { // ----- Actions ----- // ------------------- @action.bound - drawChart(SmartChartStore, contract_info) { - this.forget_id = contract_info.id; - const { date_start, tick_count } = contract_info; - const end_time = getEndTime(contract_info); - - SmartChartStore.setChartView(contract_info.purchase_time); + drawChart() { + const { + date_expiry, + date_start, + id, + purchase_time, + tick_count, + } = this.contract_info; + + this.forget_id = id; + const end_time = getEndTime(this.contract_info); + + this.smart_chart.setChartView(purchase_time); if (!end_time) this.is_ongoing_contract = true; // finish contracts if end_time exists if (end_time) { if (!this.is_ongoing_contract && !(tick_count < 2)) { - SmartChartStore.setStaticChart(true); + // set to static chart for contracts with 1 tick_count + // to avoid chart from reloading + this.smart_chart.setStaticChart(true); } else { - SmartChartStore.setStaticChart(false); + this.smart_chart.setStaticChart(false); } - SmartChartStore.setContractStart(date_start); - SmartChartStore.setContractEnd(end_time); + this.smart_chart.setContractStart(date_start); + this.smart_chart.setContractEnd(end_time); - if (!contract_info.tick_count) { - this.handleChartType(SmartChartStore, date_start, end_time); + if (!tick_count) { + this.handleChartType(date_start, end_time); } else { - SmartChartStore.updateGranularity(0); - SmartChartStore.updateChartType('mountain'); + this.smart_chart.updateGranularity(0); + this.smart_chart.updateChartType('mountain'); } // Clear chart loading status once ChartListener returns ready for completed contract if (!this.is_ongoing_contract) { - this.waitForChartListener(SmartChartStore); + this.waitForChartListener(); } // setters for ongoing contracts, will only init once onMount after left_epoch is set } else { if (this.is_from_positions) { - SmartChartStore.setContractStart(date_start); + this.smart_chart.setContractStart(date_start); } - if (contract_info.tick_count) { - SmartChartStore.updateGranularity(0); - SmartChartStore.updateChartType('mountain'); + if (tick_count) { + this.smart_chart.updateGranularity(0); + this.smart_chart.updateChartType('mountain'); } else { - this.handleChartType(SmartChartStore, date_start, null); + this.handleChartType(date_start, null); } } - SmartChartStore.updateMargin((end_time || contract_info.date_expiry) - date_start); + this.smart_chart.updateMargin((end_time || date_expiry) - date_start); - createChartBarrier(SmartChartStore, contract_info, this.root_store.ui.is_dark_mode_on); - createChartMarkers(SmartChartStore, contract_info); + createChartBarrier(this.smart_chart, this.contract_info, this.root_store.ui.is_dark_mode_on); + createChartMarkers(this.smart_chart, this.contract_info); if (this.smart_chart.is_chart_ready) { this.smart_chart.setIsChartLoading(false); @@ -115,7 +123,13 @@ export default class ContractStore extends BaseStore { } @action.bound - onMount(contract_id, is_from_positions, purchase_time, longcode) { + drawContractStartTime(date_start, longcode) { + this.contract_info.longcode = longcode; + createChartMarkers(this.root_store.modules.smart_chart, { date_start }); + } + + @action.bound + onMount(contract_id, is_from_positions) { if (contract_id === +this.contract_id) return; this.onSwitchAccount(this.accountSwitcherListener.bind(null)); if (is_from_positions) this.onCloseContract(); @@ -129,15 +143,8 @@ export default class ContractStore extends BaseStore { this.replay_info = {}; if (this.is_from_positions) { this.smart_chart.setIsChartLoading(true); + this.smart_chart.switchToContractMode(); } - if (!this.is_from_positions) { - const contract_info = { date_start: purchase_time }; - this.contract_info.longcode = longcode; - createMarkerStartTime(contract_info); - createChartMarkers(this.smart_chart, contract_info); - } - this.smart_chart.saveAndClearTradeChartLayout('contract'); - this.smart_chart.setContractMode(true); WS.subscribeProposalOpenContract(this.contract_id.toString(), this.updateProposal, false); } } @@ -178,7 +185,6 @@ export default class ContractStore extends BaseStore { @action.bound onCloseContract() { - this.chart_type = 'mountain'; this.contract_id = null; this.contract_info = {}; this.digits_info = {}; @@ -190,6 +196,7 @@ export default class ContractStore extends BaseStore { this.is_ongoing_contract = false; this.sell_info = {}; + this.smart_chart.updateChartType('mountain'); this.smart_chart.cleanupContractChartView(); this.smart_chart.applySavedTradeChartLayout(); WS.forgetAll('proposal').then(this.root_store.modules.trade.requestProposal()); @@ -255,8 +262,7 @@ export default class ContractStore extends BaseStore { createChartMarkers(this.smart_chart, this.replay_info); this.handleDigits(this.replay_info); - this.waitForChartListener(this.smart_chart); - + this.waitForChartListener(); } @action.bound @@ -286,7 +292,7 @@ export default class ContractStore extends BaseStore { this.root_store.modules.trade.updateSymbol(this.contract_info.underlying); } - this.drawChart(this.smart_chart, this.contract_info); + this.drawChart(this.contract_info); this.handleDigits(this.contract_info); } @@ -328,37 +334,32 @@ export default class ContractStore extends BaseStore { } } - handleChartType(SmartChartStore, start, expiry) { + @action.bound + handleChartType(start, expiry) { const chart_type = getChartType(start, expiry); const granularity = getChartGranularity(start, expiry); - if (chart_type === 'candle') { - this.chart_type = chart_type; - SmartChartStore.updateChartType(chart_type); - } else { - this.chart_type = 'mountain'; - SmartChartStore.updateChartType('mountain'); - } - SmartChartStore.updateGranularity(granularity); + this.smart_chart.updateChartType(chart_type); + this.smart_chart.updateGranularity(granularity); } forgetProposalOpenContract() { WS.forget('proposal_open_contract', this.updateProposal, { id: this.forget_id }); } - waitForChartListener = (SmartChartStore) => { + waitForChartListener = () => { // TODO: Refactor, timeout interval is required for completed contracts. // There is an issue when we receive the proposal_open_contract response // for a completed contract and chartListener returns false for that single instance / single response. // Hence, we need to set an interval to keep checking the chartListener until it returns true let timer; - if (!SmartChartStore.is_chart_ready) { + if (!this.smart_chart.is_chart_ready) { // console.log('waiting for listener'); - timer = setTimeout(() => this.waitForChartListener(SmartChartStore), 500); + timer = setTimeout(() => this.waitForChartListener(), 500); } else { // console.log('cleared listener'); - SmartChartStore.setIsChartLoading(false); + this.smart_chart.setIsChartLoading(false); clearTimeout(timer); } }; diff --git a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js index cbbe66716e2c..ac707389f8fe 100644 --- a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js +++ b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js @@ -42,7 +42,10 @@ export default class SmartChartStore extends BaseStore { @action.bound switchToContractMode() { + this.saveAndClearTradeChartLayout('contract'); this.setContractMode(true); + // In contract mode, the chart granularity should always be 0 + // and the chart_type should always be 'mountain' this.updateGranularity(0); this.updateChartType('mountain'); } diff --git a/src/javascript/app/Stores/Modules/Trading/trade-store.js b/src/javascript/app/Stores/Modules/Trading/trade-store.js index ea6299716a27..39bc6c74e06d 100644 --- a/src/javascript/app/Stores/Modules/Trading/trade-store.js +++ b/src/javascript/app/Stores/Modules/Trading/trade-store.js @@ -281,9 +281,14 @@ export default class TradeStore extends BaseStore { } = response.buy; // toggle smartcharts to contract mode if (contract_id) { - this.root_store.modules.smart_chart.setChartView(purchase_time); + // NOTE: changing chart granularity and chart_type has to be done in a different render cycle + // so we have to set chart granularity to zero, and change the chart_type to 'mountain' first, + // and then set the chart view to the purchase_time this.root_store.modules.smart_chart.switchToContractMode(); - this.root_store.modules.contract.onMount(contract_id, false, purchase_time, longcode); + this.root_store.modules.smart_chart.setChartView(purchase_time); + // draw the start time line and show longcode before mounting contract + this.root_store.modules.contract.drawContractStartTime(purchase_time, longcode); + this.root_store.modules.contract.onMount(contract_id, false); this.root_store.ui.openPositionsDrawer(); } GTM.pushPurchaseData(contract_data, this.root_store); From 02e754fc83a6c56b58104d7beec0e6f82aa3ae2b Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 4 Jun 2019 11:36:49 +0800 Subject: [PATCH 06/21] Update src/javascript/app/Stores/Modules/Contract/contract-store.js Co-Authored-By: Oskar Ahlroth --- src/javascript/app/Stores/Modules/Contract/contract-store.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index 25a9fedc4414..14104e6a99c5 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -78,7 +78,8 @@ export default class ContractStore extends BaseStore { // finish contracts if end_time exists if (end_time) { - if (!this.is_ongoing_contract && !(tick_count < 2)) { + const is_one_tick_contract = (tick_count < 2); + if (!this.is_ongoing_contract && !is_one_tick_contract) { // set to static chart for contracts with 1 tick_count // to avoid chart from reloading this.smart_chart.setStaticChart(true); From 7758ca7231c4b97d7ae922f265930052e6ad6a04 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 4 Jun 2019 11:49:03 +0800 Subject: [PATCH 07/21] update comments --- src/javascript/app/Stores/Modules/Contract/contract-store.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index 14104e6a99c5..137a2a13e1ed 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -80,7 +80,7 @@ export default class ContractStore extends BaseStore { if (end_time) { const is_one_tick_contract = (tick_count < 2); if (!this.is_ongoing_contract && !is_one_tick_contract) { - // set to static chart for contracts with 1 tick_count + // set to static chart for non one tick contract // to avoid chart from reloading this.smart_chart.setStaticChart(true); } else { From d56d76527dc158bd1b93256f2a10881e6e27c7d1 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 4 Jun 2019 11:49:52 +0800 Subject: [PATCH 08/21] remove setting chart_type to 'mountain' --- src/javascript/app/Stores/Modules/Contract/contract-store.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index 137a2a13e1ed..7ed629577025 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -197,7 +197,6 @@ export default class ContractStore extends BaseStore { this.is_ongoing_contract = false; this.sell_info = {}; - this.smart_chart.updateChartType('mountain'); this.smart_chart.cleanupContractChartView(); this.smart_chart.applySavedTradeChartLayout(); WS.forgetAll('proposal').then(this.root_store.modules.trade.requestProposal()); From 99e4d22a27f9397c58f34d9df98af666b8f79439 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 4 Jun 2019 13:53:30 +0800 Subject: [PATCH 09/21] get this.smart_chart before onCloseContract --- src/javascript/app/Stores/Modules/Contract/contract-store.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index 7e688cd6e8bd..26cf118033b3 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -130,11 +130,11 @@ export default class ContractStore extends BaseStore { onMount(contract_id, is_from_positions) { if (contract_id === +this.contract_id) return; this.onSwitchAccount(this.accountSwitcherListener.bind(null)); + this.smart_chart = this.root_store.modules.smart_chart; if (is_from_positions) this.onCloseContract(); this.has_error = false; this.error_message = ''; this.contract_id = contract_id; - this.smart_chart = this.root_store.modules.smart_chart; this.is_from_positions = is_from_positions; if (contract_id) { From c85d1a0d981cd79c202f4d4a60d5678cc8585bf8 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 4 Jun 2019 15:29:22 +0800 Subject: [PATCH 10/21] more refactoring --- .../Stores/Modules/Contract/contract-store.js | 26 ++++++------------- .../Modules/SmartChart/smart-chart-store.js | 8 +++--- 2 files changed, 11 insertions(+), 23 deletions(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index 26cf118033b3..e0c43a6b392f 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -70,14 +70,19 @@ export default class ContractStore extends BaseStore { const end_time = getEndTime(this.contract_info); + // Set chart granularity and chart_type + this.handleChartType(date_start, end_time || null); + + // Set chart view to purchase_time this.smart_chart.setChartView(purchase_time); + if (!end_time) this.is_ongoing_contract = true; // finish contracts if end_time exists if (end_time) { const is_one_tick_contract = (tick_count < 2); if (!this.is_ongoing_contract && !is_one_tick_contract) { - // set to static chart for non one tick contract + // set to static chart to true for non one tick contract // to avoid chart from reloading this.smart_chart.setStaticChart(true); } else { @@ -86,28 +91,14 @@ export default class ContractStore extends BaseStore { this.smart_chart.setContractStart(date_start); this.smart_chart.setContractEnd(end_time); - if (!tick_count) { - this.handleChartType(date_start, end_time); - } else { - this.smart_chart.updateGranularity(0); - this.smart_chart.updateChartType('mountain'); - } // Clear chart loading status once ChartListener returns ready for completed contract if (!this.is_ongoing_contract) { this.waitForChartListener(); } // setters for ongoing contracts, will only init once onMount after left_epoch is set - } else { - if (this.is_from_positions) { - this.smart_chart.setContractStart(date_start); - } - if (tick_count) { - this.smart_chart.updateGranularity(0); - this.smart_chart.updateChartType('mountain'); - } else { - this.handleChartType(date_start, null); - } + } else if (this.is_from_positions) { + this.smart_chart.setContractStart(date_start); } this.smart_chart.updateMargin((end_time || date_expiry) - date_start); @@ -328,7 +319,6 @@ export default class ContractStore extends BaseStore { } } - @action.bound handleChartType(start, expiry) { const chart_type = getChartType(start, expiry); const granularity = getChartGranularity(start, expiry); diff --git a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js index ac707389f8fe..175c419e8942 100644 --- a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js +++ b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js @@ -41,13 +41,11 @@ export default class SmartChartStore extends BaseStore { trade_chart_symbol = null; @action.bound - switchToContractMode() { + switchToContractMode(granularity = 0, chart_type = 'mountain') { this.saveAndClearTradeChartLayout('contract'); this.setContractMode(true); - // In contract mode, the chart granularity should always be 0 - // and the chart_type should always be 'mountain' - this.updateGranularity(0); - this.updateChartType('mountain'); + this.updateGranularity(granularity); + this.updateChartType(chart_type); } @action.bound From eb7d9a52198cf86888a76488cf56e6e5acb12486 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Wed, 5 Jun 2019 11:54:13 +0800 Subject: [PATCH 11/21] replace CSSTransition with react-pose to animate top and bottom widgets --- .../app/App/Components/Animations/index.js | 1 + .../App/Components/Animations/slide-in.jsx | 76 +++++++++++++++++++ .../Modules/Contract/Containers/digits.jsx | 18 ++--- .../Modules/Contract/Containers/info-box.jsx | 47 +++++------- src/sass/app/modules/contract.scss | 11 --- .../app/modules/contract/bottom-widgets.scss | 2 +- src/sass/app/modules/contract/digits.scss | 11 --- 7 files changed, 104 insertions(+), 62 deletions(-) create mode 100644 src/javascript/app/App/Components/Animations/slide-in.jsx diff --git a/src/javascript/app/App/Components/Animations/index.js b/src/javascript/app/App/Components/Animations/index.js index cbfa65f94278..89248cc58ea8 100644 --- a/src/javascript/app/App/Components/Animations/index.js +++ b/src/javascript/app/App/Components/Animations/index.js @@ -1 +1,2 @@ export * from './fade-wrapper.jsx'; +export * from './slide-in.jsx'; diff --git a/src/javascript/app/App/Components/Animations/slide-in.jsx b/src/javascript/app/App/Components/Animations/slide-in.jsx new file mode 100644 index 000000000000..e03454c85b25 --- /dev/null +++ b/src/javascript/app/App/Components/Animations/slide-in.jsx @@ -0,0 +1,76 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import posed, +{ PoseGroup } from 'react-pose'; + +const SlideInFromTop = posed.div({ + enter: { + y : 0, + opacity : 1, + transition: { + duration: 200, + }, + }, + exit: { + y : -20, + opacity : 0, + transition: { + duration: 100, + }, + }, +}); + +const SlideInFromBottom = posed.div({ + enter: { + y : 0, + opacity : 1, + transition: { + duration: 200, + }, + }, + exit: { + y : 20, + opacity : 0, + transition: { + duration: 100, + }, + }, +}); + +const SlideIn = ({ + children, + className, + keyname, + is_visible, + type, +}) => { + if (type === 'bottom') { + return ( + + {is_visible && + + {children} + + } + + ); + } + return ( + + {is_visible && + + {children} + + } + + ); +}; + +SlideIn.propTypes = { + children : PropTypes.node, + is_visible: PropTypes.bool, + keyname : PropTypes.string, + type : PropTypes.string, +}; + +export { SlideIn }; diff --git a/src/javascript/app/Modules/Contract/Containers/digits.jsx b/src/javascript/app/Modules/Contract/Containers/digits.jsx index 944ae7e5375e..b9541e2b1216 100644 --- a/src/javascript/app/Modules/Contract/Containers/digits.jsx +++ b/src/javascript/app/Modules/Contract/Containers/digits.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { CSSTransition } from 'react-transition-group'; +import { SlideIn } from 'App/Components/Animations'; import { connect } from 'Stores/connect'; import { LastDigitPrediction } from '../Components/LastDigitPrediction'; @@ -28,15 +28,11 @@ class Digits extends React.Component { const contract_type = contract_info.contract_type || replay_info.contract_type; return ( - - + ); } } diff --git a/src/javascript/app/Modules/Contract/Containers/info-box.jsx b/src/javascript/app/Modules/Contract/Containers/info-box.jsx index 57df82f3d26d..97cb3271a7ae 100644 --- a/src/javascript/app/Modules/Contract/Containers/info-box.jsx +++ b/src/javascript/app/Modules/Contract/Containers/info-box.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { CSSTransition } from 'react-transition-group'; +import { SlideIn } from 'App/Components/Animations'; import { connect } from 'Stores/connect'; import ContractError from '../Components/contract-error.jsx'; import { InfoBoxLongcode } from '../Components/InfoBox'; @@ -19,36 +19,27 @@ const InfoBox = ({ const info = is_trade_page ? contract_info : replay_info; const is_ready = is_contract_mode && !!(info.longcode); return ( - - -
- { info.contract_type && -
- -
- } - - +
- - + } + + + ); }; diff --git a/src/sass/app/modules/contract.scss b/src/sass/app/modules/contract.scss index 6f7fd2a53c3d..e2a59b3b1d8b 100644 --- a/src/sass/app/modules/contract.scss +++ b/src/sass/app/modules/contract.scss @@ -116,9 +116,6 @@ $CONTRACT_INFO_BOX_PADDING: 1.6em; z-index: 10; top: 1em; right: 1em; - opacity: 0; - transform: translate3d(0, calc(-100% - 2em), 0); - transition: transform 0.4s ease, opacity 0.4s linear; display: flex; justify-content: space-between; width: 100%; @@ -130,14 +127,6 @@ $CONTRACT_INFO_BOX_PADDING: 1.6em; width: 32px; height: 32px; } - &--enter-done { - transform: translate3d(0, 0, 0); - opacity: 1; - } - &--enter, &--exit { - transform: translate3d(0, calc(-100% - 2em), 0); - opacity: 0; - } .info-box { position: relative; border-radius: $BORDER_RADIUS; diff --git a/src/sass/app/modules/contract/bottom-widgets.scss b/src/sass/app/modules/contract/bottom-widgets.scss index cf233d86c74e..87c67d387854 100644 --- a/src/sass/app/modules/contract/bottom-widgets.scss +++ b/src/sass/app/modules/contract/bottom-widgets.scss @@ -6,5 +6,5 @@ display: flex; justify-content: center; align-items: flex-end; - bottom: 20px; + bottom: 2em; } \ No newline at end of file diff --git a/src/sass/app/modules/contract/digits.scss b/src/sass/app/modules/contract/digits.scss index 8baaab9deda5..73a7435030f6 100644 --- a/src/sass/app/modules/contract/digits.scss +++ b/src/sass/app/modules/contract/digits.scss @@ -4,18 +4,7 @@ align-items: center; position: relative; margin: 0 2.5em 0 1em; - transform: translate3d(0, calc(100% + 2em), 0); - transition: transform 0.4s ease, opacity 0.4s linear; - opacity: 0; - &--enter-done { - transform: translate3d(0, 0, 0); - opacity: 1; - } - &--enter, &--exit { - transform: translate3d(0, calc(100% + 2em), 0); - opacity: 0; - } &__digit { margin: 0 0.4em; text-align: center; From f2819be45a6a20b3151d6094cadd420544ba9259 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Mon, 10 Jun 2019 10:39:54 +0800 Subject: [PATCH 12/21] use start_time --- .../app/Stores/Modules/Contract/contract-store.js | 5 ++--- src/javascript/app/Stores/Modules/Trading/trade-store.js | 8 ++++---- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index e0c43a6b392f..e9969430ecd8 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -64,7 +64,6 @@ export default class ContractStore extends BaseStore { const { date_expiry, date_start, - purchase_time, tick_count, } = this.contract_info; @@ -73,8 +72,8 @@ export default class ContractStore extends BaseStore { // Set chart granularity and chart_type this.handleChartType(date_start, end_time || null); - // Set chart view to purchase_time - this.smart_chart.setChartView(purchase_time); + // Set chart view to date_start + this.smart_chart.setChartView(date_start); if (!end_time) this.is_ongoing_contract = true; diff --git a/src/javascript/app/Stores/Modules/Trading/trade-store.js b/src/javascript/app/Stores/Modules/Trading/trade-store.js index 80d4fcc99314..a85781b4de75 100644 --- a/src/javascript/app/Stores/Modules/Trading/trade-store.js +++ b/src/javascript/app/Stores/Modules/Trading/trade-store.js @@ -276,17 +276,17 @@ export default class TradeStore extends BaseStore { const { contract_id, longcode, - purchase_time, + start_time, } = response.buy; // toggle smartcharts to contract mode if (contract_id) { // NOTE: changing chart granularity and chart_type has to be done in a different render cycle // so we have to set chart granularity to zero, and change the chart_type to 'mountain' first, - // and then set the chart view to the purchase_time + // and then set the chart view to the start_time this.root_store.modules.smart_chart.switchToContractMode(); - this.root_store.modules.smart_chart.setChartView(purchase_time); + this.root_store.modules.smart_chart.setChartView(start_time); // draw the start time line and show longcode before mounting contract - this.root_store.modules.contract.drawContractStartTime(purchase_time, longcode); + this.root_store.modules.contract.drawContractStartTime(start_time, longcode); this.root_store.modules.contract.onMount(contract_id, false); this.root_store.ui.openPositionsDrawer(); } From 16b9375348c17c4eaa5bea194e6f721223bccb8a Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Mon, 10 Jun 2019 14:10:09 +0800 Subject: [PATCH 13/21] use date_start from POC instead of purchase_time --- .../Components/Elements/ContractDrawer/contract-drawer.jsx | 2 +- .../PositionsDrawer/helpers/__tests__/positions-helper.js | 6 +++--- .../Elements/PositionsDrawer/helpers/positions-helper.js | 4 ++-- .../Elements/PositionsDrawer/positions-drawer-card.jsx | 2 +- .../ProgressSliderStream/progress-slider-stream.jsx | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx b/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx index dd32870ec9e2..5591fec9a751 100644 --- a/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx +++ b/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx @@ -52,7 +52,7 @@ class ContractDrawer extends Component { const exit_spot = isUserSold(contract_info) ? '-' : exit_tick; const percentage = getTimePercentage( this.props.server_time, - contract_info.purchase_time, + contract_info.date_start, contract_info.date_expiry, ); const getTick = () => { diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js b/src/javascript/app/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js index babadb90b9af..88f2b0669de9 100644 --- a/src/javascript/app/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js +++ b/src/javascript/app/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js @@ -9,11 +9,11 @@ describe('positions-helper', () => { }); }); describe('getTimePercentage', () => { - it('should work as expected with time of server, purchase and expiry being calculated leading to a percentage', () => { + it('should work as expected with time of server, date_start and expiry being calculated leading to a percentage', () => { const current_time = 1544000005; - const purchase_time = 1544000000; + const date_start = 1544000000; const expiry_time = 1544005000; - expect(PositionsHelper.getTimePercentage(current_time, purchase_time, expiry_time)).to.eql(100); + expect(PositionsHelper.getTimePercentage(current_time, date_start, expiry_time)).to.eql(100); }); }); describe('getBarrierLabel', () => { diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js b/src/javascript/app/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js index ec7758a412b8..8b34be168e7f 100644 --- a/src/javascript/app/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js +++ b/src/javascript/app/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js @@ -10,8 +10,8 @@ export const addCommaToNumber = num => { ); }; -export const getTimePercentage = (current_time, purchase_time, expiry_time) => { - const duration_from_purchase = moment.duration(moment.unix(expiry_time).diff(moment.unix(purchase_time))); +export const getTimePercentage = (current_time, date_start, expiry_time) => { + const duration_from_purchase = moment.duration(moment.unix(expiry_time).diff(moment.unix(date_start))); const duration_from_now = moment.duration(moment.unix(expiry_time).diff(current_time)); let percentage = (duration_from_now.asMilliseconds() / duration_from_purchase.asMilliseconds()) * 100; diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx b/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx index 727d9b6d8eef..c24caeca94ee 100644 --- a/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx +++ b/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx @@ -51,7 +51,7 @@ class PositionsDrawerCard extends React.PureComponent { toggleUnsupportedContractModal, type, } = this.props; - const percentage = getTimePercentage(server_time, contract_info.purchase_time, contract_info.date_expiry); + const percentage = getTimePercentage(server_time, contract_info.date_start, contract_info.date_expiry); return (
Date: Tue, 11 Jun 2019 08:44:11 +0800 Subject: [PATCH 14/21] check if from positions --- .../app/Stores/Modules/Contract/contract-store.js | 2 +- .../app/Stores/Modules/SmartChart/smart-chart-store.js | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index e9969430ecd8..a98bd0eded34 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -131,7 +131,7 @@ export default class ContractStore extends BaseStore { this.replay_info = {}; if (this.is_from_positions) { this.smart_chart.setIsChartLoading(true); - this.smart_chart.switchToContractMode(); + this.smart_chart.switchToContractMode(this.is_from_positions); } WS.subscribeProposalOpenContract(this.contract_id.toString(), this.updateProposal, false); } diff --git a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js index 175c419e8942..94428fbe0907 100644 --- a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js +++ b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js @@ -41,11 +41,13 @@ export default class SmartChartStore extends BaseStore { trade_chart_symbol = null; @action.bound - switchToContractMode(granularity = 0, chart_type = 'mountain') { + switchToContractMode(is_from_positions = false, granularity = 0, chart_type = 'mountain') { this.saveAndClearTradeChartLayout('contract'); this.setContractMode(true); - this.updateGranularity(granularity); - this.updateChartType(chart_type); + if (!is_from_positions) { + this.updateGranularity(granularity); + this.updateChartType(chart_type); + } } @action.bound From c9fe4841a0b0cc8df8ed79914cd3d65ea505b279 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Thu, 13 Jun 2019 15:03:28 +0800 Subject: [PATCH 15/21] add markers animation --- src/sass/app/_common/layout/layouts.scss | 13 +++++++++++++ src/sass/app/modules/smart-chart.scss | 2 ++ 2 files changed, 15 insertions(+) diff --git a/src/sass/app/_common/layout/layouts.scss b/src/sass/app/_common/layout/layouts.scss index a6a50b610e20..d37a24730403 100644 --- a/src/sass/app/_common/layout/layouts.scss +++ b/src/sass/app/_common/layout/layouts.scss @@ -216,6 +216,10 @@ } div.stx-marker { z-index: 2; + + &:not(.chart-marker-line) { + animation: fadeIn 0.2s; + } } } div.cq-chart-control-left { @@ -474,3 +478,12 @@ } } } + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} diff --git a/src/sass/app/modules/smart-chart.scss b/src/sass/app/modules/smart-chart.scss index ceae52791698..e553ff71822e 100644 --- a/src/sass/app/modules/smart-chart.scss +++ b/src/sass/app/modules/smart-chart.scss @@ -139,6 +139,8 @@ height: 94.5%; margin-bottom: 0.8em; z-index: 0 !important; + bottom: -100%; + transition: bottom 0.3s ease-in; &__wrapper { border-left-width: 2px; From 0a7ecd419310def590db2e17314072c23eb8de82 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 18 Jun 2019 11:32:40 +0800 Subject: [PATCH 16/21] check is_contract_mode --- src/javascript/app/Stores/Modules/Contract/contract-store.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index e9227d4615ad..c6c7076f2233 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -138,7 +138,7 @@ export default class ContractStore extends BaseStore { if (contract_id === this.contract_id) return; this.onSwitchAccount(this.accountSwitcherListener.bind(null)); this.smart_chart = this.root_store.modules.smart_chart; - if (is_from_positions) this.onCloseContract(); + if (this.smart_chart.is_contract_mode) this.onCloseContract(); this.has_error = false; this.error_message = ''; this.contract_id = contract_id; From f8152051c996ce37cf733c4a0a6ec0add321330a Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 18 Jun 2019 15:48:19 +0800 Subject: [PATCH 17/21] add onMountBuy to mount contract after buy --- .../Stores/Modules/Contract/contract-store.js | 18 ++++++++++++++++-- .../app/Stores/Modules/Trading/trade-store.js | 12 ++++++------ 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js index c6c7076f2233..e9b7e1befd92 100644 --- a/src/javascript/app/Stores/Modules/Contract/contract-store.js +++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js @@ -128,9 +128,19 @@ export default class ContractStore extends BaseStore { } @action.bound - drawContractStartTime(date_start, longcode) { + drawContractStartTime(date_start, longcode, contract_id) { this.contract_info.longcode = longcode; createChartMarkers(this.root_store.modules.smart_chart, { date_start }); + this.onMountBuy(contract_id); + } + + @action.bound + onMountBuy(contract_id) { + if (contract_id === this.contract_id) return; + this.contract_id = contract_id; + BinarySocket.wait('authorize').then(() => { + this.handleSubscribeProposalOpenContract(this.contract_id, this.updateProposal); + }); } @action.bound @@ -148,8 +158,8 @@ export default class ContractStore extends BaseStore { this.replay_info = {}; if (this.is_from_positions) { this.smart_chart.setIsChartLoading(true); + this.smart_chart.switchToContractMode(true); } - this.smart_chart.switchToContractMode(this.is_from_positions); BinarySocket.wait('authorize').then(() => { this.handleSubscribeProposalOpenContract(this.contract_id, this.updateProposal); }); @@ -343,6 +353,10 @@ export default class ContractStore extends BaseStore { } handleChartType(start, expiry) { + if (!this.smart_chart) { + this.smart_chart = this.root_store.modules.smart_chart; + } + const chart_type = getChartType(start, expiry); const granularity = getChartGranularity(start, expiry); diff --git a/src/javascript/app/Stores/Modules/Trading/trade-store.js b/src/javascript/app/Stores/Modules/Trading/trade-store.js index 768c39436006..1c2c863233c5 100644 --- a/src/javascript/app/Stores/Modules/Trading/trade-store.js +++ b/src/javascript/app/Stores/Modules/Trading/trade-store.js @@ -289,11 +289,11 @@ export default class TradeStore extends BaseStore { // NOTE: changing chart granularity and chart_type has to be done in a different render cycle // so we have to set chart granularity to zero, and change the chart_type to 'mountain' first, // and then set the chart view to the start_time - this.root_store.modules.smart_chart.switchToContractMode(); - this.root_store.modules.smart_chart.setChartView(start_time); + this.smart_chart.switchToContractMode(); + this.smart_chart.setChartView(start_time); // draw the start time line and show longcode before mounting contract - this.root_store.modules.contract.drawContractStartTime(start_time, longcode); - this.root_store.modules.contract.onMount(contract_id, false); + this.root_store.modules.contract.drawContractStartTime(start_time, longcode, contract_id); + // this.root_store.modules.contract.onMount(contract_id, false); this.root_store.ui.openPositionsDrawer(); } this.root_store.gtm.pushPurchaseData(contract_data); @@ -389,7 +389,7 @@ export default class TradeStore extends BaseStore { proposal_info : {}, }); - if (!this.root_store.modules.smart_chart.is_contract_mode) { + if (!this.smart_chart.is_contract_mode) { const is_barrier_changed = 'barrier_1' in new_state || 'barrier_2' in new_state; if (is_barrier_changed) { this.smart_chart.updateBarriers(this.barrier_1, this.barrier_2); @@ -456,7 +456,7 @@ export default class TradeStore extends BaseStore { [contract_type]: getProposalInfo(this, response, obj_prev_contract_basis), }; - if (!this.root_store.modules.smart_chart.is_contract_mode) { + if (!this.smart_chart.is_contract_mode) { const color = this.root_store.ui.is_dark_mode_on ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY; const barrier_config = { color }; setChartBarrier(this.smart_chart, response, this.onChartBarrierChange, barrier_config); From bfdcd98ec1d3238b1c5201dc3e8227a5cd7a221c Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Tue, 18 Jun 2019 15:52:51 +0800 Subject: [PATCH 18/21] update comment --- src/javascript/app/Stores/Modules/Trading/trade-store.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/javascript/app/Stores/Modules/Trading/trade-store.js b/src/javascript/app/Stores/Modules/Trading/trade-store.js index 1c2c863233c5..e1ba74b5b3f2 100644 --- a/src/javascript/app/Stores/Modules/Trading/trade-store.js +++ b/src/javascript/app/Stores/Modules/Trading/trade-store.js @@ -291,9 +291,8 @@ export default class TradeStore extends BaseStore { // and then set the chart view to the start_time this.smart_chart.switchToContractMode(); this.smart_chart.setChartView(start_time); - // draw the start time line and show longcode before mounting contract + // draw the start time line and show longcode then mount contract this.root_store.modules.contract.drawContractStartTime(start_time, longcode, contract_id); - // this.root_store.modules.contract.onMount(contract_id, false); this.root_store.ui.openPositionsDrawer(); } this.root_store.gtm.pushPurchaseData(contract_data); From 0ac9ba3cb618a2e10a8fe27e1f94c7c765856e49 Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Wed, 19 Jun 2019 13:56:10 +0800 Subject: [PATCH 19/21] use react-pose for bounce animation --- .../app/App/Components/Animations/bounce.jsx | 51 +++++++++++++++++++ .../Components/Animations/fade-wrapper.jsx | 2 +- .../app/App/Components/Animations/index.js | 1 + .../LastDigitPrediction/digit-display.jsx | 10 +++- .../LastDigitPrediction/digit-spot.jsx | 10 ++-- .../last-digit-prediction.jsx | 3 +- .../Modules/Contract/Containers/digits.jsx | 10 +--- src/sass/app/modules/contract/digits.scss | 27 +--------- src/sass/app/modules/smart-chart.scss | 2 +- 9 files changed, 72 insertions(+), 44 deletions(-) create mode 100644 src/javascript/app/App/Components/Animations/bounce.jsx diff --git a/src/javascript/app/App/Components/Animations/bounce.jsx b/src/javascript/app/App/Components/Animations/bounce.jsx new file mode 100644 index 000000000000..4264276b411e --- /dev/null +++ b/src/javascript/app/App/Components/Animations/bounce.jsx @@ -0,0 +1,51 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import posed, +{ PoseGroup } from 'react-pose'; + +const BounceUp = posed.div({ + enter: { + y : 0, + opacity : 1, + transition: { + y: { + type : 'spring', + stiffness: 500, + damping : 15, + }, + default: { + duration: 300, + }, + }, + }, + exit: { + y : 35, + opacity : 0, + transition: { + duration: 0, + }, + }, +}); + +const Bounce = ({ + children, + className, + is_visible, + keyname, +}) => ( + + {is_visible && + + {children} + + } + +); + +Bounce.propTypes = { + children : PropTypes.node, + is_visible: PropTypes.bool, + keyname : PropTypes.string, +}; + +export { Bounce }; diff --git a/src/javascript/app/App/Components/Animations/fade-wrapper.jsx b/src/javascript/app/App/Components/Animations/fade-wrapper.jsx index daa968dfe955..4dd843d0124d 100644 --- a/src/javascript/app/App/Components/Animations/fade-wrapper.jsx +++ b/src/javascript/app/App/Components/Animations/fade-wrapper.jsx @@ -50,8 +50,8 @@ const FadeInOnlyDiv = posed.div({ const FadeWrapper = ({ children, className, - keyname, is_visible, + keyname, type, }) => { if (type === 'top') { diff --git a/src/javascript/app/App/Components/Animations/index.js b/src/javascript/app/App/Components/Animations/index.js index 89248cc58ea8..245c9dcf7d88 100644 --- a/src/javascript/app/App/Components/Animations/index.js +++ b/src/javascript/app/App/Components/Animations/index.js @@ -1,2 +1,3 @@ +export * from './bounce.jsx'; export * from './fade-wrapper.jsx'; export * from './slide-in.jsx'; diff --git a/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/digit-display.jsx b/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/digit-display.jsx index 983ffff77462..371788e4ba7a 100644 --- a/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/digit-display.jsx +++ b/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/digit-display.jsx @@ -2,6 +2,7 @@ import classNames from 'classnames'; import { observer } from 'mobx-react'; import PropTypes from 'prop-types'; import React from 'react'; +import { Bounce } from 'App/Components/Animations'; import Digit from './digit.jsx'; import DigitSpot from './digit-spot.jsx'; @@ -24,13 +25,18 @@ const DigitDisplay = ({ 'digits__digit--loss': is_lost && is_latest, })} > - { is_latest && spot && + - } + ( -
+ {current_spot.slice(0, -1)} @@ -19,7 +19,7 @@ const DigitSpot = ({ > {current_spot.slice(-1)} -
+ ); DigitSpot.propTypes = { diff --git a/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/last-digit-prediction.jsx b/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/last-digit-prediction.jsx index 8a0093c5e0b9..d962c88337ea 100644 --- a/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/last-digit-prediction.jsx +++ b/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/last-digit-prediction.jsx @@ -45,8 +45,7 @@ class LastDigitPrediction extends React.Component { // but we only need is_lost condition only once we have the 'won' or 'lost' status const is_lost = is_ended && status === 'lost'; - // const digit = this.props.digits_info[Object.keys(this.props.digits_info)[0]].digit; - const position = !isNaN(latest_digit.digit) ? (latest_digit.digit * 48) + 4 : 4; + const position = this.state[latest_digit.digit]; return (
Date: Wed, 19 Jun 2019 16:23:39 +0800 Subject: [PATCH 20/21] update smartcharts to 0.4.36 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ffb5ca4166e8..f4d1361661e4 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "react-router-dom": "5.0.0", "react-transition-group": "2.4.0", "sinon": "7.2.2", - "smartcharts-beta": "0.4.35", + "smartcharts-beta": "0.4.36", "tt-react-custom-scrollbars": "4.2.1-tt2", "url-polyfill": "1.0.9", "web-push-notifications": "3.2.15" From 26bf31ea1a798e94459c20ad2734a81bfa8b2e6f Mon Sep 17 00:00:00 2001 From: Kelly Anyi Date: Wed, 19 Jun 2019 16:31:17 +0800 Subject: [PATCH 21/21] update package-lock.json --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index ed57dbfdbfbb..6ae5554a4f80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12478,9 +12478,9 @@ } }, "smartcharts-beta": { - "version": "0.4.35", - "resolved": "https://registry.npmjs.org/smartcharts-beta/-/smartcharts-beta-0.4.35.tgz", - "integrity": "sha512-FpGi7vx1QUbSTJKNjw45XRi2wEchZhh4zVtZbjoqOx8/KkYRoK3IBH7x9baisllSzKyHLkMgoVBaIOFC7FwTXQ==", + "version": "0.4.36", + "resolved": "https://registry.npmjs.org/smartcharts-beta/-/smartcharts-beta-0.4.36.tgz", + "integrity": "sha512-kUc5wu5PFk87LadUu7wK3N7PTydWH0pJ08v8QaRGJDG53Ra90heBB1C5xJwXWikQUspTdWYmXDStDVtjOF+zfw==", "requires": { "event-emitter-es6": "^1.1.5", "lodash.debounce": "^4.0.8",