Refactor/nextjs others ssr

build/common.js

@@ -1,7 +1,12 @@
 const rewritesConfig = require('./rewrites/index');
 module.exports = {
-  reactStrictMode: true,
+  // `Warning: findDOMNode is deprecated in StrictMode.` when use antd
+  reactStrictMode: false,
   concurrentFeatures: true,
+  i18n: {
+    locales: ['en'],
+    defaultLocale: 'en',
+  },
   async rewrites() {
     return rewritesConfig;
   },

build/plugin.js

@@ -19,6 +19,8 @@ module.exports = [
             '@app-prefix': NEXT_PUBLIC_CSS_EXAMPLE_PREFIX,
             '@ant-prefix': NEXT_PUBLIC_CSS_APP_PREFIX,
           }),
+          lessVarsFilePath: 'src/assets/theme/color.less', // optional
+          lessVarsFilePathAppendToEndOfContent: false, // optional
         },
       },
       images: {

package.json

@@ -28,7 +28,7 @@
     "aelf-bridge": "^0.0.9",
     "aelf-sdk": "3.2.40",
     "aelf-sdk-cross-chain": "^1.0.14",
-    "antd": "4.21.0",
+    "antd": "^4.23.6",
     "apisauce": "^0.16.0",
     "axios": "^0.19.0",
     "axios-hooks": "^3.1.5",

src/assets/theme/color.less

@@ -51,7 +51,7 @@
 //@media (min-width: 1200px) { ... }#F7F8F9
 
 // @import '~antd/lib/style/themes/default.less';
-// @import '~antd/dist/antd.less';
+// @import '~antd/dist/antd.css';
 
 // New UI start ---
 
@@ -127,6 +127,7 @@
 @fair-pink: #ffeded;
 @wild-sand: #f5f5f5;
 @athens-gray: #f7f8fa;
+@manatee: #8b92a3;
 
 //@borderColor: #d9d9d9;
 

src/assets/theme/customize.less

@@ -1,15 +1,3 @@
-@font-face {
-  font-family: Roboto-Bold;
-  src: url('/font/Roboto-Bold.ttf');
-}
-@font-face {
-  font-family: Roboto-Medium;
-  src: url('/font/Roboto-Medium.ttf');
-}
-@font-face {
-  font-family: Roboto-Regular;
-  src: url('/font/Roboto-Regular.ttf');
-}
 html {
   --@{app-prefix}-primary-color: #4d6aec;
   --@{app-prefix}-primary-color-hover: #506ef5;

src/components/Breadcrumb/Breadcrumb.tsx

@@ -26,7 +26,7 @@ type PathSnippetDto =
   | 'resourceDetail';
 
 // if you want to hide the Breadcrumb
-const NO_BREADCRUMB_PAGES = ['/vote', '/proposal', '/address', '/contract', '/token'];
+const NO_BREADCRUMB_PAGES = ['/vote', '/proposal', '/address', '/contracts', '/token'];
 const noBreadcrumb = (pathname: string) => {
   const isMainPage = pathname === '/';
   return NO_BREADCRUMB_PAGES.filter((item) => pathname.includes(item)).length === 0 && !isMainPage;
@@ -55,19 +55,18 @@ const BREADCRUMB_NAME_MAP: {
   '/vote': 'Vote',
   '/resource': 'Resource',
   '/resourceDetail': 'Resource Detail List',
-  '/contract': 'Contract',
+  '/contracts': 'Contract',
   '/proposal': 'Proposal',
   '/token': 'Token',
   myvote: 'My Vote',
   '/search-invalid': '',
 };
-
+// I don't know why /new-socket can reach here
 const DO_NOT_DISPLAY_PATH = [
+  'new-socket',
   '/_error',
   '/transaction-list',
-  '/txs',
   '/unconfirmedTxs',
-  '/tx/',
   '/blocks',
   '/unconfirmedBlocks',
 ];
@@ -109,6 +108,10 @@ const BREADCRUMB_NAMES_TATE = {
       url: ['/txs', false],
       name: [BREADCRUMB_NAME_MAP['/unconfirmedTxs'], BREADCRUMB_NAME_MAP['/unconfirmedTx']],
     },
+    accounts: {
+      url: ['/txs', false],
+      name: [BREADCRUMB_NAME_MAP['/txs'], BREADCRUMB_NAME_MAP['/address']],
+    },
     address: {
       url: ['/txs', false],
       name: [BREADCRUMB_NAME_MAP['/txs'], BREADCRUMB_NAME_MAP['/address']],
@@ -130,8 +133,8 @@ const BREADCRUMB_NAMES_TATE = {
       name: [BREADCRUMB_NAME_MAP['/resource'], BREADCRUMB_NAME_MAP['/resourceDetail']],
     },
     contract: {
-      url: ['/contract'],
-      name: [BREADCRUMB_NAME_MAP['/contract']],
+      url: ['/contracts'],
+      name: [BREADCRUMB_NAME_MAP['/contracts']],
     },
     proposal: {
       url: ['/proposal', false],
@@ -197,7 +200,6 @@ class BrowserBreadcrumb extends Component<PropsDto> {
       }
 
       const STATE = BREADCRUMB_NAMES_TATE.states[BREADCRUMB_NAMES_TATE.currentState as PathSnippetDto];
-
       if (typeof window !== 'undefined' && !STATE) {
         this.props.router.push('/');
         return;
@@ -265,16 +267,19 @@ class BrowserBreadcrumb extends Component<PropsDto> {
   }
 
   render() {
-    const pathname = this.props.router.asPath;
-    // I don't know why /new-socket can reach here
+    const pathname = this.props.router.asPath.split('?')[0];
+    // if someone add path '/contract' to favourite
     if (
       DO_NOT_DISPLAY_PATH.includes(pathname) ||
       pathname.includes('/tx/') ||
       pathname.includes('/txs') ||
       pathname.includes('/block/') ||
       pathname.includes('/search-invalid') ||
       pathname.includes('/search-failed') ||
-      pathname.includes('new-socket')
+      pathname.includes('/accounts') ||
+      pathname.includes('/contracts') ||
+      pathname.includes('/contract') ||
+      pathname.includes('/token')
     ) {
       return <></>;
     }
@@ -285,7 +290,6 @@ class BrowserBreadcrumb extends Component<PropsDto> {
 
     const className = noBreadcrumb(pathname) ? 'breadcrumb' : 'breadcrumb hide';
     const pathSnippets: string[] = pathname.split('/').filter((i) => i);
-
     const firstBreadcrumbItem = this.getFirstBreadcrumbItem();
     const extraBreadcrumbItems = this.getExtraBreadcrumbItems(pathSnippets, reloadUrl);
     const breadcrumbItems = ([] as JSX.Element[]).concat(firstBreadcrumbItem, extraBreadcrumbItems);

src/components/ChainSelect/ChainSelect.js

@@ -37,6 +37,7 @@ export default class ChainSelect extends Component {
     return (
       <div className="chain-select-container">
         <Select
+          aria-label="chain-select"
           className="chain-select common-select-wrapper"
           defaultValue={defaultValue}
           onChange={(v) => this.changeChain(v)}>

src/components/CopyButton/CopyButton.jsx → src/components/CopyButton/CopyButton.tsx

@@ -3,14 +3,14 @@ import copy from 'copy-to-clipboard';
 import { message } from 'antd';
 import IconFont from '../IconFont';
 
-export default function CopyButton({ value }) {
+export default function CopyButton({ value = '', onClick = undefined }) {
   const handleCopy = () => {
     try {
       copy(value);
-      message.success('Copied!');
+      message.success('Copied Successfully');
     } catch (e) {
       message.error('Copy failed, please copy by yourself.');
     }
   };
-  return <IconFont className="copy-btn" style={{ fontSize: 16 }} type="copy" onClick={handleCopy} />;
+  return <IconFont className="copy-btn" style={{ fontSize: 16 }} type="copy" onClick={onClick || handleCopy} />;
 }

src/components/Dividends/index.jsx → src/components/Dividends/index.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { Dropdown, Button, Menu } from 'antd';
 import { If, Then, Else } from 'react-if';
 import { DownOutlined } from '@ant-design/icons';
+import { numberFormatter } from 'utils/formater';
 
 const Dividends = (props) => {
   const { dividends, defaultSymbol, useButton = true, ...rest } = props;
@@ -41,7 +42,7 @@ const Dividends = (props) => {
       </Then>
       <Else>
         <div {...rest}>
-          {dividends[defaultKey] || 0}&nbsp;{defaultKey}
+          {numberFormatter(dividends[defaultKey]) || 0}&nbsp;{defaultKey}
         </div>
       </Else>
     </If>

src/components/Footer/Footer.tsx

@@ -44,7 +44,7 @@ const BrowserFooter = ({ headers }: IProps) => {
       <div className="footer-container">
         <div className="left">
           <div className="top">
-            <h4>AELF Explorer</h4>
+            <h1>AELF Explorer</h1>
             <p className="description">Decentralized Cloud Computing Blockchain Network</p>
           </div>
           <div className="bottom">

src/components/Footer/footer.styles.less

@@ -10,7 +10,7 @@
     .footer-container {
       .left {
         .top {
-          h4 {
+          h1 {
             color: @mine-shaft;
           }
           .description {
@@ -72,7 +72,7 @@
         justify-content: flex-start;
         align-items: flex-start;
         gap: 4px;
-        h4 {
+        h1 {
           color: white;
           font-family: 'Roboto Medium', sans-serif;
           font-weight: 400;
@@ -169,7 +169,7 @@
       .footer-container {
         .left {
           .top {
-            h4 {
+            h1 {
               color: @mine-shaft;
             }
             .description {

src/components/TableLayer/TableLayer.styles.less

@@ -7,15 +7,15 @@
   width: 100%;
   > .table-layer-block {
     min-width: 16px;
-    height: 45px;
+    height: 41px;
     border-bottom: @border-color2 1px solid !important;
   }
   .ant-table-wrapper {
     min-width: calc(100% - 32px);
     .ant-table-thead {
       tr {
         th {
-          font-family: 'Roboto-Medium';
+          font-family: 'Roboto-Medium', sans-serif;
           background: @bgBlankWhite !important;
           border-bottom: @border-color2 1px solid !important;
           font-weight: 400;
@@ -42,4 +42,9 @@
   background: white;
   border-radius: 4px;
   padding-bottom: 10px;
+  > .table-layer-block {
+    min-width: 8px;
+    height: 41px;
+    border-bottom: @border-color2 1px solid !important;
+  }
 }

src/components/TableLayer/TableLayer.jsx → src/components/TableLayer/TableLayer.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
-import useMobile from 'hooks/useMobile';
+import React, { useEffect } from 'react';
+import { isPhoneCheck, isPhoneCheckSSR } from 'utils/deviceCheck';
 
 require('./TableLayer.styles.less');
 export default function TableLayer({ children, className = '', ...props }) {
-  const isMobile = useMobile();
+  let isMobile = !!isPhoneCheckSSR(props.headers);
+  useEffect(() => {
+    isMobile = !!isPhoneCheck();
+  }, []);
   return (
     <div className={'table-layer ' + (isMobile ? 'mobile ' : '') + className} {...props}>
       <div className="table-layer-block" />

src/components/TransactionTable/TransactionTable.styles.less

@@ -7,7 +7,7 @@
     width: calc(100% - 32px);
     thead {
       th {
-        font-family: 'Roboto-Medium';
+        font-family: 'Roboto-Medium', sans-serif;
         background: @bgBlankWhite !important;
         border-bottom: @border-color2 1px solid !important;
         font-weight: 400;
@@ -111,26 +111,23 @@
     }
   }
 }
-.mobile {
-  .transaction-table {
-    padding: 0 0 10px;
-    background: transparent !important;
-    overflow-x: scroll;
-    .ant-table-wrapper {
-      min-width: 968px;
-    }
+.mobile.transaction-table {
+  padding: 0 0 10px;
+  overflow-x: scroll;
+  .ant-table-wrapper {
+    min-width: 968px;
   }
 }
 
 .transaction-tooltip {
   .ant-tooltip-content {
     width: 337.5px;
-    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 16px 0 rgb(0 0 0 / 8%), 0 4px 8px 0 rgb(0 0 0 / 8%);
     .ant-tooltip-inner {
       padding: 0 !important;
       background-color: white;
     }
-    .ant-tooltip-arrow:before {
+    .ant-tooltip-arrow::before {
       background-color: white;
     }
   }
@@ -144,7 +141,7 @@
       padding: 11px 20px 11px 22px;
       border-bottom: 1px solid @border-color2;
       font-size: 14px;
-      font-family: 'Roboto-Medium';
+      font-family: 'Roboto-Medium', sans-serif;
       line-height: 22px;
       color: @mine-shaft;
       a {
@@ -213,6 +210,6 @@
   }
   .ant-tooltip-content {
     width: 100%;
-    box-shadow: 0px 0px 100000px 100000px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 100000px 100000px rgb(0 0 0 / 60%);
   }
 }

src/components/TransactionTable/TransactionTable.jsx → src/components/TransactionTable/TransactionTable.tsx

@@ -6,20 +6,25 @@ import { get } from 'utils/axios';
 import TableLayer from '../TableLayer/TableLayer';
 import ColumnConfig from './columnConfig';
 require('./TransactionTable.styles.less');
-export default function TransactionTable({ dataLoading, dataSource }) {
+export default function TransactionTable({ dataLoading, dataSource, headers }) {
   const [price, setPrice] = useState(0);
   const [timeFormat, setTimeFormat] = useState('Age');
 
   const columns = useMemo(
     () =>
-      ColumnConfig(timeFormat, price, () => {
-        setTimeFormat(timeFormat === 'Age' ? 'Date Time' : 'Age');
-      }),
+      ColumnConfig(
+        timeFormat,
+        price,
+        () => {
+          setTimeFormat(timeFormat === 'Age' ? 'Date Time' : 'Age');
+        },
+        headers,
+      ),
     [timeFormat, price],
   );
 
   useEffectOnce(() => {
-    get(ELF_REALTIME_PRICE_URL, { fsym: 'ELF', tsyms: 'USD,BTC,CNY' }).then((price) => setPrice(price));
+    get(ELF_REALTIME_PRICE_URL, { fsym: 'ELF', tsyms: 'USD,BTC,CNY' }).then((res) => setPrice(res));
   });
   return (
     <TableLayer className="transaction-table">