V2.0.0 UI update by simon-bai · Pull Request #391 · AelfScanProject/aelfscan-web

simon-bai · 2024-11-26T10:50:19Z

V2.0.0 UI update. close #390

feat: change img

feat: select center

feat: home style done

feat: nfts tokens and txdetail

feat: nft add #

feat: address detail

feat: address detail add qrcode

feat: address logs

feat: address icon

feat: chart style change

feat: font and contract publish

feat: token value add $

fix: fix search jump clear

fix: fix file upload

feat: change help icon

fix: fix font wight

ui adjust

fix: fix tooltip style

fix ui walkthrough problem

differentiate testnet

work-kevin-flynn · 2024-11-26T11:48:25Z

        '00auto': '0 0 auto',
      },
+      screens: {
+        'min-769': '769px',


(tofix) should follow standard breakpoint conventions like https://getbootstrap.com/docs/5.0/layout/breakpoints/

screens: { 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px' }

for this case, perhaps we do a custom breakpoint md: 769px

work-kevin-flynn · 2024-11-26T11:53:58Z

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+import AdsCarousel from './_components/ScrollAds';


(tofix) no clear reason to have _components instead of components? should rename _* to *

work-kevin-flynn · 2024-11-26T11:54:30Z

-      </div>
-
-      <div className="mx-auto box-border w-full max-w-[1440px] px-4 min-[769px]:px-6 min-[993px]:min-w-[200px] min-[993px]:px-10">
+      <BannerContainer />


Good cleanup!

work-kevin-flynn · 2024-11-26T11:55:59Z

@@ -0,0 +1,36 @@
+import { useAppSelector } from '@_store';


(tofix) @_store is confusing. Should change tsconfig to be "@/": ["src/"]. Common conventions:

@ for source folder

~ for root folder

work-kevin-flynn · 2024-11-26T12:22:36Z

 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-csharp';
 import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-tomorrow';


(tofix) do on-demand dynamic import if there are more than >1 theme, or just remove -github

work-kevin-flynn · 2024-11-26T12:25:28Z

  }, [width]);
  const isLG = useMemo(() => {
-    return width < 1024;
+    return width < 1025;


(tofix) avoid magic numbers. Those values should be exported figma design tokens similar to what I wrote in tailwind config { lg: '1024' }

work-kevin-flynn · 2024-11-26T12:41:33Z

      const { tokens, nfts, accounts, contracts, blocks } = res;
      if (tokens.length) {
-        router.push(`/${defaultChain}/token/${tokens[0].symbol}`);
+        router.push(`/${MULTI_CHAIN}/token/${tokens[0].symbol}`);


(tofix) multiple nested ifs are really hard to follow. Refactor this block out into a separate util getRouteFromParams method:

getRouteFromParams(res: ISearchResponse): string { // check for tokens, nfts, accounts etc to assign a route return route; }

then write tests for the method

work-kevin-flynn · 2024-11-26T12:44:36Z

  return isMainNet ? 'tDVV' : 'tDVW';
 };
+
+export const useCurrentPageChain = () => {


(tofix) add UT as it's a new hook

work-kevin-flynn · 2024-11-26T12:49:28Z

-    { ...commonColumns[2], width: 384 },
-    { ...commonColumns[3], width: 384 },
-  ];
+export default function getColumns(currentPage, pageSize): ColumnsType<HolderItem> {


getColumns is just re-exported getCommonColumns with same parameters here. Why not export function getCommonColumns(currentPage, pageSize): ColumnsType<HolderItem> ?

work-kevin-flynn · 2024-11-26T13:06:00Z

  Testnet: 'https://t.me/aelfscantest_bot',
 };
+
+export const SEARCH_TITLE = {


(tofix) rename file to const.ts or constants.ts later

work-kevin-flynn · 2024-11-26T13:10:46Z

 export const thousandsNumber = (number: string | number): string => {
  const num = Number(number);
-  if (number === '' || Number.isNaN(num) || number === null) return '-';
+  if (number === '' || Number.isNaN(num) || number === null) return '--';


(tofix) I see alot of '--' so it's better to make this a const or ENUM for formatting.

work-kevin-flynn · 2024-11-26T13:11:51Z

  };

  const chainChange = (value: string) => {
+    console.log(value, 'value');


remove console.log for production builds

work-kevin-flynn · 2024-11-26T13:12:36Z

          },
        }}
-        showMultiChain={chain === MULTI_CHAIN}
+        showMultiChain={true}


just showMultiChain will do, unless you expect the condition to change many times

work-kevin-flynn · 2024-11-26T13:13:36Z

      defaultPageSize={Number(ps)}
      defaultPageType={defaultPageType}
-      defaultChain={defaultChain}
+      defaultChain={defaultChain || ''}


move to L14 to group fallback values in 1 place const defaultChain = searchParams['chain'] || MULTI_CHAIN || ''

work-kevin-flynn · 2024-11-26T13:17:11Z

  }
  const selectFile = filtered[0];
  const newPath = `${path}${selectFile.name}/`;
-  // if (index === names.length - 1) {


Delete the commented out block. You have git history for changes.

work-kevin-flynn · 2024-11-26T13:22:37Z

    onChange(e.node.key.split('#'));
  };
+
+  const ismd = useMD();


change useMD to useBreakpointMD to be descriptive and check other usages too

work-kevin-flynn · 2024-11-26T13:29:26Z

+  const chainArr = useMemo(() => {
+    return chainList.map((ele) => ele.chainList_id);
+  }, [chainList]);
+  console.log(chainArr, props, 'props');


remove console.log in production builds

work-kevin-flynn · 2024-11-26T13:32:15Z

-  const { chain } = useParams();
+  const params = useSearchParams();
+  const chain = params.get('chain') || MULTI_CHAIN;
  const selectChain = useMemo(() => {


double check that you actually need useMemo here if the param is directly from nextjs hook

work-kevin-flynn · 2024-11-26T13:35:05Z


  return (
-    <div className="chain-select-container mr-4 w-full !py-0" id="chain-select-container">
+    <div className="chain-select-container w-full !py-0" id="chain-select-container" suppressHydrationWarning>


(tofix) add a comment to explain why the need to supress warnings here

work-kevin-flynn · 2024-11-26T13:45:49Z

+  }, [name, showContractAddress, type]);

  return type === AddressType.address || showContractAddress || (type === AddressType.Contract && !name) ? (
    address ? (


(tofix) move the jsx code into functions like renderAddress and renderName and convert ternary conditions to if-else. This is hard to read.

if (type === AddressType.address || showContractAddress || (type === AddressType.Contract && !name) { return address ? renderAddress() : '-'; } else { return name ? renderName() : '-'; }

please enable https://eslint.org/docs/latest/rules/no-nested-ternary rules for eslint

work-kevin-flynn · 2024-11-26T13:49:01Z

    )
  ) : name ? (
-    <div className="address w-full truncate">
+    <div className="address flex w-full truncate">


(tofix)

I'm getting a warning from eslint-plugin-tailwindcss. extract with @apply later

work-kevin-flynn · 2024-11-26T13:49:35Z

+import clsx from 'clsx';
+import QrCodeModal from './qrCode';
+
+export default function MultiChain({


(tofix) add UT for new component

work-kevin-flynn · 2024-11-26T13:50:02Z

@@ -0,0 +1,26 @@
+import IconFont from '@_components/IconFont';


(tofix) same as above

preview code optimization

simon-bai and others added 30 commits November 12, 2024 18:06

fix: fix search

ffd4290

fix: fix search chain

f765a8f

feat: style change

d63105b

feat: change img

2648e7f

Merge pull request #364 from AelfScanProject/feature/tg-bot

2631aee

feat: change img

feat: select center

35d246f

Merge pull request #365 from AelfScanProject/feature/tg-bot

54c4af9

feat: select center

feat: home style done

ebd446d

Merge pull request #366 from AelfScanProject/feature/tg-bot

6a9ad62

feat: home style done

feat: nfts tokens and txdetail

2ebe765

Merge pull request #367 from AelfScanProject/feature/tg-bot

6b9c4e4

feat: nfts tokens and txdetail

feat: nft add #

8bbc1e9

feat: change icon

29a8aa9

Merge pull request #368 from AelfScanProject/feature/tg-bot

cab4edd

feat: nft add #

feat: address detail

565c7a6

Merge pull request #369 from AelfScanProject/feature/tg-bot

f5fdd42

feat: address detail

feat: address detail add qrcode

62ea376

Merge pull request #370 from AelfScanProject/feature/tg-bot

45987a6

feat: address detail add qrcode

feat: address logs

2ca127e

Merge pull request #371 from AelfScanProject/feature/tg-bot

88345cf

feat: address logs

feat: address icon

c95ea92

feat: nft token detail

b75a64b

Merge pull request #372 from AelfScanProject/feature/tg-bot

be78e9a

feat: address icon

feat: chart style change

09b76a4

Merge pull request #373 from AelfScanProject/feature/tg-bot

dd4266d

feat: chart style change

feat: font and contract publish

d9edcb9

Merge pull request #374 from AelfScanProject/feature/tg-bot

548e2ca

feat: font and contract publish

feat: token value add $

7b4fa6d

Merge pull request #375 from AelfScanProject/feature/tg-bot

5bff6f2

feat: token value add $

fix: fix search jump clear

9296d6e

simon-bai and others added 20 commits November 23, 2024 11:06

Merge pull request #376 from AelfScanProject/feature/tg-bot

fc0b66f

fix: fix search jump clear

fix: fix file upload

cd0adb6

Merge pull request #377 from AelfScanProject/feature/tg-bot

8a88d9f

fix: fix file upload

feat: change help icon

24ce203

Merge pull request #378 from AelfScanProject/feature/tg-bot

250cc1a

feat: change help icon

fix: fix font wight

45feb73

Merge pull request #379 from AelfScanProject/feature/tg-bot

d75d99e

fix: fix font wight

Merge pull request #380 from AelfScanProject/pre-release/v1.12.0

52e0279

ui adjust

fix: fix tooltip style

b67d925

Merge pull request #381 from AelfScanProject/feature/tg-bot

4c4198f

fix: fix tooltip style

fix: fix ui walkthrough problem

706724f

fix: fix style

ec5d3d4

fix: fix ico and chainSelect

9063c21

fix: fix network switch

e236823

fix: fix network switch

79af081

fix: fix body scroll

194ff03

Merge pull request #387 from AelfScanProject/feature/tg-bot

352cc87

fix ui walkthrough problem

feat: differentiate testnet

25222e5

fix: fix contracts list style

3579d23

Merge pull request #389 from AelfScanProject/feature/tg-bot

7ed3f14

differentiate testnet

work-kevin-flynn reviewed Nov 26, 2024

View reviewed changes

simon-bai and others added 3 commits November 26, 2024 22:25

fix: preview code optimization

dc1d112

fix: remove moment

7c2c0ac

Merge pull request #392 from AelfScanProject/feature/tg-bot

17a77e4

preview code optimization

work-kevin-flynn self-requested a review November 26, 2024 14:48

work-kevin-flynn approved these changes Nov 26, 2024

View reviewed changes

simon-bai merged commit ba7aebf into master Nov 26, 2024

		@@ -0,0 +1,18 @@
		import { memo } from 'react';
		import AdsCarousel from './_components/ScrollAds';

		@@ -0,0 +1,26 @@
		import IconFont from '@_components/IconFont';

Conversation

simon-bai commented Nov 26, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants