metaMask

Connector for MetaMask SDK.

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

DappMetadata | undefined

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

SDKLoggingOptions | undefined

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

boolean | undefined

• 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.