Custom connectors
Add custom connectors for Ethers or Wagmi
- Wagmi
- Ethers
- Solana
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/react'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { reconnect, http, createConfig } from '@wagmi/core'
import { 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]
})
)
export const networks = [sepolia]
export const wagmiAdapter = new WagmiAdapter({
storage:
transports: {
[sepolia.id]: http()
},
connectors,
projectId,
networks
})
export const config = wagmiAdapter.wagmiConfig
createAppKit({
adapters: [wagmiAdapter],
projectId,
networks: [sepolia]
})
Coming soon...
Add custom wallet adapters for Solana wallets by first installing the wallet adapter package and then including the adapters in the wallets array. You can find a more Solana wallet adapters here.
- npm
- Yarn
- Bun
- pnpm
npm install @solana/wallet-adapter-wallets
yarn add @solana/wallet-adapter-wallets
bun add @solana/wallet-adapter-wallets
pnpm add @solana/wallet-adapter-wallets
import { createAppKit } from '@reown/appkit/react'
import { SolanaAdapter } from '@reown/appkit-adapter-solana/react'
import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks'
import { SolflareWalletAdapter, PhantomWalletAdapter } from '@solana/wallet-adapter-wallets'
// 0. Set up Solana adapter
const solanaWeb3JsAdapter = new SolanaAdapter({
wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()]
})
// 1. Get projectId from https://cloud.reown.com
const projectId = 'YOUR_PROJECT_ID'
// 2. Set up the metadata
const metadata = {
//...
}
// 3. Create modal
const modal = createAppkit({
adapters: [solanaWeb3JsAdapter],
networks: [solana, solanaTestnet, solanaDevnet],
metadata: metadata,
projectId,
features: {
analytics: true,
}
})