Privy

Privy powers the login screen and EOA creation of Glyph Wallet, meaning you can use Privy’s features and SDKs natively alongside Glyph.

The @use-glyph/sdk-react package provides an GlyphPrivyProvider component, which wraps your application with the PrivyProvider, the Wagmi and TanStack Query providers, the GlyphProvider as well as the InjectWagmiConnector; allowing you to use the features of each library with Glyph Wallet.

GitHub Examples

Use our example repo to quickly get started with Glyph and Privy (Cross App).

Demo

View a demo of Glyph integrated with Privy (Cross App).

Installation

Install the required dependencies:

npm

npm install @use-glyph/sdk-react@^2 wagmi viem @tanstack/react-query

yarn

yarn add @use-glyph/sdk-react@^2 wagmi viem @tanstack/react-query

pnpm

pnpm add @use-glyph/sdk-react@^2 wagmi viem @tanstack/react-query

bun

bun add @use-glyph/sdk-react@^2 wagmi viem @tanstack/react-query

Usage

This section assumes you have already created an app on the Privy dashboard.

1. Enable Glyph Integration

From the Privy dashboard, navigate to User management > Global wallet > Integrations.

Scroll down to find Glyph and toggle the switch to enable the integration.

TIP

It is recommended to keep any of the providers - Google, X, Apple, Email or Web3 Wallets - disabled in your Privy tenant settings. Glyph already provides all these options, and enabling them will result in a duplicate provider in the login screen - confusing users.

2. Configure the GlyphPrivyProvider

Wrap your application in the GlyphPrivyProvider component, providing your Privy app ID (Available from the Settings tab of the Privy dashboard) as the appId prop.

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

const App = () => {
	return (
		<GlyphPrivyProvider
			appId="your-privy-app-id"
			clientId="your-privy-client-id" // Optional
			config={{
				embeddedWallets: {
					createOnLogin: "off",
					extendedCalldataDecoding: true,
				},
			}}
		>
			{children}
		</GlyphPrivyProvider>
	);
};

INFO

In v2.x, chains are configured dynamically from the Glyph backend. You no longer need to pass chains, transports, supportedChains, or defaultChain. The config prop accepts a GlyphPrivyConfig type (which is PrivyClientConfig with supportedChains omitted).

TIP

Next.js App Router: If you are using Next.js App Router, create a new component and add the use client directive at the top of your file and wrap your application in this component.

3. Login users

INFO

If the account is not already created, this will create a new account.

TIP

If you want to give users the ability to create an account on Glyph's Dashboard and follow a full onboarding flow (setting their username, profile picture, etc.), you can use the SignUpButton component. They can come back to your app and login with their Glyph Wallet after signing up.

Use the useGlyph hook or the LoginButton component to prompt users to login with Glyph Wallet.

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

const LoginButton = () => {
	const { login } = useGlyph();
	return <button onClick={login}>Login with Glyph</button>;
};

• The login function uses Privy's loginWithCrossAppAccount function to authenticate users with their Glyph Wallet account.

4. Use hooks and functions

Once the user has signed in, you can begin to use any of the @use-glyph/sdk-react hooks, such as useGlyph as well as all of the existing wagmi hooks; such as useAccount, useBalance, etc.

import { useAccount, useSendTransaction, useChainId } from "wagmi";
import { parseEther } from "viem";

export default function Example() {
	const chainId = useChainId();
	const { address, status } = useAccount();
	const { sendTransaction, isPending } = useSendTransaction();

	const amount = parseEther("1");
	const recipientAddress = "0x...some-recipient-address"; // recipient address

	return (
		<button
			onClick={() => {
				sendTransaction({
					chainId,
					to: recipientAddress,
					value: amount,
				});
			}}
			disabled={isPending || status !== "connected"}
		>
			{isPending ? "Sending..." : "Send Transaction"}
		</button>
	);
}

5. Logout users

Use the useGlyph hook or the LogoutButton component to prompt users to logout.

const { logout } = useGlyph();

const LogoutButton = () => {
	return <button onClick={logout}>Logout</button>;
};