Fix batch & receive dialog address generation

README.md

@@ -52,9 +52,6 @@ See the [Stage 2](/../../milestone/2) milestone
 - [ ] Contact/Payment Share Features
   - [ ] SMS (sms:)
   - [ ] Email (mailto:)
-- [ ] Transactions view
-  - [ ] Table with filter/sort
-  - [ ] Select & Copy as CSV
 - [ ] View & manage addresses associated with Wallet
 - [ ] Coin Control
   - [ ] Set Fund Denomination for Send & Request payments

src/components/contacts-list.js

@@ -44,7 +44,11 @@ const initialState = {
     <div>
       ${
         state.contacts.length > 0
-          ? (await Promise.all(state.contacts.map(async c => await state.item(c)))).join('')
+          ? (
+            await Promise.all(
+              state.contacts.map(async c => await state.item(c))
+            )
+          ).join('')
           : ''
       }
       ${
@@ -118,7 +122,7 @@ const initialState = {
     `
   },
   footer: async state => html`
-    <datalist id="contactAliases">
+    <datalist id="contactSendAliases">
       ${
         state.contacts.length > 0
           ? (
@@ -134,9 +138,27 @@ const initialState = {
                       contact.info?.name || contact.alias
                     }</option>`
                   })
-                // .map(
-                //   async c => await state.item(c)
-                // )
+              )
+            ).join('')
+          : ''
+      }
+    </datalist>
+    <datalist id="contactReceiveAliases">
+      ${
+        state.contacts.length > 0
+          ? (
+              await Promise.all(
+                state.contacts
+                  .filter(
+                    c => c.alias &&
+                    Object.keys(c.incoming || {}).length > 0
+                  ).map(contact => {
+                    return html`<option value="@${
+                      contact.alias
+                    }">${
+                      contact.info?.name || contact.alias
+                    }</option>`
+                  })
               )
             ).join('')
           : ''

src/components/main-footer.js

@@ -4,7 +4,7 @@ const initialState = {
   rendered: null,
   content: state => html`
     <footer>
-      <h4>Alpha stage, not production ready. <span>Use at your own risk.</span></h4>
+      <h4>Alpha stage, not production ready. <div>Use at your own risk.</div></h4>
       <h5>Checkout the <a target="_blank" href="https://github.com/dashhive/wallet-ui">Source Code</a></h5>
     </footer>
   `,

src/helpers/constants.js

@@ -134,3 +134,11 @@ export const DASH_URI_REGEX = new RegExp(
   /^(?:web\+)?(?<protocol>dash)(?:[:])(?:\/\/)?(?<address>X[a-zA-Z0-9]{33})?(?:(?:[?])(?<params>.+))?/,
   'ig'
 )
+
+export const RECEIVE = 0 // DashHd.RECEIVE
+export const CHANGE = 1 // DashHd.CHANGE
+
+export const USAGE = {
+  RECEIVE,
+  CHANGE,
+}

src/helpers/utils.js

@@ -385,6 +385,52 @@ export function envoy(obj, ...initListeners) {
   })
 }
 
+/**
+ * Creates a reactive signal
+ *
+ * Inspired By
+ * {@link https://gist.github.com/developit/a0430c500f5559b715c2dddf9c40948d Valoo} &
+ * {@link https://dev.to/ratiu5/implementing-signals-from-scratch-3e4c Signals from Scratch}
+ *
+ * @example
+ *    let count = createSignal(0)
+ *    console.log(count.value) // 0
+ *    count.value = 2
+ *    console.log(count.value) // 2
+ *
+ *    let off = count.on((value) => {
+ *      document.querySelector("body").innerHTML = value;
+ *    });
+ *
+ *    off(); // unsubscribe
+ *
+ * @param {Object} initialValue inital value
+*/
+export function createSignal(initialValue) {
+  let _value = initialValue;
+  let _last = _value;
+  const subs = [];
+
+  function pub() {
+    for (let s of subs) {
+      s && s(_value, _last);
+    }
+  }
+
+  return {
+    get value() { return _value; },
+    set value(v) {
+      _last = _value
+      _value = v;
+      pub();
+    },
+    on: s => {
+      const i = subs.push(s)-1;
+      return () => { subs[i] = 0; };
+    }
+  }
+}
+
 export async function restate(
   state = {},
   renderState = {},
@@ -999,3 +1045,20 @@ export async function getUniqueAlias(aliases, preferredAlias) {
 
   return uniqueAlias
 }
+
+export function getPartialHDPath(wallet) {
+  return [
+    wallet.accountIndex,
+    wallet.usageIndex,
+    wallet.addressIndex,
+  ].join('/')
+}
+
+export function getAddressIndexFromUsage(wallet, account, usage) {
+  let usageIndex = usage ?? wallet.usageIndex
+  return {
+    ...account,
+    usageIndex,
+    addressIndex: account.usage[usageIndex],
+  }
+}