Include tokens in search suggestions

oasisprotocol · Jul 3, 2023 · 1f5b744 · 1f5b744
1 parent b1c8d2a
commit 1f5b744
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/src/app/components/Search/SearchSuggestionsButtons.tsx b/src/app/components/Search/SearchSuggestionsButtons.tsx
@@ -7,6 +7,7 @@ import { COLORS } from '../../../styles/theme/colors'
 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 { searchSuggestionTerms } from './search-utils'
 import { OptionalBreak } from '../OptionalBreak'
 import { SearchScope } from '../../../types/searchScope'
@@ -35,7 +36,7 @@ interface Props {
 
 export const SearchSuggestionsButtons: FC<Props> = ({ scope, onClickSuggestion }) => {
   const { t } = useTranslation()
-  const { suggestedBlock, suggestedTransaction, suggestedAccount } =
+  const { suggestedBlock, suggestedTransaction, suggestedAccount, suggestedTokenFragment } =
     (scope?.network && scope?.layer && searchSuggestionTerms[scope.network][scope.layer]) ??
     searchSuggestionTerms['mainnet']['sapphire']!
 
@@ -53,6 +54,8 @@ export const SearchSuggestionsButtons: FC<Props> = ({ scope, onClickSuggestion }
             TransactionLink: <SuggestionButton onClick={() => onClickSuggestion(suggestedTransaction)} />,
             AccountIcon: <AccountBalanceWalletIcon sx={{ fontSize: '18px' }} />,
             AccountLink: <SuggestionButton onClick={() => onClickSuggestion(suggestedAccount)} />,
+            TokenIcon: <TokenIcon sx={{ fontSize: '18px' }} />,
+            TokenLink: <SuggestionButton onClick={() => onClickSuggestion(suggestedTokenFragment)} />,
           }}
         />
       </Typography>

diff --git a/src/app/components/Search/SearchSuggestionsLinks.tsx b/src/app/components/Search/SearchSuggestionsLinks.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 export const SearchSuggestionsLinks: FC<Props> = ({ scope }) => {
   const { t } = useTranslation()
-  const { suggestedBlock, suggestedTransaction, suggestedAccount } =
+  const { suggestedBlock, suggestedTransaction, suggestedAccount, suggestedTokenFragment } =
     (scope?.network && scope?.layer && searchSuggestionTerms[scope.network][scope.layer]) ??
     searchSuggestionTerms['mainnet']['sapphire']!
 
@@ -31,6 +31,10 @@ export const SearchSuggestionsLinks: FC<Props> = ({ scope }) => {
         ),
         AccountIcon: <></>,
         AccountLink: <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedAccount)} />,
+        TokenIcon: <></>,
+        TokenLink: (
+          <Link component={RouterLink} to={RouteUtils.getSearchRoute(scope, suggestedTokenFragment)} />
+        ),
       }}
     />
   )

diff --git a/src/app/components/Search/search-utils.ts b/src/app/components/Search/search-utils.ts
@@ -16,6 +16,7 @@ type LayerSuggestions = {
   suggestedBlock: string
   suggestedTransaction: string
   suggestedAccount: string
+  suggestedTokenFragment: string
 }
 
 export const searchSuggestionTerms: Record<Network, Partial<Record<Layer, LayerSuggestions>>> = {
@@ -24,18 +25,21 @@ export const searchSuggestionTerms: Record<Network, Partial<Record<Layer, LayerS
       suggestedBlock: '4260',
       suggestedTransaction: '0x2f461f83745e1fa1177138aa815e210e1c69305db8065af9015b2e490a5033f1',
       suggestedAccount: '0x0266562AB0aE2a80C14373029a70F73A9A3dB9d3',
+      suggestedTokenFragment: 'yuzu',
     },
     sapphire: {
       suggestedBlock: '4260',
       suggestedTransaction: '0x5900415a3fbb39325d5dfe145d1eccd1586a2afe12a204de34ecac0c808ac3f7',
       suggestedAccount: '0x90adE3B7065fa715c7a150313877dF1d33e777D5',
+      suggestedTokenFragment: 'mock',
     },
   },
   testnet: {
     sapphire: {
       suggestedBlock: '4260',
       suggestedTransaction: '0xd9b5c08be1cb74229abedd9b3e1afb8b43228085a6abf72993db415959ab6b35',
       suggestedAccount: '0xfA3AC9f65C9D75EE3978ab76c6a1105f03156204',
+      suggestedTokenFragment: 'USD',
     },
   },
 } satisfies SpecifiedPerEnabledLayer

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -358,8 +358,8 @@
     "selectNetworkAria": "Toggle network selector"
   },
   "search": {
-    "placeholder": "Address, Block, Contract, Txn Hash, Transaction ID, etc",
-    "mobilePlaceholder": "Search Address, Block, Txn, etc",
+    "placeholder": "Address, Block, Contract, Txn Hash, Transaction ID, Token name, etc",
+    "mobilePlaceholder": "Search Address, Block, Txn, Token, etc",
     "noResults": {
       "header": "No results found",
       "scopeHeader": "No results found on {{scope}}",
@@ -393,7 +393,7 @@
       "moreCount_other": "{{ count }} more results"
     },
     "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></OptionalBreak>",
+    "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>",
     "sectionHeader": "Results on {{ scope }}"
   }
 }