> For the complete documentation index, see [llms.txt](/llms.txt).

# Integrate Embedded Wallets with the Solana Blockchain in React

While using the Embedded Wallets React SDK, you get access to native Solana hooks. Pair them with [@solana/kit](https://www.npmjs.com/package/@solana/kit) for transaction building, program interactions, and account queries.

## Chain details for Solana[​](#chain-details-for-solana "Direct link to Chain details for Solana")

- Mainnet
- Testnet
- Devnet

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

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

- 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[​](#react-solana-integration "Direct link to 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
- Yarn
- pnpm
- Bun

```
npm install @solana/kit @solana-program/system @solana/react-hooks

```

```
yarn add @solana/kit @solana-program/system @solana/react-hooks

```

```
pnpm add @solana/kit @solana-program/system @solana/react-hooks

```

```
bun add @solana/kit @solana-program/system @solana/react-hooks

```

## Solana hooks[​](#solana-hooks "Direct link to 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[​](#hook-usage-examples "Direct link to Hook usage examples")

### Get Solana wallet[​](#get-solana-wallet "Direct link to 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[​](#fetch-balance "Direct link to Fetch balance")

getBalance.tsx

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

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

  async function fetchBalance() {
    const rpcTarget = web3Auth?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts?.length) return

    setIsLoading(true)
    setError(null)
    try {
      const rpc = createSolanaRpc(rpcTarget)
      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>
  )
}

```

### Sign message[​](#sign-message "Direct link to 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')?.toString().trim()
    if (!message) return
    void signMessage(message)
  }

  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[​](#sign-transaction "Direct link to Sign transaction")

signTransaction.tsx

```
import { FormEvent, useState } from 'react'
import { useWeb3Auth } from '@web3auth/modal/react'
import { useSolanaWallet, useSignTransaction } from '@web3auth/modal/react/solana'

import { buildSolTransferTransaction } from '../solana/transfer'

export function SignTransaction() {
  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()
  const {
    data: signedTransaction,
    error,
    loading: isPending,
    signTransaction,
  } = useSignTransaction()
  const [formError, setFormError] = useState<string | null>(null)

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setFormError(null)

    const rpcTarget = web3Auth?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts?.length) return

    const form = new FormData(e.currentTarget)
    const to = form.get('address')?.toString().trim() ?? ''
    const amountSol = Number(form.get('value'))
    if (!to || !Number.isFinite(amountSol) || amountSol <= 0) {
      setFormError('Enter a valid recipient address and a positive amount.')
      return
    }

    try {
      const transaction = await buildSolTransferTransaction(rpcTarget, accounts[0], to, amountSol)
      await signTransaction(transaction)
    } catch (err) {
      setFormError(err instanceof Error ? err.message : 'Failed to sign transaction.')
    }
  }

  return (
    <div>
      <h2>Sign Transaction</h2>
      <form onSubmit={submit}>
        <input name="address" placeholder="Recipient address" required />
        <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" min="0" required />
        <button disabled={isPending} type="submit">
          {isPending ? 'Signing...' : 'Sign'}
        </button>
      </form>
      {signedTransaction && <div className="hash">Signed transaction: {signedTransaction}</div>}
      {(formError ?? error?.message) && (
        <div className="error">Error: {formError ?? error?.message}</div>
      )}
    </div>
  )
}

```

solana/transfer.ts

```
import type { Transaction } from '@solana/kit'
import {
  address,
  appendTransactionMessageInstruction,
  compileTransaction,
  createNoopSigner,
  createSolanaRpc,
  createTransactionMessage,
  lamports,
  pipe,
  setTransactionMessageFeePayerSigner,
  setTransactionMessageLifetimeUsingBlockhash,
} from '@solana/kit'
import { getTransferSolInstruction } from '@solana-program/system'

export async function buildSolTransferTransaction(
  rpcTarget: string,
  from: string,
  to: string,
  amountSol: number
): Promise<Transaction> {
  const rpc = createSolanaRpc(rpcTarget)
  const { value: latestBlockhash } = await rpc.getLatestBlockhash().send()
  const feePayer = createNoopSigner(address(from))

  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.round(amountSol * 1e9))),
        }),
        m
      )
  )

  return compileTransaction(message)
}

```

### Sign and send transaction[​](#sign-and-send-transaction "Direct link to Sign and send transaction")

sendVersionedTransaction.tsx

```
import { FormEvent, useState } from 'react'
import { useWeb3Auth } from '@web3auth/modal/react'
import { useSolanaWallet, useSignAndSendTransaction } from '@web3auth/modal/react/solana'

import { buildSolTransferTransaction } from '../solana/transfer'

export function SendVersionedTransaction() {
  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()
  const {
    data: signature,
    error,
    loading: isPending,
    signAndSendTransaction,
  } = useSignAndSendTransaction()
  const [formError, setFormError] = useState<string | null>(null)

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setFormError(null)

    const rpcTarget = web3Auth?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts?.length) return

    const form = new FormData(e.currentTarget)
    const to = form.get('address')?.toString().trim() ?? ''
    const amountSol = Number(form.get('value'))
    if (!to || !Number.isFinite(amountSol) || amountSol <= 0) {
      setFormError('Enter a valid recipient address and a positive amount.')
      return
    }

    try {
      const transaction = await buildSolTransferTransaction(rpcTarget, accounts[0], to, amountSol)
      await signAndSendTransaction(transaction)
    } catch (err) {
      setFormError(err instanceof Error ? err.message : 'Failed to send transaction.')
    }
  }

  return (
    <div>
      <h2>Send Transaction</h2>
      <form onSubmit={submit}>
        <input name="address" placeholder="Recipient address" required />
        <input name="value" placeholder="Amount (SOL)" type="number" step="0.01" min="0" required />
        <button disabled={isPending} type="submit">
          {isPending ? 'Sending...' : 'Send'}
        </button>
      </form>
      {signature && <div className="hash">Transaction signature: {signature}</div>}
      {(formError ?? error?.message) && (
        <div className="error">Error: {formError ?? error?.message}</div>
      )}
    </div>
  )
}

```