From 0fe262d0659d3ba182e15d639a49e2a62913eded Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 7 Jul 2023 11:14:48 +0200 Subject: [PATCH 1/8] Update placeholder --- src/locales/en/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index d0bea5ae9..aa0ed53ae 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -374,7 +374,7 @@ "soon": "soon" }, "search": { - "placeholder": "Address, Block, Contract, Txn Hash, Transaction ID, Token name, etc", + "placeholder": "Address, Block, Contract, Transaction hash, Token name, etc.", "error": { "tooShort": "Please enter either at least 3 characters or a number in order to perform a search.", "privacy": "It seems like you might accidentally entered a keyphrase for a wallet. Please note that your mnemonic is a secret key that should never be shared, even not with our {{ pagetitle }}.\nExecuting this search is highly unlikely to return any results. If you want to proceed nonetheless, please add “{{ wordsOfPower }}” in front of your search query to perform the search at your own risk." From fd58c26df653ae87580ef39343f7b9262b795819 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 7 Jul 2023 12:34:23 +0200 Subject: [PATCH 2/8] Add missing dot after search suggestions --- src/locales/en/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index aa0ed53ae..e8e4948f0 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -413,7 +413,7 @@ "moreCount_other": "{{ count }} more results" }, "searchBtnText": "Search", - "searchSuggestions": "Not sure what to look for? Try out a search: Block, Transaction, Address, Token ", + "searchSuggestions": "Not sure what to look for? Try out a search: Block, Transaction, Address, Token .", "sectionHeader": "Results on {{ scope }}", "wordsOfPower": "I COMMAND THEE TO SEARCH FOR" } From deb13691c8df3dd0d569a93a6c9dc06adf796606 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 7 Jul 2023 11:24:45 +0200 Subject: [PATCH 3/8] Show the clear search button on desktop, too --- src/app/components/Search/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx index a5606627f..b6fbe7049 100644 --- a/src/app/components/Search/index.tsx +++ b/src/app/components/Search/index.tsx @@ -183,7 +183,7 @@ const SearchCmp: FC = ({ scope, variant, disabled, onFocusChange: o endAdornment: ( <> - {variant === 'icon' && value && ( + {value && ( From de3f321228b5cb8a0eae8d5ab35bde27422aa162 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 7 Jul 2023 12:07:06 +0200 Subject: [PATCH 4/8] Fix broken label --- src/locales/en/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index e8e4948f0..dfda3214e 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -377,7 +377,7 @@ "placeholder": "Address, Block, Contract, Transaction hash, Token name, etc.", "error": { "tooShort": "Please enter either at least 3 characters or a number in order to perform a search.", - "privacy": "It seems like you might accidentally entered a keyphrase for a wallet. Please note that your mnemonic is a secret key that should never be shared, even not with our {{ pagetitle }}.\nExecuting this search is highly unlikely to return any results. If you want to proceed nonetheless, please add “{{ wordsOfPower }}” in front of your search query to perform the search at your own risk." + "privacy": "It seems like you might accidentally entered a keyphrase for a wallet. Please note that your mnemonic is a secret key that should never be shared, even not with our {{ appName }}.\nExecuting this search is highly unlikely to return any results. If you want to proceed nonetheless, please add “{{ wordsOfPower }}” in front of your search query to perform the search at your own risk." }, "mobilePlaceholder": "Search Address, Block, Txn, Token, etc", "noResults": { From be025e3d0b9bfb381fc81cf0a691af812c6f28d6 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 7 Jul 2023 12:13:01 +0200 Subject: [PATCH 5/8] TextField: restore 3px border at all times --- src/styles/theme/defaultTheme.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts index 29c6b0b59..a050b7b66 100644 --- a/src/styles/theme/defaultTheme.ts +++ b/src/styles/theme/defaultTheme.ts @@ -654,9 +654,6 @@ export const defaultTheme = createTheme({ [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: { borderWidth: '3px', }, - [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: { - borderWidth: '1px !important', - }, }, notchedOutline: { borderColor: 'transparent', From 403dadd9df45470a86b9c8ef033e637d3f27b927 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 7 Jul 2023 12:08:10 +0200 Subject: [PATCH 6/8] Use different colors, icons and spacing for warning and errors --- src/app/components/Search/index.tsx | 61 +++++++++++++++++++++++------ 1 file changed, 48 insertions(+), 13 deletions(-) diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx index b6fbe7049..4098f8853 100644 --- a/src/app/components/Search/index.tsx +++ b/src/app/components/Search/index.tsx @@ -11,6 +11,7 @@ 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 WarningIcon from '@mui/icons-material/Warning' import IconButton from '@mui/material/IconButton' import { SearchSuggestionsButtons } from './SearchSuggestionsButtons' import { formHelperTextClasses } from '@mui/material/FormHelperText' @@ -154,13 +155,13 @@ const SearchCmp: FC = ({ scope, variant, disabled, onFocusChange: o const searchButtonContent = variant !== 'button' ? : t('search.searchBtnText') - const errorMessage = isTooShort - ? t('search.error.tooShort') - : hasPrivacyProblem + const errorMessage = isTooShort ? t('search.error.tooShort') : undefined + const hasError = !!errorMessage + + const warningMessage = hasPrivacyProblem ? t('search.error.privacy', { appName: t('appName'), wordsOfPower }) : undefined - - const hasError = !!errorMessage + const hasWarning = !!warningMessage return ( = ({ scope, variant, disabled, onFocusChange: o aria-label={searchPlaceholderTranslated} > onChange(e.target.value)} - error={hasError} + error={hasError || hasWarning} onFocus={() => onFocusChange(true)} onBlur={() => onFocusChange(false)} InputProps={{ @@ -188,7 +198,11 @@ const SearchCmp: FC = ({ scope, variant, disabled, onFocusChange: o )} - + {searchButtonContent} @@ -208,7 +222,7 @@ const SearchCmp: FC = ({ scope, variant, disabled, onFocusChange: o helperText={ value && value !== valueInSearchParams && ( -
+ <> {hasError && ( <> = ({ scope, variant, disabled, onFocusChange: o sx={{ display: 'inline-flex', color: COLORS.errorIndicatorBackground, - background: COLORS.linen, fontSize: 12, + lineHeight: 2, alignItems: 'center', verticalAlign: 'middle', - mb: 3, + mt: 3, + mb: 4, }} > - -   + {errorMessage}
)} + {hasWarning && ( + <> + + + {warningMessage} + +
+ + )} { setValue(suggestion) }} /> -
+ ) } /> From 25012455ce8457d7750dc6eb63811d82ada42799 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 7 Jul 2023 13:05:12 +0200 Subject: [PATCH 7/8] Add time delay before displaying the error and warning messages --- src/app/components/Search/index.tsx | 26 +++++++++++++++++--------- src/styles/theme/index.ts | 1 + 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx index 4098f8853..46bf7edb6 100644 --- a/src/app/components/Search/index.tsx +++ b/src/app/components/Search/index.tsx @@ -20,6 +20,7 @@ import { SearchScope } from '../../../types/searchScope' import { textSearchMininumLength } from './search-utils' import Typography from '@mui/material/Typography' import { isValidBlockHeight } from '../../utils/helpers' +import { typingDelay } from '../../../styles/theme' import { isValidMnemonic } from '../../utils/helpers' export type SearchVariant = 'button' | 'icon' | 'expandable' @@ -106,6 +107,7 @@ const SearchCmp: FC = ({ scope, variant, disabled, onFocusChange: o const [value, setValue] = useState('') const [isFocused, setIsFocused] = useState(false) const valueInSearchParams = useSearchParams()[0].get('q') ?? '' + const [isTyping, setIsTyping] = useState(false) const wordsOfPower = t('search.wordsOfPower') const hasWordsOfPower = value.trim().toLowerCase().startsWith(wordsOfPower.toLowerCase()) @@ -125,6 +127,7 @@ const SearchCmp: FC = ({ scope, variant, disabled, onFocusChange: o const onChange = (newValue: string) => { setValue(newValue) + setIsTyping(true) } const onFocusChange = (value: boolean) => { @@ -163,6 +166,15 @@ const SearchCmp: FC = ({ scope, variant, disabled, onFocusChange: o : undefined const hasWarning = !!warningMessage + const hasProblem = hasError || hasWarning + + useEffect(() => { + const timeout = setTimeout(() => { + setIsTyping(false) + }, typingDelay) + return () => clearTimeout(timeout) + }, [value]) + return ( = ({ scope, variant, disabled, onFocusChange: o > = ({ scope, variant, disabled, onFocusChange: o }} value={value} onChange={e => onChange(e.target.value)} - error={hasError || hasWarning} + error={!isTyping && hasProblem} onFocus={() => onFocusChange(true)} onBlur={() => onFocusChange(false)} InputProps={{ @@ -198,11 +210,7 @@ const SearchCmp: FC = ({ scope, variant, disabled, onFocusChange: o )} - + {searchButtonContent} @@ -223,7 +231,7 @@ const SearchCmp: FC = ({ scope, variant, disabled, onFocusChange: o value && value !== valueInSearchParams && ( <> - {hasError && ( + {!isTyping && hasError && ( <> = ({ scope, variant, disabled, onFocusChange: o
)} - {hasWarning && ( + {!isTyping && hasWarning && ( <> Record = () => ({ [Network.mainnet]: defaultTheme, From 2736a4c70b34982418ba7faf47a1c55f84f4f53a Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 7 Jul 2023 13:06:56 +0200 Subject: [PATCH 8/8] Add changelog --- .changelog/689.trivial.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 .changelog/689.trivial.md diff --git a/.changelog/689.trivial.md b/.changelog/689.trivial.md new file mode 100644 index 000000000..85bd19452 --- /dev/null +++ b/.changelog/689.trivial.md @@ -0,0 +1 @@ +Tweak the search field design and behavior