Add support for displaying token search results

oasisprotocol · Jul 1, 2023 · 84565de · 84565de
1 parent 8b937a8
commit 84565de
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/app/pages/SearchResultsPage/SearchResultsList.tsx b/src/app/pages/SearchResultsPage/SearchResultsList.tsx
@@ -5,12 +5,13 @@ import { BlockDetailView } from '../BlockDetailPage'
 import { RouteUtils } from '../../utils/route-utils'
 import { TransactionDetailView } from '../TransactionDetailPage'
 import { AccountDetailsView } from '../AccountDetailsPage'
-import { AccountResult, BlockResult, SearchResults, TransactionResult } from './hooks'
+import { AccountResult, BlockResult, SearchResults, TokenResult, TransactionResult } from './hooks'
 import { getThemesForNetworks } from '../../../styles/theme'
 import { Network } from '../../../types/network'
 import { SubPageCard } from '../../components/SubPageCard'
 import { AllTokenPrices } from '../../../coin-gecko/api'
 import { ResultListFrame } from './ResultListFrame'
+import { TokenDetails } from '../../components/Tokens/TokenDetails'
 
 /**
  * Component for displaying a list of search results
@@ -82,6 +83,14 @@ export const SearchResultsList: FC<{
           link={acc => RouteUtils.getAccountRoute(acc, acc.address_eth ?? acc.address)}
           linkLabel={t('search.results.accounts.viewLink')}
         />
+
+        <ResultsGroupByType
+          title={t('search.results.tokens.title')}
+          results={searchResults.filter((item): item is TokenResult => item.resultType === 'token')}
+          resultComponent={item => <TokenDetails token={item} showLayer />}
+          link={token => RouteUtils.getTokenRoute(token, token.eth_contract_addr ?? token.contract_addr)}
+          linkLabel={t('search.results.tokens.viewLink')}
+        />
       </SubPageCard>
     </ResultListFrame>
   )

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -379,6 +379,10 @@
         "title": "Blocks",
         "viewLink": "View Block"
       },
+      "tokens": {
+        "title": "Tokens",
+        "viewLink": "View Token"
+      },
       "transactions": {
         "title": "Transactions",
         "viewLink": "View Transaction"