From 24d162f3fcb4dcac42c4fad024d2193a40577a7d Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 26 Jul 2022 16:31:39 +0300
Subject: [PATCH] feat: update tx size in real time

---
 .../static/components/payment/payment.html    |  2 +
 .../static/components/payment/payment.js      |  3 ++
 .../static/components/send-to/send-to.html    | 37 ++++++++++++-------
 .../static/components/send-to/send-to.js      |  6 +++
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.html b/lnbits/extensions/watchonly/static/components/payment/payment.html
index 02904714d..d01f79179 100644
--- a/lnbits/extensions/watchonly/static/components/payment/payment.html
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.html
@@ -15,6 +15,7 @@
               :tx-size="txSizeNoChange"
               :selected-amount="selectedAmount"
               :sats-denominated="sats_denominated"
+              @update:outputs="handleOutputsChange"
             ></send-to>
             <!-- <div class="row items-center no-wrap q-mb-md">
                 <div class="col-12">
@@ -152,6 +153,7 @@
               <div class="col-12">
                 <q-separator class="q-mb-md"></q-separator>
                 <utxo-list
+                  ref="utxoList"
                   :utxos="utxos"
                   :selectable="true"
                   :payed-amount="totalPayedAmount"
diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.js b/lnbits/extensions/watchonly/static/components/payment/payment.js
index d20c1feaf..900eb7def 100644
--- a/lnbits/extensions/watchonly/static/components/payment/payment.js
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.js
@@ -162,6 +162,9 @@ async function payment(path) {
         }
         this.selectChangeAddress(this.changeWallet)
       },
+      handleOutputsChange: function () {
+        this.$refs.utxoList.applyUtxoSelectionMode()
+      },
       getTotalPaymentAmount: function () {
         return this.sendToList.reduce((t, a) => t + (a.amount || 0), 0)
       }
diff --git a/lnbits/extensions/watchonly/static/components/send-to/send-to.html b/lnbits/extensions/watchonly/static/components/send-to/send-to.html
index d31cf819f..c8ff19710 100644
--- a/lnbits/extensions/watchonly/static/components/send-to/send-to.html
+++ b/lnbits/extensions/watchonly/static/components/send-to/send-to.html
@@ -30,6 +30,7 @@
                 type="text"
                 label="Address"
                 :rules="[val => !!val || 'Field is required']"
+                @input="handleOutputsChange"
               ></q-input>
             </div>
             <div class="col-3 q-pr-lg">
@@ -40,7 +41,8 @@
                 type="number"
                 step="1"
                 label="Amount (sats)"
-                :rules="[val => !!val || 'Field is required', val => +val > DUST_LIMIT || 'Amount to small (below dust limit)'] "
+                :rules="[val => !!val || 'Field is required', val => +val > DUST_LIMIT || 'Amount to small (below dust limit)']"
+                @input="handleOutputsChange"
               ></q-input>
             </div>
             <div class="col-1">
@@ -55,24 +57,31 @@
         <q-tr>
           <q-td colspan="100%">
             <div class="row items-center no-wrap">
-              <div class="col-3 q-pr-lg">
-                <q-btn outline color="grey" @click="addPaymentAddress"
-                  >Add Send Address</q-btn
-                >
-              </div>
+              <div class="col-3 q-pr-lg"></div>
               <div class="col-4 q-pr-lg"></div>
-              <div class="col-5">
-                <div class="float-right">
-                  <span class="text-weight-bold">Payed Amount: </span>
-                  <q-badge class="text-subtitle2 q-ml-lg" color="blue">
-                    {{satBtc(getTotalPaymentAmount())}}
-                  </q-badge>
-                </div>
-              </div>
             </div>
           </q-td>
         </q-tr>
       </template>
     </q-table>
+    <div class="row items-center no-wrap">
+      <div class="col-3 q-pr-lg">
+        <q-btn
+          unelevated
+          color="secondary"
+          @click="addPaymentAddress"
+          class="btn-full"
+          >Add</q-btn
+        >
+      </div>
+      <div class="col-9">
+        <div class="float-right">
+          <span>Payed Amount: </span>
+          <span class="text-subtitle2 q-ml-lg">
+            {{satBtc(getTotalPaymentAmount())}}
+          </span>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
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 be42607fd..3329ef06d 100644
--- a/lnbits/extensions/watchonly/static/components/send-to/send-to.js
+++ b/lnbits/extensions/watchonly/static/components/send-to/send-to.js
@@ -48,12 +48,14 @@ async function sendTo(path) {
       },
       addPaymentAddress: function () {
         this.dataLocal.push({address: '', amount: undefined})
+        this.handleOutputsChange()
       },
       deletePaymentAddress: function (v) {
         const index = this.dataLocal.indexOf(v)
         if (index !== -1) {
           this.dataLocal.splice(index, 1)
         }
+        this.handleOutputsChange()
       },
 
       sendMaxToAddress: function (paymentAddress = {}) {
@@ -65,6 +67,10 @@ async function sendTo(path) {
           0,
           inputAmount - payedAmount - feeValue
         )
+        this.handleOutputsChange()
+      },
+      handleOutputsChange: function () {
+        this.$emit('update:outputs')
       },
       getTotalPaymentAmount: function () {
         return this.dataLocal.reduce((t, a) => t + (a.amount || 0), 0)