Show warning when search text is too short

.changelog/671.feature.md

@@ -0,0 +1 @@
+Show a warning when search text string it too short

src/app/components/Search/index.tsx

@@ -15,6 +15,7 @@ import { SearchSuggestionsButtons } from './SearchSuggestionsButtons'
 import { formHelperTextClasses } from '@mui/material/FormHelperText'
 import { outlinedInputClasses } from '@mui/material/OutlinedInput'
 import { SearchScope } from '../../../types/searchScope'
+import { textSearchMininumLength } from './search-utils'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
 
@@ -101,20 +102,27 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
   const [isFocused, setIsFocused] = useState(false)
   const valueInSearchParams = useSearchParams()[0].get('q') ?? ''
 
+  const valueWithoutPrefix = value.trim()
+
+  const isTooShort = !!value && valueWithoutPrefix.length < textSearchMininumLength
+
   useEffect(() => {
     setValue(valueInSearchParams)
   }, [valueInSearchParams])
 
+  const onChange = (newValue: string) => {
+    setValue(newValue)
+  }
+
   const onFocusChange = (value: boolean) => {
     setIsFocused(value)
     onFocusChangeProp?.(value)
   }
 
   const onFormSubmit = (e?: FormEvent) => {
     e?.preventDefault()
-    if (value) {
-      navigate(RouteUtils.getSearchRoute(scope, value))
-    }
+    if (!value || isTooShort) return
+    navigate(RouteUtils.getSearchRoute(scope, valueWithoutPrefix))
   }
 
   const onClearValue = () => {
@@ -142,7 +150,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
     >
       <TextField
         value={value}
-        onChange={e => setValue(e.target.value)}
+        onChange={e => onChange(e.target.value)}
         onFocus={() => onFocusChange(true)}
         onBlur={() => onFocusChange(false)}
         InputProps={{
@@ -158,7 +166,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
                     <HighlightOffIcon />
                   </IconButton>
                 )}
-                <SearchButton disabled={disabled} searchVariant={variant} type="submit">
+                <SearchButton disabled={disabled || isTooShort} searchVariant={variant} type="submit">
                   {searchButtonContent}
                 </SearchButton>
               </>
@@ -177,14 +185,17 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
         }}
         helperText={
           value &&
-          value !== valueInSearchParams && (
+          value !== valueInSearchParams &&
+          (isTooShort ? (
+            t('search.error.tooShort')
+          ) : (
             <SearchSuggestionsButtons
               scope={scope}
               onClickSuggestion={suggestion => {
                 setValue(suggestion)
               }}
             />
-          )
+          ))
         }
       />
     </SearchForm>

src/app/components/Search/search-utils.ts

@@ -44,6 +44,8 @@ export const searchSuggestionTerms: Record<Network, Partial<Record<Layer, LayerS
   },
 } satisfies SpecifiedPerEnabledLayer
 
+export const textSearchMininumLength = 3
+
 export const validateAndNormalize = {
   blockHeight: (searchTerm: string) => {
     // Remove localized digit group separators
@@ -85,7 +87,7 @@ export const validateAndNormalize = {
     }
   },
   evmTokenNameFragment: (searchTerm: string) => {
-    if (searchTerm?.length > 2) {
+    if (searchTerm?.length >= textSearchMininumLength) {
       return searchTerm.toLowerCase()
     }
   },

src/locales/en/translation.json

@@ -369,6 +369,9 @@
   },
   "search": {
     "placeholder": "Address, Block, Contract, Txn Hash, Transaction ID, Token name, etc",
+    "error": {
+      "tooShort": "Please enter at least 3 characters for searching"
+    },
     "mobilePlaceholder": "Search Address, Block, Txn, Token, etc",
     "noResults": {
       "header": "No results found",