Add NFC Writing support to LNURLw extension (#725)

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

@@ -53,6 +53,7 @@ new Vue({
           rowsPerPage: 10
         }
       },
+      nfcTagWriting: false,
       formDialog: {
         show: false,
         secondMultiplier: 'seconds',
@@ -231,6 +232,36 @@ new Vue({
             })
         })
     },
+    writeNfcTag: async function (lnurl) {
+      try {
+        if (typeof NDEFReader == 'undefined') {
+          throw {
+            toString: function () {
+              return 'NFC not supported on this device and/or browser.'
+            }
+          }
+        }
+
+        const ndef = new NDEFReader()
+
+        this.nfcTagWriting = true
+        this.$q.notify({
+          message: 'Tap your NFC tag now to write the LNURLw to it'
+        })
+
+        await ndef.write(lnurl)
+
+        this.nfcTagWriting = false
+        this.$q.notify({
+          message: 'NFC Tag written successfully!'
+        })
+      } catch (error) {
+        this.nfcTagWriting = false
+        this.$q.notify({
+          message: error ? error.toString() : 'An unexpected error has occurred'
+        })
+      }
+    },
     exportCSV: function () {
       LNbits.utils.exportCSV(this.paywallsTable.columns, this.paywalls)
     }

lnbits/extensions/withdraw/templates/withdraw/display.html

@@ -17,10 +17,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>
@@ -51,7 +58,42 @@
     mixins: [windowMixin],
     data: function () {
       return {
-        here: location.protocol + '//' + location.host
+        here: location.protocol + '//' + location.host,
+        nfcTagWriting: false
+      }
+    },
+    methods: {
+      writeNfcTag: async function (lnurl) {
+        try {
+          if (typeof NDEFReader == 'undefined') {
+            throw {
+              toString: function () {
+                return 'NFC not supported on this device and/or browser.'
+              }
+            }
+          }
+
+          const ndef = new NDEFReader()
+
+          this.nfcTagWriting = true
+          this.$q.notify({
+            message: 'Tap your NFC tag now to write the LNURLw to it'
+          })
+
+          await ndef.write(lnurl)
+
+          this.nfcTagWriting = false
+          this.$q.notify({
+            message: 'NFC Tag written successfully!'
+          })
+        } catch (error) {
+          this.nfcTagWriting = false
+          this.$q.notify({
+            message: error
+              ? error.toString()
+              : 'An unexpected error has occurred'
+          })
+        }
       }
     }
   })

lnbits/extensions/withdraw/templates/withdraw/index.html

@@ -369,6 +369,13 @@
           @click="copyText(qrCodeDialog.data.withdraw_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"