feat: adding boltcard for the POS behind a beta flag

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

@@ -22,6 +22,7 @@ import { extractSearchParams, safeAmount } from "../../utils/utils"
 import LoadingComponent from "../Loading"
 
 import styles from "./parse-payment.module.css"
+import NFCComponent from "./nfc"
 
 interface Props {
   recipientWalletCurrency?: string
@@ -254,6 +255,8 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
         </div>
       )}
       <div>
+        <NFCComponent paymentRequest={invoice?.paymentRequest} />
+
         {data ? (
           <>
             <div

apps/pay/components/ParsePOSPayment/nfc.tsx

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from "react"
+
+import { getParams } from "js-lnurl"
+
+type Props = {
+  paymentRequest: string | undefined
+}
+
+function NFCComponent({ paymentRequest }: Props) {
+  const params = new URLSearchParams(window.location.search)
+  const isBeta = params.get("beta") === "true"
+
+  const [hasNFCPermission, setHasNFCPermission] = useState(false)
+  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 activateNfcScan = async () => {
+    handleNFCScan()
+    alert(
+      "Boltcard is now active. There will be no need to active it again. Please tap your card to redeem the payment",
+    )
+  }
+
+  const handleNFCScan = () => {
+    ;(async () => {
+      if (!("NDEFReader" in window)) {
+        console.error("NFC is not supported")
+        return
+      }
+
+      console.log("NFC is supported, start reading")
+
+      const ndef = new NDEFReader()
+
+      try {
+        await ndef.scan()
+
+        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)
+          } else {
+            console.error("Not a lnurl tag")
+          }
+        }
+
+        ndef.onreadingerror = () => {
+          console.error("Cannot read data from the NFC tag. Try another one?")
+        }
+      } catch (error) {
+        console.error(`Error! Scan failed to start: ${error}.`)
+      }
+    })()
+  }
+
+  useEffect(() => {
+    ;(async () => {
+      if (!("permissions" in navigator)) {
+        console.error("Permissions API not supported")
+        return
+      }
+
+      const result = await navigator.permissions.query({ name: "nfc" })
+
+      console.log("result permission query", result)
+
+      if (result.state === "granted") {
+        setHasNFCPermission(true)
+      } else {
+        setHasNFCPermission(false)
+      }
+
+      result.onchange = () => {
+        if (result.state === "granted") {
+          setHasNFCPermission(true)
+        } else {
+          setHasNFCPermission(false)
+        }
+      }
+    })()
+  }, [setHasNFCPermission])
+
+  React.useEffect(() => {
+    console.log("hasNFCPermission", hasNFCPermission)
+
+    if (hasNFCPermission) {
+      handleNFCScan()
+    }
+  }, [hasNFCPermission])
+
+  React.useEffect(() => {
+    ;(async () => {
+      if (!nfcMessage) {
+        console.error("no nfc message")
+        return
+      }
+
+      if (!paymentRequest) {
+        console.error("no invoice to redeem")
+        return
+      }
+
+      const lnurlParams = await getParams(nfcMessage)
+
+      if (!("tag" in lnurlParams && lnurlParams.tag === "withdrawRequest")) {
+        console.error("not a lnurl withdraw tag")
+        return
+      }
+
+      const { callback, k1 } = lnurlParams
+
+      const urlObject = new URL(callback)
+      const searchParams = urlObject.searchParams
+      searchParams.set("k1", k1)
+      searchParams.set("pr", 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, paymentRequest])
+
+  if (!isBeta) {
+    return null
+  }
+
+  return (
+    <div>
+      {!hasNFCPermission && <button onClick={activateNfcScan}>Activate boltcard</button>}
+      {hasNFCPermission && <div>Boltcard scanning is active</div>}
+      {nfcMessage && <div>LNURL: {nfcMessage}</div>}
+    </div>
+  )
+}
+
+export default NFCComponent

apps/pay/package.json

@@ -25,6 +25,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": "^14.1.0",