Requesting signatures and transactions
Privy is compatible with popular web3 libraries for requesting signatures and transactions from a user’s Ethereum wallet. Below, we outline how you can integrate Privy with ethers.js
, web3.js
, and other popular libraries.
When you request the current user's wallet provider using the methods below, if a user has multiple wallets linked to their account, Privy will return the provider for their active wallet.
Ethers.js
You can get an ethers-compatible provider from a user's wallet by calling the getEthersProvider
method from the usePrivy
hook. You may then use this as an ethers’ provider
to read blockchain data and send requests to a user’s wallet.
import { usePrivy } from '@privy-io/react-auth';
export default function MyComponent() {
const { getEthersProvider } = usePrivy();
// Get an ethers provider and signer from the user's wallet
const provider = getEthersProvider();
const signer = provider.getSigner();
return <>{/* your code here */}</>
}
Web3.js
You can get a web3.js-compatible provider from a user's wallet by calling the getWeb3jsProvider
method from the usePrivy
hook. You can then initialize your web3
client with this provider
.
import { usePrivy } from '@privy-io/react-auth';
import Web3 from 'web3';
export default function MyComponent() {
const { getWeb3jsProvider } = usePrivy();
// Initialize your Web3.js client with the provider
const web3 = new Web3(getWeb3jsProvider());
return <>{/* your code here */}</>
}
Ethereum Javascript API
Privy also exposes a generic EIP-1193 (Ethereum Javascript API) provider that you may use to communicate with a user’s wallet (via JSON-RPC), without needing an external library like those listed above. You can access this provider using the getEthereumProvider
from theusePrivy
React hook.
import { usePrivy } from '@privy-io/react-auth';
export default function MyComponent() {
const { getEthereumProvider } = usePrivy();
const ethereum = getEthereumProvider();
// You can now use the ethereum.request({method: ...})
// syntax as documented in the EIP.
return <>{/* your code here */}</>
}
Wagmi
Privy offers a Wagmi Connector package that you can use to integrate wagmi alongside Privy in your React app.
Wagmi support is experimental at the moment. Please reach out to the Privy team if you plan to integrate wagmi to interact with wallets in your application.
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:
First, install the @privy-io/wagmi-connector
package with npm
:
npm i @privy-io/wagmi-connector
Then, 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" }),
]
)
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 example all together here.
That's it! Throughout your app, you can now import and use hooks like useAccount
and more from wagmi!