app: Update UI to support bond updaters

The transaction details popup now shows change and replaced bonds. Also
in many placed the bond amount was multiplied by two to handle the bond
reserves requirement which bond updaters do not have, so this needed to
be updated.

Author: martonp

client/core/bond.go

@@ -1771,15 +1771,16 @@ func (c *Core) makeAndPostBond(dc *dexConnection, acctExists bool, wallet *xcWal
 			coinIDString(bond.AssetID, bondCoinCast), bondCoinStr)
 	}
 
+	// Set up the coin waiter, which watches confirmations so the user knows
+	// when to expect their account to be marked paid by the server.
+	c.monitorBondConfs(dc, bond, reqConfs)
+
 	c.updateAssetBalance(bond.AssetID)
 
 	// Start waiting for reqConfs.
 	subject, details := c.formatDetails(TopicBondConfirming, reqConfs, makeCoinIDToken(bondCoinStr, bond.AssetID), unbip(bond.AssetID), dc.acct.host)
 	c.notify(newBondPostNoteWithConfirmations(TopicBondConfirming, subject,
 		details, db.Success, bond.AssetID, bondCoinStr, 0, dc.acct.host, c.exchangeAuth(dc)))
-	// Set up the coin waiter, which watches confirmations so the user knows
-	// when to expect their account to be marked paid by the server.
-	c.monitorBondConfs(dc, bond, reqConfs)
 
 	return bond.CoinID, nil
 }

client/webserver/locales/en-us.go

@@ -524,6 +524,11 @@ var EnUS = map[string]string{
 	"fee":                         "Fee",
 	"tx_id":                       "Transaction ID",
 	"bond_id":                     "Bond ID",
+	"change_bond_id":              "Change Bond ID",
+	"value":                       "Value",
+	"replaced_bonds":              "Replaced Bonds",
+	"change_bond_tooltip":         `The new bond required is smaller than the combined value of the replaced bonds, so a change bond that can be refunded sooner is created.`,
+	"replaced_bonds_tooptip":      "This asset allows existing bonds to fund new bonds without having to be refunded first.",
 	"locktime":                    "Lock Time",
 	"recipient":                   "Recipient",
 	"block":                       "Block",

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

@@ -370,7 +370,11 @@
   transition: color 1s ease;
 }
 
-#txDetailsBondSection, #txDetailsRecipientSection, #txDetailsNonceSection {
+#txDetailsBondSection,
+#txDetailsRecipientSection,
+#txDetailsNonceSection,
+#txDetailsChangeBondSection,
+#txDetailsReplacedBondsSection {
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid #777;

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

@@ -1011,19 +1011,47 @@
         <div><span id="txDetailsRecipient" class="ease-color"></span><span id="copyRecipientBtn" class="copy-btn ico-copy mx-2 fs18 ease-color"></span></div>
       </span>
       <div id="txDetailsBondSection" class="w-100"> 
+        <span id="txDetailsBondAccountIDSection" class="d-flex justify-content-between w-100">
+          <span>[[[Account ID]]]</span>
+          <div><span id="txDetailsBondAccountID" class="ease-color"></span><span id="copyBondAccountIDBtn" class="copy-btn ico-copy mx-2 fs18 ease-color"></span></div>
+        </span>
         <span class="d-flex justify-content-between w-100">
           <span>[[[bond_id]]]</span>
           <div><span id="txDetailsBondID" class="ease-color"></span><span id="copyBondIDBtn" class="copy-btn ico-copy mx-2 fs18 ease-color"></span></div>
         </span>
+        <span class="d-flex justify-content-between w-100">
+          <span>[[[value]]]</span>
+          <div><span id="txDetailsBondValue" class="ease-color"></span></div>
+        </span>
         <span class="d-flex justify-content-between w-100">
           <span>[[[locktime]]]</span>
           <span id="txDetailsBondLocktime" class="ease-color"></span>
         </span>
-        <span id="txDetailsBondAccountIDSection" class="d-flex justify-content-between w-100">
-          <span>[[[Account ID]]]</span>
-          <div><span id="txDetailsBondAccountID" class="ease-color"></span><span id="copyBondAccountIDBtn" class="copy-btn ico-copy mx-2 fs18 ease-color"></span></div>
+      </div>
+      <div id="txDetailsChangeBondSection" class="w-100">
+        <span class="d-flex justify-content-between w-100">
+          <span>[[[change_bond_id]]] <span class="ico-info fs12 me-1" data-tooltip="[[[change_bond_tooltip]]]"></span></span>
+          <div><span id="txDetailsChangeBondID" class="ease-color"></span><span id="copyChangeBondIDBtn" class="copy-btn ico-copy mx-2 fs18 ease-color"></span></div>
+        </span>
+        <span class="d-flex justify-content-between w-100">
+          <span>[[[value]]]</span>
+          <div><span id="txDetailsChangeBondValue" class="ease-color"></span></div>
+        </span>
+        <span class="d-flex justify-content-between w-100">
+          <span>[[[locktime]]]</span>
+          <span id="txDetailsChangeBondLocktime" class="ease-color"></span>
         </span>
       </div>
+      <div id="txDetailsReplacedBondsSection" class="w-100">
+        <span class="d-flex justify-content-between w-100">
+          <span>[[[replaced_bonds]]] <span class="ico-info fs12 me-1" data-tooltip="[[[replaced_bonds_tooptip]]]"></span></span><span><span>
+        </span>
+        <div id="replacedBonds">
+          <span id="replacedBondTmpl" class="d-flex justify-content-between w-100">
+            <span></span><span data-tmpl="info"></span>
+          </span>
+        </div>
+      </div>
       <span id="txDetailsNonceSection" class="d-flex justify-content-between w-100">
         <span>[[[nonce]]]</span><span id="txDetailsNonce"></span>
       </span>

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

@@ -4,7 +4,7 @@ import State from './state'
 import { postJSON } from './http'
 import * as forms from './forms'
 import * as intl from './locales'
-import { ReputationMeter, strongTier } from './account'
+import { ReputationMeter, strongTier, bondReserveMultiplier } from './account'
 import {
   app,
   PageElement,
@@ -13,6 +13,7 @@ import {
   PasswordCache,
   WalletState
 } from './registry'
+import { traitBondUpdater } from './wallets'
 
 interface Animator {
   animate: (() => Promise<void>)
@@ -229,11 +230,21 @@ export default class DexSettingsPage extends BasePage {
         return
       }
     }
-    if (wallet.synced && wallet.balance.available >= 2 * bondAsset.amount + fees) {
-      // If we are raising our tier, we'll show a confirmation form
+
+    const isBondUpdater = (wallet.traits & traitBondUpdater) !== 0
+
+    let multiplier = bondReserveMultiplier
+    if (isBondUpdater) multiplier = 1
+    const walletFunded = wallet.balance.available >= multiplier * bondAsset.amount + fees
+
+    const loweringTier = this.confirmRegisterForm.tier < xc.auth.targetTier
+    const stillSameUpdater = isBondUpdater && (xc.auth.bondAssetID === assetID)
+
+    if (wallet.synced && (walletFunded || loweringTier || stillSameUpdater)) {
       this.progressTierFormWithSyncedFundedWallet(assetID)
       return
     }
+
     this.walletWaitForm.setWallet(assetID, fees, this.confirmRegisterForm.tier)
     this.showForm(page.walletWait)
   }
@@ -477,7 +488,9 @@ export default class DexSettingsPage extends BasePage {
     const bondsFeeBuffer = await this.getBondsFeeBuffer(assetID, page.newWalletForm)
     this.confirmRegisterForm.setFees(assetID, bondsFeeBuffer)
 
-    if (wallet.synced && wallet.balance.available >= 2 * bondAmt + bondsFeeBuffer) {
+    let multiplier = bondReserveMultiplier
+    if ((wallet.traits & traitBondUpdater) !== 0) multiplier = 1
+    if (wallet.synced && wallet.balance.available >= multiplier * bondAmt + bondsFeeBuffer) {
       this.progressTierFormWithSyncedFundedWallet(assetID)
       return
     }

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

@@ -32,6 +32,7 @@ import {
   CoreNote
 } from './registry'
 import { XYRangeHandler } from './opts'
+import { traitNewAddresser, traitBondUpdater } from './wallets'
 
 interface ConfigOptionInput extends HTMLInputElement {
   configOpt: ConfigOption
@@ -838,7 +839,9 @@ export class ConfirmRegistrationForm {
     const page = this.page
     const xc = this.xc
     const bondAsset = xc.bondAssets[asset.symbol]
-    const bondLock = bondAsset.amount * tier * bondReserveMultiplier
+    let multiplier = bondReserveMultiplier
+    if (asset.wallet && (asset.wallet.traits & traitBondUpdater) !== 0) multiplier = 1
+    const bondLock = bondAsset.amount * tier * multiplier
     const bondLockConventional = bondLock / conversionFactor
     page.tradingTier.textContent = String(tier)
     page.logo.src = Doc.logoPath(asset.symbol)
@@ -1109,7 +1112,9 @@ export class FeeAssetSelectionForm {
           return
         }
         setReadyMessage(tmpl.ready, asset)
-        const bondLock = bondAsset.amount * bondReserveMultiplier * tier
+        let multiplier = bondReserveMultiplier
+        if (asset.wallet && (asset.wallet.traits & traitBondUpdater) !== 0) multiplier = 1
+        const bondLock = bondAsset.amount * multiplier * tier
         const fee = Doc.formatCoinValue(bondLock, unitInfo)
         tmpl.feeAmt.textContent = String(fee)
         if (r) tmpl.fiatBondAmount.textContent = Doc.formatFiatConversion(bondLock, r, asset.unitInfo)
@@ -1290,7 +1295,9 @@ export class WalletWaitForm {
     Doc.hide(page.syncUncheck, page.syncCheck, page.balUncheck, page.balCheck, page.syncRemainBox, page.bondCostBreakdown)
     Doc.show(page.balanceBox)
 
-    let bondLock = 2 * bondAsset.amount * tier
+    let multiplier = bondReserveMultiplier
+    if ((asset.wallet.traits & traitBondUpdater) !== 0) multiplier = 1
+    let bondLock = multiplier * bondAsset.amount * tier
     if (bondFeeBuffer > 0) {
       Doc.show(page.bondCostBreakdown)
       page.bondLockNoFees.textContent = Doc.formatCoinValue(bondLock, ui)
@@ -1321,7 +1328,7 @@ export class WalletWaitForm {
     }
 
     Doc.show(synced ? page.syncCheck : syncProgress >= 1 ? page.syncSpinner : page.syncUncheck)
-    Doc.show(bal.available >= 2 * bondAsset.amount + bondFeeBuffer ? page.balCheck : page.balUncheck)
+    Doc.show(bal.available >= multiplier * bondAsset.amount + bondFeeBuffer ? page.balCheck : page.balUncheck)
 
     page.progress.textContent = (syncProgress * 100).toFixed(1)
 
@@ -1364,7 +1371,9 @@ export class WalletWaitForm {
     // NOTE: when/if we allow one-time bond post (no maintenance) from the UI we
     // may allow to proceed as long as they have enough for tx fees. For now,
     // the balance check box will remain unchecked and we will not proceed.
-    if (avail < 2 * this.bondAsset.amount + this.bondFeeBuffer) return
+    let multiplier = bondReserveMultiplier
+    if ((asset.wallet.traits & traitBondUpdater) !== 0) multiplier = 1
+    if (avail < multiplier * this.bondAsset.amount + this.bondFeeBuffer) return
 
     Doc.show(page.balCheck)
     Doc.hide(page.balUncheck, page.balanceBox, page.sendEnough)
@@ -1968,8 +1977,6 @@ export class LoginForm {
   }
 }
 
-const traitNewAddresser = 1 << 1
-
 /*
  * DepositAddress displays a deposit address, a QR code, and a button to
  * generate a new address (if supported).

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

@@ -174,6 +174,7 @@ export const ID_TX_TYPE_REVOKE_TOKEN_APPROVAL = 'TX_TYPE_REVOKE_TOKEN_APPROVAL'
 export const ID_TX_TYPE_TICKET_PURCHASE = 'TX_TYPE_TICKET_PURCHASE'
 export const ID_TX_TYPE_TICKET_VOTE = 'TX_TYPE_TICKET_VOTE'
 export const ID_TX_TYPE_TICKET_REVOCATION = 'TX_TYPE_TICKET_REVOCATION'
+export const ID_TX_TYPE_UPDATE_BOND = 'TX_TYPE_UPDATE_BOND'
 export const ID_MISSING_CEX_CREDS = 'MISSING_CEX_CREDS'
 export const ID_MULTIPLIER = 'MULTIPLIER'
 export const ID_NO_PLACEMENTS = 'NO_PLACEMENTS'
@@ -360,6 +361,7 @@ export const enUS: Locale = {
   [ID_TX_TYPE_TICKET_PURCHASE]: 'Ticket purchase',
   [ID_TX_TYPE_TICKET_VOTE]: 'Ticket vote',
   [ID_TX_TYPE_TICKET_REVOCATION]: 'Ticket revocation',
+  [ID_TX_TYPE_UPDATE_BOND]: 'Update bond',
   [ID_MISSING_CEX_CREDS]: 'specify both key and secret',
   [ID_MULTIPLIER]: 'Multiplier',
   [ID_NO_PLACEMENTS]: 'must specify 1 or more placements',

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

@@ -19,6 +19,8 @@ import {
   PageElement
 } from './registry'
 import State from './state'
+import { bondReserveMultiplier } from './account'
+import { traitBondUpdater } from './wallets'
 
 export default class RegistrationPage extends BasePage {
   body: HTMLElement
@@ -101,7 +103,9 @@ export default class RegistrationPage extends BasePage {
         const bondAsset = this.currentDEX.bondAssets[asset.symbol]
         const bondsFeeBuffer = await this.getBondsFeeBuffer(assetID, page.regAssetForm)
         this.confirmRegisterForm.setAsset(assetID, tier, bondsFeeBuffer)
-        if (wallet.synced && wallet.balance.available >= 2 * bondAsset.amount + bondsFeeBuffer) {
+        let multiplier = bondReserveMultiplier
+        if ((wallet.traits & traitBondUpdater) !== 0) multiplier = 1
+        if (wallet.synced && wallet.balance.available >= multiplier * bondAsset.amount + bondsFeeBuffer) {
           this.animateConfirmForm(page.regAssetForm)
           return
         }
@@ -216,7 +220,9 @@ export default class RegistrationPage extends BasePage {
     const bondAmt = this.currentDEX.bondAssets[asset.symbol].amount
 
     const bondsFeeBuffer = await this.getBondsFeeBuffer(assetID, page.newWalletForm)
-    if (wallet.synced && wallet.balance.available >= 2 * bondAmt + bondsFeeBuffer) {
+    let multiplier = bondReserveMultiplier
+    if ((wallet.traits & traitBondUpdater) !== 0) multiplier = 1
+    if (wallet.synced && wallet.balance.available >= multiplier * bondAmt + bondsFeeBuffer) {
       await this.animateConfirmForm(page.newWalletForm)
       return
     }

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

@@ -891,10 +891,17 @@ export interface VotingServiceProvider {
   netShare: number
 }
 
-export interface BondTxInfo {
-  bondID: string
+export interface BondInfo {
+  id : string
+  amount: number
   lockTime: number
+}
+
+export interface BondTxInfo {
   accountID: string
+  bond: BondInfo
+  changeBond?: BondInfo
+  replacedBond?: BondInfo[]
 }
 
 export interface WalletTransaction {

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

@@ -17,6 +17,8 @@ import {
   PageElement,
   PasswordCache
 } from './registry'
+import { bondReserveMultiplier } from './account'
+import { traitBondUpdater } from './wallets'
 
 const animationLength = 300
 
@@ -89,7 +91,9 @@ export default class SettingsPage extends BasePage {
         const bondAsset = this.currentDEX.bondAssets[asset.symbol]
         const bondsFeeBuffer = await this.getBondsFeeBuffer(assetID, page.regAssetForm)
         this.confirmRegisterForm.setAsset(assetID, tier, bondsFeeBuffer)
-        if (wallet.synced && wallet.balance.available >= 2 * bondAsset.amount + bondsFeeBuffer) {
+        let multiplier = bondReserveMultiplier
+        if ((wallet.traits & traitBondUpdater) !== 0) multiplier = 1
+        if (wallet.synced && wallet.balance.available >= multiplier * bondAsset.amount + bondsFeeBuffer) {
           this.animateConfirmForm(page.regAssetForm)
           return
         }
@@ -269,7 +273,9 @@ export default class SettingsPage extends BasePage {
 
     const bondsFeeBuffer = await this.getBondsFeeBuffer(assetID, page.newWalletForm)
     this.confirmRegisterForm.setFees(assetID, bondsFeeBuffer)
-    if (wallet.synced && wallet.balance.available >= 2 * bondAmt + bondsFeeBuffer) {
+    let multiplier = bondReserveMultiplier
+    if ((wallet.traits & traitBondUpdater) !== 0) multiplier = 1
+    if (wallet.synced && wallet.balance.available >= multiplier * bondAmt + bondsFeeBuffer) {
       await this.animateConfirmForm(page.newWalletForm)
       return
     }