Quick Start

Automatic Setup

We recommend creating a new Crossbell app using create-next-app, which sets up everything automatically for you. To create a project, run:

pnpm create next-app --example https://github.com/Crossbell-Box/crossbell-app-template crossbell-app

Manual Setup

Install dependencies

Install @crossbell/connect-kit and its peer dependencies in your project.

pnpm i @crossbell/connect-kit @tanstack/react-query wagmi

Setup providers

app.tsx

import { WagmiConfig } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConnectKitProvider, createWagmiConfig } from "@crossbell/connect-kit";
 
import { Main } from "./main";
 
const queryClient = new QueryClient();
const wagmiConfig = createWagmiConfig({
	appName: "Crossbell Dev",
	// WalletConnect Project ID.
	// You can create or find it at https://cloud.walletconnect.com
	walletConnectV2ProjectId: "YOUR_PROJECT_ID",
});
 
export default function App() {
	return (
		<QueryClientProvider client={queryClient}>
			<WagmiConfig config={wagmiConfig}>
				<ConnectKitProvider>
					<Main />
				</ConnectKitProvider>
			</WagmiConfig>
		</QueryClientProvider>
	);
}

Import styles

app.tsx

import "@crossbell/connect-kit/colors.css";

You're good to go!

Here is an example of adding a connect button to your app.

main.tsx

import { ConnectButton } from "@crossbell/connect-kit";
 
export const Main = () => (
	<ConnectButton>
		{(status, { connect, disconnect }) => (
			<button onClick={status.isConnected ? disconnect : connect}>
				{status.isConnected ? "Disconnect" : "Connect"}
			</button>
		)}
	</ConnectButton>
);

Introduction ConnectButton