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

…chain

feat: collection transfers Interface modulation

src/_api/fetchNFTS.ts

@@ -1,5 +1,5 @@
 import request from '@_api';
-import { ICollectionDetailRequestParams, TTokenListRequestParams } from './type';
+import { ICollectionDetailRequestParams, ICollectionTransfersRequestParams, TTokenListRequestParams } from './type';
 import { INFTsTableData } from '@app/[chain]/nfts/type';
 import { CollectionDetailData, CollectionTransfersData } from '@app/[chain]/nft/[collectionSymbol]/_Detail/type';
 
@@ -32,7 +32,7 @@ export async function fetchServerCollectionDetail(
   return data;
 }
 
-export async function fetchNFTTransfers(params: ICollectionDetailRequestParams): Promise<CollectionTransfersData> {
+export async function fetchNFTTransfers(params: ICollectionTransfersRequestParams): Promise<CollectionTransfersData> {
   const result = await request.nfts.getNFTTransfers({
     params: params,
   });

src/_api/type.ts

@@ -238,6 +238,6 @@ export interface ICollectionTransfersRequestParams extends RequestInit {
   maxResultCount: number;
   collectionSymbol: string;
   search: string;
-  orderBy: string;
-  sort: string;
+  orderBy?: string;
+  sort?: string;
 }

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, 'copy-btn ml-1 size-3 text-sm')} type="Copy" onClick={handleCopy} />;
+  return <IconFont className={clsx(className, 'copy-btn ml-1 text-sm')} type="Copy" onClick={handleCopy} />;
 }

src/app/[chain]/nft/[collectionSymbol]/_Detail/CollectionDetails.tsx

@@ -13,7 +13,6 @@ import { useEffect, useRef, useState } from 'react';
 
 export interface NFTDetailsProps {
   overview: CollectionDetailData;
-  transferList: CollectionTransfersData;
   search?: string;
 }
 function updateUrlParams(obj) {
@@ -34,7 +33,7 @@ const tabMap = {
   [TabKey.inventory]: 'Inventory',
 };
 export default function NFTDetails(props: NFTDetailsProps) {
-  const { overview, transferList } = props;
+  const { overview } = props;
   console.log(overview, 'collection detail');
   const tabRef = useRef<EPTabsRef>(null);
   const [text, setSearchText] = useState<string>('');
@@ -114,7 +113,7 @@ export default function NFTDetails(props: NFTDetailsProps) {
     const { key } = obj;
     let children = <div></div>;
     if (key === TabKey.empty) {
-      children = <TransfersTable transferList={transferList} topSearchProps={topSearchProps} search={searchVal} />;
+      children = <TransfersTable topSearchProps={topSearchProps} search={searchVal} />;
     } else if (key === TabKey.balances) {
       children = <HoldersTable topSearchProps={topSearchProps} search={searchVal} />;
     } else {

src/app/[chain]/nft/[collectionSymbol]/_Detail/_transfers/Table.tsx

@@ -1,49 +1,51 @@
 'use client';
 import Table, { ITableSearch } from '@_components/Table';
 import getColumns from './column';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ColumnsType } from 'antd/es/table';
 import { CollectionTransfersData, CollectionTransfer } from '../type';
 import { useMobileContext } from '@app/pageProvider';
 import useTableData from '@_hooks/useTable';
-import { fetchTransferList } from '../mock';
 import { useParams } from 'next/navigation';
 import useResponsive, { useMobileAll } from '@_hooks/useResponsive';
-import { NftCollectionPageParams } from 'global';
+import { NftCollectionPageParams, CollectionSymbol } from 'global';
+import { getPageNumber } from '@_utils/formatter';
+import { fetchNFTTransfers } from '@_api/fetchNFTS';
+import { TChainID } from '@_api/type';
 export interface ItemActivityTableProps {
-  transferList: CollectionTransfersData;
   search?: string;
   topSearchProps?: ITableSearch;
 }
 export default function ItemActivityTable(props: ItemActivityTableProps) {
   const { collectionSymbol, chain } = useParams<NftCollectionPageParams>();
-  const { transferList, topSearchProps, search } = props;
+  const { topSearchProps, search } = props;
   const { isMobile } = useMobileAll();
-  const disposeData = (data: CollectionTransfersData) => {
-    return {
-      total: data.total,
-      list: [...data.transfers],
-    };
-  };
-  const fetchTableData = async ({ page, pageSize }) => {
-    return fetchTransferList({
-      maxResultCount: pageSize,
-      skipCount: (page - 1) * pageSize,
-      search: search ?? '',
-      symbol: collectionSymbol,
-      chainId: chain,
-    });
-  };
 
-  const { loading, total, data, currentPage, pageSize, pageChange, pageSizeChange, searchChange } = useTableData<
-    CollectionTransfer,
-    CollectionTransfersData
-  >({
-    SSRData: disposeData(transferList),
-    fetchData: fetchTableData,
-    disposeData: disposeData,
-    defaultSearch: search,
-  });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(50);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [total, setTotal] = useState<number>(0);
+  const [data, setData] = useState<CollectionTransfer[]>([]);
+
+  const fetchTableData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await fetchNFTTransfers({
+        maxResultCount: pageSize,
+        skipCount: getPageNumber(currentPage, pageSize),
+        search: search ?? '',
+        collectionSymbol: collectionSymbol,
+        chainId: chain as TChainID,
+      });
+      setData(data.list);
+      setTotal(data.total);
+      console.log(data, 'data');
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+    }
+  }, [pageSize, currentPage, search, collectionSymbol, chain]);
+
   const [timeFormat, setTimeFormat] = useState<string>('Age');
   const columns = useMemo<ColumnsType<CollectionTransfer>>(() => {
     return getColumns({
@@ -54,9 +56,18 @@ export default function ItemActivityTable(props: ItemActivityTableProps) {
     });
   }, [timeFormat]);
 
+  const pageChange = async (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const pageSizeChange = async (page, size) => {
+    setPageSize(size);
+    setCurrentPage(page);
+  };
+
   useEffect(() => {
-    searchChange(search);
-  }, [search, searchChange]);
+    fetchTableData();
+  }, [fetchTableData]);
 
   return (
     <div className="collection-transfers-table">

src/app/[chain]/nft/[collectionSymbol]/_Detail/_transfers/column.tsx

@@ -9,19 +9,21 @@ import IconFont from '@_components/IconFont';
 import { Tooltip } from 'aelf-design';
 import ContractToken from '@_components/ContractToken';
 import { AddressType } from '@_types/common';
+import TransactionsView from '@_components/TransactionsView';
+import EPTooltip from '@_components/EPToolTip';
 
 export default function getColumns({ timeFormat, handleTimeChange }): ColumnsType<CollectionTransfer> {
   return [
     {
-      title: <IconFont type="question-circle" className="flex size-full justify-center" />,
+      title: (
+        <EPTooltip title="See preview of the transaction details." mode="dark">
+          <IconFont className="ml-[6px] cursor-pointer text-xs" type="question-circle" />
+        </EPTooltip>
+      ),
       width: 56,
       dataIndex: '',
       key: 'view',
-      render: () => (
-        <div className="flex size-6 cursor-pointer items-center justify-center rounded border border-color-divider bg-white focus:bg-color-divider">
-          <IconFont type="view" />
-        </div>
-      ),
+      render: (record) => <TransactionsView record={record} />,
     },
     {
       dataIndex: 'transactionHash',

src/app/[chain]/nft/[collectionSymbol]/_Detail/index.tsx

@@ -1,8 +1,6 @@
 import { notFound } from 'next/navigation';
 // import request from '@_api';
-import { PAGE_SIZE } from './type';
 import CollectionDetails from './CollectionDetails';
-import { fetchTransferList } from './mock';
 import { ChainId, CollectionSymbol } from 'global';
 import { fetchServerCollectionDetail } from '@_api/fetchNFTS';
 import { TChainID } from '@_api/type';
@@ -19,21 +17,12 @@ export default async function NFTDetailsPage({
   }
   const { chain, collectionSymbol } = params;
   // init data from  server
-  const [overviewData, transferList] = await Promise.all([
-    fetchServerCollectionDetail({
-      chainId: chain as TChainID,
-      collectionSymbol,
-      cache: 'no-store',
-    }),
-    fetchTransferList({
-      skipCount: 0,
-      maxResultCount: PAGE_SIZE,
-      chainId: params.chain,
-      symbol: params.collectionSymbol,
-      search: search,
-    }),
-  ]);
-  return <CollectionDetails overview={overviewData} transferList={transferList} search={search} />;
+  const overviewData = await fetchServerCollectionDetail({
+    chainId: chain as TChainID,
+    collectionSymbol,
+    cache: 'no-store',
+  });
+  return <CollectionDetails overview={overviewData} search={search} />;
 }
 
 export const revalidate = 1;

src/app/[chain]/nft/[collectionSymbol]/_Detail/mock.ts

@@ -49,14 +49,14 @@ export interface TransfersQueryParams {
   search?: string;
 }
 // { page, pageSize }
-async function fetchTransferList(params: TransfersQueryParams): Promise<CollectionTransfersData> {
-  console.log('fetchTransferList', params);
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-  return {
-    total: 100,
-    transfers: transferList.slice(params.skipCount, params.maxResultCount),
-  };
-}
+// async function fetchTransferList(params: TransfersQueryParams): Promise<CollectionTransfersData> {
+//   console.log('fetchTransferList', params);
+//   await new Promise((resolve) => setTimeout(resolve, 1000));
+//   return {
+//     total: 100,
+//     transfers: transferList.slice(params.skipCount, params.maxResultCount),
+//   };
+// }
 
 const holderList: HolderItem[] = Array.from(new Array(100).keys()).map((item, i) => {
   const mockAddress: Address = {
@@ -142,7 +142,7 @@ export {
   // overview,
   holderList,
   inventoryItemList,
-  fetchTransferList,
+  // fetchTransferList,
   fetchHolderData,
   // fetchOverviewData,
   fetchInventoryList,

src/app/[chain]/nft/[collectionSymbol]/_Detail/type.ts

@@ -48,7 +48,7 @@ export interface CollectionTransfer {
 }
 export interface CollectionTransfersData {
   total: number;
-  transfers: CollectionTransfer[];
+  list: CollectionTransfer[];
 }
 export interface CollectionTransfersApiResponse {
   code: string;

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

@@ -14,6 +14,7 @@ import ContractToken from '@_components/ContractToken';
 import TransactionsView from '@_components/TransactionsView';
 import { ITransactionsResponseItem, TransactionStatus } from '@_api/type';
 import EPTooltip from '@_components/EPToolTip';
+import Copy from '@_components/Copy';
 
 export default function getColumns({
   timeFormat,
@@ -49,6 +50,7 @@ export default function getColumns({
                 {text}
               </Link>
             </EPTooltip>
+            <Copy value={text}></Copy>
           </div>
         );
       },