From a674fbc6066126a6c017a18892ceaa01026dbff7 Mon Sep 17 00:00:00 2001
From: Ali Raza <87068339+aliraza556@users.noreply.github.com>
Date: Wed, 21 Aug 2024 20:20:26 +0500
Subject: [PATCH] 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 <16132011+mrcnk@users.noreply.github.com>
---
 packages/features/src/components/autocomplete.tsx   | 13 +++++++++++--
 .../features/src/onboarding/views/seed-import.tsx   |  3 ++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/features/src/components/autocomplete.tsx b/packages/features/src/components/autocomplete.tsx
index f5ae0a50..af2d6ae6 100644
--- 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
index 16219d73..63ea3856 100644
--- 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>