GlyphWalletProvider

The GlyphWalletProvider component is a React provider that wraps the WagmiProvider and QueryClientProvider, providing the GlyphWallet context to your application. This allows you to use Glyph Wallet functionality throughout your application. Learn more on the Native Integration guide.

WARNING

v2.0 Breaking Change: The chains and transports props have been removed. Chains are now fetched dynamically from the Glyph backend via useGlyphConfigureDynamicChains (called internally). You no longer need to pass chains manually.

Internal Structure

The GlyphWalletProvider component is a wrapper around several providers that work together to provide the Glyph Wallet context:

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

Import

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

Usage

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

function App() {
	return (
		<GlyphWalletProvider>
			{/* Your application components */}
		</GlyphWalletProvider>
	);
}

export default App;

How chains are configured

GlyphWalletProvider calls useGlyphConfigureDynamicChains internally to fetch the supported chains from the Glyph backend. It then creates the wagmi config and transports automatically. The component renders null until chains are loaded.

You do not need to call useGlyphConfigureDynamicChains yourself when using this provider. If you need full control over the wagmi config (e.g. custom transports), use GlyphProvider directly with the hook instead.

Props

queryClient QueryClient

Optional query client to use. If not provided, defaults to a standard query client.

ssr boolean

Whether to use server-side rendering. Use this if you're using Next.js or other frameworks that require server-side rendering.

glyphUrl string

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

useStagingTenant boolean

Optional. Use the staging tenant instead of production.

children React.ReactNode required

The child components that will have access to the Glyph Wallet context.

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.

Migration from v1.x

If upgrading from v1.x, remove the chains and transports props:

// v1.x (old)
<GlyphWalletProvider chains={[apeChain]} transports={...}>

// v2.x (new) -- chains and transports are no longer needed
<GlyphWalletProvider>

Chains are now fetched from the Glyph backend at runtime via useGlyphConfigureDynamicChains.