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

@@ -10,11 +10,15 @@ import { COLORS } from '../../../styles/theme/colors'
 import { RouteUtils } from '../../utils/route-utils'
 import { useScreenSize } from '../../hooks/useScreensize'
 import HighlightOffIcon from '@mui/icons-material/HighlightOff'
+import ErrorIcon from '@mui/icons-material/Error'
 import IconButton from '@mui/material/IconButton'
 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'
+import Typography from '@mui/material/Typography'
+import { isValidBlockHeight } from '../../utils/helpers'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
 
@@ -101,10 +105,19 @@ 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 && !isValidBlockHeight(valueWithoutPrefix)
+
   useEffect(() => {
     setValue(valueInSearchParams)
   }, [valueInSearchParams])
 
+  const onChange = (newValue: string) => {
+    setValue(newValue)
+  }
+
   const onFocusChange = (value: boolean) => {
     setIsFocused(value)
     onFocusChangeProp?.(value)
@@ -113,7 +126,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
   const onFormSubmit = (e?: FormEvent) => {
     e?.preventDefault()
     if (value) {
-      navigate(RouteUtils.getSearchRoute(scope, value))
+      navigate(RouteUtils.getSearchRoute(scope, valueWithoutPrefix))
     }
   }
 
@@ -133,6 +146,8 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
   const searchButtonContent =
     variant !== 'button' ? <SearchIcon sx={{ color: COLORS.grayMediumLight }} /> : t('search.searchBtnText')
 
+  const hasError = isTooShort
+
   return (
     <SearchForm
       searchVariant={variant}
@@ -142,7 +157,8 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
     >
       <TextField
         value={value}
-        onChange={e => setValue(e.target.value)}
+        onChange={e => onChange(e.target.value)}
+        error={hasError}
         onFocus={() => onFocusChange(true)}
         onBlur={() => onFocusChange(false)}
         InputProps={{
@@ -158,7 +174,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
                     <HighlightOffIcon />
                   </IconButton>
                 )}
-                <SearchButton disabled={disabled} searchVariant={variant} type="submit">
+                <SearchButton disabled={disabled || hasError} searchVariant={variant} type="submit">
                   {searchButtonContent}
                 </SearchButton>
               </>
@@ -178,12 +194,35 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
         helperText={
           value &&
           value !== valueInSearchParams && (
-            <SearchSuggestionsButtons
-              scope={scope}
-              onClickSuggestion={suggestion => {
-                setValue(suggestion)
-              }}
-            />
+            <div>
+              {isTooShort && (
+                <>
+                  <Typography
+                    component="span"
+                    sx={{
+                      display: 'inline-flex',
+                      color: COLORS.errorIndicatorBackground,
+                      background: COLORS.linen,
+                      fontSize: 12,
+                      alignItems: 'center',
+                      verticalAlign: 'middle',
+                      mb: 3,
+                    }}
+                  >
+                    <ErrorIcon />
+                    &nbsp;
+                    {t('search.error.tooShort')}
+                  </Typography>
+                  <br />
+                </>
+              )}
+              <SearchSuggestionsButtons
+                scope={scope}
+                onClickSuggestion={suggestion => {
+                  setValue(suggestion)
+                }}
+              />
+            </div>
           )
         }
       />

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

@@ -374,6 +374,9 @@
   },
   "search": {
     "placeholder": "Address, Block, Contract, Txn Hash, Transaction ID, Token name, etc",
+    "error": {
+      "tooShort": "Please enter either at least 3 characters or a number in order to perform a search."
+    },
     "mobilePlaceholder": "Search Address, Block, Txn, Token, etc",
     "noResults": {
       "header": "No results found",

src/styles/theme/defaultTheme.ts

@@ -655,6 +655,9 @@ export const defaultTheme = createTheme({
           [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
             borderWidth: '3px',
           },
+          [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
+            borderWidth: '1px !important',
+          },
         },
         notchedOutline: {
           borderColor: 'transparent',