Skip to main content

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.

info

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.

Example Ethers.js Integration
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.

Example Web3.js Integration
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.

Example Usage of EIP-1193 Provider
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.

caution

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!