Integrate Solana Pay with Embedded Wallets

import './index.css';

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

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Web3AuthProvider config={web3AuthContextConfig}>
    <SolanaProvider>
      <App />
    </SolanaProvider>
  </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://developer.metamask.io

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

export default web3AuthContextConfig

import { address } from '@solana/kit';
import { useSolanaWallet } from '@web3auth/modal/react/solana';
import { useState } from 'react';

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

  async function fetchBalance() {
    if (!rpc || !accounts?.length) return;

    setIsLoading(true);
    setError(null);
    try {
      const { value } = await rpc.getBalance(address(accounts[0])).send();
      setBalance(`${Number(value) / 1e9} SOL`);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to fetch balance.');
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <div>
      <h2>Balance</h2>
      {balance && <div>{balance}</div>}
      <button onClick={() => void fetchBalance()} type='button' className='card' disabled={isLoading}>
        {isLoading ? 'Fetching...' : 'Fetch Balance'}
      </button>
      {error && <div className='error'>Error: {error}</div>}
    </div>
  );
}

import { address, generateKeyPairSigner } from '@solana/kit'
import { createQR, encodeURL } from '@solana/pay'
import { useSolanaWallet } from '@web3auth/modal/react/solana'

import { address, generateKeyPairSigner } from '@solana/kit';
import { createQR, encodeURL } from '@solana/pay';
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 = async () => {
    try {
      if (!accounts?.[0]) {
        setError('No wallet connected');
        return;
      }

      setIsLoading(true);
      setError(null);
      // set the parameter of the transfer
      const recipient = address(accounts[0]);
      const amount = amountToSend;
      // reference should be a unique ID for the payment
      const reference = (await generateKeyPairSigner()).address;
      // 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={() => void 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>
...