wallet: Display incoming transaction in Deposit modal

client/asset/btc/btc.go

@@ -5272,7 +5272,7 @@ func (btc *intermediaryWallet) checkPendingTxs(tip uint64) {
 					}
 				}
 
-				btc.addTxToHistory(asset.Receive, txHash, toSatoshi(tx.Amount), fee, nil, nil, true)
+				btc.addTxToHistory(asset.Receive, txHash, toSatoshi(tx.Amount), fee, nil, &tx.Address, true)
 			}
 		}
 	}

client/webserver/locales/en-us.go

@@ -505,6 +505,7 @@ var EnUS = map[string]string{
 	"ID":                          "ID",
 	"no_tx_history":               "No transactions to show",
 	"tx_details":                  "Transaction Details",
+	"deposit_tx_received":         "Transaction Received",
 	"fee":                         "Fee",
 	"tx_id":                       "Transaction ID",
 	"bond_id":                     "Bond ID",

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

@@ -143,11 +143,30 @@
     <span id="depositTokenParentName"></span>
   </div>
 </div>
-<img class="mb-3" id="qrcode" />
-<div class="mono deposit-address select-all">
-  <span id="depositAddress"></span>
-  <span id="copyAddressBtn" class="copy-btn ico-copy mt-2 ml-2 fs18"></span>
-  <span id="copyAlert" class="d-hide">[[[copied]]]</span>
+<div id="depositAddressContainer" class="text-center">
+  <img class="mb-3" id="qrcode" />
+  <div class="mono deposit-address select-all">
+    <span id="depositAddress"></span>
+    <span id="copyAddressBtn" class="copy-btn ico-copy mt-2 ml-2 fs18"></span>
+    <span id="copyAlert" class="d-hide">[[[copied]]]</span>
+  </div>
+</div>
+<div id="depositTxContainer" class="d-hide">
+  <div class="position-relative flex-center flex-column mb-4">
+    <div class="px-2 py-1 text-center position-relative fs18 sans-light mt-2">[[[deposit_tx_received]]]</div>
+    <span class="d-flex justify-content-between w-100 fs16">
+      <span>[[[Status]]]</span>
+      <div><span id="depositTxStatus"></span></div>
+    </span>
+    <span class="d-flex justify-content-between w-100 fs16">
+      <span>[[[Amount]]]</span>
+      <div><span id="depositTxAmount"></span></div>
+    </span>
+    <span class="d-flex justify-content-between w-100 fs16">
+      <span class="pe-3">[[[tx_id]]]</span>
+      <div><a id="depositTxID" class="subtlelink" target="_blank"></a></div>
+    </span>
+  </div>
 </div>
 <div class="my-3">
   <button id="newDepAddrBttn" type="button" class=" px-2 justify-content-center fs15 bg2 selected">[[[New Deposit Address]]]</button>

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

@@ -734,6 +734,11 @@ function formatSigFigsWithFormatters (intFormatter: Intl.NumberFormat, sigFigFor
   return fullPrecisionFormatter(maxDecimals, locales).format(n)
 }
 
+export function trimStringWithEllipsis (str: string, maxLen: number): string {
+  if (str.length <= maxLen) return str
+  return `${str.substring(0, maxLen / 2)}...${str.substring(str.length - maxLen / 2)}`
+}
+
 if (process.env.NODE_ENV === 'development') {
   // Code will only appear in dev build.
   // https://webpack.js.org/guides/production/

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

@@ -1,4 +1,4 @@
-import Doc, { Animation } from './doc'
+import Doc, { Animation, trimStringWithEllipsis } from './doc'
 import { postJSON } from './http'
 import State from './state'
 import * as intl from './locales'
@@ -29,9 +29,11 @@ import {
   WalletInfo,
   Token,
   WalletCreationNote,
-  CoreNote
+  CoreNote,
+  WalletTransaction
 } from './registry'
 import { XYRangeHandler } from './opts'
+import { CoinExplorers } from './order'
 
 interface ConfigOptionInput extends HTMLInputElement {
   configOpt: ConfigOption
@@ -1931,6 +1933,7 @@ export class DepositAddress {
   form: PageElement
   page: Record<string, PageElement>
   assetID: number
+  hasIncomingTx: boolean
 
   constructor (form: PageElement) {
     this.form = form
@@ -1947,6 +1950,7 @@ export class DepositAddress {
     const asset = app().assets[assetID]
     page.depositLogo.src = Doc.logoPath(asset.symbol)
     const wallet = app().walletMap[assetID]
+    this.hasIncomingTx = false
     page.depositName.textContent = asset.unitInfo.conventional.unit
     page.depositAddress.textContent = wallet.address
     page.qrcode.src = `/generateqrcode?address=${wallet.address}`
@@ -1960,22 +1964,38 @@ export class DepositAddress {
     else Doc.hide(page.newDepAddrBttn)
   }
 
-  /* Fetch a new address from the wallet. */
+  // Fetch and display a new deposit address.
   async newDepositAddress () {
     const page = this.page
     Doc.hide(page.depositErr)
+    Doc.hide(page.depositTxContainer)
+    Doc.show(page.depositAddressContainer)
+    // If we have a deposit transaction, a new address was already generated.
+    if (this.hasIncomingTx) {
+      this.hasIncomingTx = false
+      return
+    }
     const loaded = app().loading(this.form)
+    const err = await this.fetchDepositAddress()
+    loaded()
+    if (err !== null) {
+      page.depositErr.textContent = err
+      Doc.show(page.depositErr)
+    }
+  }
+
+  /* Fetch a new address from the wallet. */
+  async fetchDepositAddress () {
     const res = await postJSON('/api/depositaddress', {
       assetID: this.assetID
     })
-    loaded()
     if (!app().checkResponse(res)) {
-      page.depositErr.textContent = res.msg
-      Doc.show(page.depositErr)
-      return
+      return res.msg
     }
+    const page = this.page
     page.depositAddress.textContent = res.address
     page.qrcode.src = `/generateqrcode?address=${res.address}`
+    return null
   }
 
   async copyAddress () {
@@ -1991,6 +2011,37 @@ export class DepositAddress {
         console.error('Unable to copy: ', reason)
       })
   }
+
+  handleIncomingTx (assetID: number, tx: WalletTransaction) {
+    if (assetID !== this.assetID) return
+    if (tx.recipient !== this.page.depositAddress.textContent) return
+    this.hasIncomingTx = true
+    this.showIncomingTx(tx)
+    this.fetchDepositAddress()
+  }
+
+  showIncomingTx (tx: WalletTransaction) {
+    const page = this.page
+    const net = app().user.net
+    const assetExplorer = CoinExplorers[this.assetID]
+    if (assetExplorer && assetExplorer[net]) {
+      page.depositTxID.href = assetExplorer[net](tx.id)
+    }
+    page.depositTxID.textContent = trimStringWithEllipsis(tx.id, 24)
+    page.depositTxID.setAttribute('title', tx.id)
+    page.depositTxAmount.textContent = `${Doc.formatCoinValue(tx.amount, app().unitInfo(this.assetID))} ${app().assets[this.assetID].symbol.toUpperCase()}`
+    page.depositTxStatus.textContent = tx.blockNumber > 0 ? intl.prep(intl.ID_TX_STATUS_CONFIRMED) : intl.prep(intl.ID_TX_STATUS_PENDING)
+    Doc.show(page.depositTxContainer)
+    Doc.hide(page.depositAddressContainer)
+  }
+
+  resetForm () {
+    if (this.hasIncomingTx) {
+      const page = this.page
+      Doc.hide(page.depositTxContainer)
+      Doc.show(page.depositAddressContainer)
+    }
+  }
 }
 
 // AppPassResetForm is used to reset the app apssword using the app seed.

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

@@ -170,6 +170,8 @@ export const ID_TX_TYPE_APPROVE_TOKEN = 'TX_TYPE_APPROVE_TOKEN'
 export const ID_TX_TYPE_ACCELERATION = 'TX_TYPE_ACCELERATION'
 export const ID_TX_TYPE_SELF_TRANSFER = 'TX_TYPE_SELF_TRANSFER'
 export const ID_TX_TYPE_REVOKE_TOKEN_APPROVAL = 'TX_TYPE_REVOKE_TOKEN_APPROVAL'
+export const ID_TX_STATUS_CONFIRMED = 'TX_STATUS_CONFIRMED'
+export const ID_TX_STATUS_PENDING = 'TX_STATUS_PENDING'
 
 export const enUS: Locale = {
   [ID_NO_PASS_ERROR_MSG]: 'password cannot be empty',
@@ -341,7 +343,9 @@ export const enUS: Locale = {
   [ID_TX_TYPE_APPROVE_TOKEN]: 'Approve token',
   [ID_TX_TYPE_ACCELERATION]: 'Acceleration',
   [ID_TX_TYPE_SELF_TRANSFER]: 'Self transfer',
-  [ID_TX_TYPE_REVOKE_TOKEN_APPROVAL]: 'Revoke token approval'
+  [ID_TX_TYPE_REVOKE_TOKEN_APPROVAL]: 'Revoke token approval',
+  [ID_TX_STATUS_CONFIRMED]: 'Confirmed',
+  [ID_TX_STATUS_PENDING]: 'Pending'
 }
 
 export const ptBR: Locale = {

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

@@ -1,4 +1,4 @@
-import Doc, { Animation, AniToggle } from './doc'
+import Doc, { Animation, AniToggle, trimStringWithEllipsis } from './doc'
 import BasePage from './basepage'
 import { postJSON, Errors } from './http'
 import {
@@ -401,6 +401,7 @@ export default class WalletsPage extends BasePage {
 
   closePopups () {
     Doc.hide(this.page.forms)
+    if (Doc.isDisplayed(this.depositAddrForm.form)) this.depositAddrForm.resetForm()
     this.currTx = undefined
     if (this.animation) this.animation.stop()
   }
@@ -1873,6 +1874,7 @@ export default class WalletsPage extends BasePage {
 
   handleTxNote (tx: WalletTransaction, newTx: boolean) {
     if (newTx) {
+      this.handleDepositTx(tx)
       if (!this.oldestTx) {
         Doc.show(this.page.txHistoryTable)
         Doc.hide(this.page.noTxHistory)
@@ -1899,6 +1901,10 @@ export default class WalletsPage extends BasePage {
     }
   }
 
+  handleDepositTx (tx: WalletTransaction) {
+    this.depositAddrForm.handleIncomingTx(this.selectedAssetID, tx)
+  }
+
   async showTxHistory (assetID: number) {
     const page = this.page
     let txRes : TxHistoryResult
@@ -2505,11 +2511,6 @@ export default class WalletsPage extends BasePage {
   }
 }
 
-function trimStringWithEllipsis (str: string, maxLen: number): string {
-  if (str.length <= maxLen) return str
-  return `${str.substring(0, maxLen / 2)}...${str.substring(str.length - maxLen / 2)}`
-}
-
 /*
  * assetIsConfigurable indicates whether there are any user-configurable wallet
  * settings for the asset.