Show warning when search text is too short

oasisprotocol · Jul 5, 2023 · bc6297a · bc6297a
1 parent 0929a78
commit bc6297a
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 6 deletions.
diff --git a/.changelog/671.feature.md b/.changelog/671.feature.md
@@ -0,0 +1 @@
+Show a warning when search text string it too short
diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
@@ -10,11 +10,14 @@ 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'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
 
@@ -101,10 +104,18 @@ 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)
@@ -113,7 +124,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 +144,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}
@@ -141,8 +154,10 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
       aria-label={searchPlaceholderTranslated}
     >
       <TextField
+        sx={hasError ? { background: COLORS.linen } : {}}
         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 +173,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 +192,32 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
         }}
         helperText={
           value &&
-          value !== valueInSearchParams && (
+          value !== valueInSearchParams &&
+          (isTooShort ? (
+            <span>
+              <Typography
+                component="span"
+                sx={{
+                  display: 'inline-flex',
+                  color: COLORS.errorIndicatorBackground,
+                  fontSize: 12,
+                  alignItems: 'center',
+                  verticalAlign: 'middle',
+                }}
+              >
+                <ErrorIcon />
+                &nbsp;
+                {t('search.error.tooShort')}
+              </Typography>
+            </span>
+          ) : (
             <SearchSuggestionsButtons
               scope={scope}
               onClickSuggestion={suggestion => {
                 setValue(suggestion)
               }}
             />
-          )
+          ))
         }
       />
     </SearchForm>

diff --git a/src/app/components/Search/search-utils.ts b/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()
     }
   },

diff --git a/src/locales/en/translation.json b/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 in order to perform a search."
+    },
     "mobilePlaceholder": "Search Address, Block, Txn, Token, etc",
     "noResults": {
       "header": "No results found",