metamaskWallet

A wallet configurator for MetaMask which allows integrating the wallet with React

import { metamaskWallet } from "@thirdweb-dev/react";

const metamaskConfig = metamaskWallet(options);

customize (optional)

metamaskConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const metamaskConfig = metamaskWallet({ ... });

// override metadata
metamaskConfig.meta.name = "..."; // change the name
metamaskConfig.meta.iconURL = "..."; // change the icon
metamaskConfig.meta.urls = {
  // change urls to download the wallet on various platforms
  android: "https://...",
  ios: "https://...",
  chrome: "https://...",
  firefox: "https://...",
};

// override connection UI
metamaskConfig.connectUI = MetamaskConnectUI; // react component

// custom selection UI
metamaskConfig.selectUI = MetamaskSelectUI; // react component

// custom logic to check if the wallet is installed or not
metamaskConfig.isInstalled = isMetamaskInstalled; // function

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[metamaskConfig]} clientId="your-client-id"/>;

// or use it with useConnect hook
const connect = useConnect();
connect(metamaskConfig, { ... });

options

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.

metamaskWallet({
  projectId: "your-wallet-connect-project-id",
});

recommended (optional)

Show this wallet as "recommended" in the ConnectWallet Modal.

metamaskWallet({
  recommended: true,
});

Usage with ConnectWallet

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider
  supportedWallets={[metamaskWallet()]}
  clientId="your-client-id"
>
  <YourApp />
</ThirdwebProvider>

Usage with useConnect

you can use the useConnect hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

const metamaskConfig = metamaskWallet();

function App() {
  const connect = useConnect();

  const handleConnect = async () => {
    await connect(metamaskConfig, connectOptions);
  };

  return <div> ... </div>;
}

connectOptions

{ chainId?: number } | undefined

chainId (optional)

If chainId is provided, wallet will be connected and immediately switch to network with given chainId.

Chain object corresponding to this chainId from @thirdweb-dev/chains package must be specified in ThirdwebProvider's supportedChains prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}