wagmi
, @tanstack/react-query
, @privy-io/react-auth
, and @privy-io/wagmi
:
PrivyProvider
, import the QueryClient
class and the QueryClientProvider
component from @tanstack/react-query
:
QueryClient
:
PrivyProvider
, wrap your app’s components with the QueryClientProvider
. This must be rendered inside the PrivyProvider
component.
client
property of the QueryClientProvider
, pass the queryClient
instance you created.
config
and wrapping your app with the WagmiProvider
.
createConfig
and WagmiProvider
from
@privy-io/wagmi
. Do not import these from wagmi
directly.wagmi
config, import the createConfig
method from @privy-io/wagmi
:
createConfig
, but ensures that the appropriate configuration options are set for the Privy integration. Specifically, it allows Privy to drive wagmi’s connectors state, enabling the two libraries to stay in sync.
Next, import your app’s required chains from viem/chains
and the http
transport from wagmi
. Your app’s required chains should match whatever you configure as supportedChains
for Privy.
createConfig
with your imported chains and the http
transport like so:
WagmiProvider
config
, in the same component where you render your PrivyProvider
, import the WagmiProvider
component from @privy-io/wagmi
.
WagmiProvider
, but ensures the necessary configuration properties for Privy are set. Specifically, it ensures that the reconnectOnMount
prop is set to false, which is required for handling the embedded wallet. Wallets will still be automatically reconnected on mount.
Then, like the PrivyProvider
, wrap your app’s components with the WagmiProvider
. This must be rendered inside both the PrivyProvider
and QueryClientProvider
components.
config
property of the WagmiProvider
, pass the config
you created earlier.
wagmi
in your app! 🎉
wagmi
throughout your appwagmi
’s React hooks throughout your app to interface with wallets and take read and write actions on the blockchain.
wagmi
hookswagmi
hooks, like useAccount
, in your components, import the hook directly from wagmi
and call it as usual:
useDisconnect
hook. This hook “shims” a disconnection, which can create discrepancies between what wallets are connected to an app vs. wagmi.Instead of disconnecting a given wallet, you can always prompt a user to connect a different wallet via the connectWallet
method.wagmi
wagmi
to take read or write actions from a connected walletwagmi
’s React hooks return information for only one connected wallet at a time. This is referred to as the active wallet.
To update wagmi
to return information for a different connected wallet, first import the useWallets
hook from @privy-io/react-auth
and the useSetActiveWallet
hook from @privy-io/wagmi
:
wallets
array returned by useWallets
setActiveWallet
method returned by the useSetActiveWallet
hook: