95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
import { IconChevronRight, } from '@tabler/icons-react';
|
|
import { Flex, Text, Transition } from '@mantine/core';
|
|
import { TextChain } from '@/app/components/TextChain/TextChain';
|
|
import { useEffect, useState } from 'react';
|
|
import { generateMnemonic } from 'web-bip39';
|
|
import wordlist from 'web-bip39/wordlists/english'
|
|
import { CopyButtonIcon } from '@/app/components/CopyButtonIcon/CopyButtonIcon';
|
|
import { modals } from '@mantine/modals';
|
|
import { useClipboard } from '@mantine/hooks';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useMemory } from '@/app/providers/MemoryProvider/useMemory';
|
|
import useWindow from '@/app/hooks/useWindow';
|
|
import { AnimatedButton } from '@/app/components/AnimatedButton/AnimatedButton';
|
|
import { AuthFlowBreadcrumbs } from '@/app/components/AuthFlowBreadcrumbs/AuthFlowBreadcrumbs';
|
|
|
|
export function CreateSeed() {
|
|
const [phrase, setPhrase] = useMemory("seed-phrase", "", true);
|
|
const {copy} = useClipboard();
|
|
const navigate = useNavigate();
|
|
const {setSize, setResizeble} = useWindow();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setSize(385, 555);
|
|
setResizeble(false);
|
|
setTimeout(() => setMounted(true), 100);
|
|
}, []);
|
|
|
|
const openCopyModal = () => {
|
|
modals.openConfirmModal({
|
|
title: 'Stop',
|
|
centered: true,
|
|
children: (
|
|
<Text size="sm">
|
|
Do you really just want to copy your secret phrase and that's it?
|
|
We still recommend writing it down on a piece of paper rather than just copying it.
|
|
</Text>
|
|
),
|
|
withCloseButton: false,
|
|
labels: { confirm: 'Copy', cancel: "Cancel" },
|
|
confirmProps: { color: 'red' },
|
|
onCancel: () => copy("")
|
|
});
|
|
}
|
|
|
|
const generate = async () => {
|
|
const mnemonic = await generateMnemonic(wordlist);
|
|
setPhrase(mnemonic);
|
|
}
|
|
|
|
useEffect(() => {
|
|
generate();
|
|
}, []);
|
|
|
|
return (
|
|
<Flex w={'100%'} h={520}>
|
|
<Flex w={385} h={'100%'} direction={'column'} justify={'space-between'}>
|
|
<AuthFlowBreadcrumbs title="Create account"></AuthFlowBreadcrumbs>
|
|
|
|
<Transition mounted={mounted} transition="slide-up" duration={400} timingFunction="ease">
|
|
{(styles) => (
|
|
<Flex w={'100%'} direction={'column'} pl={'sm'} pr={'sm'} align={'center'} style={styles}>
|
|
<Text c="dimmed" ta={'center'} size={'xs'}>
|
|
This seed phrase is needed to access your correspondence, save it in a safe place
|
|
</Text>
|
|
</Flex>
|
|
)}
|
|
</Transition>
|
|
|
|
<Transition mounted={mounted} transition="slide-up" duration={500} timingFunction="ease">
|
|
{(styles) => (
|
|
<Flex p={'sm'} justify={'center'} align={'center'} style={styles}>
|
|
<TextChain text={phrase}></TextChain>
|
|
</Flex>
|
|
)}
|
|
</Transition>
|
|
|
|
<Transition mounted={mounted} transition="slide-up" duration={600} timingFunction="ease">
|
|
{(styles) => (
|
|
<Flex p={'sm'} direction={'column'} gap={'lg'} style={styles}>
|
|
<CopyButtonIcon onClick={openCopyModal} fullWidth size={'md'} value={phrase} caption='Copy phrase'></CopyButtonIcon>
|
|
<AnimatedButton animated={
|
|
['#2DA5FF', '#87DBFF']
|
|
} rightSection={
|
|
<IconChevronRight size={14}></IconChevronRight>
|
|
} fullWidth onClick={() => navigate('/confirm-seed')} size={'md'}>
|
|
Next step
|
|
</AnimatedButton>
|
|
</Flex>
|
|
)}
|
|
</Transition>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
} |