Staaarter

Connect Wallet

Full-height wallet-connect screen listing wallet providers as rows with an icon, name, and short detail text, one row flagged with a 'Detected' badge, plus a 'What is a wallet?' helper link at the bottom.

By Staaarter Team
Auth
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/connect-wallet.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth37.tsx instead.

Usage

The file also exports auth37Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth37, auth37Demo } from "@/components/blocks/auth/auth37";

export default function Page() {
  return <Auth37 {...auth37Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Connect a wallet"Screen heading above the provider list.
descriptionstringundefinedShort intro text below the heading.
providersWalletProviderOption[]noneWallet providers to list, in order.
helperHrefstring"#"Href for the 'What is a wallet?' helper link.
classNamestringnoneExtra classes for the outer section element.

Types

type WalletProviderOption = {
  name: string;
  detail: string;
  icon: LucideIcon;
  detected?: boolean;
};

Behavior notes

  • Wallet rows are entirely decorative; no real web3 connection, wallet detection, or extension check is attempted, `detected` is just a static demo flag rendered as a badge.
  • Icons are generic lucide-react icons (Wallet, Coins, Link2, Sparkles) standing in for provider brand marks, since no real wallet-brand icon set exists in this repo's icon library.
  • Static server component: nothing here holds client-side state.