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

…chain

feat: nfts list

src/_api/fetchCMS.ts

@@ -1,4 +1,6 @@
 import request from '@_api';
+
+const showPath = ['blockchain', '/tokens', '/nfts'];
 export async function fetchCMS() {
   const result = await request.cms.getGlobalConfig();
   const { data } = result;
@@ -8,7 +10,7 @@ export async function fetchCMS() {
         return child.label === 'Blocks' || child.label === 'Transactions';
       });
     }
-    return item.headerMenu_id?.path === 'blockchain' || item.headerMenu_id?.path === '/tokens';
+    return showPath.includes(item.headerMenu_id?.path);
   });
   data.headerMenuList = headerMenuList;
   return data;

src/_api/fetchNFTS.ts

@@ -0,0 +1,23 @@
+import request from '@_api';
+import { TTokenListRequestParams } from './type';
+import { INFTsTableData } from '@app/[chain]/nfts/type';
+
+const defaultTokenListData = {
+  total: 0,
+  list: [],
+};
+export async function fetchNFTSList(params: TTokenListRequestParams): Promise<INFTsTableData> {
+  const result = await request.nfts.getNFTSList({
+    params: params,
+  });
+  const data = result?.data || defaultTokenListData;
+  return data;
+}
+
+export async function fetchServerNFTSList(params: TTokenListRequestParams): Promise<INFTsTableData> {
+  const result = await request.nfts.getServerNFTSList({
+    params: params,
+  });
+  const data = result?.data || defaultTokenListData;
+  return data;
+}

src/_api/list.ts

@@ -33,6 +33,11 @@ const Token_API_List = {
   getTokenDetailHolders: `${BASE_API}/app/token/holders`,
 };
 
+const NFT_API_List = {
+  getNFTSList: `${BASE_API}/app/token/nft/collection-list`,
+  getServerNFTSList: `${SERVER_BASE_API}/app/token/nft/collection-list`,
+};
+
 const Common_API_List = {
   getPrice: '',
 };
@@ -51,6 +56,7 @@ export const API_List = {
   common: Common_API_List,
   cms: CMS_API_List,
   token: Token_API_List,
+  nfts: NFT_API_List,
 };
 
 type REQUEST_FUNCTION = (opt?: RequestWithParams) => Promise<any>;

src/_components/HeaderMenu/index.tsx

@@ -64,8 +64,10 @@ export default function HeaderMenu({ networkList, headerMenuList }: IProps) {
     });
   }, [headerMenuList, jump]);
   const pathname = usePathname();
-  const secondSlashIndex = pathname.slice(1).indexOf('/');
-  const [current, setCurrent] = useState(secondSlashIndex === -1 ? pathname : getPathnameFirstSlash(pathname));
+  const secondSlashIndex = pathname.slice(6).indexOf('/');
+  const [current, setCurrent] = useState(
+    secondSlashIndex === -1 ? pathname.slice(5) : getPathnameFirstSlash(pathname.slice(5)),
+  );
   const onClick: MenuProps['onClick'] = (e) => {
     setCurrent(e.key);
   };

src/_components/HeaderTop/index.tsx

@@ -3,7 +3,6 @@ import Image from 'next/image';
 import clsx from 'clsx';
 import './index.css';
 import Search from '@_components/Search';
-// import { isMainNet } from '@_utils/isMainNet';
 import MobileHeaderMenu from '@_components/MobileHeaderMenu';
 import { usePathname } from 'next/navigation';
 import { useAppSelector } from '@_store';

src/_components/Main/index.tsx

@@ -12,5 +12,5 @@ import clsx from 'clsx';
 import { useMobileAll } from '@_hooks/useResponsive';
 export default function MainContainer({ children, isMobileSSR }) {
   const isMobile = useMobileAll();
-  return <div className={clsx(isMobile && 'main-container-mobile', 'main-container')}>{children}</div>;
+  return <div className={clsx(isMobile && 'main-container-mobile', 'main-container w-full')}>{children}</div>;
 }

src/app/[chain]/nfts/columnConfig.tsx

@@ -1,13 +1,14 @@
 import EPTooltip from '@_components/EPToolTip';
 import IconFont from '@_components/IconFont';
 import TokenTableCell from '@_components/TokenTableCell';
-import { IToken } from '@_types/common';
+import { IToken, SortEnum } from '@_types/common';
 import { thousandsNumber } from '@_utils/formatter';
 import { ColumnsType } from 'antd/es/table';
 import Image from 'next/image';
 import { INFTsTableItem } from './type';
+import Link from 'next/link';
 
-export default function getColumns({ currentPage, pageSize, ChangeOrder }): ColumnsType<INFTsTableItem> {
+export default function getColumns({ currentPage, pageSize, ChangeOrder, sort, chain }): ColumnsType<INFTsTableItem> {
   return [
     {
       title: '#',
@@ -22,9 +23,13 @@ export default function getColumns({ currentPage, pageSize, ChangeOrder }): Colu
       dataIndex: 'nftCollection',
       key: 'nftCollection',
       render: (collection: IToken) => (
-        <TokenTableCell token={collection}>
-          <Image className="rounded-lg" src={collection.imageUrl} width={40} height={40} alt="img"></Image>
-        </TokenTableCell>
+        <Link href={`/${chain}/nft/${collection.symbol}`}>
+          <TokenTableCell token={collection}>
+            {collection.imageUrl && (
+              <Image className="rounded-lg" src={collection.imageUrl} width={40} height={40} alt="img"></Image>
+            )}
+          </TokenTableCell>
+        </Link>
       ),
     },
     {
@@ -44,7 +49,7 @@ export default function getColumns({ currentPage, pageSize, ChangeOrder }): Colu
     {
       title: (
         <div className="flex cursor-pointer" onClick={ChangeOrder}>
-          <IconFont className="mr-1 text-xs" type="Rank" />
+          <IconFont className={`mr-1 text-xs ${sort === SortEnum.asc ? 'scale-y-[-1]' : ''}`} type="Rank" />
           <EPTooltip mode="dark" title="Sorted in descending order Click for ascending order">
             <div className="text-link">Holder</div>
           </EPTooltip>

src/app/[chain]/nfts/layout.tsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div>{children}</div>;
+}

src/app/[chain]/nfts/list.tsx

@@ -1,38 +1,77 @@
 'use client';
 import HeadTitle from '@_components/HeaderTitle';
 import Table from '@_components/Table';
-import useTableData from '@_hooks/useTable';
 import { useMobileContext } from '@app/pageProvider';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import getColumns from './columnConfig';
-import fetchData from './mock';
 import { INFTsTableData, INFTsTableItem } from './type';
+import { getPageNumber } from '@_utils/formatter';
+import { useParams } from 'next/navigation';
+import { TChainID } from '@_api/type';
+import { SortEnum } from '@_types/common';
+import { fetchNFTSList } from '@_api/fetchNFTS';
+import { pageSizeOption } from '@_utils/contant';
 
 interface TokensListProps {
   SSRData: INFTsTableData;
 }
 
 export default function TokensList({ SSRData }: TokensListProps) {
+  console.log(SSRData, 'SSRData');
   const { isMobileSSR: isMobile } = useMobileContext();
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(50);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [total, setTotal] = useState<number>(SSRData.total);
+  const [data, setData] = useState<INFTsTableItem[]>(SSRData.list);
+  const [sort, setSort] = useState<SortEnum>(SortEnum.desc);
 
-  const { loading, total, data, currentPage, pageSize, pageChange, pageSizeChange } = useTableData<
-    INFTsTableItem,
-    INFTsTableData
-  >({
-    defaultPageSize: 50,
-    SSRData,
-    fetchData,
-    // disposeData,
-  });
+  const mountRef = useRef(true);
+
+  const { chain } = useParams();
+  const fetchData = useCallback(async () => {
+    const params = {
+      skipCount: getPageNumber(currentPage, pageSize),
+      maxResultCount: pageSize,
+      chainId: chain as TChainID,
+      sort,
+      orderBy: 'HolderCount',
+    };
+    setLoading(true);
+    const data = await fetchNFTSList(params);
+    setTotal(data.total);
+    setData(data.list);
+    setLoading(false);
+    return data;
+  }, [chain, currentPage, pageSize, sort]);
 
   const ChangeOrder = useCallback(() => {
-    console.log('change order');
-  }, []);
+    if (loading) return;
+    setSort(sort === SortEnum.desc ? SortEnum.asc : SortEnum.desc);
+  }, [loading, sort]);
 
   const columns = useMemo(
-    () => getColumns({ currentPage, pageSize, ChangeOrder }),
-    [ChangeOrder, currentPage, pageSize],
+    () => getColumns({ currentPage, pageSize, ChangeOrder, sort, chain }),
+    [ChangeOrder, chain, currentPage, pageSize, sort],
   );
+
+  const pageChange = async (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const pageSizeChange = async (page, size) => {
+    setPageSize(size);
+    setCurrentPage(page);
+  };
+
+  useEffect(() => {
+    if (mountRef.current) {
+      mountRef.current = false;
+      return;
+    }
+    fetchData();
+  }, [fetchData]);
+
   const title = useMemo(() => `A total of ${total} ${total <= 1 ? 'collection' : 'collections'} found`, [total]);
 
   return (
@@ -48,8 +87,11 @@ export default function TokensList({ SSRData }: TokensListProps) {
         dataSource={data}
         columns={columns}
         isMobile={isMobile}
-        rowKey="rank"
+        rowKey={(item) => {
+          return item.nftCollection?.symbol;
+        }}
         total={total}
+        options={pageSizeOption}
         pageSize={pageSize}
         pageNum={currentPage}
         pageChange={pageChange}

src/app/[chain]/nfts/loading.tsx

@@ -0,0 +1,7 @@
+'use client';
+import { useIsGovernance } from '@_hooks/useIsPath';
+import { Skeleton } from 'antd';
+export default function Loading() {
+  const isGovernance = useIsGovernance();
+  return !isGovernance && <Skeleton className="main-skeleton top-[104px] h-[calc(100vh-474px)]" />;
+}

src/app/[chain]/nfts/page.tsx

@@ -6,11 +6,22 @@
  * @Description: NFTs
  */
 
+import { fetchServerNFTSList } from '@_api/fetchNFTS';
+import { TChainID } from '@_api/type';
+import { SortEnum } from '@_types/common';
 import { ChainId } from 'global';
 import List from './list';
-import fetchData from './mock';
 export default async function Nfts({ params }: { params: ChainId }) {
-  console.log('chainId:', params);
-  const data = await fetchData({ page: 1, pageSize: 50 });
+  const data = await fetchServerNFTSList({
+    skipCount: 0,
+    maxResultCount: 50,
+    chainId: params.chain as TChainID,
+    orderBy: 'HolderCount',
+    sort: SortEnum.desc,
+    cache: 'no-store',
+  });
   return <List SSRData={data} />;
 }
+
+export const revalidate = 1;
+export const dynamic = 'force-dynamic';

src/app/[chain]/nfts/type.ts

@@ -1,16 +1,10 @@
 import { IToken } from '@_types/common';
 
-interface ICollectionItem {
-  symbol: string;
-  count: number;
-}
-
 export interface INFTsTableItem {
   rank: number;
   nftCollection: IToken;
   items: number;
   holders: number;
-  itemList: ICollectionItem[];
 }
 
 export interface INFTsTableData {

src/app/pageProvider.tsx

@@ -100,7 +100,9 @@ function RootProvider({ children, isMobileSSR }) {
                 {!show && <Skeleton className="relative top-[104px] mb-[104px] h-[calc(100vh-434px)]" />}
               </>
             )}
-            <div className={isGovernance && 'no-use-main'}>{children}</div>
+            <div className={isGovernance ? 'no-use-main' : 'flex min-h-screen flex-col justify-between'}>
+              {children}
+            </div>
           </ReduxProvider>
         </MobileContext.Provider>
       </ConfigProvider>

src/pageComponents/home/_components/Latest/index.css

@@ -44,7 +44,7 @@
         }
         .from,
         .to {
-          @apply text-[12px] font-[400] leading-5 text-base-100 flex;
+          @apply text-[14px] font-[400] leading-[22px] text-base-100 flex;
           a {
             @apply ml-2 text-link w-[134px] inline-block;
           }