Merge pull request #1080 from oasisprotocol/csillag/improve-search-su…

…ggestions-on-no-results Improve the "no results found" screen
oasisprotocol · Dec 11, 2023 · 9156cc2 · 9156cc2
2 parents f707baa + c184641
commit 9156cc2
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/.changelog/1080.trivial.md b/.changelog/1080.trivial.md
@@ -0,0 +1 @@
+Improve the no results found screen
diff --git a/...ponents/Search/SearchSuggestionsLinks.tsx → ...ch/SearchSuggestionsLinksForNoResults.tsx b/...ponents/Search/SearchSuggestionsLinks.tsx → ...ch/SearchSuggestionsLinksForNoResults.tsx
@@ -3,35 +3,50 @@ import { searchSuggestionTerms } from '../../components/Search/search-utils'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link as RouterLink } from 'react-router-dom'
 import Link from '@mui/material/Link'
+import WidgetsIcon from '@mui/icons-material/Widgets'
+import RepeatIcon from '@mui/icons-material/Repeat'
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
+import TokenIcon from '@mui/icons-material/Token'
 import { RouteUtils } from '../../utils/route-utils'
 import { OptionalBreak } from '../OptionalBreak'
 import { SearchScope } from '../../../types/searchScope'
+import { useScreenSize } from '../../hooks/useScreensize'
+import { SxProps } from '@mui/material/styles'
 
 interface Props {
   scope: SearchScope | undefined
 }
 
-export const SearchSuggestionsLinks: FC<Props> = ({ scope }) => {
+const iconSxProps: SxProps = {
+  fontSize: '18px',
+  verticalAlign: 'middle',
+  marginBottom: 1,
+}
+
+const empty = <></>
+
+export const SearchSuggestionsLinksForNoResults: FC<Props> = ({ scope }) => {
   const { t } = useTranslation()
+  const { isMobile } = useScreenSize()
   const { suggestedBlock, suggestedTransaction, suggestedAccount, suggestedTokenFragment } =
     (scope?.network && scope?.layer && searchSuggestionTerms[scope.network][scope.layer]) ??
     searchSuggestionTerms['mainnet']['sapphire']!
 
   return (
     <Trans
       t={t}
-      i18nKey="search.searchSuggestions"
+      i18nKey="search.searchSuggestionsForNoResults"
       components={{
         OptionalBreak: <OptionalBreak />,
-        BlockIcon: <></>,
+        BlockIcon: isMobile ? empty : <WidgetsIcon sx={iconSxProps} />,
         BlockLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedBlock)} />,
-        TransactionIcon: <></>,
+        TransactionIcon: isMobile ? empty : <RepeatIcon sx={iconSxProps} />,
         TransactionLink: (
           <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTransaction)} />
         ),
-        AccountIcon: <></>,
+        AccountIcon: isMobile ? empty : <AccountBalanceWalletIcon sx={iconSxProps} />,
         AccountLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedAccount)} />,
-        TokenIcon: <></>,
+        TokenIcon: isMobile ? empty : <TokenIcon sx={iconSxProps} />,
         TokenLink: (
           <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTokenFragment)} />
         ),

diff --git a/src/app/pages/SearchResultsPage/NoResults.tsx b/src/app/pages/SearchResultsPage/NoResults.tsx
@@ -4,7 +4,7 @@ import { EmptyState } from '../../components/EmptyState'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link as RouterLink } from 'react-router-dom'
 import Link from '@mui/material/Link'
-import { SearchSuggestionsLinks } from '../../components/Search/SearchSuggestionsLinks'
+import { SearchSuggestionsLinksForNoResults } from '../../components/Search/SearchSuggestionsLinksForNoResults'
 import { OptionalBreak } from '../../components/OptionalBreak'
 import { useTheme } from '@mui/material/styles'
 import { getNameForScope, SearchScope } from '../../../types/searchScope'
@@ -41,7 +41,7 @@ export const NoResults: FC<{
             />
           </p>
           <p>
-            <SearchSuggestionsLinks scope={layer && network ? { network, layer } : undefined} />
+            <SearchSuggestionsLinksForNoResults scope={layer && network ? { network, layer } : undefined} />
           </p>
         </Box>
       }

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -418,7 +418,7 @@
     "noResults": {
       "header": "No results found",
       "scopeHeader": "No results found on {{scope}}",
-      "description": "Please try another search query <OptionalBreak>or <HomeLink>explore Oasis</HomeLink></OptionalBreak>"
+      "description": "Please try another search query <OptionalBreak> or explore the <HomeLink>Oasis ecosystem</HomeLink>.</OptionalBreak>"
     },
     "otherResults": {
       "clickToShowThem": "We found <strong>{{ countLabel }}</strong> on other <strong>Networks</strong>. Click to open these results.",
@@ -453,6 +453,7 @@
     },
     "searchBtnText": "Search",
     "searchSuggestions": "Not sure what to look for? Try out a search: <OptionalBreak><BlockLink><BlockIcon/> Block</BlockLink>, <TransactionLink><TransactionIcon/> Transaction</TransactionLink>, <AccountLink><AccountIcon/> Address</AccountLink>, <TokenLink><TokenIcon/> Token</TokenLink> </OptionalBreak>.",
+    "searchSuggestionsForNoResults": "Alternatively, you can view a random <BlockLink><BlockIcon/> Block</BlockLink>, <OptionalBreak><TransactionLink><TransactionIcon/> Transaction</TransactionLink>, <AccountLink><AccountIcon/> Address</AccountLink> or <TokenLink><TokenIcon/> Token</TokenLink></OptionalBreak> <OptionalBreak>to discover our Explorer.</OptionalBreak>",
     "wordsOfPower": "I COMMAND THEE TO SEARCH FOR"
   }
 }