'init'

app/components/InputChainWords/InputChainWords.module.css

@@ -0,0 +1,30 @@
+.displayArea {
+    padding: 16px;
+    border: 2px dashed light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    border-radius: 8px;
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    min-height: 250px;
+    max-height: 250px;
+    height: 250px;
+    min-width: 360px;
+    max-width: 360px;
+    width: 360px;
+}
+
+.wordInput {
+    height: 36px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-5));
+    border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    transition: all 0.2s ease;
+}
+
+.wordInput:hover {
+    border-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-4));
+}
+
+.wordInput:focus {
+    border-color: var(--mantine-color-blue-filled);
+}

app/components/InputChainWords/InputChainWords.tsx

@@ -0,0 +1,108 @@
+import { Box, Text, SimpleGrid, TextInput } from "@mantine/core";
+import classes from './InputChainWords.module.css'
+import { useState, useEffect } from "react";
+
+interface InputChainWordsProps {
+    words: number;
+    onPassed: (words : string[]) => void;
+    wordlist?: string[];
+    onNotPassed: () => void;
+    placeholderFunc?: (inputNumber : number) => string;
+}
+
+export function InputChainWords(props : InputChainWordsProps) {
+    const [inputValues, setInputValues] = useState<string[]>(Array(props.words).fill(""));
+    const [mounted, setMounted] = useState<boolean[]>([]);
+
+    useEffect(() => {
+        setMounted(new Array(props.words).fill(false));
+        
+        Array.from({ length: props.words }).forEach((_, index) => {
+            setTimeout(() => {
+                setMounted(prev => {
+                    const newMounted = [...prev];
+                    newMounted[index] = true;
+                    return newMounted;
+                });
+            }, index * 50);
+        });
+    }, [props.words]);
+
+    const handleInputChange = (value: string, index: number) => {
+        const updatedValues = [...inputValues];
+        updatedValues[index] = value;
+        setInputValues(updatedValues);
+
+        const allFilled = updatedValues.every((word) => word.trim() !== "");
+        const allValid = props.wordlist
+            ? updatedValues.every((word) => props.wordlist!.includes(word.trim()))
+            : true;
+
+        if (allFilled && allValid) {
+            props.onPassed(updatedValues);
+        } else {
+            props.onNotPassed();
+        }
+    }
+
+    const handlePaste = (event: React.ClipboardEvent) => {
+        event.preventDefault();
+        const pastedText = event.clipboardData.getData("text");
+        const pastedWords = pastedText.split(/\s+/).slice(0, props.words);
+
+        const updatedValues = [...inputValues];
+        pastedWords.forEach((word, index) => {
+            if (index < props.words) {
+                updatedValues[index] = word;
+            }
+        });
+
+        setInputValues(updatedValues);
+
+        const allFilled = updatedValues.every((word) => word.trim() !== "");
+        const allValid = props.wordlist
+            ? updatedValues.every((word) => props.wordlist!.includes(word.trim()))
+            : true;
+
+        if (allFilled && allValid) {
+            props.onPassed(updatedValues);
+        } else {
+            props.onNotPassed();
+        }
+    };
+
+    return (
+        <Box>
+            <Box className={classes.displayArea}>
+                <Text size="sm" mb="md" c="dimmed">
+                    Enter your seed phrase:
+                </Text>
+                <SimpleGrid cols={3} spacing="xs">
+                    {Array.from({ length: props.words }, (_, i) => (
+                        <Box
+                            key={i}
+                            style={{
+                                opacity: mounted[i] ? 1 : 0,
+                                transform: mounted[i] ? 'scale(1)' : 'scale(0.9)',
+                                transition: 'opacity 300ms ease, transform 300ms ease',
+                            }}
+                        >
+                            <TextInput
+                                type="text"
+                                value={inputValues[i]}
+                                onChange={(e) => handleInputChange(e.target.value, i)}
+                                onPaste={(e) => handlePaste(e)}
+                                //placeholder={props.placeholderFunc ? props.placeholderFunc(i) : undefined}
+                                classNames={{ input: classes.wordInput }}
+                                leftSection={
+                                    <Text size="xs" c="dimmed">{i + 1}.</Text>
+                                }
+                                size="sm"
+                            />
+                        </Box>
+                    ))}
+                </SimpleGrid>
+            </Box>
+        </Box>
+    );
+}