Practical overview
When it fits
Use Wagmi when building an Ethereum application interface and you want reusable reactive hooks or framework-independent Core actions for account and blockchain interactions.
Who it is for
- Developers building Ethereum dApp frontends with React.
- Developers who need VanillaJS actions for Ethereum account and blockchain data.
- TypeScript developers integrating Ethereum functionality through Viem.
Documented uses
- Configure an app to work with selected Ethereum chains and transports.
- Read a connected account and resolve an address to an ENS name.
- Provide wallet and account connector interfaces in a Wagmi Core project.
- Use reusable React hooks or Core actions to manage Ethereum application interactions.
Requirements & limits
The repository is public and MIT-licensed.
- The React package requires both WagmiProvider and TanStack Query's QueryClientProvider in the documented setup.
- Wagmi Core uses @wagmi/core and @wagmi/connectors, while the React setup uses wagmi and TanStack Query.
- The getting-started examples configure Mainnet and Sepolia; chain and transport choices are part of app configuration.
- The repository identifies React, Vue and TypeScript, but the supplied installation walkthroughs cover React and VanillaJS Core.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Set up Wagmi in a React app
Install Wagmi and configure its React providers so components can use Wagmi hooks.
Before you start
- A React project and a package manager.
- Wagmi, Viem 2.x and TanStack Query.
Steps
For a new project, run the documented create-wagmi CLI command and select React; alternatively, install wagmi, viem@2.x and @tanstack/react-query in an existing project.
Create and export a Wagmi configuration with the chains and transports the app will use.
Wrap the app in WagmiProvider with that configuration, then wrap it in TanStack Query's QueryClientProvider with a QueryClient.
Use Wagmi React hooks inside components rendered within both providers.
Expected outcome
The app is configured to use Wagmi hooks, such as reading a connection and resolving an ENS name.
Guide limitations
- The guide covers initial React setup; wallet connection and further hook usage are documented as next steps.
- The configuration example uses Mainnet and Sepolia; choose configuration appropriate to the application.
Set up Wagmi Core for VanillaJS
Configure Wagmi Core and use its actions for Ethereum account and ENS data.
Before you start
- A JavaScript project and a package manager.
- @wagmi/core, @wagmi/connectors and Viem 2.x.
Steps
Install @wagmi/core, @wagmi/connectors and viem@2.x.
Create and export a configuration specifying chains and transports.
Pass the configuration to Core actions, such as getting the current connection and looking up its ENS name.
Expected outcome
A VanillaJS project can use Wagmi Core actions with a configured Ethereum client.
Guide limitations
- The example demonstrates connection and ENS-name lookup; additional actions are covered separately in the Core documentation.
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 30 September 2026
- Original website title
- wevm/wagmi · Official homepage title · retained in its source language