From dc951439987b30376ffebf8cb368a6a5102185ab Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 26 Jul 2022 11:31:23 +0300
Subject: [PATCH] fix: change address

---
 .../static/components/payment/payment.html    | 156 +++++++++---------
 .../static/components/payment/payment.js      |  41 ++++-
 .../static/components/send-to/send-to.js      |   4 +-
 .../extensions/watchonly/static/js/index.js   |  18 +-
 .../watchonly/templates/watchonly/index.html  |   8 +-
 5 files changed, 125 insertions(+), 102 deletions(-)

diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.html b/lnbits/extensions/watchonly/static/components/payment/payment.html
index f107824e..ea66fd30 100644
--- a/lnbits/extensions/watchonly/static/components/payment/payment.html
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.html
@@ -1,20 +1,21 @@
 <div>
-    <q-form @submit="createPsbt" class="q-gutter-md">
-      <q-tabs v-model="paymentTab" no-caps class="bg-dark text-white shadow-2">
-        <q-tab name="destination" label="Send To"></q-tab>
-        <q-tab name="coinControl" label="Coin Control"></q-tab>
-      </q-tabs>
-      <q-tab-panels v-model="paymentTab">
-        <q-tab-panel name="destination">
-          <q-card>
-            <q-card-section>
-              {{sendToList}}
-              <send-to
-                :data.sync="sendToList"
-                :tx:size="txSizeNoChange"
-                :sats-denominated="sats_denominated"
-              ></send-to>
-              <!-- <div class="row items-center no-wrap q-mb-md">
+  <q-form @submit="createPsbt" class="q-gutter-md">
+    <!-- {{addresses}} -->
+    <q-tabs v-model="paymentTab" no-caps class="bg-dark text-white shadow-2">
+      <q-tab name="destination" label="Send To"></q-tab>
+      <q-tab name="coinControl" label="Coin Control"></q-tab>
+    </q-tabs>
+    <q-tab-panels v-model="paymentTab">
+      <q-tab-panel name="destination">
+        <q-card>
+          <q-card-section>
+            {{sendToList}}
+            <send-to
+              :data.sync="sendToList"
+              :tx:size="txSizeNoChange"
+              :sats-denominated="sats_denominated"
+            ></send-to>
+            <!-- <div class="row items-center no-wrap q-mb-md">
                 <div class="col-12">
                   <q-table
                     :columns="summaryTable.columns"
@@ -59,8 +60,8 @@
                   </q-table>
                 </div>
               </div> -->
-  
-              <!--               
+
+            <!--               
               <div
                 v-if="payment.changeAmount < 0"
                 class="row items-center no-wrap q-mb-md"
@@ -76,65 +77,68 @@
                 </div>
               </div>
   -->
-            </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>
+          </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>
-          <q-card v-show="showCustomFee">
-            <q-card-section>
-              <div class="row items-center no-wrap q-mb-md q-pt-md">
-                <div class="col-12">
-                  {{feeRate}}
-                  <fee-rate :totalfee="feeValue" :rate.sync="feeRate"></fee-rate>
-                </div>
+        </div>
+        <q-card v-show="showCustomFee">
+          <q-card-section>
+            <div class="row items-center no-wrap q-mb-md q-pt-md">
+              <div class="col-12">
+                {{feeRate}}
+                <fee-rate :totalfee="feeValue" :rate.sync="feeRate"></fee-rate>
               </div>
-            </q-card-section>
-          </q-card>
-        </q-tab-panel>
-  
-        <q-tab-panel name="coinControl">
-          <utxo-list
-            :utxos="utxos.data"
-            :selectable="true"
-            :payed-amount="getTotalPaymentAmount()"
-            :mempool_endpoint="mempool_endpoint"
-            :sats-denominated="sats_denominated"
-          ></utxo-list>
-          <div class="row items-center no-wrap q-mb-md q-pt-lg">
-            <div class="col-2 q-pr-lg">Change Account:</div>
-            <div class="col-3 q-pr-lg">
-              <q-select
-                filled
-                dense
-                emit-value
-                v-model="changeWallet"
-                :options="accounts"
-                @input="selectChangeAddress"
-                :rules="[val => !!val || 'Field is required']"
-                label="Wallet Account"
-              ></q-select>
             </div>
-            <div class="col-7">
-              <q-input
-                filled
-                dense
-                readonly
-                v-model.trim="changeAddress.address"
-                :rules="[val => !!val || 'Field is required']"
-                type="text"
-                label="Change Address"
-              ></q-input>
+          </q-card-section>
+        </q-card>
+      </q-tab-panel>
+
+      <q-tab-panel name="coinControl">
+        <q-card class="q-mb-lg">
+          <q-card-section>
+            <div class="row items-center no-wrap">
+              <div class="col-2 q-pr-lg">Change Account:</div>
+              <div class="col-3 q-pr-lg">
+                <q-select
+                  filled
+                  dense
+                  emit-value
+                  v-model="changeWallet"
+                  :options="accounts"
+                  @input="selectChangeAddress"
+                  :rules="[val => !!val || 'Field is required']"
+                  label="Wallet Account"
+                ></q-select>
+              </div>
+              <div class="col-7">
+                <q-input
+                  filled
+                  dense
+                  readonly
+                  v-model.trim="changeAddress.address"
+                  :rules="[val => !!val || 'Field is required']"
+                  type="text"
+                  label="Change Address"
+                ></q-input>
+              </div>
             </div>
-          </div>
-        </q-tab-panel>
-      </q-tab-panels>
-    </q-form>
-  </div>
-  
\ No newline at end of file
+          </q-card-section>
+        </q-card>
+        <utxo-list
+          :utxos="utxos.data"
+          :selectable="true"
+          :payed-amount="getTotalPaymentAmount()"
+          :mempool_endpoint="mempool_endpoint"
+          :sats-denominated="sats_denominated"
+        ></utxo-list>
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-form>
+</div>
diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.js b/lnbits/extensions/watchonly/static/components/payment/payment.js
index 386e882b..4e63a8a2 100644
--- a/lnbits/extensions/watchonly/static/components/payment/payment.js
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.js
@@ -1,11 +1,27 @@
 async function payment(path) {
   const t = await loadTemplateAsync(path)
-  console.log('### template', path, t)
   Vue.component('payment', {
     name: 'payment',
     template: t,
 
-    props: ['accounts', 'utxos', 'mempool_endpoint', 'sats_denominated'],
+    props: [
+      'accounts',
+      'addresses',
+      'utxos',
+      'mempool_endpoint',
+      'sats_denominated'
+    ],
+    watch: {
+      immediate: true,
+      accounts() {
+        console.log('### watch accounts', newVal)
+        this.updateChangeAddress()
+      },
+      addresses(newVal) {
+        console.log('### watch addresses', newVal)
+        this.updateChangeAddress()
+      }
+    },
 
     data: function () {
       return {
@@ -112,12 +128,29 @@ async function payment(path) {
           masterpub_fingerprint: walletAcount.fingerprint
         }
       },
-      selectChangeAddress: function (wallet = {}) {
+      selectChangeAddress: function (account) {
+        console.log('### selectChangeAddress', account)
+        if (!account) this.changeAddress = ''
         this.changeAddress =
           this.addresses.find(
-            a => a.wallet === wallet.id && a.isChange && !a.hasActivity
+            a => a.wallet === account.id && a.isChange && !a.hasActivity
           ) || {}
       },
+      updateChangeAddress: function () {
+        if (this.changeWallet) {
+          const changeAccount = (this.accounts || []).find(
+            w => w.id === this.changeWallet.id
+          )
+          // change account deleted
+          if (!changeAccount) {
+            this.changeWallet = this.accounts[0]
+            this.selectChangeAddress(this.changeWallet)
+          }
+        } else {
+          this.changeWallet = this.accounts[0]
+          this.selectChangeAddress(this.changeWallet)
+        }
+      },
       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.js b/lnbits/extensions/watchonly/static/components/send-to/send-to.js
index 4712aa67..93ebccc7 100644
--- a/lnbits/extensions/watchonly/static/components/send-to/send-to.js
+++ b/lnbits/extensions/watchonly/static/components/send-to/send-to.js
@@ -63,8 +63,6 @@ async function sendTo(path) {
       }
     },
 
-    created: async function () {
-      
-    }
+    created: async function () {}
   })
 }
diff --git a/lnbits/extensions/watchonly/static/js/index.js b/lnbits/extensions/watchonly/static/js/index.js
index d1f18cd4..6a34aaee 100644
--- a/lnbits/extensions/watchonly/static/js/index.js
+++ b/lnbits/extensions/watchonly/static/js/index.js
@@ -117,6 +117,7 @@ const watchOnly = async () => {
             }
           }
 
+          // todo: account deleted
           await LNbits.api.request(
             'PUT',
             `/watchonly/api/v1/address/${addressData.id}`,
@@ -194,16 +195,10 @@ const watchOnly = async () => {
       initPaymentData: async function () {
         if (!this.payment.show) return
         await this.$refs.addressList.refreshAddresses()
-
-        this.payment.showAdvanced = false
-        this.payment.changeWallet = this.walletAccounts[0]
-        this.selectChangeAddress(this.payment.changeWallet)
       },
 
       goToPaymentView: async function () {
-        // this.payment.show = true
         this.showPayment = true
-        // this.tab = 'utxos'
         await this.initPaymentData()
       },
 
@@ -834,17 +829,6 @@ const watchOnly = async () => {
         this.walletAccounts = accounts
         // await this.refreshAddressesxx() // todo: automatic now?
         await this.scanAddressWithAmount()
-
-        if (this.payment.changeWallet) {
-          const changeAccount = this.walletAccounts.find(
-            w => w.id === this.payment.changeWallet.id
-          )
-          // change account deleted
-          if (!changeAccount) {
-            this.payment.changeWallet = this.walletAccounts[0]
-            this.selectChangeAddress(this.payment.changeWallet)
-          }
-        }
       },
       showAddressDetails: function (addressData) {
         this.openQrCodeDialog(addressData)
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index 6f2d5d0f..8bd7502d 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -493,7 +493,11 @@
         </q-tab-panels>
       </q-card-section>
       <q-card-section v-show="showPayment">
-        <payment :accounts="walletAccounts" :utxos="utxos"></payment>
+        <payment
+          :accounts="walletAccounts"
+          :addresses="addresses"
+          :utxos="utxos"
+        ></payment>
       </q-card-section>
     </q-card>
   </div>
@@ -727,4 +731,4 @@
 <script src="{{ url_for('watchonly_static', path='components/send-to/send-to.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='components/payment/payment.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}