BigBlocks

Mnemonic Flow

Multi-mode seed phrase display and input block with create, display, import, and verify modes

Choose a mode to preview the mnemonic flow block.

"use client"

import { useCallback, useState } from "react"
import { MnemonicFlow, type MnemonicFlowMode } from "@/registry/bigblocks/blocks/mnemonic-flow"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

const MOCK_WORDS = [
  "abandon", "ability", "able", "about", "above", "absent",
  "absorb", "abstract", "absurd", "abuse", "access", "accident",
]

type DemoState =
  | { view: "picker" }
  | { view: "flow"; mode: MnemonicFlowMode }
  | { view: "done"; words: string[] }

export function MnemonicFlowDemo() {
  const [state, setState] = useState<DemoState>({ view: "picker" })

  const handleComplete = useCallback((words: string[]) => {
    setState({ view: "done", words })
  }, [])

  const handleCancel = useCallback(() => {
    setState({ view: "picker" })
  }, [])

  if (state.view === "done") {
    return (
      <div className="mx-auto flex w-full max-w-xl flex-col items-center gap-4 py-8">
        <Badge variant="outline" className="text-sm">
          Flow complete
        </Badge>
        <p className="text-sm text-muted-foreground">
          {state.words.length} words confirmed
        </p>
        <Button variant="outline" onClick={() => setState({ view: "picker" })}>
          Try Another Mode
        </Button>
      </div>
    )
  }

  if (state.view === "flow") {
    const needsWords =
      state.mode === "display" ||
      state.mode === "create" ||
      state.mode === "verify"

    return (
      <div className="mx-auto w-full max-w-xl">
        <MnemonicFlow
          mode={state.mode}
          words={needsWords ? MOCK_WORDS : undefined}
          wordCount={12}
          onComplete={handleComplete}
          onCancel={handleCancel}
        />
      </div>
    )
  }

  // Picker view
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-3">
      <p className="text-center text-sm text-muted-foreground">
        Choose a mode to preview the mnemonic flow block.
      </p>
      {(
        [
          { mode: "create" as const, label: "Create", desc: "Generate + confirm" },
          { mode: "display" as const, label: "Display", desc: "Read-only grid" },
          { mode: "import" as const, label: "Import", desc: "Enter words" },
          { mode: "verify" as const, label: "Verify", desc: "Fill 2 blanks" },
        ] as const
      ).map((item) => (
        <Button
          key={item.mode}
          variant="outline"
          className="justify-between"
          onClick={() => setState({ view: "flow", mode: item.mode })}
        >
          <span>{item.label}</span>
          <Badge variant="secondary">{item.desc}</Badge>
        </Button>
      ))}
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/mnemonic-flow.json

Usage

import { MnemonicFlow } from "@/components/blocks/mnemonic-flow"
 
export function OnboardingPage() {
  return (
    <MnemonicFlow
      mode="create"
      words={generatedWords}
      onComplete={(words) => createWallet(words.join(" "))}
      onCancel={() => router.back()}
    />
  )
}

Modes

Create

Displays generated words in a numbered grid with a confirmation checkbox. The user must acknowledge they have written them down before proceeding.

<MnemonicFlow mode="create" words={words} onComplete={handleComplete} />

Display

Read-only numbered grid with a copy-all button. Useful for showing an existing mnemonic.

<MnemonicFlow mode="display" words={words} onComplete={handleComplete} />

Import

Editable input grid where the user enters each word manually. Validates word count on submit.

<MnemonicFlow mode="import" wordCount={12} onComplete={handleComplete} />

Verify

Shows 2 random blank positions from the provided words. The user must type the correct words to continue.

<MnemonicFlow mode="verify" words={words} onComplete={handleComplete} />

Props

MnemonicFlow

Prop	Type	Default	Description
`mode`	`"display" \| "create" \| "import" \| "verify"`	required	Operating mode
`words`	`string[]`	--	Pre-populated words for display/create/verify modes
`wordCount`	`12 \| 24`	`12`	Number of mnemonic words
`onComplete`	`(words: string[]) => void`	--	Called with the final word list
`onCancel`	`() => void`	--	Called when the user cancels
`isLoading`	`boolean`	`false`	External loading state
`error`	`string \| null`	--	External error message
`className`	`string`	--	Additional CSS classes

Hook

useMnemonicFlow manages all mode logic, validation, and verification state.

import { useMnemonicFlow } from "@/components/blocks/mnemonic-flow"
 
function CustomMnemonic() {
  const flow = useMnemonicFlow({
    mode: "import",
    wordCount: 12,
    onComplete: (words) => console.log(words),
  })
 
  return (
    <div>
      {flow.words.map((word, i) => (
        <input
          key={i}
          value={word}
          onChange={(e) => flow.setWord(i, e.target.value)}
        />
      ))}
      <button onClick={flow.submit} disabled={!flow.canSubmit}>
        Submit
      </button>
    </div>
  )
}

Market Grid OAuth Callback