Integrate Embedded Wallets with the Solana Blockchain in React

While using the Web3Auth React SDK, you get access to native Solana hooks. Pair them with @solana/kit for transaction building, program interactions, and account queries.

Chain details for Solana

Mainnet

• Chain Namespace: SOLANA
• Chain ID: 0x1
• Public RPC URL: https://api.mainnet-beta.solana.com (avoid public RPC in production; prefer managed services)
• Display Name: Solana Mainnet
• Block Explorer Link: https://explorer.solana.com
• Ticker: SOL
• Ticker Name: Solana
• Logo: https://images.toruswallet.io/solana.svg

Testnet

• Chain Namespace: SOLANA
• Chain ID: 0x2
• Public RPC URL: https://api.testnet.solana.com (avoid public RPC in production; prefer managed services)
• Display Name: Solana Testnet
• Block Explorer Link: https://explorer.solana.com
• Ticker: SOL
• Ticker Name: Solana
• Logo: https://images.toruswallet.io/solana.svg

Devnet

• Chain Namespace: SOLANA
• Chain ID: 0x3
• Public RPC URL: https://api.devnet.solana.com (avoid public RPC in production; prefer managed services)
• Display Name: Solana Devnet
• Block Explorer Link: https://explorer.solana.com?cluster=devnet
• Ticker: SOL
• Ticker Name: Solana
• Logo: https://images.toruswallet.io/solana.svg

React Solana integration

Install @solana/kit and @solana-program/system to build and sign Solana transactions with the Embedded Wallets React SDK.

info

Web3Auth provides React hooks for common Solana wallet operations. Import them from @web3auth/modal/react/solana.

npm

npm install @solana/kit @solana-program/system

Yarn

yarn add @solana/kit @solana-program/system

pnpm

pnpm add @solana/kit @solana-program/system

Bun

bun add @solana/kit @solana-program/system

Solana hooks

Hook Name	Description
useSignAndSendTransaction	Sign and send a Solana transaction.
useSignMessage	Sign a message with the Solana wallet.
useSignTransaction	Sign a Solana transaction (without sending).
useSolanaWallet	Access Solana accounts, RPC client, and wallet.

Hook usage examples

Get Solana wallet

import { useSolanaWallet } from '@web3auth/modal/react/solana'

function SolanaWallet() {
  const { accounts, rpc } = useSolanaWallet()

  return (
    <div>
      <h2>Solana wallet</h2>
      {accounts?.[0] && <p>Address: {accounts[0]}</p>}
      <p>RPC ready: {rpc ? 'Yes' : 'No'}</p>
    </div>
  )
}

Fetch balance

getBalance.tsx

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

export function Balance() {
  const { accounts, rpc } = useSolanaWallet()
  const [balance, setBalance] = useState<number | null>(null)

  const fetchBalance = async () => {
    if (!rpc || !accounts?.length) return
    const { value } = await rpc.getBalance(address(accounts[0])).send()
    setBalance(Number(value) / 1e9)
  }

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

  return (
    <div>
      {balance !== null && <p>{balance} SOL</p>}
      <button onClick={fetchBalance} type="button">
        Fetch balance
      </button>
    </div>
  )
}

Sign message

signMessage.tsx

import { FormEvent } from 'react'
import { useSignMessage } from '@web3auth/modal/react/solana'

export function SignMessage() {
  const { signMessage, loading, error, data } = useSignMessage()

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const formData = new FormData(e.target as HTMLFormElement)
    const message = formData.get('message')
    signMessage(message!.toString())
  }

  return (
    <form onSubmit={submit}>
      <input name="message" placeholder="Message" required />
      <button disabled={loading} type="submit">
        {loading ? 'Signing...' : 'Sign message'}
      </button>
      {data && <p>Message hash: {data}</p>}
      {error && <p>Error: {error.message}</p>}
    </form>
  )
}

Sign transaction

signTransaction.tsx

import { FormEvent } from 'react'
import {
  address,
  appendTransactionMessageInstruction,
  compileTransaction,
  createNoopSigner,
  createTransactionMessage,
  lamports,
  pipe,
  setTransactionMessageFeePayerSigner,
  setTransactionMessageLifetimeUsingBlockhash,
} from '@solana/kit'
import { getTransferSolInstruction } from '@solana-program/system'
import { useSolanaWallet, useSignTransaction } from '@web3auth/modal/react/solana'

export function SignTransaction() {
  const { signTransaction, loading, error, data } = useSignTransaction()
  const { accounts, rpc } = useSolanaWallet()

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const formData = new FormData(e.target as HTMLFormElement)
    const to = formData.get('address') as string
    const value = formData.get('value') as string

    if (!rpc || !accounts?.length) return

    const { value: latestBlockhash } = await rpc.getLatestBlockhash().send()
    const feePayer = createNoopSigner(address(accounts[0]))
    const message = pipe(
      createTransactionMessage({ version: 0 }),
      m => setTransactionMessageFeePayerSigner(feePayer, m),
      m => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),
      m =>
        appendTransactionMessageInstruction(
          getTransferSolInstruction({
            source: feePayer,
            destination: address(to),
            amount: lamports(BigInt(Math.floor(Number(value) * 1e9))),
          }),
          m
        )
    )

    signTransaction(compileTransaction(message))
  }

  return (
    <form onSubmit={submit}>
      <input name="address" placeholder="Address" required />
      <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" required />
      <button disabled={loading} type="submit">
        {loading ? 'Signing...' : 'Sign transaction'}
      </button>
      {data && <p>Signed transaction: {String(data)}</p>}
      {error && <p>Error: {error.message}</p>}
    </form>
  )
}

Sign and send transaction

sendVersionedTransaction.tsx

import { FormEvent } from 'react'
import {
  address,
  appendTransactionMessageInstruction,
  compileTransaction,
  createNoopSigner,
  createTransactionMessage,
  lamports,
  pipe,
  setTransactionMessageFeePayerSigner,
  setTransactionMessageLifetimeUsingBlockhash,
} from '@solana/kit'
import { getTransferSolInstruction } from '@solana-program/system'
import { useSolanaWallet, useSignAndSendTransaction } from '@web3auth/modal/react/solana'

export function SignAndSendTransaction() {
  const { signAndSendTransaction, loading, error, data } = useSignAndSendTransaction()
  const { accounts, rpc } = useSolanaWallet()

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const formData = new FormData(e.target as HTMLFormElement)
    const to = formData.get('address') as string
    const value = formData.get('value') as string

    if (!rpc || !accounts?.length) return

    const { value: latestBlockhash } = await rpc.getLatestBlockhash().send()
    const feePayer = createNoopSigner(address(accounts[0]))
    const message = pipe(
      createTransactionMessage({ version: 0 }),
      m => setTransactionMessageFeePayerSigner(feePayer, m),
      m => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),
      m =>
        appendTransactionMessageInstruction(
          getTransferSolInstruction({
            source: feePayer,
            destination: address(to),
            amount: lamports(BigInt(Math.floor(Number(value) * 1e9))),
          }),
          m
        )
    )

    signAndSendTransaction(compileTransaction(message))
  }

  return (
    <form onSubmit={submit}>
      <input name="address" placeholder="Address" required />
      <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" required />
      <button disabled={loading} type="submit">
        {loading ? 'Sending...' : 'Sign and send'}
      </button>
      {data && <p>Transaction hash: {data}</p>}
      {error && <p>Error: {error.message}</p>}
    </form>
  )
}