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

…chain feat: token and token detail
AElfProject · Apr 27, 2024 · 63b6d75 · 63b6d75
2 parents 57a1c89 + 99195dc
commit 63b6d75
Show file tree

Hide file tree

Showing 20 changed files with 163 additions and 119 deletions.
diff --git a/src/_api/fetchTokens.ts b/src/_api/fetchTokens.ts
@@ -6,40 +6,43 @@ import {
   TTokenListRequestParams,
 } from './type';
 import { IHolderTableData, ITokenDetail, ITokenList, ITransferTableData } from '@app/[chain]/token/[tokenSymbol]/type';
-
+const defaultTokenListData: ITokenList = {
+  total: 0,
+  list: [],
+};
 export async function fetchTokenList(params: TTokenListRequestParams): Promise<ITokenList> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getTokenList({
     params: params,
   });
-  const data = result?.data;
+  const data = result?.data || defaultTokenListData;
   return data;
 }
 export async function fetchServerTokenList(params: TTokenListRequestParams): Promise<ITokenList> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getServerTokenList({
     params: params,
   });
-  const data = result?.data;
+  const data = result?.data || defaultTokenListData;
   return data;
 }
 export async function fetchTokenDetail(params: ITokenDetailRequestParams): Promise<ITokenDetail> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getTokenDetail({
     params: params,
   });
   const data = result?.data;
   return data;
 }
 export async function fetchTokenDetailTransfers(params: ITokenTransfersRequestParams): Promise<ITransferTableData> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getTokenDetailTransfers({
     params: params,
   });
-  const data = result?.data;
+  const data = result?.data || defaultTokenListData;
   return data;
 }
 
 export async function fetchTokenDetailHolders(params: ITokenHoldersRequestParams): Promise<IHolderTableData> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getTokenDetailHolders({
     params: params,
   });
-  const data = result?.data;
+  const data = result?.data || defaultTokenListData;
   return data;
 }
diff --git a/src/_api/list.ts b/src/_api/list.ts
@@ -24,11 +24,11 @@ const Transaction_API_List = {
 };
 
 const Token_API_List = {
-  getTokenList: `api/app/token/list`,
-  getServerTokenList: `api/app/token/list`,
+  getTokenList: `${BASE_API}/app/token/list`,
+  getServerTokenList: `${SERVER_BASE_API}/app/token/list`,
   getTokenDetail: `${SERVER_BASE_API}/app/token/detail`,
-  getTokenDetailTransfers: `api/app/token/transfers`,
-  getTokenDetailHolders: `api/app/token/holders`,
+  getTokenDetailTransfers: `${BASE_API}/app/token/transfers`,
+  getTokenDetailHolders: `${BASE_API}/app/token/holders`,
 };
 
 const Common_API_List = {
@@ -48,6 +48,7 @@ export const API_List = {
   tx: Transaction_API_List,
   common: Common_API_List,
   cms: CMS_API_List,
+  token: Token_API_List,
 };
 
 type REQUEST_FUNCTION = (opt?: RequestWithParams) => Promise<any>;

diff --git a/src/_api/server.ts b/src/_api/server.ts
@@ -25,7 +25,7 @@ async function service(url: string, options: RequestWithParams) {
   const paramsArr: Array<any> = [];
   if (Object.keys(params).length > 0) {
     for (const item in params) {
-      if (params[item] !== undefined) {
+      if ((params[item] !== undefined && params[item]) || params[item] === 0) {
         paramsArr.push(item + '=' + params[item]);
       }
     }

diff --git a/src/_api/type.ts b/src/_api/type.ts
@@ -1,4 +1,5 @@
 import { ILogsProps } from '@_components/LogsContainer/type';
+import { SortEnum } from '@_types/common';
 
 export type TChainID = 'AELF' | 'tDVV' | 'tDVW';
 
@@ -194,6 +195,7 @@ export interface ITokenHoldersRequestParams {
   symbol: string;
   skipCount: number;
   maxResultCount: number;
+  // search: string;
 }
 
 export interface ITokenTransfersRequestParams {
@@ -213,6 +215,6 @@ export interface TTokenListRequestParams {
   chainId: TChainID;
   skipCount: number;
   maxResultCount: number;
-  sort: number;
+  sort: SortEnum;
   sortBy: number;
 }
diff --git a/src/_types/common.ts b/src/_types/common.ts
@@ -26,3 +26,8 @@ export enum AddressType {
   address,
   Contract,
 }
+
+export enum SortEnum {
+  asc,
+  desc,
+}
diff --git a/src/app/[chain]/block/[hash]/_components/detail.tsx b/src/app/[chain]/block/[hash]/_components/detail.tsx
@@ -8,7 +8,7 @@
 'use client';
 import clsx from 'clsx';
 import HeadTitle from '@_components/HeaderTitle';
-import { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import './detail.css';
 import BaseInfo from './baseinfo';
 import ExtensionInfo from './ExtensionInfo';
@@ -21,7 +21,6 @@ import EPTabs from '@_components/EPTabs';
 import { useMobileAll } from '@_hooks/useResponsive';
 import { IBlocksDetailData, ITransactionsResponseItem } from '@_api/type';
 import { pageSizeOption } from '@_utils/contant';
-import { useAppSelector } from '@_store';
 import { useParams } from 'next/navigation';
 
 export default function Detail({ SSRData }) {
@@ -52,20 +51,11 @@ export default function Detail({ SSRData }) {
     setCurrentPage(page);
   };
 
-  const pageSizeChange = (size) => {
+  const pageSizeChange = (page, size) => {
+    setCurrentPage(page);
     setPageSize(size);
   };
 
-  const mountedRef = useRef<boolean>(true);
-  const { defaultChain } = useAppSelector((state) => state.getChainId);
-  useEffect(() => {
-    if (mountedRef.current) {
-      mountedRef.current = false;
-      return;
-    }
-    setPageSize(25);
-    setCurrentPage(1);
-  }, [defaultChain]);
   const tableData = useMemo(() => {
     const transactions = detailData.transactions || [];
     return transactions.slice((currentPage - 1) * pageSize, currentPage * pageSize);

diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Holders/index.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Holders/index.tsx
@@ -34,6 +34,7 @@ export default function Holders({ search, onSearchChange, onSearchInputChange }:
       const res = await fetchTokenDetailHolders(params);
       setData(res.list);
       setTotal(res.total);
+      setLoading(false);
     } catch (error) {
       setLoading(false);
     }
@@ -43,9 +44,9 @@ export default function Holders({ search, onSearchChange, onSearchInputChange }:
     setCurrentPage(page);
   };
 
-  const pageSizeChange = async (size) => {
+  const pageSizeChange = async (page, size) => {
     setPageSize(size);
-    setCurrentPage(1);
+    setCurrentPage(page);
   };
 
   useEffect(() => {
@@ -70,7 +71,7 @@ export default function Holders({ search, onSearchChange, onSearchInputChange }:
           },
           onSearchChange,
         }}
-        showTopSearch
+        // showTopSearch
         loading={loading}
         dataSource={data}
         columns={columns}

diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Overview/index.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Overview/index.tsx
@@ -23,7 +23,7 @@ const TokenDetailItems: IOverviewItem[] = [
   {
     key: 'holders',
     label: 'HOLDERS',
-    render: (text, record) => <NumberPercentGroup number={text} percent={record['holderPercentChange24h']} />,
+    render: (text, record) => <NumberPercentGroup number={text} percent={record['holderPercentChange24H']} />,
   },
   {
     key: 'totalTransfers',
@@ -33,20 +33,24 @@ const TokenDetailItems: IOverviewItem[] = [
   {
     key: 'priceInUsd',
     label: 'PRICE',
-    render: (text, record) => (
-      <NumberPercentGroup decorator="$" number={text} percent={record['pricePercentChange24h']} />
-    ),
+    render: (text, record) =>
+      record['pricePercentChange24h'] && record['pricePercentChange24h'] !== 0 ? (
+        <NumberPercentGroup decorator="$" number={text} percent={record['pricePercentChange24h']} />
+      ) : (
+        '--'
+      ),
   },
   {
     key: 'contractAddress',
     label: 'CONTRACT',
     tooltip:
       'This is the MultiToken contract that defines a common implementation for fungible and non-fungible tokens.',
-    render: (text) => <ContractToken address={text} type={AddressType.address} chainId="AELf" />,
+    render: (text) => (text ? <ContractToken address={text} type={AddressType.address} chainId="AELf" /> : '--'),
   },
   {
     key: 'decimals',
     label: 'DECIMAL',
+    render: (text) => (text && text !== 0 ? text : '--'),
   },
 ];
 

diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/columns.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/columns.tsx
@@ -103,7 +103,7 @@ export default function getColumns({ timeFormat, handleTimeChange, chain }): Col
       width: 180,
       render: (data) => {
         const { address, addressType } = data;
-        return <ContractToken address={address} type={addressType} chainId={chain} />;
+        return <ContractToken address={address || ''} type={addressType} chainId={chain} />;
       },
     },
     {

diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/index.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/index.tsx
@@ -32,7 +32,7 @@ export interface ITransfersRef {
   setSearchStr: (val: string) => void;
 }
 
-const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }: ITransfersProps, ref) => {
+const Transfers = ({ search, searchText, searchType, onSearchChange, onSearchInputChange }: ITransfersProps, ref) => {
   const { isMobile } = useMobileAll();
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(50);
@@ -54,17 +54,18 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
         symbol: tokenSymbol as string,
         skipCount: getPageNumber(currentPage, pageSize),
         maxResultCount: pageSize,
-        search: search || '',
+        search: searchText || '',
       };
       const res = await fetchTokenDetailTransfers(params);
       const { balance, value, list, total } = res;
       setData(list);
       setSearchData({ balance, value });
       setTotal(total);
+      setLoading(false);
     } catch (error) {
       setLoading(false);
     }
-  }, [chain, tokenSymbol, currentPage, pageSize, search]);
+  }, [chain, tokenSymbol, currentPage, pageSize, searchText]);
 
   useImperativeHandle(
     ref,
@@ -80,9 +81,9 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
   const pageChange = async (page: number) => {
     setCurrentPage(page);
   };
-  const pageSizeChange = async (size) => {
+  const pageSizeChange = async (page, size) => {
     setPageSize(size);
-    setCurrentPage(1);
+    setCurrentPage(page);
   };
 
   useEffect(() => {
@@ -96,7 +97,7 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
         handleTimeChange: () => setTimeFormat(timeFormat === 'Age' ? 'Date Time (UTC)' : 'Age'),
         chain,
       }),
-    [timeFormat],
+    [chain, timeFormat],
   );
   const title = useMemo(() => `A total of ${total} ${total <= 1 ? 'token' : 'tokens'} found`, [total]);
 
@@ -105,10 +106,10 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
     [address, isMobile, searchData],
   );
   const searchByHash: DescriptionsProps['items'] = useMemo(
-    () => getSearchByHashItems(address, isMobile),
-    [address, isMobile],
+    () => getSearchByHashItems(address, isMobile, chain, data[0]?.blockHeight),
+    [address, chain, data, isMobile],
   );
-
+  console.log(searchType, 'searchType');
   return (
     <div>
       {searchType !== SearchType.other && (

diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/utils.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/utils.tsx
@@ -44,7 +44,12 @@ export function getSearchByHolderItems(
   ];
 }
 
-export function getSearchByHashItems(address: string, isMobile: boolean): DescriptionsProps['items'] {
+export function getSearchByHashItems(
+  address: string,
+  isMobile: boolean,
+  chain,
+  blockHeight,
+): DescriptionsProps['items'] {
   const spanWith2col = isMobile ? 4 : 2;
   return [
     {
@@ -55,7 +60,10 @@ export function getSearchByHashItems(address: string, isMobile: boolean): Descri
         fontWeight: 500,
       },
       children: (
-        <Link className="block w-[120px] truncate text-xs leading-5 text-link" href={`tx/${address}`}>
+        <Link
+          className="block w-[400px] truncate text-xs leading-5 text-link"
+          // href={`/${chain}/tx/${address}?blockHeight=${blockHeight}`}>
+          href="">
           {address}
         </Link>
       ),