ui: Add table showing available markets when registering for dex.

client/webserver/locales/en-us.go

@@ -1,35 +1,37 @@
 package locales
 
 var EnUS = map[string]string{
-	"Markets":               "Markets",
-	"Wallets":               "Wallets",
-	"Notifications":         "Notifications",
-	"Recent Activity":       "Recent Activity",
-	"Sign Out":              "Sign Out",
-	"Order History":         "Order History",
-	"load from file":        "load from file",
-	"loaded from file":      "loaded from file",
-	"defaults":              "defaults",
-	"Wallet Password":       "Wallet Password",
-	"w_password_helper":     "This is the password you have configured with your wallet software.",
-	"w_password_tooltip":    "Leave the password empty if there is no password required for the wallet.",
-	"App Password":          "App Password",
-	"app_password_helper":   "Your app password is always required when performing sensitive wallet operations.",
-	"Add":                   "Add",
-	"Unlock":                "Unlock",
-	"Wallet":                "Wallet",
-	"app_password_reminder": "Your app password is always required when performing sensitive wallet operations.",
-	"DEX Address":           "DEX Address",
-	"TLS Certificate":       "TLS Certificate",
-	"remove":                "remove",
-	"add a file":            "add a file",
-	"Submit":                "Submit",
-	"Confirm Registration":  "Confirm Registration",
-	"app_pw_reg":            "Enter your app password to confirm DEX registration.",
-	"reg_confirm_submit":    `When you submit this form, <span id="feeDisplay"></span> DCR will be spent from your Decred wallet to pay registration fees.`,
-	"lot_size_headsup": `The lot size for the <span id="dcrBaseMarketName" class="mono"></span> market is <span id="dexDCRLotSize"></span> DCR.
-		All trades on this market are in multiples of this lot size.
-		This is the minimum possible trade amount in DCR.`,
+	"Markets":                        "Markets",
+	"Wallets":                        "Wallets",
+	"Notifications":                  "Notifications",
+	"Recent Activity":                "Recent Activity",
+	"Sign Out":                       "Sign Out",
+	"Order History":                  "Order History",
+	"load from file":                 "load from file",
+	"loaded from file":               "loaded from file",
+	"defaults":                       "defaults",
+	"Wallet Password":                "Wallet Password",
+	"w_password_helper":              "This is the password you have configured with your wallet software.",
+	"w_password_tooltip":             "Leave the password empty if there is no password required for the wallet.",
+	"App Password":                   "App Password",
+	"app_password_helper":            "Your app password is always required when performing sensitive wallet operations.",
+	"Add":                            "Add",
+	"Unlock":                         "Unlock",
+	"Wallet":                         "Wallet",
+	"app_password_reminder":          "Your app password is always required when performing sensitive wallet operations.",
+	"DEX Address":                    "DEX Address",
+	"TLS Certificate":                "TLS Certificate",
+	"remove":                         "remove",
+	"add a file":                     "add a file",
+	"Submit":                         "Submit",
+	"Confirm Registration":           "Confirm Registration",
+	"app_pw_reg":                     "Enter your app password to confirm DEX registration.",
+	"reg_confirm_submit":             `When you submit this form, <span id="feeDisplay"></span> DCR will be spent from your Decred wallet to pay registration fees.`,
+	"provied_markets":                "This DEX provides the following markets:",
+	"base_header":                    "Base",
+	"quote_header":                   "Quote",
+	"lot_size_header":                "Lot Size",
+	"lot_size_headsup":               "All trades are in multiples of the lot size.",
 	"Password":                       "Password",
 	"Register":                       "Register",
 	"Authorize Export":               "Authorize Export",

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

@@ -72,3 +72,5 @@ $grid-breakpoints: (
 @import "./orders.scss";
 @import "./order.scss";
 @import "./settings.scss";
+@import "./forms.scss";
+@import "./forms_dark.scss";

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

@@ -0,0 +1,22 @@
+table.marketstable {
+  border-collapse: collapse;
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  th {
+    font-size: 15px;
+    font-family: sans-serif;
+  }
+
+  td {
+    font-size: 15px;
+  }
+
+  td,
+  th {
+    font-size: 15px;
+    width: 33.3%;
+    padding: 3px 0;
+  }
+}

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

@@ -0,0 +1,5 @@
+body.dark {
+  table.marketstable {
+    color: #a1a1a1;
+  }
+}

client/webserver/site/src/html/forms.tmpl

@@ -139,21 +139,47 @@
 {{end}}
 
 {{define "confirmRegistrationForm"}}
-{{$passwordIsCached := .UserInfo.PasswordIsCached}}
 <div class="bg2 px-2 py-1 text-center position-relative fs18">
   [[[Confirm Registration]]]
   <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
 </div>
 <div class="p-4">
   <div class="fs16">
-    <span {{if $passwordIsCached}}class="d-hide"{{end}}>[[[app_pw_reg]]]</span>
+    <span id="appPassSpan">[[[app_pw_reg]]]</span>
     [[[reg_confirm_submit]]]
   </div>
   <div class="fs16 mt-4">
+    [[[provied_markets]]]
+    <table class="marketstable">
+      <thead>
+        <tr>
+          <th class="text-center">[[[base_header]]]</th>
+          <th class="text-center">[[[quote_header]]]</th>
+          <th class="text-center">[[[lot_size_header]]]</th>
+        </tr>
+      </thead>
+      <tbody id="marketsTableRows">
+        <tr id="marketRowTemplate">
+          <td>
+            <div class="d-flex justify-content-center align-items-center">
+              <img class="micro-icon mr-1" data-tmpl="baseicon">
+              <div data-tmpl="base"></div>
+            </div>
+          </td>
+          <td class="text-center">
+            <div class="d-flex justify-content-center align-items-center">
+              <img class="micro-icon mr-1" data-tmpl="quoteicon">
+              <div data-tmpl="quote"></div>
+            </div>
+          </td>
+          <td class="text-center" data-tmpl="lotsize"></td>
+        </tr>
+      </tbody>
+    </table>
     [[[lot_size_headsup]]]
   </div>
-  <hr class="dashed my-4">
-  <div {{if $passwordIsCached}}class="d-hide"{{end}} id="appPassBox">
+  <hr class="dashed mt-4">
+  <div id="appPassBox">
     <label for="appPass" class="pl-1 mb-1">[[[Password]]]</label>
     <input type="password" class="form-control select" id="appPass" autocomplete="current-password">
   </div>

client/webserver/site/src/html/settings.tmpl

@@ -66,7 +66,7 @@
     </form>
 
     {{- /* CONFIRM REGISTRATION */ -}}
-    <form class="card bg1 d-hide" id="confirmRegForm">
+    <form class="card mx-auto my-5 bg1 text-left d-hide" id="confirmRegForm">
       {{template "confirmRegistrationForm" .}}
     </form>
 

client/webserver/site/src/js/forms.js

@@ -1,6 +1,7 @@
 import Doc from './doc'
 import { postJSON } from './http'
 import State from './state'
+import { feeSendErr } from './constants'
 
 let app
 
@@ -292,6 +293,95 @@ export class WalletConfigForm {
   }
 }
 
+/*
+ * ConfirmRegistrationForm should be used with the "confirmRegistrationForm" template.
+ */
+export class ConfirmRegistrationForm {
+  constructor (application, form, { getDexAddr, getCertFile }, success, insufficientFundsFail) {
+    this.fields = Doc.parsePage(form, [
+      'feeDisplay', 'marketRowTemplate', 'marketsTableRows', 'appPass', 'appPassBox',
+      'appPassSpan', 'submitConfirm', 'regErr'
+    ])
+    app = application
+    this.getDexAddr = getDexAddr
+    this.getCertFile = getCertFile
+    this.success = success
+    this.insufficientFundsFail = insufficientFundsFail
+    this.form = form
+    bind(form, this.fields.submitConfirm, () => this.submitForm())
+  }
+
+  /*
+   * setExchange populates the form with the details of an exchange.
+   */
+  setExchange (xc) {
+    const fields = this.fields
+    this.fee = xc.feeAsset.amount
+    fields.feeDisplay.textContent = Doc.formatCoinValue(this.fee / 1e8)
+    while (fields.marketsTableRows.firstChild) {
+      fields.marketsTableRows.removeChild(fields.marketsTableRows.firstChild)
+    }
+    const markets = Object.values(xc.markets)
+    markets.sort((m1, m2) => {
+      const compareBase = m1.basesymbol.localeCompare(m2.basesymbol)
+      const compareQuote = m1.quotesymbol.localeCompare(m2.quotesymbol)
+      return compareBase === 0 ? compareQuote : compareBase
+    })
+    markets.forEach((market) => {
+      const tr = fields.marketRowTemplate.cloneNode(true)
+      Doc.tmplElement(tr, 'baseicon').src = Doc.logoPath(market.basesymbol)
+      Doc.tmplElement(tr, 'quoteicon').src = Doc.logoPath(market.quotesymbol)
+      Doc.tmplElement(tr, 'base').innerText = market.basesymbol.toUpperCase()
+      Doc.tmplElement(tr, 'quote').innerText = market.quotesymbol.toUpperCase()
+      Doc.tmplElement(tr, 'lotsize').innerText = `${market.lotsize / 1e8} ${market.basesymbol.toUpperCase()}`
+      fields.marketsTableRows.appendChild(tr)
+      if (State.passwordIsCached()) {
+        Doc.hide(fields.appPassBox)
+        Doc.hide(fields.appPassSpan)
+      } else {
+        Doc.show(fields.appPassBox)
+        Doc.show(fields.appPassSpan)
+      }
+    })
+  }
+
+  /*
+   * submitForm is called when the form is submitted.
+   */
+  async submitForm () {
+    const fields = this.fields
+    Doc.hide(fields.regErr)
+    const cert = await this.getCertFile()
+    const dexAddr = this.getDexAddr()
+    const registration = {
+      addr: dexAddr,
+      pass: fields.appPass.value,
+      fee: this.fee,
+      cert: cert
+    }
+    fields.appPass.value = ''
+    const loaded = app.loading(this.form)
+    const res = await postJSON('/api/register', registration)
+    if (!app.checkResponse(res)) {
+      // This form is used both in the register workflow and the
+      // settings page. The register workflow handles a failure
+      // where the user does not have enough funds to pay for the
+      // registration fee in a different way.
+      if (res.code === feeSendErr && this.insufficientFundsFail) {
+        loaded()
+        this.insufficientFundsFail(res.msg)
+        return
+      }
+      fields.regErr.textContent = res.msg
+      Doc.show(fields.regErr)
+      loaded()
+      return
+    }
+    loaded()
+    this.success()
+  }
+}
+
 export class UnlockWalletForm {
   constructor (application, form, success, pwCache) {
     this.fields = Doc.parsePage(form, [