From 5d1d2d634a046a7f41f3c86f8102d0cb8e242d56 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Wed, 27 Jul 2022 09:48:52 +0300
Subject: [PATCH] feat: prompt for `Connect` and `Login` before signing

---
 .../static/components/payment/payment.js      |  17 +-
 .../components/serial-signer/serial-signer.js |   7 +
 .../extensions/watchonly/static/js/index.js   |   3 -
 .../watchonly/templates/watchonly/index.html  | 288 +-----------------
 4 files changed, 23 insertions(+), 292 deletions(-)

diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.js b/lnbits/extensions/watchonly/static/components/payment/payment.js
index a7cc9d8f..b6229096 100644
--- a/lnbits/extensions/watchonly/static/components/payment/payment.js
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.js
@@ -10,6 +10,7 @@ async function payment(path) {
       'utxos',
       'mempool_endpoint',
       'sats_denominated',
+      'serial-signer-ref',
       'adminkey'
     ],
     watch: {
@@ -76,9 +77,21 @@ async function payment(path) {
         return satOrBtc(val, showUnit, this['sats_denominated'])
       },
       checkAndSend: async function () {
+        this.showChecking = true
         try {
-          console.log('### this.checkAndSend')
-          this.showChecking = true
+          console.log(
+            '### this.checkAndSend',
+            this.serialSignerRef.isConnected()
+          )
+          if (!this.serialSignerRef.isConnected()) {
+            await this.serialSignerRef.openSerialPort()
+            return
+          }
+          if (!this.serialSignerRef.isAuthenticated()) {
+            await this.serialSignerRef.hwwShowPasswordDialog()
+            return
+          }
+
           await this.createPsbt()
         } catch (error) {
         } finally {
diff --git a/lnbits/extensions/watchonly/static/components/serial-signer/serial-signer.js b/lnbits/extensions/watchonly/static/components/serial-signer/serial-signer.js
index c0c4cf2b..22b13510 100644
--- a/lnbits/extensions/watchonly/static/components/serial-signer/serial-signer.js
+++ b/lnbits/extensions/watchonly/static/components/serial-signer/serial-signer.js
@@ -107,6 +107,13 @@ async function serialSigner(path) {
         }
       },
 
+      isConnected: function () {
+        return !!this.selectedPort
+      },
+      isAuthenticated: function () {
+        return this.hww.authenticated
+      },
+
       checkSerialPortSupported: function () {
         if (!navigator.serial) {
           this.$q.notify({
diff --git a/lnbits/extensions/watchonly/static/js/index.js b/lnbits/extensions/watchonly/static/js/index.js
index a3d7e19f..a01e0e10 100644
--- a/lnbits/extensions/watchonly/static/js/index.js
+++ b/lnbits/extensions/watchonly/static/js/index.js
@@ -273,9 +273,6 @@ const watchOnly = async () => {
       },
       //################### SERIAL PORT ###################
 
-      sharePsbtWithAnimatedQRCode: async function () {
-        console.log('### sharePsbtWithAnimatedQRCode')
-      },
       //################### HARDWARE WALLET ###################
 
       //################### UTXOs ###################
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index 5ac2c2df..0dda9657 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -107,293 +107,6 @@
               :mempool_endpoint="config.data.mempool_endpoint"
               :sats-denominated="config.data.sats_denominated"
             ></utxo-list>
-            <q-card v-if="payment.show"
-              ><q-card-section>
-                <div class="row items-center no-wrap q-mb-md">
-                  <div class="col-3 q-pr-lg">
-                    <q-btn
-                      unelevated
-                      color="secondary"
-                      type="submit"
-                      class="btn-full"
-                      >Check Tx</q-btn
-                    >
-                  </div>
-                  <div class="col-9">
-                    <q-input v-model="payment.psbtBase64" filled />
-                  </div>
-                </div>
-                <q-separator
-                  v-if="payment.psbtBase64"
-                  class="q-mb-md"
-                ></q-separator>
-                <div
-                  v-if="payment.psbtBase64"
-                  class="row items-center no-wrap q-mb-md"
-                >
-                  <div class="col-3 q-pr-lg">
-                    <q-btn-dropdown
-                      class="btn-full"
-                      color="secondary"
-                      label="Sign With"
-                    >
-                      <q-list>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="payment.signMode = 'serial-port'"
-                        >
-                          <q-item-section>
-                            <q-item-label>Serial Port Device</q-item-label>
-                            <q-item-label caption
-                              >Connect via Serial Port and sign.</q-item-label
-                            >
-                          </q-item-section>
-                        </q-item>
-
-                        <q-item clickable disabled v-close-popup>
-                          <q-item-section>
-                            <q-item-label>Animated QR Code</q-item-label>
-                            <q-item-label caption
-                              >Share and Scan using animated QR
-                              codes.</q-item-label
-                            >
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-btn-dropdown>
-                  </div>
-                  <div class="col-9">
-                    <q-option-group
-                      v-model="payment.signMode"
-                      :options="payment.signModes"
-                      color="primary"
-                      inline
-                    ></q-option-group>
-                  </div>
-                </div>
-                <q-separator
-                  v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
-                  class="q-mb-md"
-                ></q-separator>
-                <div
-                  v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
-                  class="row items-center no-wrap q-mb-md q-mt-lg"
-                >
-                  <div class="col-3 q-pr-lg">
-                    <q-btn
-                      v-if="!serial.selectedPort"
-                      @click="openSerialPort()"
-                      unelevated
-                      color="secondary"
-                      class="btn-full"
-                      >Connect</q-btn
-                    >
-                    <q-btn
-                      v-if="serial.selectedPort"
-                      @click="closeSerialPort()"
-                      outline
-                      color="gray"
-                      class="btn-full"
-                      >Disconnect</q-btn
-                    >
-                  </div>
-                  <div class="col-3">
-                    <q-toggle
-                      label="Advanced"
-                      disabled
-                      color="secodary float-left"
-                      v-model="serial.showAdvancedConfig"
-                    ></q-toggle>
-                  </div>
-                  <div class="col-6"></div>
-                </div>
-                <q-separator
-                  v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
-                  class="q-mb-md"
-                ></q-separator>
-                <div
-                  v-if="serial.selectedPort && payment.psbtBase64 && payment.signMode === 'serial-port'"
-                  class="row items-center no-wrap q-mb-md q-mt-lg"
-                >
-                  <div class="col-3 q-pr-lg">
-                    <q-btn-dropdown
-                      split
-                      class="btn-full"
-                      color="secondary"
-                      :label="hww.authenticated ? 'Sign Tx' : 'Login'"
-                      @click="hwwExecuteDefaultCommand()"
-                    >
-                    </q-btn-dropdown>
-                  </div>
-                  <div class="col-3">
-                    <q-toggle
-                      label="Show Console"
-                      color="secodary float-left"
-                      v-model="hww.showConsole"
-                    ></q-toggle>
-                  </div>
-                  <div class="col-3">
-                    <q-spinner
-                      v-if="hww.sendingPsbt == true"
-                      color="primary"
-                      size="2.55em"
-                    ></q-spinner>
-                  </div>
-                  <div class="col-3"></div>
-                </div>
-                <div
-                  v-if="hww.showConsole"
-                  class="row items-center no-wrap q-mb-md"
-                >
-                  <div class="col-3 q-pr-lg"></div>
-                  <div class="col-9">
-                    <q-input
-                      for="watchonly-serial-port-data-input"
-                      v-model="serial.receivedData"
-                      filled
-                      type="textarea"
-                    />
-                  </div>
-                </div>
-                <q-separator
-                  v-if="hww.authenticated"
-                  class="q-mb-md"
-                ></q-separator>
-                <div
-                  v-if="hww.authenticated && hww.psbtSent"
-                  class="row items-center no-wrap q-mb-md"
-                >
-                  <div class="col-3 q-pr-lg">
-                    <q-btn
-                      @click="hwwSignPsbt()"
-                      unelevated
-                      color="green"
-                      class="btn-full"
-                      >Confirm
-                      <q-spinner
-                        v-if="hww.signingPsbt == true"
-                        color="primary"
-                      ></q-spinner>
-                    </q-btn>
-                  </div>
-                  <div class="col-3">
-                    <q-toggle
-                      v-if="payment.psbtBase64Signed"
-                      label="Show Signed Psbt"
-                      color="secodary float-left"
-                      v-model="hww.showSignedPsbt"
-                    ></q-toggle>
-                  </div>
-                  <div class="col-6">
-                    <q-badge
-                      color="yellow"
-                      text-color="black"
-                      multi-line
-                      class="text-subtitle2"
-                      >Check transaction data on the Hardware Wallet
-                      display</q-badge
-                    >
-                  </div>
-                </div>
-                <div
-                  v-if="hww.showSignedPsbt"
-                  class="row items-center no-wrap q-mb-md"
-                >
-                  <div class="col-3 q-pr-lg"></div>
-
-                  <div class="col-9">
-                    <q-input
-                      v-model="payment.psbtBase64Signed"
-                      filled
-                      readonly
-                    />
-                  </div>
-                </div>
-                <q-separator
-                  v-if="payment.signedTx"
-                  class="q-mb-md"
-                ></q-separator>
-                <div
-                  v-if="payment.psbtBase64Signed"
-                  class="row items-center no-wrap q-mb-md"
-                >
-                  <div class="col-3 q-pr-lg">
-                    <q-btn
-                      v-if="payment.signedTx"
-                      @click="broadcastTransaction()"
-                      unelevated
-                      color="secondary"
-                      class="btn-full"
-                      >Send Payment</q-btn
-                    >
-                  </div>
-                  <div class="col-9">
-                    <span class="text-subtitle2">Transaction Details</span>
-                    <q-separator></q-separator>
-                  </div>
-                </div>
-                <div
-                  v-if="payment.signedTx"
-                  class="row items-center no-wrap q-mb-md"
-                >
-                  <div class="col-3 q-pr-lg"></div>
-                  <div class="col-9">
-                    <div class="row items-center no-wrap q-mb-sm">
-                      <div class="col-3 q-pr-lg">Version</div>
-                      <div class="col-9">{{payment.signedTx.version}}</div>
-                    </div>
-                    <div class="row items-center no-wrap q-mb-sm">
-                      <div class="col-3 q-pr-lg">Locktime</div>
-                      <div class="col-9">{{payment.signedTx.locktime}}</div>
-                    </div>
-                    <div class="row items-center no-wrap q-mb-sm">
-                      <div class="col-3 q-pr-lg">Fee</div>
-                      <div class="col-9">
-                        <q-badge color="orange"
-                          >{{satBtc(payment.signedTx.fee)}}
-                        </q-badge>
-                      </div>
-                    </div>
-                    <q-separator class="q-mb-lg"></q-separator>
-                    <span class="text-subtitle2">Outputs</span>
-                    <q-separator class="q-mb-lg"></q-separator>
-                    <div
-                      v-for="out in payment.signedTx.outputs"
-                      class="row items-center no-wrap q-mb-sm"
-                    >
-                      <div class="col-3 q-pr-lg">
-                        <q-badge color="orange">{{satBtc(out.amount)}}</q-badge>
-                      </div>
-
-                      <div class="col-9">
-                        <q-badge outline color="blue">{{out.address}}</q-badge>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <q-separator
-                  v-if="payment.sentTxId"
-                  class="q-mb-lg"
-                ></q-separator>
-                <div
-                  v-if="payment.sentTxId"
-                  class="row items-center no-wrap q-mb-sm"
-                >
-                  <div class="col-3">Transaction Id</div>
-                  <div class="col-9">
-                    <a
-                      style="color: unset"
-                      :href="config.data.mempool_endpoint + '/tx/' + payment.sentTxId"
-                      target="_blank"
-                    >
-                      {{payment.sentTxId}}</a
-                    >
-                  </div>
-                </div>
-              </q-card-section>
-            </q-card>
           </q-tab-panel>
         </q-tab-panels>
       </q-card-section>
@@ -405,6 +118,7 @@
         :addresses="addresses"
         :utxos="utxos.data"
         :adminkey="g.user.wallets[0].adminkey"
+        :serial-signer-ref="$refs.serialSigner"
       ></payment>
       <!-- todo: no more utxos.data -->
     </div>