coinbaseWallet

Connector for the Coinbase Wallet SDK.

Import

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

Usage

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

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

WARNING

Before going to production, it is highly recommended to set an appName and appLogoUrl for your application that can be displayed upon connection to the wallet.

Parameters

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

Check out the Coinbase Wallet SDK docs for more info.

appName

string

Application name.

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

const connector = coinbaseWallet({
  appName: 'My Wagmi App', 
})

appLogoUrl

string | null | undefined

Application logo image URL; favicon is used if unspecified.

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

const connector = coinbaseWallet({
  appName: 'My Wagmi App',
  appLogoUrl: 'https://example.com/myLogoUrl.png', 
})

headlessMode deprecated

boolean | undefined

• Whether or not onboarding overlay popup should be displayed.
• headlessMode will be removed in the next major version. Upgrade to version: '4'.

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

const connector = coinbaseWallet({
  appName: 'My Wagmi App',
  headlessMode: false, 
})

preference >=2.9.0

"all" | "eoaOnly" | "smartWalletOnly"

Preference for the type of wallet to display.

• 'eoaOnly': Uses EOA Browser Extension or Mobile Coinbase Wallet.
• 'smartWalletOnly': Displays Smart Wallet popup.
• 'all' (default): Supports both 'eoaOnly' and 'smartWalletOnly' based on context.

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

const connector = coinbaseWallet({
  appName: 'My Wagmi App',
  preference: 'smartWalletOnly', 
})

WARNING

Passing preference as a string is deprecated and will be removed in the next major version. Instead you should use preference#options.

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

const connector = coinbaseWallet({
  appName: 'My Wagmi App',
  preference: { 
    options: 'smartWalletOnly'
  }, 
})

attribution >=2.12.33

{ auto?: boolean | undefined; dataSuffix?: `0x${string}` | undefined }

This option only applies to Coinbase Smart Wallet. When a valid data suffix is supplied, it is appended to the initCode and executeBatch calldata. Coinbase Smart Wallet expects a 16 byte hex string. If the data suffix is not a 16 byte hex string, the Smart Wallet will ignore the property. If auto is true, the Smart Wallet will generate a 16 byte hex string from the apps origin.

keysUrl >=2.12.33

string

• The URL for the keys popup.
• By default, https://keys.coinbase.com/connect is used for production. Use https://keys-dev.coinbase.com/connect for development environments.

options >=2.12.33

"all" | "eoaOnly" | "smartWalletOnly"

Preference for the type of wallet to display.

• 'eoaOnly': Uses EOA Browser Extension or Mobile Coinbase Wallet.
• 'smartWalletOnly': Displays Smart Wallet popup.
• 'all' (default): Supports both 'eoaOnly' and 'smartWalletOnly' based on context.

version >=2.13.0

• Coinbase Wallet SDK version
• Defaults to '4'. If headlessMode: true, defaults to '3'.

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

const connector = coinbaseWallet({
  appName: 'My Wagmi App',
  version: '4', 
})