Integrating with wagmi

WARNING

These docs are for versions 0.x.x of wagmi and version 0.0.12 of @privy-io/wagmi-connector, both of which are no longer maintained. We recommend upgrading wagmi to version 1.x.x and @privy-io/wagmi-connector to its latest version.

You can follow these instructions to upgrade wagmi and these instructions to upgrade @privy-io/wagmi-connector.

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's wallet connectors are compatible with wagmi (and Privy is proud to sponsor the project!). In this guide, you'll find:

• steps to integrate wagmi alongside Privy
• a list of supported hooks from wagmi
• a demo app of wagmi's hooks with Privy

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:

// 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';

import {PrivyWagmiConnector} from '@privy-io/wagmi-connector';

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

Supported hooks

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

Full list of WAGMI hooks and their compatibility with Privy

Hook	Supported	Notes
useAccount	✅
useBalance	✅
useBlockNumber	✅
useConnect	❌	Instead of this, use login from usePrivy.
useContract	✅
useContractEvent	✅
useContractInfiniteReads	✅
useContractRead	✅
useContractReads	✅
useContractWrite	✅
useDisconnect	✅
useEnsAddress	✅
useEnsAvatar	✅
useEnsName	✅
useEnsResolver	✅
useFeeData	✅
useNetwork	✅
useProvider	✅
useSendTransaction	✅
useSigner	✅
useSignMessage	✅
useSignTypedData	✅
useSwitchNetwork	✅
useToken	✅
useTransaction	✅
useWaitForTransaction	✅
useWatchPendingTransactions	✅
useWebSocketProvider	❌	We are working on useWebSocketProvider support. Please reach out if you need this hook.

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.