Components

Midnight Auth provides a set of pre-built React components that handle common authentication UI patterns. All components are fully typed and customizable.

MidnightConnectButton

The main wallet connection button. Displays as a gradient button when disconnected, and transforms into a dropdown menu when connected.

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes
variant	"default" | "outline" | "ghost"	"default"	Button style variant
size	"sm" | "md" | "lg"	"md"	Button size
connectText	string	"Connect Wallet"	Text shown when disconnected
connectingText	string	"Connecting..."	Text shown while connecting
disconnectText	string	"Disconnect"	Text in dropdown menu
onConnectSuccess	() => void	-	Callback after successful connection
onDisconnectSuccess	() => void	-	Callback after disconnection

Usage

import { MidnightConnectButton } from '@uppzen/midnight-auth'

export default function Header() {
  return (
    <MidnightConnectButton
      variant="default"
      size="md"
      onConnectSuccess={() => console.log('Connected!')}
      onDisconnectSuccess={() => console.log('Disconnected')}
    />
  )
}

Variants

// Default gradient button
<MidnightConnectButton variant="default" />

// Outline style
<MidnightConnectButton variant="outline" />

// Ghost style (transparent background)
<MidnightConnectButton variant="ghost" />

Sizes

<MidnightConnectButton size="sm" />
<MidnightConnectButton size="md" />
<MidnightConnectButton size="lg" />

MidnightWalletInfo

Display wallet information with multiple layout options.

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes
variant	"card" | "compact" | "inline"	"card"	Display variant
showBalance	boolean	true	Show wallet balance
showProvider	boolean	true	Show provider name
addressFormat	"short" | "full"	"short"	Address display format

Usage

import { MidnightWalletInfo } from '@uppzen/midnight-auth'

export default function Dashboard() {
  return (
    <MidnightWalletInfo 
      variant="card"
      showBalance={true}
      showProvider={true}
      addressFormat="short"
    />
  )
}

Variants

// Card layout with border and padding
<MidnightWalletInfo variant="card" />

// Compact layout
<MidnightWalletInfo variant="compact" />

// Inline layout (single line)
<MidnightWalletInfo variant="inline" />

MidnightSessionTimer

Show session expiration countdown with auto-refresh capability.

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes
variant	"default" | "compact" | "minimal"	"default"	Display variant
showRefreshButton	boolean	true	Show refresh button
autoRefreshThreshold	number	300000	Auto-refresh when time remaining is below this (ms)

Usage

import { MidnightSessionTimer } from '@uppzen/midnight-auth'

export default function SessionStatus() {
  return (
    <MidnightSessionTimer 
      variant="default"
      showRefreshButton={true}
      autoRefreshThreshold={5 * 60 * 1000} // 5 minutes
    />
  )
}

ProtectedRoute

Protect routes that require wallet connection.

Props

Prop	Type	Default	Description
children	ReactNode	-	Content to show when connected
fallback	ReactNode	-	Content to show when not connected

Usage

import { ProtectedRoute } from '@uppzen/midnight-auth'

export default function Dashboard() {
  return (
    <ProtectedRoute
      fallback={
        <div>
          <h2>Please connect your wallet</h2>
          <p>You need to connect your Midnight wallet to access this page.</p>
        </div>
      }
    >
      <DashboardContent />
    </ProtectedRoute>
  )
}

With Custom Fallback

<ProtectedRoute fallback={<CustomConnectPage />}>
  <ProtectedContent />
</ProtectedRoute>

Styling Components

All components accept a className prop for custom styling:

<MidnightConnectButton 
  className="my-custom-class"
/>

Using Tailwind CSS

<MidnightConnectButton 
  className="shadow-lg hover:shadow-xl transition-shadow"
/>

Using CSS Modules

import styles from './styles.module.css'

<MidnightConnectButton 
  className={styles.customButton}
/>

Component Composition

Combine components to create custom layouts:

import { 
  MidnightConnectButton, 
  MidnightWalletInfo,
  MidnightSessionTimer 
} from '@uppzen/midnight-auth'

export default function Header() {
  return (
    <header>
      <div className="left">
        <h1>My App</h1>
      </div>
      <div className="center">
        <MidnightWalletInfo variant="inline" />
      </div>
      <div className="right">
        <MidnightSessionTimer variant="compact" />
        <MidnightConnectButton />
      </div>
    </header>
  )
}

Next Steps

• Learn about Hooks for programmatic access
• Check the API Reference for detailed type information
• Browse Examples for real-world usage patterns