Design System

Nuclear Warning Dialog

Multi-gate confirmation for dangerous, irreversible operations.

Why This Exists

A wallet UX failure allowed a simple notification click to silently delete a seed phrase, resulting in a ~$10,000 loss. This pattern ensures:

  • 1Explicit warning - user sees consequences first
  • 2Typed confirmation - proves deliberate intent
  • 3Time delay - prevents rage-clicking

Try the Demo

Select a scenario and click the danger button to see the full nuclear warning flow.

Individual Components

The nuclear warning dialog is composed of reusable building blocks you can use independently:

TypedConfirmationInput

Requires exact phrase typing to confirm intent.

Type this phrase exactly:

CONFIRM ACTION

CountdownButton

Adds mandatory waiting period before action.

3
seconds remaining

Implementation

Basic Usage

import { NuclearWarningDialog } from './components/NuclearWarningDialog';

// In your component
const [showWarning, setShowWarning] = useState(false);

<NuclearWarningDialog
  isOpen={showWarning}
  onClose={() => setShowWarning(false)}
  onConfirm={async () => {
    await dangerousAction();
    setShowWarning(false);
  }}
  warning={{
    headline: "Delete Wallet Forever",
    description: "This will permanently delete your wallet.",
    consequences: [
      "All funds will become inaccessible",
      "This action cannot be undone"
    ],
    affectedItems: [
      { label: "Balance", value: "45.23 SOL", type: "amount" }
    ]
  }}
  confirmationPhrase="DELETE MY WALLET"
/>

Using Components Separately

import { TypedConfirmationInput } from './components/TypedConfirmationInput';
import { CountdownButton } from './components/CountdownButton';

// Typed confirmation
<TypedConfirmationInput
  confirmationPhrase="DELETE ACCOUNT"
  onConfirmed={() => setCanProceed(true)}
/>

// Countdown button
<CountdownButton
  durationSeconds={5}
  onConfirm={() => executeAction()}
  variant="danger"
  readyText="Permanently Delete"
/>

When to Use Nuclear Warnings

  • Deleting wallets, accounts, or seed phrases
  • Transferring all assets from an account
  • Revoking master permissions or access
  • Exporting sensitive data (seed phrases, private keys)
  • Any operation that cannot be reversed
  • Regular transactions (use simulation instead)
  • Connecting to dApps (use approval dialogs)