Setting up WalletConnect

WalletConnect is a protocol that allows for dapps to easily connect to mobile wallets. Adding support for it is incredibly simple thanks to Web3Modal, and helps increase the user reach of your application.

For more details, you can read the WalletConnect documentation.

Install dependencies

note

This package requires that your application bundler provides certail globals that are common in Node.js environments. Modern tooling like Vite do not provide these by default, and you will need to ensure that your environment is setup to provide the required globals.

First, you need to install the @walletconnect/web3-provider package with your preferred package manager.

pnpm add @walletconnect/web3-provider

yarn add @walletconnect/web3-provider

npm add @walletconnect/web3-provider

Configuring the provider

The WalletConnect provider requires an Infrua Project ID. Getting one is simple and free, we recommend following this guide to get your ID. This ID is generally stored in an .env file to be made available as an enviroment variable.

Once you have an ID, you can use the providerOptions to configure the WalletConnect provider.

import { WalletProvider } from "ethereal-react";
import WalletConnectProvider from "@walletconnect/web3-provider";

function App() {
  return (
    <WalletProvider
      cacheProvider
      providerOptions={{
        walletconnect: {
          package: WalletConnectProvider,
          options: {
            infuraId: process.env.NEXT_PUBLIC_INFURA_ID,
          },
        },
      }}
      fallback={<ConnectButton />}
    >
      <ConnectedApp />
    </WalletProvider>
  );
}

For more details and documentation of the WalletConnect provider options, read the WalletConnect docs for dapps.