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

…chain feat: hom style and change env
AElfProject · May 6, 2024 · 926b48a · 926b48a
2 parents 0fcbef2 + c6b8aaf
commit 926b48a
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 22 deletions.
diff --git a/next.config.js b/next.config.js
@@ -31,7 +31,7 @@ const nextConfig = {
             source: '/api/:path*',
             destination: 'https://aelfscan.io/api/:path*',
             // permanent: false,
-            basePath: false,
+            // basePath: false,
           },
           {
             source: '/chain/:path*',

diff --git a/src/_components/Footer/index.tsx b/src/_components/Footer/index.tsx
@@ -11,7 +11,7 @@ import './index.css';
 import IconFont from '@_components/IconFont';
 import BackToTopButton from '@_components/BackToTopBtn';
 import Image from 'next/image';
-import { isMainNet } from '@_utils/isMainNet';
+import { checkMainNet } from '@_utils/isMainNet';
 import { useMobileAll } from '@_hooks/useResponsive';
 import { MenuItem } from '@_types';
 const FoorterBgTets = '/image/footer-bg.png';
@@ -42,6 +42,8 @@ export default function Footer({ footerMenuList }: IProps) {
       </div>
     );
   });
+
+  const isMainNet = checkMainNet();
   return (
     <div className={clsx(clsPrefix, isMainNet && `${clsPrefix}-main`, isMobile && `${clsPrefix}-mobile`)}>
       {!isMainNet && (

diff --git a/src/_components/MobileHeaderMenu/index.tsx b/src/_components/MobileHeaderMenu/index.tsx
@@ -9,7 +9,7 @@ import './index.css';
 import { useAppDispatch, useAppSelector } from '@_store';
 import { setDefaultChain } from '@_store/features/chainIdSlice';
 import { getPathnameFirstSlash } from '@_utils/urlUtils';
-import { isMainNet } from '@_utils/isMainNet';
+import { checkMainNet } from '@_utils/isMainNet';
 interface IProps {
   headerMenuList: MenuItem[];
   networkList: NetworkItem[];
@@ -79,7 +79,7 @@ export default function MobileHeaderMenu({ headerMenuList, networkList }: IProps
       }),
     ),
   ];
-
+  const isMainNet = checkMainNet();
   return (
     <div className={`header-navbar-mobile-more ${isMainNet ? 'header-navbar-main-mobile-more' : ''}`}>
       <IconFont type={isMainNet ? 'moremainnet' : 'moretestnet'} onClick={() => toggleMenu()} />

diff --git a/src/_utils/env.ts b/src/_utils/env.ts
@@ -0,0 +1,6 @@
+import { unstable_noStore as noStore } from 'next/cache';
+
+export default function getEnv(name: string) {
+  noStore();
+  return process.env[name];
+}
diff --git a/src/_utils/isMainNet.ts b/src/_utils/isMainNet.ts
@@ -1 +1,5 @@
-export const isMainNet = process.env.NEXT_PUBLIC_NETWORK_TYPE === 'MAINNET';
+import getEnv from './env';
+
+export function checkMainNet() {
+  return getEnv('NEXT_PUBLIC_NETWORK_TYPE') === 'MAINNET';
+}
diff --git a/src/app/[chain]/block/[hash]/_components/baseinfo.tsx b/src/app/[chain]/block/[hash]/_components/baseinfo.tsx
@@ -20,7 +20,7 @@ import DollarCurrency from '@_components/DollarCurrency';
 import addressFormat from '@_utils/urlUtils';
 import { StatusEnum } from '@_types/status';
 import { useParams } from 'next/navigation';
-export default function BaseInfo({ data }) {
+export default function BaseInfo({ data, tabChange }) {
   const router = useRouter();
   const { chain } = useParams();
   const isFirst = data?.preBlockHeight === 0;
@@ -75,7 +75,13 @@ export default function BaseInfo({ data }) {
         tip: 'The number of transactions in the block.',
         value: (
           <div className="text-xs leading-5">
-            <span className=" cursor-pointer text-link">{data.total} transactions</span>
+            <span
+              className=" cursor-pointer text-link"
+              onClick={() => {
+                tabChange('txns');
+              }}>
+              {data.total} transactions
+            </span>
             <span className="ml-1">in this block</span>
           </div>
         ),
@@ -136,6 +142,6 @@ export default function BaseInfo({ data }) {
         value: 'divider',
       },
     ];
-  }, [data, isFirst, isLast, jump]);
+  }, [data, isFirst, isLast, jump, chain, tabChange]);
   return <DetailContainer infoList={renderInfo} />;
 }
diff --git a/src/app/[chain]/block/[hash]/_components/detail.tsx b/src/app/[chain]/block/[hash]/_components/detail.tsx
@@ -22,6 +22,7 @@ import { useMobileAll } from '@_hooks/useResponsive';
 import { IBlocksDetailData, ITransactionsResponseItem } from '@_api/type';
 import { pageSizeOption } from '@_utils/contant';
 import { useParams } from 'next/navigation';
+import { useEffectOnce } from 'react-use';
 
 export default function Detail({ SSRData }) {
   const { isMobile } = useMobileAll();
@@ -57,6 +58,15 @@ export default function Detail({ SSRData }) {
     setPageSize(size);
   };
 
+  const [activeKey, setActiveKey] = useState<string>('');
+  useEffectOnce(() => {
+    setActiveKey(window.location.hash.replace('#', ''));
+  });
+
+  const tabChange = (key) => {
+    setActiveKey(key);
+  };
+
   const tableData = useMemo(() => {
     const transactions = detailData?.transactions || [];
     return transactions.slice((currentPage - 1) * pageSize, currentPage * pageSize);
@@ -71,7 +81,7 @@ export default function Detail({ SSRData }) {
       label: 'Overview',
       children: (
         <div className="overview-container pb-4">
-          <BaseInfo data={detailData} />
+          <BaseInfo data={detailData} tabChange={tabChange} />
           {showMore && <ExtensionInfo data={detailData} />}
           <MoreContainer showMore={showMore} onChange={moreChange} />
         </div>
@@ -109,7 +119,7 @@ export default function Detail({ SSRData }) {
       </HeadTitle>
 
       <div className="detail-table">
-        <EPTabs items={items} />
+        <EPTabs selectKey={activeKey} items={items} onTabChange={tabChange} />
       </div>
     </div>
   );

diff --git a/src/app/[chain]/nft/[collectionSymbol]/[itemSymbol]/_overview/OverViewDetail.tsx b/src/app/[chain]/nft/[collectionSymbol]/[itemSymbol]/_overview/OverViewDetail.tsx
@@ -5,7 +5,7 @@ import addressFormat, { hiddenAddress } from '@_utils/urlUtils';
 import Copy from '@_components/Copy';
 import Image from 'next/image';
 import { ItemSymbolDetailOverview } from '../type';
-import { isMainNet } from '@_utils/isMainNet';
+import { checkMainNet } from '@_utils/isMainNet';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { CollectionSymbol, ItemSymbol } from 'global';
@@ -18,6 +18,7 @@ export interface OverViewDetailProps {
 export default function OverViewDetail(props: OverViewDetailProps) {
   const params = useParams<CollectionSymbol & ItemSymbol>();
   const { overview, onHolderClick } = props;
+  const isMainNet = checkMainNet();
   return (
     <ul className="nft-detail-ul">
       <li className="nft-detail-item">

diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/columns.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/columns.tsx
@@ -40,11 +40,13 @@ export default function getColumns({ timeFormat, handleTimeChange, chain }): Col
       render: (text, record) => (
         <div className="flex items-center">
           {record.status === TTransactionStatus.fail && <IconFont className="ml-1" type="question-circle-error" />}
-          <Link
-            className="block text-xs leading-5 text-link"
-            href={`/${chain}/tx/${text}?blockHeight=${record.blockHeight}`}>
-            {text}
-          </Link>
+          <EPTooltip title={text} mode="dark">
+            <Link
+              className="block w-[120px] truncate text-xs leading-5 text-link"
+              href={`/${chain}/tx/${text}?blockHeight=${record.blockHeight}`}>
+              {text}
+            </Link>
+          </EPTooltip>
           <Copy value={text} />
         </div>
       ),

diff --git a/src/pageComponents/home/_components/Latest/index.css b/src/pageComponents/home/_components/Latest/index.css
@@ -1,7 +1,7 @@
 .home-latest {
   @apply bg-white rounded-[8px] shadow-[0_8px_16px_0_rgba(0,0,0,0.04)];
   .title {
-    @apply px-4 py-[15px] h-[52px] text-[14px] font-[500] leading-[22px] text-base-100 shadow-[0_-1px_0_0_#E6E6E6_inset];
+    @apply px-4 py-[15px] h-[52px] text-[16px] font-[500] leading-[24px] text-base-100 shadow-[0_-1px_0_0_#E6E6E6_inset];
   }
   .content {
     @apply h-[480px] px-4 overflow-auto;
@@ -18,26 +18,29 @@
         .text {
           @apply flex flex-col justify-center;
           .height {
-            @apply text-[12px] font-[400] leading-5 text-link max-w-[99px] overflow-hidden text-ellipsis whitespace-nowrap;
+            @apply text-[14px] font-[400] leading-[22px] text-link max-w-[99px] overflow-hidden text-ellipsis whitespace-nowrap;
           }
           .time {
-            @apply text-[10px] font-[400] leading-[18px] text-base-200;
+            @apply text-xs font-[400] leading-5 text-base-200;
           }
         }
       }
       .middle {
         @apply flex flex-wrap flex-col justify-center w-[203px];
         .producer {
-          @apply text-[12px] font-[400] leading-5 w-full overflow-hidden text-ellipsis whitespace-nowrap;
+          @apply text-[14px] font-[400] leading-[22px] w-full overflow-hidden text-ellipsis whitespace-nowrap;
           a {
             @apply text-link ml-2;
           }
         }
         .txns {
-          @apply text-[10px] font-[400] leading-[18px] text-base-200;
+          @apply text-[14px] font-[400] leading-[22px] text-base-200;
           a {
             @apply text-link mr-1;
           }
+          .time {
+            @apply text-xs leading-5;
+          }
         }
         .from,
         .to {
@@ -59,7 +62,7 @@
     }
   }
   .link {
-    @apply rounded-b-lg px-4 py-[14px] flex justify-center align-middle text-[10px] font-[500] leading-[18px] text-base-200 bg-[#F7F8FA] shadow-[0_1px_0_0_#E6E6E6_inset] hover:text-link;
+    @apply rounded-b-lg px-4 py-[16px] flex justify-center align-middle text-[12px] font-[500] leading-5 text-base-200 bg-[#F7F8FA] shadow-[0_1px_0_0_#E6E6E6_inset] hover:text-link;
     a {
       @apply hover:text-link text-base-200;
       &:hover {