From 7b75cbf59c41b269d0c59a27383a632481d8ab92 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 12 Jul 2022 15:46:30 +0300
Subject: [PATCH] feat: add `Share PSBT` button with options

---
 .../extensions/watchonly/static/js/index.js   | 51 +++++++------
 .../watchonly/templates/watchonly/index.html  | 73 ++++++++++++++++---
 2 files changed, 93 insertions(+), 31 deletions(-)

diff --git a/lnbits/extensions/watchonly/static/js/index.js b/lnbits/extensions/watchonly/static/js/index.js
index f44d30cd..70c3ae16 100644
--- a/lnbits/extensions/watchonly/static/js/index.js
+++ b/lnbits/extensions/watchonly/static/js/index.js
@@ -426,28 +426,6 @@ new Vue({
       this.payment.txSize = Math.round(txSize(tx))
       return this.payment.feeRate * this.payment.txSize
     },
-    createPsbt: async function () {
-      const wallet = this.g.user.wallets[0]
-      try {
-        this.computeFee()
-        const tx = this.createTx()
-        txSize(tx)
-        for (const input of tx.inputs) {
-          input.tx_hex = await this.fetchTxHex(input.tx_id)
-        }
-
-        const {data} = await LNbits.api.request(
-          'POST',
-          '/watchonly/api/v1/psbt',
-          wallet.adminkey,
-          tx
-        )
-
-        this.payment.psbtBase64 = data
-      } catch (err) {
-        LNbits.utils.notifyApiError(err)
-      }
-    },
     deletePaymentAddress: function (v) {
       const index = this.payment.data.indexOf(v)
       if (index !== -1) {
@@ -499,6 +477,35 @@ new Vue({
       const payedAmount = this.getTotalPaymentAmount()
       paymentAddress.amount = Math.max(0, inputAmount - payedAmount - fee)
     },
+    //################### PSBT ###################
+    createPsbt: async function () {
+      const wallet = this.g.user.wallets[0]
+      try {
+        this.computeFee()
+        const tx = this.createTx()
+        txSize(tx)
+        for (const input of tx.inputs) {
+          input.tx_hex = await this.fetchTxHex(input.tx_id)
+        }
+
+        const {data} = await LNbits.api.request(
+          'POST',
+          '/watchonly/api/v1/psbt',
+          wallet.adminkey,
+          tx
+        )
+
+        this.payment.psbtBase64 = data
+      } catch (err) {
+        LNbits.utils.notifyApiError(err)
+      }
+    },
+    sharePsbtOnSerialPort: async function () {
+      console.log('### sharePsbtOnSerialPort')
+    },
+    sharePsbtWithAnimatedQRCode: async function () {
+      console.log('### sharePsbtWithAnimatedQRCode')
+    },
 
     //################### UTXOs ###################
     scanAllAddresses: async function () {
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index ff596699..16ebdabb 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -674,8 +674,22 @@
                         </template>
                       </q-table>
                     </div>
-                  </div></q-card-section
-                >
+                  </div>
+                  <div
+                    v-if="payment.changeAmount < 0"
+                    class="row items-center no-wrap q-mb-md"
+                  >
+                    <div class="col-12">
+                      <q-badge
+                        class="text-subtitle2 float-left"
+                        color="yellow"
+                        text-color="black"
+                      >
+                        The payed amount is higher than the selected amount!
+                      </q-badge>
+                    </div>
+                  </div>
+                </q-card-section>
               </q-card>
               <q-card>
                 <q-card-section>
@@ -993,6 +1007,7 @@
                       </q-table>
                     </div>
                   </div>
+
                   <div class="row items-center no-wrap q-mb-md">
                     <div class="col-4 q-pr-lg">
                       <q-btn unelevated color="secondary" type="submit"
@@ -1000,14 +1015,54 @@
                       >
                     </div>
                     <div class="col-8">
-                      <q-badge
-                        v-if="payment.changeAmount < 0"
-                        class="text-subtitle2 float-right"
-                        color="yellow"
-                        text-color="black"
+                      <q-btn-dropdown
+                        v-if="payment.psbtBase64"
+                        split
+                        class="float-right"
+                        color="secondary"
+                        label="Share PSBT"
+                        @click="sharePsbtOnSerialPort"
                       >
-                        The payed amount is higher than the selected amount!
-                      </q-badge>
+                        <q-list>
+                          <q-item
+                            @click="sharePsbtOnSerialPort"
+                            clickable
+                            v-close-popup
+                          >
+                            <q-item-section avatar>
+                              <q-avatar
+                                icon="usb"
+                                color="primary"
+                                text-color="white"
+                              />
+                            </q-item-section>
+                            <q-item-section>
+                              <q-item-label>Serial Port</q-item-label>
+                              <q-item-label caption
+                                >Send the PSBT using an USB port
+                              </q-item-label>
+                            </q-item-section>
+                          </q-item>
+
+                          <q-item
+                            @click="sharePsbtWithAnimatedQRCode"
+                            disabled
+                            v-close-popup
+                          >
+                            <q-item-section avatar>
+                              <q-avatar
+                                icon="qr_code"
+                                color="secondary"
+                                text-color="white"
+                              />
+                            </q-item-section>
+                            <q-item-section>
+                              <q-item-label>Animated QR Code</q-item-label>
+                              <q-item-label caption>Comming Soon</q-item-label>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                      </q-btn-dropdown>
                     </div>
                   </div>
                   <div