Connect Wallet

Auth37: Connect Wallet

A full-height, centered web3 sign-in card that renders a heading and description above a bordered list of wallet providers, each row showing an icon tile, name, optional secondary badge, an optional detail line, and a chevron that nudges right on hover, followed by an optional helper link and a footer disclaimer line.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth37?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth37?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth37.tsx, plus the badge shadcn/ui primitive it uses for the per-wallet "Detected" style tag.

Quick start

The installed file exports auth37Demo alongside the block: the exact props behind the preview above. Spread it to get a working wallet-connect screen in one line.

import { Auth37, auth37Demo } from "@/components/beste/block/auth37";

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

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { QrCode, Wallet } from "lucide-react";
import { Auth37 } from "@/components/beste/block/auth37";

export default function Page() {
  return (
    <Auth37
      heading="Connect your wallet"
      description="Choose how you'd like to connect to continue."
      wallets={[
        {
          name: "MetaMask",
          icon: <Wallet className="size-5" />,
          detail: "Browser extension",
          badge: "Detected",
          href: "https://example.com/connect/metamask",
        },
        {
          name: "WalletConnect",
          icon: <QrCode className="size-5" />,
          detail: "Scan with any wallet",
          href: "https://example.com/connect/walletconnect",
        },
      ]}
      helpLink={{ label: "What is a wallet?", href: "/help/wallets" }}
      labels={{ footer: "By connecting, you agree to the Terms and Privacy Policy." }}
    />
  );
}

Props

type WalletOption = {
  name: string;
  icon: React.ReactNode;
  detail?: string;
  badge?: string;
  href?: string;
};

Behavior notes

• Each wallet row is a next/link Link whose href falls back to "#" when wallet.href is undefined, so a wallet with no href renders a live but non-navigating link rather than a button; there is no onClick or selection callback, all connect logic is left to the target route.
• Rows are keyed by array index, not by a stable id, so reordering or filtering the wallets list can desync React's row state.
• The badge and detail fields are each rendered only when present; badge always uses the secondary Badge variant with no way to change it per wallet.
• heading and description are plain text nodes (no dangerouslySetInnerHTML), so inline markup in those strings is not interpreted.
• The chevron on the right is decorative: it only animates translate-x-0.5 on hover of the row group and carries no independent action.
• The outer section is min-h-screen and vertically centers a max-w-md column, so the block is designed to own a full viewport rather than sit inline in a longer page.
• helpLink and the labels.footer line are independent optional blocks: omit either and its wrapper is not rendered at all.