From dc2ecfe9a28b7474e990686cc4d3c9cf8fff842f Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 26 Jul 2022 12:50:25 +0300
Subject: [PATCH] feat: show custom fees & two way binding for addresses

---
 .../components/address-list/address-list.js   | 20 +++++--
 .../static/components/payment/payment.html    | 52 ++++++++++++++-----
 .../static/components/payment/payment.js      |  1 +
 .../static/components/send-to/send-to.js      |  1 +
 .../extensions/watchonly/static/js/index.js   |  6 ---
 .../watchonly/templates/watchonly/index.html  |  2 +-
 6 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/lnbits/extensions/watchonly/static/components/address-list/address-list.js b/lnbits/extensions/watchonly/static/components/address-list/address-list.js
index 244e0472e..09475bad3 100644
--- a/lnbits/extensions/watchonly/static/components/address-list/address-list.js
+++ b/lnbits/extensions/watchonly/static/components/address-list/address-list.js
@@ -4,7 +4,13 @@ async function addressList(path) {
     name: 'address-list',
     template,
 
-    props: ['accounts', 'mempool_endpoint', 'inkey', 'sats_denominated'],
+    props: [
+      'data',
+      'accounts',
+      'mempool_endpoint',
+      'inkey',
+      'sats_denominated'
+    ],
     watch: {
       immediate: true,
       accounts(newVal, oldVal) {
@@ -13,11 +19,19 @@ async function addressList(path) {
         }
       }
     },
+    computed: {
+      addresses: {
+        get: function () {
+          return this.data
+        },
+        set: function (value) {
+          this.$emit('update:data', value)
+        }
+      }
+    },
     data: function () {
       return {
-        addresses: [],
         show: false,
-        data: [],
         history: [],
         selectedWallet: null,
         note: '',
diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.html b/lnbits/extensions/watchonly/static/components/payment/payment.html
index ea66fd30c..9541d8d20 100644
--- a/lnbits/extensions/watchonly/static/components/payment/payment.html
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.html
@@ -9,7 +9,6 @@
       <q-tab-panel name="destination">
         <q-card>
           <q-card-section>
-            {{sendToList}}
             <send-to
               :data.sync="sendToList"
               :tx:size="txSizeNoChange"
@@ -79,25 +78,52 @@
   -->
           </q-card-section>
         </q-card>
-        <div class="row items-center no-wrap q-mb-md q-pt-lg">
-          <div class="col-12">
-            <q-toggle
-              label="Custom Fee"
-              color="secodary"
-              v-model="showCustomFee"
-            ></q-toggle>
-          </div>
-        </div>
-        <q-card v-show="showCustomFee">
+
+        <q-card class="q-mt-lg">
           <q-card-section>
-            <div class="row items-center no-wrap q-mb-md q-pt-md">
+            <div class="row items-center no-wrap">
+              <div class="col-4">
+                <q-toggle
+                  label="Custom Fee"
+                  color="secodary"
+                  class="float-left"
+                  v-model="showCustomFee"
+                ></q-toggle>
+              </div>
+
+              <div class="col-8">
+                <div class="float-right">
+                  <span>Fee:</span>
+                  <span class="text-subtitle2 q-ml-md">
+                    {{satBtc(feeValue)}}
+                  </span>
+                  <span class="q-ml-lg">Fee Rate:</span>
+                  <span class="text-subtitle2 q-ml-md">
+                    {{feeRate}} sats/vbyte</span
+                  >
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-show="showCustomFee"
+              class="row items-center no-wrap q-mt-md"
+            >
               <div class="col-12">
-                {{feeRate}}
+                <q-separator class="q-mb-md"></q-separator>
                 <fee-rate :totalfee="feeValue" :rate.sync="feeRate"></fee-rate>
               </div>
             </div>
           </q-card-section>
         </q-card>
+        <div class="row items-center no-wrap q-mb-md q-pt-lg">
+          <div class="col-3">
+            <q-btn unelevated color="green" type="submit" class="btn-full"
+              >Check & Send</q-btn
+            >
+          </div>
+          <div class="col-9"></div>
+        </div>
       </q-tab-panel>
 
       <q-tab-panel name="coinControl">
diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.js b/lnbits/extensions/watchonly/static/components/payment/payment.js
index e2b5d4885..97254759e 100644
--- a/lnbits/extensions/watchonly/static/components/payment/payment.js
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.js
@@ -23,6 +23,7 @@ async function payment(path) {
 
     data: function () {
       return {
+        DUST_LIMIT: 546,
         paymentTab: 'destination',
         sendToList: [{address: '', amount: undefined}],
         changeWallet: null,
diff --git a/lnbits/extensions/watchonly/static/components/send-to/send-to.js b/lnbits/extensions/watchonly/static/components/send-to/send-to.js
index 93ebccc73..37e55c220 100644
--- a/lnbits/extensions/watchonly/static/components/send-to/send-to.js
+++ b/lnbits/extensions/watchonly/static/components/send-to/send-to.js
@@ -20,6 +20,7 @@ async function sendTo(path) {
 
     data: function () {
       return {
+        DUST_LIMIT: 546,
         amount: 0,
         paymentTable: {
           columns: [
diff --git a/lnbits/extensions/watchonly/static/js/index.js b/lnbits/extensions/watchonly/static/js/index.js
index 6a34aaee8..dcc80cc0e 100644
--- a/lnbits/extensions/watchonly/static/js/index.js
+++ b/lnbits/extensions/watchonly/static/js/index.js
@@ -23,7 +23,6 @@ const watchOnly = async () => {
     mixins: [windowMixin],
     data: function () {
       return {
-        DUST_LIMIT: 546,
         filter: '', // todo: remove?
 
         scan: {
@@ -832,15 +831,10 @@ const watchOnly = async () => {
       },
       showAddressDetails: function (addressData) {
         this.openQrCodeDialog(addressData)
-      },
-      handleAddressesUpdated: async function (addresses) {
-        this.addresses = addresses
-        await this.scanAddressWithAmount()
       }
     },
     created: async function () {
       if (this.g.user.wallets.length) {
-        // await this.$refs.addressList.refreshAddresses()
         await this.scanAddressWithAmount()
       }
     }
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index 01fa4b111..77d99bba5 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -79,10 +79,10 @@
           <q-tab-panel name="addresses">
             <address-list
               ref="addressList"
+              :data.sync="addresses"
               :accounts="walletAccounts"
               :mempool_endpoint="config.data.mempool_endpoint"
               :sats-denominated="config.data.sats_denominated"
-              @update:addresses="handleAddressesUpdated"
               @scan:address="scanAddress"
               @show-address-details="showAddressDetails"
               :inkey="g.user.wallets[0].inkey"