Integrate Solana Pay with Embedded Wallets

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 the 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>
...