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
- Twitch
We are working on supporting additional social providers for onboarding users. Watch out for the upcoming Auth SDK releases:
- Telegram
- LINE
-
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:
//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:
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.
// 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.
See also
- Passwordless authentication using Auth SDK
- Auth SDK Errors
- Auth SDK Usage Guide
- Auth SDK Reference Guide