fix(ui): 🐛 show fund dialog on zero balance send

dashhive · Jan 30, 2024 · 7635b1e · 7635b1e
1 parent 7e0e682
commit 7635b1e
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 9 deletions.
diff --git a/TODO.md b/TODO.md
@@ -16,9 +16,9 @@
   - [ ] Styled Drop Down List
   - [ ] Type Ahead Input Field
 - [x] Batch generate IndexedDB store addresses on wallet load and after addressIndex is incremented by requesting funds in Send / Request dialog
+- [x] Clicking send with a Zero balance throws an error in console
+  - Need dialog/error message to indicate what/why it won't send
 - [ ] Add `updatedAt` property to IndexedDB Stores
 - [ ] Enforce Alias uniqueness on pairing & editing contact
 - [ ] On Pairing check if XkeyID exists in contacts
-- [ ] Clicking send with a Zero balance throws an error in console
-  - [ ] Need dialog/error message to indicate what/why it won't send
 - [ ] Make `Remember password for browser session` more secure
diff --git a/src/helpers/utils.js b/src/helpers/utils.js
@@ -239,6 +239,13 @@ export function fixedDash(dash, fix = 8) {
   .toFixed(fix);
 }
 
+// https://stackoverflow.com/a/27946310
+export function roundUsing(func, number, prec = 8) {
+  var tempnumber = number * Math.pow(10, prec);
+  tempnumber = func(tempnumber);
+  return tempnumber / Math.pow(10, prec);
+}
+
 /**
  * @param {Number} duffs - ex: 00000000
  */

diff --git a/src/main.js b/src/main.js
@@ -454,13 +454,17 @@ async function main() {
   })
 
   appDialogs.sendOrRequest = sendOrRequestRig({
-    mainApp, setupDialog, appDialogs, appState, appTools, store,
-    wallet, account: appState.account, deriveWalletData, createTx, getAddrsWithFunds, batchGenAcctAddrs,
+    mainApp, appDialogs, appState, appTools, store,
+    wallet, account: appState.account, walletFunds,
+    setupDialog, deriveWalletData, createTx,
+    getAddrsWithFunds, batchGenAcctAddrs,
   })
 
   appDialogs.sendConfirm = sendConfirmRig({
-    mainApp, setupDialog, appDialogs, appState, appTools,
-    deriveWalletData, createTx, sendTx, getAddrsWithFunds, store, userInfo, contactsList,
+    mainApp, appDialogs, appState, appTools,
+    store, userInfo, contactsList, walletFunds,
+    setupDialog, deriveWalletData, getAddrsWithFunds,
+    createTx, sendTx,
   })
 
   appDialogs.requestQr = requestQrRig({

diff --git a/src/rigs/request-qr.js b/src/rigs/request-qr.js
@@ -4,6 +4,8 @@ import {
   setClipboard,
   openBlobSVG,
   generatePaymentRequestURI,
+  fixedDash,
+  roundUsing,
 } from '../helpers/utils.js'
 
 export let requestQrRig = (function (globals) {
@@ -47,12 +49,12 @@ export let requestQrRig = (function (globals) {
         return html`
           <article>
             <figure>
-              <figcaption>Request Amount</figcaption>
+              <figcaption>Amount</figcaption>
               <div class="big">
                 <svg width="32" height="33" viewBox="0 0 32 33">
                   <use xlink:href="#icon-dash-mark"></use>
                 </svg>
-                ${state.amount}
+                ${fixedDash(roundUsing(Math.ceil, state.amount))}
               </div>
             </figure>
           </article>

diff --git a/src/rigs/send-or-request.js b/src/rigs/send-or-request.js
@@ -2,6 +2,8 @@ import { lit as html } from '../helpers/lit.js'
 import {
   formDataEntries,
   parseAddressField,
+  fixedDash,
+  roundUsing,
 } from '../helpers/utils.js'
 import setupInputAmount from '../components/input-amount.js'
 
@@ -11,7 +13,7 @@ export let sendOrRequestRig = (function (globals) {
   let {
     mainApp, setupDialog, appDialogs, appState, appTools, store,
     createTx, deriveWalletData, getAddrsWithFunds, batchGenAcctAddrs,
-    wallet, wallets, accounts,
+    wallet, wallets, accounts, walletFunds,
   } = globals
 
   let inputAmount = setupInputAmount(mainApp)
@@ -290,6 +292,47 @@ export let sendOrRequestRig = (function (globals) {
               address = to
             }
 
+            if (amount > 0 && walletFunds.balance < amount) {
+              console.log(
+                `INSUFFICIENT FUNDS IN WALLET`,
+                [
+                  `SEND Ð ${amount || 0}`,
+                  `AVAILABLE Ð ${walletFunds?.balance}`,
+                ]
+              )
+              state.wallet.addressIndex = (
+                state.wallet?.addressIndex || 0
+              ) + 1
+              receiveWallet = await deriveWalletData(
+                appState.phrase,
+                state.wallet.accountIndex,
+                state.wallet.addressIndex,
+              )
+              let amountNeeded = fixedDash(roundUsing(Math.ceil, Math.abs(
+                walletFunds.balance - Number(fde.amount)
+              )))
+
+              appDialogs.requestQr.render(
+                {
+                  name: 'Insufficient wallet funds',
+                  wallet: receiveWallet,
+                  // contact,
+                  // to,
+                  amount: amountNeeded,
+                  // footer: state => html`<footer class="center">
+                  //   <sub>Fund this wallet with at least Ð ${fixedDash(state.amount)} to complete this transaction</sub>
+                  // </footer>`,
+                  footer: state => html`<footer class="center">
+                    <sub>Fund this wallet with at least Ð ${state.amount} to complete this transaction</sub>
+                  </footer>`,
+                },
+                'afterend',
+              )
+
+              let showRequestQR = await appDialogs.requestQr.showModal()
+              return
+            }
+
             if (amount > 0) {
               let fundingAddrs = await getAddrsWithFunds(
                 state.wallet,
@@ -409,6 +452,10 @@ export let sendOrRequestRig = (function (globals) {
 
               appDialogs.requestQr.render(
                 {
+                  name: 'Share to receive funds',
+                  footer: state => html`<footer class="center">
+                    <sub>Share this QR code to receive funds</sub>
+                  </footer>`,
                   wallet: receiveWallet,
                   contact,
                   to,