Merge pull request #349 from AelfScanProject/release/v1.9.7

multi-chain requirements review and issue resolution

src/_api/type.ts

@@ -1,5 +1,5 @@
 import { ILogsProps } from '@_components/LogsContainer/type';
-import { AddressType, SortEnum } from '@_types/common';
+import { AddressType, IAddress, SortEnum } from '@_types/common';
 
 export type TChainID = 'AELF' | 'tDVV' | 'tDVW' | '' | 'multiChain';
 
@@ -413,6 +413,7 @@ export interface CollectionDetailData {
   floorPriceOfUsd: number;
   floorPrice: number;
   tokenContractAddress: string;
+  contractAddress: IAddress;
   mainChainFloorPrice: number;
   sideChainFloorPrice: number;
   mainChainFloorPriceOfUsd: number;

src/_components/AddressDetail/components/Events/index.tsx

@@ -48,7 +48,7 @@ export default function Events() {
         chainId: chain as TChainID,
         skipCount: getPageNumber(page, pageSize),
         maxResultCount: pageSize,
-        blockHeight: search || null,
+        blockHeight: !isNaN(Number(search)) ? Number(search) : search || null,
         contractAddress: address && getAddress(address as string),
       };
       setLoading(true);
@@ -163,7 +163,11 @@ export default function Events() {
           value: searchText,
           placeholder: 'Search blockNo',
           onChange: ({ currentTarget }) => {
-            setSearchText(currentTarget.value);
+            const { value: inputValue } = currentTarget;
+            const reg = /^-?\d*(\.\d*)?$/;
+            if (reg.test(inputValue) || inputValue === '' || inputValue === '-') {
+              setSearchText(inputValue);
+            }
           },
           onSearchChange: () => {
             // searchChange();

src/_components/AddressDetail/components/Tokens/NFTAssets/columnConfig.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import EPTooltip from '@_components/EPToolTip';
 import EPSortIcon from '@_components/EPSortIcon';
 import ChainTags from '@_components/ChainTags';
+import dayjs from 'dayjs';
 
 const renderToken = (token, record, chain) => {
   if (!token) return null;
@@ -25,7 +26,7 @@ const renderToken = (token, record, chain) => {
 
 const renderCollection = (collection, record, chain) =>
   collection && (
-    <Link href={`/${record.chainIds ? record.chainIds[0] : chain}/token/${collection.symbol}`}>
+    <Link href={`/nft?chainId=${record.chainIds ? record.chainIds[0] : chain}&&collectionSymbol=${collection.symbol}`}>
       <div className="flex items-center">
         <EPTooltip mode="dark" title={collection.name}>
           <span className="mx-1 inline-block max-w-[194px] truncate text-link">{collection.name}</span>
@@ -39,14 +40,19 @@ const renderCollection = (collection, record, chain) =>
     </Link>
   );
 
+const trimmedDateString = (originalDateString) => {
+  const result = originalDateString.replace(/\.\d+Z$/, 'Z');
+  return dayjs(result).unix();
+};
+
 const getSortOrder = (sortedInfo, columnKey) => (sortedInfo?.columnKey === columnKey ? sortedInfo.order : null);
 
 const renderQuantity = (text) => (
   <span className="mx-1 inline-block max-w-[124px] truncate text-base-100">{thousandsNumber(text)}</span>
 );
 
 const renderDate = (text) => (
-  <span className="mx-1 inline-block text-base-100">{formatDate(text, 'Date Time (UTC)')}</span>
+  <span className="mx-1 inline-block text-base-100">{formatDate(trimmedDateString(text), 'Date Time (UTC)')}</span>
 );
 
 export default function getColumns(chain, sortedInfo, multi): ColumnsType<NftsItemType> {

src/_components/AddressDetail/components/Tokens/NFTAssets/index.tsx

@@ -34,9 +34,12 @@ export default function NFTAssets() {
         maxResultCount: pageSize,
         chainId: getChainId(selectChain),
         address: getAddress(address as string),
-        orderBy: sortedInfo.order ? (sortedInfo.columnKey as string) : undefined,
-        sort: sortedInfo.order ? SortEnum[TableSortEnum[sortedInfo.order]] : undefined,
+        // orderBy: sortedInfo.order ? (sortedInfo.columnKey as string) : undefined,
+        // sort: sortedInfo.order ? SortEnum[TableSortEnum[sortedInfo.order]] : undefined,
         search: SearchFetchText,
+        orderInfos: sortedInfo.order
+          ? [{ orderBy: sortedInfo.columnKey as string, sort: SortEnum[TableSortEnum[sortedInfo.order]] }]
+          : [],
       };
       setLoading(true);
       const data = await fetchAccountsDetailNFTAssets(params);

src/_components/AddressWithCopy/index.tsx

@@ -1,24 +1,32 @@
 import Copy from '@_components/Copy';
+import { MULTI_CHAIN } from '@_utils/contant';
+import { getAddress } from '@_utils/formatter';
 import addressFormat, { hiddenAddress } from '@_utils/urlUtils';
 import Link from 'next/link';
 import { useMemo } from 'react';
 
 export interface IAddressWithCopyProps {
   address: string;
+  chain: string;
   hidden?: boolean;
 }
 
-const AddressWithCopy = ({ address, hidden }: IAddressWithCopyProps) => {
+const AddressWithCopy = ({ address, hidden, chain }: IAddressWithCopyProps) => {
   const addressStr = useMemo(() => {
     const str = hidden ? hiddenAddress(address, 4, 4) : address;
-    return addressFormat(str);
+    return getAddress(str);
   }, [address, hidden]);
+
+  const previewAddress = useMemo(() => {
+    return chain === MULTI_CHAIN ? addressStr : addressFormat(addressStr, chain);
+  }, [addressStr, chain]);
+
   return (
     <>
-      <Link className="text-link" href={`/address/${addressFormat(address)}`}>
-        {addressStr}
+      <Link className="text-link" href={`/${chain}/address/${previewAddress}`}>
+        {previewAddress}
       </Link>
-      <Copy value={addressFormat(address)} />
+      <Copy value={previewAddress} />
     </>
   );
 };

src/_components/ChainSelect/index.tsx

@@ -1,34 +1,29 @@
 'use client';
 import { Select } from 'antd';
-import { useAppDispatch, useAppSelector } from '@_store';
-import { setDefaultChain } from '@_store/features/chainIdSlice';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useAppSelector } from '@_store';
+import { useParams, useSearchParams } from 'next/navigation';
 const { Option } = Select;
 import './index.css';
 import { useMemo } from 'react';
-import { DEFAULT_CHAIN } from '@_utils/contant';
+import { MenuItem } from '@_types';
+import useChainSelect from '@_hooks/useChainSelect';
 
-export default function ChainSelect({ setCurrent }) {
+export default function ChainSelect({
+  setCurrent,
+  headerList,
+}: {
+  headerList: MenuItem[];
+  setCurrent: (key: string) => void;
+}) {
   const { chainArr, defaultChain } = useAppSelector((state) => state.getChainId);
-  const dispatch = useAppDispatch();
-  const router = useRouter();
 
   const { chain } = useParams();
   const chainId = useSearchParams().get('chainId');
   const selectChain = useMemo(() => {
     return chainId || (chain as string) || defaultChain;
   }, [chain, chainId, defaultChain]);
 
-  const onChangeHandler = (value: string) => {
-    dispatch(setDefaultChain(value));
-    if (value === DEFAULT_CHAIN) {
-      router.push('/');
-    } else {
-      router.push(`/${value}`);
-    }
-    setCurrent('/');
-  };
-
+  const onChangeHandler = useChainSelect(headerList, setCurrent);
   return (
     <div className="chain-select-container" id="chain-select-container">
       {chainArr && chainArr.length > 0 && (

src/_components/ContractToken/index.tsx

@@ -63,8 +63,8 @@ export default function ContractToken({
       </EPTooltip>
       <EPTooltip
         title={
-          <div>
-            <div>Contract Name:{name}</div>
+          <div className="break-all">
+            <div className="break-all">Contract Name: {name}</div>
             <div>({addressFormat(address, chainId)})</div>
           </div>
         }

src/_components/HeaderTop/index.tsx

@@ -120,7 +120,7 @@ export default function HeaderTop({ setCurrent, selectedKey, networkList, header
           )}
 
           <div className="flex items-center">
-            {!isMobile && <ChainSelect setCurrent={setCurrent} />}
+            {!isMobile && <ChainSelect headerList={headerMenuList} setCurrent={setCurrent} />}
             <Dropdown trigger={['click']} overlayClassName="network-drop w-[180px]" menu={{ items }}>
               <div className={clsx(`${clsPrefix}-right`)}>
                 <div className={clsx(`${clsPrefix}-explorer-change`)}>

src/_components/LogsContainer/index.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { ILogsProps } from './type';
 import DetailContainer from '@_components/DetailContainer';
-import Link from 'next/link';
-import addressFormat from '@_utils/urlUtils';
-import Copy from '@_components/Copy';
 import LogItems from './logItems';
 import { useParams } from 'next/navigation';
 import ContractToken from '@_components/ContractToken';

src/_components/MobileHeaderMenu/index.tsx

@@ -3,11 +3,10 @@ import IconFont from '@_components/IconFont';
 import { MenuItem, NetworkItem } from '@_types';
 import { Drawer, Menu, MenuProps } from 'antd';
 import Link from 'next/link';
-import { useParams, usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useMemo, useState } from 'react';
+import { useParams, usePathname, useSearchParams } from 'next/navigation';
+import { useMemo, useState } from 'react';
 import './index.css';
-import { useAppDispatch, useAppSelector } from '@_store';
-import { setDefaultChain } from '@_store/features/chainIdSlice';
+import { useAppSelector } from '@_store';
 import { getPathnameFirstSlash, isURL } from '@_utils/urlUtils';
 import { useEnvContext } from 'next-runtime-env';
 import { checkMainNet } from '@_utils/isMainNet';
@@ -19,6 +18,7 @@ import { homePath } from '@_components/Main';
 import { DEFAULT_CHAIN, TG_BOT_LINK } from '@_utils/contant';
 const ChangeIcoTest = '/image/aelf-header-top-test-change.svg';
 import { TelegramPlatform } from '@portkey/did-ui-react';
+import useChainSelect from '@_hooks/useChainSelect';
 
 interface IProps {
   headerMenuList: MenuItem[];
@@ -38,7 +38,6 @@ export default function MobileHeaderMenu({ headerMenuList, setCurrent, selectedK
     setShowMobileMenu(!showMobileMenu);
   };
 
-  console.log(chainArr, 'chainArr');
   const onClick: MenuProps['onClick'] = (e) => {
     if (!e.key.startsWith('http')) {
       setCurrent(e.key);
@@ -47,7 +46,6 @@ export default function MobileHeaderMenu({ headerMenuList, setCurrent, selectedK
   };
   const { NEXT_PUBLIC_NETWORK_TYPE } = useEnvContext();
   const isMainNet = checkMainNet(NEXT_PUBLIC_NETWORK_TYPE);
-  const router = useRouter();
   function getItem(label: React.ReactNode, key: React.Key, children?: AntdMenuItem[], type?: 'group'): AntdMenuItem {
     return {
       key,
@@ -84,21 +82,11 @@ export default function MobileHeaderMenu({ headerMenuList, setCurrent, selectedK
       return getItem(label, path, convertMenuItems(children));
     });
   };
-  const dispatch = useAppDispatch();
-  const onSelectHandler = useCallback(
-    (value: string) => {
-      dispatch(setDefaultChain(value));
-      if (value === DEFAULT_CHAIN) {
-        router.push('/');
-      } else {
-        router.push(`/${value}`);
-      }
-      setCurrent('/');
-    },
-    [dispatch, router, setCurrent],
-  );
 
   const pathname = usePathname();
+
+  const onSelectHandler = useChainSelect(headerMenuList, setCurrent);
+
   const origin = typeof window !== 'undefined' && window.location.origin;
 
   const { chain } = useParams();
@@ -165,7 +153,7 @@ export default function MobileHeaderMenu({ headerMenuList, setCurrent, selectedK
       },
       ...chainList,
     ];
-  }, [chainArr, networkList, onSelectHandler, origin, selectChain]);
+  }, [chainArr, isTg, networkList, onSelectHandler, origin, selectChain]);
 
   const items: MenuProps['items'] = [...convertMenuItems(headerMenuList)];
 

src/_hooks/useChainSelect.ts

@@ -0,0 +1,48 @@
+import { useAppDispatch } from '@_store';
+import { setDefaultChain } from '@_store/features/chainIdSlice';
+import { MenuItem } from '@_types';
+import { DEFAULT_CHAIN } from '@_utils/contant';
+import { usePathname, useRouter } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+
+export default function useChainSelect(headerMenuList: MenuItem[], setCurrent) {
+  const menus = useMemo(() => {
+    return headerMenuList.reduce((pre, cur) => {
+      if (cur.children.length) {
+        pre.push(...cur.children);
+      } else {
+        pre.push(cur);
+      }
+      return pre;
+    }, [] as MenuItem[]);
+  }, [headerMenuList]);
+
+  const dispatch = useAppDispatch();
+
+  const pathname = usePathname();
+
+  const router = useRouter();
+
+  const onSelectHandler = useCallback(
+    (value: string) => {
+      dispatch(setDefaultChain(value));
+      const segments = pathname.split('/');
+      const current = segments.length > 2 ? `/${segments[2]}` : '';
+
+      if (menus.find((item) => item.path === current)) {
+        router.push(`/${value}${current}`);
+        setCurrent(current);
+      } else {
+        if (value === DEFAULT_CHAIN) {
+          router.push('/');
+        } else {
+          router.push(`/${value}`);
+        }
+        setCurrent('/');
+      }
+    },
+    [dispatch, menus, pathname, router, setCurrent],
+  );
+
+  return onSelectHandler;
+}

src/_pluginsComponents/nft/_overview/OverView.tsx

@@ -4,7 +4,6 @@ import { CollectionDetailData } from '../type';
 
 import '../detail.css';
 import ContractToken from '@_components/ContractToken';
-import { AddressType } from '@_types/common';
 import { useSearchParams } from 'next/navigation';
 import { TChainID } from '@_api/type';
 import { addSymbol, thousandsNumber } from '@_utils/formatter';
@@ -208,10 +207,10 @@ export default function OverView(props: OverViewProps) {
                     </span>
                   </div>
                   <div className="desc item-center flex">
-                    <IconFont className="mr-1 text-sm" type="Contract" />
                     <ContractToken
-                      address={overview.tokenContractAddress}
-                      type={AddressType.address}
+                      address={overview.contractAddress?.address}
+                      name={overview.contractAddress?.name}
+                      type={overview.contractAddress?.addressType}
                       chainId={chain as TChainID}
                     />
                   </div>

src/_pluginsComponents/nft/type.ts

@@ -1,5 +1,5 @@
 import { IFromInfo, TChainID, TransactionStatus } from '@_api/type';
-import { IToken } from '@_types/common';
+import { IAddress, IToken } from '@_types/common';
 import { ISearchProps } from 'aelf-design';
 
 // Collection detail api return type
@@ -13,6 +13,7 @@ export interface CollectionDetailData {
   mergeHolders: number;
   floorPrice: number;
   tokenContractAddress: string;
+  contractAddress: IAddress;
   mainChainFloorPrice: number;
   sideChainFloorPrice: number;
   mainChainFloorPriceOfUsd: number;

src/_types/common.ts

@@ -18,7 +18,7 @@ export interface IToken {
 export interface IAddress {
   name: string;
   address: string;
-  addressType: TAddressType;
+  addressType: AddressType;
   isManager: false;
   isProducer: true;
 }

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

@@ -53,7 +53,7 @@ export default function BaseInfo({ data, tabChange, jump }) {
           <div className="value-timestamp">
             <IconFont className="mr-1 !text-sm !leading-[22px]" type="Time" />
             <span>
-              {formatDate(data.timestamp, 'age')}({dayjs.unix(data.timestamp).format('MMM-DD-YYYY hh:mm:ss Z')})
+              {formatDate(data.timestamp, 'age')}({formatDate(data.timestamp, 'Date Time (UTC)')})
             </span>
           </div>
         ),

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

@@ -84,8 +84,8 @@ export default function BlockList({ SSRData, defaultPage, defaultPageSize, defau
     });
   }, [chain, timeFormat]);
 
-  const pageMaxBlock = data[0]?.blockHeight;
-  const pageMinBlock = data[data.length - 1]?.blockHeight;
+  const pageMaxBlock = data && data[0]?.blockHeight;
+  const pageMinBlock = data && data[data.length - 1]?.blockHeight;
 
   const { pageChange, pageSizeChange, chainChange } = usePagination({
     setCurrentPage,