Glyph

Appearance

Wallet ​

The Wallet component renders the main wallet interface without the popover/drawer wrapper used by GlyphWidget. It is the inner content component used by GlyphWidget and is exported for advanced embedding scenarios.

TIP

For most use cases, prefer GlyphWidget with alwaysOpen={true} to embed a permanently visible wallet. The Wallet component is a lower-level building block.

Import ​

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

Usage ​

Wallet requires a setGradientType prop used internally for visual feedback (gradient animations during transactions). Pass a React state setter or a no-op if you don't need the gradient effect:

tsx
import { useState } from "react";
import { Wallet } from "@use-glyph/sdk-react";

function WalletPage() {
	const [, setGradientType] = useState();

	return (
		<div style={{ maxWidth: 420, margin: "0 auto" }}>
			<Wallet setGradientType={setGradientType} />
		</div>
	);
}

Description ​

The Wallet component provides:

  • Main view -- balance overview, quick actions (send, receive, fund), and tab navigation between Tokens, NFTs, Activity, and Swap views.
  • Fund view -- on-ramp flow for purchasing tokens.
  • Send view -- form for sending tokens to another address.
  • Receive view -- displays the wallet address as text and QR code.
  • Swap view -- token swap interface powered by Relay Protocol.
  • Profile view -- user profile information (for Glyph cross-app users).

Unlike GlyphWidget, Wallet does not include the floating toggle button or the popover/drawer container. This makes it suitable for full-page or panel layouts where the wallet is always visible.

Notes ​

  • Must be rendered inside a GlyphProvider (or GlyphPrivyProvider / GlyphWalletProvider).
  • The component manages its own internal view state using GlyphViewContext.
  • If you need the popover/drawer behavior, use GlyphWidget instead.