ui: markets page rework (mainly order-form)

client/webserver/jsintl.go

@@ -3,6 +3,9 @@ package webserver
 import "decred.org/dcrdex/client/intl"
 
 const (
+	limitOrderTotalPreview           = "LIMIT_ORDER_TOTAL_PREVIEW"
+	marketOrderTotalPreview          = "MARKET_ORDER_TOTAL_PREVIEW"
+	noQuantityExceedsMax             = "NO_QUANTITY_EXCEEDS_MAX"
 	noPassErrMsgID                   = "NO_PASS_ERROR_MSG"
 	noAppPassErrMsgID                = "NO_APP_PASS_ERROR_MSG"
 	setButtonBuyID                   = "SET_BUTTON_BUY"
@@ -222,6 +225,9 @@ const (
 )
 
 var enUS = map[string]*intl.Translation{
+	limitOrderTotalPreview:           {T: "Total: {{ total }} {{ asset }}"},
+	marketOrderTotalPreview:          {T: "Total: ~ {{ total }} {{ asset }}"},
+	noQuantityExceedsMax:             {T: "not enough funds"},
 	noPassErrMsgID:                   {T: "password cannot be empty"},
 	noAppPassErrMsgID:                {T: "app password cannot be empty"},
 	passwordNotMatchID:               {T: "passwords do not match"},

client/webserver/locales/en-us.go

@@ -628,8 +628,10 @@ var EnUS = map[string]*intl.Translation{
 	"Round_trip fees":             {T: "Round-trip fees"},
 	"feegap_tooltip":              {T: "The rate adjustment necessary to account for on-chain tx fees"},
 	"remotegap_tooltip":           {T: "The buy-sell spread on the linked cex market"},
-	"max_zero_no_fees":            {T: `<span id="maxZeroNoFeesTicker"></span> balance < min fees ~<span id="maxZeroMinFees"></span>`},
-	"max_zero_no_bal":             {T: `low <span id="maxZeroNoBalTicker"></span> balance`},
+	"max_zero_no_fees_buy":        {T: `<span id="maxZeroNoFeesTickerBuy"></span> balance < min fees ~<span id="maxZeroMinFeesBuy"></span>`},
+	"max_zero_no_fees_sell":       {T: `<span id="maxZeroNoFeesTickerSell"></span> balance < min fees ~<span id="maxZeroMinFeesSell"></span>`},
+	"max_zero_no_bal_buy":         {T: `low <span id="maxZeroNoBalTickerBuy"></span> balance`},
+	"max_zero_no_bal_sell":        {T: `low <span id="maxZeroNoBalTickerSell"></span> balance`},
 	"Wallet Options":              {T: "Wallet Options"},
 	"balance_diff":                {T: "Balance Diff"},
 	"usd_diff":                    {T: "USD Diff"},

client/webserver/site/src/css/market.scss

@@ -36,17 +36,14 @@ div[data-handler=markets] {
   .order-panel {
     min-width: 375px;
 
-    #orderForm {
+    #orderFormBuy,
+    #orderFormSell {
       input[type=number] {
         height: 30px;
         border-radius: 0;
         font-size: 14px;
       }
 
-      input:focus {
-        outline: none;
-      }
-
       span.unitbox {
         position: absolute;
         font-size: 14px;
@@ -89,7 +86,8 @@ div[data-handler=markets] {
         }
       }
 
-      #orderPreview,
+      #orderTotalPreviewBuy,
+      #orderTotalPreviewSell,
       .h21 {
         height: 21px;
       }

client/webserver/site/src/js/app.ts

@@ -248,6 +248,36 @@ export default class Application {
    */
   async start () {
     // Handle back navigation from the browser.
+    bind(window, 'popstate', (e: PopStateEvent) => {
+      const page = e.state?.page
+      if (!page && page !== '') return
+      this.loadPage(page, e.state.data, true)
+    })
+    // disable mouse-wheel based events for number input forms because it's an
+    // undesirable foot gun,
+    // setting "passive" to "true" (in "bind" below) seemingly results into smoother
+    // page-scrolling, see this for details:
+    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners
+    const ignoreWheelOnNumberInputs = () => {
+      if (!document.activeElement) {
+        return
+      }
+      if (document.activeElement instanceof HTMLElement) {
+        if (document.activeElement.nodeName.toLowerCase() === 'input') {
+          // blurring this element is a hacky work-around that allows us to get rid of
+          // default behavior of "number input" field which treats mouse-scrolling as
+          // number increment/decrement, this solution isn't perfect because it results
+          // in focus loss (for the input element involved), a proper solution would be
+          // to implement some mechanism to re-focus input element involved once we are
+          // done scrolling - perhaps we might consider trying it out in the future
+          document.activeElement.blur()
+        }
+      }
+    }
+    bind(document, 'wheel', ignoreWheelOnNumberInputs, { passive: true })
+    bind(document, 'mousewheel', ignoreWheelOnNumberInputs, { passive: true })
+    bind(document, 'DOMMouseScroll', ignoreWheelOnNumberInputs, { passive: true })
+
     bind(window, 'popstate', (e: PopStateEvent) => {
       const page = e.state?.page
       if (!page && page !== '') return

client/webserver/site/src/js/charts.ts

@@ -49,13 +49,6 @@ export interface VolumeReport {
   sellQuote: number
 }
 
-export interface DepthReporters {
-  mouse: (r: MouseReport | null) => void
-  click: (x: number) => void
-  volume: (r: VolumeReport) => void
-  zoom: (z: number) => void
-}
-
 export interface CandleReporters {
   mouse: (r: Candle | null) => void
 }
@@ -66,15 +59,6 @@ export interface ChartReporters {
   zoom: (bigger: boolean) => void
 }
 
-export interface DepthLine {
-  rate: number
-  color: string
-}
-
-export interface DepthMarker {
-  rate: number
-  active: boolean
-}
 interface Theme {
   body: string
   axisLabel: string

client/webserver/site/src/js/doc.ts

@@ -256,6 +256,22 @@ export default class Doc {
     }, timeout)
   }
 
+  /*
+   * hidePreservingLayout hides the specified elements without affecting page layout
+   * (like Doc.hide can). Use Doc.showPreservingLayout to undo.
+   */
+  static hidePreservingLayout (...els: HTMLElement[]) {
+    for (const el of els) el.style.visibility = 'hidden'
+  }
+
+  /*
+   * showPreservingLayout shows the specified elements, undoing changes by made with
+   * Doc.hidePreservingLayout.
+   */
+  static showPreservingLayout (...els: HTMLElement[]) {
+    for (const el of els) el.style.visibility = 'visible'
+  }
+
   /*
    * show or hide the specified elements, based on value of the truthiness of
    * vis.
@@ -609,19 +625,6 @@ export default class Doc {
     return result || '0 s'
   }
 
-  /*
-   * disableMouseWheel can be used to disable the mouse wheel for any
-   * input. It is very easy to unknowingly scroll up on a number input
-   * and then submit an unexpected value. This function prevents the
-   * scroll increment/decrement behavior for a wheel action on a
-   * number input.
-   */
-  static disableMouseWheel (...inputFields: Element[]) {
-    for (const inputField of inputFields) {
-      Doc.bind(inputField, 'wheel', () => { /* pass */ }, { passive: true })
-    }
-  }
-
   // showFormError can be used to set and display error message on forms.
   static showFormError (el: PageElement, msg: any) {
     el.textContent = msg
@@ -671,7 +674,7 @@ export class Animation {
       now = new Date().getTime()
     }
     f(1)
-    this.runCompletionFunction()
+    return this.runCompletionFunction()
   }
 
   /* wait returns a promise that will resolve when the animation completes. */

client/webserver/site/src/js/locales.ts

@@ -3,6 +3,9 @@ import { postJSON } from './http'
 
 type Locale = Record<string, string>
 
+export const ID_LIMIT_ORDER_TOTAL_PREVIEW = 'LIMIT_ORDER_TOTAL_PREVIEW'
+export const ID_MARKET_ORDER_TOTAL_PREVIEW = 'MARKET_ORDER_TOTAL_PREVIEW'
+export const ID_NO_QUANTITY_EXCEEDS_MAX = 'NO_QUANTITY_EXCEEDS_MAX'
 export const ID_NO_PASS_ERROR_MSG = 'NO_PASS_ERROR_MSG'
 export const ID_NO_APP_PASS_ERROR_MSG = 'NO_APP_PASS_ERROR_MSG'
 export const ID_SET_BUTTON_BUY = 'SET_BUTTON_BUY'
@@ -70,7 +73,6 @@ export const ID_LOCKED = 'LOCKED'
 export const ID_IMMATURE = 'IMMATURE'
 export const ID_FEE_BALANCE = 'FEE_BALANCE'
 export const ID_CANDLES_LOADING = 'CANDLES_LOADING'
-export const ID_DEPTH_LOADING = 'DEPTH_LOADING'
 export const ID_INVALID_ADDRESS_MSG = 'INVALID_ADDRESS_MSG'
 export const ID_TXFEE_UNSUPPORTED = 'TXFEE_UNSUPPORTED'
 export const ID_TXFEE_ERR_MSG = 'TXFEE_ERR_MSG'