useGlyph

The main hook for accessing the Glyph context and core functionality. It provides access to user authentication state, wallet operations, and other Glyph features.

INFO

symbol has been replaced by nativeSymbol (derived from balances, falls back to "APE"). The hasBalances property indicates whether balances have been loaded.

Import

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

Usage

function YourComponent() {
	const {
		ready,
		authenticated,
		user,
		balances,
		nativeSymbol,
		hasBalances,
		signMessage,
		sendTransaction,
		login,
		logout,
		hideWidget,
		glyphUrl,
	} = useGlyph();

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

	return (
		<div>
			{authenticated ? (
				<div>
					<h2>Welcome, {user?.name}</h2>
					<p>
						Your balance: {balances?.total} {nativeSymbol}
					</p>
					<button onClick={logout}>Logout</button>
				</div>
			) : (
				<button onClick={login}>Login</button>
			)}
		</div>
	);
}

WARNING

Always check that ready is true before using values like authenticated and user. The values may be outdated while the Glyph context initializes.

Return Type

Property	Type	Description
ready	boolean	Indicates if the Glyph context is ready to be used. You should wait for this to be true before using other values.
authenticated	boolean	User authentication status. True if the user is authenticated, false otherwise.
user	GlyphWidgetUser | null	User object if authenticated, null otherwise. Contains user information such as name, email, and profile picture.
balances	GlyphWidgetBalances | null	User's token balances if authenticated. Contains information about available tokens and their values.
nativeSymbol	string	The symbol of the native token for the current chain (e.g. "APE", "ETH"), or "APE" if not found.
hasBalances	boolean	Whether balances have been loaded. False on first load or when the user just switched chains.
signMessage	(params: { message: string }) => Promise<unknown>	Function to sign messages with the user's wallet. Takes a message string and returns a promise that resolves to the signature.
sendTransaction	(params: { transaction: UnsignedTransactionRequest & { chainId: number } }) => Promise<string | { hash: Hex }>	Function to send transactions. Takes a transaction object and returns a promise that resolves to the transaction hash.
login	() => void	Function to initiate the login process. Opens the authentication flow for the user.
logout	() => void	Function to log out the current user and clear their session.
hideWidget	boolean | undefined	Whether to hide the Glyph Widget. Can be used to control widget visibility programmatically.
glyphUrl	string	The base URL for the Glyph Widget API. If not overridden, uses the default API URL.

Examples

Signing a Message

function SignMessageButton() {
	const { signMessage, authenticated } = useGlyph();

	const handleSign = async () => {
		try {
			const signature = await signMessage({
				message: "Hello, Glyph!",
			});
			console.log("Signature:", signature);
		} catch (error) {
			console.error("Failed to sign message:", error);
		}
	};

	return authenticated ? (
		<button onClick={handleSign}>Sign Message</button>
	) : null;
}

Sending a Transaction

import { parseEther } from "viem";

function SendTransactionButton() {
	const { sendTransaction, authenticated } = useGlyph();

	const handleSend = async () => {
		try {
			const transaction = {
				to: "0x...", // recipient address
				value: parseEther("0.1"), // ETH amount in wei
			};
			const hash = await sendTransaction({ transaction });
			console.log("Transaction hash:", hash);
		} catch (error) {
			console.error("Failed to send transaction:", error);
		}
	};

	return authenticated ? (
		<button onClick={handleSend}>Send Transaction</button>
	) : null;
}

Checking Authentication State

function AuthStatus() {
	const { ready, authenticated, user } = useGlyph();

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

	return (
		<div>
			{authenticated ? (
				<div>
					<h2>Welcome, {user?.name}</h2>
					<p>Email: {user?.email}</p>
				</div>
			) : (
				<p>Please log in to continue</p>
			)}
		</div>
	);
}

Error Handling

The hook will throw an error if used outside of a GlyphProvider:

function Component() {
	try {
		const glyph = useGlyph();
		// Use glyph...
	} catch (error) {
		// Handle error: "useGlyph must be used within GlyphProvider"
	}
}

Best Practices

1. Always check the ready state before using other values
2. Handle authentication state changes appropriately
3. Use proper error handling for async operations