ConnectKit

Learn how to integrate Glyph with ConnectKit.

The @use-glyph/sdk-react package includes an option to include Glyph Wallet as a connection option in the ConnectKit ConnectKitButton component.

GitHub Examples

Use our example repo to quickly get started with Glyph and ConnectKit.

Demo

View a demo of Glyph integrated with ConnectKit.

Installation

Install the required dependencies:

npm

npm install @use-glyph/sdk-react@^2 wagmi viem connectkit @tanstack/react-query

yarn

yarn add @use-glyph/sdk-react@^2 wagmi viem connectkit @tanstack/react-query

pnpm

pnpm add @use-glyph/sdk-react@^2 wagmi viem connectkit @tanstack/react-query

bun

bun add @use-glyph/sdk-react@^2 wagmi viem connectkit @tanstack/react-query

Import

The @use-glyph/sdk-react package includes the glyphWalletConnector connector you can use to add Glyph Wallet as a connection option in your ConnectKit.

import { glyphWalletConnector } from "@use-glyph/sdk-react";

Usage

1. Configure the Providers

Wrap your application in the required providers:

import {
	GlyphProvider,
	glyphWalletConnector,
	useGlyphConfigureDynamicChains,
	StrategyType,
	WalletClientType,
} from "@use-glyph/sdk-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConnectKitProvider } from "connectkit";
import { http, Transport } from "viem";
import { createConfig, WagmiProvider } from "wagmi";
import { useMemo } from "react";

const queryClient = new QueryClient();

function AppWithProviders({ children }: { children: React.ReactNode }) {
	const { chains } = useGlyphConfigureDynamicChains();

	const wagmiConfig = useMemo(() => {
		if (chains.length === 0) return null;
		return createConfig({
			chains,
			transports: chains.reduce((acc, chain) => {
				acc[chain.id] = http();
				return acc;
			}, {} as Record<number, Transport>),
			connectors: [glyphWalletConnector()],
		});
	}, [chains]);

	if (!wagmiConfig) return <div>Loading chains...</div>;

	return (
		<WagmiProvider config={wagmiConfig}>
			<QueryClientProvider client={queryClient}>
				<ConnectKitProvider>
					<GlyphProvider
						strategy={StrategyType.EIP1193}
						walletClientType={WalletClientType.CONNECTKIT}
						askForSignature={true}
					>
						{children}
					</GlyphProvider>
				</ConnectKitProvider>
			</QueryClientProvider>
		</WagmiProvider>
	);
}

export default function App() {
	return (
		<AppWithProviders>
			{/* Your app */}
		</AppWithProviders>
	);
}

INFO

In v2.x, chains are fetched dynamically from the Glyph backend using useGlyphConfigureDynamicChains. The wagmi config is created once the chains are available.

2. Render the ConnectKitButton

Render the ConnectKitButton component anywhere in your application:

import { ConnectKitButton } from "connectkit";

export default function Home() {
	return <ConnectKitButton />;
}

3. Generate an authentication token for the user (optional)

To start using the useGlyph hook or the Glyph Widget, you need to generate an authentication token for the user.

INFO

You can skip this step if you are directly using the wagmi hooks or/and are not planning to use the useGlyph hook or the GlyphWidget component.

WARNING

Passing true to the askForSignature prop will automatically start the Glyph Widget’s authentication flow after connecting. However, some browsers may block popups from opening automatically. In these cases, users will need to manually click a button to sign a message. For the best user experience, consider displaying a dialog or modal prompting users to click the button to continue. You can trigger this flow by calling the login function from the useGlyph hook. You can also choose to disable the automatic signMessage request by setting askForSignature to false in the GlyphProvider component.

import { useGlyph } from "@use-glyph/sdk-react";

const { login } = useGlyph();

const LoginButton = () => {
	return <button onClick={login}>Sign a message</button>;
};

Alternatively, you can use the LoginButton component to sign a message and generate an authentication token for the user.

import { LoginButton } from "@use-glyph/sdk-react";

const LoginButton = () => {
	return <LoginButton />;
};

4. Use hooks and functions

Once the user has signed in, you can begin to use any of the @use-glyph/sdk-react hooks, such as useGlyph as well as all of the existing wagmi hooks; such as useAccount, useBalance, etc.

import { useAccount, useSendTransaction, useChainId } from "wagmi";
import { parseEther } from "viem";

export default function Example() {
	const chainId = useChainId();
	const { address, status } = useAccount();
	const { sendTransaction, isPending } = useSendTransaction();

	const amount = parseEther("1");
	const recipientAddress = "0x...some-recipient-address"; // recipient address

	return (
		<button
			onClick={() => {
				sendTransaction({
					chainId,
					to: recipientAddress,
					value: amount,
				});
			}}
			disabled={isPending || status !== "connected"}
		>
			{isPending ? "Sending..." : "Send Transaction"}
		</button>
	);
}

4. Logout users

Use any of the following methods to logout users:

• the useGlyph hook, or
• the LogoutButton component
• the useDisconnect hook from wagmi

const { logout } = useGlyph();

const LogoutButton = () => {
	return <button onClick={logout}>Logout</button>;
};