feat: nft collection sort by timestamp (#342)

Magickbase · May 23, 2024 · fb3972b · fb3972b
1 parent 5b9f6a0
commit fb3972b
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 18 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -763,6 +763,7 @@
       "transfer-list": "Transfers",
       "holder-list": "Holders",
       "transactions": "24hr Transactions",
+      "created_time": "Created Time",
       "holder": "Holder",
       "minted": "Minted",
       "owner": "Owner",

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -764,6 +764,7 @@
       "transfer-list": "转让记录",
       "holder-list": "持有人列表",
       "transactions": "24小时交易数",
+      "created_time": "发行时间",
       "holder": "持有人",
       "minted": "发行数",
       "quantity": "数量",

diff --git a/src/pages/NftCollections/List.tsx b/src/pages/NftCollections/List.tsx
@@ -12,6 +12,7 @@ import { useIsMobile, useSearchParams } from '../../hooks'
 import styles from './styles.module.scss'
 import type { NFTCollection } from '../../services/ExplorerService/fetcher'
 import { useNFTCollectionsSortParam } from './util'
+import { parseSimpleDate } from '../../utils/date'
 
 const primaryColor = getPrimaryColor()
 function useFilterList(): Record<'title' | 'value', string>[] {
@@ -113,6 +114,23 @@ const HolderMinterSort = () => {
     </div>
   )
 }
+interface SimpleSortProps {
+  sortField: 'transactions' | 'timestamp'
+  fieldI18n: string
+}
+const SimpleSortHeader: React.FC<SimpleSortProps> = ({ sortField, fieldI18n }) => {
+  const sortParam = useNFTCollectionsSortParam()
+  const { handleSortClick } = sortParam
+  return (
+    <span>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <span onClick={() => handleSortClick(sortField)} role="button" tabIndex={0}>
+        {fieldI18n}
+      </span>
+      <SortButton field={sortField} sortParam={sortParam} />
+    </span>
+  )
+}
 
 const TypeInfo: React.FC<{ nft: NFTCollection }> = ({ nft: item }) => {
   const { t } = useTranslation()
@@ -149,7 +167,6 @@ const TypeInfo: React.FC<{ nft: NFTCollection }> = ({ nft: item }) => {
 
 export const ListOnDesktop: React.FC<{ isLoading: boolean; list: NFTCollection[] }> = ({ list, isLoading }) => {
   const { t } = useTranslation()
-  const sortParam = useNFTCollectionsSortParam()
 
   return (
     <table data-role="desktop-list">
@@ -160,17 +177,14 @@ export const ListOnDesktop: React.FC<{ isLoading: boolean; list: NFTCollection[]
             <TypeFilter />
           </th>
           <th className={styles.transactionsHeader}>
-            <span>
-              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-              <span onClick={() => sortParam.handleSortClick('transactions')} role="button" tabIndex={0}>
-                {t('nft.transactions')}
-              </span>
-              <SortButton field="transactions" sortParam={sortParam} />
-            </span>
+            <SimpleSortHeader sortField="transactions" fieldI18n={t('nft.transactions')} />
           </th>
           <th>
             <HolderMinterSort />
           </th>
+          <th>
+            <SimpleSortHeader sortField="timestamp" fieldI18n={t('nft.created_time')} />
+          </th>
           <th>{t('nft.minter_address')}</th>
         </tr>
       </thead>
@@ -230,6 +244,7 @@ export const ListOnDesktop: React.FC<{ isLoading: boolean; list: NFTCollection[]
                 <td>{`${(item.holders_count ?? 0).toLocaleString('en')}/${(item.items_count ?? 0).toLocaleString(
                   'en',
                 )}`}</td>
+                <td>{item.timestamp === null ? '' : parseSimpleDate(item.timestamp)}</td>
                 <td>
                   <div>
                     {item.creator ? (
@@ -253,7 +268,7 @@ export const ListOnDesktop: React.FC<{ isLoading: boolean; list: NFTCollection[]
           })
         ) : (
           <tr>
-            <td colSpan={5} className={styles.noRecord}>
+            <td colSpan={6} className={styles.noRecord}>
               {isLoading ? 'loading' : t(`nft.no_record`)}
             </td>
           </tr>
@@ -265,20 +280,14 @@ export const ListOnDesktop: React.FC<{ isLoading: boolean; list: NFTCollection[]
 
 export const ListOnMobile: React.FC<{ isLoading: boolean; list: NFTCollection[] }> = ({ list, isLoading }) => {
   const { t } = useTranslation()
-  const sortParam = useNFTCollectionsSortParam()
 
   return (
     <div data-role="mobile-list">
       <div className={styles.listHeader}>
         <TypeFilter />
-        <span>
-          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-          <span onClick={() => sortParam.handleSortClick('transactions')} role="button" tabIndex={0}>
-            {t('nft.transactions')}
-          </span>
-          <SortButton field="transactions" sortParam={sortParam} />
-        </span>
+        <SimpleSortHeader sortField="transactions" fieldI18n={t('nft.transactions')} />
         <HolderMinterSort />
+        <SimpleSortHeader sortField="timestamp" fieldI18n={t('nft.created_time')} />
       </div>
       <div>
         {list.length ? (
@@ -343,6 +352,14 @@ export const ListOnMobile: React.FC<{ isLoading: boolean; list: NFTCollection[]
                     )}`}
                   </dd>
                 </dl>
+                <dl>
+                  <dt>{t('nft.transactions')}</dt>
+                  <dd>{item.h24_ckb_transactions_count}</dd>
+                </dl>
+                <dl>
+                  <dt>{t('nft.created_time')}</dt>
+                  <dd>{item.timestamp === null ? '' : parseSimpleDate(item.timestamp)}</dd>
+                </dl>
                 {item.creator ? (
                   <dl>
                     <dt>{t(`nft.minter_address`)}</dt>

diff --git a/src/pages/NftCollections/util.ts b/src/pages/NftCollections/util.ts
@@ -1,7 +1,7 @@
 import { includes } from '../../utils/array'
 import { useSortParam } from '../../hooks'
 
-const NFTSortByTypes = ['transactions', 'holder', 'minted'] as const
+const NFTSortByTypes = ['transactions', 'holder', 'minted', 'timestamp'] as const
 type NFTSortByType = (typeof NFTSortByTypes)[number]
 
 export const useNFTCollectionsSortParam = () =>

diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts
@@ -1133,6 +1133,7 @@ export interface NFTCollection {
   holders_count: number | null
   type_script: { code_hash: string; hash_type: 'data' | 'type'; args: string } | null
   sn: string
+  timestamp: number
 }
 
 export interface NFTItem {