feat: frontend component for LNURLs (#3321)

lnbits/static/js/components.js

@@ -187,34 +187,6 @@ window.app.component('lnbits-lnurlpay-success-action', {
   }
 })
 
-window.app.component('lnbits-qrcode', {
-  mixins: [window.windowMixin],
-  template: '#lnbits-qrcode',
-  components: {
-    QrcodeVue
-  },
-  props: {
-    value: {
-      type: String,
-      required: true
-    },
-    options: Object
-  },
-  data() {
-    return {
-      custom: {
-        margin: 3,
-        width: 350,
-        size: 350,
-        logo: LNBITS_QR_LOGO
-      }
-    }
-  },
-  created() {
-    this.custom = {...this.custom, ...this.options}
-  }
-})
-
 window.app.component('lnbits-notifications-btn', {
   template: '#lnbits-notifications-btn',
   mixins: [window.windowMixin],

lnbits/static/js/components/lnbits-qrcode-lnurl.js

@@ -0,0 +1,43 @@
+window.app.component('lnbits-qrcode-lnurl', {
+  template: '#lnbits-qrcode-lnurl',
+  mixins: [window.windowMixin],
+  props: {
+    url: {
+      required: true,
+      type: String
+    },
+    prefix: {
+      type: String,
+      default: 'lnurlp'
+    }
+  },
+  data() {
+    return {
+      tab: 'bech32',
+      lnurl: ''
+    }
+  },
+  methods: {
+    setLnurl() {
+      if (this.tab == 'bech32') {
+        const bytes = new TextEncoder().encode(this.url)
+        const bech32 = NostrTools.nip19.encodeBytes('lnurl', bytes)
+        this.lnurl = `lightning:${bech32.toUpperCase()}`
+      } else if (this.tab == 'lud17') {
+        this.lnurl = this.url.replace('https://', this.prefix + '://')
+      }
+      this.$emit('update:lnurl', this.lnurl)
+    }
+  },
+  watch: {
+    url() {
+      this.setLnurl()
+    },
+    tab() {
+      this.setLnurl()
+    }
+  },
+  created() {
+    this.setLnurl()
+  }
+})

lnbits/static/js/components/lnbits-qrcode.js

@@ -0,0 +1,27 @@
+window.app.component('lnbits-qrcode', {
+  mixins: [window.windowMixin],
+  template: '#lnbits-qrcode',
+  components: {
+    QrcodeVue
+  },
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    options: Object
+  },
+  data() {
+    return {
+      custom: {
+        margin: 3,
+        width: 350,
+        size: 350,
+        logo: LNBITS_QR_LOGO
+      }
+    }
+  },
+  created() {
+    this.custom = {...this.custom, ...this.options}
+  }
+})

lnbits/static/vendor.json

@@ -38,6 +38,8 @@
     "js/bolt11-decoder.js"
   ],
   "components": [
+    "js/components/lnbits-qrcode.js",
+    "js/components/lnbits-qrcode-lnurl.js",
     "js/components/lnbits-funding-sources.js",
     "js/components/extension-settings.js",
     "js/components/payment-list.js",

lnbits/templates/components.vue

@@ -635,6 +635,25 @@
   </div>
 </template>
 
+<template id="lnbits-qrcode-lnurl">
+  <div class="qrcode_lnurl__wrapper">
+    <q-tabs
+      v-model="tab"
+      dense
+      class="text-grey q-mb-md"
+      active-color="primary"
+      indicator-color="primary"
+      align="justify"
+      narrow-indicator
+      inline-label
+    >
+      <q-tab name="bech32" icon="qr_code" label="bech32"></q-tab>
+      <q-tab name="lud17" icon="link" label="url (lud17)"></q-tab>
+    </q-tabs>
+    <lnbits-qrcode :value="lnurl" class="rounded-borders"></lnbits-qrcode>
+  </div>
+</template>
+
 <template id="lnbits-lnurlpay-success-action">
   <div>
     <p

package.json

@@ -90,6 +90,8 @@
       "js/bolt11-decoder.js"
     ],
     "components": [
+      "js/components/lnbits-qrcode.js",
+      "js/components/lnbits-qrcode-lnurl.js",
       "js/components/lnbits-funding-sources.js",
       "js/components/extension-settings.js",
       "js/components/payment-list.js",