Seed Phrase
A recovery phrase, blurred until revealed. Deliberately hostile to convenience: no copy button and no selection, because a seed phrase on the clipboard is readable by every page visited afterwards.
src/components/ui/seed-phrase.tsxAbout
From the component's own source, where it was written.
A recovery phrase, blurred until revealed.
Deliberately hostile to the convenient thing. There is no copy button and no select-all: a seed phrase on the clipboard is readable by every page the user visits afterwards, and clipboard managers persist it to disk. Every wallet that got this wrong has a corresponding class of drainer.
Blurred by default with an explicit reveal, because these are read in cafés, on video calls and over shoulders. Revealing is a decision, not the default state.
confirm mode asks for specific words back — the only way to establish the phrase was actually written down rather than clicked past.
Install
npx astralyx-ui add seed-phrase
Usage
import { SeedPhrase } from '@/components/ui/seed-phrase'
<SeedPhrase words={words} />
<SeedPhrase words={words} confirmIndices={[2, 7, 11]} onConfirm={next} />Composer
Change the props and the source below follows.
Write these words down and store them offline. Anyone with this phrase controls the wallet — no support team will ever ask for it.
- 1••••••
- 2••••••
- 3••••••
- 4••••••
- 5••••••
- 6••••••
- 7••••••
- 8••••••
- 9••••••
- 10••••••
- 11••••••
- 12••••••
<SeedPhrase
words={words}
columns={3}
/>Examples
Reveal and confirm
<SeedPhrase words={words} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
SeedPhrase
A recovery phrase, blurred until revealed.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | required | 12 or 24 words. Never copyable and not selectable while hidden. |
| revealed | boolean | — | Blurred by default — these are read in cafés and on video calls, so revealing is a decision rather than the default. |
| onRevealedChange | (revealed: boolean) => void | — | Blurred by default — these are read in cafés and on video calls, so revealing is a decision rather than the default. |
| columns | 2 | 3 | 4 | 3 | — |
| warning | ReactNode | — | — |
| confirmIndices | number[] | — | 0-based positions to ask back, which is the only way to establish the phrase was written down rather than clicked past. |
| onConfirm | (correct: boolean) => void | — | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| no clipboard | by design | There is no copy button. Clipboard managers persist to disk and every subsequent page can read it. |