Getting Started
ConnectKit is the simplest way to integrate a connect wallet experience into your React.js web application. It comes with sensible defaults out of the box so you can focus on building.
1. Install
Install ConnectKit and its peer dependencies (wagmi and viem).
Terminal
npm install connectkit wagmi viem
2. API Keys
ConnectKit utilises WalletConnect's SDK to help with connecting wallets. WalletConnect 2.0 requires a projectId which you can create quickly and easily for free over at WalletConnect Cloud.
ConnectKit requires an Infura or Alchemy API key depending on which networks your dApp requires. To learn more about the differences between Infura and Alchemy, visit Providers.
3. Implementation
Start by importing wagmi and ConnectKit, then create a config using either wagmi's createConfig method or the pre-configured getDefaultConfig ConnectKit provides.
Below is a simple example app using getDefaultConfig() to help you get started:
App.jsx
import { WagmiConfig, createConfig } from "wagmi";import { ConnectKitProvider, ConnectKitButton, getDefaultConfig } from "connectkit";const config = createConfig(getDefaultConfig({// Required API KeysalchemyId: process.env.ALCHEMY_ID, // or infuraIdwalletConnectProjectId: process.env.WALLETCONNECT_PROJECT_ID,// RequiredappName: "Your App Name",// OptionalappDescription: "Your App Description",appUrl: "https://family.co", // your app's urlappIcon: "https://family.co/logo.png", // your app's icon, no bigger than 1024x1024px (max. 1MB)}),);const App = () => {return (<WagmiConfig config={config}><ConnectKitProvider>/* Your App */<ConnectKitButton /></ConnectKitProvider></WagmiConfig>);};
And voilà, you've successfully set up ConnectKit.
4. Connected Wallet Info
In a lot of use cases, you will want to access the connected wallet from ConnectKit in order to be able to interact with it further. You can do so by using the different hooks, such as useAccount, from wagmi (a ConnectKit dependency).
In the previous example above we wrapped our app with a <ConnectKitProvider> top-level. Before utilizing any wagmi hook, make sure the components you build are mounted under this provider.
Below is a simple example component that utilizes the useAccount hook to access connection state and the connected wallet address:
MyComponent.jsx
import { useAccount } from "wagmi";// Make sure that this component is wrapped with ConnectKitProviderconst MyComponent = () => {const { address, isConnecting, isDisconnected } = useAccount();if (isConnecting) return <div>Connecting...</div>;if (isDisconnected) return <div>Disconnected</div>;return <div>Connected Wallet: {address}</div>;};
That's it—you now have a simple component that displays the connected wallet's address.
Components
Below is a list of React.js components we provide as part of the library:
Component | Description | |
---|---|---|
<ConnectKitProvider /> | Provides state and data to various ConnectKit components. Wrap ConnectKitProvider around your React.js app. | |
<ConnectKitButton /> | The ConnectKit button. Place this component where you’d like the Connect Wallet button to appear. | |
<ConnectKitButton.Custom /> | Design your own Connect button. Various wallet connection states are provided through render props. |
Quick Start
To get started quickly, feel free to use any of our example apps below.