Glyph

Appearance

NativeGlyphConnectButton ​

WARNING

To only be used with the Native Integration.

A pre-styled button component that initiates the connection process with the Glyph Wallet and then can also be used to trigger the Glyph Widget's authentication flow (i.e. signing a message) after the connection.

Import ​

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

Usage ​

INFO

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

tsx
import "@use-glyph/sdk-react/style.css";
css
@import "@use-glyph/sdk-react/style.css";
tsx
import { NativeGlyphConnectButton } from "@use-glyph/sdk-react";
import { GlyphProvider, GlyphWidget } from "@use-glyph/sdk-react";
import { useAccount } from "wagmi";

function App() {
	const { isConnected } = useAccount();
	return !isConnected ? <NativeGlyphConnectButton /> : <GlyphWidget />;
}

Props ​

The NativeGlyphConnectButton component does not accept any props. It automatically handles the connection process and displays appropriate loading states.

States ​

The button automatically handles different states:

  • Default: Shows "Connect to Glyph" with the Glyph icon
  • Loading: Shows a loading spinner when the connection/authentication process is in progress
  • Disabled: Button is disabled when the connection/authentication process is in progress or when already connected

Styling ​

The button uses Tailwind CSS classes prefixed with gw- to avoid conflicts with your application's styles. The default styling includes:

  • Primary color background
  • White text
  • Rounded corners
  • Glyph icon in a circular background
  • Consistent padding and height

You can target these classes in your CSS to customize the appearance further.

Custom Connect Button ​

If you need more control over the login process or button appearance, you can create a custom login button using the useGlyph hook:

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

function CustomConnectButton() {
	const { connect } = useNativeGlyphConnection();
	const { ready, authenticated, login } = useGlyph();
	const { isConnected, isConnecting } = useAccount();

	return !isConnected ? (
		<button
			onClick={connect}
			disabled={isConnecting}
			className="your-custom-button-class"
		>
			{isConnecting ? "Loading..." : "Custom Connect Button"}
		</button>
	) : (
		<button
			onClick={login}
			disabled={!ready || authenticated}
			className="your-custom-button-class"
		>
			{!ready ? "Loading..." : "Custom Login Button"}
		</button>
	);
}