GlyphWidget

The main widget component that provides a complete wallet interface. It automatically switches between a popover on desktop and a drawer on mobile, and handles different authentication states.

WARNING

This component only supports the ApeChain network as of now. We will add support for more networks in the future.

Import

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

Usage

INFO

To use the GlyphWidget component, you need to import the styles.

main.tsx

import "@use-glyph/sdk-react/style.css";

style.css

@import "@use-glyph/sdk-react/style.css";

import { GlyphWidget, GlyphProvider } from "@use-glyph/sdk-react";

function App() {
	return (
		<GlyphProvider>
			<div className="my-app">
				<header>
					<h1>My Application</h1>
					<div className="wallet-container">
						<GlyphWidget />
					</div>
				</header>
				<main>{/* Your app content */}</main>
			</div>
		</GlyphProvider>
	);
}

Props

buttonProps GlyphWidgetButtonProps

The props for the internal GlyphWidgetButton component. They change the appearance of the button that opens/closes the widget.

Prop	Type	Default	Description
showAvatar	boolean	true	Show user's avatar in the button
showBalance	boolean	true	Show APE token balance in the button
showUsername	boolean	true	Show user's name in the button

Customization Examples

Minimal Button (Icon Only)

<GlyphWidget
	buttonProps={{ showAvatar: false, showBalance: false, showUsername: false }}
/>

This renders a minimal button with just the Glyph icon.

Balance Only

<GlyphWidget
	buttonProps={{ showAvatar: false, showBalance: true, showUsername: false }}
/>

This displays only the token balance in the button.

Avatar and Username

<GlyphWidget
	buttonProps={{ showAvatar: true, showBalance: false, showUsername: true }}
/>

This shows the user's avatar and name, but not their balance.

Responsive Design

When using all display options (showAvatar, showBalance, and showUsername), the component automatically adapts to smaller screens by hiding certain elements:

• On small screens (max-width: 640px): The wallet icon and balance are hidden, showing only the avatar and username
• On larger screens: All elements are displayed

Responsive Behavior

The GlyphWidget component automatically adapts to different screen sizes:

• On desktop (min-width: 768px): Renders as a popover with align="end" positioning
• On mobile (max-width: 767px): Renders as a bottom drawer with a title and description

The responsive behavior is handled internally using the useMediaQuery hook, so you don't need to implement separate components for different screen sizes.

Open a certain view

You can open a certain view by using the useGlyphView hook.

Authentication States

The widget handles different authentication states automatically:

• When not authenticated: Displays a LoginButton component
• When authenticated: Displays the full wallet interface with:
  • User information and avatar
  • Token balances
  • Transaction history
  • Account management
  • Chain support status

The widget will automatically close when the user is not authenticated or when the context is not ready.

Features

The widget provides access to several features:

• View token balances
• View transaction history
• Access profile information
• Manage linked accounts
• Fund your wallet
• Receive tokens
• Sign out
• Chain support detection
• Responsive notifications

All these features are accessible through the widget's interface without requiring additional configuration.

Example with Custom Styling

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

function App() {
	return (
		<div className="my-app">
			<header>
				<h1>My Application</h1>
				<div className="wallet-container">
					<GlyphWidget />
				</div>
			</header>
			<main>{/* Your app content */}</main>
		</div>
	);
}