59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
import { Button, Flex, Group, Text, Transition } from "@mantine/core";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { InputChainHidden } from "@/app/components/InputChainHidden/InputChainHidden";
|
|
import { useMemory } from "@/app/providers/MemoryProvider/useMemory";
|
|
import { AuthFlowBreadcrumbs } from "@/app/components/AuthFlowBreadcrumbs/AuthFlowBreadcrumbs";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export function ConfirmSeed() {
|
|
const navigate = useNavigate();
|
|
const [phrase, _] = useMemory("seed-phrase", "", true);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if(phrase.trim() == ''){
|
|
navigate('/create-seed');
|
|
}
|
|
setTimeout(() => setMounted(true), 100);
|
|
}, [phrase]);
|
|
|
|
|
|
const onPassed = () => {
|
|
navigate('/set-password');
|
|
};
|
|
|
|
return (
|
|
<Flex h={520} w={385}>
|
|
<Flex h={'100%'} w={'100%'}>
|
|
<Flex h={'100%'} w={'100%'} direction="column" align="center" justify="space-between">
|
|
<AuthFlowBreadcrumbs rightSection={
|
|
<Button p={0} onClick={onPassed} variant={'transparent'}>Skip</Button>
|
|
} title="Confirm phrase"></AuthFlowBreadcrumbs>
|
|
<Flex>
|
|
<Transition mounted={mounted} transition="slide-up" duration={400} timingFunction="ease">
|
|
{(styles) => (
|
|
<Flex w={'100%'} direction={'column'} mt={'sm'} pl={'sm'} pr={'sm'} align={'center'} style={styles}>
|
|
<Text c="dimmed" ta={'center'} size={'xs'}>
|
|
To confirm that you have saved your seed phrase, please <strong>enter the missing words</strong>.
|
|
</Text>
|
|
</Flex>
|
|
)}
|
|
</Transition>
|
|
</Flex>
|
|
<Group p={'md'}>
|
|
<InputChainHidden w={120} size={'sm'} onPassed={onPassed} text={phrase} hidden={3}></InputChainHidden>
|
|
</Group>
|
|
<Flex align={'center'} w={'100%'} p={'md'} direction={'column'} justify={'center'} gap={'sm'}>
|
|
<Transition mounted={mounted} transition="slide-up" duration={500} timingFunction="ease">
|
|
{(styles) => (
|
|
<Flex p={'sm'} direction={'column'} gap={'lg'} style={styles}>
|
|
{/* Button section */}
|
|
</Flex>
|
|
)}
|
|
</Transition>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
} |