GlyphPrivyProvider

The GlyphPrivyProvider component is a wrapper component that provides the Glyph Wallet context to your application, allowing you to use hooks and components.

Wrap your application in the GlyphPrivyProvider component to enable the use of the package's hooks and components throughout your application. Learn more on the Privy 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 GlyphPrivyProvider component is a wrapper around the PrivyProvider component. It adds the Glyph Wallet context to your application, allowing you to use hooks and components.

It also wraps the QueryClientProvider component, which is used to provide the Glyph Wallet context to your application.

It also wraps the WagmiProvider component, which is used to provide the Glyph Wallet context to your application.

It also wraps an internal InjectWagmiConnector component, which injects the Glyph Wallet connector into the Privy Wagmi Provider.

It also wraps the GlyphProvider component, which is used to provide the Glyph Wallet context to your application.

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

Import

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

Usage

import {
	GlyphPrivyProvider,
	GLYPH_APP_LOGIN_METHOD,
} from "@use-glyph/sdk-react";

function App() {
	return (
		<GlyphPrivyProvider
			appId={"cm..."} // Your Privy app ID
			clientId={"client-..."} // Your Privy client ID
			config={{
				loginMethodsAndOrder: {
					primary: [GLYPH_APP_LOGIN_METHOD, "google"],
				},
				embeddedWallets: {
					createOnLogin: "off",
					extendedCalldataDecoding: true,
				},
			}}
		>
			{/* Your application components */}
		</GlyphPrivyProvider>
	);
}

export default App;

How chains are configured

GlyphPrivyProvider 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

Extends PrivyProvider props (excluding config.supportedChains, which is managed internally).

Additional Props

config GlyphPrivyConfig

Optional Privy client configuration. This is PrivyClientConfig with supportedChains omitted (chains are configured dynamically). If not provided, defaults to using the Glyph cross-app login method.

queryClient QueryClient

Optional query client to use, defaults to a standard query client.

glyphUrl string

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

useStagingTenant boolean

Optional. Use the staging Privy tenant instead of production.

ssr boolean

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

children React.ReactNode required

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

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)
<GlyphPrivyProvider chains={[apeChain]} transports={...} config={{...}}>

// v2.x (new) -- chains and transports are no longer needed
<GlyphPrivyProvider config={{...}}>

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