# Integrate Embedded Wallets with the Flare Blockchain in React

> Integrate Embedded Wallets with the Flare Blockchain in React | Embedded Wallets

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 Flare

<Tabs
 defaultValue="mainnet"
  values={[
    { label: "Mainnet", value: "mainnet" },
    { label: "Coston2 Testnet", value: "coston2" },
  ]}
>
<TabItem value="mainnet">

- **Chain ID:** 0xE
- **Public RPC URL:** `https://flare-api.flare.network/ext/C/rpc`
- **Display Name:** Flare Mainnet
- **Block Explorer Link:** `https://flare-explorer.flare.network`
- **Ticker:** FLR
- **Ticker Name:** Flare

</TabItem>

<TabItem value="coston2">

- **Chain ID:** 0x72
- **Public RPC URL:** `https://coston2-api.flare.network/ext/C/rpc`
- **Display Name:** Flare Coston2 Testnet
- **Block Explorer Link:** `https://coston2-explorer.flare.network`
- **Ticker:** C2FLR
- **Ticker Name:** Coston2 Flare

</TabItem>
</Tabs>

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

:::

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

```tsx title="main.tsx"

// focus-start

// focus-end

// focus-next-line
const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Web3AuthProvider config={web3AuthContextConfig}>
    {/* focus-start */}
    <QueryClientProvider client={queryClient}>
      <WagmiProvider>
        <App />
      </WagmiProvider>
    </QueryClientProvider>
    {/* focus-end */}
  </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

```tsx

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

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

### Send transaction

```tsx

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 (
    
      Send Transaction
      <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 && Transaction Hash: {hash}}
      {isConfirming && 'Waiting for confirmation...'}
      {isConfirmed && 'Transaction confirmed.'}
      {error && Error: {(error as BaseError).shortMessage || error.message}}
    
  )
}
```

### Switch chain

```tsx

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

  return (
    
      Switch Chain
      Connected to {chainId}
      {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}
    
  )
}
```