fix(ui): 💄 change receive funds QR flow

dashhive · Feb 20, 2024 · 825d3c2 · 825d3c2
1 parent 65ee57e
commit 825d3c2
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 87 deletions.
diff --git a/src/components/contacts-list.js b/src/components/contacts-list.js
@@ -53,7 +53,7 @@ const initialState = {
       }
     </div>
 
-    ${state.footer(state)}
+    ${await state.footer(state)}
   `,
   item: async c => {
     // console.warn('contact list item', c)
@@ -117,7 +117,32 @@ const initialState = {
       </a>
     `
   },
-  footer: state => html``,
+  footer: async state => html`
+    <datalist id="contactAliases">
+      ${
+        state.contacts.length > 0
+          ? (
+              await Promise.all(
+                state.contacts
+                  .filter(
+                    c => c.alias &&
+                    Object.keys(c.outgoing || {}).length > 0
+                  ).map(contact => {
+                    return html`<option value="@${
+                      contact.alias
+                    }">${
+                      contact.info?.name || contact.alias
+                    }</option>`
+                  })
+                // .map(
+                //   async c => await state.item(c)
+                // )
+              )
+            ).join('')
+          : ''
+      }
+    </datalist>
+  `,
   slugs: {
   },
   elements: {

diff --git a/src/main.js b/src/main.js
@@ -480,7 +480,7 @@ async function main() {
   })
 
   appDialogs.requestQr = await requestQrRig({
-    mainApp, setupDialog,
+    mainApp, setupDialog, appDialogs, appState, userInfo,
   })
 
   appDialogs.pairQr = await pairQrRig({
@@ -501,22 +501,85 @@ async function main() {
     if (formName === 'send_or_receive') {
       event.preventDefault()
       event.stopPropagation()
-      let name = 'Send Funds'
+
       if (fde.intent === 'receive') {
-        name = 'Receive Funds'
-      }
+        let receiveWallet
 
-      await appDialogs.sendOrReceive.render({
-        action: fde.intent,
-        wallet,
-        account: appState.account,
-        // accounts,
-        userInfo,
-        contacts: appState.contacts,
-        to: null,
-      })
-      appDialogs.sendOrReceive.showModal()
-        // .catch(console.error)
+        if (wallet?.xpub) {
+          wallet.addressIndex = (
+            wallet?.addressIndex || 0
+          ) + 1
+          receiveWallet = await deriveWalletData(
+            appState.phrase,
+            wallet.accountIndex,
+            wallet.addressIndex,
+          )
+        }
+
+        if (receiveWallet?.xkeyId) {
+          let tmpWallet = await store.accounts.getItem(
+            receiveWallet.xkeyId,
+          )
+
+          // state.wallet =
+          let tmpAcct = await store.accounts.setItem(
+            receiveWallet.xkeyId,
+            {
+              ...tmpWallet,
+              updatedAt: (new Date()).toISOString(),
+              address: receiveWallet.address,
+              addressIndex: receiveWallet.addressIndex,
+            }
+          )
+
+          batchGenAcctAddrs(receiveWallet, tmpAcct)
+
+          console.log(
+            `${fde.intent} FROM CONTACT`,
+            {
+              stateWallet: wallet,
+              receiveWallet,
+              tmpAcct,
+            }
+          )
+
+          await appDialogs.requestQr.render(
+            {
+              name: 'Share to receive funds',
+              submitTxt: `Select a Contact`,
+              submitAlt: `Change the currently selected contact`,
+              footer: state => html`
+                <footer class="inline col">
+                  <button
+                    class="rounded"
+                    type="submit"
+                    name="intent"
+                    value="select_address"
+                    title="${state.submitAlt}"
+                  >
+                    <span>${state.submitTxt}</span>
+                  </button>
+                </footer>
+              `,
+              wallet: receiveWallet,
+              contacts: appState.contacts,
+            },
+            'afterend',
+          )
+
+          let showRequestQR = await appDialogs.requestQr.showModal()
+        }
+      } else {
+        await appDialogs.sendOrReceive.render({
+          action: fde.intent,
+          wallet,
+          account: appState.account,
+          userInfo,
+          contacts: appState.contacts,
+          to: null,
+        })
+        appDialogs.sendOrReceive.showModal()
+      }
     }
   })
   document.addEventListener('input', async event => {

diff --git a/src/rigs/request-qr.js b/src/rigs/request-qr.js
@@ -1,6 +1,7 @@
 import { lit as html } from '../helpers/lit.js'
 import { qrSvg } from '../helpers/qr.js'
 import {
+  formDataEntries,
   setClipboard,
   openBlobSVG,
   generatePaymentRequestURI,
@@ -12,7 +13,7 @@ export let requestQrRig = (async function (globals) {
   'use strict';
 
   let {
-    mainApp, setupDialog,
+    mainApp, setupDialog, appDialogs, appState, userInfo,
   } = globals;
 
   let requestQr = await setupDialog(
@@ -28,16 +29,6 @@ export let requestQrRig = (async function (globals) {
       closeTxt: html`<svg class="x" width="26" height="26" viewBox="0 0 26 26"><use xlink:href="#icon-x"></use></svg>`,
       closeAlt: `Close`,
       amount: 0,
-      getContact: state => {
-        let to = state.contact?.info?.name
-        if (!to && state.contact?.alias) {
-          to = `@${state.contact?.alias}`
-        }
-        if (!to) {
-          to = state.to
-        }
-        return to
-      },
       footer: state => html`<footer class="center">
         <sub>Share this QR code to receive funds</sub>
       </footer>`,
@@ -60,19 +51,27 @@ export let requestQrRig = (async function (globals) {
           </article>
         `
       },
+      aliasSelector: state => {
+        return html`
+          <input
+            type="text"
+            id="${state.slugs.form}_to"
+            name="to"
+            placeholder="enter @alias or dash address"
+            spellcheck="false"
+            autocomplete="off"
+            list="contactAliases"
+            value="${state.to || ''}"
+          />
+        `
+      },
       content: state => html`
         ${state.header(state)}
 
         <fieldset class="share solo">
           <aside>
-            <!-- <article>
-              <figure>
-                <figcaption>To</figcaption>
-                <div>${state.getContact(state)}</div>
-              </figure>
-            </article> -->
             ${state.showAmount(state)}
-            <span title="Open QR Code in new Window">${qrSvg(
+            <span class="qr" title="Open QR Code in new Window">${qrSvg(
               generatePaymentRequestURI(state),
               {
                 indent: 0,
@@ -102,6 +101,9 @@ export let requestQrRig = (async function (globals) {
           let shareAside = state.elements?.dialog?.querySelector(
             'fieldset.share > aside'
           )
+          let qrWrapper = state.elements?.dialog?.querySelector(
+            'fieldset.share > aside .qr'
+          )
           if (
             shareAside?.contains(event.target)
           ) {
@@ -124,15 +126,17 @@ export let requestQrRig = (async function (globals) {
               setClipboard(event)
             }
             if (
-              event.target?.nodeName.toLowerCase() === 'svg'
+              event.target?.nodeName.toLowerCase() === 'svg' &&
+              qrWrapper?.contains(event.target)
             ) {
               event.preventDefault()
               event.stopPropagation()
 
               openBlobSVG(event.target)
             }
             if (
-              event.target?.parentElement?.nodeName.toLowerCase() === 'svg'
+              event.target?.parentElement?.nodeName.toLowerCase() === 'svg' &&
+              qrWrapper?.contains(event.target)
             ) {
               event.preventDefault()
               event.stopPropagation()
@@ -146,7 +150,27 @@ export let requestQrRig = (async function (globals) {
           event.preventDefault()
           event.stopPropagation()
 
-          console.log('Receive Payment', state, event)
+          let fde = formDataEntries(event)
+
+          if (fde?.intent === 'select_address') {
+            // console.log('SELECT AN ADDRESS', {state, event, fde})
+
+            await appDialogs.sendOrReceive.render({
+              action: 'receive',
+              wallet: state.wallet,
+              account: appState.account,
+              contacts: appState.contacts,
+              userInfo,
+              to: null,
+            })
+            appDialogs.sendOrReceive.showModal()
+
+            return;
+          }
+          // else {
+          //   console.log('Receive Payment', {state, event})
+          // }
+
 
           requestQr.close()
         },

diff --git a/src/rigs/send-confirm.js b/src/rigs/send-confirm.js
@@ -95,21 +95,6 @@ export let sendConfirmRig = (async function (globals) {
         ${state.footer(state)}
       `,
       events: {
-        handleClose: (
-          state,
-          resolve = res=>{},
-          reject = res=>{},
-        ) => async event => {
-          event.preventDefault()
-          // event.stopPropagation()
-          state.removeAllListeners()
-
-          if (state.elements.dialog.returnValue !== 'cancel') {
-            resolve(state.elements.dialog.returnValue)
-          } else {
-            resolve('cancel')
-          }
-        },
         handleSubmit: state => async event => {
           event.preventDefault()
           event.stopPropagation()

diff --git a/src/rigs/send-or-request.js b/src/rigs/send-or-request.js
@@ -194,33 +194,6 @@ export let sendOrReceiveRig = (async function (globals) {
               />
 
               ${state.qrScanBtn(state)}
-
-              <datalist id="contactAliases">
-                ${
-                  (state.contacts || [])
-                    .filter(
-                      c => c.alias &&
-                      Object.keys(c.outgoing || {}).length > 0
-                    ).map(contact => {
-                      return html`<option value="@${
-                        contact.alias
-                      }">${
-                        contact.info?.name || contact.alias
-                      }</option>`
-                    })
-                    // Adds multiple entries for
-                    // outgoing wallets per contact
-                    //
-                    // ).map(contact =>
-                    //   Object.values(contact.outgoing).map(co => {
-                    //     return html`<option value="@${
-                    //       contact.alias
-                    //     }#${co?.xkeyId}">${
-                    //       contact.info?.name || contact.alias
-                    //     }</option>`
-                    // }))
-                }
-              </datalist>
             </div>
 
             <div class="field amount">
@@ -272,6 +245,11 @@ export let sendOrReceiveRig = (async function (globals) {
           } else {
             resolve('cancel')
           }
+
+          setTimeout(t => {
+            state.modal.rendered[state.slugs.dialog] = null
+            event?.target?.remove()
+          }, state.delay)
         },
         handleInput: state => async event => {
           event.preventDefault()
@@ -631,12 +609,29 @@ export let sendOrReceiveRig = (async function (globals) {
                 }
               )
 
+              sendOrReceive.close(fde.intent)
+
               await appDialogs.requestQr.render(
                 {
                   name: 'Share to receive funds',
-                  footer: state => html`<footer class="center">
-                    <sub>Share this QR code to receive funds</sub>
-                  </footer>`,
+                  submitTxt: `Select a Contact`,
+                  submitAlt: `Change the currently selected contact`,
+                  // footer: state => html`<footer class="center">
+                  //   <sub>Share this QR code to receive funds</sub>
+                  // </footer>`,
+                  footer: state => html`
+                    <footer class="inline col">
+                      <button
+                        class="rounded"
+                        type="submit"
+                        name="intent"
+                        value="select_address"
+                        title="${state.submitAlt}"
+                      >
+                        <span>${state.submitTxt}</span>
+                      </button>
+                    </footer>
+                  `,
                   wallet: receiveWallet,
                   contact,
                   to,
@@ -648,10 +643,6 @@ export let sendOrReceiveRig = (async function (globals) {
               let showRequestQR = await appDialogs.requestQr.showModal()
             }
           }
-
-          // return;
-
-          // sendOrReceive.close(fde.intent)
         },
       },
     }