2023-11-05 01:16:45 +01:00
|
|
|
|
import { useMemo } from "react";
|
|
|
|
|
|
|
|
|
|
import { genMnemonic } from "@/backend/accounts/crypto";
|
|
|
|
|
import { Button } from "@/components/Button";
|
2023-11-17 14:45:13 +01:00
|
|
|
|
import { Icon, Icons } from "@/components/Icon";
|
|
|
|
|
import {
|
|
|
|
|
LargeCard,
|
|
|
|
|
LargeCardButtons,
|
|
|
|
|
LargeCardText,
|
|
|
|
|
} from "@/components/layout/LargeCard";
|
2023-11-24 21:54:44 +01:00
|
|
|
|
import { PassphraseDisplay } from "@/components/PassphraseDisplay";
|
2023-11-05 01:16:45 +01:00
|
|
|
|
|
|
|
|
|
interface PassphraseGeneratePartProps {
|
|
|
|
|
onNext?: (mnemonic: string) => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function PassphraseGeneratePart(props: PassphraseGeneratePartProps) {
|
|
|
|
|
const mnemonic = useMemo(() => genMnemonic(), []);
|
|
|
|
|
|
|
|
|
|
return (
|
2023-11-17 14:45:13 +01:00
|
|
|
|
<LargeCard>
|
|
|
|
|
<LargeCardText title="Your passphrase" icon={<Icon icon={Icons.USER} />}>
|
|
|
|
|
If you lose this, you're a silly goose and will be posted on the
|
|
|
|
|
wall of shame™️
|
|
|
|
|
</LargeCardText>
|
2023-11-24 21:54:44 +01:00
|
|
|
|
<PassphraseDisplay mnemonic={mnemonic} />
|
2023-11-17 14:45:13 +01:00
|
|
|
|
|
|
|
|
|
<LargeCardButtons>
|
|
|
|
|
<Button theme="purple" onClick={() => props.onNext?.(mnemonic)}>
|
|
|
|
|
NEXT!
|
|
|
|
|
</Button>
|
|
|
|
|
</LargeCardButtons>
|
|
|
|
|
</LargeCard>
|
2023-11-05 01:16:45 +01:00
|
|
|
|
);
|
|
|
|
|
}
|