Rainbow Connector

In this tutorial, you will learn how to integrate a Web3 application that uses RainbowKit with Arcana wallet. RainbowKit works with wagmi which allows Web3 application users to easily switch between multiple wallets within a single application. Arcana offers a custom wagmi connector that can be used to enable Arcana wallet for applications using RainbowKit.

Deploying auth-wagmi package

If your Web3 application uses Wagmi or RainbowKit, you can directly install and integrate with the Auth wagmi wrapper. Using auth-wagmi does not require installing the auth package as it is wrapped within the auth-wagmi package.

Prerequisites

Developers need to log into the Arcana Developer Dashboard: https://dashboard.arcana.network to register and configure application settings for using the wagmi ArcanaConnector.
Select the Auth tab in the dashboard and choose from a list of supported authentication mechanisms to customize the user onboarding experience.
- Discord
- GitHub
- Google
- Twitch
- Twitter

We are working on supporting additional social providers for onboarding users. Watch out for the upcoming Auth SDK releases:

Telegram
LINE
Wechat
Kakaotalk

Note

You may be required to configure additional details depending on the choice of authentication mechanisms. For example, if the dApp wants to enable users to onboard using the Google social authentication then the developer must set up and specify the clientID for Google OAuth.

For details, see how to set up social providers.
After registering the application, a unique Client ID is assigned to every application. Save the Client ID displayed in the dashboard. It is required while instantiating the ArcanaConnector for wagmi later.

Steps

Integrating Arcana wallet with an application that uses RainbowKit is simple!

Follow these two steps:

Step 1: Install Arcana-Wagmi Connector

npm

npm install --save @arcana/auth-wagmi

yarn

yarn add @arcana/auth-wagmi

Step 2: Configure RainbowKit Connector

Import Arcana's auth-wagmi library and create a 'new' ArcanaConnector. During instantiation of the ArcanaConnector, specify the unique Client ID value assigned to your dApp after registering and configuring using the dashboard. Set up ArcanaRainbowConnector using the newly created ArcanaConnector. Initialize the connectorsForWallets in the RainbowKit with the ArcanaRainbowConnector and export the connectors to be used later in the _app.js file:

utils/wallet.js

//This example uses Arcana Rainbow connector and MetaMask

import { connectorsForWallets } from "@rainbow-me/rainbowkit";
import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";

import { ArcanaConnector } from "@arcana/auth-wagmi";

export const ArcanaRainbowConnector = ({ chains }) => {
  return {
    id: "arcana-auth",
    name: "Arcana Wallet",
    iconUrl: "",
    iconBackground: "#101010",
    createConnector: () => {
      const connector = new ArcanaConnector({
        chains,
        options: {
          //clientId : Arcana Unique App Identifier via Dashboard
          clientId: "xar_test_b2dde12aad64eb35d72b2cs80926338e178b1fa3f", 
        },
      });
      return {
        connector,
      };
    },
  };
};

const connectors = (chains) =>
  connectorsForWallets([
    {
      groupName: "Recommended",
      wallets: [ArcanaRainbowConnector({ chains }), metaMaskWallet({ chains })],
    },
  ]);

export { connectors };

Use the connectors configured with ArcanaRainbowConnector in the _app.js file for creating the wagmi client using the createClient function:

pages/_app.js

import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";

import { configureChains, createClient, WagmiConfig } from "wagmi";
import { polygon, mainnet } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { connectors } from "../utils/wallet";

const { chains, provider } = configureChains(
  [mainnet, polygon],
  [publicProvider()]
);

const wagmiClient = createClient({
  autoConnect: true,
  connectors: connectors(chains),
  provider,
});

Tip

For more details on the createClient function of wagmi package, see wagmi Getting Started Guide. Also, refer to RainbowKit documentation.

Step 3: RainbowKit Context Provider

Finally, pass the wagmi client created earlier as a parameter to the WagmiConfig component in the _app.js file.

pages/_app.js

// Pass wagmi client configured with ArcanaRainbowKitConnector to the RainbowKit Context Provider
export default function App({ Component, pageProps }) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

That is all!

RainbowKit Integration Example

Here is the RainbowKit integration example source code for your reference.

You have successfully integrated your dApp with the Arcana RainbowKit Connector.

What's Next?

You can add the Arcana wallet to your application by using the Arcana Auth SDK, even if your application does not already use wagmi or RainbowKit.

See how to integrate applications with Auth SDK for details.