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
decred · Nov 2, 2020 · dbf9d2c · dbf9d2c
1 parent 9790fb1
commit dbf9d2c
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 58 deletions.
diff --git 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
@@ -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
@@ -308,18 +308,24 @@ table.balance-table button:hover {
     color: #555;
   }
 
-  button:hover {
+  button:hover,
+  button.selected {
     color: black;
   }
 
   button.submit {
     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
@@ -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
@@ -8,7 +8,7 @@
   <link rel="icon" href="/img/favicon.png?v=MQq4VTue">
   <meta name="description" content="Decred DEX Client Web Portal">
   <title>{{.Title}}</title>
-  <link href="/css/style.css?v=Ueawh" rel="stylesheet">
+  <link href="/css/style.css?v=Tl30" rel="stylesheet">
 </head>
 <body {{if .UserInfo.DarkMode}} class="dark"{{end}}>
   <div class="popup-notes" id="popupNotes">
@@ -85,7 +85,7 @@
 {{end}}
 
 {{define "bottom"}}
-<script src="/js/entry.js?v=lntTxg"></script>
+<script src="/js/entry.js?v=35bM"></script>
 </body>
 </html>
 {{end}}
diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
@@ -111,11 +111,11 @@
 
                     {{- /* BUY - SELL SELECTOR */ -}}
                     <div class="d-flex justify-content-start pt-4 pb-2 fs14">
-                      <button id="buyBttn" type="button" class="bg2 selected">
+                      <button id="buyBttn" type="button" class="bg2 buygreen selected">
                         Buy
                         <span data-unit="base"></span>
                       </button>
-                      <button id="sellBttn" type="button" class="bg2 ml-2">
+                      <button id="sellBttn" type="button" class="bg2 sellred ml-2">
                         Sell
                         <span data-unit="base"></span>
                       </button>
@@ -182,16 +182,17 @@
                     <div class="mt-2 fs14 text-right" id="orderPreview"></div>
 
                     {{- /* TIME-IN-FORCE CHECK BOX */ -}}
-                    <div class="mt-2 text-left pl-4" id="tifBox">
+                    <div class="my-1 text-left pl-4" id="tifBox">
                       <input id="tifNow" class="form-check-input" type="checkbox" value="">
                       <label class="form-check-label" for="tifNow">
-                        Match for one epoch only
+                        Immediate or cancel
+                        <span class="ico-info fs12" data-tooltip="If the order doesn't fully match during the next match cycle, any unmatched quantity will not be booked or matched again. Taker-only order."></span>
                       </label>
                     </div>
 
                     {{- /* SUBMIT ORDER BUTTON */ -}}
                     <div class="text-right">
-                      <button id="submitBttn" type="button" class="my-1 fs14 submit text-center">Submit Order</button>
+                      <button id="submitBttn" type="button" class="my-1 fs14 submit text-center buygreen"></button> {{/* textContent set by script */}}
                     </div>
                   </div>
                   <div class="fs15 pt-3 text-center d-hide errcolor" id="orderErr"></div>
@@ -284,7 +285,7 @@
         </div>
       </div>
 
-      {{- /* USER ORDERS: TODO */ -}}
+      {{- /* USER ORDERS */ -}}
       <div class="bg0 p-0 col-10 d-flex flex-column align-items-stretch">
         <div class="market-header text-center fs14 py-1 brdrleft">
           Your Orders
@@ -352,34 +353,36 @@
 
     {{- /* VERIFY ORDER */ -}}
     <form class="card bg1 p-4 position-relative fs16 text-center d-hide" id="verifyForm" autocomplete="off">
-      You are submitting an order to
-      <div class="fs20 demi py-1">
-        <span id="vSide"></span>
-        <span id="vQty"></span>
-        <span id="vBase"></span>
-      </div>
-      <div id="verifyLimit">
-        at a rate of
+      <div class="echo-data">
+        You are submitting an order to
         <div class="fs20 demi py-1">
-          <span id="vRate"></span>
-          <sup data-unit="quote"></sup>/<sub data-unit="base"></sub>
+          <span id="vSide"></span>
+          <span id="vQty"></span>
+          <span id="vBase"></span>
         </div>
-        for a total of
-        <div class="fs20 demi py-1">
-          <span id="vTotal"></span>
-          <span id="vQuote"></span>
+        <div id="verifyLimit">
+          at a rate of
+          <div class="fs20 demi py-1">
+            <span id="vRate"></span>
+            <sup data-unit="quote"></sup>/<sub data-unit="base"></sub>
+          </div>
+          for a total of
+          <div class="fs20 demi py-1">
+            <span id="vTotal"></span>
+            <span id="vQuote"></span>
+          </div>
         </div>
-      </div>
-      <div id="verifyMarket">
-        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
-        <div class="fs20 demi py-1">
-          <span id="vmTotal"></span>
-          <span id="vmAsset"></span>
-          <span class="fs15">(<div class="d-inline" id="vmLots"></div class="d-inline"> lots)</span>
+        <div id="verifyMarket">
+          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
+          <div class="fs20 demi py-1">
+            <span id="vmTotal"></span>
+            <span id="vmAsset"></span>
+            <span class="fs15">(<div class="d-inline" id="vmLots"></div class="d-inline"> lots)</span>
+          </div>
         </div>
       </div>
-      <hr class="dashed my-4 mx-4">
+      <hr class="dashed my-4">
       <div class="fs16 text-center">Authorize this order with your app password.</div>
       <div class="d-flex mt-3">
         <div class="col-12 p-0 text-left">
@@ -391,6 +394,12 @@
           <button id="vSubmit" type="button" class="w-75 mt-1 justify-content-center fs15 bg2 selected">Submit</button>
         </div>
       </div>
+      <hr class="dashed my-4">
+      <div class="disclaimer mt-3 fs14">
+        <span class="red">IMPORTANT</span>: Trades take time to settle, and you cannot turn off the DEX client software,
+        or the <span data-unit="quote"></span> or <span data-unit="base"></span> 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.
+      </div>
     </form>
 
     <form class="card bg1 d-hide" id="cancelForm" autocomplete="off">

diff --git a/client/webserver/site/src/html/order.tmpl b/client/webserver/site/src/html/order.tmpl
@@ -144,35 +144,35 @@
             {{if len $match.Swap}}
             <div class="px-3 pb-3">
               <span class="match-data-label">Swap ({{$ord.FromSymbol}}, you)</span><br>
-              <a class="mono plainlink" data-explorer-id="{{$ord.FromID}}"
+              <a target="_blank" class="mono plainlink" data-explorer-id="{{$ord.FromID}}"
                 data-explorer-coin="{{$match.SwapString}}">{{$match.SwapString}}</a>
             </div>
             {{end}}
             {{if len $match.CounterSwap}}
             <div class="px-3 pb-3">
               <span class="match-data-label">Swap ({{$ord.ToSymbol}}, them)</span><br>
-              <a class="mono plainlink" data-explorer-id="{{$ord.ToID}}"
+              <a target="_blank" class="mono plainlink" data-explorer-id="{{$ord.ToID}}"
                 data-explorer-coin="{{$match.CounterSwapString}}">{{$match.CounterSwapString}}</a>
             </div>
             {{end}}
             {{if len $match.Redeem}}
             <div class="px-3 pb-3">
               <span class="match-data-label">Redemption ({{$ord.ToSymbol}}, you)</span><br>
-              <a class="mono plainlink" data-explorer-id="{{$ord.ToID}}"
+              <a target="_blank" class="mono plainlink" data-explorer-id="{{$ord.ToID}}"
                 data-explorer-coin="{{$match.RedeemString}}">{{$match.RedeemString}}</a>
             </div>
             {{end}}
             {{if len $match.CounterRedeem}}
             <div class="px-3 pb-3">
               <span class="match-data-label">Redemption ({{$ord.FromSymbol}}, them)</span><br>
-              <a class="mono plainlink" data-explorer-id="{{$ord.FromID}}"
+              <a target="_blank" class="mono plainlink" data-explorer-id="{{$ord.FromID}}"
                 data-explorer-coin="{{$match.CounterRedeemString}}">{{$match.CounterRedeemString}}</a>
             </div>
             {{end}}
             {{if len $match.Refund}}
             <div class="px-3 pb-3">
               <span class="match-data-label red">Refund ({{$ord.FromSymbol}}, you)</span><br>
-              <a class="mono plainlink red" data-explorer-id="{{$ord.FromID}}"
+              <a target="_blank" class="mono plainlink red" data-explorer-id="{{$ord.FromID}}"
                 data-explorer-coin="{{$match.RefundString}}">{{$match.RefundString}}</a>
             </div>
             {{end}}

diff --git 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
@@ -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
@@ -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()
   }
 
   /*