'init'

app/components/TextChain/TextChain.module.css

@@ -0,0 +1,43 @@
+.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;
+}
+
+.wordBox {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    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));
+    width: 100%;
+    height: 36px;
+    transition: all 0.2s ease;
+}
+
+.wordBox: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));
+}
+
+.wrapper{
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.pill {
+    padding: 5px 8px;
+    background-color: var(--mantine-color-blue-light);
+    border-radius: var(--mantine-radius-sm);
+}

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>
+    )
+}