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.

Import

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

Usage

import { GlyphProvider, StrategyType } from "@use-glyph/sdk-react";
import { PrivyProvider } from "@privy-io/react-auth";
import { WagmiProvider, createConfig } from "@privy-io/wagmi";
import { http } from "viem";
import { apeChain } from "@use-glyph/sdk-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// Configure wagmi
const config = createConfig({
	chains: [apeChain],
	transports: {
		[apeChain.id]: http(),
	},
});

const queryClient = new QueryClient();

function App() {
	return (
		<PrivyProvider appId="YOUR_PRIVY_APP_ID">
			<QueryClientProvider client={queryClient}>
				<WagmiProvider config={config}>
					<GlyphProvider strategy={StrategyType.PRIVY}>
						{/* Your app content and other Glyph components */}
						<YourComponent />
					</GlyphProvider>
				</WagmiProvider>
			</QueryClientProvider>
		</PrivyProvider>
	);
}

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. 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.

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
• balances: Token balances object or null if not authenticated
• refreshBalances: Function to refresh balances
• refreshUser: Function to refresh user information
• login: Function to initiate login
• logout: Function to initiate logout
• signMessage: Function to sign messages
• sendTransaction: Function to send transactions
• symbol: Current chain's native token symbol
• hideWidget: Boolean to control widget visibility (only for EIP1193 strategy)
• glyphUrl: The base URL for the Glyph Widget API or the Glyph Portal/Dashboard. 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 { PrivyProvider } from "@privy-io/react-auth";
import { WagmiProvider, createConfig } from "@privy-io/wagmi";
import { ErrorBoundary } from "react-error-boundary";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

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

function App() {
	const queryClient = new QueryClient();
	const config = createConfig({
		chains: [apeChain],
		transports: {
			[apeChain.id]: http(),
		},
	});

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