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

…chain feat: home transaction list and detail bug fix
AElfProject · Apr 29, 2024 · 4b8dfe7 · 4b8dfe7
2 parents 227e543 + 4207787
commit 4b8dfe7
Show file tree

Hide file tree

Showing 13 changed files with 156 additions and 222 deletions.
diff --git a/src/_api/fetchTransactions.ts b/src/_api/fetchTransactions.ts
@@ -24,6 +24,16 @@ export async function fetchTransactionList(params: TTransactionsListRequestParam
   return data;
 }
 
+export async function fetchLatestTransactionList(
+  params: TTransactionsListRequestParams,
+): Promise<ITransactionsResponse> {
+  const result = await request.tx.getLatestTransactionList({
+    params: params,
+  });
+  const data = result?.data;
+  return data;
+}
+
 export async function fetchServerTransactionList(
   params: TTransactionsListRequestParams,
 ): Promise<ITransactionsResponse> {

diff --git a/src/_api/list.ts b/src/_api/list.ts
@@ -20,6 +20,7 @@ const Block_API_List = {
 
 const Transaction_API_List = {
   getTransactionList: `${BASE_API}/app/blockchain/transactions`,
+  getLatestTransactionList: `${BASE_API}/app/blockchain/latestTransactions`,
   getServerTransactionList: `${SERVER_BASE_API}/app/blockchain/transactions`,
   getTransactionDetail: `${SERVER_BASE_API}/app/blockchain/transactionDetail`,
 };

diff --git a/src/_api/type.ts b/src/_api/type.ts
@@ -221,6 +221,6 @@ export interface TTokenListRequestParams extends RequestInit {
 
 export interface TTransactionsListRequestParams extends RequestInit {
   chainId: TChainID;
-  skipCount: number;
+  skipCount?: number;
   maxResultCount: number;
 }
diff --git a/src/_components/ContractToken/index.tsx b/src/_components/ContractToken/index.tsx
@@ -10,20 +10,22 @@ export default function ContractToken({
   name,
   type,
   chainId,
+  showCopy = true,
 }: {
   address: string;
   name?: string;
   type: AddressType;
   chainId: string;
+  showCopy?: boolean;
 }) {
   return type === AddressType.address ? (
     <div className="address flex items-center">
-      <EPTooltip pointAtCenter={false} title={addressFormat(address, chainId)} mode="dark">
-        <Link className="text-link" href={`/${chainId}/address/${addressFormat(address, chainId)}`}>
-          {addressFormat(hiddenAddress(address, 4, 4), chainId)}
+      <EPTooltip pointAtCenter={false} title={addressFormat(address || '', chainId)} mode="dark">
+        <Link className="text-link" href={`/${chainId}/address/${addressFormat(address || '', chainId)}`}>
+          {addressFormat(hiddenAddress(address || '', 4, 4), chainId)}
         </Link>
       </EPTooltip>
-      <Copy value={addressFormat(address, chainId)} />
+      {showCopy && <Copy value={addressFormat(address, chainId)} />}
       <div className="flex items-center"></div>
     </div>
   ) : (
@@ -40,7 +42,7 @@ export default function ContractToken({
         pointAtCenter={false}>
         <Link href={`/${chainId}/address/${addressFormat(address, chainId)}`}>{name}</Link>
       </EPTooltip>
-      <Copy value={addressFormat(address, chainId)} />
+      {showCopy && <Copy value={addressFormat(address, chainId)} />}
     </div>
   );
 }
diff --git a/src/_components/DollarCurrencyRate/index.tsx b/src/_components/DollarCurrencyRate/index.tsx
@@ -1,14 +1,10 @@
 import { numberFormatter } from '@_utils/formatter';
-import { useState } from 'react';
 
 export default function DollarCurrencyRate({ nowPrice, tradePrice }: { nowPrice: string; tradePrice: string }) {
-  const [showNowPrice, setShowNowPrice] = useState(true);
   return (
-    <div
-      className="ml-1 flex h-6 cursor-pointer items-center rounded bg-ECEEF2 px-4"
-      onClick={() => setShowNowPrice(!showNowPrice)}>
+    <div className="ml-1 flex h-6 cursor-pointer items-center rounded bg-ECEEF2 px-4">
       <span className="mr-1">$</span>
-      {showNowPrice ? numberFormatter(nowPrice) : numberFormatter(tradePrice)}
+      {numberFormatter(nowPrice, '')}
     </div>
   );
 }
diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Overview/index.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Overview/index.tsx
@@ -5,57 +5,62 @@ import { thousandsNumber } from '@_utils/formatter';
 import { ITokenDetail } from '../../type';
 import NumberPercentGroup from '../NumberPercentGroup';
 import { AddressType } from '@_types/common';
+import { useParams } from 'next/navigation';
 
-const TokenDetailItems: IOverviewItem[] = [
-  {
-    key: 'totalSupply',
-    label: 'MAXIMUM SUPPLY',
-    format: thousandsNumber,
-    tooltip: 'The maximum number of tokens that will ever exist in the lifetime of the cryptocurrency.',
-  },
-  {
-    key: 'circulatingSupply',
-    label: 'CIRCULATING SUPPLY',
-    format: thousandsNumber,
-    tooltip:
-      "Circulating Supply is the best approximation of the number of tokens that are circulating in the market and in the general public's hands.",
-  },
-  {
-    key: 'holders',
-    label: 'HOLDERS',
-    render: (text, record) => <NumberPercentGroup number={text} percent={record['holderPercentChange24H']} />,
-  },
-  {
-    key: 'transferCount',
-    label: 'TOTAL TRANSFERS',
-    format: thousandsNumber,
-  },
-  {
-    key: 'price',
-    label: 'PRICE',
-    render: (text, record) => (
-      <NumberPercentGroup decorator="$" number={text} percent={record['pricePercentChange24h']} />
-    ),
-  },
-  {
-    key: 'tokenContractAddress',
-    label: 'CONTRACT',
-    tooltip:
-      'This is the MultiToken contract that defines a common implementation for fungible and non-fungible tokens.',
-    render: (text) => (text ? <ContractToken address={text} type={AddressType.address} chainId="AELf" /> : '--'),
-  },
-  {
-    key: 'token',
-    label: 'DECIMAL',
-    render: (token) => (token.decimals && token.decimals !== 0 ? token.decimals : '--'),
-  },
-];
+const TokenDetail = (chain): IOverviewItem[] => {
+  return [
+    {
+      key: 'totalSupply',
+      label: 'MAXIMUM SUPPLY',
+      format: thousandsNumber,
+      tooltip: 'The maximum number of tokens that will ever exist in the lifetime of the cryptocurrency.',
+    },
+    {
+      key: 'circulatingSupply',
+      label: 'CIRCULATING SUPPLY',
+      format: thousandsNumber,
+      tooltip:
+        "Circulating Supply is the best approximation of the number of tokens that are circulating in the market and in the general public's hands.",
+    },
+    {
+      key: 'holders',
+      label: 'HOLDERS',
+      render: (text, record) => <NumberPercentGroup number={text} percent={record['holderPercentChange24H']} />,
+    },
+    {
+      key: 'transferCount',
+      label: 'TOTAL TRANSFERS',
+      format: thousandsNumber,
+    },
+    {
+      key: 'price',
+      label: 'PRICE',
+      render: (text, record) => (
+        <NumberPercentGroup decorator="$" number={text} percent={record['pricePercentChange24h']} />
+      ),
+    },
+    {
+      key: 'tokenContractAddress',
+      label: 'CONTRACT',
+      tooltip:
+        'This is the MultiToken contract that defines a common implementation for fungible and non-fungible tokens.',
+      render: (text) => (text ? <ContractToken address={text} type={AddressType.address} chainId={chain} /> : '--'),
+    },
+    {
+      key: 'token',
+      label: 'DECIMAL',
+      render: (token) => (token.decimals && token.decimals !== 0 ? token.decimals : '--'),
+    },
+  ];
+};
 
 interface IDetailProps {
   data: Partial<ITokenDetail>;
 }
 
 export default function OverView({ data = {} }: IDetailProps) {
+  const { chain } = useParams();
+  const TokenDetailItems = TokenDetail(chain);
   return (
     <div className="mb-4">
       <OverviewCard items={TokenDetailItems} dataSource={data} breakIndex={4} />

diff --git a/src/app/[chain]/tokens/tokensList.tsx b/src/app/[chain]/tokens/tokensList.tsx
@@ -33,7 +33,7 @@ export default function TokensList({ SSRData }: TokensListProps) {
   const fetchData = useCallback(async () => {
     const params = {
       skipCount: getPageNumber(currentPage, pageSize),
-      maxResultCount: 50,
+      maxResultCount: pageSize,
       chainId: chain as TChainID,
       sort,
       orderBy: 'HolderCount',

diff --git a/src/app/[chain]/tx/[hash]/_components/ExtensionInfo.tsx b/src/app/[chain]/tx/[hash]/_components/ExtensionInfo.tsx
@@ -5,13 +5,14 @@ import DollarCurrencyRate from '@_components/DollarCurrencyRate';
 import Link from 'next/link';
 import CodeBlock from '@_components/CodeBlock';
 import SizeBytes from '@_components/SizeBytes';
-import { useMobileContext } from '@app/pageProvider';
 import clsx from 'clsx';
-import useResponsive, { useMobileAll } from '@_hooks/useResponsive';
+import { useMobileAll } from '@_hooks/useResponsive';
 import { ITransactionDetailData } from '@_api/type';
+import { useParams } from 'next/navigation';
 
 export default function ExtensionInfo({ data }: { data: ITransactionDetailData }) {
   const { isMobile } = useMobileAll();
+  const { chain } = useParams();
   const renderInfo = useMemo(() => {
     return [
       {
@@ -78,7 +79,7 @@ export default function ExtensionInfo({ data }: { data: ITransactionDetailData }
       {
         label: 'Transaction Ref Block Number ',
         tip: 'The block number referenced by this transaction at the time of its creation.',
-        value: <Link href={`/block/${data.transactionRefBlockNumber}`}>{data.transactionRefBlockNumber}</Link>,
+        value: <Link href={`/${chain}/block/${data.transactionRefBlockNumber}`}>{data.transactionRefBlockNumber}</Link>,
       },
       {
         label: 'Transaction Ref Block Prefix ',
@@ -110,6 +111,6 @@ export default function ExtensionInfo({ data }: { data: ITransactionDetailData }
         value: <SizeBytes size={Number(data.transactionSize)} />,
       },
     ];
-  }, [data, isMobile]);
+  }, [data, isMobile, chain]);
   return <DetailContainer infoList={renderInfo} />;
 }
diff --git a/src/app/[chain]/tx/[hash]/_components/baseInfo.tsx b/src/app/[chain]/tx/[hash]/_components/baseInfo.tsx
@@ -18,6 +18,7 @@ import Image from 'next/image';
 import ContractToken from '@_components/ContractToken';
 import { useParams } from 'next/navigation';
 import { StatusEnum } from '@_types/status';
+import TokenImage from '@app/[chain]/tokens/_components/TokenImage';
 
 export default function BaseInfo({ data }: { data: ITransactionDetailData }) {
   const { isMobile } = useMobileAll();
@@ -141,24 +142,24 @@ export default function BaseInfo({ data }: { data: ITransactionDetailData }) {
             {data.tokenTransferreds.length > 0
               ? data.tokenTransferreds.map((tokenTransfer, idx) => {
                   return (
-                    <div key={idx} className={clsx(isMobile && 'flex-col !items-start', 'flex items-center')}>
-                      <div>
+                    <div key={idx} className={clsx(isMobile && 'flex-col !items-start', 'mb-4 flex items-center')}>
+                      <div className="flex items-center">
                         <IconFont type="arrow" />
                         <span className="mx-1 text-base-200">From</span>
-                        <HashAddress size="small" address={tokenTransfer.from.address} preLen={8} endLen={8} />
+                        <HashAddress size="small" address={tokenTransfer?.from?.address} preLen={8} endLen={8} />
                       </div>
-                      <div>
+                      <div className="flex items-center">
                         <span className="mx-1 text-base-200">To</span>
-                        <HashAddress size="small" address={tokenTransfer.to.address} preLen={8} endLen={8} />
+                        <HashAddress size="small" address={tokenTransfer?.to?.address} preLen={8} endLen={8} />
                       </div>
                       <div className="flex items-center">
                         <span className="mx-1 text-base-200">For</span>
                         <span>{divDecimals(tokenTransfer.amount)}</span>
                         <DollarCurrencyRate nowPrice={tokenTransfer.nowPrice} tradePrice={tokenTransfer.tradePrice} />
                       </div>
-                      <div>
-                        {/* <Image src={tokenTransfer.imageUrl} alt="" width={16} height={16} /> */}
-                        <span className="text-link">{tokenTransfer.name}</span>
+                      <div className="ml-1 flex items-center">
+                        <TokenImage token={tokenTransfer}></TokenImage>
+                        <span className="mx-1 text-link">{tokenTransfer.name}</span>
                         <span>{`(${tokenTransfer.symbol})`}</span>
                       </div>
                     </div>
@@ -182,7 +183,7 @@ export default function BaseInfo({ data }: { data: ITransactionDetailData }) {
                   return (
                     <div
                       key={idx}
-                      className={clsx(isMobile && 'flex-col !items-start', 'nft-transferred flex items-center')}>
+                      className={clsx(isMobile && 'flex-col !items-start', 'nft-transferred mb-4 flex items-center')}>
                       {/* <Image
                     className={clsx(isMobile && 'mb-2', 'rounded-lg bg-slate-200')}
                     src={nftsTransfer.imageUrl}
@@ -197,7 +198,7 @@ export default function BaseInfo({ data }: { data: ITransactionDetailData }) {
                           <span className="mx-1 inline-block">{idx + 1} Of NFT</span>
                           <span className="inline-block text-link">{`${nftsTransfer.name}(${nftsTransfer.symbol})`}</span>
                         </div>
-                        <div className="flex">
+                        <div className="flex items-center">
                           <span className="mr-1 inline-block">From</span>
                           <HashAddress size="small" address={nftsTransfer.from.address} preLen={8} endLen={8} />
                           <span className="mx-1 inline-block text-base-200">To</span>