feat: add number to every input

src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css

@@ -10,6 +10,22 @@
   padding: 12px;
   background-color: #f9f9f9;
   width: 100%;
+  font-size: 16px;
+}
+
+.input-wrapper {
+  position: relative;
+}
+
+.input-number {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  line-height: 50;
+  transform: translateY(-50%);
+  pointer-events: none;  
+  z-index: 2;
+  color: #0D162566;
 }
 
 .suggestion-list {
@@ -30,6 +46,7 @@
   padding: 12px 16px;
   cursor: pointer;
   border-radius: 24px;
+  font-weight: 500;
 }
 
 .suggestion-item:hover {

src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx

@@ -51,7 +51,7 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
   }
 
   const styleForInput = () => {
-    const style = { outline: 'none' }
+    const style = { outline: 'none', paddingLeft: index < 10 ? '30px' : '40px' }
 
     if (isFocused) {
       return { ...style, border: '2px solid #4360DF', marginBottom: '5px' }
@@ -63,14 +63,17 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
   return (
     <div className="autocomplete-container">
       <div className={isFocused ? 'suggestion-list' : ''}>
-        <input
-          className="autocomplete-input"
-          value={word}
-          onChange={handleInputChange}
-          onFocus={handleInputFocus}
-          onBlur={handleInputBlur}
-          style={styleForInput()}
-        />
+        <div className="input-wrapper">
+          <span className="input-number">{index + 1}.</span>
+          <input
+            className="autocomplete-input"
+            value={word}
+            onChange={handleInputChange}
+            onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
+            style={styleForInput()}
+          />
+        </div>
         {isFocused &&
           suggestions.map(suggestion => (
             <div