Skip to main content

Integrating with wagmi

wagmi is a set of React hooks for working with Ethereum wallets, allowing you do things like read addresses, request signatures, call smart contracts, and more.

Privy is fully compatible with wagmi (and even sponsors the project!). In this guide, you'll find:

Integration steps​

At a high-level, to use wagmi, you'll need to configure your chains and providers for wagmi, and then pass your configuration into the PrivyWagmiConnector component as shown below:

1. Install the necessary dependencies​

To get started, install the wagmi and @privy-io/wagmi-connector packages in your app with npm:

npm i wagmi @privy-io/wagmi-connector

2. Build your wagmi configuration object​

At the root-level of your application (_app.jsx in NextJS or index.js in create-react-app), add the following imports and build your chain configuration object with wagmi's configureChains method:

import { PrivyWagmiConnector } from "@privy-io/wagmi-connector";
// You can import additional chains from 'wagmi/chains'
// https://wagmi.sh/react/chains
import { mainnet, goerli, configureChains } from "wagmi";
// You may replace these providers with your preferred providers
// https://wagmi.sh/react/providers/configuring-chains#multiple-providers
import { alchemyProvider } from "wagmi/providers/alchemy";
import { infuraProvider } from "wagmi/providers/infura";

// Replace the chains and providers with the ones used by your app.
// https://wagmi.sh/react/providers/configuring-chains
const configureChainsConfig = configureChains(
  [mainnet, goerli],
  [
    alchemyProvider({ apiKey: "your-alchemy-api-key" }),
    infuraProvider({ apiKey: "your-infura-api-key" }),
  ]
)

3. Add the PrivyWagmiConnector to your app​

Lastly, wrap your components with the PrivyWagmiConnector, passing in the chain configuration object you just created into wagmiChainConfig property. Make sure that the PrivyWagmiConnector is nested inside the PrivyProvider component.

export default function App({ Component, pageProps }: AppProps) {
  return (
    <PrivyProvider appId='your-privy-app-ID'>
      <PrivyWagmiConnector wagmiChainsConfig={configureChainsConfig}>
        <Component {...pageProps} />
      </PrivyWagmiConnector>
    </PrivyProvider>
  );
}

You can see the code examples all together here.

That's it! Throughout your app, you can now import and use hooks from wagmi.

info

Instead of using the useConnect hook from wagmi, please use the login method from Privy to authenticate your user and connect their wallets.

Supported hooks​

Below is a list of wagmi hooks that Privy officially supports.

Full list of WAGMI hooks and their compatibility with Privy

Demo app​

Check out our wagmi demo app to see the hooks listed above in action.

Feel free to take a look at the app's source code to see an end-to-end implementation of Privy with wagmi.