diff --git a/apps/web/src/components/MnemonicWord/MnemonicWord.tsx b/apps/web/src/components/MnemonicWord/MnemonicWord.tsx new file mode 100644 index 0000000000..5909ed6986 --- /dev/null +++ b/apps/web/src/components/MnemonicWord/MnemonicWord.tsx @@ -0,0 +1,43 @@ +import { GridItem, type GridItemProps, Text } from "@chakra-ui/react"; +import { MnemonicAutocomplete } from "@umami/components"; +import { type ComponentProps } from "react"; + +import { useColor } from "../../styles/useColor"; + +type MnemonicWordProps = { + index: number; + word?: string; + autocompleteProps?: ComponentProps; +} & GridItemProps; + +export const MnemonicWord = ({ index, word, autocompleteProps, ...props }: MnemonicWordProps) => { + const color = useColor(); + + return ( + + + {String(index + 1).padStart(2, "0")}. + + {autocompleteProps && } + {word && ( + + {word} + + )} + + ); +}; diff --git a/apps/web/src/components/MnemonicWord/index.ts b/apps/web/src/components/MnemonicWord/index.ts new file mode 100644 index 0000000000..058f49c522 --- /dev/null +++ b/apps/web/src/components/MnemonicWord/index.ts @@ -0,0 +1 @@ +export { MnemonicWord } from "./MnemonicWord"; diff --git a/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx b/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx index 690dff38c0..77783d5d04 100644 --- a/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx +++ b/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx @@ -7,12 +7,10 @@ import { Button, Flex, Grid, - GridItem, Heading, Icon, - Text, } from "@chakra-ui/react"; -import { MnemonicAutocomplete, useDynamicModalContext, useMultiForm } from "@umami/components"; +import { useDynamicModalContext, useMultiForm } from "@umami/components"; import { useAsyncActionHandler } from "@umami/state"; import { validateMnemonic } from "bip39"; import { range } from "lodash"; @@ -20,6 +18,7 @@ import { FormProvider, useFieldArray } from "react-hook-form"; import { CloseIcon } from "../../../assets/icons"; import { useColor } from "../../../styles/useColor"; +import { MnemonicWord } from "../../MnemonicWord"; import { RadioButtons } from "../../RadioButtons"; import { SetupPassword } from "../SetupPassword"; @@ -114,21 +113,11 @@ export const SeedPhraseTab = () => { {fields.map((field, index) => ( - - - {String(index + 1).padStart(2, "0")}. - - { @@ -137,9 +126,10 @@ export const SeedPhraseTab = () => { }, variant: "mnemonic", placeholder: `word #${index + 1}`, - }} - /> - + }, + }} + index={index} + /> ))}