Skip to content

Integrate WalletConnect App

Estimated time to read: 3 minutes

WalletConnect allows Web3 app users to seamlessly switch between multiple connected wallets within a dApp.

In this guide, you will learn how to enable the in-app Arcana wallet in a dApp via WalletConnect by using the ArcanaConnector.

Prerequisites

  • Register Web3 Application: Log into the Arcana Developer Dashboard https://dashboard.arcana.network. Register the app and save the Client ID for integrating with the SDKs later.

  • Set up Authentication Providers: Click on the Social Auth tab in the Arcana Developer Dashboard. Configure and select one or more supported authentication providers for onboarding the app users.

    Authentication Provider Settings

    You may be required to configure additional details for the selected authentication providers when using the default app-specific keyspace type settings.

    For example, to enable Google, the developer must use Google Developer Console to set up the app and generate a Google Oauth clientID. Before integrating with the SDKs, this Google ClientID must be specified in the Social Auth settings of the Arcana Developer Dashboard.

    For details, see how to configure authentication providers.

Steps

Integrating Web3 WalletConnect apps with the Arcana Auth SDK is simple!

Follow these three steps:

Step 1: Install Arcana Auth SDK packages

npm install --save @arcana/auth-wagmi @arcana/auth
yarn add @arcana/auth-wagmi @arcana/auth

Step 2: Use AuthProvider & ArcanaConnector

Use the unique Client ID obtained after registering the app and create a new AuthProvider instance.

src/ArcanaConnector.ts
// Set up Arcana Auth 

import { AuthProvider } from "@arcana/auth";

let auth: AuthProvider | null;

const getAuthProvider = () => {
  if (!auth) {
    auth = new AuthProvider(
      "xar_test_b2dde12aad64eb35d72b2c80926338e178b1fa3f"
    );
  }
  return auth;
};

export { getAuthProvider };

Use the auth-wagmi package and create a new ArcanaConnector. Specify the ArcanaConnector in Wagmi Config.

src/wagmi.ts
//This example uses Arcana Wallet connector and Coinbase Wallet

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { getAuthProvider } from './arcanaConnector';

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    injected(),
    coinbaseWallet({ appName: 'Create Wagmi' }),
    walletConnect({
      projectId: '3fcc6bba6f1de962d911bb5b5c3dba68', //WalletConnect ProjectID
    }),
    ArcanaConnector(
      {
        auth: getAuthProvider(),
      }
    )
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}

Step 3: Set up WagmiProvider

Use the Wagmi config with ArcanaConnector when creating the WagmiProvider component.

src/main.ts
//Use "`auth-wagmi` version > v2.0.0"
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Buffer } from 'buffer'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import App from './App.tsx'
import { config } from './wagmi.ts'

import './index.css'

globalThis.Buffer = Buffer

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>,
)

That is all!

The WalletConnect dApp is now integrated with the Arcana Auth SDK.

What's Next?

After integrating the WalletConnect dApp with the Arcana Auth SDK, you can add code to onboard users. There are two ways to onboard users:

  • Use built-in plug-and-play login UI with a single function call that displays all the configured authentication providers. In the example above, plug-and-play login UI (default) is enabled when AuthProvider is initialized.

  • Use custom login UI to onboard users and wire it to the Arcana Auth SDK functions for calling the configured authentication providers.

See also


Last update: June 26, 2024 by shaloo