From 66674af1cfe24c23a0943a333040f86775c11dda Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Mon, 3 Apr 2023 15:22:15 +0100 Subject: [PATCH 01/10] remember last candle duration Signed-off-by: Philemon Ukane --- client/webserver/site/src/js/markets.ts | 12 +++++++----- client/webserver/site/src/js/state.ts | 1 + 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index 2e7451bd46..2fbef2d93c 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -802,6 +802,9 @@ export default class MarketsPage extends BasePage { Doc.bind(bttn, 'click', () => this.candleDurationSelected(dur)) page.durBttnBox.appendChild(bttn) } + + // Set last candle duration selected. + this.candleDurationSelected(State.fetchLocal(State.lastCandleDurationLK)) } /* setMarket sets the currently displayed market. */ @@ -872,10 +875,6 @@ export default class MarketsPage extends BasePage { // depth chart ws.request('loadmarket', makeMarket(host, base, quote)) - // candlesticks - this.candleDur = fiveMinBinKey - this.loadCandles() - this.setLoaderMsgVisibility() this.setRegistrationStatusVisibility() this.resolveOrderFormVisibility() @@ -2507,10 +2506,13 @@ export default class MarketsPage extends BasePage { this.depthChart.draw() } - /* candleDurationSelected sets the candleDur and loads the candles. */ + /* candleDurationSelected sets the candleDur and loads the candles. It will + default to the fiveMinBinKey if dur is not valid. */ candleDurationSelected (dur: string) { + if (!this.market?.dex?.candleDurs.includes(dur)) dur = fiveMinBinKey this.candleDur = dur this.loadCandles() + State.storeLocal(State.lastCandleDurationLK, dur) } /* diff --git a/client/webserver/site/src/js/state.ts b/client/webserver/site/src/js/state.ts index 965c262e81..7c3c444c78 100644 --- a/client/webserver/site/src/js/state.ts +++ b/client/webserver/site/src/js/state.ts @@ -18,6 +18,7 @@ export default class State { static selectedAssetLK = 'selectedasset' static notificationsLK = 'notifications' static orderDisclaimerAckedLK = 'ordAck' + static lastCandleDurationLK = 'lastCandleDuration' static setCookie (cname: string, cvalue: string) { const d = new Date() From ad45cad284529455894e8fd0f2aa619008a83e77 Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Mon, 3 Apr 2023 16:57:30 +0100 Subject: [PATCH 02/10] remove candle duration TODO Signed-off-by: Philemon Ukane --- client/webserver/site/src/js/markets.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index 2fbef2d93c..9599066c87 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -219,8 +219,8 @@ export default class MarketsPage extends BasePage { // Do not call cleanTemplates before creating the AccelerateOrderForm this.accelerateOrderForm = new AccelerateOrderForm(page.accelerateForm, success) - // TODO: Store user's state and reload last known configuration. - this.candleDur = fiveMinBinKey + // Set user's last known candle duration. + this.candleDur = State.fetchLocal(State.lastCandleDurationLK) // Setup the register to trade button. // TODO: Use dexsettings page? @@ -803,8 +803,8 @@ export default class MarketsPage extends BasePage { page.durBttnBox.appendChild(bttn) } - // Set last candle duration selected. - this.candleDurationSelected(State.fetchLocal(State.lastCandleDurationLK)) + // Set candle duration. + this.candleDurationSelected(this.candleDur) } /* setMarket sets the currently displayed market. */ From e17bcdcc668aec127b47604e3c8d2e100544f2ef Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Mon, 3 Apr 2023 17:53:19 +0100 Subject: [PATCH 03/10] use outstanding colors for candle duration buttons to improve visibility Signed-off-by: Philemon Ukane --- client/webserver/site/src/css/market.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss index eaf5be176d..b5c26d83d8 100644 --- a/client/webserver/site/src/css/market.scss +++ b/client/webserver/site/src/css/market.scss @@ -417,7 +417,8 @@ div[data-handler=markets] { &:hover, &.selected { - border-color: #6cac78; + border-color: #dd7900; + color: #dd7900; } } } From 1b99feb13318578a8957dce64619844094dbdf92 Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Fri, 7 Apr 2023 22:01:21 +0100 Subject: [PATCH 04/10] request for default fiveMinBin candles first Signed-off-by: Philemon Ukane --- client/webserver/site/src/js/markets.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index 9599066c87..06744c79b2 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -219,9 +219,6 @@ export default class MarketsPage extends BasePage { // Do not call cleanTemplates before creating the AccelerateOrderForm this.accelerateOrderForm = new AccelerateOrderForm(page.accelerateForm, success) - // Set user's last known candle duration. - this.candleDur = State.fetchLocal(State.lastCandleDurationLK) - // Setup the register to trade button. // TODO: Use dexsettings page? const registerBttn = Doc.tmplElement(page.notRegistered, 'registerBttn') @@ -803,7 +800,19 @@ export default class MarketsPage extends BasePage { page.durBttnBox.appendChild(bttn) } - // Set candle duration. + // Check if we already have the fiveMinBin candles cache, if not, request + // for it first since we use it to determine the 24hour high/low in + // this.setHighLow(). + const lastCandleDur = State.fetchLocal(State.lastCandleDurationLK) + const cache = this.market?.candleCaches[fiveMinBinKey] + if (!cache && lastCandleDur !== fiveMinBinKey) { + this.candleDur = fiveMinBinKey + this.requestCandles() + } + + // The fiveMinBin candles have been requested, so we can set the user's last + // known configuration now. + this.candleDur = lastCandleDur this.candleDurationSelected(this.candleDur) } From 2f386fca9d6dcbc83c82dd2545b438613fe96460 Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Tue, 18 Apr 2023 23:23:09 +0100 Subject: [PATCH 05/10] use oneHrBin as default when no candle duration is set - use spot high/low rate if available. Signed-off-by: Philemon Ukane --- client/webserver/site/src/js/markets.ts | 46 ++++++++++++++---------- client/webserver/site/src/js/registry.ts | 2 ++ 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index 06744c79b2..2ae93f301e 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -85,6 +85,7 @@ const buyBtnClass = 'buygreen-bg' const sellBtnClass = 'sellred-bg' const fiveMinBinKey = '5m' +const oneHrBinKey = '1h' const percentFormatter = new Intl.NumberFormat(document.documentElement.lang, { minimumFractionDigits: 1, @@ -595,24 +596,32 @@ export default class MarketsPage extends BasePage { /* setHighLow calculates the high and low rates over the last 24 hours. */ setHighLow () { - const cache = this.market?.candleCaches[fiveMinBinKey] - if (!cache) { - for (const s of this.stats) { - s.tmpl.high.textContent = '-' - s.tmpl.low.textContent = '-' + let [high, low] = [0, 0] + const spot = this.market.cfg.spot + // Use spot values for 24 hours high and low rates if it is available. We + // will default to setting it from candles if it's not. + const lowRateSet = spot && spot.low24 !== undefined && spot.low24 !== 0 + const highRateSet = spot && spot.high24 !== undefined && spot.high24 !== 0 + if (lowRateSet && highRateSet) { + high = spot.high24 + low = spot.low24 + } else { + const cache = this.market?.candleCaches[fiveMinBinKey] + if (!cache) { + for (const s of this.stats) { + s.tmpl.high.textContent = '-' + s.tmpl.low.textContent = '-' + } + return } - return - } - // We'll eventually get this data in the spot, but for now, we must set it - // from candles. - let [high, low] = [0, 0] - for (let i = cache.candles.length - 1; i >= 0; i--) { - const c = cache.candles[i] - if (low === 0 || (c.lowRate > 0 && c.lowRate < low)) low = c.lowRate - if (c.highRate > high) high = c.highRate + // Set high and low rates from candles. + for (let i = cache.candles.length - 1; i >= 0; i--) { + const c = cache.candles[i] + if (low === 0 || (c.lowRate > 0 && c.lowRate < low)) low = c.lowRate + if (c.highRate > high) high = c.highRate + } } - const qconv = app().unitInfo(this.market.cfg.quoteid, this.market.dex).conventional.conversionFactor for (const s of this.stats) { s.tmpl.high.textContent = high > 0 ? fourSigFigs(high / qconv) : '-' @@ -802,7 +811,8 @@ export default class MarketsPage extends BasePage { // Check if we already have the fiveMinBin candles cache, if not, request // for it first since we use it to determine the 24hour high/low in - // this.setHighLow(). + // this.setHighLow() as a fallback if there is no data for 24hour high/low + // in spot. const lastCandleDur = State.fetchLocal(State.lastCandleDurationLK) const cache = this.market?.candleCaches[fiveMinBinKey] if (!cache && lastCandleDur !== fiveMinBinKey) { @@ -2516,9 +2526,9 @@ export default class MarketsPage extends BasePage { } /* candleDurationSelected sets the candleDur and loads the candles. It will - default to the fiveMinBinKey if dur is not valid. */ + default to the oneHrBinKey if dur is not valid. */ candleDurationSelected (dur: string) { - if (!this.market?.dex?.candleDurs.includes(dur)) dur = fiveMinBinKey + if (!this.market?.dex?.candleDurs.includes(dur)) dur = oneHrBinKey this.candleDur = dur this.loadCandles() State.storeLocal(State.lastCandleDurationLK, dur) diff --git a/client/webserver/site/src/js/registry.ts b/client/webserver/site/src/js/registry.ts index f3489d40d2..39bacfb94e 100644 --- a/client/webserver/site/src/js/registry.ts +++ b/client/webserver/site/src/js/registry.ts @@ -128,6 +128,8 @@ export interface Spot { bookVolume: number // Unused? change24: number vol24: number + low24: number + high24: number } export interface Asset { From d0c6a4e0dbe926c33820370178ebaa392bd251db Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Wed, 19 Apr 2023 02:15:33 +0100 Subject: [PATCH 06/10] review changes Signed-off-by: Philemon Ukane --- client/webserver/site/src/js/markets.ts | 34 +++++++++++-------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index 2ae93f301e..caa8e9aad1 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -220,6 +220,9 @@ export default class MarketsPage extends BasePage { // Do not call cleanTemplates before creating the AccelerateOrderForm this.accelerateOrderForm = new AccelerateOrderForm(page.accelerateForm, success) + // Set user's last known candle duration. + this.candleDur = State.fetchLocal(State.lastCandleDurationLK) + // Setup the register to trade button. // TODO: Use dexsettings page? const registerBttn = Doc.tmplElement(page.notRegistered, 'registerBttn') @@ -600,14 +603,17 @@ export default class MarketsPage extends BasePage { const spot = this.market.cfg.spot // Use spot values for 24 hours high and low rates if it is available. We // will default to setting it from candles if it's not. - const lowRateSet = spot && spot.low24 !== undefined && spot.low24 !== 0 - const highRateSet = spot && spot.high24 !== undefined && spot.high24 !== 0 - if (lowRateSet && highRateSet) { + if (spot && spot.low24 && spot.high24) { high = spot.high24 low = spot.low24 } else { const cache = this.market?.candleCaches[fiveMinBinKey] if (!cache) { + if (this.candleDur !== fiveMinBinKey) { + this.candleDur = fiveMinBinKey + this.requestCandles() + return + } for (const s of this.stats) { s.tmpl.high.textContent = '-' s.tmpl.low.textContent = '-' @@ -622,6 +628,7 @@ export default class MarketsPage extends BasePage { if (c.highRate > high) high = c.highRate } } + const qconv = app().unitInfo(this.market.cfg.quoteid, this.market.dex).conventional.conversionFactor for (const s of this.stats) { s.tmpl.high.textContent = high > 0 ? fourSigFigs(high / qconv) : '-' @@ -808,22 +815,6 @@ export default class MarketsPage extends BasePage { Doc.bind(bttn, 'click', () => this.candleDurationSelected(dur)) page.durBttnBox.appendChild(bttn) } - - // Check if we already have the fiveMinBin candles cache, if not, request - // for it first since we use it to determine the 24hour high/low in - // this.setHighLow() as a fallback if there is no data for 24hour high/low - // in spot. - const lastCandleDur = State.fetchLocal(State.lastCandleDurationLK) - const cache = this.market?.candleCaches[fiveMinBinKey] - if (!cache && lastCandleDur !== fiveMinBinKey) { - this.candleDur = fiveMinBinKey - this.requestCandles() - } - - // The fiveMinBin candles have been requested, so we can set the user's last - // known configuration now. - this.candleDur = lastCandleDur - this.candleDurationSelected(this.candleDur) } /* setMarket sets the currently displayed market. */ @@ -894,6 +885,11 @@ export default class MarketsPage extends BasePage { // depth chart ws.request('loadmarket', makeMarket(host, base, quote)) + // candlesticks + this.candleDur = fiveMinBinKey + this.loadCandles() + this.candleDurationSelected(oneHrBinKey) + this.setLoaderMsgVisibility() this.setRegistrationStatusVisibility() this.resolveOrderFormVisibility() From 58ed9d837839e25d9778ce2b56561f58b7763502 Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Wed, 19 Apr 2023 17:16:51 +0100 Subject: [PATCH 07/10] buck's review changes Signed-off-by: Philemon Ukane --- client/webserver/site/src/js/markets.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index caa8e9aad1..34b262e533 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -221,7 +221,7 @@ export default class MarketsPage extends BasePage { this.accelerateOrderForm = new AccelerateOrderForm(page.accelerateForm, success) // Set user's last known candle duration. - this.candleDur = State.fetchLocal(State.lastCandleDurationLK) + this.candleDur = State.fetchLocal(State.lastCandleDurationLK) || oneHrBinKey // Setup the register to trade button. // TODO: Use dexsettings page? @@ -886,9 +886,7 @@ export default class MarketsPage extends BasePage { ws.request('loadmarket', makeMarket(host, base, quote)) // candlesticks - this.candleDur = fiveMinBinKey this.loadCandles() - this.candleDurationSelected(oneHrBinKey) this.setLoaderMsgVisibility() this.setRegistrationStatusVisibility() From 1fc4e4429081f9d58e5d9567a1e9ec1ac896502e Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Wed, 19 Apr 2023 17:21:33 +0100 Subject: [PATCH 08/10] setHighLow should not use candles older than 24hours ago Signed-off-by: Philemon Ukane --- client/webserver/site/src/js/markets.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index 34b262e533..552a5b8690 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -622,8 +622,10 @@ export default class MarketsPage extends BasePage { } // Set high and low rates from candles. + const aDayAgo = new Date().getTime() - 86400000 for (let i = cache.candles.length - 1; i >= 0; i--) { const c = cache.candles[i] + if (c.endStamp < aDayAgo) break if (low === 0 || (c.lowRate > 0 && c.lowRate < low)) low = c.lowRate if (c.highRate > high) high = c.highRate } From 0428f1a7527137dbfc2a73482533651edfcf9939 Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Wed, 19 Apr 2023 18:57:18 +0100 Subject: [PATCH 09/10] buck's suggestion Signed-off-by: Philemon Ukane --- client/webserver/site/src/js/markets.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index 552a5b8690..c9ace41e9b 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -610,8 +610,7 @@ export default class MarketsPage extends BasePage { const cache = this.market?.candleCaches[fiveMinBinKey] if (!cache) { if (this.candleDur !== fiveMinBinKey) { - this.candleDur = fiveMinBinKey - this.requestCandles() + this.requestCandles(fiveMinBinKey) return } for (const s of this.stats) { @@ -2550,8 +2549,10 @@ export default class MarketsPage extends BasePage { this.requestCandles() } - /* requestCandles sends the loadcandles request. */ - requestCandles () { + /* requestCandles sends the loadcandles request. It accepts an optional candle + * duration which will be requested if it is provided. + */ + requestCandles (candleDur?: string) { this.candlesLoading = { loaded: () => { /* pass */ }, timer: window.setTimeout(() => { @@ -2562,7 +2563,7 @@ export default class MarketsPage extends BasePage { }, 10000) } const { dex, baseCfg, quoteCfg } = this.market - ws.request('loadcandles', { host: dex.host, base: baseCfg.id, quote: quoteCfg.id, dur: this.candleDur }) + ws.request('loadcandles', { host: dex.host, base: baseCfg.id, quote: quoteCfg.id, dur: candleDur || this.candleDur }) } /* From 4cab25dfb50e40848cbba89c76ef11459a6cfd95 Mon Sep 17 00:00:00 2001 From: Philemon Ukane Date: Fri, 21 Apr 2023 20:27:27 +0100 Subject: [PATCH 10/10] set candle sticks last Signed-off-by: Philemon Ukane --- client/webserver/site/src/js/markets.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index c9ace41e9b..d7715a95ac 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -816,6 +816,9 @@ export default class MarketsPage extends BasePage { Doc.bind(bttn, 'click', () => this.candleDurationSelected(dur)) page.durBttnBox.appendChild(bttn) } + + // load candlesticks here since we are resetting page.durBttnBox above. + this.loadCandles() } /* setMarket sets the currently displayed market. */ @@ -886,9 +889,6 @@ export default class MarketsPage extends BasePage { // depth chart ws.request('loadmarket', makeMarket(host, base, quote)) - // candlesticks - this.loadCandles() - this.setLoaderMsgVisibility() this.setRegistrationStatusVisibility() this.resolveOrderFormVisibility()