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

v2.0 changes: signMessage now returns Promise<string> (was Promise<unknown>). sendTransaction accepts UnsignedTransactionRequest directly and returns Promise<string>. New methods: signTypedData, isBalancesLoading, fetchForAllNetworks, setFetchForAllNetworks.

Import

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

Usage

function YourComponent() {
	const {
		ready,
		authenticated,
		user,
		refreshUser,
		balances,
		refreshBalances,
		nativeSymbol,
		hasBalances,
		isBalancesLoading,
		signMessage,
		signTypedData,
		sendTransaction,
		login,
		logout,
		fetchForAllNetworks,
		setFetchForAllNetworks,
		hideWidget,
		glyphUrl,
	} = useGlyph();

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

	return (
		<div>
			{authenticated ? (
				<div>
					<h2>Welcome, {user?.name}</h2>
					<p>
						Your balance: {balances?.wallet_value?.total} {balances?.wallet_value?.currency}
					</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, picture, and evmWallet.
refreshUser	(force?: boolean) => Promise<void>	Refreshes user data from the Glyph API. Pass force: true to bypass cache.
balances	GlyphWidgetBalances | null	User's token balances if authenticated. Contains information about available tokens and their values.
refreshBalances	(force?: boolean, cbs?: Record<string, (diffAmount: number) => void>) => Promise<void>	Refreshes balances. Pass force: true to bypass cache. Optionally accepts callbacks for specific token balance changes.
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.
isBalancesLoading	boolean	Whether a balance fetch is currently in progress.
signMessage	(params: { message: string }) => Promise<string>	Function to sign messages with the user's wallet. Returns the signature as a hex string.
signTypedData	(params: { data: SignTypedDataParams }) => Promise<string>	Function to sign EIP-712 typed data. Returns the signature as a hex string.
sendTransaction	(params: { transaction: UnsignedTransactionRequest }) => Promise<string>	Function to send transactions. Returns the transaction hash. If chainId is omitted, uses the currently connected chain.
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.
fetchForAllNetworks	boolean	Whether balances are being fetched across all supported chains (multi-chain mode).
setFetchForAllNetworks	(value: boolean) => void	Toggle multi-chain balance mode. When true, balances span all supported chains instead of just the current one.
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;
}

Signing Typed Data (EIP-712)

function SignTypedDataButton() {
	const { signTypedData, authenticated } = useGlyph();

	const handleSign = async () => {
		try {
			const signature = await signTypedData({
				data: {
					types: {
						EIP712Domain: [
							{ name: "name", type: "string" },
							{ name: "version", type: "string" },
						],
						Message: [{ name: "content", type: "string" }],
					},
					primaryType: "Message",
					message: { content: "Hello from Glyph!" },
				},
			});
			console.log("Typed data signature:", signature);
		} catch (error) {
			console.error("Failed to sign typed data:", error);
		}
	};

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

Sending a Transaction

import { parseEther } from "viem";

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

	const handleSend = async () => {
		try {
			const hash = await sendTransaction({
				transaction: {
					to: "0x...",
					value: parseEther("0.1"),
				},
			});
			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>Wallet: {user?.evmWallet?.slice(0, 10)}...</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