Add Word Number Labels to Mnemonic Inputs in Wallet Restoration Flow (#…

…202) * add word number label * added space double digit * add space single digit * fix lint error --------- Co-authored-by: Tomek Marciniak <[email protected]>
palladians · Aug 21, 2024 · a674fbc · a674fbc
1 parent 678ec59
commit a674fbc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/features/src/components/autocomplete.tsx b/packages/features/src/components/autocomplete.tsx
@@ -20,6 +20,7 @@ type AutocompleteProps = {
   autoFocus?: boolean
   testId: string
   inputProps: UseFormRegisterReturn
+  wordNumber: number
 }
 
 export const Autocomplete = ({
@@ -31,20 +32,28 @@ export const Autocomplete = ({
   testId,
   inputProps,
   setValue,
+  wordNumber,
 }: AutocompleteProps) => {
   const filteredOptions = take(3, matchSorter(options, currentValue))
   return (
-    <div className="dropdown">
+    <div className="dropdown relative">
       <Combobox value={currentValue} onChange={setValue}>
         <ComboboxInput
-          className="input text-sm w-full bg-[#413E5E]"
+          className={clsx(
+            "input text-sm w-full bg-[#413E5E] caret-[#eec382]",
+            wordNumber > 9 ? "pl-8" : "pl-6",
+          )}
           placeholder={placeholder}
           autoFocus={autoFocus}
           onPaste={onPaste}
           autoComplete="off"
           data-testid={testId}
           {...inputProps}
+          style={{ position: "relative" }}
         />
+        <span className="absolute left-2 top-1/2 transform -translate-y-1/2 text-[#afd9e2] pointer-events-none">
+          {wordNumber}.
+        </span>
         <ComboboxOptions
           className={clsx(
             "dropdown-content z-10 menu shadow p-2 bg-secondary rounded-box w-28 empty:invisible",

diff --git a/packages/features/src/onboarding/views/seed-import.tsx b/packages/features/src/onboarding/views/seed-import.tsx
@@ -51,7 +51,7 @@ export const SeedImportView = ({
           <Autocomplete
             // biome-ignore lint: hardcoded
             key={i}
-            placeholder={`${wordLabel}.`}
+            placeholder=""
             options={wordlist}
             autoFocus={i === 0}
             currentValue={form.watch(`mnemonic.${i}`)}
@@ -70,6 +70,7 @@ export const SeedImportView = ({
               form.setValue(`mnemonic.${i}`, newValue)
             }
             inputProps={form.register(`mnemonic.${i}`, { value: "" })}
+            wordNumber={wordLabel}
           />
         ))}
       </div>