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

…chain

feat: blocks and transactions list

src/_api/fetchCMS.ts

@@ -5,7 +5,7 @@ export async function fetchCMS() {
   const headerMenuList = data.headerMenuList.filter((item) => {
     if (item.headerMenu_id.path === 'blockchain') {
       item.headerMenu_id.children = item.headerMenu_id.children.filter((child) => {
-        return child.label === 'Blocks';
+        return child.label === 'Blocks' || child.label === 'Transactions';
       });
     }
     return item.headerMenu_id?.path === 'blockchain' || item.headerMenu_id?.path === '/tokens';

src/_api/fetchTransactions.ts

@@ -1,5 +1,10 @@
 import request from '@_api';
-import { ITransactionDetailRequestParams, ITransactionDetailDataList } from './type';
+import {
+  ITransactionDetailRequestParams,
+  ITransactionDetailDataList,
+  TTransactionsListRequestParams,
+  ITransactionsResponse,
+} from './type';
 
 export async function fetchTransactionDetails(
   params: ITransactionDetailRequestParams,
@@ -10,3 +15,21 @@ export async function fetchTransactionDetails(
   const data = result?.data;
   return data;
 }
+
+export async function fetchTransactionList(params: TTransactionsListRequestParams): Promise<ITransactionsResponse> {
+  const result = await request.tx.getTransactionList({
+    params: params,
+  });
+  const data = result?.data;
+  return data;
+}
+
+export async function fetchServerTransactionList(
+  params: TTransactionsListRequestParams,
+): Promise<ITransactionsResponse> {
+  const result = await request.tx.getServerTransactionList({
+    params: params,
+  });
+  const data = result?.data;
+  return data;
+}

src/_api/list.ts

@@ -19,7 +19,8 @@ const Block_API_List = {
 };
 
 const Transaction_API_List = {
-  getTransaction: '',
+  getTransactionList: `${BASE_API}/app/blockchain/transactions`,
+  getServerTransactionList: `${SERVER_BASE_API}/app/blockchain/transactions`,
   getTransactionDetail: `${SERVER_BASE_API}/app/blockchain/transactionDetail`,
 };
 

src/_api/type.ts

@@ -70,7 +70,7 @@ export interface ITransactionDetailRequestParams extends RequestInit {
 
 export interface IBlocksRequestParams extends RequestInit {
   chainId: TChainID;
-  blockHeight?: number;
+  skipCount: number;
   maxResultCount: number;
 }
 
@@ -218,3 +218,9 @@ export interface TTokenListRequestParams extends RequestInit {
   sort: SortEnum;
   orderBy: string;
 }
+
+export interface TTransactionsListRequestParams extends RequestInit {
+  chainId: TChainID;
+  skipCount: number;
+  maxResultCount: number;
+}

src/_components/AddressDetail/index.tsx

@@ -9,7 +9,7 @@ import { numberFormatter } from '@_utils/formatter';
 import addressFormat, { hiddenAddress } from '@_utils/urlUtils';
 import { TitleEnum } from '@_types/commonDetail';
 import EPTabs from '../EPTabs/index';
-import TransctionList from '@app/transactions/list';
+import TransctionList from '@app/[chain]/transactions/list';
 import TokenTransfers from '@_components/TokenTransfers';
 import NFTTransfers from '@_components/NFTTransfers';
 import History from './components/History';

src/_components/TransactionsView/index.tsx

@@ -4,14 +4,18 @@ import './index.css';
 import Link from 'next/link';
 import Status from '@_components/TransactionsStatus';
 import { addSymbol, divDecimals } from '@_utils/formatter';
+import { useParams } from 'next/navigation';
 export default function TransactionsView({ record }) {
+  const { chain } = useParams();
   const PreviewCard = () => {
     return (
       <div className="preview-view">
         <div className="header flex items-center justify-between p-2">
           <div className="title text-sm leading-[22px] text-base-100">Preview</div>
           <div className="more text-xs leading-5">
-            <Link className="inline-block text-xs leading-5" href={`tx/${record.transactionId}`}>
+            <Link
+              className="inline-block text-xs leading-5"
+              href={`/${chain}/tx/${record.transactionId}?blockHeight=${record.blockHeight}`}>
               See More Details
             </Link>
           </div>

src/_hooks/useTable.ts

@@ -91,11 +91,6 @@ export default function useTableData<T, U>({
     setCurrentPage(1);
     setPageSize(defaultPageSize);
   };
-
-  const pageChange = async (page: number) => {
-    setCurrentPage(page);
-  };
-
   useEffect(() => {
     console.log(mounted.current, 'mounted.current');
     if (!mountedRequest && mounted.current) {
@@ -105,9 +100,13 @@ export default function useTableData<T, U>({
     getData({ page: currentPage, pageSize: pageSize, sort: sortedInfo, searchText });
   }, [currentPage, pageSize, sortedInfo, searchText, getData, mountedRequest]);
 
-  const pageSizeChange = async (size) => {
+  const pageChange = async (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const pageSizeChange = async (page, size) => {
     setPageSize(size);
-    setCurrentPage(1);
+    setCurrentPage(page);
   };
 
   return {

src/app/[chain]/block/[hash]/_components/detail.tsx

@@ -14,7 +14,7 @@ import BaseInfo from './baseinfo';
 import ExtensionInfo from './ExtensionInfo';
 import type { ITabsProps } from 'aelf-design';
 import Table from '@_components/Table';
-import getColumns from '@app/transactions/columnConfig';
+import getColumns from '@app/[chain]/transactions/columnConfig';
 import { ColumnsType } from 'antd/es/table';
 import MoreContainer from '@_components/MoreContainer';
 import EPTabs from '@_components/EPTabs';

src/app/[chain]/blocks/blockList.tsx

@@ -19,6 +19,7 @@ import { useAppSelector } from '@_store';
 import { useParams } from 'next/navigation';
 import { Spin } from 'antd';
 import { reloadBlockListData } from '@/app/actions';
+import { getPageNumber } from '@_utils/formatter';
 
 export enum pageType {
   first,
@@ -41,24 +42,13 @@ export default function BlockList({ SSRData }) {
   const [total, setTotal] = useState<number>(SSRData.total);
   const [data, setData] = useState<IBlocksResponseItem[]>(SSRData.blocks);
   const { defaultChain } = useAppSelector((state) => state.getChainId);
-  const totalPage = Math.floor((total + pageSize - 1) / pageSize) || 1;
   const { chain } = useParams();
   const fetchData = useCallback(
-    async (pageSize, type: pageType) => {
-      let blockHeight;
-      if (type === pageType.next) {
-        blockHeight = Math.round(data[data.length - 1].blockHeight - 1);
-      } else if (type === pageType.prev) {
-        blockHeight = Math.round(data[0].blockHeight + 1);
-      } else if (type === pageType.last) {
-        blockHeight = Math.round(data[0].blockHeight - pageSize * (totalPage - currentPage));
-      } else {
-        blockHeight = undefined;
-      }
+    async (page, size) => {
       const params = {
         chainId: defaultChain || 'AELF',
-        blockHeight: blockHeight,
-        maxResultCount: pageSize,
+        skipCount: getPageNumber(page, size),
+        maxResultCount: size,
       };
       setLoading(true);
       try {
@@ -70,7 +60,7 @@ export default function BlockList({ SSRData }) {
       }
       setLoading(false);
     },
-    [currentPage, data, defaultChain, totalPage],
+    [defaultChain],
   );
 
   const [timeFormat, setTimeFormat] = useState<string>('Age');
@@ -92,21 +82,13 @@ export default function BlockList({ SSRData }) {
 
   const pageChange = async (page: number) => {
     setCurrentPage(page);
-    if (page === totalPage) {
-      fetchData(pageSize, pageType.last);
-    } else if (page === 1) {
-      fetchData(pageSize, pageType.first);
-    } else if (page > currentPage) {
-      fetchData(pageSize, pageType.next);
-    } else {
-      fetchData(pageSize, pageType.prev);
-    }
+    fetchData(page, pageSize);
   };
 
   const pageSizeChange = async (page: number, pageSize: number) => {
     setPageSize(pageSize);
     setCurrentPage(page);
-    fetchData(pageSize, pageType.first);
+    fetchData(page, pageSize);
   };
 
   const multiTitle = useMemo(() => {

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

@@ -5,7 +5,11 @@ export default async function BlocksPage({ params }) {
   const data = await fetchServerBlocks({
     chainId: params.chain || 'AELF',
     maxResultCount: 25,
+    skipCount: 0,
     cache: 'no-store',
   });
   return <BlockList SSRData={data} />;
 }
+
+export const revalidate = 1;
+export const dynamic = 'force-dynamic';

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

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

src/app/transactions/list.tsx → src/app/[chain]/transactions/list.tsx

@@ -2,35 +2,43 @@
 import HeadTitle from '@_components/HeaderTitle';
 import Table from '@_components/Table';
 import getColumns from './columnConfig';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { ColumnsType } from 'antd/es/table';
-import fetchData from './mock';
-import { useMobileContext } from '@app/pageProvider';
-import useTableData from '@_hooks/useTable';
-import useResponsive, { useMobileAll } from '@_hooks/useResponsive';
+import { useMobileAll } from '@_hooks/useResponsive';
 import { pageSizeOption } from '@_utils/contant';
-import { ITransactionsResponseItem } from '@_api/type';
-interface ITransactionsData {
-  total: number;
-  data: ITransactionsResponseItem[];
-}
+import { ITransactionsResponseItem, TChainID } from '@_api/type';
+import { useParams } from 'next/navigation';
+import { fetchTransactionList } from '@_api/fetchTransactions';
+import { getPageNumber } from '@_utils/formatter';
 
 export default function List({ SSRData, showHeader = true }) {
+  console.log(SSRData, 'transactionSSRData');
   const { isMobile } = useMobileAll();
-  const disposeData = (data) => {
-    return {
-      total: data.total,
-      list: [...data.data],
-    };
-  };
-  const { loading, total, data, currentPage, pageSize, pageChange, pageSizeChange } = useTableData<
-    ITransactionsResponseItem,
-    ITransactionsData
-  >({
-    SSRData: disposeData(SSRData),
-    fetchData: fetchData,
-    disposeData: disposeData,
-  });
+
+  const { chain } = useParams();
+  const fetchData = useCallback(
+    async (page, pageSize) => {
+      const params = {
+        chainId: chain as TChainID,
+        skipCount: getPageNumber(page, pageSize),
+        maxResultCount: pageSize,
+      };
+      try {
+        const res = await fetchTransactionList(params);
+        setTotal(res.total);
+        setData(res.transactions);
+      } catch (error) {
+        setLoading(false);
+      }
+    },
+    [chain],
+  );
+
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(25);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [total, setTotal] = useState<number>(SSRData.total);
+  const [data, setData] = useState<ITransactionsResponseItem[]>(SSRData.transactions);
   const [timeFormat, setTimeFormat] = useState<string>('Age');
   const columns = useMemo<ColumnsType<ITransactionsResponseItem>>(() => {
     return getColumns({
@@ -50,6 +58,17 @@ export default function List({ SSRData, showHeader = true }) {
     return `Showing the last 500k records`;
   }, []);
 
+  const pageChange = async (page: number) => {
+    setCurrentPage(page);
+    fetchData(page, pageSize);
+  };
+
+  const pageSizeChange = async (page, size) => {
+    setPageSize(size);
+    setCurrentPage(page);
+    fetchData(page, size);
+  };
+
   return (
     <div>
       {showHeader && <HeadTitle content="Transactions"></HeadTitle>}

src/app/[chain]/transactions/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]/transactions/page.tsx

@@ -0,0 +1,23 @@
+/*
+ * @author: Peterbjx
+ * @Date: 2023-08-15 15:58:11
+ * @LastEditors: Peterbjx
+ * @LastEditTime: 2023-08-15 16:36:16
+ * @Description: transactions
+ */
+
+import { fetchServerTransactionList } from '@_api/fetchTransactions';
+import TransactionsList from './list';
+export default async function BlocksPage({ params }) {
+  const { chain } = params;
+  const data = await fetchServerTransactionList({
+    chainId: chain,
+    skipCount: 0,
+    maxResultCount: 25,
+    cache: 'no-store',
+  });
+  return <TransactionsList SSRData={data} />;
+}
+
+export const revalidate = 1;
+export const dynamic = 'force-dynamic';

src/app/actions.ts

@@ -4,4 +4,5 @@ import { revalidatePath } from 'next/cache';
 
 export async function reloadBlockListData() {
   revalidatePath('/[chain]/blocks');
+  revalidatePath('/', 'layout');
 }

src/app/layout.tsx

@@ -27,8 +27,6 @@ export const metadata: Metadata = {
   description: 'AELF explorer',
   icons: {
     icon: '/favicon.ico',
-    shortcut: '/favicon.ico',
-    apple: '/favicon.ico',
   },
 };
 async function fetchData() {