LNURLp: Write NFC tags with LNURL-pay links (#766)

* NFC for LNURL-pay

* notification ui improvements

lnbits/extensions/lnurlp/static/js/index.js

@@ -35,6 +35,7 @@ new Vue({
           rowsPerPage: 10
         }
       },
+      nfcTagWriting: false,
       formDialog: {
         show: false,
         fixedAmount: true,
@@ -205,6 +206,42 @@ new Vue({
         .catch(err => {
           LNbits.utils.notifyApiError(err)
         })
+    },
+    writeNfcTag: async function (lnurl) {
+      try {
+        if (typeof NDEFReader == 'undefined') {
+          throw {
+            toString: function () {
+              return 'NFC not supported on this device or browser.'
+            }
+          }
+        }
+
+        const ndef = new NDEFReader()
+
+        this.nfcTagWriting = true
+        this.$q.notify({
+          message: 'Tap your NFC tag to write the LNURL-pay link to it.'
+        })
+
+        await ndef.write({
+          records: [{recordType: 'url', data: 'lightning:' + lnurl, lang: 'en'}]
+        })
+
+        this.nfcTagWriting = false
+        this.$q.notify({
+          type: 'positive',
+          message: 'NFC Tag written successfully.'
+        })
+      } catch (error) {
+        this.nfcTagWriting = false
+        this.$q.notify({
+          type: 'negative',
+          message: error
+            ? error.toString()
+            : 'An unexpected error has occurred.'
+        })
+      }
     }
   },
   created() {

lnbits/extensions/lnurlp/templates/lnurlp/display.html

@@ -14,10 +14,17 @@
             </q-responsive>
           </a>
         </div>
-        <div class="row q-mt-lg">
+        <div class="row q-mt-lg q-gutter-sm">
           <q-btn outline color="grey" @click="copyText('{{ lnurl }}')"
             >Copy LNURL</q-btn
           >
+          <q-btn
+            outline
+            color="grey"
+            icon="nfc"
+            @click="writeNfcTag(' {{ lnurl }} ')"
+            :disable="nfcTagWriting"
+          ></q-btn>
         </div>
       </q-card-section>
     </q-card>

lnbits/extensions/lnurlp/templates/lnurlp/index.html

@@ -99,7 +99,8 @@
                   @click="openUpdateDialog(props.row.id)"
                   icon="edit"
                   color="light-blue"
-                ></q-btn>
+                >
+                </q-btn>
                 <q-btn
                   flat
                   dense
@@ -153,7 +154,8 @@
           v-model.trim="formDialog.data.description"
           type="text"
           label="Item description *"
-        ></q-input>
+        >
+        </q-input>
         <div class="row q-col-gutter-sm">
           <q-input
             filled
@@ -171,7 +173,8 @@
             type="number"
             :step="formDialog.data.currency && formDialog.data.currency !== 'satoshis' ? '0.01' : '1'"
             label="Max *"
-          ></q-input>
+          >
+          </q-input>
         </div>
         <div class="row q-col-gutter-sm">
           <div class="col">
@@ -200,7 +203,8 @@
           type="number"
           label="Comment maximum characters"
           hint="Tell wallets to prompt users for a comment that will be sent along with the payment. LNURLp will store the comment and send it in the webhook."
-        ></q-input>
+        >
+        </q-input>
         <q-input
           filled
           dense
@@ -224,7 +228,8 @@
           type="text"
           label="Success URL (optional)"
           hint="Will be shown as a clickable link to the user in his wallet after a successful payment, appended by the payment_hash as a query string."
-        ></q-input>
+        >
+        </q-input>
         <div class="row q-mt-lg">
           <q-btn
             v-if="formDialog.data.id"
@@ -294,6 +299,14 @@
           @click="copyText(qrCodeDialog.data.pay_url, 'Link copied to clipboard!')"
           >Shareable link</q-btn
         >
+        <q-btn
+          outline
+          color="grey"
+          icon="nfc"
+          @click="writeNfcTag(qrCodeDialog.data.lnurl)"
+          :disable="nfcTagWriting"
+        >
+        </q-btn>
         <q-btn
           outline
           color="grey"

lnbits/extensions/withdraw/static/js/index.js

@@ -237,7 +237,7 @@ new Vue({
         if (typeof NDEFReader == 'undefined') {
           throw {
             toString: function () {
-              return 'NFC not supported on this device and/or browser.'
+              return 'NFC not supported on this device or browser.'
             }
           }
         }
@@ -246,7 +246,7 @@ new Vue({
 
         this.nfcTagWriting = true
         this.$q.notify({
-          message: 'Tap your NFC tag now to write the LNURLw to it'
+          message: 'Tap your NFC tag to write the LNURL-withdraw link to it.'
         })
 
         await ndef.write({
@@ -255,12 +255,16 @@ new Vue({
 
         this.nfcTagWriting = false
         this.$q.notify({
-          message: 'NFC Tag written successfully!'
+          type: 'positive',
+          message: 'NFC Tag written successfully.'
         })
       } catch (error) {
         this.nfcTagWriting = false
         this.$q.notify({
-          message: error ? error.toString() : 'An unexpected error has occurred'
+          type: 'negative',
+          message: error
+            ? error.toString()
+            : 'An unexpected error has occurred.'
         })
       }
     },