​
Getting Started

​
1. Install

Install Other Page Connect and its peer dependencies:

npm install @otherpage/connect wagmi viem@2.x @tanstack/react-query

  • Wagmi is a React Hooks library for Ethereum, this is the library you will use to interact with the connected wallet.

  • Viem is a TypeScript interface for Ethereum that performs blockchain operations.

  • TanStack Query is an async state manager that handles requests, caching, and more.

  • TypeScript is optional, but highly recommended.

​
2. API Keys

WalletConnect 2.0

OPConnect utilises WalletConnect’s SDK to help with connecting wallets. If you wish to use WalletConnect 2.0, it requires a 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.

​
3. Implementation

It is recommended to wrap your app within a new component that will help you set up OPConnect and its dependencies.

Start by creating a new component called 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.

import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { OPConnectProvider, getDefaultConfig } from '@otherpage/connect';

const config = createConfig(
  getDefaultConfig({
    // Your dApps chains
    chains: [mainnet],
    transports: {
      // RPC URL for each chain
      [mainnet.id]: http(
        `https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID}`
      ),
    },

    // Required API Keys
    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,

    // Required App Info
    appName: 'Your App Name',
  })
);

const queryClient = new QueryClient();

export const Web3Provider = ({ children }) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <OPConnectProvider>{children}</OPConnectProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Now that you have your Web3Provider component, you can wrap your app with it:

import { Web3Provider } from './Web3Provider';
import { ConnectButton } from '@otherpage/connect';

const App = () => {
  return (
    <Web3Provider>
      <ConnectButton />
    </Web3Provider>
  );
};

​
4. Connected Wallet Info

In a lot of use cases, you will want to access the connected wallet from OPConnect in order to be able to interact with it further. You can do so by using the different hooks, such as useAccount, from wagmi (a OPConnect dependency).

In the previous example above we wrapped our app with a <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:

import { useAccount } from 'wagmi';

// Make sure that this component is wrapped with OPConnectProvider
const MyComponent = () => {
  const { address, isConnecting, isDisconnected } = useAccount();
  if (isConnecting) return <div>Connecting...</div>;
  if (isDisconnected) return <div>Disconnected</div>;
  return <div>Connected Wallet: {address}</div>;
};

​
Additional Build Tooling Setup

Some build tools require additional setup to work with ConnectKit.

​
Next.js

OPConnect uses WalletConnect’s SDK to help with connecting wallets. WalletConnect 2.0 pulls in Node.js dependencies that Next.js does not support by default.

You can mitigate this by adding the following to your next.config.js file:

module.exports = {
  webpack: (config) => {
    config.resolve.fallback = { fs: false, net: false, tls: false };
    return config;
  },
};

​
Next.js App Router

If using Next.js App Router, or any framework that supports React Server Components, you will need to include the "use client" directive at the beginning of your Web3Provider file.

"use client"

...

export const Web3Provider = ({ children }) => {
  return (
    ...
  );
};

​
Examples

There are various runnable examples included in this repository in the examples folder:

​
Running Examples Locally

Clone the OPConnect project and install the necessary dependencies:

$ git clone git@github.com:cr3labs/other-page-connect.git
$ cd opconnect
$ yarn install

and start the code bundlers:

$ yarn dev:opconnect
$ yarn dev:opconnect-siwop
$ yarn dev:opconnect-next-siwop
$ yarn dev:opconnect-next-siwe

and then simply select the example you’d like to run:

$ yarn dev:nextjs-siwop # Next.js with SIWOP
$ yarn dev:nextjs-siwe # Next.js with SIWE
Server Connect