This adapter integrates with Wagmi for state management and EVM interactions. It requires a few more setup steps compared to the Ethers adapter.
1. Install Packages:
First, install the Reown Wagmi adapter and its peer dependencies:
```bash theme={null}
# Install the Reown Wagmi adapter
npx expo install @reown/appkit-wagmi-react-native
# Install Wagmi and its required peer dependencies
npx expo install wagmi viem@2.x @tanstack/react-query
```
**Version Conflicts:** Wagmi internally installs multiple versions of viem and valtio which can cause conflicts. If you encounter errors, try overriding these versions in your `package.json` and re-install the dependencies:
**NPM users:**
```json theme={null}
"overrides": {
"@walletconnect/universal-provider": "2.21.10", // use the latest version
"viem": "2.x.x", // use latest version
"valtio": "2.1.8"
}
```
**Yarn users:**
```json theme={null}
"resolutions": {
"@walletconnect/universal-provider": "2.21.10", // use the latest version
"viem": "2.x.x", // use latest version
"valtio": "2.1.8"
}
```
2. Configure Wagmi and Initialize Adapter:
The `WagmiAdapter` requires a Wagmi configuration object. You'll create this using `createConfig` from `wagmi` (we recommend aliasing it, e.g., to `createWagmiConfig`, if you also use `createConfig` from AppKit). This config, defining your chains and transports, is then passed to the `WagmiAdapter` during its initialization within your AppKit setup file (e.g., `src/AppKitConfig.ts`).
```typescript theme={null}
// src/AppKitConfig.ts (or wherever you configure AppKit)
import "@walletconnect/react-native-compat"; // add this import before using appkit
import { createAppKit } from '@reown/appkit-react-native';
import { WagmiAdapter } from '@reown/appkit-wagmi-react-native';
import { http, createConfig as createWagmiCoreConfig } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains'; // Or other chains you need
// ... other adapter imports if any
const projectId = 'YOUR_PROJECT_ID'; // Obtain from https://dashboard.reown.com/
export const wagmiAdapter = new WagmiAdapter({
projectId,
networks: [mainnet, sepolia], // Add all chains you want to support
});
export const appKit = createAppKit({
projectId,
// Add your AppKitNetwork array for 'networks' matching the wagmiCoreConfig chains
// networks: [mainnet, sepolia, ...],
adapters: [wagmiAdapter, /* other adapters for other chain types */],
// ... other AppKit options
});
```
Ensure the `networks` array in `AppKit` options includes the chains defined in `wagmiAdapter`.
3. Set up Context Providers in App.tsx:
Wagmi requires its own context provider (`WagmiProvider`) and also relies on TanStack Query (`QueryClientProvider`). You'll need to wrap your application (or the relevant part of it) with these providers, in addition to the `AppKitProvider`. The `config` prop for `WagmiProvider` must be the `wagmiConfig` instance from your initialized `WagmiAdapter`. Refer to the official Wagmi documentation for details on provider setup.
```tsx theme={null}
// App.tsx
import "@walletconnect/react-native-compat";
import React from 'react';
import { appKit, wagmiAdapter } from './AppKitConfig'; // Your configured AppKit instance
import { AppKitProvider } from '@reown/appkit-react-native';
import YourAppRootComponent from './YourAppRootComponent'; // Your main app component
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function App() {
return (
);
}
export default App;
```
For a practical implementation example, you can refer to the Reown AppKit + Wagmi example on GitHub.