client: hide certain advanced pre order options

decred · Nov 18, 2022 · 964401b · 964401b
1 parent 4ee327b
commit 964401b
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 19 deletions.
diff --git a/client/asset/btc/btc.go b/client/asset/btc/btc.go
@@ -1826,11 +1826,12 @@ func (btc *baseWallet) splitOption(req *asset.PreSwapForm, utxos []*compositeUTX
 
 	return &asset.OrderOption{
 		ConfigOption: asset.ConfigOption{
-			Key:          splitKey,
-			DisplayName:  "Pre-size Funds",
-			Description:  desc,
-			DefaultValue: btc.useSplitTx(),
-			IsBoolean:    true,
+			Key:           splitKey,
+			DisplayName:   "Pre-size Funds",
+			Description:   desc,
+			DefaultValue:  btc.useSplitTx(),
+			IsBoolean:     true,
+			ShowByDefault: true,
 		},
 		Boolean: &asset.BooleanConfig{
 			Reason: reason,

diff --git a/client/asset/dcr/dcr.go b/client/asset/dcr/dcr.go
@@ -1425,11 +1425,12 @@ func (dcr *ExchangeWallet) splitOption(req *asset.PreSwapForm, utxos []*composit
 	cfg := dcr.config()
 	return &asset.OrderOption{
 		ConfigOption: asset.ConfigOption{
-			Key:          splitKey,
-			DisplayName:  "Pre-size Funds",
-			Description:  desc,
-			DefaultValue: cfg.useSplitTx,
-			IsBoolean:    true,
+			Key:           splitKey,
+			DisplayName:   "Pre-size Funds",
+			Description:   desc,
+			DefaultValue:  cfg.useSplitTx,
+			IsBoolean:     true,
+			ShowByDefault: true,
 		},
 		Boolean: &asset.BooleanConfig{
 			Reason: reason,

diff --git a/client/asset/interface.go b/client/asset/interface.go
@@ -245,6 +245,9 @@ type ConfigOption struct {
 	// in the settings map.
 	Repeatable string `json:"repeatable"`
 	Required   bool   `json:"required"`
+
+	// ShowByDefault to show or not options on "hide advanced options".
+	ShowByDefault bool `json:"showByDefault,omitempty"`
 }
 
 const (

diff --git a/client/webserver/locales/en-us.go b/client/webserver/locales/en-us.go
@@ -310,4 +310,6 @@ var EnUS = map[string]string{
 	"Configure":              "Configure",
 	"Retire":                 "Retire",
 	"Lots":                   "Lots",
+	"show advanced options":  "show advanced options",
+	"hide advanced options":  "hide advanced options",
 }
diff --git a/client/webserver/site/src/html/bodybuilder.tmpl b/client/webserver/site/src/html/bodybuilder.tmpl
@@ -102,7 +102,7 @@
 {{end}}
 
 {{define "bottom"}}
-<script src="/js/entry.js?v=GHSXZ15s"></script>
+<script src="/js/entry.js?v=MKWgJMHgU"></script>
 </body>
 </html>
 {{end}}
diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
@@ -572,11 +572,20 @@
 
           <hr class="dashed mb-2 mt-3">
 
-          <div class="grey fs18 text-start">[[[Options]]]</div>
+          <div class="grey fs18 d-flex justify-content-between align-items-center">
+            [[[Options]]]
+            <span class="grey fs14 underline pointer hoverbg" id="showAdvancedOptions">
+              [[[show advanced options]]]
+            </span>
+            <span class="grey fs14 underline pointer hoverbg d-hide" id="hideAdvancedOptions">
+              [[[hide advanced options]]]
+            </span>
+          </div>
 
-          <div id="vOrderOpts">
+          <div id="vDefaultOrderOpts">
             {{template "orderOptionTemplates"}}
           </div>
+          <div id="vOtherOrderOpts" class="d-hide"></div>
         </div> {{- /* END id="vPreorder" */ -}}
 
         <div id="vUnlockPreorder">

diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts
@@ -339,7 +339,7 @@ export default class MarketsPage extends BasePage {
     Doc.bind(page.vUnlockSubmit, 'click', async () => { this.submitEstimateUnlock() })
     // Cancel order form.
     bindForm(page.cancelForm, page.cancelSubmit, async () => { this.submitCancel() })
-    // Order detail view
+    // Order detail view.
     Doc.bind(page.vFeeDetails, 'click', () => this.showForm(page.vDetailPane))
     Doc.bind(page.closeDetailPane, 'click', () => this.showVerifyForm())
     // // Bind active orders list's header sort events.
@@ -1668,6 +1668,32 @@ export default class MarketsPage extends BasePage {
     page.vPreorderErrTip.dataset.tooltip = msg
   }
 
+  showPreOrderAdvancedOptions () {
+    const page = this.page
+    Doc.hide(page.showAdvancedOptions)
+    Doc.show(page.hideAdvancedOptions, page.vOtherOrderOpts)
+  }
+
+  hidePreOrderAdvancedOptions () {
+    const page = this.page
+    Doc.hide(page.hideAdvancedOptions, page.vOtherOrderOpts)
+    Doc.show(page.showAdvancedOptions)
+  }
+
+  reloadOrderOpts (order: TradeForm, swap: PreSwap, redeem: PreRedeem, changed: ()=>void) {
+    const page = this.page
+    Doc.empty(page.vDefaultOrderOpts, page.vOtherOrderOpts)
+    const addOption = (opt: OrderOption, isSwap: boolean) => {
+      const el = OrderUtil.optionElement(opt, order, changed, isSwap)
+      if (opt.showByDefault) page.vDefaultOrderOpts.appendChild(el)
+      else page.vOtherOrderOpts.appendChild(el)
+    }
+    for (const opt of swap.options || []) addOption(opt, true)
+    for (const opt of redeem.options || []) addOption(opt, false)
+    app().bindTooltips(page.vDefaultOrderOpts)
+    app().bindTooltips(page.vOtherOrderOpts)
+  }
+
   /* preOrder loads the options and fetches pre-order estimates */
   async preOrder (order: TradeForm) {
     const page = this.page
@@ -1680,7 +1706,6 @@ export default class MarketsPage extends BasePage {
       Doc.hide(page.vPreorderErr)
       Doc.show(page.vPreorder)
       const { swap, redeem } = est
-      Doc.empty(page.vOrderOpts)
       swap.options = swap.options || []
       redeem.options = redeem.options || []
       this.setFeeEstimates(swap, redeem, order)
@@ -1691,10 +1716,10 @@ export default class MarketsPage extends BasePage {
           page.vFeeSummary.style.backgroundColor = `rgba(128, 128, 128, ${0.5 - 0.5 * progress})`
         })
       }
-      const addOption = (opt: OrderOption, isSwap: boolean) => page.vOrderOpts.appendChild(OrderUtil.optionElement(opt, order, changed, isSwap))
-      for (const opt of swap.options || []) addOption(opt, true)
-      for (const opt of redeem.options || []) addOption(opt, false)
-      app().bindTooltips(page.vOrderOpts)
+      // bind show or hide advanced pre order options.
+      Doc.bind(page.showAdvancedOptions, 'click', () => { this.showPreOrderAdvancedOptions() })
+      Doc.bind(page.hideAdvancedOptions, 'click', () => { this.hidePreOrderAdvancedOptions() })
+      this.reloadOrderOpts(order, swap, redeem, changed)
     }
 
     refreshPreorder()

diff --git a/client/webserver/site/src/js/registry.ts b/client/webserver/site/src/js/registry.ts
@@ -404,6 +404,7 @@ export interface XYRange {
 export interface OrderOption extends ConfigOption {
   boolean?: BooleanConfig
   xyRange?: XYRange
+  showByDefault?: boolean
 }
 
 export interface SwapEstimate {