WalletConnect v2 Adapter

info

With Web3Auth Web SDK v9.2.0 and above, WalletConnect V2 Adapter can be used to log in with Solana chain namespace as well. Have a look at the example here.

@web3auth/wallet-connect-v2-adapter

Wallet connect v2 adapter allows you to log in with wallet connect v2. You can read more about Walletconnect here.

Basic Details

Adapter Name: wallet-connect-v2

Package Name: @web3auth/wallet-connect-v2-adapter

chainNamespace: EIP155

Installation

npm

npm install --save @web3auth/wallet-connect-v2-adapter

Yarn

yarn add @web3auth/wallet-connect-v2-adapter

pnpm

pnpm add @web3auth/wallet-connect-v2-adapter

Arguments

Table

Parameter	type
adapterSettings?	IAdapterSettings
chainConfig?	CustomChainConfig
sessionTime?	number
clientId?	string
web3AuthNetwork?	WEB3AUTH_NETWORK_TYPE
useCoreKitKey?	boolean

Interface

interface WalletConnectV2AdapterOptions extends BaseAdapterSettings {
  adapterSettings?: IAdapterSettings;
  loginSettings?: EngineTypes.ConnectParams;
}
interface BaseAdapterSettings {
  clientId?: string;
  sessionTime?: number;
  chainConfig?: Partial<CustomChainConfig> & Pick<CustomChainConfig, "chainNamespace">;
  web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
  useCoreKitKey?: boolean;
}

Custom Chain Config

chainConfig

warning

While you can pass your chainConfig here, it is not required since you can directly pass it over to the Web3Auth/ Web3AuthNoModal configuration while instantiating it.

Read more about it in their respective sections:

• web3auth/modal
• web3auth/no-modal

warning

If you pass chainConfig in an Adapter, it overwrites the chainConfig passed over to the Web3Auth/ Web3AuthNoModal constructor.

IAdapter Settings

adapterSettings

interface IAdapterSettings {
  walletConnectInitOptions?: SignClientTypes.Options;
  qrcodeModal?: IQRCodeModal;
}

interface IQRCodeModal {
  openModal: (options?: OpenOptions) => Promise<void>;
  closeModal: () => void;
}
interface OpenOptions {
  uri: string;
  chains?: string[];
}

getWalletConnectV2Settings

You can get walletConnectV2 settings by calling the getWalletConnectV2Settings() function with its required arguments.

Arguments

Table

Parameter	type
namespace	ChainNamespaceType, e.g. (eip155)
chainIds	string[] e.g. ["1"]
projectID	WalletConnect Project ID, get one from https://cloud.walletconnect.com

Function Definnation

export declare const getWalletConnectV2Settings: (
  namespace: ChainNamespaceType,
  chainIds: string[],
  projectID: string,
) => Promise<{
  adapterSettings: IAdapterSettings;
  loginSettings: EngineTypes.ConnectParams;
}>;
export interface IAdapterSettings {
  walletConnectInitOptions?: SignClientTypes.Options;
  qrcodeModal?: IQRCodeModal;
}

Example

EVM

import { WalletConnectModal } from "@walletconnect/modal";
import {
  getWalletConnectV2Settings,
  WalletConnectV2Adapter,
} from "@web3auth/wallet-connect-v2-adapter";

const defaultWcSettings = await getWalletConnectV2Settings(
  "eip155",
  ["1"],
  "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons.
);
const walletConnectModal = new WalletConnectModal({
  projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons.
});
const walletConnectV2Adapter = new WalletConnectV2Adapter({
  adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings },
  loginSettings: { ...defaultWcSettings.loginSettings },
});

web3auth.configureAdapter(walletConnectV2Adapter);

Solana

import { WalletConnectModal } from "@walletconnect/modal";
import {
  getWalletConnectV2Settings,
  WalletConnectV2Adapter,
} from "@web3auth/wallet-connect-v2-adapter";

// adding wallet connect v2 adapter
const defaultWcSettings = await getWalletConnectV2Settings(
  "solana",
  ["0x1"],
  "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons.
);
const walletConnectModal = new WalletConnectModal({
  projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // Get your walletconnect project id and register it on the Web3Auth Dashboard in your project add-ons.
});
const walletConnectV2Adapter = new WalletConnectV2Adapter({
  adapterSettings: {
    qrcodeModal: walletConnectModal,
    ...defaultWcSettings.adapterSettings,
  },
  loginSettings: { ...defaultWcSettings.loginSettings },
});

web3auth.configureAdapter(walletConnectV2Adapter);