useGlyphConfigureDynamicChains

A hook that dynamically fetches the list of supported chains from the Glyph backend and configures the Relay client accordingly. This is used internally by GlyphPrivyProvider and GlyphWalletProvider, but can be used directly when building a custom provider setup with GlyphProvider.

WARNING

This hook should only be called once at the top level of your application. Calling it in multiple components will result in redundant API requests.

Import

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

Usage

If you are using GlyphPrivyProvider or GlyphWalletProvider, you do not need this hook -- chains are configured automatically.

For custom setups using GlyphProvider directly (e.g. with ConnectKit, RainbowKit, or bare wagmi):

import {
	useGlyphConfigureDynamicChains,
	GlyphProvider,
	glyphWalletConnector,
	StrategyType,
	WalletClientType,
} from "@use-glyph/sdk-react";
import { WagmiProvider, createConfig, http } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
	const { chainIds, chains } = useGlyphConfigureDynamicChains();

	if (!chainIds || chains.length === 0) {
		return <div>Loading chains...</div>;
	}

	const config = createConfig({
		chains,
		transports: Object.fromEntries(chains.map((c) => [c.id, http()])),
		connectors: [glyphWalletConnector()],
	});

	return (
		<WagmiProvider config={config}>
			<QueryClientProvider client={queryClient}>
				<GlyphProvider
					strategy={StrategyType.EIP1193}
					walletClientType={WalletClientType.WAGMI}
					askForSignature={true}
				>
					{/* Your app */}
				</GlyphProvider>
			</QueryClientProvider>
		</WagmiProvider>
	);
}

TIP

When using ConnectKit or RainbowKit, use their respective connectors instead of glyphWalletConnector. See the ConnectKit and RainbowKit integration guides.

Parameters

Parameter	Type	Required	Description
glyphUrl	string	No	Override the Glyph API URL (e.g. for staging environments).

Return Type

Property	Type	Description
chainIds	[number, ...number[]] | undefined	The list of supported chain IDs fetched from the Glyph API. undefined while loading.
chains	[Chain, ...Chain[]]	An array of viem Chain objects corresponding to the supported chains.

How It Works

1. On mount, the hook fetches /api/public/supported_chains from the Glyph API.
2. The response includes both the chain IDs and full RelayChain definitions.
3. Each RelayChain is converted to a viem Chain using configureViemChain.
4. The Relay client is configured with the returned chains.

Notes

• GlyphProvider will throw an error if the wagmi chains do not match the chains returned by this hook. Ensure your wagmi config uses the same chains.
• The hook only fetches once; subsequent renders reuse the cached result.