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

lnbits/core/templates/core/wallet.html

@@ -237,87 +237,10 @@
             </q-card-section>
             <q-card-section class="q-pa-none">
               <q-separator></q-separator>
-
               <q-list>
-                <q-expansion-item
-                  group="extras"
-                  icon="qr_code"
-                  v-if="stored_paylinks.length > 0"
-                  :label="$t('stored_paylinks')"
-                >
-                  <q-card>
-                    <q-card-section>
-                      <div class="row flex" v-for="paylink in stored_paylinks">
-                        <q-btn
-                          dense
-                          flat
-                          color="primary"
-                          icon="send"
-                          size="xs"
-                          @click="sendToPaylink(paylink.lnurl)"
-                        >
-                          <q-tooltip>
-                            <span v-text="`send to: ${paylink.lnurl}`"></span>
-                          </q-tooltip>
-                        </q-btn>
-                        <q-btn
-                          dense
-                          flat
-                          color="secondary"
-                          icon="content_copy"
-                          size="xs"
-                          @click="copyText(paylink.lnurl)"
-                        >
-                          <q-tooltip>
-                            <span v-text="`copy: ${paylink.lnurl}`"></span>
-                          </q-tooltip>
-                        </q-btn>
-                        <span
-                          v-text="paylink.label"
-                          class="q-mr-xs q-ml-xs"
-                        ></span>
-                        <q-btn dense flat color="primary" icon="edit" size="xs">
-                          <q-popup-edit
-                            @update:model-value="editPaylink()"
-                            v-model="paylink.label"
-                            v-slot="scope"
-                          >
-                            <q-input
-                              dark
-                              color="white"
-                              v-model="scope.value"
-                              dense
-                              autofocus
-                              counter
-                              @keyup.enter="scope.set"
-                            >
-                              <template v-slot:append>
-                                <q-icon name="edit" />
-                              </template>
-                            </q-input>
-                          </q-popup-edit>
-                          <q-tooltip>
-                            <span v-text="$t('edit')"></span>
-                          </q-tooltip>
-                        </q-btn>
-                        <span style="flex-grow: 1"></span>
-                        <q-btn
-                          dense
-                          flat
-                          color="red"
-                          icon="delete"
-                          size="xs"
-                          @click="deletePaylink(paylink.lnurl)"
-                        >
-                          <q-tooltip>
-                            <span v-text="$t('delete')"></span>
-                          </q-tooltip>
-                        </q-btn>
-                        <span v-text="dateFromNow(paylink.last_used)"></span>
-                      </div>
-                    </q-card-section>
-                  </q-card>
-                </q-expansion-item>
+                <lnbits-wallet-paylinks
+                  @send-lnurl="handleSendLnurl"
+                ></lnbits-wallet-paylinks>
                 <q-separator></q-separator>
                 <lnbits-wallet-share></lnbits-wallet-share>
                 <q-separator></q-separator>

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",

lnbits/templates/components.vue

@@ -24,7 +24,8 @@ include('components/lnbits-wallet-new.vue') %} {%
 include('components/lnbits-label-selector.vue') %} {%
 include('components/lnbits-wallet-api-docs.vue') %} {%
 include('components/lnbits-wallet-share.vue') %} {%
-include('components/lnbits-wallet-charts.vue') %}
+include('components/lnbits-wallet-charts.vue') %} {%
+include('components/lnbits-wallet-paylinks.vue') %}
 
 <template id="lnbits-manage">
   <q-list v-if="g.user" dense class="lnbits-drawer__q-list">

lnbits/templates/components/lnbits-wallet-paylinks.vue

@@ -0,0 +1,78 @@
+<template id="lnbits-wallet-paylinks">
+  <q-expansion-item
+    group="extras"
+    icon="qr_code"
+    v-if="storedPaylinks.length > 0"
+    :label="$t('stored_paylinks')"
+  >
+    <q-card>
+      <q-card-section>
+        <div class="row flex" v-for="paylink in storedPaylinks">
+          <q-btn
+            dense
+            flat
+            color="primary"
+            icon="send"
+            size="xs"
+            @click="sendToPaylink(paylink.lnurl)"
+          >
+            <q-tooltip>
+              <span v-text="`send to: ${paylink.lnurl}`"></span>
+            </q-tooltip>
+          </q-btn>
+          <q-btn
+            dense
+            flat
+            color="secondary"
+            icon="content_copy"
+            size="xs"
+            @click="copyText(paylink.lnurl)"
+          >
+            <q-tooltip>
+              <span v-text="`copy: ${paylink.lnurl}`"></span>
+            </q-tooltip>
+          </q-btn>
+          <span v-text="paylink.label" class="q-mr-xs q-ml-xs"></span>
+          <q-btn dense flat color="primary" icon="edit" size="xs">
+            <q-popup-edit
+              @update:model-value="editPaylink()"
+              v-model="paylink.label"
+              v-slot="scope"
+            >
+              <q-input
+                dark
+                color="white"
+                v-model="scope.value"
+                dense
+                autofocus
+                counter
+                @keyup.enter="scope.set"
+              >
+                <template v-slot:append>
+                  <q-icon name="edit" />
+                </template>
+              </q-input>
+            </q-popup-edit>
+            <q-tooltip>
+              <span v-text="$t('edit')"></span>
+            </q-tooltip>
+          </q-btn>
+          <span style="flex-grow: 1"></span>
+          <q-btn
+            dense
+            flat
+            color="red"
+            icon="delete"
+            size="xs"
+            @click="deletePaylink(paylink.lnurl)"
+          >
+            <q-tooltip>
+              <span v-text="$t('delete')"></span>
+            </q-tooltip>
+          </q-btn>
+          <span v-text="dateFromNow(paylink.last_used)"></span>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-expansion-item>
+</template>

package.json

@@ -123,6 +123,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",