Skip to main content

Custom connectors

Add custom connectors for Ethers or Wagmi

If you already have Wagmi integrated into your application or would like more control over Wagmi's configuration, you can integrate Web3Modal on top of it.

Adding custom connectors like WalletConnect and Coinbase is optional.

By default, EIP-6963 and WC connectors are provided out of the box.

import { createAppKit } from '@reown/appkit/vue'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

import { http, WagmiProvider, CreateConnectorFn } from 'wagmi'
import { sepolia } from '@reown/appkit/networks'
import { walletConnect, coinbaseWallet, injected } from 'wagmi/connectors'

const projectId = 'YOUR_PROJECT_ID'

const metadata = {
  //....
}

// create the connectors (delete the ones you don't need)
const connectors: CreateConnectorFn[] = []
connectors.push(walletConnect({ projectId, metadata, showQrModal: false })) // showQrModal must be false
connectors.push(injected({ shimDisconnect: true }))
connectors.push(
  coinbaseWallet({
    appName: metadata.name,
    appLogoUrl: metadata.icons[0]
  })
)

const export networks = [sepolia]

export const wagmiAdapter = new WagmiAdapter({
  transports: {
    [sepolia.id]: http()
  },
  connectors,
  projectId,
  networks
})

export const config = wagmiAdapter.wagmiConfig

createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [sepolia]
})