enable order warning acknowledgement

decred · Jan 12, 2023 · 6bb1eb5 · 6bb1eb5
1 parent 565e2e2
commit 6bb1eb5
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 3 deletions.
diff --git a/client/webserver/locales/en-us.go b/client/webserver/locales/en-us.go
@@ -102,6 +102,8 @@ var EnUS = map[string]string{
 	"order_disclaimer": `<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.`,
+	"acknowledge_and_hide":      "acknowledge and hide",
+	"show_disclaimer":           "view warnings",
 	"Order":                     "Order",
 	"see all orders":            "see all orders",
 	"Exchange":                  "Exchange",

diff --git a/client/webserver/site/src/css/main_dark.scss b/client/webserver/site/src/css/main_dark.scss
@@ -18,7 +18,7 @@ body.dark {
   }
 
   .grey {
-    color: #666;
+    color: #777;
   }
 
   div.mainlinks > div,

diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
@@ -611,10 +611,16 @@
           <span class="ico-info red fs12" id="vPreorderErrTip" data-tooltip=" "></span>
         </div>
 
-        <hr class="dashed my-2">
-        <div class="disclaimer fs14">
+        <hr class="dashed mt-2 mb-0">
+        <div id="disclaimer" class="disclaimer fs14 mt-2">
           [[[order_disclaimer]]]
         </div>
+        <div id="disclaimerAck" class="grey text-start pointer hoverbg py-1 fs14 lh1">
+          <span class="ico-check fs12"></span> [[[acknowledge_and_hide]]]
+        </div>
+        <div id="showDisclaimer" class="d-flex align-items-center grey text-start pointer hoverbg fs14 lh1 py-1 d-hide">
+          <span class="fs8 ico-plus me-1 mt-1"></span> [[[show_disclaimer]]]
+        </div>
       </form>
 
       {{- /* FEE DETAIL BREAKDOWN */ -}}

diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts
@@ -420,6 +420,21 @@ export default class MarketsPage extends BasePage {
     bind(page.marketSearchV1, 'change', () => { this.filterMarkets() })
     bind(page.marketSearchV1, 'keyup', () => { this.filterMarkets() })
 
+    // Acknowledge the order disclaimer.
+    const setDisclaimerAckViz = (acked: boolean) => {
+      Doc.setVis(!acked, page.disclaimer, page.disclaimerAck)
+      Doc.setVis(acked, page.showDisclaimer)
+    }
+    bind(page.disclaimerAck, 'click', () => {
+      State.store(State.orderDisclaimerAckedLK, true)
+      setDisclaimerAckViz(true)
+    })
+    bind(page.showDisclaimer, 'click', () => {
+      State.store(State.orderDisclaimerAckedLK, false)
+      setDisclaimerAckViz(false)
+    })
+    setDisclaimerAckViz(State.fetch(State.orderDisclaimerAckedLK))
+
     const clearChartLines = () => {
       this.depthLines.hover = []
       this.drawChartLines()

diff --git a/client/webserver/site/src/js/state.ts b/client/webserver/site/src/js/state.ts
@@ -7,6 +7,8 @@ const pwKeyCK = 'sessionkey'
 // utilities for setting and retrieving cookies and storing user configuration
 // to localStorage.
 export default class State {
+  static orderDisclaimerAckedLK = 'ordAck'
+
   static setCookie (cname: string, cvalue: string) {
     const d = new Date()
     // Set cookie to expire in ten years.