fix: payment list updates (#2493)

* fix: payment list updates

---------

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

lnbits/core/templates/core/wallet.html

@@ -102,7 +102,11 @@
             </div>
           </div>
         </q-card>
-        <payment-list :wallet="this.g.wallet" :mobileSimple="mobileSimple" />
+        <payment-list
+          :update="updatePayments"
+          :wallet="this.g.wallet"
+          :mobileSimple="mobileSimple"
+        />
       </div>
       {% if HIDE_API %}
       <div class="col-12 col-md-4 q-gutter-y-md">

lnbits/static/js/components/payment-list.js

@@ -1,6 +1,6 @@
 Vue.component('payment-list', {
   name: 'payment-list',
-  props: ['wallet', 'mobileSimple', 'lazy'],
+  props: ['update', 'wallet', 'mobileSimple', 'lazy'],
   data: function () {
     return {
       denomination: LNBITS_DENOMINATION,
@@ -163,12 +163,22 @@ Vue.component('payment-list', {
           this.wallet.name + '-payments'
         )
       })
+    },
+    formatCurrency: function (currency, amount) {
+      try {
+        return LNbits.utils.formatCurrency(currency, amount)
+      } catch (error) {
+        console.warn(error)
+        return `${amount} ???`
+      }
     }
   },
   watch: {
     lazy: function (newVal) {
-      debugger
       if (newVal === true) this.fetchPayments()
+    },
+    update: function () {
+      this.fetchPayments()
     }
   },
   created: function () {
@@ -294,13 +304,13 @@ Vue.component('payment-list', {
                 <br />
                 <i v-if="props.row.extra.wallet_fiat_currency">
                   <span
-                    v-text="LNbits.utils.formatCurrency(props.row.extra.wallet_fiat_currency, props.row.extra.wallet_fiat_amount)"
+                    v-text="formatCurrency(props.row.extra.wallet_fiat_currency, props.row.extra.wallet_fiat_amount)"
                   ></span>
                   <br />
                 </i>
                 <i v-if="props.row.extra.fiat_currency">
                   <span
-                    v-text="LNbits.utils.formatCurrency(props.row.extra.fiat_currency, props.row.extra.fiat_amount)"
+                    v-text="formatCurrency(props.row.extra.fiat_currency, props.row.extra.fiat_amount)"
                   ></span>
                 </i>
               </q-td>

lnbits/static/js/wallet.js

@@ -8,6 +8,7 @@ new Vue({
   mixins: [windowMixin],
   data: function () {
     return {
+      updatePayments: false,
       origin: window.location.origin,
       user: LNbits.map.user(window.user),
       receive: {
@@ -123,6 +124,7 @@ new Vue({
       }, 10000)
     },
     onPaymentReceived: function (paymentHash) {
+      this.updatePayments = !this.updatePayments
       if (this.receive.paymentHash === paymentHash) {
         this.receive.show = false
         this.receive.paymentHash = null
@@ -170,6 +172,9 @@ new Vue({
             }
           }
         })
+        .then(() => {
+          this.updatePayments = !this.updatePayments
+        })
         .catch(err => {
           LNbits.utils.notifyApiError(err)
           this.receive.status = 'pending'
@@ -551,6 +556,11 @@ new Vue({
     this.update.currency = this.g.wallet.currency
     this.receive.units = ['sat', ...window.currencies]
   },
+  watch: {
+    updatePayments: function () {
+      this.fetchBalance()
+    }
+  },
   mounted: function () {
     // show disclaimer
     if (!this.$q.localStorage.getItem('lnbits.disclaimerShown')) {
@@ -558,9 +568,9 @@ new Vue({
       this.$q.localStorage.set('lnbits.disclaimerShown', true)
     }
     // listen to incoming payments
-    LNbits.events.onInvoicePaid(this.g.wallet, payment =>
+    LNbits.events.onInvoicePaid(this.g.wallet, payment => {
       this.onPaymentReceived(payment.payment_hash)
-    )
+    })
     eventReactionWebocket(wallet.id)
   }
 })