feat: POC for NFC for Pay

apps/pay/components/ParsePOSPayment/Receive-Invoice.tsx

@@ -2,7 +2,7 @@
 // TODO: remove eslint-disable, the logic likely needs to be reworked
 import copy from "copy-to-clipboard"
 import { useRouter } from "next/router"
-import React, { useCallback } from "react"
+import React, { useCallback, useState } from "react"
 import Image from "react-bootstrap/Image"
 import OverlayTrigger from "react-bootstrap/OverlayTrigger"
 import Tooltip from "react-bootstrap/Tooltip"
@@ -17,6 +17,8 @@ import { ACTION_TYPE } from "../../pages/_reducer"
 import PaymentOutcome from "../PaymentOutcome"
 import { Share } from "../Share"
 
+import { getParams } from "js-lnurl"
+
 import { safeAmount } from "../../utils/utils"
 
 import styles from "./parse-payment.module.css"
@@ -210,6 +212,99 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
     }
   }
 
+  const [nfcMessage, setNfcMessage] = useState("")
+
+  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 (text.toLowerCase().includes("lnurl")) {
+              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")
+    }
+  }
+
+  React.useEffect(() => {
+    console.log("nfcMessage", nfcMessage)
+
+    setNfcMessage(
+      "lnurlw://boltcard.tiankii.app/v1/lnurl/b1pizbxx0ikdivim5tpt9csy9kezxi?p=960C0DDCE939D1295C301D6B1A65BE78&c=CDFC90874BCE5AF2",
+    )
+  }, [])
+
+  React.useEffect(() => {
+    ;(async () => {
+      if (nfcMessage) {
+        const lnurlParams = await getParams(nfcMessage)
+
+        console.log("lnurlParams", lnurlParams)
+
+        if (!("tag" in lnurlParams && lnurlParams.tag === "withdrawRequest")) {
+          console.error("not a lnurl withdraw tag")
+          return
+        }
+
+        if (!invoice?.paymentRequest) {
+          console.error("no invoice to redeem")
+          return
+        }
+
+        const { callback, k1 } = lnurlParams
+
+        const urlObject = new URL(callback)
+        const searchParams = urlObject.searchParams
+        searchParams.set("k1", k1)
+        searchParams.set("pr", invoice?.paymentRequest)
+
+        const url = urlObject.toString()
+
+        const result = await fetch(url)
+        if (result.ok) {
+          const lnurlResponse = await result.json()
+          if (lnurlResponse?.status?.toLowerCase() !== "ok") {
+            console.error(lnurlResponse, "error with redeeming")
+          }
+        } else {
+          console.error(result.text(), "error with submitting withdrawalRequest")
+        }
+      }
+    })()
+  }, [nfcMessage, invoice])
+
   const copyInvoice = () => {
     if (!invoice?.paymentRequest) {
       return
@@ -242,6 +337,8 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
     )
   }
 
+  console.log("invoice", invoice)
+
   return (
     <div className={styles.invoice_container}>
       {recipientWalletCurrency === "USD" && (
@@ -254,6 +351,9 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
         </div>
       )}
       <div>
+        <button onClick={handleNFCScan}>Start NFC Scan</button>
+        {nfcMessage && <div>LNURL: {nfcMessage}</div>}
+
         {data ? (
           <>
             <div

apps/pay/package.json

@@ -24,6 +24,7 @@
     "graphql-ws": "^5.14.0",
     "html2canvas": "^1.4.1",
     "ioredis": "^5.3.1",
+    "js-lnurl": "^0.6.0",
     "lnurl-pay": "^1.0.1",
     "lodash.debounce": "^4.0.8",
     "next": "^13.4.19",

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>