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:
- 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:
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
.
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
Hook | Supported | Notes |
---|---|---|
useAccount | ✅ | |
useBalance | ✅ | |
useBlockNumber | ✅ | |
useConnect | ❌ | Instead of this, use login from Privy. |
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
.