From dbf9d2c1f7c4644530b8a91f407818d4f435aa7b Mon Sep 17 00:00:00 2001 From: buck54321 Date: Thu, 29 Oct 2020 14:49:04 -0500 Subject: [PATCH] ui: bugs and usability fixes Frontend/UI roundup 1. Fix bug with depth chart unbinding its resize handler 2. Links to transaction outputs open in new tab 3. Harmonize "pre-split" and "pre-size" at the UI level 4. Use more familiar "immediate or cancel" for "match for one epoch only" 5. Change order submission button text and color to indicate buy/sell 6. Improves the setNotes -> prependNoteElement loop to skip intermediate saves 7. Add a warning in order the order confirmation dialog about keeping the client and blockchains daemons running during settlement --- client/asset/btc/btc.go | 2 +- client/asset/ltc/ltc.go | 2 +- client/webserver/site/src/css/market.scss | 30 +++++++-- .../webserver/site/src/css/market_dark.scss | 23 ++++--- .../webserver/site/src/html/bodybuilder.tmpl | 4 +- client/webserver/site/src/html/markets.tmpl | 67 +++++++++++-------- client/webserver/site/src/html/order.tmpl | 10 +-- client/webserver/site/src/js/app.js | 7 +- client/webserver/site/src/js/charts.js | 5 +- client/webserver/site/src/js/markets.js | 13 ++++ 10 files changed, 105 insertions(+), 58 deletions(-) diff --git a/client/asset/btc/btc.go b/client/asset/btc/btc.go index 323012323f..75da49f62e 100644 --- a/client/asset/btc/btc.go +++ b/client/asset/btc/btc.go @@ -108,7 +108,7 @@ var ( }, { Key: "txsplit", - DisplayName: "Pre-split funding inputs", + DisplayName: "Pre-size funding inputs", Description: "When placing an order, create a \"split\" transaction to fund the order without locking more of the wallet balance than " + "necessary. Otherwise, excess funds may be reserved to fund the order until the first swap contract is broadcast " + "during match settlement, or the order is canceled. This an extra transaction for which network mining fees are paid. " + diff --git a/client/asset/ltc/ltc.go b/client/asset/ltc/ltc.go index 16c84a3d57..b84603e908 100644 --- a/client/asset/ltc/ltc.go +++ b/client/asset/ltc/ltc.go @@ -66,7 +66,7 @@ var ( }, { Key: "txsplit", - DisplayName: "Pre-split funding inputs", + DisplayName: "Pre-size funding inputs", Description: "When placing an order, create a \"split\" transaction to fund the order without locking more of the wallet balance than " + "necessary. Otherwise, excess funds may be reserved to fund the order until the first swap contract is broadcast " + "during match settlement, or the order is canceled. This an extra transaction for which network mining fees are paid. " + diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss index c211ea46ef..110f593c52 100644 --- a/client/webserver/site/src/css/market.scss +++ b/client/webserver/site/src/css/market.scss @@ -308,7 +308,8 @@ table.balance-table button:hover { color: #555; } - button:hover { + button:hover, + button.selected { color: black; } @@ -316,10 +317,15 @@ table.balance-table button:hover { background-color: #5cba8b; } - button.selected { - background-color: #b6c2da; - border: 1px solid black; - color: black; + button.selected, + button.submit { + &.buygreen { + background-color: #207a4699; + } + + &.sellred { + background-color: #99302b99; + } } .ico-unlocked { @@ -331,8 +337,18 @@ table.balance-table button:hover { } } -#verifyForm span { - margin: 0 5px; +#verifyForm { + .echo-data span { + margin: 0 5px; + } + + .disclaimer { + text-align: justify; + + .red { + color: #f55a; + } + } } #liveTable { diff --git a/client/webserver/site/src/css/market_dark.scss b/client/webserver/site/src/css/market_dark.scss index ef6563a931..47f60bcbef 100644 --- a/client/webserver/site/src/css/market_dark.scss +++ b/client/webserver/site/src/css/market_dark.scss @@ -82,21 +82,28 @@ body.dark { color: #a1a1a1; button { - color: #bbb; - } - - button:hover { - color: white; + color: #aaa; } + button:hover, button.selected { - background-color: #000017; - border: 1px solid #555; - color: white; + color: #eee; } button.submit { background-color: #0b5831; + color: #eee; + } + + button.selected, + button.submit { + &.buygreen { + background-color: #05a35a99; + } + + &.sellred { + background-color: #ae333399; + } } } } diff --git a/client/webserver/site/src/html/bodybuilder.tmpl b/client/webserver/site/src/html/bodybuilder.tmpl index 35826bbdc6..1f218eafc2 100644 --- a/client/webserver/site/src/html/bodybuilder.tmpl +++ b/client/webserver/site/src/html/bodybuilder.tmpl @@ -8,7 +8,7 @@ {{.Title}} - + - {{- /* USER ORDERS: TODO */ -}} + {{- /* USER ORDERS */ -}}
Your Orders @@ -352,34 +353,36 @@ {{- /* VERIFY ORDER */ -}}
- You are submitting an order to -
- - - -
-
- at a rate of +
+ You are submitting an order to
- - / + + +
- for a total of -
- - +
+ at a rate of +
+ + / +
+ for a total of +
+ + +
-
-
- This is a market order and will match the best available order(s) on the - book. Based on the current market mid-gap rate, you might receive about -
- - - (
lots) +
+ This is a market order and will match the best available order(s) on the + book. Based on the current market mid-gap rate, you might receive about +
+ + + (
lots) +
-
+
Authorize this order with your app password.
@@ -391,6 +394,12 @@
+
+
+ IMPORTANT: Trades take time to settle, and you cannot turn off the DEX client software, + or the or blockchain and/or wallet software, until + settlement is complete. Settlement can complete as quickly as a few minutes or take as long as a few hours. +
diff --git a/client/webserver/site/src/html/order.tmpl b/client/webserver/site/src/html/order.tmpl index ffb0912cd9..70b7375fa7 100644 --- a/client/webserver/site/src/html/order.tmpl +++ b/client/webserver/site/src/html/order.tmpl @@ -144,35 +144,35 @@ {{if len $match.Swap}}
Swap ({{$ord.FromSymbol}}, you)
- {{$match.SwapString}}
{{end}} {{if len $match.CounterSwap}}
Swap ({{$ord.ToSymbol}}, them)
- {{$match.CounterSwapString}}
{{end}} {{if len $match.Redeem}}
Redemption ({{$ord.ToSymbol}}, you)
- {{$match.RedeemString}}
{{end}} {{if len $match.CounterRedeem}}
Redemption ({{$ord.FromSymbol}}, them)
- {{$match.CounterRedeemString}}
{{end}} {{if len $match.Refund}}
Refund ({{$ord.FromSymbol}}, you)
- {{$match.RefundString}}
{{end}} diff --git a/client/webserver/site/src/js/app.js b/client/webserver/site/src/js/app.js index 3534402a5d..86c6100373 100644 --- a/client/webserver/site/src/js/app.js +++ b/client/webserver/site/src/js/app.js @@ -445,8 +445,9 @@ export default class Application { this.notes = [] Doc.empty(this.page.noteList) for (let i = 0; i < notes.length; i++) { - this.prependNoteElement(notes[i]) + this.prependNoteElement(notes[i], true) } + this.storeNotes() } /* @@ -547,13 +548,13 @@ export default class Application { this.prependListElement(this.page.pokeList, note, el) } - prependNoteElement (note) { + prependNoteElement (note, skipSave) { this.notes.push(note) while (this.notes.length > noteCacheSize) this.notes.shift() const noteList = this.page.noteList const el = this.makeNote(note) this.prependListElement(noteList, note, el) - this.storeNotes() + if (!skipSave) this.storeNotes() // Set the indicator color. if (this.notes.length === 0 || (Doc.isDisplayed(this.page.noteBox) && Doc.isDisplayed(noteList))) return var unacked = 0 diff --git a/client/webserver/site/src/js/charts.js b/client/webserver/site/src/js/charts.js index 15fe1ca001..54c82afaa0 100644 --- a/client/webserver/site/src/js/charts.js +++ b/client/webserver/site/src/js/charts.js @@ -78,7 +78,8 @@ export class DepthChart { } bind(this.canvas, 'wheel', e => { this.wheel(e) }) - bind(window, 'resize', e => { this.resize(e) }) + this.resize = e => { this.resize_(e) } + bind(window, 'resize', this.resize) bind(this.canvas, 'click', e => { this.click(e) }) this.resize() } @@ -89,7 +90,7 @@ export class DepthChart { } // resize_ is a 'resize' event handler. - resize () { + resize_ () { this.canvas.width = this.parent.clientWidth this.canvas.height = this.parent.clientHeight const xLblHeight = 30 diff --git a/client/webserver/site/src/js/markets.js b/client/webserver/site/src/js/markets.js index e110feb6ed..b51ee95933 100644 --- a/client/webserver/site/src/js/markets.js +++ b/client/webserver/site/src/js/markets.js @@ -114,10 +114,16 @@ export default class MarketsPage extends BasePage { // Buttons to set order type and side. bind(page.buyBttn, 'click', () => { swapBttns(page.sellBttn, page.buyBttn) + page.submitBttn.classList.remove('sellred') + page.submitBttn.classList.add('buygreen') + this.setOrderBttnText() this.setOrderVisibility() }) bind(page.sellBttn, 'click', () => { swapBttns(page.buyBttn, page.sellBttn) + page.submitBttn.classList.add('sellred') + page.submitBttn.classList.remove('buygreen') + this.setOrderBttnText() this.setOrderVisibility() }) // const tifCheck = tifDiv.querySelector('input[type=checkbox]') @@ -392,6 +398,12 @@ export default class MarketsPage extends BasePage { } } + setOrderBttnText () { + if (this.isSell()) { + this.page.submitBttn.textContent = `Place order to sell ${this.market.base.symbol.toUpperCase()}` + } else this.page.submitBttn.textContent = `Place order to buy ${this.market.base.symbol.toUpperCase()}` + } + /* setMarket sets the currently displayed market. */ async setMarket (host, base, quote) { const dex = app.user.exchanges[host] @@ -414,6 +426,7 @@ export default class MarketsPage extends BasePage { this.setLoaderMsgVisibility() this.setRegistrationStatusVisibility() this.resolveOrderFormVisibility() + this.setOrderBttnText() } /*