Get Started: WalletConnect Apps

Estimated time to read: 4 minutes

WalletConnect is a Web3 framework to connect an app with various wallet options.

Integrate 'WalletConnect' apps with Arcana Auth SDK and onboard users via social login. Enable users to sign blockchain transactions with the in-app Arcana wallet.

Prerequisites

App must be registered via the Arcana Developer Dashboard: https://dashboard.arcana.network
Optionally configure auth settings such as social login, gasless transactions, wallet user experience, etc.

Supported WalletConnect, Wagmi Versions

WalletConnect 1.7.8
Wagmi v2.0 or higher

1. Install

npmyarn

Wagmi 2.0

npm install --save @arcana/auth-wagmi@2.0.0 @arcana/auth@1.0.12

Wagmi 1.0

npm install --save @arcana/auth-wagmi@2.0.0 @arcana/auth

Wagmi 2.0

yarn add @arcana/auth-wagmi@2.0.0 @arcana/auth@1.0.12

Wagmi 1.0

yarn add @arcana/auth-wagmi@2.0.0 @arcana/auth

2. Integrate

ArcanaConnector.tswagmi.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 };

//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
  }
}

Onboard Users

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>,
)

Sign Transactions

Use AuthProvider, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and Web3 wallet operations in the authenticated user's context.

That's all!

The 'WalletConnect' app is ready to onboard users and allow them to sign blockchain transactions.

3. Advanced Usage

AuthProvider Optional Parameters

Besides Client ID input parameter, you can optionally customize these settings in the AuthProvider constructor:

position: wallet position within the app context - left|right

theme: wallet theme - light|dark

connectOptions: compact mode for the built-in plug-and-play login UI - true|false

connectOptions: {
      compact: true // default - false
},

See AuthProvider constructor parameters for details.

Custom Login UI

You can onboard users through a custom login UI instead of the built-in plug-and-play one. See how to use custom login UI and onboard users in a 'WalletConnect' app.

Arcana JWT Token

loginTokenuserDIDToken

Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the Arcana JWT Token. App developers can access this token via getUser() method and refer to the loginToken field of the UserInfo object.

Developers can use this token to verify the user and subsequently generate another token for app use if required.

In the future, the Arcana JWT Token will be deprecated. Use userDIDToken to verify user.

Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the Arcana DID Token. App developers can access this token via getUser() method and refer to the userDIDToken field of the UserInfo object.

Developers can use this token to verify the user and subsequently generate another token for app use.