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

# Integrate Embedded Wallets with the Base Blockchain in React

While using the Web3Auth React SDK, you get access to the Web3Auth Hooks. You can pair it up with the Wagmi hooks to make EVM based blockchain calls, like getting user's `account`, fetch `balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract, etc. We have highlighted a few here for getting you started quickly on that.

## Chain details for Base[​](#chain-details-for-base "Direct link to Chain details for Base")

- Mainnet
- Sepolia Testnet

- **Chain ID:** 0x2105
- **RPC URL:** You can use our bundled RPC service from Infura, or your own choice of RPC service for production.
- **Display Name:** Base Mainnet
- **Block Explorer Link:** `https://basescan.org`
- **Ticker:** ETH
- **Ticker Name:** Ethereum

- **Chain ID:** 0x14a34
- **Public RPC URL:** `https://sepolia.base.org`
- **Display Name:** Base Sepolia Testnet
- **Block Explorer Link:** `https://sepolia.basescan.org`
- **Ticker:** ETH
- **Ticker Name:** Ethereum

## React Wagmi integration[​](#react-wagmi-integration "Direct link to React Wagmi integration")

You need to install the `wagmi` and `@tanstack/react-query` packages and use the Embedded Wallets implementation of `WagmiProvider` for configuration.

info

The Embedded Wallets implementation of `WagmiProvider` is a custom implementation that is used to integrate with the Embedded Wallets/Web3Auth Modal SDK. It is a wrapper around the `WagmiProvider` that makes it compatible.

With this implementation, you can use the Wagmi hooks, however **no external connectors are supported**. Embedded Wallets provides a whole suite of connectors which you can use directly for a better experience with external wallets.

- npm
- Yarn
- pnpm
- Bun

```
npm install wagmi @tanstack/react-query

```

```
yarn add wagmi @tanstack/react-query

```

```
pnpm add wagmi @tanstack/react-query

```

```
bun add wagmi @tanstack/react-query

```

main.tsx

```
import './index.css'

import ReactDOM from 'react-dom/client'
import { Web3AuthProvider } from '@web3auth/modal/react'
import web3AuthContextConfig from './web3authContext'
import { WagmiProvider } from '@web3auth/modal/react/wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

import App from './App'

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Web3AuthProvider config={web3AuthContextConfig}>
    <QueryClientProvider client={queryClient}>
      <WagmiProvider>
        <App />
      </WagmiProvider>
    </QueryClientProvider>
  </Web3AuthProvider>
)

```

info

Wagmi provides a comprehensive set of React hooks for Ethereum and EVM-compatible chains. Embedded Wallets integrates seamlessly with Wagmi, so you can use hooks like `useAccount`, `useBalance`, `useSendTransaction`, and more, out of the box.

Below are some examples of using Wagmi hooks in your dapp after Embedded Wallets and Wagmi are set up. You can note these functions work directly with Wagmi. Once you have set up Wagmi with Embedded Wallets, you can use any Wagmi hook as you would in a standard Wagmi application.

### Get account balance[​](#get-account-balance "Direct link to Get account balance")

```
import { useAccount, useBalance } from 'wagmi'
import { formatUnits } from 'viem'

export function Balance() {
  const { address } = useAccount()
  const { data, isLoading, error } = useBalance({ address })

  return (
    <div>
      <h2>Balance</h2>
      <div>
        {data?.value !== undefined && `${formatUnits(data.value, data.decimals)} ${data.symbol}`}{' '}
        {isLoading && 'Loading...'} {error && 'Error: ' + error.message}
      </div>
    </div>
  )
}

```

### Send transaction[​](#send-transaction "Direct link to Send transaction")

```
import { FormEvent } from 'react'
import { useWaitForTransactionReceipt, useSendTransaction, BaseError } from 'wagmi'
import { Hex, parseEther } from 'viem'

export function SendTransaction() {
  const { data: hash, error, isPending, sendTransaction } = useSendTransaction()

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

  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
    hash,
  })

  return (
    <div>
      <h2>Send Transaction</h2>
      <form onSubmit={submit}>
        <input name="address" placeholder="Address" required />
        <input name="value" placeholder="Amount (ETH)" type="number" step="0.000000001" required />
        <button disabled={isPending} type="submit">
          {isPending ? 'Confirming...' : 'Send'}
        </button>
      </form>
      {hash && <div>Transaction Hash: {hash}</div>}
      {isConfirming && 'Waiting for confirmation...'}
      {isConfirmed && 'Transaction confirmed.'}
      {error && <div>Error: {(error as BaseError).shortMessage || error.message}</div>}
    </div>
  )
}

```

### Switch chain[​](#switch-chain "Direct link to Switch chain")

```
import { useChainId, useSwitchChain } from 'wagmi'

export function SwitchChain() {
  const chainId = useChainId()
  const { chains, switchChain, error } = useSwitchChain()

  return (
    <div>
      <h2>Switch Chain</h2>
      <h3>Connected to {chainId}</h3>
      {chains.map(chain => (
        <button
          disabled={chainId === chain.id}
          key={chain.id}
          onClick={() => switchChain({ chainId: chain.id })}
          type="button"
          className="card">
          {chain.name}
        </button>
      ))}
      {error?.message}
    </div>
  )
}

```