feat: update to Vue3 (#2677)

* update packages for vue3
* fix make bundle and make checkbundle to include bundle-components
* add lnbits/static/bundle-components.js

---------

Co-authored-by: Pavol Rusnak <pavol@rusnak.io>

.gitignore

@@ -35,6 +35,7 @@ __bundle__
 coverage.xml
 node_modules
 lnbits/static/bundle.js
+lnbits/static/bundle-components.js
 lnbits/static/bundle.css
 lnbits/static/bundle.min.js.old
 lnbits/static/bundle.min.css.old

.prettierignore

@@ -10,6 +10,7 @@
 
 **/lnbits/static/vendor
 **/lnbits/static/bundle.*
+**/lnbits/static/bundle-components.*
 **/lnbits/static/css/*
 
 flake.lock

Makefile

@@ -103,24 +103,21 @@ sass:
 
 bundle:
 	npm install
-	npm run sass
+	npm run bundle
-	npm run vendor_copy
-	npm run vendor_json
 	poetry run ./node_modules/.bin/prettier -w ./lnbits/static/vendor.json
-	npm run vendor_bundle_css
-	npm run vendor_minify_css
-	npm run vendor_bundle_js
-	npm run vendor_minify_js
 
 checkbundle:
 	cp lnbits/static/bundle.min.js lnbits/static/bundle.min.js.old
 	cp lnbits/static/bundle.min.css lnbits/static/bundle.min.css.old
+	cp lnbits/static/bundle-components.min.js lnbits/static/bundle-components.min.js.old
 	make bundle
 	diff -q lnbits/static/bundle.min.js lnbits/static/bundle.min.js.old || exit 1
 	diff -q lnbits/static/bundle.min.css lnbits/static/bundle.min.css.old || exit 1
+	diff -q lnbits/static/bundle-components.min.js lnbits/static/bundle-components.min.js.old || exit 1
 	@echo "Bundle is OK"
 	rm lnbits/static/bundle.min.js.old
 	rm lnbits/static/bundle.min.css.old
+	rm lnbits/static/bundle-components.min.js.old
 
 install-pre-commit-hook:
 	@echo "Installing pre-commit hook to git"

lnbits/core/templates/core/extensions.html

@@ -901,7 +901,7 @@
 </q-dialog>
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
 <script>
-  new Vue({
+  window.app = Vue.createApp({
     el: '#vue',
 
     data: function () {

lnbits/core/templates/core/wallet.html

@@ -154,10 +154,10 @@
                   <q-card>
                     <q-card-section class="text-center">
                       <p v-text="$t('export_to_phone_desc')"></p>
-                      <qrcode
+                      <qrcode-vue
                         :value="'{{request.base_url}}wallet?usr={{user.id}}&wal={{wallet.id}}'"
                         :options="{ width: 256 }"
-                      ></qrcode>
+                      ></qrcode-vue>
                     </q-card-section>
                     <q-card-actions class="flex-center q-pb-md">
                       <q-btn

lnbits/core/templates/node/_tab_transactions.html

@@ -51,11 +51,11 @@
             >
               <a :href="'lightning:' + transactionDetailsDialog.data.bolt11">
                 <q-responsive :ratio="1" class="q-mx-xl">
-                  <qrcode
+                  <qrcode-vue
                     :value="'lightning:' + transactionDetailsDialog.data.bolt11.toUpperCase()"
                     :options="{width: 340}"
                     class="rounded-borders"
-                  ></qrcode>
+                  ></qrcode-vue>
                 </q-responsive>
               </a>
               <q-btn
@@ -138,11 +138,11 @@
                           >
                             <a :href="'lightning:' + props.row.bolt11">
                               <q-responsive :ratio="1" class="q-mx-xl">
-                                <qrcode
+                                <qrcode-vue
                                   :value="'lightning:' + props.row.bolt11.toUpperCase()"
                                   :options="{width: 340}"
                                   class="rounded-borders"
-                                ></qrcode>
+                                ></qrcode-vue>
                               </q-responsive>
                             </a>
                           </div>

lnbits/core/templates/users/index.html

@@ -24,8 +24,8 @@ include "users/_createWalletDialog.html" %}
           </q-btn>
         </div>
         <q-table
-          :data="users"
+          row-key="id"
-          :row-key="usersTableRowKey"
+          :rows="users"
           :columns="usersTable.columns"
           :pagination.sync="usersTable.pagination"
           :no-data-label="$t('no_users')"

lnbits/helpers.py

@@ -100,12 +100,14 @@ def template_renderer(additional_folders: Optional[List] = None) -> Jinja2Templa
     if settings.bundle_assets:
         t.env.globals["INCLUDED_JS"] = ["bundle.min.js"]
         t.env.globals["INCLUDED_CSS"] = ["bundle.min.css"]
+        t.env.globals["INCLUDED_COMPONENTS"] = ["bundle-components.min.js"]
     else:
         vendor_filepath = Path(settings.lnbits_path, "static", "vendor.json")
         with open(vendor_filepath) as vendor_file:
             vendor_files = json.loads(vendor_file.read())
             t.env.globals["INCLUDED_JS"] = vendor_files["js"]
             t.env.globals["INCLUDED_CSS"] = vendor_files["css"]
+            t.env.globals["INCLUDED_COMPONENTS"] = vendor_files["components"]
 
     t.env.globals["WEBPUSH_PUBKEY"] = settings.lnbits_webpush_pubkey
 

lnbits/static/js/account.js

@@ -1,6 +1,6 @@
-new Vue({
+window.app = Vue.createApp({
   el: '#vue',
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   data: function () {
     return {
       user: null,

lnbits/static/js/admin.js

@@ -1,4 +1,4 @@
-new Vue({
+window.app = Vue.createApp({
   el: '#vue',
   mixins: [windowMixin],
   data: function () {

lnbits/static/js/base.js

@@ -1,15 +1,10 @@
-/* globals crypto, moment, Vue, axios, Quasar, _ */
-
-Vue.use(VueI18n)
-
 window.LOCALE = 'en'
-window.i18n = new VueI18n({
+window.i18n = new VueI18n.createI18n({
   locale: window.LOCALE,
   fallbackLocale: window.LOCALE,
   messages: window.localisation
 })
 
-window.EventHub = new Vue()
 window.LNbits = {
   api: {
     request: function (method, url, apiKey, data) {
@@ -264,12 +259,12 @@ window.LNbits = {
         fiat_currency: data.fiat_currency
       }
 
-      obj.date = Quasar.utils.date.formatDate(
+      obj.date = Quasar.date.formatDate(
         new Date(obj.time * 1000),
         'YYYY-MM-DD HH:mm'
       )
       obj.dateFrom = moment(obj.date).fromNow()
-      obj.expirydate = Quasar.utils.date.formatDate(
+      obj.expirydate = Quasar.date.formatDate(
         new Date(obj.expiry * 1000),
         'YYYY-MM-DD HH:mm'
       )
@@ -294,7 +289,7 @@ window.LNbits = {
   },
   utils: {
     confirmDialog: function (msg) {
-      return Quasar.plugins.Dialog.create({
+      return Quasar.Dialog.create({
         message: msg,
         ok: {
           flat: true,
@@ -411,14 +406,14 @@ window.LNbits = {
         )
         .join('\r\n')
 
-      var status = Quasar.utils.exportFile(
+      var status = Quasar.exportFile(
         `${fileName || 'table-export'}.csv`,
         content,
         'text/csv'
       )
 
       if (status !== true) {
-        Quasar.plugins.Notify.create({
+        Quasar.Notify.create({
           message: 'Browser denied file download...',
           color: 'negative',
           icon: null
@@ -432,16 +427,16 @@ window.LNbits = {
       return converter.makeHtml(text)
     },
     hexToRgb: function (hex) {
-      return Quasar.utils.colors.hexToRgb(hex)
+      return Quasar.colors.hexToRgb(hex)
     },
     hexDarken: function (hex, percent) {
-      return Quasar.utils.colors.lighten(hex, percent)
+      return Quasar.colors.lighten(hex, percent)
     },
     hexAlpha: function (hex, alpha) {
-      return Quasar.utils.colors.changeAlpha(hex, alpha)
+      return Quasar.colors.changeAlpha(hex, alpha)
     },
     getPaletteColor: function (color) {
-      return Quasar.utils.colors.getPaletteColor(color)
+      return Quasar.colors.getPaletteColor(color)
     }
   }
 }
@@ -494,7 +489,7 @@ window.windowMixin = {
     },
     copyText: function (text, message, position) {
       var notify = this.$q.notify
-      Quasar.utils.copyToClipboard(text).then(function () {
+      Quasar.copyToClipboard(text).then(function () {
         notify({
           message: message || 'Copied to clipboard!',
           position: position || 'bottom'

lnbits/static/js/components.js

@@ -1,6 +1,6 @@
-/* global _, Vue, moment, LNbits, EventHub, decryptLnurlPayAES */
+window.app.component(QrcodeVue)
 
-Vue.component('lnbits-fsat', {
+window.app.component('lnbits-fsat', {
   props: {
     amount: {
       type: Number,
@@ -15,12 +15,13 @@ Vue.component('lnbits-fsat', {
   }
 })
 
-Vue.component('lnbits-wallet-list', {
+window.app.component('lnbits-wallet-list', {
+  props: ['balance'],
   data: function () {
     return {
       user: null,
       activeWallet: null,
-      activeBalance: [],
+      balance: 0,
       showForm: false,
       walletName: '',
       LNBITS_DENOMINATION: LNBITS_DENOMINATION
@@ -74,7 +75,7 @@ Vue.component('lnbits-wallet-list', {
   `,
   computed: {
     wallets: function () {
-      var bal = this.activeBalance
+      var bal = this.balance
       return this.user.wallets.map(function (obj) {
         obj.live_fsat =
           bal.length && bal[0] === obj.id
@@ -87,9 +88,6 @@ Vue.component('lnbits-wallet-list', {
   methods: {
     createWallet: function () {
       LNbits.api.createWallet(this.user.wallets[0], this.walletName)
-    },
-    updateWalletBalance: function (payload) {
-      this.activeBalance = payload
     }
   },
   created: function () {
@@ -99,11 +97,11 @@ Vue.component('lnbits-wallet-list', {
     if (window.wallet) {
       this.activeWallet = LNbits.map.wallet(window.wallet)
     }
-    EventHub.$on('update-wallet-balance', this.updateWalletBalance)
+    document.addEventListener('updateWalletBalance', this.updateWalletBalance)
   }
 })
 
-Vue.component('lnbits-extension-list', {
+window.app.component('lnbits-extension-list', {
   data: function () {
     return {
       extensions: [],
@@ -169,7 +167,7 @@ Vue.component('lnbits-extension-list', {
   }
 })
 
-Vue.component('lnbits-manage', {
+window.app.component('lnbits-manage', {
   props: ['showAdmin', 'showNode', 'showExtensions', 'showUsers'],
   methods: {
     isActive: function (path) {
@@ -229,9 +227,9 @@ Vue.component('lnbits-manage', {
   }
 })
 
-Vue.component('lnbits-payment-details', {
+window.app.component('lnbits-payment-details', {
   props: ['payment'],
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   data: function () {
     return {
       LNBITS_DENOMINATION: LNBITS_DENOMINATION
@@ -345,7 +343,7 @@ Vue.component('lnbits-payment-details', {
   }
 })
 
-Vue.component('lnbits-lnurlpay-success-action', {
+window.app.component('lnbits-lnurlpay-success-action', {
   props: ['payment', 'success_action'],
   data() {
     return {
@@ -374,10 +372,12 @@ Vue.component('lnbits-lnurlpay-success-action', {
   }
 })
 
-Vue.component('lnbits-qrcode', {
+window.app.component('lnbits-qrcode', {
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
+  components: {
+    QrcodeVue
+  },
   props: ['value'],
-  components: {[VueQrcode.name]: VueQrcode},
   data() {
     return {
       logo: LNBITS_QR_LOGO
@@ -385,15 +385,14 @@ Vue.component('lnbits-qrcode', {
   },
   template: `
   <div class="qrcode__wrapper">
-    <qrcode :value="value"
+    <qrcode-vue :value="value" size="350" class="rounded-borders"></qrcode-vue>
-    :options="{errorCorrectionLevel: 'Q', width: 800}" class="rounded-borders"></qrcode>
     <img class="qrcode__image" :src="logo" alt="..." />
   </div>
   `
 })
 
-Vue.component('lnbits-notifications-btn', {
+window.app.component('lnbits-notifications-btn', {
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   props: ['pubkey'],
   data() {
     return {
@@ -605,8 +604,8 @@ Vue.component('lnbits-notifications-btn', {
   }
 })
 
-Vue.component('lnbits-dynamic-fields', {
+window.app.component('lnbits-dynamic-fields', {
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   props: ['options', 'value'],
   data() {
     return {
@@ -742,8 +741,8 @@ Vue.component('lnbits-dynamic-fields', {
   }
 })
 
-Vue.component('lnbits-update-balance', {
+window.app.component('lnbits-update-balance', {
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   props: ['wallet_id', 'callback'],
   computed: {
     denomination() {

lnbits/static/js/components/extension-rating.js

@@ -1,4 +1,4 @@
-Vue.component('lnbits-extension-rating', {
+window.app.component('lnbits-extension-rating', {
   name: 'lnbits-extension-rating',
   props: ['rating'],
   template: `

lnbits/static/js/components/extension-settings.js

@@ -1,10 +1,10 @@
-Vue.component('lnbits-extension-settings-form', {
+window.app.component('lnbits-extension-settings-form', {
   name: 'lnbits-extension-settings-form',
   props: ['options', 'adminkey', 'endpoint'],
   methods: {
-    updateSettings: async function () {
+    async updateSettings() {
       if (!this.settings) {
-        return Quasar.plugins.Notify.create({
+        return this.$q.notify({
           message: 'No settings to update',
           type: 'negative'
         })
@@ -66,7 +66,7 @@ Vue.component('lnbits-extension-settings-form', {
   }
 })
 
-Vue.component('lnbits-extension-settings-btn-dialog', {
+window.app.component('lnbits-extension-settings-btn-dialog', {
   name: 'lnbits-extension-settings-btn-dialog',
   props: ['options', 'adminkey', 'endpoint'],
   template: `

lnbits/static/js/components/lnbits-funding-sources.js

@@ -1,5 +1,5 @@
-Vue.component('lnbits-funding-sources', {
+window.app.component('lnbits-funding-sources', {
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   props: ['form-data', 'allowed-funding-sources'],
   methods: {
     getFundingSourceLabel(item) {

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

@@ -80,10 +80,10 @@ function generateChart(canvas, rawData) {
   })
 }
 
-Vue.component('payment-chart', {
+window.app.component('payment-chart', {
   name: 'payment-chart',
   props: ['wallet'],
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   data: function () {
     return {
       paymentsChart: {

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

@@ -1,7 +1,7 @@
-Vue.component('payment-list', {
+window.app.component('payment-list', {
   name: 'payment-list',
   props: ['update', 'wallet', 'mobileSimple', 'lazy'],
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   data: function () {
     return {
       denomination: LNBITS_DENOMINATION,
@@ -313,7 +313,7 @@ Vue.component('payment-list', {
         <q-table
           dense
           flat
-          :data="paymentsOmitter"
+          :rows="paymentsOmitter"
           :row-key="paymentTableRowKey"
           :columns="paymentsTable.columns"
           :pagination.sync="paymentsTable.pagination"

lnbits/static/js/index.js

@@ -1,6 +1,6 @@
-new Vue({
+window.app = Vue.createApp({
   el: '#vue',
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   data: function () {
     return {
       disclaimerDialog: {
@@ -93,7 +93,6 @@ new Vue({
   },
   created() {
     this.description = SITE_DESCRIPTION
-
     this.isUserAuthorized = !!this.$q.cookies.get('is_lnbits_user_authorized')
     if (this.isUserAuthorized) {
       window.location.href = '/wallet'

lnbits/static/js/init-app.js

@@ -0,0 +1,4 @@
+window.app.use(VueQrcodeReader)
+window.app.use(Quasar)
+window.app.use(window.i18n)
+window.app.mount('#vue')

lnbits/static/js/node.js

@@ -4,7 +4,7 @@ function shortenNodeId(nodeId) {
     : '...'
 }
 
-Vue.component('lnbits-node-ranks', {
+window.app.component('lnbits-node-ranks', {
   props: ['ranks'],
   data: function () {
     return {
@@ -35,7 +35,7 @@ Vue.component('lnbits-node-ranks', {
   `
 })
 
-Vue.component('lnbits-channel-stats', {
+window.app.component('lnbits-channel-stats', {
   props: ['stats'],
   data: function () {
     return {
@@ -71,7 +71,7 @@ Vue.component('lnbits-channel-stats', {
   }
 })
 
-Vue.component('lnbits-stat', {
+window.app.component('lnbits-stat', {
   props: ['title', 'amount', 'msat', 'btc'],
   computed: {
     value: function () {
@@ -99,20 +99,20 @@ Vue.component('lnbits-stat', {
   `
 })
 
-Vue.component('lnbits-node-qrcode', {
+window.app.component('lnbits-node-qrcode', {
   props: ['info'],
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   template: `
     <q-card class="my-card">
       <q-card-section>
         <div class="text-h6">
           <div style="text-align: center">
-            <qrcode
+            <vue-qrcode
               :value="info.addresses[0]"
               :options="{width: 250}"
               v-if='info.addresses[0]'
               class="rounded-borders"
-            ></qrcode>
+            ></vue-qrcode>
             <div v-else class='text-subtitle1'>
               No addresses available
             </div>
@@ -132,14 +132,14 @@ Vue.component('lnbits-node-qrcode', {
   `
 })
 
-Vue.component('lnbits-node-info', {
+window.app.component('lnbits-node-info', {
   props: ['info'],
   data() {
     return {
       showDialog: false
     }
   },
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   methods: {
     shortenNodeId
   },
@@ -177,7 +177,7 @@ Vue.component('lnbits-node-info', {
   `
 })
 
-Vue.component('lnbits-stat', {
+window.app.component('lnbits-stat', {
   props: ['title', 'amount', 'msat', 'btc'],
   computed: {
     value: function () {
@@ -205,7 +205,7 @@ Vue.component('lnbits-stat', {
       `
 })
 
-Vue.component('lnbits-channel-balance', {
+window.app.component('lnbits-channel-balance', {
   props: ['balance', 'color'],
   methods: {
     formatMsat: function (msat) {
@@ -246,7 +246,7 @@ Vue.component('lnbits-channel-balance', {
   `
 })
 
-Vue.component('lnbits-date', {
+window.app.component('lnbits-date', {
   props: ['ts'],
   computed: {
     date: function () {

lnbits/static/js/users.js

@@ -1,6 +1,6 @@
-new Vue({
+window.app = Vue.createApp({
   el: '#vue',
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   data: function () {
     return {
       isSuperUser: false,
@@ -218,9 +218,6 @@ new Vue({
     formatSat: function (value) {
       return LNbits.utils.formatSat(Math.floor(value / 1000))
     },
-    usersTableRowKey: function (row) {
-      return row.id
-    },
     createUser() {
       LNbits.api
         .request('POST', '/users/api/v1/user', null, this.createUserDialog.data)

lnbits/static/js/wallet.js

@@ -1,11 +1,6 @@
-/* globals windowMixin, decode, Vue, VueQrcodeReader, VueQrcode, Quasar, LNbits, _, EventHub, decryptLnurlPayAES */
+window.app = Vue.createApp({
-
-Vue.component(VueQrcode.name, VueQrcode)
-Vue.use(VueQrcodeReader)
-
-new Vue({
   el: '#vue',
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   data: function () {
     return {
       updatePayments: false,
@@ -321,7 +316,7 @@ new Vue({
             var expireDate = new Date(
               (invoice.data.time_stamp + tag.value) * 1000
             )
-            cleanInvoice.expireDate = Quasar.utils.date.formatDate(
+            cleanInvoice.expireDate = this.$q.utils.date.formatDate(
               expireDate,
               'YYYY-MM-DDTHH:mm:ss.SSSZ'
             )
@@ -514,10 +509,11 @@ new Vue({
     fetchBalance: function () {
       LNbits.api.getWallet(this.g.wallet).then(response => {
         this.balance = Math.floor(response.data.balance / 1000)
-        EventHub.$emit('update-wallet-balance', [
+        document.dispatchEvent(
-          this.g.wallet.id,
+          new CustomEvent('updateWalletBalance', {
-          this.balance
+            detail: [this.g.wallet.id, this.balance]
-        ])
+          })
+        )
       })
       if (this.g.wallet.currency) {
         this.updateFiatBalance()

lnbits/static/vendor.json

@@ -3,15 +3,14 @@
     "vendor/moment.js",
     "vendor/underscore.js",
     "vendor/axios.js",
-    "vendor/vue.js",
+    "vendor/vue.global.prod.js",
-    "vendor/vue-router.js",
+    "vendor/quasar.umd.prod.js",
-    "vendor/VueQrcodeReader.umd.js",
+    "vendor/vuex.global.js",
-    "vendor/vue-qrcode.js",
+    "vendor/vue-i18n.global.prod.js",
-    "vendor/vuex.js",
+    "vendor/vue-router.global.js",
-    "vendor/quasar.ie.polyfills.umd.min.js",
+    "vendor/vue-qrcode-reader.umd.js",
-    "vendor/quasar.umd.js",
+    "vendor/qrcode.vue.browser.js",
-    "vendor/Chart.bundle.js",
+    "vendor/chart.umd.js",
-    "vendor/vue-i18n.js",
     "vendor/showdown.js",
     "i18n/i18n.js",
     "i18n/de.js",
@@ -34,14 +33,17 @@
     "i18n/kr.js",
     "i18n/fi.js",
     "js/base.js",
-    "js/components.js",
+    "js/event-reactions.js",
+    "js/bolt11-decoder.js"
+  ],
+  "components": [
     "js/components/lnbits-funding-sources.js",
     "js/components/extension-settings.js",
     "js/components/extension-rating.js",
     "js/components/payment-list.js",
     "js/components/payment-chart.js",
-    "js/event-reactions.js",
+    "js/components.js",
-    "js/bolt11-decoder.js"
+    "js/init-app.js"
   ],
-  "css": ["vendor/quasar.css", "vendor/Chart.css", "css/base.css"]
+  "css": ["vendor/quasar.css", "css/base.css"]
 }

lnbits/static/vendor/axios.js

@@ -1,4 +1,4 @@
-// Axios v1.7.5 Copyright (c) 2024 Matt Zabriskie and contributors
+// Axios v1.7.7 Copyright (c) 2024 Matt Zabriskie and contributors
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -3093,17 +3093,21 @@
   };
 
   var composeSignals = function composeSignals(signals, timeout) {
+    var _signals = signals = signals ? signals.filter(Boolean) : [],
+      length = _signals.length;
+    if (timeout || length) {
       var controller = new AbortController();
       var aborted;
-    var onabort = function onabort(cancel) {
+      var onabort = function onabort(reason) {
         if (!aborted) {
           aborted = true;
           unsubscribe();
-        var err = cancel instanceof Error ? cancel : this.reason;
+          var err = reason instanceof Error ? reason : this.reason;
           controller.abort(err instanceof AxiosError ? err : new CanceledError(err instanceof Error ? err.message : err));
         }
       };
       var timer = timeout && setTimeout(function () {
+        timer = null;
         onabort(new AxiosError("timeout ".concat(timeout, " of ms exceeded"), AxiosError.ETIMEDOUT));
       }, timeout);
       var unsubscribe = function unsubscribe() {
@@ -3111,20 +3115,20 @@
           timer && clearTimeout(timer);
           timer = null;
           signals.forEach(function (signal) {
-          signal && (signal.removeEventListener ? signal.removeEventListener('abort', onabort) : signal.unsubscribe(onabort));
+            signal.unsubscribe ? signal.unsubscribe(onabort) : signal.removeEventListener('abort', onabort);
           });
           signals = null;
         }
       };
       signals.forEach(function (signal) {
-      return signal && signal.addEventListener && signal.addEventListener('abort', onabort);
+        return signal.addEventListener('abort', onabort);
       });
       var signal = controller.signal;
-    signal.unsubscribe = unsubscribe;
+      signal.unsubscribe = function () {
-    return [signal, function () {
+        return utils$1.asap(unsubscribe);
-      timer && clearTimeout(timer);
+      };
-      timer = null;
+      return signal;
-    }];
+    }
   };
   var composeSignals$1 = composeSignals;
 
@@ -3163,7 +3167,7 @@
     }, streamChunk);
   });
   var readBytes = /*#__PURE__*/function () {
-    var _ref = _wrapAsyncGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(iterable, chunkSize, encode) {
+    var _ref = _wrapAsyncGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(iterable, chunkSize) {
       var _iteratorAbruptCompletion, _didIteratorError, _iteratorError, _iterator, _step, chunk;
       return _regeneratorRuntime().wrap(function _callee$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -3171,82 +3175,111 @@
             _iteratorAbruptCompletion = false;
             _didIteratorError = false;
             _context2.prev = 2;
-            _iterator = _asyncIterator(iterable);
+            _iterator = _asyncIterator(readStream(iterable));
           case 4:
             _context2.next = 6;
             return _awaitAsyncGenerator(_iterator.next());
           case 6:
             if (!(_iteratorAbruptCompletion = !(_step = _context2.sent).done)) {
-              _context2.next = 27;
+              _context2.next = 12;
               break;
             }
             chunk = _step.value;
-            _context2.t0 = _asyncGeneratorDelegate;
+            return _context2.delegateYield(_asyncGeneratorDelegate(_asyncIterator(streamChunk(chunk, chunkSize))), "t0", 9);
-            _context2.t1 = _asyncIterator;
+          case 9:
-            _context2.t2 = streamChunk;
-            if (!ArrayBuffer.isView(chunk)) {
-              _context2.next = 15;
-              break;
-            }
-            _context2.t3 = chunk;
-            _context2.next = 18;
-            break;
-          case 15:
-            _context2.next = 17;
-            return _awaitAsyncGenerator(encode(String(chunk)));
-          case 17:
-            _context2.t3 = _context2.sent;
-          case 18:
-            _context2.t4 = _context2.t3;
-            _context2.t5 = chunkSize;
-            _context2.t6 = (0, _context2.t2)(_context2.t4, _context2.t5);
-            _context2.t7 = (0, _context2.t1)(_context2.t6);
-            _context2.t8 = _awaitAsyncGenerator;
-            return _context2.delegateYield((0, _context2.t0)(_context2.t7, _context2.t8), "t9", 24);
-          case 24:
             _iteratorAbruptCompletion = false;
             _context2.next = 4;
             break;
-          case 27:
+          case 12:
-            _context2.next = 33;
+            _context2.next = 18;
             break;
-          case 29:
+          case 14:
-            _context2.prev = 29;
+            _context2.prev = 14;
-            _context2.t10 = _context2["catch"](2);
+            _context2.t1 = _context2["catch"](2);
             _didIteratorError = true;
-            _iteratorError = _context2.t10;
+            _iteratorError = _context2.t1;
-          case 33:
+          case 18:
-            _context2.prev = 33;
+            _context2.prev = 18;
-            _context2.prev = 34;
+            _context2.prev = 19;
             if (!(_iteratorAbruptCompletion && _iterator["return"] != null)) {
-              _context2.next = 38;
+              _context2.next = 23;
               break;
             }
-            _context2.next = 38;
+            _context2.next = 23;
             return _awaitAsyncGenerator(_iterator["return"]());
-          case 38:
+          case 23:
-            _context2.prev = 38;
+            _context2.prev = 23;
             if (!_didIteratorError) {
-              _context2.next = 41;
+              _context2.next = 26;
               break;
             }
             throw _iteratorError;
-          case 41:
+          case 26:
-            return _context2.finish(38);
+            return _context2.finish(23);
-          case 42:
+          case 27:
-            return _context2.finish(33);
+            return _context2.finish(18);
-          case 43:
+          case 28:
           case "end":
             return _context2.stop();
         }
-      }, _callee, null, [[2, 29, 33, 43], [34,, 38, 42]]);
+      }, _callee, null, [[2, 14, 18, 28], [19,, 23, 27]]);
     }));
-    return function readBytes(_x, _x2, _x3) {
+    return function readBytes(_x, _x2) {
       return _ref.apply(this, arguments);
     };
   }();
-  var trackStream = function trackStream(stream, chunkSize, onProgress, onFinish, encode) {
+  var readStream = /*#__PURE__*/function () {
-    var iterator = readBytes(stream, chunkSize, encode);
+    var _ref2 = _wrapAsyncGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(stream) {
+      var reader, _yield$_awaitAsyncGen, done, value;
+      return _regeneratorRuntime().wrap(function _callee2$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!stream[Symbol.asyncIterator]) {
+              _context3.next = 3;
+              break;
+            }
+            return _context3.delegateYield(_asyncGeneratorDelegate(_asyncIterator(stream)), "t0", 2);
+          case 2:
+            return _context3.abrupt("return");
+          case 3:
+            reader = stream.getReader();
+            _context3.prev = 4;
+          case 5:
+            _context3.next = 7;
+            return _awaitAsyncGenerator(reader.read());
+          case 7:
+            _yield$_awaitAsyncGen = _context3.sent;
+            done = _yield$_awaitAsyncGen.done;
+            value = _yield$_awaitAsyncGen.value;
+            if (!done) {
+              _context3.next = 12;
+              break;
+            }
+            return _context3.abrupt("break", 16);
+          case 12:
+            _context3.next = 14;
+            return value;
+          case 14:
+            _context3.next = 5;
+            break;
+          case 16:
+            _context3.prev = 16;
+            _context3.next = 19;
+            return _awaitAsyncGenerator(reader.cancel());
+          case 19:
+            return _context3.finish(16);
+          case 20:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee2, null, [[4,, 16, 20]]);
+    }));
+    return function readStream(_x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var trackStream = function trackStream(stream, chunkSize, onProgress, onFinish) {
+    var iterator = readBytes(stream, chunkSize);
     var bytes = 0;
     var done;
     var _onFinish = function _onFinish(e) {
@@ -3257,25 +3290,25 @@
     };
     return new ReadableStream({
       pull: function pull(controller) {
-        return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
           var _yield$iterator$next, _done, value, len, loadedBytes;
-          return _regeneratorRuntime().wrap(function _callee2$(_context3) {
+          return _regeneratorRuntime().wrap(function _callee3$(_context4) {
-            while (1) switch (_context3.prev = _context3.next) {
+            while (1) switch (_context4.prev = _context4.next) {
               case 0:
-                _context3.prev = 0;
+                _context4.prev = 0;
-                _context3.next = 3;
+                _context4.next = 3;
                 return iterator.next();
               case 3:
-                _yield$iterator$next = _context3.sent;
+                _yield$iterator$next = _context4.sent;
                 _done = _yield$iterator$next.done;
                 value = _yield$iterator$next.value;
                 if (!_done) {
-                  _context3.next = 10;
+                  _context4.next = 10;
                   break;
                 }
                 _onFinish();
                 controller.close();
-                return _context3.abrupt("return");
+                return _context4.abrupt("return");
               case 10:
                 len = value.byteLength;
                 if (onProgress) {
@@ -3283,18 +3316,18 @@
                   onProgress(loadedBytes);
                 }
                 controller.enqueue(new Uint8Array(value));
-                _context3.next = 19;
+                _context4.next = 19;
                 break;
               case 15:
-                _context3.prev = 15;
+                _context4.prev = 15;
-                _context3.t0 = _context3["catch"](0);
+                _context4.t0 = _context4["catch"](0);
-                _onFinish(_context3.t0);
+                _onFinish(_context4.t0);
-                throw _context3.t0;
+                throw _context4.t0;
               case 19:
               case "end":
-                return _context3.stop();
+                return _context4.stop();
             }
-          }, _callee2, null, [[0, 15]]);
+          }, _callee3, null, [[0, 15]]);
         }))();
       },
       cancel: function cancel(reason) {
@@ -3377,6 +3410,7 @@
   }(new Response());
   var getBodyLength = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(body) {
+      var _request;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -3393,32 +3427,36 @@
             return _context2.abrupt("return", body.size);
           case 4:
             if (!utils$1.isSpecCompliantForm(body)) {
-              _context2.next = 8;
+              _context2.next = 9;
               break;
             }
-            _context2.next = 7;
+            _request = new Request(platform.origin, {
-            return new Request(body).arrayBuffer();
+              method: 'POST',
-          case 7:
+              body: body
-            return _context2.abrupt("return", _context2.sent.byteLength);
+            });
+            _context2.next = 8;
+            return _request.arrayBuffer();
           case 8:
+            return _context2.abrupt("return", _context2.sent.byteLength);
+          case 9:
             if (!(utils$1.isArrayBufferView(body) || utils$1.isArrayBuffer(body))) {
-              _context2.next = 10;
+              _context2.next = 11;
               break;
             }
             return _context2.abrupt("return", body.byteLength);
-          case 10:
+          case 11:
             if (utils$1.isURLSearchParams(body)) {
               body = body + '';
             }
             if (!utils$1.isString(body)) {
-              _context2.next = 15;
+              _context2.next = 16;
               break;
             }
-            _context2.next = 14;
+            _context2.next = 15;
             return encodeText(body);
-          case 14:
-            return _context2.abrupt("return", _context2.sent.byteLength);
           case 15:
+            return _context2.abrupt("return", _context2.sent.byteLength);
+          case 16:
           case "end":
             return _context2.stop();
         }
@@ -3448,18 +3486,15 @@
   }();
   var fetchAdapter = isFetchSupported && ( /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(config) {
-      var _resolveConfig, url, method, data, signal, cancelToken, timeout, onDownloadProgress, onUploadProgress, responseType, headers, _resolveConfig$withCr, withCredentials, fetchOptions, _ref5, _ref6, composedSignal, stopTimeout, finished, request, onFinish, requestContentLength, _request, contentTypeHeader, _progressEventDecorat, _progressEventDecorat2, onProgress, flush, isCredentialsSupported, response, isStreamResponse, options, responseContentLength, _ref7, _ref8, _onProgress, _flush, responseData;
+      var _resolveConfig, url, method, data, signal, cancelToken, timeout, onDownloadProgress, onUploadProgress, responseType, headers, _resolveConfig$withCr, withCredentials, fetchOptions, composedSignal, request, unsubscribe, requestContentLength, _request, contentTypeHeader, _progressEventDecorat, _progressEventDecorat2, onProgress, flush, isCredentialsSupported, response, isStreamResponse, options, responseContentLength, _ref5, _ref6, _onProgress, _flush, responseData;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
             _resolveConfig = resolveConfig(config), url = _resolveConfig.url, method = _resolveConfig.method, data = _resolveConfig.data, signal = _resolveConfig.signal, cancelToken = _resolveConfig.cancelToken, timeout = _resolveConfig.timeout, onDownloadProgress = _resolveConfig.onDownloadProgress, onUploadProgress = _resolveConfig.onUploadProgress, responseType = _resolveConfig.responseType, headers = _resolveConfig.headers, _resolveConfig$withCr = _resolveConfig.withCredentials, withCredentials = _resolveConfig$withCr === void 0 ? 'same-origin' : _resolveConfig$withCr, fetchOptions = _resolveConfig.fetchOptions;
             responseType = responseType ? (responseType + '').toLowerCase() : 'text';
-            _ref5 = signal || cancelToken || timeout ? composeSignals$1([signal, cancelToken], timeout) : [], _ref6 = _slicedToArray(_ref5, 2), composedSignal = _ref6[0], stopTimeout = _ref6[1];
+            composedSignal = composeSignals$1([signal, cancelToken && cancelToken.toAbortSignal()], timeout);
-            onFinish = function onFinish() {
+            unsubscribe = composedSignal && composedSignal.unsubscribe && function () {
-              !finished && setTimeout(function () {
+              composedSignal.unsubscribe();
-                composedSignal && composedSignal.unsubscribe();
-              });
-              finished = true;
             };
             _context4.prev = 4;
             _context4.t0 = onUploadProgress && supportsRequestStream && method !== 'get' && method !== 'head';
@@ -3487,7 +3522,7 @@
             }
             if (_request.body) {
               _progressEventDecorat = progressEventDecorator(requestContentLength, progressEventReducer(asyncDecorator(onUploadProgress))), _progressEventDecorat2 = _slicedToArray(_progressEventDecorat, 2), onProgress = _progressEventDecorat2[0], flush = _progressEventDecorat2[1];
-              data = trackStream(_request.body, DEFAULT_CHUNK_SIZE, onProgress, flush, encodeText);
+              data = trackStream(_request.body, DEFAULT_CHUNK_SIZE, onProgress, flush);
             }
           case 15:
             if (!utils$1.isString(withCredentials)) {
@@ -3510,26 +3545,25 @@
           case 20:
             response = _context4.sent;
             isStreamResponse = supportsResponseStream && (responseType === 'stream' || responseType === 'response');
-            if (supportsResponseStream && (onDownloadProgress || isStreamResponse)) {
+            if (supportsResponseStream && (onDownloadProgress || isStreamResponse && unsubscribe)) {
               options = {};
               ['status', 'statusText', 'headers'].forEach(function (prop) {
                 options[prop] = response[prop];
               });
               responseContentLength = utils$1.toFiniteNumber(response.headers.get('content-length'));
-              _ref7 = onDownloadProgress && progressEventDecorator(responseContentLength, progressEventReducer(asyncDecorator(onDownloadProgress), true)) || [], _ref8 = _slicedToArray(_ref7, 2), _onProgress = _ref8[0], _flush = _ref8[1];
+              _ref5 = onDownloadProgress && progressEventDecorator(responseContentLength, progressEventReducer(asyncDecorator(onDownloadProgress), true)) || [], _ref6 = _slicedToArray(_ref5, 2), _onProgress = _ref6[0], _flush = _ref6[1];
               response = new Response(trackStream(response.body, DEFAULT_CHUNK_SIZE, _onProgress, function () {
                 _flush && _flush();
-                isStreamResponse && onFinish();
+                unsubscribe && unsubscribe();
-              }, encodeText), options);
+              }), options);
             }
             responseType = responseType || 'text';
             _context4.next = 26;
             return resolvers[utils$1.findKey(resolvers, responseType) || 'text'](response, config);
           case 26:
             responseData = _context4.sent;
-            !isStreamResponse && onFinish();
+            !isStreamResponse && unsubscribe && unsubscribe();
-            stopTimeout && stopTimeout();
+            _context4.next = 30;
-            _context4.next = 31;
             return new Promise(function (resolve, reject) {
               settle(resolve, reject, {
                 data: responseData,
@@ -3540,26 +3574,26 @@
                 request: request
               });
             });
-          case 31:
+          case 30:
             return _context4.abrupt("return", _context4.sent);
-          case 34:
+          case 33:
-            _context4.prev = 34;
+            _context4.prev = 33;
             _context4.t2 = _context4["catch"](4);
-            onFinish();
+            unsubscribe && unsubscribe();
             if (!(_context4.t2 && _context4.t2.name === 'TypeError' && /fetch/i.test(_context4.t2.message))) {
-              _context4.next = 39;
+              _context4.next = 38;
               break;
             }
             throw Object.assign(new AxiosError('Network Error', AxiosError.ERR_NETWORK, config, request), {
               cause: _context4.t2.cause || _context4.t2
             });
-          case 39:
+          case 38:
             throw AxiosError.from(_context4.t2, _context4.t2 && _context4.t2.code, config, request);
-          case 40:
+          case 39:
           case "end":
             return _context4.stop();
         }
-      }, _callee4, null, [[4, 34]]);
+      }, _callee4, null, [[4, 33]]);
     }));
     return function (_x5) {
       return _ref4.apply(this, arguments);
@@ -3683,7 +3717,7 @@
     });
   }
 
-  var VERSION = "1.7.5";
+  var VERSION = "1.7.7";
 
   var validators$1 = {};
 
@@ -4064,6 +4098,20 @@
           this._listeners.splice(index, 1);
         }
       }
+    }, {
+      key: "toAbortSignal",
+      value: function toAbortSignal() {
+        var _this = this;
+        var controller = new AbortController();
+        var abort = function abort(err) {
+          controller.abort(err);
+        };
+        this.subscribe(abort);
+        controller.signal.unsubscribe = function () {
+          return _this.unsubscribe(abort);
+        };
+        return controller.signal;
+      }
 
       /**
        * Returns an object that contains a new `CancelToken` and a function that, when called,

lnbits/static/vendor/underscore.js

@@ -7,13 +7,13 @@
     exports.noConflict = function () { global._ = current; return exports; };
   }()));
 }(this, (function () {
-  //     Underscore.js 1.13.6
+  //     Underscore.js 1.13.7
   //     https://underscorejs.org
-  //     (c) 2009-2022 Jeremy Ashkenas, Julian Gonggrijp, and DocumentCloud and Investigative Reporters & Editors
+  //     (c) 2009-2024 Jeremy Ashkenas, Julian Gonggrijp, and DocumentCloud and Investigative Reporters & Editors
   //     Underscore may be freely distributed under the MIT license.
 
   // Current version.
-  var VERSION = '1.13.6';
+  var VERSION = '1.13.7';
 
   // Establish the root object, `window` (`self`) in the browser, `global`
   // on the server, or `this` in some virtual machines. We use `self`
@@ -150,8 +150,11 @@
   // In IE 10 - Edge 13, `DataView` has string tag `'[object Object]'`.
   // In IE 11, the most common among them, this problem also applies to
   // `Map`, `WeakMap` and `Set`.
-  var hasStringTagBug = (
+  // Also, there are cases where an application can override the native
-        supportsDataView && hasObjectTag(new DataView(new ArrayBuffer(8)))
+  // `DataView` object, in cases like that we can't use the constructor
+  // safely and should just rely on alternate `DataView` checks
+  var hasDataViewBug = (
+        supportsDataView && (!/\[native code\]/.test(String(DataView)) || hasObjectTag(new DataView(new ArrayBuffer(8))))
       ),
       isIE11 = (typeof Map !== 'undefined' && hasObjectTag(new Map));
 
@@ -159,11 +162,13 @@
 
   // In IE 10 - Edge 13, we need a different heuristic
   // to determine whether an object is a `DataView`.
-  function ie10IsDataView(obj) {
+  // Also, in cases where the native `DataView` is
+  // overridden we can't rely on the tag itself.
+  function alternateIsDataView(obj) {
     return obj != null && isFunction$1(obj.getInt8) && isArrayBuffer(obj.buffer);
   }
 
-  var isDataView$1 = (hasStringTagBug ? ie10IsDataView : isDataView);
+  var isDataView$1 = (hasDataViewBug ? alternateIsDataView : isDataView);
 
   // Is a given value an array?
   // Delegates to ECMA5's native `Array.isArray`.
@@ -376,7 +381,7 @@
     var className = toString.call(a);
     if (className !== toString.call(b)) return false;
     // Work around a bug in IE 10 - Edge 13.
-    if (hasStringTagBug && className == '[object Object]' && isDataView$1(a)) {
+    if (hasDataViewBug && className == '[object Object]' && isDataView$1(a)) {
       if (!isDataView$1(b)) return false;
       className = tagDataView;
     }

lnbits/templates/base.html

@@ -32,7 +32,8 @@
   </head>
 
   <body data-theme="bitcoin">
-    <q-layout id="vue" view="hHh lpR lfr" v-cloak>
+    <div id="vue">
+      <q-layout view="hHh lpR lfr" v-cloak>
         <q-header bordered class="bg-marginal-bg">
           <q-toolbar>
             {% block drawer_toggle %}
@@ -49,8 +50,8 @@
               <q-btn flat no-caps dense size="lg" type="a" href="/"
                 >{% if USE_CUSTOM_LOGO %}
                 <img height="30px" alt="Logo" src="{{ USE_CUSTOM_LOGO }}" />
-              {%else%} {% if SITE_TITLE != 'LNbits' %} {{ SITE_TITLE }} {% else
+                {%else%} {% if SITE_TITLE != 'LNbits' %} {{ SITE_TITLE }} {%
-              %}
+                else %}
                 <span><strong>LN</strong>bits</span> {% endif %} {%endif%} </q-btn
               >{% endblock %} {% block toolbar_subtitle %}{%if user and
               user.super_user%}
@@ -159,7 +160,7 @@
           show-if-above
           :elevated="$q.screen.lt.md"
         >
-        <lnbits-wallet-list></lnbits-wallet-list>
+          <lnbits-wallet-list :balance="balance"></lnbits-wallet-list>
 
           <lnbits-manage
             :show-admin="'{{LNBITS_ADMIN_UI}}' == 'True'"
@@ -222,6 +223,7 @@
 
         {% endblock %}
       </q-layout>
+    </div>
 
     {% block vue_templates %}{% endblock %}
     <!---->
@@ -258,6 +260,8 @@
         { value: 'fi', label: 'Suomi', display: '🇫🇮 FI' }
       ]
     </script>
-    {% block scripts %}{% endblock %}
+    {% block scripts %}{% endblock %} {% for url in INCLUDED_COMPONENTS %}
+    <script src="{{ static_url_for('static', url) }}"></script>
+    {% endfor %}
   </body>
 </html>

package.json

@@ -6,45 +6,46 @@
     "vendor_json": "node -e \"require('fs').writeFileSync('./lnbits/static/vendor.json', JSON.stringify(require('./package.json').bundle))\"",
     "vendor_bundle_css": "node -e \"require('concat')(require('./package.json').bundle.css.map(a => 'lnbits/static/'+a), './lnbits/static/bundle.css')\"",
     "vendor_bundle_js": "node -e \"require('concat')(require('./package.json').bundle.js.map(a => 'lnbits/static/'+a),'./lnbits/static/bundle.js')\"",
+    "vendor_bundle_components": "node -e \"require('concat')(require('./package.json').bundle.components.map(a => 'lnbits/static/'+a), './lnbits/static/bundle-components.js')\"",
     "vendor_minify_css": "./node_modules/.bin/minify ./lnbits/static/bundle.css > ./lnbits/static/bundle.min.css",
-    "vendor_minify_js": "./node_modules/.bin/minify ./lnbits/static/bundle.js > ./lnbits/static/bundle.min.js"
+    "vendor_minify_js": "./node_modules/.bin/minify ./lnbits/static/bundle.js > ./lnbits/static/bundle.min.js",
+    "vendor_minify_components": "./node_modules/.bin/minify ./lnbits/static/bundle-components.js > ./lnbits/static/bundle-components.min.js",
+    "bundle": "npm run sass && npm run vendor_copy && npm run vendor_json && npm run vendor_bundle_css && npm run vendor_bundle_js && npm run vendor_bundle_components && npm run vendor_minify_css && npm run vendor_minify_js && npm run vendor_minify_components"
   },
   "devDependencies": {
     "concat": "^1.0.3",
     "minify": "^9.2.0",
     "prettier": "^3.3.3",
     "pyright": "1.1.289",
-    "sass": "^1.60.0"
+    "sass": "^1.78.0"
   },
   "dependencies": {
-    "@chenfengyuan/vue-qrcode": "1.0.2",
+    "axios": "^1.7.7",
-    "axios": "^1.7.5",
+    "chart.js": "^4.4.4",
-    "chart.js": "^2.9.4",
     "moment": "^2.30.1",
-    "quasar": "1.13.2",
+    "qrcode.vue": "^3.4.1",
+    "quasar": "2.16.10",
     "showdown": "^2.1.0",
-    "underscore": "^1.13.6",
+    "underscore": "^1.13.7",
-    "vue": "2.6.12",
+    "vue": "3.5.2",
-    "vue-i18n": "^8.28.2",
+    "vue-i18n": "^9.14.0",
-    "vue-qrcode-reader": "^2.3.18",
+    "vue-qrcode-reader": "^5.5.7",
-    "vue-router": "3.4.3",
+    "vue-router": "4.4.3",
-    "vuex": "3.5.1"
+    "vuex": "4.1.0"
   },
   "vendor": [
     "./node_modules/moment/moment.js",
     "./node_modules/underscore/underscore.js",
     "./node_modules/axios/dist/axios.js",
-    "./node_modules/vue/dist/vue.js",
+    "./node_modules/vue/dist/vue.global.prod.js",
-    "./node_modules/vue-router/dist/vue-router.js",
+    "./node_modules/quasar/dist/quasar.umd.prod.js",
-    "./node_modules/vue-qrcode-reader/dist/VueQrcodeReader.umd.js",
+    "./node_modules/vuex/dist/vuex.global.js",
-    "./node_modules/@chenfengyuan/vue-qrcode/dist/vue-qrcode.js",
+    "./node_modules/vue-i18n/dist/vue-i18n.global.prod.js",
-    "./node_modules/vuex/dist/vuex.js",
+    "./node_modules/vue-router/dist/vue-router.global.js",
-    "./node_modules/quasar/dist/quasar.ie.polyfills.umd.min.js",
+    "./node_modules/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js",
-    "./node_modules/quasar/dist/quasar.umd.js",
+    "./node_modules/qrcode.vue/dist/qrcode.vue.browser.js",
-    "./node_modules/chart.js/dist/Chart.bundle.js",
+    "./node_modules/chart.js/dist/chart.umd.js",
     "./node_modules/quasar/dist/quasar.css",
-    "./node_modules/chart.js/dist/Chart.css",
-    "./node_modules/vue-i18n/dist/vue-i18n.js",
     "./node_modules/showdown/dist/showdown.js"
   ],
   "bundle": {
@@ -52,15 +53,14 @@
       "vendor/moment.js",
       "vendor/underscore.js",
       "vendor/axios.js",
-      "vendor/vue.js",
+      "vendor/vue.global.prod.js",
-      "vendor/vue-router.js",
+      "vendor/quasar.umd.prod.js",
-      "vendor/VueQrcodeReader.umd.js",
+      "vendor/vuex.global.js",
-      "vendor/vue-qrcode.js",
+      "vendor/vue-i18n.global.prod.js",
-      "vendor/vuex.js",
+      "vendor/vue-router.global.js",
-      "vendor/quasar.ie.polyfills.umd.min.js",
+      "vendor/vue-qrcode-reader.umd.js",
-      "vendor/quasar.umd.js",
+      "vendor/qrcode.vue.browser.js",
-      "vendor/Chart.bundle.js",
+      "vendor/chart.umd.js",
-      "vendor/vue-i18n.js",
       "vendor/showdown.js",
       "i18n/i18n.js",
       "i18n/de.js",
@@ -83,18 +83,20 @@
       "i18n/kr.js",
       "i18n/fi.js",
       "js/base.js",
-      "js/components.js",
+      "js/event-reactions.js",
+      "js/bolt11-decoder.js"
+    ],
+    "components": [
       "js/components/lnbits-funding-sources.js",
       "js/components/extension-settings.js",
       "js/components/extension-rating.js",
       "js/components/payment-list.js",
       "js/components/payment-chart.js",
-      "js/event-reactions.js",
+      "js/components.js",
-      "js/bolt11-decoder.js"
+      "js/init-app.js"
     ],
     "css": [
       "vendor/quasar.css",
-      "vendor/Chart.css",
       "css/base.css"
     ]
   }