From f5cd6c1fd473d325264e981fcef92a2e5f77c878 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Tue, 4 Jul 2023 05:28:08 +0200
Subject: [PATCH] Show warning when search text is too short

---
 .changelog/671.feature.md                 |  1 +
 src/app/components/Search/index.tsx       | 25 ++++++++++++++++-------
 src/app/components/Search/search-utils.ts |  4 +++-
 src/locales/en/translation.json           |  3 +++
 4 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 .changelog/671.feature.md

diff --git a/.changelog/671.feature.md b/.changelog/671.feature.md
new file mode 100644
index 0000000000..27eb9a980e
--- /dev/null
+++ 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
index 58e4011c27..7d78b5b1fa 100644
--- a/src/app/components/Search/index.tsx
+++ b/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,10 +102,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)
@@ -112,9 +121,8 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
 
   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>
diff --git a/src/app/components/Search/search-utils.ts b/src/app/components/Search/search-utils.ts
index a54fe68b0c..ba6afd39e2 100644
--- 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
index aa4787cb9e..c67b22e811 100644
--- 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 for searching"
+    },
     "mobilePlaceholder": "Search Address, Block, Txn, Token, etc",
     "noResults": {
       "header": "No results found",