feat: add lud17 urls to qr / copy (#89)

* feat: add lud17 urls to qr / copy

templates/lnurlp/display.html

@@ -2,21 +2,36 @@
 <div class="row q-col-gutter-md justify-center">
   <div class="col-12 col-sm-6 col-md-5 col-lg-4">
     <q-card class="q-pa-lg">
+      <q-card-section>
+        <q-tabs
+          v-model="tab"
+          dense
+          class="text-grey"
+          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>
+      </q-card-section>
       <q-card-section class="q-pa-none">
         <div class="text-center">
-          <a class="text-secondary" href="lightning:{{ lnurl }}">
-            <lnbits-qrcode value="lightning:{{ lnurl }}"></lnbits-qrcode>
+          <a class="text-secondary" href="lnurl">
+            <lnbits-qrcode :value="lnurl"></lnbits-qrcode>
           </a>
         </div>
         <div class="row q-mt-lg q-gutter-sm">
-          <q-btn outline color="grey" @click="copyText('{{ lnurl }}')"
+          <q-btn outline color="grey" @click="copyText(lnurl)"
             >Copy LNURL</q-btn
           >
           <q-btn
             outline
             color="grey"
             icon="nfc"
-            @click="writeNfcTag(' {{ lnurl }} ')"
+            @click="writeNfcTag(lnurl)"
             :disable="nfcTagWriting"
           ></q-btn>
         </div>
@@ -40,7 +55,33 @@
 <script>
   window.app = Vue.createApp({
     el: '#vue',
-    mixins: [window.windowMixin]
+    mixins: [window.windowMixin],
+    data() {
+      return {
+        tab: 'bech32',
+        url: window.location.origin + '/lnurlp/{{ link_id }}',
+        lnurl: ''
+      }
+    },
+    methods: {
+      setBech32() {
+        const bytes = new TextEncoder().encode(this.url)
+        const bech32 = NostrTools.nip19.encodeBytes('lnurl', bytes)
+        this.lnurl = `lightning:${bech32.toUpperCase()}`
+      }
+    },
+    watch: {
+      tab(value) {
+        if (value == 'bech32') {
+          this.setBech32()
+        } else if (value == 'lud17') {
+          this.lnurl = this.url.replace('https://', 'lnurlp://')
+        }
+      }
+    },
+    created() {
+      this.setBech32()
+    }
   })
 </script>
 {% endblock %}

templates/lnurlp/index.html

@@ -357,9 +357,22 @@
 
   <q-dialog v-model="qrCodeDialog.show" position="top">
     <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
-      <lnbits-qrcode
-        :value="'lightning:' + qrCodeDialog.data.lnurl"
-      ></lnbits-qrcode>
+      <q-card-section>
+        <q-tabs
+          v-model="tab"
+          dense
+          class="text-grey"
+          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>
+      </q-card-section>
+      <lnbits-qrcode :value="lnurl"></lnbits-qrcode>
       <p style="word-break: break-all">
         <strong>ID:</strong> <span v-text="qrCodeDialog.data.id"></span><br />
         <strong>Amount:</strong> <span v-text="qrCodeDialog.data.amount"></span
@@ -392,7 +405,7 @@
         <q-btn
           outline
           color="grey"
-          @click="copyText(qrCodeDialog.data.lnurl, 'LNURL copied to clipboard!')"
+          @click="copyText(lnurl, 'LNURL copied to clipboard!')"
           class="q-ml-sm"
           >Copy LNURL</q-btn
         >
@@ -407,7 +420,7 @@
           outline
           color="grey"
           icon="nfc"
-          @click="writeNfcTag(qrCodeDialog.data.lnurl)"
+          @click="writeNfcTag(lnurl)"
           :disable="nfcTagWriting"
           ><q-tooltip>Write to NFC</q-tooltip>
         </q-btn>