Wagmi Connector

In this tutorial, you will learn how to integrate a Web3 application that uses wagmi wallet connector to plug in the Arcana wallet. With wagmi, Web3 developers can allow their users to easily switch between multiple wallets within a single application. Arcana offers a custom wagmi connector to enable the use of the Arcana wallet alongside built-in options like MetaMask, WalletConnect, and Coinbase Wallet.

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 first log into the Arcana Developer Dashboard: https://dashboard.arcana.network to register and configure application settings for onboarding users before they can use the ArcanaConnector for Wagmi and enable Arcana wallet in their application.
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

Setup Social Login

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 the Arcana wallet with an application that uses Wagmi 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 Arcana 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.

auth-wagmi-example/utils/wagmi_client.ts

//This example shows both MetaMask and Arcana Wallet as RainbowKit wallet options
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_b2dde12aad64eb35d72b2c80926338e178b1fa3f",
        },
      });
      return {
        connector,
      };
    },
  };
};

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

export { connectors };

Next, provide the newly instantiated and configured ArcanaConnector to the createClient wagmi function.

auth-wagmi-example/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/wagmi_client.ts";

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.

Step 3: Use `ArcanaConnector` in Wagmi

Now use the wagmiClient in WagmiConfig component in the _app.js file.

auth-wagmi-example/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/wagmi_client.ts";

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

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

export default function App({ Component, pageProps }) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

Here a basic, generic example how you can layout the various wagmi clients options on the app page and allow user to choose how to connect using one of the connectors:

auth-wagmi-example/pages/index.tsx

import { useAccount, useConnect } from "wagmi";

export default function Home() {
  const { connector, address, isConnected } = useAccount();
  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect();

  return (
    <div className="main">
      {isConnected && (
        <div className="connected-msg">
          Connected to {connector?.name} with address {address}
        </div>
      )}
      {!isConnected &&
        connectors.map((connector) => (
          <button
            className="connect-btn"
            disabled={!connector.ready}
            key={connector.id}
            onClick={() => connect({ connector })}
          >
            Connect to {connector.name}
            {isLoading &&
              pendingConnector?.id === connector.id &&
              " (connecting)"}
          </button>
        ))}
      {error && <div>{error.message}</div>}
    </div>
  );
}

That is all!

Wagmi Integration Example

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

You have successfully integrated your dApp with the Arcana Wagmi Connector. Users can choose and use the Arcana wallet or one of the built-in wallet connectors in Wagmi and sign blockchain transactions.

What's Next?

Arcana wallet can also be used in applications that integrate with Rainbow Kit. See how to enable Arcana wallet using Rainbow Kit.