feat: POC for NFC for Pay

apps/pay/pages/index.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import Card from "react-bootstrap/Card"
 import Col from "react-bootstrap/Col"
 import Container from "react-bootstrap/Container"
@@ -45,8 +45,61 @@ function Home() {
     )
   }
 
+  const [nfcMessage, setNfcMessage] = useState("")
+
+  const checkForLnurl = (text) => {
+    return text.toLowerCase().includes("lnurl")
+  }
+
+  const decodeNDEFRecord = (record) => {
+    // Ensure that the record's data is an instance of ArrayBuffer
+    if (record.data instanceof ArrayBuffer) {
+      const decoder = new TextDecoder(record.encoding || "utf-8")
+      return decoder.decode(record.data)
+    } else {
+      // If it's not an ArrayBuffer, it might be a DataView or another typed array.
+      // In that case, we can create a new Uint8Array from the buffer of the DataView.
+      const decoder = new TextDecoder(record.encoding || "utf-8")
+      return decoder.decode(new Uint8Array(record.data.buffer))
+    }
+  }
+
+  const handleNFCScan = () => {
+    if ("NDEFReader" in window) {
+      const ndef = new NDEFReader()
+      ndef
+        .scan()
+        .then(() => {
+          console.log("NFC scan started successfully.")
+
+          ndef.onreading = (event) => {
+            console.log("NFC tag read.")
+            const record = event.message.records[0]
+            const text = decodeNDEFRecord(record)
+
+            if (checkForLnurl(text)) {
+              setNfcMessage(text)
+              // Handle your "lnurl" logic here...
+            }
+          }
+
+          ndef.onreadingerror = () => {
+            console.log("Cannot read data from the NFC tag. Try another one?")
+          }
+        })
+        .catch((error) => {
+          console.log(`Error! Scan failed to start: ${error}.`)
+        })
+    } else {
+      console.log("NFC is not supported")
+    }
+  }
+
   return (
     <Container>
+      <button onClick={handleNFCScan}>Start NFC Scan</button>
+      {nfcMessage && <div>LNURL: {nfcMessage}</div>}
+
       <br />
       <Row>
         <Col>
@@ -68,8 +121,8 @@ function Home() {
                             {error
                               ? "Unavailable"
                               : loading
-                                ? "Loading..."
-                                : data.globals.nodesIds[0]}
+                              ? "Loading..."
+                              : data.globals.nodesIds[0]}
                           </p>
                         </ListGroup.Item>
                         <ListGroup.Item>