For AI agents: a documentation index is available at /llms.txt. A markdown version of this page is available at the same URL with .md appended (or via Accept: text/markdown).
Skip to main content

Ethereum hooks (Wagmi)

The @web3auth/react-native-sdk/wagmi entry point connects the embedded EVM wallet to Wagmi 3. After a user signs in on an EVM chain, standard Wagmi hooks such as useConnection, useBalance, useSignMessage, and useSendTransaction use the Embedded Wallets provider.

The SDK builds the Wagmi config for you: it derives the EVM chains and transports from your Embedded Wallets chain configuration and registers a React Native connector that doesn't depend on window or injected wallet discovery.

Install​

npm install wagmi@^3 @wagmi/core@^3 viem@^2 @tanstack/react-query@^5

Set up WagmiProvider​

Nest the providers in this order: your own QueryClientProvider, then Web3AuthProvider, then WagmiProvider from @web3auth/react-native-sdk/wagmi.

App.tsx
import AsyncStorage from '@react-native-async-storage/async-storage'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import * as WebBrowser from '@toruslabs/react-native-web-browser'
import { Web3AuthProvider } from '@web3auth/react-native-sdk'
import { WagmiProvider } from '@web3auth/react-native-sdk/wagmi'
import EncryptedStorage from 'react-native-encrypted-storage'
import { createStorage } from 'wagmi'

import web3AuthConfig from './web3authConfig'

const queryClient = new QueryClient()

const storage = createStorage({
  storage: {
    getItem: key => AsyncStorage.getItem(key),
    setItem: async (key, value) => {
      await AsyncStorage.setItem(key, value)
    },
    removeItem: async key => {
      await AsyncStorage.removeItem(key)
    },
  },
})

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Web3AuthProvider webBrowser={WebBrowser} storage={EncryptedStorage} config={web3AuthConfig}>
        <WagmiProvider config={{ storage }}>
          <Screen />
        </WagmiProvider>
      </Web3AuthProvider>
    </QueryClientProvider>
  )
}

WagmiProvider accepts the standard Wagmi provider props except config. Its config prop takes only Wagmi options the SDK doesn't own, such as storage, pollingInterval, and batch. The SDK sets chains, transports, connectors, and client.

Use Wagmi hooks​

import { useWeb3Auth } from '@web3auth/react-native-sdk'
import { Button, Text, View } from 'react-native'
import { useBalance, useConnection, useSignMessage } from 'wagmi'

function HomeView() {
  const { isConnected } = useWeb3Auth()
  const { address } = useConnection()
  const { data: balance } = useBalance({ address })
  const { signMessageAsync } = useSignMessage()

  if (!isConnected) return null

  return (
    <View>
      <Text>{address}</Text>
      <Text>
        {balance?.formatted} {balance?.symbol}
      </Text>
      <Button title="Sign message" onPress={() => signMessageAsync({ message: 'Hello' })} />
    </View>
  )
}

Behavior​

  • Only EVM sessions connect to Wagmi. Solana sessions don't.
  • Sign in and sign out with the Embedded Wallets hooks (useWeb3AuthConnect, useWeb3AuthDisconnect). A disconnect started from Wagmi also signs the user out of Embedded Wallets, and an Embedded Wallets sign-out disconnects Wagmi.
  • For Expo, use the Babel configuration from Get started, which the Wagmi dependencies need on Hermes.
On this page