Merge pull request #332 from AElfProject/feature/refactor-2.0.0-Block…

…chain feat: change table font size
AElfProject · May 7, 2024 · 0d419a9 · 0d419a9
2 parents 8bd3840 + 34e8542
commit 0d419a9
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 56 deletions.
diff --git a/src/_api/fetchNFTS.ts b/src/_api/fetchNFTS.ts
@@ -1,6 +1,7 @@
 import request from '@_api';
-import { TTokenListRequestParams } from './type';
+import { ICollectionDetailRequestParams, TTokenListRequestParams } from './type';
 import { INFTsTableData } from '@app/[chain]/nfts/type';
+import { CollectionDetailData, CollectionTransfersData } from '@app/[chain]/nft/[collectionSymbol]/_Detail/type';
 
 const defaultTokenListData = {
   total: 0,
@@ -21,3 +22,20 @@ export async function fetchServerNFTSList(params: TTokenListRequestParams): Prom
   const data = result?.data || defaultTokenListData;
   return data;
 }
+export async function fetchServerCollectionDetail(
+  params: ICollectionDetailRequestParams,
+): Promise<CollectionDetailData> {
+  const result = await request.nfts.getServerCollectionDetail({
+    params: params,
+  });
+  const data = result?.data || defaultTokenListData;
+  return data;
+}
+
+export async function fetchNFTTransfers(params: ICollectionDetailRequestParams): Promise<CollectionTransfersData> {
+  const result = await request.nfts.getNFTTransfers({
+    params: params,
+  });
+  const data = result?.data || defaultTokenListData;
+  return data;
+}
diff --git a/src/_api/list.ts b/src/_api/list.ts
@@ -36,6 +36,8 @@ const Token_API_List = {
 const NFT_API_List = {
   getNFTSList: `${BASE_API}/app/token/nft/collection-list`,
   getServerNFTSList: `${SERVER_BASE_API}/app/token/nft/collection-list`,
+  getServerCollectionDetail: `${SERVER_BASE_API}/app/token/nft/collection-detail`,
+  getNFTTransfers: `${BASE_API}/app/token/nft/transfers`,
 };
 
 const Common_API_List = {

diff --git a/src/_api/type.ts b/src/_api/type.ts
@@ -224,3 +224,20 @@ export interface TTransactionsListRequestParams extends RequestInit {
   skipCount?: number;
   maxResultCount: number;
 }
+
+// collection
+
+export interface ICollectionDetailRequestParams extends RequestInit {
+  chainId: TChainID;
+  collectionSymbol: string;
+}
+
+export interface ICollectionTransfersRequestParams extends RequestInit {
+  chainId: TChainID;
+  skipCount: number;
+  maxResultCount: number;
+  collectionSymbol: string;
+  search: string;
+  orderBy: string;
+  sort: string;
+}
diff --git a/src/_components/Copy/index.tsx b/src/_components/Copy/index.tsx
@@ -18,5 +18,5 @@ export default function Copy({ value, className }: { value: string; className?:
       message.error('Copy failed, please copy by yourself.');
     }
   };
-  return <IconFont className={clsx(className, 'text-xs copy-btn w-3 h-3 ml-1')} type="Copy" onClick={handleCopy} />;
+  return <IconFont className={clsx(className, 'copy-btn ml-1 size-3 text-sm')} type="Copy" onClick={handleCopy} />;
 }
diff --git a/src/_components/Table/index.css b/src/_components/Table/index.css
@@ -3,15 +3,15 @@
     .explorer-table-cell {
       @apply py-3 pr-4 pl-0 bg-white border-none;
 
-      box-shadow: 0 -1px 0 0 #E6E6E6 inset;
+      box-shadow: 0 -1px 0 0 #e6e6e6 inset;
     }
     .explorer-table-cell:first-child {
       @apply pl-4 !important;
     }
     .explorer-table-thead {
       @apply border-none;
       .explorer-table-cell::before {
-        @apply bg-inherit w-0 h-0 !important; 
+        @apply bg-inherit w-0 h-0 !important;
       }
       .explorer-table-cell:first-child {
         @apply rounded-none pl-4 !important;
@@ -20,10 +20,10 @@
         @apply rounded-none !important;
       }
       .explorer-table-cell {
-        @apply py-2 pr-4 pl-0 text-xs bg-white border-none leading-5 text-base-100 font-medium !important; 
+        @apply py-2 pr-4 pl-0 text-xs bg-white border-none leading-5 text-base-100 font-medium !important;
       }
       .header-top {
-        @apply flex items-center !important; 
+        @apply flex items-center !important;
       }
       .explorer-table-column-sorters {
         @apply !flex-row-reverse;
@@ -33,24 +33,24 @@
       }
     }
     .explorer-table-tbody {
-      @apply text-xs leading-5 text-base-100;
+      @apply text-sm leading-[22px] text-base-100;
       .explorer-table-cell {
-        @apply leading-none;
+        @apply text-sm leading-[22px];
       }
     }
-
   }
   .explorer-pagination {
     .explorer-pagination-item {
       @apply hidden;
     }
-    .explorer-pagination-jump-prev,.explorer-pagination-jump-next {
+    .explorer-pagination-jump-prev,
+    .explorer-pagination-jump-next {
       @apply hidden;
     }
     .explorer-pagination-item-1 {
       @apply inline-block h-[1.875rem] px-2 bg-F7 border-D0;
     }
-  } 
+  }
 
   .ep-table-header {
     @apply flex items-center justify-between !important;
@@ -68,4 +68,4 @@
       @apply flex-1 flex-shrink-0;
     }
   }
-}
+}
diff --git a/src/app/[chain]/blocks/columnConfig.tsx b/src/app/[chain]/blocks/columnConfig.tsx
@@ -19,7 +19,7 @@ export default function getColumns({ timeFormat, handleTimeChange, chianId }): C
       dataIndex: 'blockHeight',
       key: 'blockHeight',
       render: (text) => (
-        <Link className="block text-xs leading-5 text-link" href={`/${chianId}/block/${text}`}>
+        <Link className="block text-sm leading-[22px] text-link" href={`/${chianId}/block/${text}`}>
           {text}
         </Link>
       ),
@@ -37,7 +37,7 @@ export default function getColumns({ timeFormat, handleTimeChange, chianId }): C
       dataIndex: 'timestamp',
       key: 'timestamp',
       render: (text) => {
-        return <div className="text-xs leading-5">{formatDate(text, timeFormat)}</div>;
+        return <div className="text-sm leading-[22px]">{formatDate(text, timeFormat)}</div>;
       },
     },
     {
@@ -46,7 +46,7 @@ export default function getColumns({ timeFormat, handleTimeChange, chianId }): C
       key: 'transactionCount',
       dataIndex: 'transactionCount',
       render: (text, record) => (
-        <Link className="block text-xs leading-5 text-link" href={`/${chianId}/block/${record.blockHeight}#txns`}>
+        <Link className="block text-sm leading-[22px] text-link" href={`/${chianId}/block/${record.blockHeight}#txns`}>
           {text}
         </Link>
       ),
@@ -59,7 +59,7 @@ export default function getColumns({ timeFormat, handleTimeChange, chianId }): C
       render: (address, record) => (
         <div className="flex items-center">
           <Link
-            className="block text-xs leading-5 text-link"
+            className="block text-sm leading-[22px] text-link"
             title={`${addressFormat(address, chianId)}`}
             href=""
             // href={`${chianId}/address/${addressFormat(address, chianId)}`}

diff --git a/src/app/[chain]/nft/[collectionSymbol]/_Detail/CollectionDetails.tsx b/src/app/[chain]/nft/[collectionSymbol]/_Detail/CollectionDetails.tsx
@@ -35,6 +35,7 @@ const tabMap = {
 };
 export default function NFTDetails(props: NFTDetailsProps) {
   const { overview, transferList } = props;
+  console.log(overview, 'collection detail');
   const tabRef = useRef<EPTabsRef>(null);
   const [text, setSearchText] = useState<string>('');
   const [searchVal, setSearchVal] = useState<string>(props.search || '');

diff --git a/src/app/[chain]/nft/[collectionSymbol]/_Detail/_overview/OverView.tsx b/src/app/[chain]/nft/[collectionSymbol]/_Detail/_overview/OverView.tsx
@@ -1,72 +1,93 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import Logo from 'public/next.svg';
 import IconFont from '@_components/IconFont';
-import { Collapse, CollapseProps, TabsProps, Dropdown } from 'antd';
-// import OverViewDetail from './OverViewDetail';
-// import OverViewProperty from './OverViewProperty';
 import { CollectionDetailData } from '../type';
 
 import '../detail.css';
 import ContractToken from '@_components/ContractToken';
 import { AddressType } from '@_types/common';
+import { useParams } from 'next/navigation';
+import { TChainID } from '@_api/type';
+import { addSymbol, divDecimals, thousandsNumber } from '@_utils/formatter';
+import EPTooltip from '@_components/EPToolTip';
 
 export interface OverViewProps {
   overview: CollectionDetailData;
   // onHolderClick: () => void;
 }
 export default function OverView(props: OverViewProps) {
+  const { chain } = useParams();
   const { overview } = props;
   return (
     <div className="collection-overview-wrap">
-      <div className="collection-overview-header">{overview.nftCollection.name}</div>
+      <div className="collection-overview-header">
+        <span>{overview?.nftCollection?.name}</span>
+        <span className="ml-1 text-base-200">({overview?.nftCollection?.symbol})</span>
+      </div>
       <div className="collection-overview-body">
         <h2 className="flex items-center">Overview</h2>
         <div className="collection-overview-data">
           <ul className="collection-overview-left">
             <li className="collection-overview-data-item">
               <div className="title">
                 <span className="icon">
-                  <IconFont type="question-circle" />
+                  <EPTooltip title="The total number of NFT items in the collection" mode="dark" pointAtCenter={true}>
+                    <IconFont type="question-circle" />
+                  </EPTooltip>
                 </span>
                 ITEMS
               </div>
-              <div className="des">{overview.items}</div>
+              <div className="des">{thousandsNumber(overview.items)}</div>
             </li>
             <li className="collection-overview-data-item">
-              <div className="title">
-                <span className="icon">
-                  <IconFont type="question-circle" />
-                </span>
-                HOLDERS
-              </div>
-              <div className="desc">{overview.holders}</div>
+              <div className="title">HOLDERS</div>
+              <div className="desc">{thousandsNumber(overview.holders)}</div>
             </li>
             <li className="collection-overview-data-item">
               <div className="title">TOTAL TRANSFERS</div>
-              <div className="desc">{overview.totalTransfers}</div>
+              <div className="desc">{thousandsNumber(overview.transferCount)}</div>
             </li>
           </ul>
           <ul className="collection-overview-right">
             <li className="collection-overview-data-item">
               <div className="title">
                 <span className="icon">
-                  <IconFont type="question-circle" />
+                  <EPTooltip
+                    title="This is the MultiToken contract that defines a common implementation for fungible and non-fungible tokens."
+                    mode="dark"
+                    pointAtCenter={true}>
+                    <IconFont type="question-circle" />
+                  </EPTooltip>
                 </span>
                 CONTRACT
               </div>
-              <div className="desc">
-                <ContractToken address={overview.contractAddress} type={AddressType.address} chainId="AELF" />
+              <div className="desc item-center flex">
+                <IconFont className="mr-1 text-xs" type="Contract" />
+                <ContractToken
+                  address={overview.tokenContractAddress}
+                  type={AddressType.address}
+                  chainId={chain as TChainID}
+                />
               </div>
             </li>
             <li className="collection-overview-data-item">
               <div className="title">
                 <span className="icon">
-                  <IconFont type="question-circle" />
+                  <EPTooltip
+                    title="The lowest listing price of an NFT item in the collection"
+                    mode="dark"
+                    pointAtCenter={true}>
+                    <IconFont type="question-circle" />
+                  </EPTooltip>
                 </span>
                 FLOOR PRICE
               </div>
-              <div className="desc">307</div>
+              <div className="desc">
+                <span>${overview.floorPriceOfUsd}</span>
+                <span className="ml-1 text-xs leading-5 text-base-200">
+                  {overview.floorPrice || overview.floorPrice === 0
+                    ? `(${addSymbol(divDecimals(overview.floorPrice))})`
+                    : '-'}
+                </span>
+              </div>
             </li>
           </ul>
         </div>

diff --git a/src/app/[chain]/nft/[collectionSymbol]/_Detail/detail.css b/src/app/[chain]/nft/[collectionSymbol]/_Detail/detail.css
@@ -3,7 +3,7 @@
 }
 .collection-overview-header {
   @apply h-[80px] lg:h-[72px];
-  @apply flex items-center text-[20px] font-[500];
+  @apply flex items-center text-[20px] leading-7 font-[500];
 }
 .collection-overview-body {
   @apply bg-white pl-[16px] pb-[16px];
@@ -77,29 +77,39 @@
     @apply flex justify-center;
   }
 }
+
 /* row row-cols-mobile-1 row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-4 row-cols-xl-6 mx-0 */
+
 /* .row-cols-2>* {
   flex: 0 0 auto;
   width: 50%
 } */
+
 /* sm */
+
 /* @media (min-width: 576px) {
   .row-cols-sm-3>* {
     flex: 0 0 auto;
     width: 33.3333333333%
 }
 } */
-/* 768 md*/
+
+/* 768 md */
+
 /* .row-cols-md-4>* {
   flex: 0 0 auto;
   width: 25%
 } */
-/* 992 lg*/
+
+/* 992 lg */
+
 /* .row-cols-lg-4>* {
   flex: 0 0 auto;
   width: 25%
 } */
+
 /* 1200 xl */
+
 /* .row-cols-xl-6>* {
   flex: 0 0 auto;
   width: 16.6666666667%

diff --git a/src/app/[chain]/nft/[collectionSymbol]/_Detail/index.tsx b/src/app/[chain]/nft/[collectionSymbol]/_Detail/index.tsx
@@ -4,6 +4,8 @@ import { PAGE_SIZE } from './type';
 import CollectionDetails from './CollectionDetails';
 import { fetchOverviewData, fetchTransferList } from './mock';
 import { ChainId, CollectionSymbol } from 'global';
+import { fetchServerCollectionDetail } from '@_api/fetchNFTS';
+import { TChainID } from '@_api/type';
 
 export default async function NFTDetailsPage({
   params,
@@ -15,9 +17,14 @@ export default async function NFTDetailsPage({
   if (!params.collectionSymbol) {
     return notFound();
   }
+  const { chain, collectionSymbol } = params;
   // init data from  server
   const [overviewData, transferList] = await Promise.all([
-    fetchOverviewData(),
+    fetchServerCollectionDetail({
+      chainId: chain as TChainID,
+      collectionSymbol,
+      cache: 'no-store',
+    }),
     fetchTransferList({
       skipCount: 0,
       maxResultCount: PAGE_SIZE,
@@ -28,3 +35,6 @@ export default async function NFTDetailsPage({
   ]);
   return <CollectionDetails overview={overviewData} transferList={transferList} search={search} />;
 }
+
+export const revalidate = 1;
+export const dynamic = 'force-dynamic';