Connecting Core Extension

Core Extension provides multiple ways for dApps to interact. In addition to implementing EIP-1159, EIP-6963, and EIP-5749, Core also makes the standard EIP-1159 provider available via the window.avalanche object to provide even more conflict-free connection options.

By implementing these standards, Core is compatible with the most popular frontend libraries used for wallet connections, such as [WAGMI], RainbowKit, web3-react, etc. Some libraries, such as WAGMI, use EIP-6963 for wallet discovery and detect Core automatically when using the generic injected provider. Other libraries, like web3-react, need wallet-specific connectors, and some libraries can handle both EIP-6963 and provide wallet-specific connectors for even more control. While RainbowKit has a Core provider available, it uses WAGMI under the hood, which makes it capable of using generic wallet discovery via EIP-6963.

Using WAGMI

WAGMI official website: https://wagmi.sh/

Since WAGMI uses EIP-6963, it will auto-detect Core alongside all other wallets implementing the same interface. For this reason, the best and quickest way to connect Core with WAGMI is using their default settings per their getting started guide: https://wagmi.sh/react/getting-started#getting-started

Example config:

import { http, createConfig } from 'wagmi'
import { avalanche, avalancheFuji } from 'wagmi/chains'

export const config = createConfig({
    chains: [avalanche, avalancheFuji],
    transports: {
        [avalanche.id]: http(),
        [avalancheFuji.id]: http(),
    },
})

Limiting WAGMI to allow Core ONLY

WAGMI provides configuration options for disabling wallet discovery. Disabling wallet discovery and configuring the injected provider allows it to display only Core in the wallet list.

Example config:

import { http, createConfig } from 'wagmi'
import { avalanche, avalancheFuji } from 'wagmi/chains'
import { injected } from 'wagmi/connectors'

export const config = createConfig({
    chains: [avalanche, avalancheFuji],
    multiInjectedProviderDiscovery: false,
    connectors: [
        injected({
            target() {
                return {
                    id: 'CoreWallet',
                    name: 'Core',
                    provider: window.avalanche,
                }
            },
        }),
    ],
    transports: {
        [avalanche.id]: http(),
        [avalancheFuji.id]: http(),
    },
})

Using RainbowKit

RainbowKit official website: https://www.rainbowkit.com

Since RainbowKit also has wallet discovery, using their default settings is the easiest way to integrate with Core. RainbowKit's installation guide: https://www.rainbowkit.com/docs/installation