GlyphProvider

The React context provider component that serves as a wrapper for implementing different wallet connection strategies. All other components and hooks must be used within this provider.

TIP

If you're using GlyphPrivyProvider or GlyphWalletProvider, you don't need to use GlyphProvider directly -- those providers wrap it internally and handle chain configuration for you.

Use GlyphProvider directly only when you need full control over the wagmi/query provider stack.

Import

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

Usage

In v2.x, chains are configured dynamically. Use useGlyphConfigureDynamicChains to fetch the supported chains before creating your wagmi config:

import {
	GlyphProvider,
	useGlyphConfigureDynamicChains,
	StrategyType,
} from "@use-glyph/sdk-react";
import { PrivyProvider } from "@privy-io/react-auth";
import { WagmiProvider, createConfig } from "@privy-io/wagmi";
import { http, Transport } from "viem";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
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>),
		});
	}, [chains]);

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

	return (
		<PrivyProvider appId="YOUR_PRIVY_APP_ID">
			<QueryClientProvider client={queryClient}>
				<WagmiProvider config={wagmiConfig}>
					<GlyphProvider strategy={StrategyType.PRIVY}>
						{children}
					</GlyphProvider>
				</WagmiProvider>
			</QueryClientProvider>
		</PrivyProvider>
	);
}

function App() {
	return (
		<AppWithProviders>
			<YourComponent />
		</AppWithProviders>
	);
}

Props

strategy StrategyType

The wallet connection strategy to use. Defaults to StrategyType.PRIVY. Available strategies:

• StrategyType.PRIVY: Uses Privy for authentication and wallet management
• StrategyType.EIP1193: Uses EIP-1193 compatible wallets

walletClientType WalletClientType

The wallet client type to use. Read more about available wallet client types in the WalletClientType section.

askForSignature boolean

Optional. Only applicable when strategy is StrategyType.EIP1193. Whether to ask for a signature from the user after connecting. Set to false if you DO NOT intend to use the Glyph Widget or need the useGlyph hook's context to be authenticated. Defaults to true.

glyphUrl string

Optional. Override the Glyph API URL (e.g. for staging environments).

useStagingTenant boolean

Optional. Use the staging tenant instead of production.

onLogin () => void

Optional. A callback function that is called when the user logs in.

onLogout () => void

Optional. A callback function that is called when the user logs out.

Provider Nesting

The GlyphProvider must be nested within the following providers in this specific order:

PrivyProvider
└── QueryClientProvider
    └── WagmiProvider
        └── GlyphProvider
            └── Your Components

Context Values

The GlyphProvider provides the following values to its children through React Context:

• ready: Boolean indicating if the context is ready to be used
• authenticated: Boolean indicating if the user is authenticated
• user: User information object or null if not authenticated
• refreshUser: Function to refresh user data from the Glyph API
• balances: Token balances object or null if not authenticated
• refreshBalances: Function to refresh token balances
• nativeSymbol: Current chain's native token symbol
• hasBalances: Whether balances have been loaded
• isBalancesLoading: Whether a balance fetch is in progress
• fetchForAllNetworks: Whether multi-chain balance mode is active
• setFetchForAllNetworks: Toggle multi-chain balance mode
• signMessage: Function to sign messages (returns Promise<string>)
• signTypedData: Function to sign EIP-712 typed data (returns Promise<string>)
• sendTransaction: Function to send transactions (returns Promise<string>)
• login: Function to initiate login
• logout: Function to initiate logout
• hideWidget: Boolean to control widget visibility (only for EIP1193 strategy)
• glyphUrl: The base URL for the Glyph Widget API. If not overridden, uses the default URL.

These values can be accessed using the useGlyph hook.

Example with Error Handling

import { GlyphProvider, StrategyType } from "@use-glyph/sdk-react";
import { ErrorBoundary } from "react-error-boundary";

function ErrorFallback({ error }) {
	return (
		<div role="alert">
			<p>Something went wrong with the Glyph Widget:</p>
			<pre>{error.message}</pre>
		</div>
	);
}

// Inside your provider stack (see Usage above for full setup):
<ErrorBoundary FallbackComponent={ErrorFallback}>
	<GlyphProvider strategy={StrategyType.PRIVY}>
		<YourComponent />
	</GlyphProvider>
</ErrorBoundary>