WalletConnect
Wallet interface to connect a wallet using WalletConnect protocol by either opening the official WalletConnect Modal or by displaying a custom QR Code.
import { WalletConnect } from "@thirdweb-dev/wallets"; const wallet = new WalletConnect(); wallet.connect();
function constructor(
The options object includes the following properties:
projectId (recommended)
Your project's unique identifier. It can be obtained at cloud.walletconnect.com . It is highly recommended to use your own project id and only use the default one for testing purposes.
It enables the following functionalities within WalletConnect's web3modal:
wallet and chain logos
optional WalletConnect RPC
support for all wallets from our Explorer and WalletConnect v2 support
Defaults to thirdweb's common project id.
clientId (recommended)
Provide clientId to use the thirdweb RPCs for given chains
You can create a client ID for your application from thirdweb dashboard .
chains (optional)
Provide an array of chains you want to support.
Must be an array of Chain objects, from the @thirdweb-dev/chains package.
Defaults to our default chains .
dappMetadata
Information about your app that the wallet will display when your app tries to connect to it.
Must be an object containing name , url , and optionally description and logoUrl properties.
import { WalletConnect } from "@thirdweb-dev/wallets"; const walletWithOptions = new WalletConnect({ dappMetadata: { name: "thirdweb powered dApp", url: "https://thirdweb.com", description: "thirdweb powered dApp", logoUrl: "https://thirdweb.com/favicon.ico", },});
qrcode (optional)
Whether to display the Wallet Connect QR code Modal or not.
Must be a boolean . Defaults to true .
qrModalOptions
WalletConnect's options to customize the QR Code Modal.
Connect to the wallet using a QR code. You can use this method to display a QR code. User can scan this QR code from the Wallet mobile app to connect to your dapp.
wallet.connectWithQrCode({ chainId: 1, onQrCodeUri(qrCodeUri) { // render the QR code with `qrCodeUri` }, onConnected(accountAddress) { // update UI to show connected state },});
function connectWithQrCode( options: ConnectWithQrCodeArgs,): Promise<void>;
The options object contains the following properties/method:
chainId (optional)
If provided, wallet will prompt the user to switch to the network with the given chainId after connecting.
onQrCodeUri
A callback to get the QR code URI to display to the user.
onConnected
A callback that is called when the user has connected their wallet using the QR code.
let options: ConnectWithQrCodeArgs;
AbstractClientWallet.addListenerfunction addListener( event: T, fn: ( ) => void, context?: any,): this;
let fn: () => void;
AbstractClientWallet.autoConnectauto-connect the wallet if possible
function autoConnect(connectOptions?: { chainId?: number;}): Promise<string>;
AbstractClientWallet.connectConnect wallet
function connect(connectOptions?: { chainId?: number;}): Promise<string>;
AbstractClientWallet.disconnectDisconnect the wallet
function disconnect(): Promise<void>;
AbstractClientWallet.emitCalls each of the listeners registered for a given event.
function emit( event: T,): boolean;
AbstractClientWallet.eventNamesReturn an array listing the events for which the emitter has registered listeners.
AbstractClientWallet.getAddressReturns the account address of the connected wallet
function getAddress(): Promise<string>;
AbstractClientWallet.getBalanceReturns the balance of the connected wallet for the specified token address. If no token address is specified, it returns the balance of the native token
function getBalance( tokenAddress: string,): Promise<{ decimals: number; displayValue: string; name: string; symbol: string; value: BigNumber;}>;
AbstractClientWallet.getChainIdReturns the chain id of the network that the wallet is connected to
function getChainId(): Promise<number>;
AbstractClientWallet.getPersonalWalletIf the wallet uses another "personal wallet" under the hood, return it
This is only useful for wallets like Safe or Smart Wallet uses a "personal wallet" under the hood to sign transactions. This method returns that wallet
AbstractClientWallet.getSignerGet ethers Signer object of the connected wallet
function getSigner(): Promise<Signer>;
AbstractClientWallet.listenerCountReturn the number of listeners listening to a given event.
AbstractClientWallet.listenersReturn the listeners registered for a given event.
function listeners( event: T,): Array< ( ) => void>;
let returnType: Array< ( ) => void>;
AbstractClientWallet.offfunction off( event: T, fn?: ( ) => void, context?: any, once?: boolean,): this;
let fn: () => void;
AbstractClientWallet.onAdd a listener for a given event.
function on( event: T, fn: ( ) => void, context?: any,): this;
let fn: () => void;
AbstractClientWallet.onceAdd a one-time listener for a given event.
function once( event: T, fn: ( ) => void, context?: any,): this;
let fn: () => void;
AbstractClientWallet.removeListenerRemove the listeners of a given event.
function removeListener( event: T, fn?: ( ) => void, context?: any, once?: boolean,): this;
let fn: () => void;
AbstractClientWallet.signMessageSign a message with the connected wallet and return the signature
function signMessage(message: string | Bytes): Promise<string>;
AbstractClientWallet.switchChainSwitch to different Network/Blockchain in the connected wallet
function switchChain(chainId: number): Promise<void>;
AbstractClientWallet.transferTransfers some amount of tokens to the specified address
function transfer( to: string, amount: string | number, currencyAddress: string,): Promise<Omit<TransactionResultWithMetadata<unknown>, "data">>;
AbstractClientWallet.updateChainsUpdate the chains supported by the wallet. This is useful if wallet was initialized with some chains and this needs to be updated without re-initializing the wallet
function updateChains(chains: Array<Chain>): Promise<void>;
AbstractClientWallet.verifySignature Verify the signature of a message. It returns true if the signature is valid, false otherwise
function verifySignature( message: string, signature: string, address: string, _chainId?: number,): Promise<boolean>;
let projectId: string;
let qrcode: undefined | boolean;
let walletId: string;
let id: string;
let prefixed: string | boolean;
let walletName: "WalletConnect";