Integrate Solana Pay with Web3Auth

import "./index.css";

import ReactDOM from "react-dom/client";
import { Web3AuthProvider } from "@web3auth/modal/react";
import web3AuthContextConfig from "./web3authContext";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <Web3AuthProvider config={web3AuthContextConfig}>
    <App />
  </Web3AuthProvider>
);

import { WEB3AUTH_NETWORK } from "@web3auth/modal";
import { type Web3AuthContextConfig } from "@web3auth/modal/react";

// Dashboard Registration
const clientId =
  "BFcLTVqWlTSpBBaELDPSz4_LFgG8Nf8hEltPlf3QeUG_88GDrQSw82fSjjYj5x4F3ys3ghMq8-InU7Azx7NbFSs"; // get from https://dashboard.web3auth.io

// Instantiate SDK
const web3AuthContextConfig: Web3AuthContextConfig = {
  web3AuthOptions: {
    clientId,
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
  },
};

export default web3AuthContextConfig;

import { useSolanaWallet } from "@web3auth/modal/react/solana";
import {
  LAMPORTS_PER_SOL,
  PublicKey,
} from "@solana/web3.js";
import { useEffect, useState } from "react";

export function Balance() {
  const { accounts, connection } = useSolanaWallet();
  const [balance, setBalance] = useState<number | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchBalance = async () => {
    if (connection && accounts && accounts.length > 0) {
      try {
        setIsLoading(true);
        setError(null);
        const publicKey = new PublicKey(accounts[0]);
        const balance = await connection.getBalance(publicKey);
        setBalance(balance);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Unknown error");
      } finally {
        setIsLoading(false);
      }
    }
  };

  useEffect(() => {
    fetchBalance();
  }, [connection, accounts]);

  return (
    <div>
      <h2>Balance</h2>
      <div>
        {balance !== null && `${balance / LAMPORTS_PER_SOL} SOL`}
      </div>
        {isLoading && <span className="loading">Loading...</span>}
        {error && <span className="error">Error: {error}</span>}
      <button onClick={fetchBalance} type="submit" className="card">
          Fetch Balance
      </button>
    </div>
  )
}

import { createQR } from "@solana/pay";
import { Keypair, PublicKey } from "@solana/web3.js";
import BigNumber from "bignumber.js";
import { useSolanaWallet } from "@web3auth/modal/react/solana";

import { Keypair, PublicKey } from "@solana/web3.js";
import { createQR, encodeURL } from "@solana/pay";
import BigNumber from "bignumber.js";
import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { useSolanaWallet } from "@web3auth/modal/react/solana";

export function SolanaPay() {
    const { accounts } = useSolanaWallet();
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [amountToSend, setAmountToSend] = useState(0);
    const [showModal, setShowModal] = useState(false);
    const [qrUrl, setQrUrl] = useState<string>("");
    const qrRef = useRef<HTMLDivElement>(null);

    const generateQrCode = () => {
        try {
            if (!accounts?.[0]) {
                setError("No wallet connected");
                return;
            }

            setIsLoading(true);
            setError(null);
            // set the parameter of the transfer
            const recipient = new PublicKey(accounts?.[0]!);
            const amount = new BigNumber(amountToSend);
            // reference should be a unique ID for the payment
            const reference = new Keypair().publicKey;
            // Label and message are optional. They will be shown in wallets when users scan it but won't show on chain
            const label = "MetaMask Embedded Wallet x Solana Pay Demo";
            const message = "Thanks for Trying Solana Pay!";
            // memo is optional and will be included in the onchain transaction
            const memo = "Thanks for Trying Solana Pay!";
            // create the URL
            const url = encodeURL({
                recipient,
                amount,
                reference,
                label,
                message,
                memo,
            });

            setQrUrl(url.toString());
            setShowModal(true);
        } catch (err) {
            setError(err instanceof Error ? err.message : "Failed to generate QR code");
        } finally {
            setIsLoading(false);
        }
    };
    // Generate QR code when modal opens and URL is available
    useEffect(() => {
        if (showModal && qrUrl && qrRef.current) {
            qrRef.current.innerHTML = "";
            try {
                const qr = createQR(qrUrl, 300, "white");
                qr.append(qrRef.current);
            } catch (err) {
                setError("Failed to create QR code");
            }
        }
    }, [showModal, qrUrl]);

    const closeModal = () => {
        setShowModal(false);
        setQrUrl("");
        setError(null);
    };

    return (
      <>
        <div>
          <h2>Solana Pay QR</h2>
          <div className="flex flex-col items-center gap-4">
            <input
              type="number"
              placeholder="Enter SOL amount"
              onChange={(e) => setAmountToSend(Number(e.target.value))}
              className="px-4 py-2 border rounded-lg text-black"
              step="0.01"
              min="0"
            />
            <button
              onClick={generateQrCode}
              className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
              disabled={isLoading || amountToSend <= 0}
            >
              {isLoading ? "Generating..." : "Generate Payment QR"}
            </button>

            {/* Error Display */}
            {error && !showModal && (
              <div className="text-red-500 text-sm mt-2">
                Error: {error}
              </div>
            )}
          </div>
        </div>
...