From ae479ee0d011c95a845e7fbc56805b85beb01867 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Mon, 1 Aug 2022 14:52:11 +0300
Subject: [PATCH] feat: show hardware device Xpub option

---
 .../components/wallet-list/wallet-list.html   | 53 ++++++++++++--
 .../components/wallet-list/wallet-list.js     | 69 ++++++++++++++++++-
 .../extensions/watchonly/static/js/index.js   |  2 +-
 .../watchonly/templates/watchonly/index.html  |  1 +
 4 files changed, 118 insertions(+), 7 deletions(-)

diff --git a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html b/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html
index 950bceeb..3745711d 100644
--- a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html
+++ b/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html
@@ -3,9 +3,32 @@
     <q-card-section>
       <div class="row items-center no-wrap q-mb-md">
         <div class="col">
-          <q-btn unelevated color="primary" @click="formDialog.show = true"
-            >Add Wallet Account
-          </q-btn>
+          <q-btn-dropdown
+            split
+            unelevated
+            label="Add Wallet Account"
+            color="primary"
+            @click="showAddAccountDialog"
+          >
+            <q-list>
+              <q-item @click="showAddAccountDialog" clickable v-close-popup>
+                <q-item-section>
+                  <q-item-label>New Account</q-item-label>
+                  <q-item-label caption
+                    >Enter account Xpub or Descriptor</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-item @click="getXpubFromDevice" clickable v-close-popup>
+                <q-item-section>
+                  <q-item-label>From Hardware Device</q-item-label>
+                  <q-item-label caption>
+                    Get Xpub from a Hardware Device</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
         </div>
 
         <div class="col-auto q-pr-lg"></div>
@@ -158,8 +181,8 @@
           type="text"
           label="Title"
         ></q-input>
-
         <q-input
+          v-if="!formDialog.useSerialPort"
           filled
           type="textarea"
           v-model="formDialog.data.masterpub"
@@ -167,13 +190,33 @@
           autogrow
           label="Account Extended Public Key; xpub, ypub, zpub; Bitcoin Descriptor"
         ></q-input>
+        <q-select
+          v-if="formDialog.useSerialPort"
+          filled
+          dense
+          emit-value
+          v-model="formDialog.addressType"
+          :options="addressTypeOptions"
+          label="Address Type"
+          @input="handleAddressTypeChanged"
+        ></q-select>
+
+        <q-input
+          v-if="formDialog.useSerialPort"
+          filled
+          type="text"
+          v-model="formDialog.data.accountPath"
+          height="50px"
+          autogrow
+          label="Account Path"
+        ></q-input>
 
         <div class="row q-mt-lg">
           <q-btn
             unelevated
             color="primary"
             :disable="
-                formDialog.data.masterpub == null ||
+                (formDialog.data.masterpub == null && formDialog.data.accountPath == null)||
                 formDialog.data.title == null"
             type="submit"
             >Add Watch-Only Account</q-btn
diff --git a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.js b/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.js
index 85964f87..3ec5d853 100644
--- a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.js
+++ b/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.js
@@ -4,16 +4,51 @@ async function walletList(path) {
     name: 'wallet-list',
     template,
 
-    props: ['adminkey', 'inkey', 'sats-denominated', 'addresses', 'network'],
+    props: [
+      'adminkey',
+      'inkey',
+      'sats-denominated',
+      'addresses',
+      'network',
+      'serial-signer-ref'
+    ],
     data: function () {
       return {
         walletAccounts: [],
         address: {},
         formDialog: {
           show: false,
+          addressType: {
+            label: 'Pay-to-witness-pubkey-hash scripts (P2WPKH)',
+            value: 'wpkh'
+          },
+          useSerialPort: false,
           data: {}
         },
         filter: '',
+        addressTypeOptions: [
+          {
+            label: 'Pay-to-pubkey-hash scripts (P2PKH)',
+            value: 'pkh',
+            path: "m/44'/0'/0'"
+          },
+          {
+            label: 'Pay-to-witness-pubkey-hash scripts (P2WPKH)',
+            value: 'wpkh',
+            path: "m/84'/0'/0'"
+          },
+          {
+            label: 'Pay-to-script-hash scripts (P2SH-P2WPKH)',
+            value: 'sh',
+            path: "m/49'/0'/0'"
+          },
+          {
+            label: 'Pay-to-taproot outputs (P2TR)',
+            value: 'tr',
+            path: "m/86'/0'/0'"
+          }
+        ],
+
         walletsTable: {
           columns: [
             {
@@ -173,6 +208,38 @@ async function walletList(path) {
         const wallet = this.walletAccounts.find(w => w.id === walletId) || {}
         wallet.address_no = addressData.addressIndex
         this.$emit('new-receive-address', addressData)
+      },
+      showAddAccountDialog: function() {
+        this.formDialog.show = true
+        this.formDialog.useSerialPort = false
+      },
+      getXpubFromDevice: async function () {
+        this.handleAddressTypeChanged('wpkh')
+        try {
+          if (!this.serialSignerRef.isConnected()) {
+            const portOpen = await this.serialSignerRef.openSerialPort()
+            if (!portOpen) return
+          }
+          if (!this.serialSignerRef.isAuthenticated()) {
+            await this.serialSignerRef.hwwShowPasswordDialog()
+            const authenticated = await this.serialSignerRef.isAuthenticating()
+            if (!authenticated) return
+          }
+          this.formDialog.show = true
+          this.formDialog.useSerialPort = true
+        } catch (error) {
+          this.$q.notify({
+            type: 'warning',
+            message: 'Cannot fetch Xpub!',
+            caption: `${error}`,
+            timeout: 10000
+          })
+        }
+      },
+      handleAddressTypeChanged: function (value) {
+        const addressType =
+          this.addressTypeOptions.find(t => t.value === value) || {}
+        this.formDialog.data.accountPath = addressType.path
       }
     },
     created: async function () {
diff --git a/lnbits/extensions/watchonly/static/js/index.js b/lnbits/extensions/watchonly/static/js/index.js
index 59fec402..536fab8f 100644
--- a/lnbits/extensions/watchonly/static/js/index.js
+++ b/lnbits/extensions/watchonly/static/js/index.js
@@ -329,7 +329,7 @@ const watchOnly = async () => {
           hostname: this.mempoolHostname
         })
         const fn = async () => {
-          if (!accounts.find(w => (w.id === addrData.wallet))) return []
+          if (!accounts.find(w => w.id === addrData.wallet)) return []
           return addressesAPI.getAddressTxs({
             address: addrData.address
           })
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index 08ba6d98..ec605e18 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -23,6 +23,7 @@
       :sats-denominated="config.sats_denominated"
       :network="config.network"
       :addresses="addresses"
+      :serial-signer-ref="$refs.serialSigner"
       @accounts-update="updateAccounts"
       @new-receive-address="showAddressDetails"
     >