Native Integration

Integrate Glyph into an existing React application using the steps below with Wagmi and Tanstack Query only.

GitHub Examples

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

Demo

View a demo of Glyph integrated with Wagmi and Tanstack Query.

Installation

Install the required dependencies:

npm

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

yarn

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

pnpm

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

bun

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

Usage

1. Setup the GlyphWalletProvider

Wrap your application in the GlyphWalletProvider component to enable the use of the package's hooks and components throughout your application.

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

const App = () => {
	return (
		<GlyphWalletProvider askForSignature={true}>
			{/* Your application components */}
		</GlyphWalletProvider>
	);
};

INFO

In v2.x, chains are configured dynamically from the Glyph backend. You no longer need to pass chains or transports props.

TIP

Next.js App Router: If you are using Next.js App Router, create a new component and add the use client directive at the top of your file and wrap your application in this component

NextGlyphWalletWrapper.tsx

"use client";

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

export default function NextGlyphWalletWrapper({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<GlyphWalletProvider askForSignature={true}>
			{children}
		</GlyphWalletProvider>
	);
}

app/layout.tsx

import NextGlyphWalletWrapper from "@/components/NextGlyphWalletWrapper";

export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return <NextGlyphWalletWrapper>{children}</NextGlyphWalletWrapper>;
}

The GlyphWalletProvider wraps your application in both the WagmiProvider and QueryClientProvider, meaning you can use the hooks and features of these libraries within your application.

Method 1

2. Connect and generate an authentication token for the user (Recommended)

You can use the a single button to connect to Glyph wallet and generate an authentication token for the user. This is recommended for most use cases. Read more here NativeGlyphConnectButton.

import { NativeGlyphConnectButton, LogoutButton } from "@use-glyph/sdk-react";
import { useAccount } from "wagmi";

const YourComponent = () => {
	const { isConnected } = useAccount();
	return isConnected ? <NativeGlyphConnectButton /> : <LogoutButton />;
};

Method 2

2. Login with Glyph

INFO

If the account is not already created, this will create a new account.

TIP

If you want to give users the ability to create an account on Glyph's Dashboard and follow a full onboarding flow (setting their username, profile picture, etc.), you can use the SignUpButton component. They can come back to your app and login with their Glyph Wallet after signing up.

Use the useNativeGlyphConnection hook to connect to Glyph wallet.

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

const ConnectButton = () => {
	const { connect } = useNativeGlyphConnection();
	return <button onClick={connect}>Connect to Glyph</button>;
};

• The connect function finds the Glyph Wallet connector and uses Wagmi's useConnect function to connect to it.

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 GlyphWalletProvider 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 useNativeGlyphConnection, or
• the useGlyph hook, or
• the LogoutButton component
• the useDisconnect hook from wagmi

const { disconnect } = useNativeGlyphConnection();

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

INFO

When a user disconnects their Glyph wallet through any of the available methods, their authentication token will be automatically invalidated.