In AppKit, a ‘connector’ is the bridge between your app and a user’s wallet. This page shows how to add custom connectors beyond the default ones, allowing your users to connect with additional wallet types and authentication methods.

If you already have Wagmi integrated into your application or would like more control over Wagmi’s configuration, you can integrate AppKit 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'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { reconnect, http, createConfig } from '@wagmi/core'
import { CreateConnectorFn } from 'wagmi'
import { abstractTestnet } from '@reown/appkit/networks'
// you need to add the abstract library in order to make it work
import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";

const projectId = 'YOUR_PROJECT_ID'

const metadata = {
  //...
}

// create the connectors (delete the ones you don't need)
const connectors: CreateConnectorFn[] = []
connectors.push(abstractWalletConnector())

export const networks = [abstractTestnet]

export const wagmiAdapter = new WagmiAdapter({
  connectors,
  projectId,
  networks
})

export const config = wagmiAdapter.wagmiConfig

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

Check our JavaScript Wagmi demo in Github