Skip to main content

Integrate Embedded Wallets with the Solana Blockchain in React Native

The Web3Auth React Native SDK v9 exposes a TransactionSigner from @solana/signers directly via useWeb3Auth().web3Auth.signer. This replaces the SolanaWallet from @web3auth/solana-provider used in v8.

Chain details for Solana​

  • 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

Installation​

No separate Solana provider package is required in v9. Install @solana/web3.js for on-chain queries:

npm install --save @solana/web3.js

SDK configuration​

Set chainNamespace: CHAIN_NAMESPACES.SOLANA in your web3authConfig.ts:

web3authConfig.ts
import {
  CHAIN_NAMESPACES,
  WEB3AUTH_NETWORK,
  type Web3AuthContextConfig,
} from '@web3auth/react-native-sdk'

const web3AuthConfig: Web3AuthContextConfig = {
  web3AuthOptions: {
    clientId: 'YOUR_CLIENT_ID',
    redirectUrl: 'yourapp://auth',
    network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
    chains: [
      {
        chainNamespace: CHAIN_NAMESPACES.SOLANA,
        chainId: '0x1', // Mainnet (use 0x2 for Testnet, 0x3 for Devnet)
        rpcTarget: 'https://api.mainnet-beta.solana.com',
        displayName: 'Solana Mainnet',
        blockExplorerUrl: 'https://explorer.solana.com',
        ticker: 'SOL',
        tickerName: 'Solana',
        logo: 'https://images.toruswallet.io/solana.svg',
      },
    ],
    defaultChainId: '0x1',
  },
}

export default web3AuthConfig

Get the signer​

After the user connects, access the signer through useWeb3Auth():

import { useWeb3Auth } from '@web3auth/react-native-sdk'
import type { TransactionSigner } from '@solana/signers'

function useSolanaSigner() {
  const { web3Auth } = useWeb3Auth()
  return web3Auth?.signer as TransactionSigner | null
}

Get accounts​

import { useWeb3Auth } from '@web3auth/react-native-sdk'
import type { TransactionSigner } from '@solana/signers'

function SolanaAddress() {
  const { web3Auth } = useWeb3Auth()
  const signer = web3Auth?.signer as TransactionSigner | null

  const address = signer ? String(signer.address) : null
  console.log('Solana address:', address)
  return <Text>{address}</Text>
}

Get balance​

import { useWeb3Auth } from '@web3auth/react-native-sdk'
import type { TransactionSigner } from '@solana/signers'
import { Connection, PublicKey, LAMPORTS_PER_SOL } from '@solana/web3.js'

async function getSolanaBalance(web3Auth: any) {
  const signer = web3Auth?.signer as TransactionSigner | null
  if (!signer) return null

  const connection = new Connection('https://api.mainnet-beta.solana.com', 'confirmed')
  const balance = await connection.getBalance(new PublicKey(String(signer.address)))
  return balance / LAMPORTS_PER_SOL
}

Sign a transaction​

import type { TransactionSigner } from '@solana/signers'
import {
  Connection,
  PublicKey,
  Transaction,
  SystemProgram,
  LAMPORTS_PER_SOL,
} from '@solana/web3.js'

async function signSolanaTransaction(signer: TransactionSigner, to: string) {
  const connection = new Connection('https://api.mainnet-beta.solana.com', 'confirmed')
  const address = new PublicKey(String(signer.address))
  const { blockhash } = await connection.getRecentBlockhash('finalized')

  const transaction = new Transaction({
    recentBlockhash: blockhash,
    feePayer: address,
  }).add(
    SystemProgram.transfer({
      fromPubkey: address,
      toPubkey: new PublicKey(to),
      lamports: 0.01 * LAMPORTS_PER_SOL,
    })
  )

  // Sign using the signer from the SDK
  const signedTransaction = await signer.signTransaction(transaction)
  console.log('Signed transaction:', signedTransaction)
  return signedTransaction
}

Send a transaction​

import type { TransactionSigner } from '@solana/signers'
import {
  Connection,
  PublicKey,
  Transaction,
  SystemProgram,
  LAMPORTS_PER_SOL,
  sendAndConfirmTransaction,
} from '@solana/web3.js'

async function sendSolanaTransaction(signer: TransactionSigner, to: string) {
  const connection = new Connection('https://api.mainnet-beta.solana.com', 'confirmed')
  const address = new PublicKey(String(signer.address))
  const block = await connection.getLatestBlockhash('finalized')

  const transaction = new Transaction({
    blockhash: block.blockhash,
    lastValidBlockHeight: block.lastValidBlockHeight,
    feePayer: address,
  }).add(
    SystemProgram.transfer({
      fromPubkey: address,
      toPubkey: new PublicKey(to),
      lamports: 0.01 * LAMPORTS_PER_SOL,
    })
  )

  const signedTransaction = await signer.signTransaction(transaction)
  const signature = await connection.sendRawTransaction(signedTransaction.serialize())
  console.log('Transaction signature:', signature)
  return signature
}

Sign a message​

import type { TransactionSigner } from '@solana/signers'
import { signBytes } from '@solana/signers'

async function signSolanaMessage(signer: TransactionSigner, message: string) {
  const encoded = new TextEncoder().encode(message)
  const signature = await signBytes(signer, encoded)
  return Buffer.from(signature).toString('base64')
}
On this page