'init'

app/components/TextChain/TextChain.tsx

@@ -0,0 +1,56 @@
+import { Box, MantineSize, Text, SimpleGrid } from "@mantine/core";
+import classes from './TextChain.module.css'
+import { useState, useEffect } from "react";
+
+interface TextChainProps {
+    text: string;
+    mt?: MantineSize;
+}
+
+export function TextChain(props : TextChainProps) {
+    const text = props.text;
+    const [mounted, setMounted] = useState<boolean[]>([]);
+
+    useEffect(() => {
+        const words = text.split(" ");
+        setMounted(new Array(words.length).fill(false));
+        
+        words.forEach((_, index) => {
+            setTimeout(() => {
+                setMounted(prev => {
+                    const newMounted = [...prev];
+                    newMounted[index] = true;
+                    return newMounted;
+                });
+            }, index * 50);
+        });
+    }, [text]);
+
+    return (
+        <Box mt={props.mt}>
+            <Box className={classes.displayArea}>
+                <Text size="sm" mb="md" c="dimmed">
+                    Your seed phrase:
+                </Text>
+                <SimpleGrid cols={3} spacing="xs">
+                    {text.split(" ").map((v, i) => {
+                        return (
+                            <Box 
+                                key={i}
+                                className={classes.wordBox}
+                                style={{
+                                    opacity: mounted[i] ? 1 : 0,
+                                    transform: mounted[i] ? 'scale(1)' : 'scale(0.9)',
+                                    transition: 'opacity 300ms ease, transform 300ms ease',
+                                }}
+                            >
+                                <Text size="xs" c="dimmed" mr={4}>{i + 1}.</Text>
+                                <Text size="sm" fw={500}>{v}</Text>
+                            </Box>
+                        );
+                    })}
+                </SimpleGrid>
+            </Box>
+        </Box>
+    )
+}