;
};
# Wagmi + React
[Wagmi](https://wagmi.sh) is the standard React library for EVM wallet connections and contract interactions. This page covers the essential patterns for a Sei frontend: configuration, wallet connect/disconnect, reading balances, and writing to contracts.
For Node.js scripts and backend services, see the [viem Quickstart](/evm/evm-parity/examples/viem-quickstart) instead.
## Try it live
The hooks below — `useBlockNumber`, `useBalance` — are thin wrappers over JSON-RPC reads. Here are those same reads issued directly against Sei mainnet, no wallet connection required, so you can see the data your components will render.
## Install
```bash theme={"dark"}
npm install wagmi viem @sei-js/precompiles @tanstack/react-query
```
## Configuration
Configure Wagmi with the Sei chain and your preferred wallet connectors:
```ts theme={"dark"}
// wagmi.config.ts
import { createConfig, http } from 'wagmi';
import { injected, walletConnect } from 'wagmi/connectors';
import { sei, seiTestnet } from 'viem/chains';
export const config = createConfig({
chains: [sei, seiTestnet],
connectors: [
injected(),
walletConnect({ projectId: 'YOUR_WALLETCONNECT_PROJECT_ID' }),
],
transports: {
[sei.id]: http(),
[seiTestnet.id]: http(),
},
});
```
## Provider Setup
Wrap your app with `WagmiProvider` and `QueryClientProvider`:
```tsx theme={"dark"}
// App.tsx
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { config } from './wagmi.config';
const queryClient = new QueryClient();
export function App() {
return (
);
}
```
## Connecting a Wallet
```tsx theme={"dark"}
import { useConnect, useDisconnect, useAccount } from 'wagmi';
export function WalletButton() {
const { connectors, connect } = useConnect();
const { disconnect } = useDisconnect();
const { address, isConnected } = useAccount();
if (isConnected) {
return (
{address}
);
}
return (
{connectors.map((connector) => (
))}
);
}
```
## Reading the Native SEI Balance
```tsx theme={"dark"}
import { useBalance, useAccount } from 'wagmi';
import { formatEther } from 'viem';
export function SeiBalance() {
const { address } = useAccount();
const { data: balance } = useBalance({ address });
if (!balance) return null;
return (
;
}
```
## Writing to a Contract
Use `useWriteContract` for transactions that mutate state, and `useWaitForTransactionReceipt` to track confirmation:
```tsx theme={"dark"}
import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
import { parseAbi, parseUnits } from 'viem';
const ERC20_ABI = parseAbi([
'function transfer(address to, uint256 amount) returns (bool)',
]);
export function TransferButton({ tokenAddress }: { tokenAddress: `0x${string}` }) {
const { writeContract, data: hash, isPending } = useWriteContract();
const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash });
function handleTransfer() {
writeContract({
address: tokenAddress,
abi: ERC20_ABI,
functionName: 'transfer',
args: ['0xRecipient', parseUnits('10', 18)],
});
}
return (
{isSuccess &&
Transfer confirmed.
}
);
}
```
Sei has instant finality — `useWaitForTransactionReceipt` resolves as soon as the transaction is included in a block. A single confirmation is final. See [Finality](/evm/evm-parity/finality).
## Watching the Connected Chain
```tsx theme={"dark"}
import { useChainId, useSwitchChain } from 'wagmi';
import { sei, seiTestnet } from 'viem/chains';
export function NetworkSwitcher() {
const chainId = useChainId();
const { switchChain } = useSwitchChain();
return (