108 lines
3.9 KiB
TypeScript
108 lines
3.9 KiB
TypeScript
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>
|
|
);
|
|
} |