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.

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

Inherhits 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;