Skip to content

Commit

Permalink
feat: POC for NFC for Pay
Browse files Browse the repository at this point in the history
  • Loading branch information
Nicolas Burtey committed Feb 15, 2024
1 parent 8531bfb commit 03a58a2
Show file tree
Hide file tree
Showing 4 changed files with 286 additions and 3 deletions.
102 changes: 101 additions & 1 deletion apps/pay/components/ParsePOSPayment/Receive-Invoice.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -17,9 +17,12 @@ 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"
import NFCComponent from "./nfc"

interface Props {
recipientWalletCurrency?: string
Expand Down Expand Up @@ -210,6 +213,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
Expand Down Expand Up @@ -242,6 +338,8 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
)
}

console.log("invoice", invoice)

return (
<div className={styles.invoice_container}>
{recipientWalletCurrency === "USD" && (
Expand All @@ -254,6 +352,8 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
</div>
)}
<div>
<NFCComponent paymentRequest={invoice?.paymentRequest} />

{data ? (
<>
<div
Expand Down
132 changes: 132 additions & 0 deletions apps/pay/components/ParsePOSPayment/nfc.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import React, { useState, useEffect } from "react"

import { getParams } from "js-lnurl"

type Props = {
paymentRequest: string | undefined
}

function NFCComponent({ paymentRequest }: Props) {
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 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")
}
}

useEffect(() => {
// Check NFC permission on component mount
navigator.permissions.query({ name: "nfc" }).then((result) => {
if (result.state === "granted") {
setHasNFCPermission(true)
} else {
setHasNFCPermission(false)
}

// Optional: Listen for changes in permission
result.onchange = () => {
if (result.state === "granted") {
setHasNFCPermission(true)
} else {
setHasNFCPermission(false)
}
}
})
}, [])

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 (!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", 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])

return (
<div>
{!hasNFCPermission && <button onClick={handleNFCScan}>Start NFC Scan</button>}
{nfcMessage && <div>LNURL: {nfcMessage}</div>}
</div>
)
}

export default NFCComponent
1 change: 1 addition & 0 deletions apps/pay/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit 03a58a2

Please sign in to comment.