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.

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";
import { apeChain, Chain } from "viem/chains";

const supportedChains: [Chain, ...Chain[]] = [apeChain]; // Add more chains if needed

function App() {
	return (
		<GlyphPrivyProvider
			appId={"cm..."} // Your Privy app ID
			clientId={"client-..."} // Your Privy client ID
			config={{
				loginMethodsAndOrder: {
					primary: [GLYPH_APP_LOGIN_METHOD, "google"], // Glyph, Google etc.
				},
				embeddedWallets: {
					createOnLogin: "off", // 'users-without-wallets' | 'all-users' | 'off'
					extendedCalldataDecoding: true,
				},
				supportedChains,
				defaultChain: supportedChains[0],
			}}
			chains={supportedChains}
		>
			{/* Your application components */}
		</GlyphPrivyProvider>
	);
}

export default App;

Props

Extends PrivyProvider props.

Additional Props

chains Chain[] required

The chains to use, defaults to apeChain.

transports Record<number, Transport>

Optional transports to use, defaults to standard http.

queryClient QueryClient

Optional query client to use, 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.

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.