feat: remove selectWallet and use path params instead of url params (#3591)

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

@@ -126,9 +126,6 @@ window.app.component('lnbits-payment-list', {
     }
   },
   computed: {
-    currentWallet() {
-      return this.wallet || this.g.wallet
-    },
     filteredPayments() {
       const q = this.paymentsTable.search
       if (!q || q === '') return this.payments
@@ -200,7 +197,6 @@ window.app.component('lnbits-payment-list', {
       if (this.searchDate.to) {
         this.paymentFilter['time[le]'] = this.searchDate.to + 'T23:59:59'
       }
-
       this.fetchPayments()
     },
     searchByLabels(labels) {
@@ -224,24 +220,24 @@ window.app.component('lnbits-payment-list', {
       this.fetchPayments()
     },
     fetchPayments(props) {
+      this.paymentsTable.loading = true
       const params = LNbits.utils.prepareFilterQuery(
         this.paymentsTable,
         props,
         this.paymentFilter
       )
-      this.paymentsTable.loading = true
       return LNbits.api
-        .getPayments(this.currentWallet, params)
+        .getPayments(this.wallet, params)
         .then(response => {
-          this.paymentsTable.loading = false
           this.paymentsTable.pagination.rowsNumber = response.data.total
           this.payments = response.data.data.map(this.mapPayment)
+          this.paymentsTable.loading = false
           this.recheckPendingPayments()
         })
         .catch(err => {
           this.paymentsTable.loading = false
           if (g.user.admin) {
-            this.fetchPaymentsAsAdmin(this.currentWallet.id, params)
+            this.fetchPaymentsAsAdmin(this.wallet.id, params)
           } else {
             LNbits.utils.notifyApiError(err)
           }
@@ -291,7 +287,7 @@ window.app.component('lnbits-payment-list', {
       ].join('&')
 
       LNbits.api
-        .getPayments(this.currentWallet, params)
+        .getPayments(this.wallet, params)
         .then(response => {
           let updatedPayments = 0
           response.data.data.forEach(updatedPayment => {

lnbits/static/js/init-app.js

@@ -29,6 +29,13 @@ const routes = [
   },
   {
     path: '/wallet',
+    redirect: to => {
+      const walletId = window.g?.lastActiveWallet || window.user?.wallets[0].id
+      return `/wallet/${to.query.val || walletId || 'default'}`
+    }
+  },
+  {
+    path: '/wallet/:id',
     name: 'Wallet',
     component: PageWallet
   },

lnbits/static/js/pages/wallet.js

@@ -639,24 +639,18 @@ window.PageWallet = {
       this.decodeRequest()
       this.parse.show = true
     }
-    if (urlParams.has('wal')) {
-      const wallet = g.user.wallets.find(w => w.id === urlParams.get('wal'))
-      if (wallet) {
-        this.selectWallet(wallet)
-      }
-    } else {
-      const wallet = g.user.wallets.find(w => w.id === this.g.lastActiveWallet)
-      if (wallet) {
-        this.selectWallet(wallet)
-      } else if (g.user.wallets.length > 0) {
-        this.selectWallet(g.user.wallets[0])
-      }
+    let wallet = g.user.wallets.find(w => w.id === this.$route.params.id)
+    if (!wallet) {
+      const walletId = g.lastActiveWallet || g.user.wallets[0].id
+      wallet = g.user.wallets.find(w => w.id === walletId)
+      // TODO: should show PageError(404) if wallet not found
     }
+    this.g.wallet = wallet
+    this.g.lastActiveWallet = wallet.id
+    this.$q.localStorage.setItem('lnbits.lastActiveWallet', wallet.id)
+    this.$router.replace(`/wallet/${wallet.id}`)
   },
   watch: {
-    'g.lastActiveWallet'(val) {
-      this.$q.localStorage.setItem('lnbits.lastActiveWallet', val)
-    },
     'g.updatePaymentsHash'() {
       this.receive.show = false
     },

lnbits/static/js/windowMixin.js

@@ -60,24 +60,6 @@ window.windowMixin = {
         }
       })
     },
-    selectWallet(wallet) {
-      this.g.wallet = wallet
-      this.g.lastActiveWallet = wallet.id
-      this.g.updatePayments = !this.g.updatePayments
-      this.balance = parseInt(wallet.balance_msat / 1000)
-      const currentPath = this.$route.path
-      if (currentPath !== '/wallet') {
-        this.$router.push({
-          path: '/wallet',
-          query: {wal: this.g.wallet.id}
-        })
-      } else {
-        this.$router.replace({
-          path: '/wallet',
-          query: {wal: this.g.wallet.id}
-        })
-      }
-    },
     formatBalance(amount) {
       if (LNBITS_DENOMINATION != 'sats') {
         return LNbits.utils.formatCurrency(amount / 100, LNBITS_DENOMINATION)