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

lnbits/core/views/generic.py

@@ -197,6 +197,7 @@ admin_ui_checks = [Depends(check_admin), Depends(check_admin_ui)]
 
 @generic_router.get("/payments")
 @generic_router.get("/wallet")
+@generic_router.get("/wallet/{wallet_id}")
 @generic_router.get("/wallets")
 @generic_router.get("/account")
 @generic_router.get("/extensions")

lnbits/core/views/payment_api.py

@@ -183,7 +183,7 @@ async def api_payments_paginated(
         False, description="Force check and update of pending payments."
     ),
     filters: Filters = Depends(parse_filters(PaymentFilters)),
-):
+) -> Page[Payment]:
     page = await get_payments_paginated(
         wallet_id=key_info.wallet.id,
         filters=filters,

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')) {
+    let wallet = g.user.wallets.find(w => w.id === this.$route.params.id)
-      const wallet = g.user.wallets.find(w => w.id === urlParams.get('wal'))
+    if (!wallet) {
-      if (wallet) {
+      const walletId = g.lastActiveWallet || g.user.wallets[0].id
-        this.selectWallet(wallet)
+      wallet = g.user.wallets.find(w => w.id === walletId)
-      }
+      // TODO: should show PageError(404) if wallet not found
-    } 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])
-      }
     }
+    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)

lnbits/templates/base.html

@@ -43,7 +43,7 @@
           <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
             <lnbits-wallet-new></lnbits-wallet-new>
             <lnbits-header-wallets></lnbits-header-wallets>
-            <router-view v-if="isVueRoute"></router-view>
+            <router-view v-if="isVueRoute" :key="$route.path"></router-view>
             <!-- FastAPI Content -->
             <div v-else>{% block page %}{% endblock %}</div>
           </q-page>

lnbits/templates/components/lnbits-header-wallets.vue

@@ -48,7 +48,7 @@
         )"
         :key="wallet.id"
         clickable
-        @click="selectWallet(wallet)"
+        @click="$router.push('/wallet/' + wallet.id)"
         class="wallet-list-card"
         :class="{
           'active-wallet-card': g.wallet && g.wallet.id === wallet.id

lnbits/templates/components/lnbits-manage-wallet-list.vue

@@ -12,7 +12,7 @@
       :key="walletRec.id"
       clickable
       :active="g.wallet && g.wallet.id === walletRec.id"
-      @click="selectWallet(walletRec)"
+      @click="$router.push('/wallet/' + walletRec.id)"
     >
       <q-item-section side>
         <q-avatar

lnbits/templates/pages/wallet.vue

@@ -174,7 +174,7 @@
       <q-card class="wallet-card">
         <q-card-section>
           <lnbits-payment-list
-            :expand-details="expandDetails"
+            :wallet="g.wallet"
             :payment-filter="paymentFilter"
           ></lnbits-payment-list>
         </q-card-section>