refactor: create lnbits-wallet-paylinks component (#3523)

lnbits/static/js/base.js

@@ -75,6 +75,7 @@ window.LNbits = {
         newWallet.canSendPayments = perms.includes('send-payments')
       }
       newWallet.url = `/wallet?&wal=${data.id}`
+      newWallet.storedPaylinks = data.stored_paylinks.links
       return newWallet
     },
     payment(data) {

lnbits/static/js/components/lnbits-wallet-paylinks.js

@@ -0,0 +1,62 @@
+window.app.component('lnbits-wallet-paylinks', {
+  template: '#lnbits-wallet-paylinks',
+  mixins: [window.windowMixin],
+  data() {
+    return {
+      storedPaylinks: []
+    }
+  },
+  watch: {
+    'g.wallet'(val) {
+      this.storedPaylinks = val.storedPaylinks ?? []
+    }
+  },
+  created() {
+    this.storedPaylinks = this.g.wallet.storedPaylinks
+  },
+  methods: {
+    dateFromNow(unix) {
+      const date = new Date(unix * 1000)
+      return moment.utc(date).local().fromNow()
+    },
+    updatePaylinks() {
+      LNbits.api
+        .request(
+          'PUT',
+          `/api/v1/wallet/stored_paylinks/${this.g.wallet.id}`,
+          this.g.wallet.adminkey,
+          {
+            links: this.storedPaylinks
+          }
+        )
+        .then(() => {
+          this.$q.notify({
+            message: 'Paylinks updated.',
+            type: 'positive',
+            timeout: 3500
+          })
+        })
+        .catch(err => {
+          LNbits.utils.notifyApiError(err)
+        })
+    },
+    sendToPaylink(lnurl) {
+      this.$emit('send-lnurl', lnurl)
+    },
+    editPaylink() {
+      this.$nextTick(() => {
+        this.updatePaylinks()
+      })
+    },
+    deletePaylink(lnurl) {
+      const links = []
+      this.storedPaylinks.forEach(link => {
+        if (link.lnurl !== lnurl) {
+          links.push(link)
+        }
+      })
+      this.storedPaylinks = links
+      this.updatePaylinks()
+    }
+  }
+})

lnbits/static/js/wallet.js

@@ -5,7 +5,6 @@ window.WalletPageLogic = {
       origin: window.location.origin,
       baseUrl: `${window.location.protocol}//${window.location.host}/`,
       websocketUrl: `${'http:' ? 'ws://' : 'wss://'}${window.location.host}/api/v1/ws`,
-      stored_paylinks: [],
       parse: {
         show: false,
         invoice: null,
@@ -150,9 +149,10 @@ window.WalletPageLogic = {
     }
   },
   methods: {
-    dateFromNow(unix) {
-      const date = new Date(unix * 1000)
-      return moment.utc(date).local().fromNow()
+    handleSendLnurl(lnurl) {
+      this.parse.data.request = lnurl
+      this.parse.show = true
+      this.lnurlScan()
     },
     formatFiatAmount(amount, currency) {
       this.update.currency = currency
@@ -790,51 +790,9 @@ window.WalletPageLogic = {
         this.update.currency = ''
         this.g.fiatTracking = false
       }
-    },
-    updatePaylinks() {
-      LNbits.api
-        .request(
-          'PUT',
-          `/api/v1/wallet/stored_paylinks/${this.g.wallet.id}`,
-          this.g.wallet.adminkey,
-          {
-            links: this.stored_paylinks
-          }
-        )
-        .then(() => {
-          Quasar.Notify.create({
-            message: 'Paylinks updated.',
-            type: 'positive',
-            timeout: 3500
-          })
-        })
-        .catch(err => {
-          LNbits.utils.notifyApiError(err)
-        })
-    },
-    sendToPaylink(lnurl) {
-      this.parse.data.request = lnurl
-      this.parse.show = true
-      this.lnurlScan()
-    },
-    editPaylink() {
-      this.$nextTick(() => {
-        this.updatePaylinks()
-      })
-    },
-    deletePaylink(lnurl) {
-      const links = []
-      this.stored_paylinks.forEach(link => {
-        if (link.lnurl !== lnurl) {
-          links.push(link)
-        }
-      })
-      this.stored_paylinks = links
-      this.updatePaylinks()
     }
   },
   created() {
-    this.stored_paylinks = wallet.stored_paylinks.links
     const urlParams = new URLSearchParams(window.location.search)
     if (urlParams.has('lightning') || urlParams.has('lnurl')) {
       this.parse.data.request =

lnbits/static/js/windowMixin.js

@@ -66,8 +66,7 @@ window.windowMixin = {
       })
     },
     selectWallet(wallet) {
-      Object.assign(this.g.wallet, wallet)
-      // this.wallet = this.g.wallet
+      this.g.wallet = wallet
       this.g.updatePayments = !this.g.updatePayments
       this.balance = parseInt(wallet.balance_msat / 1000)
       const currentPath = this.$route.path

lnbits/static/vendor.json

@@ -71,6 +71,7 @@
     "js/components/lnbits-wallet-api-docs.js",
     "js/components/lnbits-wallet-new.js",
     "js/components/lnbits-wallet-share.js",
+    "js/components/lnbits-wallet-paylinks.js",
     "js/components/lnbits-home-logos.js",
     "js/components/lnbits-qrcode.js",
     "js/components/lnbits-qrcode-lnurl.js",