82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import { useMemory } from "@/app/providers/MemoryProvider/useMemory";
|
|
import { Flex, Text, Transition } from "@mantine/core";
|
|
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { IconChevronRight } from "@tabler/icons-react";
|
|
import { InputChainWords } from "@/app/components/InputChainWords/InputChainWords";
|
|
import wordlist from "web-bip39/wordlists/english";
|
|
import useWindow from "@/app/hooks/useWindow";
|
|
import { AnimatedButton } from "@/app/components/AnimatedButton/AnimatedButton";
|
|
import { AuthFlowBreadcrumbs } from "@/app/components/AuthFlowBreadcrumbs/AuthFlowBreadcrumbs";
|
|
|
|
export function ExistsSeed() {
|
|
const navigate = useNavigate();
|
|
const [_, setPhrase] = useMemory("seed-phrase", "", true);
|
|
const [passed, setPassed] = useState(false);
|
|
const [words, setWords] = useState("");
|
|
const {setSize, setResizeble} = useWindow();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setSize(385, 555);
|
|
setResizeble(false);
|
|
setTimeout(() => setMounted(true), 100);
|
|
}, []);
|
|
|
|
const onPassed = (words : string[]) => {
|
|
setWords(words.join(" "));
|
|
setPassed(true);
|
|
};
|
|
|
|
const onNotPassed = () => {
|
|
setPassed(false);
|
|
};
|
|
|
|
const onNextStep = () => {
|
|
setPhrase(words);
|
|
navigate('/set-password');
|
|
}
|
|
|
|
return (
|
|
<Flex w={'100%'} h={520}>
|
|
<Flex w={385} h={'100%'} direction={'column'} justify={'space-between'}>
|
|
<AuthFlowBreadcrumbs title="Import 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'}>
|
|
Enter your seed phrase that you generated or that was created when setting up your account
|
|
</Text>
|
|
</Flex>
|
|
)}
|
|
</Transition>
|
|
|
|
<Transition mounted={mounted} transition="slide-up" duration={500} timingFunction="ease">
|
|
{(styles) => (
|
|
<Flex p={'sm'} justify={'center'} align={'center'} style={styles}>
|
|
<InputChainWords placeholderFunc={(i) => i + 1 + "."} wordlist={wordlist} onPassed={onPassed} onNotPassed={onNotPassed} words={12}></InputChainWords>
|
|
</Flex>
|
|
)}
|
|
</Transition>
|
|
|
|
<Transition mounted={mounted} transition="slide-up" duration={600} timingFunction="ease">
|
|
{(styles) => (
|
|
<Flex p={'sm'} direction={'column'} gap={'lg'} style={styles}>
|
|
<AnimatedButton
|
|
animated={['#2DA5FF', '#87DBFF']}
|
|
rightSection={<IconChevronRight size={14}></IconChevronRight>}
|
|
fullWidth
|
|
disabled={!passed}
|
|
onClick={() => onNextStep()}
|
|
size={'md'}
|
|
>
|
|
Next step
|
|
</AnimatedButton>
|
|
</Flex>
|
|
)}
|
|
</Transition>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
} |