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
});