'init'

app/views/ExistsSeed/ExistsSeed.module.css

@@ -0,0 +1,27 @@
+.inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: calc(var(--mantine-spacing-xl));
+  }
+  
+  .content {
+    max-width: 480px;
+  }
+  
+  .title {
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    font-family:
+      Greycliff CF,
+      var(--mantine-font-family);
+    font-size: 44px;
+    line-height: 1.2;
+    font-weight: 900;
+  }
+
+  .highlight {
+    position: relative;
+    background-color: var(--mantine-color-blue-light);
+    border-radius: var(--mantine-radius-sm);
+    padding: 4px 12px;
+  }

app/views/ExistsSeed/ExistsSeed.tsx

@@ -0,0 +1,82 @@
+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>
+	);
+}