MetaMask

Prompt users to connect to your app with their MetaMask wallet.

Usage

import { MetaMaskWallet } from "@thirdweb-dev/wallets";

const wallet = new MetaMaskWallet();

wallet.connect();

Configuration

Optionally, provide a configuration object when instantiating the MetaMaskWallet class.

clientId (recommended)

Provide clientId to use the thirdweb RPCs for given chains

You can create a client ID for your application from thirdweb dashboard.

import { MetaMaskWallet } from "@thirdweb-dev/wallets";

const wallet = new MetaMaskWallet(
  {
    clientId: "YOUR_CLIENT_ID",
  },
);

projectId (recommended)

This is only relevant if you want to use WalletConnect for connecting to MetaMask mobile app when MetaMask is not injected.

This projectId 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.

import { MetaMaskWallet } from "@thirdweb-dev/wallets";

const wallet = new MetaMaskWallet(
  {
    projectId: "YOUR_WALLET_CONNECT_PROJECT_ID",
  },
);

chains

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.

import { MetaMaskWallet } from "@thirdweb-dev/wallets";
import { Ethereum, Polygon } from "@thirdweb-dev/chains";

const walletWithOptions = new MetaMaskWallet(
  {
    chains: [Ethereum, Polygon],
  },
);

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 { MetaMaskWallet } from "@thirdweb-dev/wallets";

const walletWithOptions = new MetaMaskWallet({
  dappMetadata: {
    name: "thirdweb powered dApp",
    url: "https://thirdweb.com",
    description: "thirdweb powered dApp",
    logoUrl: "https://thirdweb.com/favicon.ico",
  },
});

qrcode

Whether to display the Wallet Connect QR code Modal for connecting to MetaMask on mobile if MetaMask is not injected.

Must be a boolean. Defaults to true.

import { MetaMaskWallet } from "@thirdweb-dev/wallets";

const walletWithOptions = new MetaMaskWallet(
  {
    qrcode: false,
  },
);

walletStorage

Some wallets need to store data in persistent storage. This is the storage that will be used for that.

Must be an object conforming to the AsyncStorage interface:

export interface AsyncStorage {
  getItem(key: string): Promise<string | null>;
  setItem(key: string, value: string): Promise<void>;
  removeItem(key: string): Promise<void>;
}

Example:

import { MetaMaskWallet } from "@thirdweb-dev/wallets";

const walletWithOptions = new MetaMaskWallet(
  {
    walletStorage: {
      getItem: (key) => {
        // Implement your own storage logic here
      },
      removeItem: (key) => {
        // Implement your own storage logic here
      },
      setItem: (key, value) => {
        // Implement your own storage logic here
      },
    },
  },
);

Methods

Inherits all the public methods from the AbstractClientWallet class.

connectWithQrCode

Connect to the wallet using a QR code if the user does not have the Metamask extension installed.

await wallet.connectWithQrCode({
  onQrCodeUri(qrCodeUri) {
    // render the QR code with `qrCodeUri`
  },
  onConnected(accountAddress) {
    // update UI to show connected state
  },
  chainId: 1, // optional - if provided, It forces the wallet to switch to the given chainId after connecting
});

Configuration

onQrCodeUri

A callback to show the QR code to the user.

onConnected

A callback to run when the user has connected their wallet to your app.

chainId

The chain ID to switch to after connecting. Optional.

string | undefined;