Fix: search spore result error

src/components/Search/AggregateSearchResults.module.scss

@@ -64,7 +64,7 @@
 
 .content {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   overflow: hidden;
   width: 100%;
   padding: 4px;

src/components/Search/AggregateSearchResults.tsx

@@ -60,6 +60,7 @@ export const AggregateSearchResults: FC<Props> = ({ keyword = '', results, loadi
           {(Object.keys(categories) as SearchResultType[]).map(category => (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div
+              key={category}
               className={classNames(styles.searchCategoryTag, { [styles.active]: activatedCategory === category })}
               onClick={() => setActivatedCategory(pre => (pre === category ? undefined : category))}
             >
@@ -152,6 +153,53 @@ const SearchResultItem: FC<{ keyword?: string; item: AggregateSearchResult }> =
     )
   }
 
+  if (item.type === SearchResultType.TokenItem) {
+    return (
+      <Link className={styles.searchResult} to={to}>
+        <div className={styles.content}>
+          {item.attributes.iconUrl ? (
+            <img
+              src={`${patchMibaoImg(item.attributes.tokenCollection.iconUrl)}?size=small`}
+              alt="cover"
+              loading="lazy"
+              className={styles.icon}
+              onError={handleNftImgError}
+            />
+          ) : (
+            <img
+              src={
+                item.attributes.tokenCollection.standard === 'spore'
+                  ? '/images/spore_placeholder.svg'
+                  : '/images/nft_placeholder.png'
+              }
+              alt="cover"
+              loading="lazy"
+              className={styles.icon}
+            />
+          )}
+
+          <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', flex: 1 }}>
+            {!displayName ? (
+              t('udt.unknown_token')
+            ) : (
+              <HighlightText text={displayName} keyword={keyword} style={{ flex: 1 }} />
+            )}
+
+            <div className={classNames(styles.secondaryText, styles.subTitle, 'monospace')}>
+              <span style={{ marginRight: 4, flexShrink: 0 }}>sn: </span>
+              <HighlightText style={{ width: '100%' }} text={item.attributes.tokenCollection.sn} keyword={keyword} />
+            </div>
+
+            <div className={classNames(styles.secondaryText, styles.subTitle, 'monospace')}>
+              <span style={{ marginRight: 4, flexShrink: 0 }}>tokenId: </span>
+              <HighlightText style={{ width: '100%' }} text={item.attributes.tokenId} keyword={keyword} />
+            </div>
+          </div>
+        </div>
+      </Link>
+    )
+  }
+
   if (item.type === SearchResultType.DID) {
     return (
       <Link className={styles.searchResult} to={to}>

src/components/Search/index.tsx

@@ -41,6 +41,7 @@ const ALLOW_SEARCH_TYPES = [
   SearchResultType.Transaction,
   SearchResultType.TypeScript,
   SearchResultType.TokenCollection,
+  SearchResultType.TokenItem,
   SearchResultType.UDT,
   SearchResultType.DID,
   SearchResultType.BtcAddress,

src/components/Search/utils.ts

@@ -42,6 +42,9 @@ export const getURLByAggregateSearchResult = (result: AggregateSearchResult) =>
     case SearchResultType.TokenCollection:
       return `/nft-collections/${attributes.sn}`
 
+    case SearchResultType.TokenItem:
+      return `/nft-info/${attributes.tokenCollection.sn}/${attributes.tokenId}`
+
     case SearchResultType.BtcTx:
       return `/transaction/${attributes.ckbTransactionHash}`
 
@@ -85,6 +88,9 @@ export const getDisplayNameByAggregateSearchResult = (result: AggregateSearchRes
   if (type === SearchResultType.TokenCollection) {
     return attributes.name
   }
+  if (type === SearchResultType.TokenItem) {
+    return attributes.name ?? attributes.tokenCollection.name
+  }
   if (type === SearchResultType.DID) {
     return attributes.did
   }

src/locales/en.json

@@ -381,6 +381,7 @@
       "bitcoin_transaction": "BTC TX",
       "bitcoin_address": "BTC Address",
       "token_collection": "Token Collection",
+      "token_item": "Token Item",
       "did": "DID"
     },
     "address": {

src/locales/zh.json

@@ -380,7 +380,8 @@
       "lock_script": "锁定脚本",
       "bitcoin_transaction": "BTC 交易",
       "bitcoin_address": "BTC 地址",
-      "token_collection": "藏品",
+      "token_collection": "藏品集",
+      "token_item": "藏品",
       "did": "分布式数字身份（DID）"
     },
     "address": {

src/services/ExplorerService/fetcher.ts

@@ -14,6 +14,7 @@ import {
   SupportedExportTransactionType,
   TransactionRecord,
   LiveCell,
+  TokenCollection,
 } from './types'
 import { assert } from '../../utils/error'
 import { Cell } from '../../models/Cell'
@@ -64,6 +65,7 @@ export enum SearchResultType {
   LockScript = 'lock_script',
   BtcTx = 'bitcoin_transaction',
   TokenCollection = 'token_collection',
+  TokenItem = 'token_item',
   DID = 'did',
   BtcAddress = 'bitcoin_address',
 }
@@ -82,16 +84,17 @@ export type AggregateSearchResult =
   | Response.Wrapper<BtcTx, SearchResultType.BtcTx>
   | Response.Wrapper<Script & { scriptHash: string }, SearchResultType.TypeScript>
   | Response.Wrapper<Script, SearchResultType.LockScript>
+  | Response.Wrapper<TokenCollection, SearchResultType.TokenCollection>
   | Response.Wrapper<
       {
-        standard: string
-        name: string
-        description: string
-        iconUrl: string
-        symbol: string
-        sn: string
+        name: string | null
+        iconUrl: string | null
+        metadataUrl: string | null
+        status: string
+        tokenId: string
+        tokenCollection: TokenCollection
       },
-      SearchResultType.TokenCollection
+      SearchResultType.TokenItem
     >
   // This type is currently checked and inserted by the frontend
   | Response.Wrapper<

src/services/ExplorerService/types.ts

@@ -391,3 +391,12 @@ export interface LiveCell {
     tokenId: string
   }
 }
+
+export interface TokenCollection {
+  standard: string
+  name: string
+  description: string
+  iconUrl: string
+  symbol: string
+  sn: string
+}