metaMask

Connector for MetaMask SDK.

The MetaMask Connector helps you manage wallet connections in your React applications. It supports essential features like connecting, disconnecting, and handling multiple chains, while maintaining compatibility with browser and mobile environments. You can choose between the MetaMask Connector and the Injected Connector—but keep in mind that using the Injected Connector limits your app to the MetaMask browser extension only.

Import

import { metaMask } from '@wagmi/vue/connectors'

Usage

import { createConfig, http } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'
import { metaMask } from '@wagmi/vue/connectors'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [metaMask()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Parameters

import { type MetaMaskParameters } from '@wagmi/vue/connectors'

Check out the MetaMask SDK docs for more info. A few options are omitted that Wagmi manages internally.

dappMetadata

Metadata is used to fill details for the UX on confirmation screens in MetaMask, including the following fields:

• name: string - The name of the dapp.
• url: string - URL of the dapp (defaults to window.location.origin).
• iconUrl: string - URL to the dapp's favicon or icon.

import { metaMask } from '@wagmi/vue/connectors'

const connector = metaMask({
  dappMetadata: { 
    name: 'My Wagmi App', 
    url: 'https://example.com', 
    iconUrl: 'https://example.com/favicon.ico', 
  }
})

logging

Enables SDK-side logging to provide visibility into:

• RPC methods being called.
• Events received for syncing the chain or active account.
• Raw RPC responses.

In this context, this is especially useful to observe what calls are made through Wagmi hooks.

Relevant options:

{
  developerMode: boolean, // Enables developer mode logs
  sdk: boolean           // Enables SDK-specific logs
}

import { metaMask } from '{{connectorsPackageName}}'

const connector = metaMask({
  logging: { developerMode: true, sdk: true } 
})

headless

• Enables headless mode, disabling MetaMask's built-in modal.
• Allows developers to create their own modal, such as for displaying a QR code.

This is particularly relevant for web-only setups using Wagmi, where developers want complete control over the UI.

To get the deeplink to display in the QR code, listen to the display_uri event.

The default is false.

import { metaMask } from '@wagmi/vue/connectors'

const connector = metaMask({
  headless: true
})

Advanced

By default, if the EIP-6963 MetaMask injected provider is detected, this connector will replace it.

EIP-6963 defines a standard way for dapps to interact with multiple wallets simultaneously by injecting providers into the browser. Wallets that implement this standard can make their presence known to dapps in a consistent and predictable manner.

When MetaMask SDK detects an EIP-6963-compliant provider (such as MetaMask itself), the connector will automatically replace the default injected provider (like window.ethereum) with the one provided by MetaMask SDK.

See the rdns property for more information.

MetaMask SDK Docs

Check out the MetaMask SDK docs for more information.