/** @jsxImportSource https://esm.sh/react */ import { createQR, encodeURL, findTransactionSignature, FindTransactionSignatureError, } from "https://esm.sh/@solana/pay?bundle-deps"; import { Cluster, clusterApiUrl, Connection, Keypair, Message, PublicKey, Transaction, } from "https://esm.sh/@solana/web3.js?bundle-deps"; import BigNumber from "https://esm.sh/bignumber.js"; import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function Home() { const [storeName, setStoreName] = useState(""); const [description, setDescription] = useState(""); const [storeAddress, setStoreAddress] = useState(""); const [paymentAmount, setPaymentAmount] = useState(0); const [paymentCurrency, setPaymentCurrency] = useState("SOL"); const [memo, setMemo] = useState(""); const [isGenerated, setIsGenerated] = useState(false); let ref = useRef(null); const connection = new Connection("https://api.devnet.solana.com"); const showQR = (e) => { e.preventDefault(); setIsGenerated(true); }; const showForm = (e) => { e.preventDefault(); setIsGenerated(false); if (ref.current) { ref.current.innerHTML = ""; } }; useEffect(() => { if (isGenerated) { const payment_recipient = new PublicKey(storeAddress); const payment_amount = new BigNumber(paymentAmount); console.log("f" + payment_amount); const payment_reference = new Keypair().publicKey; const payment_label = storeName; const payment_message = description; let r = (Math.random() + 1).toString(36).substring(7); const payment_memo = "#" + r; console.log( payment_recipient, payment_amount, payment_reference, payment_label, payment_message, payment_memo, ); const url = encodeURL({ recipient: payment_recipient, amount: payment_amount, reference: payment_reference, label: payment_label, message: payment_message, memo: payment_memo, splToken: paymentCurrency === "USDC" && new PublicKey("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"), }); console.log(url); const qrCode = createQR(url); console.log(qrCode); console.log(ref.current); if (ref.current && payment_amount.isGreaterThan(0)) { qrCode.append(ref.current); } } }, [isGenerated]); return (

Solana Pay QR Code Generator

{!isGenerated ? (

Store Name* setStoreName(e.target.value)} value={storeName} /> {storeName.length < 1 ? (

Please fill out this field.

) : null}

Description setDescription(e.target.value)} value={description} />

Wallet Address* setStoreAddress(e.target.value)} value={storeAddress} /> {storeAddress.length <= 43 ? (

Please enter a valid Solana address

) : null}

Payment Amount* setPaymentAmount(parseFloat(e.target.value))} value={paymentAmount} />

Currency

Memo

) : (

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Solana Pay QR Code Generator

`, { headers: { "content-type": "text/html", }, }, ); }

solanaPayDemo