RainbowKit

Learn how to integrate Glyph with RainbowKit.

The @use-glyph/sdk-react package includes an option to include Glyph Wallet as a connection option in your RainbowKit ConnectButton.

GitHub Examples

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

Demo

View a demo of Glyph integrated with RainbowKit.

Installation

Install the required dependencies:

npm

npm install @use-glyph/sdk-react@^2 @rainbow-me/rainbowkit wagmi viem @tanstack/react-query

yarn

yarn add @use-glyph/sdk-react@^2 @rainbow-me/rainbowkit wagmi viem @tanstack/react-query

pnpm

pnpm add @use-glyph/sdk-react@^2 @rainbow-me/rainbowkit wagmi viem @tanstack/react-query

bun

bun add @use-glyph/sdk-react@^2 @rainbow-me/rainbowkit wagmi viem @tanstack/react-query

Import

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

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

Usage

1. Configure the Providers

Wrap your application in the following providers:

• WagmiProvider from wagmi.
• QueryClientProvider from @tanstack/react-query.
• RainbowKitProvider from @rainbow-me/rainbowkit.

import {
	glyphConnectorDetails,
	GlyphProvider,
	glyphWalletRK,
	useGlyphConfigureDynamicChains,
	StrategyType,
	WalletClientType,
} from "@use-glyph/sdk-react";
import {
	connectorsForWallets,
	RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { http, Transport } from "viem";
import { createConfig, WagmiProvider } from "wagmi";
import { useMemo } from "react";

const queryClient = new QueryClient();

const connectors = connectorsForWallets(
	[
		{
			groupName: glyphConnectorDetails.name,
			wallets: [glyphWalletRK],
		},
	],
	{
		appName: glyphConnectorDetails.name,
		projectId: glyphConnectorDetails.id,
	}
);

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,
		});
	}, [chains]);

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

	return (
		<WagmiProvider config={wagmiConfig}>
			<QueryClientProvider client={queryClient}>
				<RainbowKitProvider>
					<GlyphProvider
						strategy={StrategyType.EIP1193}
						walletClientType={WalletClientType.RAINBOWKIT}
						askForSignature={true}
					>
						{children}
					</GlyphProvider>
				</RainbowKitProvider>
			</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 ConnectButton

Render the ConnectButton from @rainbow-me/rainbowkit anywhere in your app.

import { ConnectButton } from "@rainbow-me/rainbowkit";

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

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 directly using the wagmi hooks.

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>;
};