Simplify wallet connections to your dApp using the OP Connect React component library.
walletConnectProjectId
which you can create quickly and easily for free over at WalletConnect Cloud.
Sign In With Other Page (SIWOP)
If you intend to use Sign in With Other Page (SIWOP) to log users into your app in addition to wallet connection, you will need to create a connect app in the Other Page Portal and set the required configuration.
See: Sign in with Other Page.
Web3Provider
. Here you will import the required providers and create a config using wagmi’s createConfig method. OPConnect supplies a pre-configured getDefaultConfig
function to simplify the process of creating a config.
Below is a simple example app using getDefaultConfig()
to help you get started:
When using a framework that supports React Server Components, you will need to include the "use client"
directive at the beginning of this file.
Web3Provider
component, you can wrap your app with it:
<OPConnectProvider>
top-level. Before utilizing any wagmi hook, make sure the components you build are mounted under this provider.
Below is a simple example component that utilizes the useAccount hook to access connection state and the connected wallet address:
next.config.js
file:
"use client"
directive at the beginning of your Web3Provider
file.