[feat] ui support for high number of wallets and payments (#3174)

lnbits/static/i18n/en.js

@@ -49,8 +49,11 @@ window.localisation.en = {
     'This QR code contains your wallet URL with full access. You can scan it from your phone to open your wallet from there.',
   access_wallet_on_mobile: 'Mobile Access',
   wallet: 'Wallet: ',
+  wallet_name: 'Wallet name',
   wallets: 'Wallets',
-  add_wallet: 'Add a new wallet',
+  add_wallet: 'Add wallet',
+  add_new_wallet: 'Add a new wallet',
+  pin_wallet: 'Pin wallet',
   delete_wallet: 'Delete wallet',
   delete_wallet_desc:
     'This whole wallet will be deleted, the funds will be UNRECOVERABLE.',
@@ -125,6 +128,7 @@ window.localisation.en = {
   no_extensions: "You don't have any extensions installed :(",
   created: 'Created',
   search_extensions: 'Search extensions',
+  search_wallets: 'Search wallets',
   extension_sources: 'Extension Sources',
   ext_sources_hint: 'Repositories from where the extensions can be downloaded',
   ext_sources_label:
@@ -264,6 +268,7 @@ window.localisation.en = {
   notification_source_label:
     'Source URL (only use the official LNbits status source, and sources you can trust)',
   more: 'more',
+  more_count: '{count} more',
   less: 'less',
   releases: 'Releases',
   watchdog: 'Watchdog',
@@ -330,6 +335,7 @@ window.localisation.en = {
   username: 'Username',
   pubkey: 'Public Key',
   user_id: 'User ID',
+  id: 'ID',
   email: 'Email',
   first_name: 'First Name',
   last_name: 'Last Name',
@@ -356,6 +362,7 @@ window.localisation.en = {
   gradient_background: 'Gradient Background',
   language: 'Language',
   color_scheme: 'Color Scheme',
+  visible_wallet_count: 'Visible Wallet Count',
   admin_settings: 'Admin Settings',
   extension_cost: 'This release requires a payment of minimum {cost} sats.',
   extension_paid_sats: 'You have already paid {paid_sats} sats.',

lnbits/static/js/base.js

@@ -197,7 +197,8 @@ window.LNbits = {
         email: data.email,
         extensions: data.extensions,
         wallets: data.wallets,
-        super_user: data.super_user
+        super_user: data.super_user,
+        extra: data.extra ?? {}
       }
       const mapWallet = this.wallet
       obj.wallets = obj.wallets
@@ -205,6 +206,9 @@ window.LNbits = {
           return mapWallet(obj)
         })
         .sort((a, b) => {
+          if (a.extra.pinned !== b.extra.pinned) {
+            return a.extra.pinned ? -1 : 1
+          }
           return a.name.localeCompare(b.name)
         })
       obj.walletOptions = obj.wallets.map(obj => {
@@ -213,6 +217,10 @@ window.LNbits = {
           value: obj.id
         }
       })
+      obj.hiddenWalletsCount = Math.max(
+        0,
+        data.wallets.length - data.extra.visible_wallet_count
+      )
       return obj
     },
     wallet(data) {
@@ -508,6 +516,9 @@ window.windowMixin = {
       }
       this.$q.localStorage.set('lnbits.walletFlip', this.walletFlip)
     },
+    goToWallets() {
+      window.location = '/wallets'
+    },
     submitAddWallet() {
       if (
         this.showAddWalletDialog.name &&

lnbits/static/js/components.js

@@ -103,14 +103,7 @@ window.app.component('lnbits-extension-list', {
 window.app.component('lnbits-manage', {
   mixins: [window.windowMixin],
   template: '#lnbits-manage',
-  props: [
-    'showAdmin',
-    'showNode',
-    'showExtensions',
-    'showUsers',
-    'showAudit',
-    'showPayments'
-  ],
+  props: ['showAdmin', 'showNode', 'showExtensions', 'showUsers', 'showAudit'],
   methods: {
     isActive(path) {
       return window.location.pathname === path

lnbits/static/js/init-app.js

@@ -193,6 +193,15 @@ const routes = [
       scripts: ['/static/js/account.js']
     }
   },
+  {
+    path: '/wallets',
+    name: 'Wallets',
+    component: DynamicComponent,
+    props: {
+      fetchUrl: '/wallets',
+      scripts: ['/static/js/wallets.js']
+    }
+  },
   {
     path: '/node',
     name: 'Node',

lnbits/static/js/wallet.js

@@ -662,7 +662,7 @@ window.WalletPageLogic = {
             }
           }
           Quasar.Notify.create({
-            message: 'Wallet and user updated.',
+            message: 'Wallet updated.',
             type: 'positive',
             timeout: 3500
           })

lnbits/static/js/wallets.js

@@ -0,0 +1,89 @@
+window.WalletsPageLogic = {
+  mixins: [window.windowMixin],
+  data() {
+    return {
+      user: null,
+      tab: 'wallets',
+      wallets: [],
+      showAddWalletDialog: {show: false},
+      walletsTable: {
+        columns: [
+          {
+            name: 'name',
+            align: 'left',
+            label: 'Name',
+            field: 'name',
+            sortable: true
+          },
+          {
+            name: 'currency',
+            align: 'center',
+            label: 'Currency',
+            field: 'currency',
+            sortable: true
+          },
+          {
+            name: 'updated_at',
+            align: 'right',
+            label: 'Last Updated',
+            field: 'updated_at',
+            sortable: true
+          }
+        ],
+        pagination: {
+          sortBy: 'updated_at',
+          rowsPerPage: 12,
+          page: 1,
+          descending: true,
+          rowsNumber: 10
+        },
+        search: '',
+        hideEmpty: true,
+        loading: false
+      }
+    }
+  },
+  watch: {
+    'walletsTable.search': {
+      handler() {
+        const props = {}
+        if (this.walletsTable.search) {
+          props['search'] = this.walletsTable.search
+        }
+        this.getUserWallets()
+      }
+    }
+  },
+  methods: {
+    async getUserWallets(props) {
+      try {
+        this.walletsTable.loading = true
+        const params = LNbits.utils.prepareFilterQuery(this.walletsTable, props)
+        const {data} = await LNbits.api.request(
+          'GET',
+          `/api/v1/wallet/paginated?${params}`,
+          null
+        )
+        this.wallets = data.data
+        this.walletsTable.pagination.rowsNumber = data.total
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      } finally {
+        this.walletsTable.loading = false
+      }
+    },
+
+    goToWallet(walletId) {
+      window.location = `/wallet?wal=${walletId}`
+    },
+    formattedFiatAmount(amount, currency) {
+      return LNbits.utils.formatCurrency(Number(amount).toFixed(2), currency)
+    },
+    formattedSatAmount(amount) {
+      return LNbits.utils.formatMsat(amount) + ' sat'
+    }
+  },
+  async created() {
+    await this.getUserWallets()
+  }
+}