From 8eccf4fba75893bbcefb6ef3deb54fa3becaedad Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Tue, 15 Nov 2022 16:38:28 +0800
Subject: [PATCH 01/42] feat: remove useless useGlobal code, use useGlobalData
 hook instead

---
 src/app/containers/Footer/Currency.tsx   |   10 +-
 src/app/containers/TokenDetail/index.tsx |    4 -
 src/app/containers/Tokens/index.tsx      |    5 -
 src/app/index.tsx                        | 1072 +++++++++++-----------
 src/utils/hooks/useGlobal.ts             |   45 +-
 5 files changed, 523 insertions(+), 613 deletions(-)

diff --git a/src/app/containers/Footer/Currency.tsx b/src/app/containers/Footer/Currency.tsx
index c78ae9d9f..237b282d4 100644
--- a/src/app/containers/Footer/Currency.tsx
+++ b/src/app/containers/Footer/Currency.tsx
@@ -6,21 +6,21 @@ import styled from 'styled-components/macro';
 import { trackEvent } from 'utils/ga';
 import { ScanEvent } from 'utils/gaConstants';
 import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants';
-import { useGlobal } from 'utils/hooks/useGlobal';
+import { useGlobalData } from 'utils/hooks/useGlobal';
 
 export function Currency() {
   const { t } = useTranslation();
-  const { data, setGlobalData } = useGlobal();
+  const [globalData, setGlobalData] = useGlobalData();
 
   const handleCurrencyChange = currency => {
     localStorage.setItem(LOCALSTORAGE_KEYS_MAP.currency, currency);
     trackEvent({
       category: ScanEvent.preference.category,
       action: ScanEvent.preference.action.changeCurrency,
-      label: data.currency,
+      label: globalData.currency,
     });
     setGlobalData({
-      ...data,
+      ...globalData,
       currency,
     });
   };
@@ -69,7 +69,7 @@ export function Currency() {
         </g>
       </svg>
       <Select
-        value={data.currency}
+        value={globalData.currency}
         onChange={handleCurrencyChange}
         disableMatchWidth
         size="small"
diff --git a/src/app/containers/TokenDetail/index.tsx b/src/app/containers/TokenDetail/index.tsx
index a5e402b2a..1c0819ecf 100644
--- a/src/app/containers/TokenDetail/index.tsx
+++ b/src/app/containers/TokenDetail/index.tsx
@@ -17,20 +17,16 @@ import { MenuWrapper } from '../AddressContractDetail/AddressDetailPage';
 import { Dropdown, Menu } from '@cfxjs/antd';
 import descIcon from 'images/table-desc.svg';
 
-// import { useGlobal } from 'utils/hooks/useGlobal';
-
 interface RouteParams {
   tokenAddress: string;
 }
 
 export function TokenDetail() {
   const { t } = useTranslation();
-  // const { data: globalData } = useGlobal();
   const { tokenAddress } = useParams<RouteParams>();
   const params = {
     address: tokenAddress,
     fields: ['iconUrl', 'transferCount', 'price', 'totalPrice', 'quoteUrl'],
-    // currency: globalData.currency, // @todo wait for new api handler
   };
   let { data } = useTokenQuery(params, !!tokenAddress);
 
diff --git a/src/app/containers/Tokens/index.tsx b/src/app/containers/Tokens/index.tsx
index 077e84a05..b55366420 100644
--- a/src/app/containers/Tokens/index.tsx
+++ b/src/app/containers/Tokens/index.tsx
@@ -9,7 +9,6 @@ import styled from 'styled-components/macro';
 import { Tooltip } from 'app/components/Tooltip/Loadable';
 import { CFX_TOKEN_TYPES } from 'utils/constants';
 import queryString from 'query-string';
-// import { useGlobal } from 'utils/hooks/useGlobal';
 import { TablePanel as TablePanelNew } from 'app/components/TablePanelNew';
 import { useLocation } from 'react-router-dom';
 
@@ -22,7 +21,6 @@ interface RouteParams {
 export function Tokens() {
   const location = useLocation();
   const { t } = useTranslation();
-  // const { data: globalData } = useGlobal();
   const { tokenType = CFX_TOKEN_TYPES.erc20 } = useParams<RouteParams>();
   const { orderBy } = queryString.parse(location.search);
 
@@ -72,7 +70,6 @@ export function Tokens() {
       'erc20TransferCount',
     ],
   })}`;
-  // let url = `/stat/tokens/list?transferType=${CFX_TOKEN_TYPES.erc20}&reverse=true&orderBy=totalPrice&fields=transferCount,icon,price,totalPrice,quoteUrl,transactionCount,erc20TransferCount&currency=${globalData.currency}`; // @todo wait for new api handler
   let title = t(translations.header.tokens20);
 
   if (
@@ -104,7 +101,6 @@ export function Tokens() {
     }&reverse=true&orderBy=securityCredits&${queryString.stringify({
       fields: ['transferCount', 'iconUrl', 'transactionCount'],
     })}`;
-    // url = `/stat/tokens/list?transferType=${CFX_TOKEN_TYPES.erc721}&reverse=true&orderBy=transferCount&fields=transferCount,icon,transactionCount&currency=${globalData.currency}`; // @todo wait for new api handler
     title = t(translations.header.tokens721);
   }
 
@@ -137,7 +133,6 @@ export function Tokens() {
     }&reverse=true&orderBy=securityCredits&${queryString.stringify({
       fields: ['transferCount', 'iconUrl', 'transactionCount'],
     })}`;
-    // url = `/stat/tokens/list?transferType=${CFX_TOKEN_TYPES.erc1155}&reverse=true&orderBy=transferCount&fields=transferCount,icon,transactionCount&currency=${globalData.currency}`; // @todo wait for new api handler
     title = t(translations.header.tokens1155);
   }
 
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 3b557f484..654194809 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -26,7 +26,7 @@ import { translations } from 'locales/i18n';
 import { media } from 'styles/media';
 import { GlobalStyle } from 'styles/global-styles';
 import { TxnHistoryProvider } from 'utils/hooks/useTxnHistory';
-import { GlobalProvider, useGlobalData } from 'utils/hooks/useGlobal';
+import { useGlobalData } from 'utils/hooks/useGlobal';
 import { reqProjectConfig } from 'utils/httpRequest';
 import { LOCALSTORAGE_KEYS_MAP, NETWORK_ID } from 'utils/constants';
 import { formatAddress, isSimplyBase32Address, isAddress } from 'utils';
@@ -314,580 +314,538 @@ export function App() {
     });
   }, []);
 
-  // @todo, add loading for request frontend config info
   return (
-    <GlobalProvider>
-      <ConfigProvider locale={i18n.language.includes('zh') ? zhCN : enUS}>
-        <TxnHistoryProvider
-          value={{
-            config: {
-              // txn history record i18n handler
-              convert: info => {
-                try {
-                  let data = JSON.parse(info);
-                  return t(
-                    translations.connectWallet.notify.action[data.code],
-                    data,
-                  );
-                } catch (e) {}
-              },
+    <ConfigProvider locale={i18n.language.includes('zh') ? zhCN : enUS}>
+      <TxnHistoryProvider
+        value={{
+          config: {
+            // txn history record i18n handler
+            convert: info => {
+              try {
+                let data = JSON.parse(info);
+                return t(
+                  translations.connectWallet.notify.action[data.code],
+                  data,
+                );
+              } catch (e) {}
             },
+          },
+        }}
+      >
+        <SWRConfig
+          value={{
+            // disable auto polling, reconnect or retry
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+            refreshInterval: 0,
+            shouldRetryOnError: false,
+            errorRetryCount: 0,
           }}
         >
-          <SWRConfig
-            value={{
-              // disable auto polling, reconnect or retry
-              revalidateOnFocus: false,
-              revalidateOnReconnect: false,
-              refreshInterval: 0,
-              shouldRetryOnError: false,
-              errorRetryCount: 0,
-            }}
-          >
-            <BrowserRouter>
-              <CfxProvider
-                theme={{
-                  breakpoints: {
-                    xs: {
-                      min: '0',
-                      max: '600px',
-                    },
-                    sm: {
-                      min: '600px',
-                      max: '1024px',
-                    },
-                    md: {
-                      min: '1024px',
-                      max: '1280px',
-                    },
-                    lg: {
-                      min: '1280px',
-                      max: '1440px',
-                    },
-                    xl: {
-                      min: '1440px',
-                      max: '10000px',
-                    },
+          <BrowserRouter>
+            <CfxProvider
+              theme={{
+                breakpoints: {
+                  xs: {
+                    min: '0',
+                    max: '600px',
+                  },
+                  sm: {
+                    min: '600px',
+                    max: '1024px',
+                  },
+                  md: {
+                    min: '1024px',
+                    max: '1280px',
                   },
-                }}
+                  lg: {
+                    min: '1280px',
+                    max: '1440px',
+                  },
+                  xl: {
+                    min: '1440px',
+                    max: '10000px',
+                  },
+                },
+              }}
+            >
+              <CssBaseline />
+              <Helmet
+                titleTemplate="%s - ConfluxScan"
+                defaultTitle="ConfluxScan"
               >
-                <CssBaseline />
-                <Helmet
-                  titleTemplate="%s - ConfluxScan"
-                  defaultTitle="ConfluxScan"
-                >
-                  <meta
-                    name="description"
-                    content={t(translations.metadata.description)}
-                  />
-                </Helmet>
-                {loading ? (
-                  <StyledMaskWrapper>
-                    {/* <Spin spinning={loading} tip="Welcome to ConfluxScan" /> */}
-                    <Loading></Loading>
-                  </StyledMaskWrapper>
-                ) : (
-                  <ScrollToTop>
-                    <Header />
-                    <Main key={lang}>
-                      <>
-                        <Switch>
-                          <Route exact path="/" component={HomePage} />
-                          <Route
-                            exact
-                            path="/packing/:txHash"
-                            component={PackingPage}
-                          />
-                          <Route
-                            exact
-                            path="/notfound/:contractAddress"
-                            component={NotFoundAddressPage}
-                          />
-                          {/* <Route exact path="/contract" component={Contract} /> */}
-                          <Route
-                            exact
-                            path={[
-                              '/contract-info/:contractAddress',
-                              '/token-info/:contractAddress',
-                            ]}
-                            render={(routeProps: any) => {
-                              const path = routeProps.match.path.match(
-                                /(\/.*\/)/,
-                              )[1];
-
-                              const address =
-                                routeProps.match.params.contractAddress;
-
-                              if (isSimplyBase32Address(address)) {
-                                return <Contract {...routeProps} />;
+                <meta
+                  name="description"
+                  content={t(translations.metadata.description)}
+                />
+              </Helmet>
+              {loading ? (
+                <StyledMaskWrapper>
+                  {/* <Spin spinning={loading} tip="Welcome to ConfluxScan" /> */}
+                  <Loading></Loading>
+                </StyledMaskWrapper>
+              ) : (
+                <ScrollToTop>
+                  <Header />
+                  <Main key={lang}>
+                    <>
+                      <Switch>
+                        <Route exact path="/" component={HomePage} />
+                        <Route
+                          exact
+                          path="/packing/:txHash"
+                          component={PackingPage}
+                        />
+                        <Route
+                          exact
+                          path="/notfound/:contractAddress"
+                          component={NotFoundAddressPage}
+                        />
+                        {/* <Route exact path="/contract" component={Contract} /> */}
+                        <Route
+                          exact
+                          path={[
+                            '/contract-info/:contractAddress',
+                            '/token-info/:contractAddress',
+                          ]}
+                          render={(routeProps: any) => {
+                            const path = routeProps.match.path.match(
+                              /(\/.*\/)/,
+                            )[1];
+
+                            const address =
+                              routeProps.match.params.contractAddress;
+
+                            if (isSimplyBase32Address(address)) {
+                              return <Contract {...routeProps} />;
+                            } else {
+                              if (isAddress(address)) {
+                                return (
+                                  <Redirect
+                                    to={`${path}${formatAddress(address)}`}
+                                  />
+                                );
                               } else {
-                                if (isAddress(address)) {
-                                  return (
-                                    <Redirect
-                                      to={`${path}${formatAddress(address)}`}
-                                    />
-                                  );
-                                } else {
-                                  return (
-                                    <Redirect to={`/notfound/${address}`} />
-                                  );
-                                }
+                                return <Redirect to={`/notfound/${address}`} />;
                               }
-                            }}
-                          />
-                          <Route
-                            exact
-                            path="/contracts"
-                            component={Contracts}
-                          />
-                          <Route
-                            exact
-                            path="/registered-contracts"
-                            component={RegisteredContracts}
-                          />
-                          <Route
-                            exact
-                            path="/token/:tokenAddress"
-                            render={(routeProps: any) => {
-                              const address =
-                                routeProps.match.params.tokenAddress;
-
-                              if (isSimplyBase32Address(address)) {
-                                return <TokenDetail {...routeProps} />;
+                            }
+                          }}
+                        />
+                        <Route exact path="/contracts" component={Contracts} />
+                        <Route
+                          exact
+                          path="/registered-contracts"
+                          component={RegisteredContracts}
+                        />
+                        <Route
+                          exact
+                          path="/token/:tokenAddress"
+                          render={(routeProps: any) => {
+                            const address =
+                              routeProps.match.params.tokenAddress;
+
+                            if (isSimplyBase32Address(address)) {
+                              return <TokenDetail {...routeProps} />;
+                            } else {
+                              if (isAddress(address)) {
+                                return (
+                                  <Redirect
+                                    to={`/token/${formatAddress(address)}`}
+                                  />
+                                );
                               } else {
-                                if (isAddress(address)) {
-                                  return (
-                                    <Redirect
-                                      to={`/token/${formatAddress(address)}`}
-                                    />
-                                  );
-                                } else {
-                                  return (
-                                    <Redirect to={`/notfound/${address}`} />
-                                  );
-                                }
+                                return <Redirect to={`/notfound/${address}`} />;
                               }
-                            }}
-                          />
-                          {/* compatible for previous user bookmark */}
-                          <Route
-                            exact
-                            path={[
-                              '/blocks-and-transactions',
-                              '/blockchain',
-                              '/blockchain/blocks-and-transactions',
-                            ]}
-                            render={() => <Redirect to="/blockchain/blocks" />}
-                          />
-                          <Route
-                            exact
-                            path="/blockchain/blocks"
-                            component={Blocks}
-                          />
-                          <Route
-                            exact
-                            path="/blockchain/transactions"
-                            component={Transactions}
-                          />
-                          <Route
-                            exact
-                            path="/blockchain/cfx-transfers"
-                            component={CFXTransfers}
-                          />
-                          <Route
-                            exact
-                            path="/blockchain/accounts"
-                            component={Accounts}
-                          />
-                          <Route exact path="/tokens" component={Tokens} />
-                          <Route
-                            exact
-                            path="/tokens/:tokenType"
-                            render={(routeProps: any) => {
-                              if (routeProps.match.params.tokenType)
-                                routeProps.match.params.tokenType = routeProps.match.params.tokenType.toUpperCase();
-                              return <Tokens {...routeProps} />;
-                            }}
-                          />
-                          <Route exact path="/sponsor" component={Sponsor} />
-                          <Route
-                            exact
-                            path="/contract-deployment"
-                            component={ContractDeployment}
-                          />
-                          <Route
-                            exact
-                            path="/contract-verification"
-                            component={ContractVerification}
-                          />
-                          <Route
-                            exact
-                            path="/sponsor/:contractAddress"
-                            render={(routeProps: any) => {
-                              const address =
-                                routeProps.match.params.contractAddress;
-
-                              if (isSimplyBase32Address(address)) {
-                                return <Sponsor {...routeProps} />;
+                            }
+                          }}
+                        />
+                        {/* compatible for previous user bookmark */}
+                        <Route
+                          exact
+                          path={[
+                            '/blocks-and-transactions',
+                            '/blockchain',
+                            '/blockchain/blocks-and-transactions',
+                          ]}
+                          render={() => <Redirect to="/blockchain/blocks" />}
+                        />
+                        <Route
+                          exact
+                          path="/blockchain/blocks"
+                          component={Blocks}
+                        />
+                        <Route
+                          exact
+                          path="/blockchain/transactions"
+                          component={Transactions}
+                        />
+                        <Route
+                          exact
+                          path="/blockchain/cfx-transfers"
+                          component={CFXTransfers}
+                        />
+                        <Route
+                          exact
+                          path="/blockchain/accounts"
+                          component={Accounts}
+                        />
+                        <Route exact path="/tokens" component={Tokens} />
+                        <Route
+                          exact
+                          path="/tokens/:tokenType"
+                          render={(routeProps: any) => {
+                            if (routeProps.match.params.tokenType)
+                              routeProps.match.params.tokenType = routeProps.match.params.tokenType.toUpperCase();
+                            return <Tokens {...routeProps} />;
+                          }}
+                        />
+                        <Route exact path="/sponsor" component={Sponsor} />
+                        <Route
+                          exact
+                          path="/contract-deployment"
+                          component={ContractDeployment}
+                        />
+                        <Route
+                          exact
+                          path="/contract-verification"
+                          component={ContractVerification}
+                        />
+                        <Route
+                          exact
+                          path="/sponsor/:contractAddress"
+                          render={(routeProps: any) => {
+                            const address =
+                              routeProps.match.params.contractAddress;
+
+                            if (isSimplyBase32Address(address)) {
+                              return <Sponsor {...routeProps} />;
+                            } else {
+                              if (isAddress(address)) {
+                                return (
+                                  <Redirect
+                                    to={`/sponsor/${formatAddress(address)}`}
+                                  />
+                                );
                               } else {
-                                if (isAddress(address)) {
-                                  return (
-                                    <Redirect
-                                      to={`/sponsor/${formatAddress(address)}`}
-                                    />
-                                  );
-                                } else {
-                                  return (
-                                    <Redirect to={`/notfound/${address}`} />
-                                  );
-                                }
+                                return <Redirect to={`/notfound/${address}`} />;
                               }
-                            }}
-                          />
-                          <Route
-                            exact
-                            path="/statistics"
-                            render={() => (
-                              <Redirect to="/statistics/overview" />
-                            )}
-                          />
-                          <Route
-                            exact
-                            path="/statistics/:statsType"
-                            component={Statistics}
-                          />
-                          <Route
-                            exact
-                            path="/transaction/:hash"
-                            component={Transaction}
-                          />
-                          {/* Compatible with Etherscan */}
-                          <Route
-                            exact
-                            path="/tx/:hash"
-                            component={Transaction}
-                          />
-                          <Route exact path="/block/:hash" component={Block} />
-                          <Route
-                            exact
-                            path="/epoch/:number"
-                            component={Epoch}
-                          />
-                          <Route
-                            path="/address/:address"
-                            render={(routeProps: any) => {
-                              const address = routeProps.match.params.address;
-
-                              if (isSimplyBase32Address(address)) {
+                            }
+                          }}
+                        />
+                        <Route
+                          exact
+                          path="/statistics"
+                          render={() => <Redirect to="/statistics/overview" />}
+                        />
+                        <Route
+                          exact
+                          path="/statistics/:statsType"
+                          component={Statistics}
+                        />
+                        <Route
+                          exact
+                          path="/transaction/:hash"
+                          component={Transaction}
+                        />
+                        {/* Compatible with Etherscan */}
+                        <Route exact path="/tx/:hash" component={Transaction} />
+                        <Route exact path="/block/:hash" component={Block} />
+                        <Route exact path="/epoch/:number" component={Epoch} />
+                        <Route
+                          path="/address/:address"
+                          render={(routeProps: any) => {
+                            const address = routeProps.match.params.address;
+
+                            if (isSimplyBase32Address(address)) {
+                              return (
+                                <AddressContractDetailPage {...routeProps} />
+                              );
+                            } else {
+                              if (isAddress(address)) {
                                 return (
-                                  <AddressContractDetailPage {...routeProps} />
+                                  <Redirect
+                                    to={`/address/${formatAddress(address)}`}
+                                  />
                                 );
                               } else {
-                                if (isAddress(address)) {
-                                  return (
-                                    <Redirect
-                                      to={`/address/${formatAddress(address)}`}
-                                    />
-                                  );
-                                } else {
-                                  return (
-                                    <Redirect to={`/notfound/${address}`} />
-                                  );
-                                }
+                                return <Redirect to={`/notfound/${address}`} />;
                               }
-                            }}
-                          />
-                          <Route path="/search/:text" component={Search} />
-                          {/* Tools */}
-                          <Route
-                            exact
-                            path={[
-                              '/address-converter',
-                              '/address-converter/:address',
-                            ]}
-                            component={AddressConverter}
-                          />
-                          <Route
-                            exact
-                            path="/push-tx"
-                            component={BroadcastTx}
-                          />
-                          <Route
-                            exact
-                            path={[
-                              '/block-countdown',
-                              '/block-countdown/:block',
-                            ]}
-                            component={BlocknumberCalc}
-                          />
-                          <Route exact path="/swap" component={Swap} />
-                          <Route exact path="/report" component={Report} />
-                          <Route
-                            exact
-                            path={['/networkError', '/networkError/:network']}
-                            component={NetworkError}
-                          />
-                          <Route
-                            exact
-                            path="/balance-checker"
-                            component={BalanceChecker}
-                          />
-                          <Route
-                            exact
-                            path={['/nft-checker', '/nft-checker/:address']}
-                            render={(routeProps: any) => {
-                              const address = routeProps.match.params.address;
-
-                              if (
-                                isSimplyBase32Address(address) ||
-                                lodash.isNil(address)
-                              ) {
-                                return <NFTChecker {...routeProps} />;
+                            }
+                          }}
+                        />
+                        <Route path="/search/:text" component={Search} />
+                        {/* Tools */}
+                        <Route
+                          exact
+                          path={[
+                            '/address-converter',
+                            '/address-converter/:address',
+                          ]}
+                          component={AddressConverter}
+                        />
+                        <Route exact path="/push-tx" component={BroadcastTx} />
+                        <Route
+                          exact
+                          path={['/block-countdown', '/block-countdown/:block']}
+                          component={BlocknumberCalc}
+                        />
+                        <Route exact path="/swap" component={Swap} />
+                        <Route exact path="/report" component={Report} />
+                        <Route
+                          exact
+                          path={['/networkError', '/networkError/:network']}
+                          component={NetworkError}
+                        />
+                        <Route
+                          exact
+                          path="/balance-checker"
+                          component={BalanceChecker}
+                        />
+                        <Route
+                          exact
+                          path={['/nft-checker', '/nft-checker/:address']}
+                          render={(routeProps: any) => {
+                            const address = routeProps.match.params.address;
+
+                            if (
+                              isSimplyBase32Address(address) ||
+                              lodash.isNil(address)
+                            ) {
+                              return <NFTChecker {...routeProps} />;
+                            } else {
+                              if (isAddress(address)) {
+                                return (
+                                  <Redirect
+                                    to={`/nft-checker/${formatAddress(
+                                      address,
+                                    )}`}
+                                  />
+                                );
                               } else {
-                                if (isAddress(address)) {
-                                  return (
-                                    <Redirect
-                                      to={`/nft-checker/${formatAddress(
-                                        address,
-                                      )}`}
-                                    />
-                                  );
-                                } else {
-                                  return (
-                                    <Redirect to={`/notfound/${address}`} />
-                                  );
-                                }
+                                return <Redirect to={`/notfound/${address}`} />;
                               }
-                            }}
-                          />
-                          <Route
-                            exact
-                            path="/_benchmark"
-                            component={ScanBenchmark}
-                          />
-                          <Route exact path="/fccfx" component={FCCFX} />
-
-                          <Route exact path="/pos" component={posHomePage} />
-                          <Route
-                            exact
-                            path="/pos/accounts"
-                            component={posAccounts}
-                          />
-                          <Route
-                            exact
-                            path="/pos/committees"
-                            component={posCommittees}
-                          />
-                          <Route
-                            exact
-                            path="/pos/committees/:blockNumber"
-                            component={posCommittee}
-                          />
-                          <Route
-                            exact
-                            path="/pos/blocks"
-                            component={posBlocks}
-                          />
-                          <Route
-                            exact
-                            path="/pos/blocks/:hash"
-                            component={posBlock}
-                          />
-                          <Route
-                            exact
-                            path="/pos/transactions"
-                            component={posTransactions}
-                          />
-                          <Route
-                            exact
-                            path="/pos/transactions/:number"
-                            component={posTransaction}
-                          />
-                          <Route
-                            exact
-                            path="/pos/incoming-rank"
-                            component={posIncomingRank}
-                          />
-                          <Route
-                            exact
-                            path="/pos/accounts/:address"
-                            component={posAccount}
-                          />
-                          <Route
-                            exact
-                            path="/nft/:address/:id"
-                            component={NFTDetail}
-                          />
-
-                          <Route
-                            exact
-                            path="/cross-space-charts"
-                            component={CrossSpaceChart}
-                          />
-
-                          <Route
-                            exact
-                            path="/cross-space-charts/daily-cfx-transfer"
-                            component={CrossSpaceDailyCFXTransfer}
-                          />
-
-                          <Route
-                            exact
-                            path="/cross-space-charts/daily-cfx-transfer-count"
-                            component={CrossSpaceDailyCFXTransferCount}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts"
-                            component={PoSChart}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts/finalized-interval"
-                            component={PoSFinalizedInterval}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts/daily-accounts"
-                            component={PoSDailyAccounts}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts/daily-staking"
-                            component={PoSDailyStaking}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts/daily-apy"
-                            component={PoSDailyAPY}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts/total-reward"
-                            component={PoSTotalReward}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts/daily-reward-rank"
-                            component={PoSDailyRewardRank}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts/daily-reward-info"
-                            component={PoSDailyRewardInfo}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts/daily-deposit"
-                            component={PoSDailyDeposit}
-                          />
-
-                          <Route
-                            exact
-                            path="/pos-charts/participation-rate"
-                            component={PoSDailyParticipation}
-                          />
-
-                          <Route exact path="/pow-charts" component={Chart} />
-
-                          <Route
-                            exact
-                            path="/pow-charts/blocktime"
-                            component={BlockTime}
-                          />
-
-                          <Route exact path="/pow-charts/tps" component={TPS} />
-
-                          <Route
-                            exact
-                            path="/pow-charts/hashrate"
-                            component={HashRate}
-                          />
-
-                          <Route
-                            exact
-                            path="/pow-charts/difficulty"
-                            component={Difficulty}
-                          />
-
-                          <Route
-                            exact
-                            path="/pow-charts/supply"
-                            component={TotalSupply}
-                          />
-
-                          <Route
-                            exact
-                            path="/pow-charts/circulating"
-                            component={CirculatingSupply}
-                          />
-
-                          <Route exact path="/pow-charts/tx" component={Tx} />
-
-                          <Route
-                            exact
-                            path="/pow-charts/token-transfer"
-                            component={TokenTransfer}
-                          />
-
-                          <Route
-                            exact
-                            path="/pow-charts/cfx-transfer"
-                            component={CFXTransfer}
-                          />
-
-                          <Route
-                            exact
-                            path="/pow-charts/cfx-holder-accounts"
-                            component={CFXHolderAccounts}
-                          />
-
-                          <Route
-                            exact
-                            path="/pow-charts/account-growth"
-                            component={AccountGrowth}
-                          />
-
-                          <Route
-                            exact
-                            path="/pow-charts/active-accounts"
-                            component={ActiveAccounts}
-                          />
-
-                          <Route
-                            exact
-                            path="/pow-charts/contracts"
-                            component={ContractsCharts}
-                          />
-
-                          <Route exact path="/Profile" component={Profile} />
-
-                          <Route component={NotFoundPage} />
-                        </Switch>
-                      </>
-                    </Main>
-                    <Footer />
-                    <GlobalStyle />
-                    <CookieTip />
-                    <GlobalTip tipKey="addressWarning" />
-                  </ScrollToTop>
-                )}
-                <GlobalNotify />
-              </CfxProvider>
-            </BrowserRouter>
-          </SWRConfig>
-        </TxnHistoryProvider>
-      </ConfigProvider>
-    </GlobalProvider>
+                            }
+                          }}
+                        />
+                        <Route
+                          exact
+                          path="/_benchmark"
+                          component={ScanBenchmark}
+                        />
+                        <Route exact path="/fccfx" component={FCCFX} />
+
+                        <Route exact path="/pos" component={posHomePage} />
+                        <Route
+                          exact
+                          path="/pos/accounts"
+                          component={posAccounts}
+                        />
+                        <Route
+                          exact
+                          path="/pos/committees"
+                          component={posCommittees}
+                        />
+                        <Route
+                          exact
+                          path="/pos/committees/:blockNumber"
+                          component={posCommittee}
+                        />
+                        <Route exact path="/pos/blocks" component={posBlocks} />
+                        <Route
+                          exact
+                          path="/pos/blocks/:hash"
+                          component={posBlock}
+                        />
+                        <Route
+                          exact
+                          path="/pos/transactions"
+                          component={posTransactions}
+                        />
+                        <Route
+                          exact
+                          path="/pos/transactions/:number"
+                          component={posTransaction}
+                        />
+                        <Route
+                          exact
+                          path="/pos/incoming-rank"
+                          component={posIncomingRank}
+                        />
+                        <Route
+                          exact
+                          path="/pos/accounts/:address"
+                          component={posAccount}
+                        />
+                        <Route
+                          exact
+                          path="/nft/:address/:id"
+                          component={NFTDetail}
+                        />
+
+                        <Route
+                          exact
+                          path="/cross-space-charts"
+                          component={CrossSpaceChart}
+                        />
+
+                        <Route
+                          exact
+                          path="/cross-space-charts/daily-cfx-transfer"
+                          component={CrossSpaceDailyCFXTransfer}
+                        />
+
+                        <Route
+                          exact
+                          path="/cross-space-charts/daily-cfx-transfer-count"
+                          component={CrossSpaceDailyCFXTransferCount}
+                        />
+
+                        <Route exact path="/pos-charts" component={PoSChart} />
+
+                        <Route
+                          exact
+                          path="/pos-charts/finalized-interval"
+                          component={PoSFinalizedInterval}
+                        />
+
+                        <Route
+                          exact
+                          path="/pos-charts/daily-accounts"
+                          component={PoSDailyAccounts}
+                        />
+
+                        <Route
+                          exact
+                          path="/pos-charts/daily-staking"
+                          component={PoSDailyStaking}
+                        />
+
+                        <Route
+                          exact
+                          path="/pos-charts/daily-apy"
+                          component={PoSDailyAPY}
+                        />
+
+                        <Route
+                          exact
+                          path="/pos-charts/total-reward"
+                          component={PoSTotalReward}
+                        />
+
+                        <Route
+                          exact
+                          path="/pos-charts/daily-reward-rank"
+                          component={PoSDailyRewardRank}
+                        />
+
+                        <Route
+                          exact
+                          path="/pos-charts/daily-reward-info"
+                          component={PoSDailyRewardInfo}
+                        />
+
+                        <Route
+                          exact
+                          path="/pos-charts/daily-deposit"
+                          component={PoSDailyDeposit}
+                        />
+
+                        <Route
+                          exact
+                          path="/pos-charts/participation-rate"
+                          component={PoSDailyParticipation}
+                        />
+
+                        <Route exact path="/pow-charts" component={Chart} />
+
+                        <Route
+                          exact
+                          path="/pow-charts/blocktime"
+                          component={BlockTime}
+                        />
+
+                        <Route exact path="/pow-charts/tps" component={TPS} />
+
+                        <Route
+                          exact
+                          path="/pow-charts/hashrate"
+                          component={HashRate}
+                        />
+
+                        <Route
+                          exact
+                          path="/pow-charts/difficulty"
+                          component={Difficulty}
+                        />
+
+                        <Route
+                          exact
+                          path="/pow-charts/supply"
+                          component={TotalSupply}
+                        />
+
+                        <Route
+                          exact
+                          path="/pow-charts/circulating"
+                          component={CirculatingSupply}
+                        />
+
+                        <Route exact path="/pow-charts/tx" component={Tx} />
+
+                        <Route
+                          exact
+                          path="/pow-charts/token-transfer"
+                          component={TokenTransfer}
+                        />
+
+                        <Route
+                          exact
+                          path="/pow-charts/cfx-transfer"
+                          component={CFXTransfer}
+                        />
+
+                        <Route
+                          exact
+                          path="/pow-charts/cfx-holder-accounts"
+                          component={CFXHolderAccounts}
+                        />
+
+                        <Route
+                          exact
+                          path="/pow-charts/account-growth"
+                          component={AccountGrowth}
+                        />
+
+                        <Route
+                          exact
+                          path="/pow-charts/active-accounts"
+                          component={ActiveAccounts}
+                        />
+
+                        <Route
+                          exact
+                          path="/pow-charts/contracts"
+                          component={ContractsCharts}
+                        />
+
+                        <Route exact path="/Profile" component={Profile} />
+
+                        <Route component={NotFoundPage} />
+                      </Switch>
+                    </>
+                  </Main>
+                  <Footer />
+                  <GlobalStyle />
+                  <CookieTip />
+                  <GlobalTip tipKey="addressWarning" />
+                </ScrollToTop>
+              )}
+              <GlobalNotify />
+            </CfxProvider>
+          </BrowserRouter>
+        </SWRConfig>
+      </TxnHistoryProvider>
+    </ConfigProvider>
   );
 }
 
diff --git a/src/utils/hooks/useGlobal.ts b/src/utils/hooks/useGlobal.ts
index a541e4030..799265f6e 100644
--- a/src/utils/hooks/useGlobal.ts
+++ b/src/utils/hooks/useGlobal.ts
@@ -1,47 +1,6 @@
-import React, { useContext } from 'react';
 import { getCurrency, DEFAULT_NETWORK_IDS } from 'utils/constants';
 import { createGlobalState } from 'react-use';
 
-const defatultGlobalData = {
-  currency: getCurrency(),
-};
-
-export const GlobalContext = React.createContext<{
-  data: {
-    currency: string;
-  };
-  setGlobalData: (data) => void;
-}>({
-  data: defatultGlobalData,
-  setGlobalData: data => {},
-});
-
-export const GlobalProvider = function ({ children, data: outerData }) {
-  const [data, setGlobalData] = React.useState<any>({
-    ...defatultGlobalData,
-    ...outerData,
-  });
-
-  return React.createElement(
-    GlobalContext.Provider,
-    {
-      value: {
-        data,
-        setGlobalData,
-      },
-      key: Math.random(),
-    },
-    children,
-  );
-};
-GlobalProvider.defaultProps = {
-  data: defatultGlobalData,
-};
-
-export const useGlobal = () => {
-  return useContext(GlobalContext);
-};
-
 // react-use version, to solve useContext can not update global value in App.ts
 export interface ContractsType {
   [index: string]: string;
@@ -61,10 +20,11 @@ export interface GlobalDataType {
   networks: Array<NetworksType>;
   networkId: number;
   contracts: ContractsType;
+  currency?: Object;
 }
 
 // @todo, if no default global data, homepage should loading until getProjectConfig return resp
-export const useGlobalData = createGlobalState<object>({
+export const useGlobalData = createGlobalState<any>({
   networks: [
     {
       name: 'Conflux Hydra',
@@ -77,4 +37,5 @@ export const useGlobalData = createGlobalState<object>({
   ],
   networkId: DEFAULT_NETWORK_IDS.mainnet,
   contracts: {},
+  currency: getCurrency(),
 });

From 5bd9089b69884010c35be800e4b2e13134dd2d53 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 16 Nov 2022 15:30:54 +0800
Subject: [PATCH 02/42] feat: add CNS name support in table list

---
 src/app/components/AddressContainer/index.tsx | 163 ++++++++++++------
 src/app/components/Text/index.tsx             |   2 +-
 src/app/index.tsx                             |  24 ++-
 src/locales/en/translation.json               |   4 +
 src/locales/zh_cn/translation.json            |   4 +
 src/utils/constants.ts                        |   1 +
 src/utils/hooks/useGlobal.ts                  |   4 +
 src/utils/index.ts                            |  26 +++
 src/utils/request.ts                          |   9 +-
 src/utils/tableColumns/token.tsx              |   3 +-
 10 files changed, 181 insertions(+), 59 deletions(-)

diff --git a/src/app/components/AddressContainer/index.tsx b/src/app/components/AddressContainer/index.tsx
index a65fdd6c5..4269b969f 100644
--- a/src/app/components/AddressContainer/index.tsx
+++ b/src/app/components/AddressContainer/index.tsx
@@ -23,6 +23,7 @@ import { media, sizes } from 'styles/media';
 import {
   NETWORK_TYPE,
   NETWORK_TYPES,
+  ICON_ENS,
   // CONTRACTS_NAME_LABEL,
 } from 'utils/constants';
 import { monospaceFont } from 'styles/variable';
@@ -42,7 +43,8 @@ interface Props {
   showIcon?: boolean; // whether show contract icon, default true
   verify?: boolean; // show verified contract icon or unverified contract icon
   isEspaceAddress?: boolean; // check the address if is a eSpace hex address, if yes, link to https://evm.confluxscan.net/address/{hex_address}
-  showLabeled?: boolean;
+  showAddressLabel?: boolean;
+  showENSLabel?: boolean;
 }
 
 const defaultPCMaxWidth = 138;
@@ -53,26 +55,45 @@ const defaultPCSuffixAddressSize =
 const defaultPCSuffixPosAddressSize = 10;
 const defaultMobileSuffixAddressSize = 4;
 
-const getAddressLabelInfo = label => {
+const getLabelInfo = (label, type) => {
   if (label) {
+    let trans: string = '';
+    let icon: React.ReactNode = null;
+
+    if (type === 'tag') {
+      trans = translations.profile.tip.label;
+      icon = <Bookmark color="var(--theme-color-gray2)" size={16} />;
+    } else if (type === 'ens') {
+      trans = translations.ens.label;
+      icon = (
+        <img
+          src={ICON_ENS}
+          style={{
+            color: 'var(--theme-color-gray2)',
+            width: '14px',
+            height: '14px',
+            marginRight: '2px',
+          }}
+          alt=""
+        />
+      );
+    }
+
+    // change different label with different style
+    // label = <mark>{label}</mark>
+
     return {
       label,
       icon: (
         <IconWrapper>
-          <Text
-            span
-            hoverValue={
-              <Translation>
-                {t => t(translations.profile.tip.label)}
-              </Translation>
-            }
-          >
-            <Bookmark color="var(--theme-color-gray2)" size={16} />
+          <Text span hoverValue={<Translation>{t => t(trans)}</Translation>}>
+            {icon}
           </Text>
         </IconWrapper>
       ),
     };
   }
+
   return {
     label: '',
     icon: null,
@@ -95,10 +116,11 @@ const RenderAddress = ({
   suffix = null,
   type = 'pow',
   addressLabel = '',
+  ENSLabel = '',
 }: any) => {
   const aftercontent =
     type === 'pow'
-      ? cfxAddress && !isFull && !addressLabel && !alias
+      ? cfxAddress && !isFull && !ENSLabel && !addressLabel && !alias
         ? cfxAddress.substr(-suffixSize)
         : ''
       : '';
@@ -130,7 +152,9 @@ const RenderAddress = ({
           alias={alias}
           aftercontent={aftercontent}
         >
-          <span>{content || addressLabel || alias || cfxAddress}</span>
+          <span>
+            {content || ENSLabel || addressLabel || alias || cfxAddress}
+          </span>
         </LinkWrapper>
       );
     }
@@ -142,7 +166,9 @@ const RenderAddress = ({
         alias={alias}
         aftercontent={aftercontent}
       >
-        <span>{content || addressLabel || alias || cfxAddress}</span>
+        <span>
+          {content || ENSLabel || addressLabel || alias || cfxAddress}
+        </span>
       </PlainWrapper>
     );
   }
@@ -154,18 +180,25 @@ const RenderAddress = ({
         span
         hoverValue={
           <>
+            {ENSLabel ? (
+              <div>
+                <span>
+                  <Translation>{t => t(translations.ens.tip)}</Translation>
+                </span>
+                {ENSLabel}
+              </div>
+            ) : null}
             {addressLabel ? (
-              <>
+              <div>
                 <span>
                   <Translation>
                     {t => t(translations.profile.address.myNameTag)}
                   </Translation>
                 </span>
                 {addressLabel}
-              </>
+              </div>
             ) : null}
-            <div>{hoverValue || cfxAddress}</div>
-            {addressLabel && alias ? (
+            {alias ? (
               <>
                 <span>
                   <Translation>
@@ -175,6 +208,7 @@ const RenderAddress = ({
                 {alias}
               </>
             ) : null}
+            <div>{hoverValue || cfxAddress}</div>
           </>
         }
       >
@@ -202,7 +236,8 @@ export const AddressContainer = withTranslation()(
       t,
       verify = false,
       isEspaceAddress,
-      showLabeled = true,
+      showAddressLabel = true,
+      showENSLabel = true,
     }: Props & WithTranslation) => {
       const [globalData = {}] = useGlobalData();
 
@@ -219,24 +254,38 @@ export const AddressContainer = withTranslation()(
         );
 
         if (contractCreated) {
-          let addressLabel: React.ReactNode = null,
-            addressLabelIcon: React.ReactNode = null;
-
-          if (showLabeled) {
-            const { label, icon } = getAddressLabelInfo(
-              globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
-                formatAddress(contractCreated)
-              ],
-            );
+          let prefixIcon: React.ReactNode = null;
+          // private name tag
+          let addressLabel: React.ReactNode = null;
+          // ens name tag
+          let ENSLabel: React.ReactNode = null;
+          // global ens name tag
+          const gENSLabel = globalData.ens[contractCreated];
+          // global private name tag
+          const gAddressLabel =
+            globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
+              formatAddress(contractCreated)
+            ];
+
+          if (showAddressLabel && gAddressLabel) {
+            const { label, icon } = getLabelInfo(gAddressLabel, 'tag');
 
             addressLabel = label;
-            addressLabelIcon = icon;
+            prefixIcon = icon;
+          }
+
+          if (showENSLabel && gENSLabel) {
+            const { label, icon } = getLabelInfo(gENSLabel, 'ens');
+
+            ENSLabel = label;
+            prefixIcon = icon;
           }
 
           return RenderAddress({
             cfxAddress: '',
             alias: alias || txtContractCreation,
             addressLabel,
+            ENSLabel,
             hoverValue: formatAddress(contractCreated),
             hrefAddress: formatAddress(contractCreated),
             link,
@@ -245,7 +294,7 @@ export const AddressContainer = withTranslation()(
             suffixSize,
             prefix: (
               <IconWrapper>
-                {addressLabelIcon}
+                {prefixIcon}
                 <Text span hoverValue={txtContractCreation}>
                   <img src={ContractIcon} alt={txtContractCreation} />
                 </Text>
@@ -256,19 +305,6 @@ export const AddressContainer = withTranslation()(
 
         // If a txn receipt has no 'to' address or 'contractCreated', show -- for temp
         return <>--</>;
-
-        // Contract create fail, no link
-        // TODO deal with zero address value
-        // return (
-        //   <AddressWrapper>
-        //     <IconWrapper>
-        //       <Text span hoverValue={txtContractCreation}>
-        //         <img src={ContractIcon} alt={txtContractCreation} />
-        //       </Text>
-        //     </IconWrapper>
-        //     <Text span>{txtContractCreation}</Text>
-        //   </AddressWrapper>
-        // );
       }
 
       if (isEspaceAddress) {
@@ -301,6 +337,7 @@ export const AddressContainer = withTranslation()(
       // check if the address is a valid conflux address
       if (!isAddress(value)) {
         const tip = t(translations.general.invalidAddress);
+
         return RenderAddress({
           cfxAddress: value,
           alias,
@@ -332,17 +369,31 @@ export const AddressContainer = withTranslation()(
         alias = t(translations.general.zeroAddress);
       }
 
-      let addressLabel: React.ReactNode = null,
-        addressLabelIcon: React.ReactNode = null;
-      if (showLabeled) {
-        const { label, icon } = getAddressLabelInfo(
-          globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
-            formatAddress(cfxAddress)
-          ],
-        );
+      let prefixIcon: React.ReactNode = null;
+      // private name tag
+      let addressLabel: React.ReactNode = null;
+      // ens name tag
+      let ENSLabel: React.ReactNode = null;
+      // global ens name tag
+      const gENSLabel = globalData.ens[cfxAddress];
+      // global private name tag
+      const gAddressLabel =
+        globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
+          formatAddress(cfxAddress)
+        ];
+
+      if (showAddressLabel && gAddressLabel) {
+        const { label, icon } = getLabelInfo(gAddressLabel, 'tag');
 
         addressLabel = label;
-        addressLabelIcon = icon;
+        prefixIcon = icon;
+      }
+
+      if (showENSLabel && gENSLabel) {
+        const { label, icon } = getLabelInfo(gENSLabel, 'ens');
+
+        ENSLabel = label;
+        prefixIcon = icon;
       }
 
       if (isContractAddress(cfxAddress) || isInnerContractAddress(cfxAddress)) {
@@ -353,17 +404,19 @@ export const AddressContainer = withTranslation()(
             ? translations.general.verifiedContract
             : translations.general.unverifiedContract,
         );
+
         return RenderAddress({
           cfxAddress,
           alias,
           addressLabel,
+          ENSLabel,
           link,
           isFull,
           maxWidth,
           suffixSize,
           prefix: showIcon ? (
             <IconWrapper className={`${isFull ? 'icon' : ''}`}>
-              {addressLabelIcon}
+              {prefixIcon}
               <Text span hoverValue={typeText}>
                 <ImgWrapper>
                   {isInnerContractAddress(cfxAddress) ? (
@@ -392,6 +445,7 @@ export const AddressContainer = withTranslation()(
           cfxAddress,
           alias,
           addressLabel,
+          ENSLabel,
           link,
           isFull,
           maxWidth,
@@ -416,11 +470,12 @@ export const AddressContainer = withTranslation()(
         cfxAddress,
         alias,
         addressLabel,
+        ENSLabel,
         link,
         isFull,
         maxWidth,
         suffixSize,
-        prefix: addressLabelIcon,
+        prefix: prefixIcon,
       });
     },
   ),
diff --git a/src/app/components/Text/index.tsx b/src/app/components/Text/index.tsx
index 7c5326cb5..8cdc07619 100644
--- a/src/app/components/Text/index.tsx
+++ b/src/app/components/Text/index.tsx
@@ -103,7 +103,7 @@ const StyledTextWrapper = styled.span<any>`
     max-width: ${props => props.maxWidth};
     display: ${props =>
       props.maxWidth === undefined ? 'inherit' : 'inline-block'};
-    cursor: pointer;
+    /* cursor: pointer; */
     a {
       text-overflow: ellipsis;
       overflow: hidden;
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 654194809..8ba13f83b 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -35,6 +35,7 @@ import lodash from 'lodash';
 import { getClientVersion } from 'utils/rpcRequest';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
+import pubsubLib from 'utils/pubsub';
 
 // pow pages
 import { FCCFX } from './containers/FCCFX';
@@ -131,7 +132,6 @@ import zhCN from '@cfxjs/antd/lib/locale/zh_CN';
 import moment from 'moment';
 import { ConfigProvider } from '@cfxjs/antd';
 import 'moment/locale/zh-cn';
-
 // @ts-ignore
 window.lodash = lodash;
 
@@ -167,6 +167,28 @@ export function App() {
   moment.locale(lang);
   dayjs.locale(lang);
 
+  useEffect(() => {
+    const unsubscribe = pubsubLib.subscribe('storage::ens', data => {
+      const pENS = Object.keys(globalData.ens);
+      const nENS = Object.keys(data);
+
+      if (nENS.some(nENS => !pENS.includes(nENS))) {
+        setGlobalData({
+          ...globalData,
+          ens: {
+            ...globalData.ens,
+            ...data,
+          },
+        });
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [globalData]);
+
   function _ScrollToTop(props) {
     const { pathname } = useLocation();
 
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 164f856e4..2f0e9243a 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -1,4 +1,8 @@
 {
+  "ens": {
+    "label": "CNS Name",
+    "tip": "CNS Name: "
+  },
   "profile": {
     "title": "Profile",
     "subtitle": "Private info, like private name tag and transaction private note. Decentralized storage in browser's localstorage.",
diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
index b972dba8e..4ecb6ca8b 100644
--- a/src/locales/zh_cn/translation.json
+++ b/src/locales/zh_cn/translation.json
@@ -1,4 +1,8 @@
 {
+  "ens": {
+    "label": "CNS 名字",
+    "tip": "CNS 名字："
+  },
   "profile": {
     "title": "用户",
     "subtitle": "私人信息，例如地址标签，交易备注等。去中心化存储，保存在浏览器本地存储中。",
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index c7efaeb31..16a40535e 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -189,6 +189,7 @@ export const ICON_DEFAULT_CONTRACT =
   'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzNweCIgaGVpZ2h0PSIzM3B4IiB2aWV3Qm94PSIwIDAgMzMgMzMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYxLjIgKDg5NjUzKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5jb250cmFjdDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IueUu+advyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY5NC4wMDAwMDAsIC0zMS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9ImNvbnRyYWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2ODIuMDAwMDAwLCAxOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJDb250cmFjdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIuMDAwMDAwLCAxMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTEuODYzOTQwOCwxMy4xNTYyNSBMMjguMzg2MDU5MiwxMy4xNTYyNSBDMjkuMjk0OTgyMSwxMy4xNTYyNSAyOS42MjQ1ODUxLDEzLjI1MDkwNzcgMjkuOTU2ODYxNSwxMy40Mjg1Nzc5IEMzMC4yODkxMzc5LDEzLjYwNjI5MzQgMzAuNTQ5OTU2NSwxMy44NjcxMTE5IDMwLjcyNzYyNjcsMTQuMTk5Mzg4MiBDMzAuOTA1MzQyMiwxNC41MzE2NjQ2IDMxLDE0Ljg2MTI2NzQgMzEsMTUuNzcwMTkwMSBMMzEsMjUuMDQyMzA5OSBDMzEsMjUuOTUxMjMyNiAzMC45MDUzNDIyLDI2LjI4MDgzNTQgMzAuNzI3NjcyLDI2LjYxMzExMTggQzMwLjU0OTk1NjUsMjYuOTQ1Mzg4MSAzMC4yODkxMzc5LDI3LjIwNjIwNjYgMjkuOTU2ODYxNSwyNy4zODM4NzY4IEMyOS42MjQ1ODUxLDI3LjU2MTU5MjMgMjkuMjk0OTgyMSwyNy42NTYyNSAyOC4zODYwNTkyLDI3LjY1NjI1IEwxMS44NjM5NDA4LDI3LjY1NjI1IEMxMC45NTUwMTc5LDI3LjY1NjI1IDEwLjYyNTQxNDksMjcuNTYxNTkyMyAxMC4yOTMxMzg1LDI3LjM4MzkyMjEgQzkuOTYwODYyMTMsMjcuMjA2MjA2NiA5LjcwMDA0MzUyLDI2Ljk0NTM4ODEgOS41MjIzNzMzLDI2LjYxMzExMTggQzkuMzQ0NjU3NzYsMjYuMjgwODM1NCA5LjI1LDI1Ljk1MTIzMjYgOS4yNSwyNS4wNDIzMDk5IEw5LjI1LDE1Ljc3MDE5MDEgQzkuMjUsMTQuODYxMjY3NCA5LjM0NDY1Nzc2LDE0LjUzMTY2NDYgOS41MjIzMjc5OCwxNC4xOTkzODgyIEM5LjcwMDA0MzUyLDEzLjg2NzExMTkgOS45NjA4NjIxMywxMy42MDYyOTM0IDEwLjI5MzEzODUsMTMuNDI4NjIzMiBDMTAuNjI1NDE0OSwxMy4yNTA5MDc3IDEwLjk1NTAxNzksMTMuMTU2MjUgMTEuODYzOTQwOCwxMy4xNTYyNSBaIiBpZD0i6Lev5b6EIiBmaWxsPSIjQzRDNkQyIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOC4yMzg5NDA4Myw5LjUzMTI1IEwyNC43NjEwNTkyLDkuNTMxMjUgQzI1LjY2OTk4MjEsOS41MzEyNSAyNS45OTk1ODUxLDkuNjI1OTA3NzQgMjYuMzMxODYxNSw5LjgwMzU3NzkxIEMyNi42NjQxMzc5LDkuOTgxMjkzNCAyNi45MjQ5NTY1LDEwLjI0MjExMTkgMjcuMTAyNjI2NywxMC41NzQzODgyIEMyNy4yODAzNDIyLDEwLjkwNjY2NDYgMjcuMzc1LDExLjIzNjI2NzQgMjcuMzc1LDEyLjE0NTE5MDEgTDI3LjM3NSwyMS40MTczMDk5IEMyNy4zNzUsMjIuMzI2MjMyNiAyNy4yODAzNDIyLDIyLjY1NTgzNTQgMjcuMTAyNjcyLDIyLjk4ODExMTggQzI2LjkyNDk1NjUsMjMuMzIwMzg4MSAyNi42NjQxMzc5LDIzLjU4MTIwNjYgMjYuMzMxODYxNSwyMy43NTg4NzY4IEMyNS45OTk1ODUxLDIzLjkzNjU5MjMgMjUuNjY5OTgyMSwyNC4wMzEyNSAyNC43NjEwNTkyLDI0LjAzMTI1IEw4LjIzODk0MDgzLDI0LjAzMTI1IEM3LjMzMDAxNzg2LDI0LjAzMTI1IDcuMDAwNDE0OTEsMjMuOTM2NTkyMyA2LjY2ODEzODUyLDIzLjc1ODkyMjEgQzYuMzM1ODYyMTMsMjMuNTgxMjA2NiA2LjA3NTA0MzUyLDIzLjMyMDM4ODEgNS44OTczNzMzLDIyLjk4ODExMTggQzUuNzE5NjEyNDUsMjIuNjU1ODM1NCA1LjYyNSwyMi4zMjYyMzI2IDUuNjI1LDIxLjQxNzMwOTkgTDUuNjI1LDEyLjE0NTE5MDEgQzUuNjI1LDExLjIzNjI2NzQgNS43MTk2NTc3NiwxMC45MDY2NjQ2IDUuODk3MzI3OTgsMTAuNTc0Mzg4MiBDNi4wNzUwNDM1MiwxMC4yNDIxMTE5IDYuMzM1ODYyMTMsOS45ODEyOTM0IDYuNjY4MTM4NTIsOS44MDM2MjMyMiBDNy4wMDA0MTQ5MSw5LjYyNTkwNzc0IDcuMzMwMDE3ODYsOS41MzEyNSA4LjIzODk0MDgzLDkuNTMxMjUgTDguMjM4OTQwODMsOS41MzEyNSBaIiBpZD0i6Lev5b6EIiBmaWxsPSIjN0Y4Mjk2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjEuMTM2MDU5Miw1IEMyMi4wNDQ5ODIxLDUgMjIuMzc0NTg1MSw1LjA5NDY1Nzc0IDIyLjcwNjg2MTUsNS4yNzIzMjc5MSBDMjMuMDM5MTM3OSw1LjQ1MDA0MzQgMjMuMjk5OTU2NSw1LjcxMDg2MTk0IDIzLjQ3NzYyNjcsNi4wNDMxMzgyNSBDMjMuNjU1MzQyMiw2LjM3NTQxNDU1IDIzLjc1LDYuNzA1MDE3NDIgMjMuNzUsNy42MTM5NDAxNSBMMjMuNzUsMTYuODg2MDU5OSBDMjMuNzUsMTcuNzk0OTgyNiAyMy42NTUzNDIyLDE4LjEyNDU4NTQgMjMuNDc3NjcyLDE4LjQ1Njg2MTggQzIzLjI5OTk1NjUsMTguNzg5MTM4MSAyMy4wMzkxMzc5LDE5LjA0OTk1NjYgMjIuNzA2ODYxNSwxOS4yMjc2MjY4IEMyMi4zNzQ1ODUxLDE5LjQwNTM0MjMgMjIuMDQ0OTgyMSwxOS41IDIxLjEzNjA1OTIsMTkuNSBMNC42MTM5NDA4MywxOS41IEMzLjcwNTAxNzg2LDE5LjUgMy4zNzU0MTQ5MSwxOS40MDUzNDIzIDMuMDQzMTM4NTIsMTkuMjI3NjcyMSBDMi43MTA4NjIxMywxOS4wNDk5NTY2IDIuNDUwMDQzNTIsMTguNzg5MTM4MSAyLjI3MjM3MzMsMTguNDU2ODYxOCBDMi4wOTQ2MTI0NSwxOC4xMjQ1ODU0IDIsMTcuNzk0OTgyNiAyLDE2Ljg4NjA1OTkgTDIsNy42MTM5NDAxNSBDMiw2LjcwNTAxNzQyIDIuMDk0NjU3NzYsNi4zNzU0MTQ1NSAyLjI3MjMyNzk4LDYuMDQzMTM4MjUgQzIuNDUwMDQzNTIsNS43MTA4NjE5NCAyLjcxMDg2MjEzLDUuNDUwMDQzNCAzLjA0MzEzODUyLDUuMjcyMzczMjIgQzMuMzc1NDE0OTEsNS4wOTQ2MTI0MyAzLjcwNTAxNzg2LDUgNC42MTM5NDA4Myw1IEwyMS4xMzYwNTkyLDUgWiIgaWQ9Iui3r+W+hCIgZmlsbD0iIzRDNEY2MCIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTguNjc2MDQxNyw4LjYyNSBMMTcuOTgwMjA4Myw4LjYyNSBMMTcuOTgwMjA4Myw4LjYyNSBDMTguMTYzNzI4LDguNjI1IDE4LjMxMjUsOC44Njg0NDUwMyAxOC4zMTI1LDkuMTY4NzUgQzE4LjMxMjUsOS40NjkwNTQ5NyAxOC4xNjM3MjgsOS43MTI1IDE3Ljk4MDIwODMsOS43MTI1IEw4LjY3NjA0MTY4LDkuNzEyNSBMOC42NzYwNDE2Nyw5LjcxMjUgQzguNDkyNTIxOTYsOS43MTI1IDguMzQzNzUsOS40NjkwNTQ5NyA4LjM0Mzc1LDkuMTY4NzUgQzguMzQzNzUsOC44Njg0NDUwMyA4LjQ5MjUyMTk2LDguNjI1IDguNjc2MDQxNjcsOC42MjUgTDguNjc2MDQxNyw4LjYyNSBaIE04LjY5MjMwNzcyLDExLjc5Njg3NSBMMTcuMDU3NjkyMywxMS43OTY4NzUgTDE3LjA1NzY5MjMsMTEuNzk2ODc1IEMxNy4yNTAxOTU1LDExLjc5Njg3NSAxNy40MDYyNSwxMi4wNDAzMiAxNy40MDYyNSwxMi4zNDA2MjUgQzE3LjQwNjI1LDEyLjY0MDkzIDE3LjI1MDE5NTUsMTIuODg0Mzc1IDE3LjA1NzY5MjMsMTIuODg0Mzc1IEw4LjY5MjMwNzcxLDEyLjg4NDM3NSBMOC42OTIzMDc2OSwxMi44ODQzNzUgQzguNDk5ODA0NTEsMTIuODg0Mzc1IDguMzQzNzUsMTIuNjQwOTMgOC4zNDM3NSwxMi4zNDA2MjUgQzguMzQzNzUsMTIuMDQwMzIgOC40OTk4MDQ1MSwxMS43OTY4NzUgOC42OTIzMDc2OSwxMS43OTY4NzUgTDguNjkyMzA3NzIsMTEuNzk2ODc1IFogTTguNzA2MjUwMDMsMTQuOTY4NzUgTDEzLjQxODc1LDE0Ljk2ODc1IEwxMy40MTg3NSwxNC45Njg3NSBDMTMuNjE4OTUzMywxNC45Njg3NSAxMy43ODEyNSwxNS4yMTIxOTUgMTMuNzgxMjUsMTUuNTEyNSBDMTMuNzgxMjUsMTUuODEyODA1IDEzLjYxODk1MzMsMTYuMDU2MjUgMTMuNDE4NzUsMTYuMDU2MjUgTDguNzA2MjUwMDEsMTYuMDU2MjUgTDguNzA2MjUsMTYuMDU2MjUgQzguNTA2MDQ2NjksMTYuMDU2MjUgOC4zNDM3NSwxNS44MTI4MDUgOC4zNDM3NSwxNS41MTI1IEM4LjM0Mzc1LDE1LjIxMjE5NSA4LjUwNjA0NjY5LDE0Ljk2ODc1IDguNzA2MjUsMTQuOTY4NzUgTDguNzA2MjUwMDMsMTQuOTY4NzUgWiIgaWQ9IuW9oueKtiIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9InNwYXJrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2iIiBjeD0iMC42IiBjeT0iMC42IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2i5aSH5Lu9IiBjeD0iMC42IiBjeT0iNC4xIiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2i5aSH5Lu9LTIiIGN4PSIwLjYiIGN5PSI3LjYiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+';
 export const ICON_DEFAULT_TOKEN =
   'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzNweCIgaGVpZ2h0PSIzM3B4IiB2aWV3Qm94PSIwIDAgMzMgMzMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYxLjIgKDg5NjUzKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5Ub2tlbnM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLnlLvmnb8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NzUuMDAwMDAwLCAtMzEuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJUb2tlbnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ2My4wMDAwMDAsIDE4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ik1haW4iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LjA5Mzc5NDEsOS42MTI5NjI4NiBDMTMuODI1MTcwNSw5LjIzMjgzNDcgMTMuMzU0NjM0MSw5LjAwMTM2MzM1IDEyLjg0Nzc5NjcsOSBMNC4xNTUyOTU4Niw5IEMzLjY0NTgzNTIxLDguOTk5MTE2MzYgMy4xNzE5MzgxMiw5LjIzMDg3MDA1IDIuOTAxOTI0ODUsOS42MTI5NjI4NyBMMC4yMjU2MTM1MjcsMTMuNDAxNDg4OCBDLTAuMTE4NTc4MzcxLDEzLjg4NjUyMzggLTAuMDY0NzQ2MDY4OCwxNC41MTMzOTYyIDAuMzU4MzIzMzY0LDE0Ljk0Njg4NyBMNy45Mzc1MjYzNCwyMi43NzE3MTM4IEM4LjIwMjE2NjI4LDIzLjA0NTQxMDcgOC42Njc1Njc0MywyMy4wNzc1NDY0IDguOTc3MDMwNTIsMjIuODQzNDkxNiBDOS4wMDYxNTA3MywyMi44MjE0NjcyIDkuMDMzMjg1MzEsMjIuNzk3NDY4NiA5LjA1ODE4NzY5LDIyLjc3MTcxMzggTDE2LjYzNzM5MDcsMTQuOTQ2ODg3IEMxNy4wNjI4MDQxLDE0LjUxNDg3ODIgMTcuMTE5NjMzNywxMy44ODc5MTQzIDE2Ljc3NzQ3MzIsMTMuNDAxNDg4OCBMMTQuMDkzNzk0MSw5LjYxMjk2Mjg2IFoiIGlkPSLot6/lvoQiIGZpbGw9IiNDNEM2RDIiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNi43Nzc2MDcyLDE4LjQ2NTY5MjYgQzI2LjU3MjE4OTIsMTguMTc2ODkzOSAyNi4yMTIzNjczLDE4LjAwMTAzNTggMjUuODI0Nzg1NywxOCBMMTkuMTc3NTc5MiwxOCBDMTguNzg3OTkxNiwxNy45OTkzMjg3IDE4LjQyNTU5OTcsMTguMTc1NDAxMyAxOC4yMTkxMTksMTguNDY1NjkyNiBMMTYuMTcyNTI4LDIxLjM0Mzk4ODIgQzE1LjkwOTMyMjQsMjEuNzEyNDg4OSAxNS45NTA0ODgzLDIyLjE4ODc0OSAxNi4yNzQwMTIsMjIuNTE4MDg5NCBMMjIuMDY5ODczMSwyOC40NjI5MjU0IEMyMi4yNzIyNDQ4LDI4LjY3MDg2NCAyMi42MjgxMzk4LDI4LjY5NTI3ODcgMjIuODY0Nzg4LDI4LjUxNzQ1NzkgQzIyLjg4NzA1NjQsMjguNTAwNzI1MSAyMi45MDc4MDY0LDI4LjQ4MjQ5MjQgMjIuOTI2ODQ5NCwyOC40NjI5MjU0IEwyOC43MjI3MTA1LDIyLjUxODA4OTQgQzI5LjA0ODAyNjYsMjIuMTg5ODc1IDI5LjA5MTQ4NDYsMjEuNzEzNTQ1MiAyOC44Mjk4MzI1LDIxLjM0Mzk4ODIgTDI2Ljc3NzYwNzIsMTguNDY1NjkyNiBaIiBpZD0i6Lev5b6EIiBmaWxsPSIjN0Y4Mjk2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuNTgwOTM0MiwzLjc0NDMxMjcyIEMyNS4yNjQ5MDY1LDMuMjgyNzI4MTEgMjQuNzExMzM0MywzLjAwMTY1NTQ5IDI0LjExNTA1NSwzIEwxMy44ODg1ODM0LDMgQzEzLjI4OTIxNzksMi45OTg5MjcwMSAxMi43MzE2OTE5LDMuMjgwMzQyNDYgMTIuNDE0MDI5MiwzLjc0NDMxMjc0IEw5LjI2NTQyNzY4LDguMzQ0NjY5ODMgQzguODYwNDk2MDMsOC45MzM2NDE0OSA4LjkyMzgyODE1LDkuNjk0ODQ0MzMgOS40MjE1NTY5LDEwLjIyMTIyNjUgTDE4LjMzODI2NjMsMTkuNzIyODEwNiBDMTguNjQ5NjA3NCwyMC4wNTUxNTcxIDE5LjE5NzEzODIsMjAuMDk0MTc5MSAxOS41NjEyMTI0LDE5LjgwOTk2OTUgQzE5LjU5NTQ3MTQsMTkuNzgzMjI1NSAxOS42MjczOTQ1LDE5Ljc1NDA4NDMgMTkuNjU2NjkxNCwxOS43MjI4MTA2IEwyOC41NzM0MDA4LDEwLjIyMTIyNjUgQzI5LjA3Mzg4NzEsOS42OTY2NDM5NSAyOS4xNDA3NDU2LDguOTM1MzI5ODggMjguNzM4MjAzOCw4LjM0NDY2OTgyIEwyNS41ODA5MzQyLDMuNzQ0MzEyNzIgWiIgaWQ9Iui3r+W+hCIgZmlsbD0iIzRDNEY2MCIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9InNwYXJrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgMTAuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0LjAwMDAwMCwgNC42MDAwMDApIHJvdGF0ZSg0Ny4wMDAwMDApIHRyYW5zbGF0ZSgtMTQuMDAwMDAwLCAtNC42MDAwMDApICIgeD0iMTAiIHk9IjQiIHdpZHRoPSI4IiBoZWlnaHQ9IjEuMiIgcng9IjAuNiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0i55+p5b2i5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjAwMDAwMCwgOC42MDAwMDApIHJvdGF0ZSg0Ny4wMDAwMDApIHRyYW5zbGF0ZSgtNC4wMDAwMDAsIC04LjYwMDAwMCkgIiB4PSIwLjUiIHk9IjgiIHdpZHRoPSI3IiBoZWlnaHQ9IjEuMiIgcng9IjAuNiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0i55+p5b2i5aSH5Lu9LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5LjI1MDAwMCwgMTUuNjAwMDAwKSByb3RhdGUoNDcuMDAwMDAwKSB0cmFuc2xhdGUoLTE5LjI1MDAwMCwgLTE1LjYwMDAwMCkgIiB4PSIxNyIgeT0iMTUiIHdpZHRoPSI0LjUiIGhlaWdodD0iMS4yIiByeD0iMC42Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9IuakreWchuW9oiIgY3g9IjEwIiBjeT0iMC41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2i5aSH5Lu9LTMiIGN4PSIwLjUiIGN5PSI1IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2i5aSH5Lu9LTQiIGN4PSIxNi41IiBjeT0iMTIuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=';
+export const ICON_ENS = `data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' display='inline-block' vertical-align='middle' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.004-.001l.274-.11a.75.75 0 0 1 .558 0l.274.11l.004.001l6.971 2.789Zm-1.374.527L8 5.962L1.846 3.5L1 3.839v.4l6.5 2.6v7.922l.5.2l.5-.2V6.84l6.5-2.6v-.4l-.846-.339Z'/%3E%3C/svg%3E`;
 
 export const POS_NULL_ADDRESS =
   '0000000000000000000000000000000000000000000000000000000000000000';
diff --git a/src/utils/hooks/useGlobal.ts b/src/utils/hooks/useGlobal.ts
index 799265f6e..7e28cf4c6 100644
--- a/src/utils/hooks/useGlobal.ts
+++ b/src/utils/hooks/useGlobal.ts
@@ -21,6 +21,9 @@ export interface GlobalDataType {
   networkId: number;
   contracts: ContractsType;
   currency?: Object;
+  ens: {
+    [index: string]: Object;
+  };
 }
 
 // @todo, if no default global data, homepage should loading until getProjectConfig return resp
@@ -38,4 +41,5 @@ export const useGlobalData = createGlobalState<any>({
   networkId: DEFAULT_NETWORK_IDS.mainnet,
   contracts: {},
   currency: getCurrency(),
+  ens: {},
 });
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 76378641e..9d46229d6 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -918,3 +918,29 @@ export const publishRequestError = (
     },
   });
 };
+
+export const processENSInfo = response => {
+  try {
+    let map = {};
+
+    // check response data is valid
+    if (response.code === 0 && response.data) {
+      // process table list data
+      if (Array.isArray(response.data.list)) {
+        response.data.list.forEach(l => {
+          if (l.fromENSInfo) {
+            map[l.from] = l.fromENSInfo.name;
+          }
+
+          if (l.toENSInfo) {
+            map[l.to] = l.toENSInfo.name;
+          }
+        });
+      }
+    }
+
+    pubsub.publish('storage::ens', map);
+  } catch (e) {
+    console.log('processENSInfo error: ', e);
+  }
+};
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 661b238a8..ef6f6fccd 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,6 +1,6 @@
 import { PromiseType } from 'react-use/lib/util';
 import { appendApiPrefix } from './api';
-import { publishRequestError } from './index';
+import { publishRequestError, processENSInfo } from './index';
 
 type FetchWithAbortType = Partial<PromiseType<any>> & {
   abort?: () => void;
@@ -41,7 +41,12 @@ const parseJSON = async function (response) {
   const contentType = response.headers.get('content-type');
   try {
     if (contentType.includes('application/json')) {
-      return { data: await response.json(), response };
+      const data = await response.json();
+
+      // process ens info and store into global data
+      processENSInfo(data);
+
+      return { data, response };
     } else if (contentType.includes('text/html')) {
       return { data: await response.text(), response };
     } else {
diff --git a/src/utils/tableColumns/token.tsx b/src/utils/tableColumns/token.tsx
index 5bb8873c2..69a51dd0f 100644
--- a/src/utils/tableColumns/token.tsx
+++ b/src/utils/tableColumns/token.tsx
@@ -459,7 +459,8 @@ export const contract = (isFull = false) => ({
         value={value}
         isFull={isFull}
         verify={verify}
-        showLabeled={false}
+        showAddressLabel={false}
+        showENSLabel={false}
       />
     );
   },

From 778187a9b79360fddfb254a1c7920d9fa589881a Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 16 Nov 2022 15:49:48 +0800
Subject: [PATCH 03/42] feat: update CNS logo

---
 src/app/components/AddressContainer/index.tsx |  6 ++----
 src/images/logo-cns.svg                       | 18 ++++++++++++++++++
 src/utils/constants.ts                        |  1 -
 3 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/images/logo-cns.svg

diff --git a/src/app/components/AddressContainer/index.tsx b/src/app/components/AddressContainer/index.tsx
index 4269b969f..3fb14e22e 100644
--- a/src/app/components/AddressContainer/index.tsx
+++ b/src/app/components/AddressContainer/index.tsx
@@ -23,13 +23,13 @@ import { media, sizes } from 'styles/media';
 import {
   NETWORK_TYPE,
   NETWORK_TYPES,
-  ICON_ENS,
   // CONTRACTS_NAME_LABEL,
 } from 'utils/constants';
 import { monospaceFont } from 'styles/variable';
 import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
 import { useGlobalData } from 'utils/hooks/useGlobal';
 import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants';
+import ICON_ENS from 'images/logo-cns.svg';
 
 interface Props {
   value: string; // address value
@@ -69,9 +69,7 @@ const getLabelInfo = (label, type) => {
         <img
           src={ICON_ENS}
           style={{
-            color: 'var(--theme-color-gray2)',
-            width: '14px',
-            height: '14px',
+            marginBottom: '2px',
             marginRight: '2px',
           }}
           alt=""
diff --git a/src/images/logo-cns.svg b/src/images/logo-cns.svg
new file mode 100644
index 000000000..2f39e789c
--- /dev/null
+++ b/src/images/logo-cns.svg
@@ -0,0 +1,18 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6_60)">
+<path d="M12.1911 12.0699C11.6959 12.9277 10.4578 12.9277 9.96251 12.0699L6.232 5.60848C5.73675 4.75068 6.35581 3.67844 7.34631 3.67844H14.8073C15.7978 3.67844 16.4169 4.75068 15.9216 5.60848L12.1911 12.0699Z" fill="#6667AB"/>
+<path d="M7.15619 10.3914C6.66094 11.2492 5.42282 11.2492 4.92757 10.3914L1.19706 3.93001C0.701812 3.07221 1.32087 1.99997 2.31137 1.99997H9.77239C10.7629 1.99997 11.3819 3.07221 10.8867 3.93001L7.15619 10.3914Z" fill="#96D8DE"/>
+<mask id="mask0_6_60" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="3" width="11" height="10">
+<path d="M12.1911 12.0699C11.6959 12.9277 10.4578 12.9277 9.96251 12.0699L6.232 5.60848C5.73675 4.75068 6.35581 3.67844 7.34631 3.67844H14.8073C15.7978 3.67844 16.4169 4.75068 15.9216 5.60848L12.1911 12.0699Z" fill="#6667AB"/>
+</mask>
+<g mask="url(#mask0_6_60)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.07493 8.80049L5.1177 3.67841H11.0322L8.07493 8.80049Z" fill="#8E8FEB"/>
+</g>
+<rect width="3.35659" height="3.35659" rx="1.6783" transform="matrix(-1 0 0 1 3.35657 10.6434)" fill="#96D8DE"/>
+</g>
+<defs>
+<clipPath id="clip0_6_60">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 16a40535e..c7efaeb31 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -189,7 +189,6 @@ export const ICON_DEFAULT_CONTRACT =
   'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzNweCIgaGVpZ2h0PSIzM3B4IiB2aWV3Qm94PSIwIDAgMzMgMzMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYxLjIgKDg5NjUzKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5jb250cmFjdDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IueUu+advyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY5NC4wMDAwMDAsIC0zMS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9ImNvbnRyYWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2ODIuMDAwMDAwLCAxOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJDb250cmFjdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIuMDAwMDAwLCAxMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTEuODYzOTQwOCwxMy4xNTYyNSBMMjguMzg2MDU5MiwxMy4xNTYyNSBDMjkuMjk0OTgyMSwxMy4xNTYyNSAyOS42MjQ1ODUxLDEzLjI1MDkwNzcgMjkuOTU2ODYxNSwxMy40Mjg1Nzc5IEMzMC4yODkxMzc5LDEzLjYwNjI5MzQgMzAuNTQ5OTU2NSwxMy44NjcxMTE5IDMwLjcyNzYyNjcsMTQuMTk5Mzg4MiBDMzAuOTA1MzQyMiwxNC41MzE2NjQ2IDMxLDE0Ljg2MTI2NzQgMzEsMTUuNzcwMTkwMSBMMzEsMjUuMDQyMzA5OSBDMzEsMjUuOTUxMjMyNiAzMC45MDUzNDIyLDI2LjI4MDgzNTQgMzAuNzI3NjcyLDI2LjYxMzExMTggQzMwLjU0OTk1NjUsMjYuOTQ1Mzg4MSAzMC4yODkxMzc5LDI3LjIwNjIwNjYgMjkuOTU2ODYxNSwyNy4zODM4NzY4IEMyOS42MjQ1ODUxLDI3LjU2MTU5MjMgMjkuMjk0OTgyMSwyNy42NTYyNSAyOC4zODYwNTkyLDI3LjY1NjI1IEwxMS44NjM5NDA4LDI3LjY1NjI1IEMxMC45NTUwMTc5LDI3LjY1NjI1IDEwLjYyNTQxNDksMjcuNTYxNTkyMyAxMC4yOTMxMzg1LDI3LjM4MzkyMjEgQzkuOTYwODYyMTMsMjcuMjA2MjA2NiA5LjcwMDA0MzUyLDI2Ljk0NTM4ODEgOS41MjIzNzMzLDI2LjYxMzExMTggQzkuMzQ0NjU3NzYsMjYuMjgwODM1NCA5LjI1LDI1Ljk1MTIzMjYgOS4yNSwyNS4wNDIzMDk5IEw5LjI1LDE1Ljc3MDE5MDEgQzkuMjUsMTQuODYxMjY3NCA5LjM0NDY1Nzc2LDE0LjUzMTY2NDYgOS41MjIzMjc5OCwxNC4xOTkzODgyIEM5LjcwMDA0MzUyLDEzLjg2NzExMTkgOS45NjA4NjIxMywxMy42MDYyOTM0IDEwLjI5MzEzODUsMTMuNDI4NjIzMiBDMTAuNjI1NDE0OSwxMy4yNTA5MDc3IDEwLjk1NTAxNzksMTMuMTU2MjUgMTEuODYzOTQwOCwxMy4xNTYyNSBaIiBpZD0i6Lev5b6EIiBmaWxsPSIjQzRDNkQyIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOC4yMzg5NDA4Myw5LjUzMTI1IEwyNC43NjEwNTkyLDkuNTMxMjUgQzI1LjY2OTk4MjEsOS41MzEyNSAyNS45OTk1ODUxLDkuNjI1OTA3NzQgMjYuMzMxODYxNSw5LjgwMzU3NzkxIEMyNi42NjQxMzc5LDkuOTgxMjkzNCAyNi45MjQ5NTY1LDEwLjI0MjExMTkgMjcuMTAyNjI2NywxMC41NzQzODgyIEMyNy4yODAzNDIyLDEwLjkwNjY2NDYgMjcuMzc1LDExLjIzNjI2NzQgMjcuMzc1LDEyLjE0NTE5MDEgTDI3LjM3NSwyMS40MTczMDk5IEMyNy4zNzUsMjIuMzI2MjMyNiAyNy4yODAzNDIyLDIyLjY1NTgzNTQgMjcuMTAyNjcyLDIyLjk4ODExMTggQzI2LjkyNDk1NjUsMjMuMzIwMzg4MSAyNi42NjQxMzc5LDIzLjU4MTIwNjYgMjYuMzMxODYxNSwyMy43NTg4NzY4IEMyNS45OTk1ODUxLDIzLjkzNjU5MjMgMjUuNjY5OTgyMSwyNC4wMzEyNSAyNC43NjEwNTkyLDI0LjAzMTI1IEw4LjIzODk0MDgzLDI0LjAzMTI1IEM3LjMzMDAxNzg2LDI0LjAzMTI1IDcuMDAwNDE0OTEsMjMuOTM2NTkyMyA2LjY2ODEzODUyLDIzLjc1ODkyMjEgQzYuMzM1ODYyMTMsMjMuNTgxMjA2NiA2LjA3NTA0MzUyLDIzLjMyMDM4ODEgNS44OTczNzMzLDIyLjk4ODExMTggQzUuNzE5NjEyNDUsMjIuNjU1ODM1NCA1LjYyNSwyMi4zMjYyMzI2IDUuNjI1LDIxLjQxNzMwOTkgTDUuNjI1LDEyLjE0NTE5MDEgQzUuNjI1LDExLjIzNjI2NzQgNS43MTk2NTc3NiwxMC45MDY2NjQ2IDUuODk3MzI3OTgsMTAuNTc0Mzg4MiBDNi4wNzUwNDM1MiwxMC4yNDIxMTE5IDYuMzM1ODYyMTMsOS45ODEyOTM0IDYuNjY4MTM4NTIsOS44MDM2MjMyMiBDNy4wMDA0MTQ5MSw5LjYyNTkwNzc0IDcuMzMwMDE3ODYsOS41MzEyNSA4LjIzODk0MDgzLDkuNTMxMjUgTDguMjM4OTQwODMsOS41MzEyNSBaIiBpZD0i6Lev5b6EIiBmaWxsPSIjN0Y4Mjk2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjEuMTM2MDU5Miw1IEMyMi4wNDQ5ODIxLDUgMjIuMzc0NTg1MSw1LjA5NDY1Nzc0IDIyLjcwNjg2MTUsNS4yNzIzMjc5MSBDMjMuMDM5MTM3OSw1LjQ1MDA0MzQgMjMuMjk5OTU2NSw1LjcxMDg2MTk0IDIzLjQ3NzYyNjcsNi4wNDMxMzgyNSBDMjMuNjU1MzQyMiw2LjM3NTQxNDU1IDIzLjc1LDYuNzA1MDE3NDIgMjMuNzUsNy42MTM5NDAxNSBMMjMuNzUsMTYuODg2MDU5OSBDMjMuNzUsMTcuNzk0OTgyNiAyMy42NTUzNDIyLDE4LjEyNDU4NTQgMjMuNDc3NjcyLDE4LjQ1Njg2MTggQzIzLjI5OTk1NjUsMTguNzg5MTM4MSAyMy4wMzkxMzc5LDE5LjA0OTk1NjYgMjIuNzA2ODYxNSwxOS4yMjc2MjY4IEMyMi4zNzQ1ODUxLDE5LjQwNTM0MjMgMjIuMDQ0OTgyMSwxOS41IDIxLjEzNjA1OTIsMTkuNSBMNC42MTM5NDA4MywxOS41IEMzLjcwNTAxNzg2LDE5LjUgMy4zNzU0MTQ5MSwxOS40MDUzNDIzIDMuMDQzMTM4NTIsMTkuMjI3NjcyMSBDMi43MTA4NjIxMywxOS4wNDk5NTY2IDIuNDUwMDQzNTIsMTguNzg5MTM4MSAyLjI3MjM3MzMsMTguNDU2ODYxOCBDMi4wOTQ2MTI0NSwxOC4xMjQ1ODU0IDIsMTcuNzk0OTgyNiAyLDE2Ljg4NjA1OTkgTDIsNy42MTM5NDAxNSBDMiw2LjcwNTAxNzQyIDIuMDk0NjU3NzYsNi4zNzU0MTQ1NSAyLjI3MjMyNzk4LDYuMDQzMTM4MjUgQzIuNDUwMDQzNTIsNS43MTA4NjE5NCAyLjcxMDg2MjEzLDUuNDUwMDQzNCAzLjA0MzEzODUyLDUuMjcyMzczMjIgQzMuMzc1NDE0OTEsNS4wOTQ2MTI0MyAzLjcwNTAxNzg2LDUgNC42MTM5NDA4Myw1IEwyMS4xMzYwNTkyLDUgWiIgaWQ9Iui3r+W+hCIgZmlsbD0iIzRDNEY2MCIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTguNjc2MDQxNyw4LjYyNSBMMTcuOTgwMjA4Myw4LjYyNSBMMTcuOTgwMjA4Myw4LjYyNSBDMTguMTYzNzI4LDguNjI1IDE4LjMxMjUsOC44Njg0NDUwMyAxOC4zMTI1LDkuMTY4NzUgQzE4LjMxMjUsOS40NjkwNTQ5NyAxOC4xNjM3MjgsOS43MTI1IDE3Ljk4MDIwODMsOS43MTI1IEw4LjY3NjA0MTY4LDkuNzEyNSBMOC42NzYwNDE2Nyw5LjcxMjUgQzguNDkyNTIxOTYsOS43MTI1IDguMzQzNzUsOS40NjkwNTQ5NyA4LjM0Mzc1LDkuMTY4NzUgQzguMzQzNzUsOC44Njg0NDUwMyA4LjQ5MjUyMTk2LDguNjI1IDguNjc2MDQxNjcsOC42MjUgTDguNjc2MDQxNyw4LjYyNSBaIE04LjY5MjMwNzcyLDExLjc5Njg3NSBMMTcuMDU3NjkyMywxMS43OTY4NzUgTDE3LjA1NzY5MjMsMTEuNzk2ODc1IEMxNy4yNTAxOTU1LDExLjc5Njg3NSAxNy40MDYyNSwxMi4wNDAzMiAxNy40MDYyNSwxMi4zNDA2MjUgQzE3LjQwNjI1LDEyLjY0MDkzIDE3LjI1MDE5NTUsMTIuODg0Mzc1IDE3LjA1NzY5MjMsMTIuODg0Mzc1IEw4LjY5MjMwNzcxLDEyLjg4NDM3NSBMOC42OTIzMDc2OSwxMi44ODQzNzUgQzguNDk5ODA0NTEsMTIuODg0Mzc1IDguMzQzNzUsMTIuNjQwOTMgOC4zNDM3NSwxMi4zNDA2MjUgQzguMzQzNzUsMTIuMDQwMzIgOC40OTk4MDQ1MSwxMS43OTY4NzUgOC42OTIzMDc2OSwxMS43OTY4NzUgTDguNjkyMzA3NzIsMTEuNzk2ODc1IFogTTguNzA2MjUwMDMsMTQuOTY4NzUgTDEzLjQxODc1LDE0Ljk2ODc1IEwxMy40MTg3NSwxNC45Njg3NSBDMTMuNjE4OTUzMywxNC45Njg3NSAxMy43ODEyNSwxNS4yMTIxOTUgMTMuNzgxMjUsMTUuNTEyNSBDMTMuNzgxMjUsMTUuODEyODA1IDEzLjYxODk1MzMsMTYuMDU2MjUgMTMuNDE4NzUsMTYuMDU2MjUgTDguNzA2MjUwMDEsMTYuMDU2MjUgTDguNzA2MjUsMTYuMDU2MjUgQzguNTA2MDQ2NjksMTYuMDU2MjUgOC4zNDM3NSwxNS44MTI4MDUgOC4zNDM3NSwxNS41MTI1IEM4LjM0Mzc1LDE1LjIxMjE5NSA4LjUwNjA0NjY5LDE0Ljk2ODc1IDguNzA2MjUsMTQuOTY4NzUgTDguNzA2MjUwMDMsMTQuOTY4NzUgWiIgaWQ9IuW9oueKtiIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9InNwYXJrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2iIiBjeD0iMC42IiBjeT0iMC42IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2i5aSH5Lu9IiBjeD0iMC42IiBjeT0iNC4xIiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2i5aSH5Lu9LTIiIGN4PSIwLjYiIGN5PSI3LjYiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+';
 export const ICON_DEFAULT_TOKEN =
   'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzNweCIgaGVpZ2h0PSIzM3B4IiB2aWV3Qm94PSIwIDAgMzMgMzMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYxLjIgKDg5NjUzKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5Ub2tlbnM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLnlLvmnb8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NzUuMDAwMDAwLCAtMzEuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJUb2tlbnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ2My4wMDAwMDAsIDE4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ik1haW4iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LjA5Mzc5NDEsOS42MTI5NjI4NiBDMTMuODI1MTcwNSw5LjIzMjgzNDcgMTMuMzU0NjM0MSw5LjAwMTM2MzM1IDEyLjg0Nzc5NjcsOSBMNC4xNTUyOTU4Niw5IEMzLjY0NTgzNTIxLDguOTk5MTE2MzYgMy4xNzE5MzgxMiw5LjIzMDg3MDA1IDIuOTAxOTI0ODUsOS42MTI5NjI4NyBMMC4yMjU2MTM1MjcsMTMuNDAxNDg4OCBDLTAuMTE4NTc4MzcxLDEzLjg4NjUyMzggLTAuMDY0NzQ2MDY4OCwxNC41MTMzOTYyIDAuMzU4MzIzMzY0LDE0Ljk0Njg4NyBMNy45Mzc1MjYzNCwyMi43NzE3MTM4IEM4LjIwMjE2NjI4LDIzLjA0NTQxMDcgOC42Njc1Njc0MywyMy4wNzc1NDY0IDguOTc3MDMwNTIsMjIuODQzNDkxNiBDOS4wMDYxNTA3MywyMi44MjE0NjcyIDkuMDMzMjg1MzEsMjIuNzk3NDY4NiA5LjA1ODE4NzY5LDIyLjc3MTcxMzggTDE2LjYzNzM5MDcsMTQuOTQ2ODg3IEMxNy4wNjI4MDQxLDE0LjUxNDg3ODIgMTcuMTE5NjMzNywxMy44ODc5MTQzIDE2Ljc3NzQ3MzIsMTMuNDAxNDg4OCBMMTQuMDkzNzk0MSw5LjYxMjk2Mjg2IFoiIGlkPSLot6/lvoQiIGZpbGw9IiNDNEM2RDIiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNi43Nzc2MDcyLDE4LjQ2NTY5MjYgQzI2LjU3MjE4OTIsMTguMTc2ODkzOSAyNi4yMTIzNjczLDE4LjAwMTAzNTggMjUuODI0Nzg1NywxOCBMMTkuMTc3NTc5MiwxOCBDMTguNzg3OTkxNiwxNy45OTkzMjg3IDE4LjQyNTU5OTcsMTguMTc1NDAxMyAxOC4yMTkxMTksMTguNDY1NjkyNiBMMTYuMTcyNTI4LDIxLjM0Mzk4ODIgQzE1LjkwOTMyMjQsMjEuNzEyNDg4OSAxNS45NTA0ODgzLDIyLjE4ODc0OSAxNi4yNzQwMTIsMjIuNTE4MDg5NCBMMjIuMDY5ODczMSwyOC40NjI5MjU0IEMyMi4yNzIyNDQ4LDI4LjY3MDg2NCAyMi42MjgxMzk4LDI4LjY5NTI3ODcgMjIuODY0Nzg4LDI4LjUxNzQ1NzkgQzIyLjg4NzA1NjQsMjguNTAwNzI1MSAyMi45MDc4MDY0LDI4LjQ4MjQ5MjQgMjIuOTI2ODQ5NCwyOC40NjI5MjU0IEwyOC43MjI3MTA1LDIyLjUxODA4OTQgQzI5LjA0ODAyNjYsMjIuMTg5ODc1IDI5LjA5MTQ4NDYsMjEuNzEzNTQ1MiAyOC44Mjk4MzI1LDIxLjM0Mzk4ODIgTDI2Ljc3NzYwNzIsMTguNDY1NjkyNiBaIiBpZD0i6Lev5b6EIiBmaWxsPSIjN0Y4Mjk2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuNTgwOTM0MiwzLjc0NDMxMjcyIEMyNS4yNjQ5MDY1LDMuMjgyNzI4MTEgMjQuNzExMzM0MywzLjAwMTY1NTQ5IDI0LjExNTA1NSwzIEwxMy44ODg1ODM0LDMgQzEzLjI4OTIxNzksMi45OTg5MjcwMSAxMi43MzE2OTE5LDMuMjgwMzQyNDYgMTIuNDE0MDI5MiwzLjc0NDMxMjc0IEw5LjI2NTQyNzY4LDguMzQ0NjY5ODMgQzguODYwNDk2MDMsOC45MzM2NDE0OSA4LjkyMzgyODE1LDkuNjk0ODQ0MzMgOS40MjE1NTY5LDEwLjIyMTIyNjUgTDE4LjMzODI2NjMsMTkuNzIyODEwNiBDMTguNjQ5NjA3NCwyMC4wNTUxNTcxIDE5LjE5NzEzODIsMjAuMDk0MTc5MSAxOS41NjEyMTI0LDE5LjgwOTk2OTUgQzE5LjU5NTQ3MTQsMTkuNzgzMjI1NSAxOS42MjczOTQ1LDE5Ljc1NDA4NDMgMTkuNjU2NjkxNCwxOS43MjI4MTA2IEwyOC41NzM0MDA4LDEwLjIyMTIyNjUgQzI5LjA3Mzg4NzEsOS42OTY2NDM5NSAyOS4xNDA3NDU2LDguOTM1MzI5ODggMjguNzM4MjAzOCw4LjM0NDY2OTgyIEwyNS41ODA5MzQyLDMuNzQ0MzEyNzIgWiIgaWQ9Iui3r+W+hCIgZmlsbD0iIzRDNEY2MCIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9InNwYXJrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgMTAuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0LjAwMDAwMCwgNC42MDAwMDApIHJvdGF0ZSg0Ny4wMDAwMDApIHRyYW5zbGF0ZSgtMTQuMDAwMDAwLCAtNC42MDAwMDApICIgeD0iMTAiIHk9IjQiIHdpZHRoPSI4IiBoZWlnaHQ9IjEuMiIgcng9IjAuNiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0i55+p5b2i5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjAwMDAwMCwgOC42MDAwMDApIHJvdGF0ZSg0Ny4wMDAwMDApIHRyYW5zbGF0ZSgtNC4wMDAwMDAsIC04LjYwMDAwMCkgIiB4PSIwLjUiIHk9IjgiIHdpZHRoPSI3IiBoZWlnaHQ9IjEuMiIgcng9IjAuNiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0i55+p5b2i5aSH5Lu9LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5LjI1MDAwMCwgMTUuNjAwMDAwKSByb3RhdGUoNDcuMDAwMDAwKSB0cmFuc2xhdGUoLTE5LjI1MDAwMCwgLTE1LjYwMDAwMCkgIiB4PSIxNyIgeT0iMTUiIHdpZHRoPSI0LjUiIGhlaWdodD0iMS4yIiByeD0iMC42Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9IuakreWchuW9oiIgY3g9IjEwIiBjeT0iMC41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2i5aSH5Lu9LTMiIGN4PSIwLjUiIGN5PSI1IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0i5qSt5ZyG5b2i5aSH5Lu9LTQiIGN4PSIxNi41IiBjeT0iMTIuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=';
-export const ICON_ENS = `data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' display='inline-block' vertical-align='middle' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.004-.001l.274-.11a.75.75 0 0 1 .558 0l.274.11l.004.001l6.971 2.789Zm-1.374.527L8 5.962L1.846 3.5L1 3.839v.4l6.5 2.6v7.922l.5.2l.5-.2V6.84l6.5-2.6v-.4l-.846-.339Z'/%3E%3C/svg%3E`;
 
 export const POS_NULL_ADDRESS =
   '0000000000000000000000000000000000000000000000000000000000000000';

From f63e98af3aa7b515fe5fe064bd57fb49f59d6b79 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 17 Nov 2022 14:33:06 +0800
Subject: [PATCH 04/42] feat: update global ens check fn

---
 src/app/index.tsx | 13 +++++++++----
 src/setupProxy.js |  4 ++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/index.tsx b/src/app/index.tsx
index 8ba13f83b..e5fe54620 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -168,16 +168,21 @@ export function App() {
   dayjs.locale(lang);
 
   useEffect(() => {
-    const unsubscribe = pubsubLib.subscribe('storage::ens', data => {
+    const unsubscribe = pubsubLib.subscribe('storage::ens', ens => {
       const pENS = Object.keys(globalData.ens);
-      const nENS = Object.keys(data);
+      const nENS = Object.keys(ens);
 
-      if (nENS.some(nENS => !pENS.includes(nENS))) {
+      if (
+        nENS.some(key => {
+          // new address or the same address with different ens name, will refresh global ens data
+          return !pENS.includes(key) || ens[key] !== globalData.ens[key];
+        })
+      ) {
         setGlobalData({
           ...globalData,
           ens: {
             ...globalData.ens,
-            ...data,
+            ...ens,
           },
         });
       }
diff --git a/src/setupProxy.js b/src/setupProxy.js
index 91b831b46..7418097fb 100644
--- a/src/setupProxy.js
+++ b/src/setupProxy.js
@@ -3,8 +3,8 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
 // cra doc https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually
 // http-proxy-middleware doc https://www.npmjs.com/package/http-proxy-middleware#example
 
-const url = 'https://www-stage.confluxscan.net';
-// const url = 'https://confluxscan.net/';
+// const url = 'https://www-stage.confluxscan.net';
+const url = 'https://confluxscan.net/';
 let stat = `${url}`;
 let v1 = `${url}`;
 let rpc = `${url}/rpc`;

From 563e4256adc5e3a04b7551075f3e7096d03e0ac8 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Fri, 18 Nov 2022 17:47:56 +0800
Subject: [PATCH 05/42] feat: add cns request handler

---
 src/app/components/AddressContainer/index.tsx |  10 +-
 src/app/index.tsx                             |   4 +-
 src/utils/constants.ts                        |   5 +
 src/utils/hooks/useENS.ts                     |  66 +++++++++
 src/utils/hooks/useGlobal.ts                  |  14 +-
 src/utils/httpRequest.ts                      | 138 ++++++++++++++++++
 src/utils/index.ts                            |  12 +-
 7 files changed, 241 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/hooks/useENS.ts

diff --git a/src/app/components/AddressContainer/index.tsx b/src/app/components/AddressContainer/index.tsx
index 3fb14e22e..340c00b37 100644
--- a/src/app/components/AddressContainer/index.tsx
+++ b/src/app/components/AddressContainer/index.tsx
@@ -30,6 +30,7 @@ import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
 import { useGlobalData } from 'utils/hooks/useGlobal';
 import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants';
 import ICON_ENS from 'images/logo-cns.svg';
+import { useENS } from 'utils/hooks/useENS';
 
 interface Props {
   value: string; // address value
@@ -239,6 +240,11 @@ export const AddressContainer = withTranslation()(
     }: Props & WithTranslation) => {
       const [globalData = {}] = useGlobalData();
 
+      // try to get ens name
+      const [ENSMap] = useENS({
+        address: contractCreated || value ? [contractCreated || value] : [],
+      });
+
       const suffixSize =
         suffixAddressSize ||
         (window.innerWidth <= sizes.m
@@ -258,7 +264,7 @@ export const AddressContainer = withTranslation()(
           // ens name tag
           let ENSLabel: React.ReactNode = null;
           // global ens name tag
-          const gENSLabel = globalData.ens[contractCreated];
+          const gENSLabel = ENSMap[contractCreated]?.name;
           // global private name tag
           const gAddressLabel =
             globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
@@ -373,7 +379,7 @@ export const AddressContainer = withTranslation()(
       // ens name tag
       let ENSLabel: React.ReactNode = null;
       // global ens name tag
-      const gENSLabel = globalData.ens[cfxAddress];
+      const gENSLabel = ENSMap[cfxAddress]?.name;
       // global private name tag
       const gAddressLabel =
         globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
diff --git a/src/app/index.tsx b/src/app/index.tsx
index e5fe54620..a9c0b6efd 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -175,7 +175,9 @@ export function App() {
       if (
         nENS.some(key => {
           // new address or the same address with different ens name, will refresh global ens data
-          return !pENS.includes(key) || ens[key] !== globalData.ens[key];
+          return (
+            !pENS.includes(key) || ens[key]?.name !== globalData.ens[key]?.name
+          );
         })
       ) {
         setGlobalData({
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index c7efaeb31..8832fc916 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -282,3 +282,8 @@ OPEN_API_URLS.CrossSpaceDailyCFXTransfer = '/stat/cross-space-cfx';
 export const TABLE_LIST_LIMIT = 10000;
 
 export const IS_FOREIGN_HOST = /.io$/.test(window.location.host);
+
+// ens request
+export const ENS_REQUEST_DELAYED_PERIOD = 100;
+export const ENS_REQUEST_EXPIRED_PERIOD = 5000;
+export const ENS_REQUEST_MIN_BUNDLE_SIZE = 10;
diff --git a/src/utils/hooks/useENS.ts b/src/utils/hooks/useENS.ts
new file mode 100644
index 000000000..21ffd8321
--- /dev/null
+++ b/src/utils/hooks/useENS.ts
@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { useGlobalENS } from 'utils/hooks/useGlobal';
+import { reqENSInfo } from 'utils/httpRequest';
+
+interface props {
+  address: string[];
+  config?: {
+    abortable?: boolean;
+    immediately?: boolean;
+  };
+}
+
+export const useENS = ({
+  address = [],
+  config = {
+    abortable: false,
+    immediately: false,
+  },
+}: props) => {
+  const [ens = {}, setENS] = useGlobalENS();
+
+  useEffect(() => {
+    let controller = new AbortController();
+
+    reqENSInfo(address, {
+      signal: controller.signal,
+      immediately: config.immediately,
+    })
+      .then(data => {
+        // @ts-ignore
+        if (data.length) {
+          setENS(pENS => {
+            return {
+              ...pENS,
+              // @ts-ignore
+              ...data.reduce((prev, curr) => {
+                prev[curr.address] = curr;
+                return prev;
+              }, {}),
+            };
+          });
+        }
+      })
+      .catch(e => console.log('useENS query error: ', e));
+
+    return () => {
+      config.abortable && controller.abort();
+    };
+  }, [address, config.abortable, config.immediately, setENS]);
+
+  const list = address.map(
+    a =>
+      ens[a] || {
+        address: a,
+        name: '',
+        expired: 0,
+      },
+  );
+
+  const map = list.reduce((prev, curr) => {
+    prev[curr.address] = curr;
+    return prev;
+  }, {});
+
+  return [map, list];
+};
diff --git a/src/utils/hooks/useGlobal.ts b/src/utils/hooks/useGlobal.ts
index 7e28cf4c6..fd4360ecd 100644
--- a/src/utils/hooks/useGlobal.ts
+++ b/src/utils/hooks/useGlobal.ts
@@ -16,14 +16,20 @@ export interface NetworksType {
   id: number;
 }
 
+export interface ENSType {
+  [index: string]: {
+    name: string;
+    expired: number;
+    delayed: number;
+  };
+}
+
 export interface GlobalDataType {
   networks: Array<NetworksType>;
   networkId: number;
   contracts: ContractsType;
   currency?: Object;
-  ens: {
-    [index: string]: Object;
-  };
+  ens: ENSType;
 }
 
 // @todo, if no default global data, homepage should loading until getProjectConfig return resp
@@ -43,3 +49,5 @@ export const useGlobalData = createGlobalState<any>({
   currency: getCurrency(),
   ens: {},
 });
+
+export const useGlobalENS = createGlobalState<any>(() => ({}));
diff --git a/src/utils/httpRequest.ts b/src/utils/httpRequest.ts
index fc8e26cc2..5b35edd75 100644
--- a/src/utils/httpRequest.ts
+++ b/src/utils/httpRequest.ts
@@ -1,6 +1,12 @@
 import qs from 'query-string';
 import fetch from './request';
 import { OPEN_API_URLS } from './constants';
+import {
+  ENS_REQUEST_EXPIRED_PERIOD,
+  ENS_REQUEST_DELAYED_PERIOD,
+  ENS_REQUEST_MIN_BUNDLE_SIZE,
+} from './constants';
+import lodash from 'lodash';
 
 export const v1Prefix = '/v1';
 export const statPrefix = '/stat';
@@ -16,6 +22,7 @@ export const sendRequest = config => {
     method: config.type || 'GET',
     body: config.body,
     headers: config.headers,
+    signal: config.signal,
   });
 };
 
@@ -336,3 +343,134 @@ export const reqRefreshMetadata = (param?: object, extra?: object) => {
     ...extra,
   });
 };
+
+export const reqENSInfoWithNoCache = (address: string[], extra?: object) => {
+  const query = address.reduce((prev, curr, index) => {
+    return !index ? `address=${curr}` : `${prev}&address=${curr}`;
+  }, '');
+  return sendRequest({
+    url: `/ens/reverse/match?${query}`,
+    ...extra,
+  });
+};
+
+export const reqENSInfoWithCache = (() => {
+  // address request status cache
+  const cache = {};
+
+  // TODO add call debounce
+  return (address: string[], extra?: object) => {
+    const toRequestAddress = address.filter(a => {
+      const cA = cache[a];
+      if (!cA || (!cA.requesting && +new Date() > cA.expired)) {
+        cache[a] = {
+          ...cA,
+          requesting: true,
+        };
+        return true;
+      }
+      return false;
+    });
+
+    if (toRequestAddress.length) {
+      const query = toRequestAddress.reduce((prev, curr, index) => {
+        return !index ? `address=${curr}` : `${prev}&address=${curr}`;
+      }, '');
+
+      return sendRequest({
+        url: `/ens/reverse/match?${query}`,
+        ...extra,
+      }).then(data => {
+        const expired = +new Date() + ENS_REQUEST_EXPIRED_PERIOD;
+
+        return toRequestAddress.map(a => {
+          cache[a] = {
+            expired,
+            requesting: false,
+          };
+
+          return {
+            address: a,
+            name: data.map[a].name,
+            expired,
+          };
+        });
+      });
+    } else {
+      return Promise.resolve([]);
+    }
+  };
+})();
+
+export const reqENSInfo = (() => {
+  // request cache
+  const cache = {};
+  // request limit
+  let pendingAddress: string[] = [];
+  let timeout = 0;
+
+  const call = (address, extra) => {
+    const query = address.reduce((prev, curr, index) => {
+      return !index ? `address=${curr}` : `${prev}&address=${curr}`;
+    }, '');
+
+    return sendRequest({
+      url: `/ens/reverse/match?${query}`,
+      ...extra,
+    }).then(data => {
+      const expired = +new Date() + ENS_REQUEST_EXPIRED_PERIOD;
+
+      return address.map(a => {
+        cache[a] = {
+          expired,
+          requesting: false,
+        };
+
+        return {
+          address: a,
+          name: data.map[a]?.name || '',
+          expired,
+        };
+      });
+    });
+  };
+
+  return (address: string[], extra?: object) => {
+    const toRequestAddress = address
+      .map(a => a.toLowerCase())
+      .filter(a => {
+        const cA = cache[a];
+        if (!cA || (!cA.requesting && +new Date() > cA.expired)) {
+          cache[a] = {
+            ...cA,
+            requesting: true,
+          };
+          return true;
+        }
+        return false;
+      });
+
+    if (toRequestAddress.length) {
+      pendingAddress = lodash.uniq(pendingAddress.concat(toRequestAddress));
+      if (
+        pendingAddress.length >= ENS_REQUEST_MIN_BUNDLE_SIZE ||
+        // @ts-ignore
+        extra?.immediately
+      ) {
+        const r = call(pendingAddress, extra);
+        pendingAddress = [];
+        return r;
+      } else {
+        clearTimeout(timeout);
+        return new Promise((resolve, reject) => {
+          timeout = setTimeout(
+            () => resolve(call(pendingAddress, extra)),
+            ENS_REQUEST_DELAYED_PERIOD,
+          );
+        });
+      }
+    } else {
+      return Promise.resolve([]);
+    }
+  };
+})();
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 9d46229d6..39c1bbc71 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -9,6 +9,7 @@ import {
   NETWORK_ID,
   NETWORK_TYPE,
   NETWORK_TYPES,
+  ENS_REQUEST_EXPIRED_PERIOD,
 } from 'utils/constants';
 import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
 import pubsub from './pubsub';
@@ -922,6 +923,7 @@ export const publishRequestError = (
 export const processENSInfo = response => {
   try {
     let map = {};
+    const expired = +new Date() + ENS_REQUEST_EXPIRED_PERIOD;
 
     // check response data is valid
     if (response.code === 0 && response.data) {
@@ -929,11 +931,17 @@ export const processENSInfo = response => {
       if (Array.isArray(response.data.list)) {
         response.data.list.forEach(l => {
           if (l.fromENSInfo) {
-            map[l.from] = l.fromENSInfo.name;
+            map[l.from] = {
+              name: l.fromENSInfo.name,
+              expired,
+            };
           }
 
           if (l.toENSInfo) {
-            map[l.to] = l.toENSInfo.name;
+            map[l.to] = {
+              name: l.toENSInfo.name,
+              expired,
+            };
           }
         });
       }

From 0814fc50ed424cace948e196883cb0846fc2977a Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Mon, 21 Nov 2022 10:32:05 +0800
Subject: [PATCH 06/42] feat: add ens label to tx detail and tx event log
 module

---
 src/app/components/AddressContainer/index.tsx |  2 +-
 .../components/TxnComponents/AddressLabel.tsx | 20 +++++++++++++++++--
 src/utils/hooks/useENS.ts                     |  2 +-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/app/components/AddressContainer/index.tsx b/src/app/components/AddressContainer/index.tsx
index 340c00b37..664ecab6c 100644
--- a/src/app/components/AddressContainer/index.tsx
+++ b/src/app/components/AddressContainer/index.tsx
@@ -56,7 +56,7 @@ const defaultPCSuffixAddressSize =
 const defaultPCSuffixPosAddressSize = 10;
 const defaultMobileSuffixAddressSize = 4;
 
-const getLabelInfo = (label, type) => {
+export const getLabelInfo = (label, type) => {
   if (label) {
     let trans: string = '';
     let icon: React.ReactNode = null;
diff --git a/src/app/components/TxnComponents/AddressLabel.tsx b/src/app/components/TxnComponents/AddressLabel.tsx
index ef556cbcd..9c6028824 100644
--- a/src/app/components/TxnComponents/AddressLabel.tsx
+++ b/src/app/components/TxnComponents/AddressLabel.tsx
@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useGlobalData } from 'utils/hooks/useGlobal';
 import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants';
 import { Bookmark } from '@zeit-ui/react-icons';
 import { useTranslation } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import { Text } from '../Text/Loadable';
+import { getLabelInfo } from '../AddressContainer';
+import { useENS } from 'utils/hooks/useENS';
 
 export const AddressLabel = ({ address }) => {
-  const [globalData = {}] = useGlobalData();
   const { t } = useTranslation();
+  const [globalData = {}] = useGlobalData();
+  const [ensMap] = useENS({
+    address: [address],
+  });
 
   const addressLabel = globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][address];
   const addressLabelIcon = (
@@ -17,10 +22,21 @@ export const AddressLabel = ({ address }) => {
     </Text>
   );
 
+  const { label, icon } = useMemo(
+    () => getLabelInfo(ensMap[address]?.name, 'ens'),
+    [address, ensMap],
+  );
+
   if (addressLabel) {
     return (
       <span>
         {' '}
+        {label && (
+          <>
+            ({icon}
+            {label}){' '}
+          </>
+        )}
         ({addressLabelIcon}
         {addressLabel})
       </span>
diff --git a/src/utils/hooks/useENS.ts b/src/utils/hooks/useENS.ts
index 21ffd8321..da05ba7a6 100644
--- a/src/utils/hooks/useENS.ts
+++ b/src/utils/hooks/useENS.ts
@@ -62,5 +62,5 @@ export const useENS = ({
     return prev;
   }, {});
 
-  return [map, list];
+  return [map, list, setENS];
 };

From 88a595f27a0c378bc4c1f9d7daed1b66bc3957a4 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Mon, 21 Nov 2022 11:22:39 +0800
Subject: [PATCH 07/42] feat: add ens label to title of account/contract detail
 page

---
 .../components/TxnComponents/AddressLabel.tsx | 35 ++++++++++---------
 .../AddressDetailPage.tsx                     | 27 ++++++++++++--
 .../ContractDetailPage.tsx                    | 18 +++++++++-
 .../AddressContractDetail/layouts.ts          | 16 +++++++++
 src/styles/global-styles.ts                   |  2 ++
 src/styles/variable.ts                        |  1 +
 src/utils/httpRequest.ts                      |  2 ++
 7 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/src/app/components/TxnComponents/AddressLabel.tsx b/src/app/components/TxnComponents/AddressLabel.tsx
index 9c6028824..7115b2f6e 100644
--- a/src/app/components/TxnComponents/AddressLabel.tsx
+++ b/src/app/components/TxnComponents/AddressLabel.tsx
@@ -27,21 +27,22 @@ export const AddressLabel = ({ address }) => {
     [address, ensMap],
   );
 
-  if (addressLabel) {
-    return (
-      <span>
-        {' '}
-        {label && (
-          <>
-            ({icon}
-            {label}){' '}
-          </>
-        )}
-        ({addressLabelIcon}
-        {addressLabel})
-      </span>
-    );
-  }
-
-  return null;
+  return (
+    <>
+      {label && (
+        <>
+          {' '}
+          ({icon}
+          {label})
+        </>
+      )}
+      {addressLabel && (
+        <>
+          {' '}
+          ({addressLabelIcon}
+          {addressLabel})
+        </>
+      )}
+    </>
+  );
 };
diff --git a/src/app/containers/AddressContractDetail/AddressDetailPage.tsx b/src/app/containers/AddressContractDetail/AddressDetailPage.tsx
index 98cbeb6e0..dd5e86c98 100644
--- a/src/app/containers/AddressContractDetail/AddressDetailPage.tsx
+++ b/src/app/containers/AddressContractDetail/AddressDetailPage.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { memo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +16,15 @@ import {
   StorageStakingCard,
   NonceCard,
 } from './AddressInfoCards';
-import { Main, Title, Bottom, HeadAddressLine, Top, Head } from './layouts';
+import {
+  Main,
+  Title,
+  Bottom,
+  HeadAddressLine,
+  Top,
+  Head,
+  StyledENSName,
+} from './layouts';
 import { AddressMetadata, Table } from './Loadable';
 import { isZeroAddress } from '../../../utils';
 import { useAccount } from '../../../utils/api';
@@ -30,6 +38,8 @@ import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants';
 import { Bookmark } from '@zeit-ui/react-icons';
 import { Text } from 'app/components/Text/Loadable';
 import { CreateAddressLabel } from '../Profile/CreateAddressLabel';
+import { getLabelInfo } from 'app/components/AddressContainer';
+import { useENS } from 'utils/hooks/useENS';
 
 interface RouteParams {
   address: string;
@@ -47,10 +57,18 @@ export const AddressDetailPage = memo(() => {
     'stakingBalance',
   ]);
   const [visible, setVisible] = useState(false);
+  const [ensMap] = useENS({
+    address: [address],
+  });
 
   const addressLabelMap = globalData[LOCALSTORAGE_KEYS_MAP.addressLabel];
   const addressLabel = addressLabelMap[address];
 
+  const { label, icon } = useMemo(
+    () => getLabelInfo(ensMap[address]?.name, 'ens'),
+    [address, ensMap],
+  );
+
   const menu = (
     <MenuWrapper>
       <Menu.Item>
@@ -117,6 +135,11 @@ export const AddressDetailPage = memo(() => {
             {isZeroAddress(address)
               ? t(translations.general.zeroAddress)
               : t(translations.general.address.address)}
+
+            <StyledENSName show={!!label}>
+              {icon}
+              {label}
+            </StyledENSName>
           </Title>
           <HeadAddressLine>
             <span className="address">
diff --git a/src/app/containers/AddressContractDetail/ContractDetailPage.tsx b/src/app/containers/AddressContractDetail/ContractDetailPage.tsx
index a6b529e72..49131c5a2 100644
--- a/src/app/containers/AddressContractDetail/ContractDetailPage.tsx
+++ b/src/app/containers/AddressContractDetail/ContractDetailPage.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useState, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link as RouterLink, useHistory, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -27,6 +27,7 @@ import {
   Middle,
   Title,
   Top,
+  StyledENSName,
 } from './layouts';
 import {
   isContractAddress,
@@ -46,6 +47,8 @@ import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants';
 import { Bookmark } from '@zeit-ui/react-icons';
 import { Text } from 'app/components/Text/Loadable';
 import { CreateAddressLabel } from '../Profile/CreateAddressLabel';
+import { getLabelInfo } from 'app/components/AddressContainer';
+import { useENS } from 'utils/hooks/useENS';
 
 interface RouteParams {
   address: string;
@@ -92,6 +95,9 @@ export const ContractDetailPage = memo(() => {
       });
     }
   }, [address, history]);
+  const [ensMap] = useENS({
+    address: [address],
+  });
 
   const websiteUrl = contractInfo?.website || '';
   const hasWebsite =
@@ -102,6 +108,11 @@ export const ContractDetailPage = memo(() => {
   const addressLabelMap = globalData[LOCALSTORAGE_KEYS_MAP.addressLabel];
   const addressLabel = addressLabelMap[address];
 
+  const { label, icon } = useMemo(
+    () => getLabelInfo(ensMap[address]?.name, 'ens'),
+    [address, ensMap],
+  );
+
   const menu = (
     <MenuWrapper>
       {!contractInfo?.verify?.exactMatch ? (
@@ -205,6 +216,11 @@ export const ContractDetailPage = memo(() => {
               : isSpecialAddress(address)
               ? t(translations.general.specialAddress)
               : t(translations.general.contract)}
+
+            <StyledENSName show={!!label}>
+              {icon}
+              {label}
+            </StyledENSName>
           </Title>
           <HeadAddressLine>
             <IconWrapper className="address">
diff --git a/src/app/containers/AddressContractDetail/layouts.ts b/src/app/containers/AddressContractDetail/layouts.ts
index 94cb5c3e1..045e311e1 100644
--- a/src/app/containers/AddressContractDetail/layouts.ts
+++ b/src/app/containers/AddressContractDetail/layouts.ts
@@ -28,6 +28,8 @@ export const Title = styled.div`
   width: 100%;
   margin-bottom: 0.86rem;
   font-weight: 700;
+  display: flex;
+  align-items: center;
 
   ${media.s} {
     margin-bottom: 1rem;
@@ -125,3 +127,17 @@ export const Bottom = styled.section`
   position: relative;
   width: 100%;
 `;
+
+export const StyledENSName = styled.span<{
+  show: boolean;
+}>`
+  background-color: #ffffff;
+  border-radius: 16px;
+  font-size: 14px;
+  padding: 4px 12px;
+  margin-left: 12px;
+  height: 32px;
+  display: ${props => (props.show ? 'inline-flex' : 'none')};
+  align-items: center;
+  color: var(--theme-color-gray4);
+`;
diff --git a/src/styles/global-styles.ts b/src/styles/global-styles.ts
index 49ec0cfba..8e6767a92 100644
--- a/src/styles/global-styles.ts
+++ b/src/styles/global-styles.ts
@@ -10,6 +10,7 @@ import {
   gray1,
   gray2,
   gray3,
+  gray4,
   orange0,
 } from './variable';
 
@@ -23,6 +24,7 @@ export const GlobalStyle = createGlobalStyle`
     --theme-color-gray1: ${gray1};
     --theme-color-gray2: ${gray2};
     --theme-color-gray3: ${gray3};
+    --theme-color-gray4: ${gray4};
     --theme-color-orange0: ${orange0};
   }
 
diff --git a/src/styles/variable.ts b/src/styles/variable.ts
index b43630790..4960d96f5 100644
--- a/src/styles/variable.ts
+++ b/src/styles/variable.ts
@@ -11,4 +11,5 @@ export const gray0 = '#F1F3F9';
 export const gray1 = '#FDFDFE';
 export const gray2 = '#8A8C95';
 export const gray3 = '#EBECED';
+export const gray4 = '#74798C';
 export const orange0 = '#F8963E';
diff --git a/src/utils/httpRequest.ts b/src/utils/httpRequest.ts
index 5b35edd75..6ce516399 100644
--- a/src/utils/httpRequest.ts
+++ b/src/utils/httpRequest.ts
@@ -7,6 +7,7 @@ import {
   ENS_REQUEST_MIN_BUNDLE_SIZE,
 } from './constants';
 import lodash from 'lodash';
+import { isAddress } from './index';
 
 export const v1Prefix = '/v1';
 export const statPrefix = '/stat';
@@ -437,6 +438,7 @@ export const reqENSInfo = (() => {
 
   return (address: string[], extra?: object) => {
     const toRequestAddress = address
+      .filter(a => a && isAddress(a))
       .map(a => a.toLowerCase())
       .filter(a => {
         const cA = cache[a];

From f8783ef768f0f34fa2d86a71795b6fa27f09516e Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Tue, 22 Nov 2022 10:52:40 +0800
Subject: [PATCH 08/42] feat: add ens name to connectwallet component

---
 src/app/components/ConnectWallet/Button.tsx | 64 ++++++++++++---------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/app/components/ConnectWallet/Button.tsx b/src/app/components/ConnectWallet/Button.tsx
index d19e2fd6c..f702cac68 100644
--- a/src/app/components/ConnectWallet/Button.tsx
+++ b/src/app/components/ConnectWallet/Button.tsx
@@ -1,9 +1,4 @@
-/**
- *
- * Button
- *
- */
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import styled from 'styled-components/macro';
@@ -22,6 +17,8 @@ import { useGlobalData } from 'utils/hooks/useGlobal';
 import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants';
 import { Bookmark } from '@zeit-ui/react-icons';
 import { Text } from '../Text/Loadable';
+import { getLabelInfo } from '../AddressContainer';
+import { useENS } from 'utils/hooks/useENS';
 
 import iconLoadingWhite from './assets/loading-white.svg';
 
@@ -36,8 +33,16 @@ export const Button = ({ className, onClick, showBalance }: Button) => {
   const { t } = useTranslation();
   const [balance, setBalance] = useState('0');
   const { installed, connected, accounts } = usePortal();
+  const account = accounts[0];
   const { pendingRecords } = useContext(TxnHistoryContext);
   const { isValid } = useCheckHook(true);
+  const [ensMap] = useENS({
+    address: [account],
+  });
+  const { label, icon } = useMemo(
+    () => getLabelInfo(ensMap[account]?.name, 'ens'),
+    [account, ensMap],
+  );
 
   let buttonText: React.ReactNode = t(translations.connectWallet.button.text);
   let buttonStatus: React.ReactNode = '';
@@ -58,23 +63,30 @@ export const Button = ({ className, onClick, showBalance }: Button) => {
         });
       } else {
         const addressLabel =
-          globalData[LOCALSTORAGE_KEYS_MAP.addressLabel]?.[accounts[0]];
-        const addressLabelIcon = (
-          <Text span hoverValue={t(translations.profile.tip.label)}>
-            <Bookmark color="var(--theme-color-gray2)" size={16} />
-          </Text>
-        );
+          globalData[LOCALSTORAGE_KEYS_MAP.addressLabel]?.[account];
+
+        if (label) {
+          buttonText = (
+            <StyledAddressLabelWrapper>
+              {icon}
+              {label}
+            </StyledAddressLabelWrapper>
+          );
+        } else if (addressLabel) {
+          buttonText = (
+            <StyledAddressLabelWrapper>
+              <Text span hoverValue={t(translations.profile.tip.label)}>
+                <Bookmark color="var(--theme-color-gray2)" size={16} />
+              </Text>
+              {addressLabel}
+            </StyledAddressLabelWrapper>
+          );
+        } else if (NETWORK_TYPE === NETWORK_TYPES.mainnet) {
+          buttonText = account.replace(/(.*:.{3}).*(.{8})/, '$1...$2');
+        } else {
+          buttonText = account.replace(/(.*:.{3}).*(.{4})/, '$1...$2');
+        }
 
-        buttonText = addressLabel ? (
-          <StyledAddressLabelWrapper>
-            {addressLabelIcon}
-            {addressLabel}
-          </StyledAddressLabelWrapper>
-        ) : NETWORK_TYPE === NETWORK_TYPES.mainnet ? (
-          accounts[0].replace(/(.*:.{3}).*(.{8})/, '$1...$2')
-        ) : (
-          accounts[0].replace(/(.*:.{3}).*(.{4})/, '$1...$2')
-        );
         buttonStatus = <span className="button-status-online"></span>;
       }
     }
@@ -82,7 +94,7 @@ export const Button = ({ className, onClick, showBalance }: Button) => {
 
   useEffect(() => {
     if (accounts.length && isValid) {
-      getBalance(accounts[0]).then(balance => {
+      getBalance(account).then(balance => {
         setBalance(
           formatNumber(SDK.Drip(balance).toCFX(), {
             precision: 6,
@@ -90,7 +102,7 @@ export const Button = ({ className, onClick, showBalance }: Button) => {
         );
       });
     }
-  }, [connected, accounts, isValid, installed]);
+  }, [connected, accounts, isValid, installed, account]);
 
   useEffect(() => {
     if (connected === 0) {
@@ -192,7 +204,7 @@ const ButtonWrapper = styled.div`
 `;
 
 const StyledAddressLabelWrapper = styled.span`
-  display: inline-flex;
+  /* display: inline-flex;
   vertical-align: middle;
-  line-height: 2;
+  line-height: 2; */
 `;

From 28ea37a0965ec41d7022bea08fb06b0372e19f65 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 23 Nov 2022 10:12:26 +0800
Subject: [PATCH 09/42] feat: add address type support to ens fetcher

---
 src/app/components/AddressContainer/index.tsx | 15 ++++++---------
 src/app/components/NFTPreview/index.tsx       |  1 +
 src/utils/hooks/useENS.ts                     |  8 +++++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/components/AddressContainer/index.tsx b/src/app/components/AddressContainer/index.tsx
index 664ecab6c..d26e49204 100644
--- a/src/app/components/AddressContainer/index.tsx
+++ b/src/app/components/AddressContainer/index.tsx
@@ -258,18 +258,17 @@ export const AddressContainer = withTranslation()(
         );
 
         if (contractCreated) {
+          const fContractCreated = formatAddress(contractCreated);
           let prefixIcon: React.ReactNode = null;
           // private name tag
           let addressLabel: React.ReactNode = null;
           // ens name tag
           let ENSLabel: React.ReactNode = null;
           // global ens name tag
-          const gENSLabel = ENSMap[contractCreated]?.name;
+          const gENSLabel = ENSMap[fContractCreated]?.name;
           // global private name tag
           const gAddressLabel =
-            globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
-              formatAddress(contractCreated)
-            ];
+            globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][fContractCreated];
 
           if (showAddressLabel && gAddressLabel) {
             const { label, icon } = getLabelInfo(gAddressLabel, 'tag');
@@ -290,8 +289,8 @@ export const AddressContainer = withTranslation()(
             alias: alias || txtContractCreation,
             addressLabel,
             ENSLabel,
-            hoverValue: formatAddress(contractCreated),
-            hrefAddress: formatAddress(contractCreated),
+            hoverValue: fContractCreated,
+            hrefAddress: fContractCreated,
             link,
             isFull,
             maxWidth: 160,
@@ -382,9 +381,7 @@ export const AddressContainer = withTranslation()(
       const gENSLabel = ENSMap[cfxAddress]?.name;
       // global private name tag
       const gAddressLabel =
-        globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
-          formatAddress(cfxAddress)
-        ];
+        globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][cfxAddress];
 
       if (showAddressLabel && gAddressLabel) {
         const { label, icon } = getLabelInfo(gAddressLabel, 'tag');
diff --git a/src/app/components/NFTPreview/index.tsx b/src/app/components/NFTPreview/index.tsx
index 261d93b03..d8fcffa44 100644
--- a/src/app/components/NFTPreview/index.tsx
+++ b/src/app/components/NFTPreview/index.tsx
@@ -555,6 +555,7 @@ const NFTCard = styled.div`
 
       .title {
         margin-right: 4px;
+        white-space: nowrap;
       }
     }
   }
diff --git a/src/utils/hooks/useENS.ts b/src/utils/hooks/useENS.ts
index da05ba7a6..841509451 100644
--- a/src/utils/hooks/useENS.ts
+++ b/src/utils/hooks/useENS.ts
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useGlobalENS } from 'utils/hooks/useGlobal';
 import { reqENSInfo } from 'utils/httpRequest';
+import { formatAddress } from '../index';
 
 interface props {
   address: string[];
@@ -17,12 +18,13 @@ export const useENS = ({
     immediately: false,
   },
 }: props) => {
+  const fAddress = address.map(a => a && formatAddress(a));
   const [ens = {}, setENS] = useGlobalENS();
 
   useEffect(() => {
     let controller = new AbortController();
 
-    reqENSInfo(address, {
+    reqENSInfo(fAddress, {
       signal: controller.signal,
       immediately: config.immediately,
     })
@@ -46,9 +48,9 @@ export const useENS = ({
     return () => {
       config.abortable && controller.abort();
     };
-  }, [address, config.abortable, config.immediately, setENS]);
+  }, [fAddress, config.abortable, config.immediately, setENS]);
 
-  const list = address.map(
+  const list = fAddress.map(
     a =>
       ens[a] || {
         address: a,

From ab998bcc2b137752b6080984fdfb8b347971fc53 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 23 Nov 2022 13:09:51 +0800
Subject: [PATCH 10/42] feat: upgrade useENS hook

---
 src/utils/hooks/useENS.ts    | 18 ++++++++----------
 src/utils/hooks/useGlobal.ts |  2 +-
 src/utils/httpRequest.ts     | 19 ++++++++++++-------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/utils/hooks/useENS.ts b/src/utils/hooks/useENS.ts
index 841509451..e498924ce 100644
--- a/src/utils/hooks/useENS.ts
+++ b/src/utils/hooks/useENS.ts
@@ -31,15 +31,13 @@ export const useENS = ({
       .then(data => {
         // @ts-ignore
         if (data.length) {
-          setENS(pENS => {
-            return {
-              ...pENS,
-              // @ts-ignore
-              ...data.reduce((prev, curr) => {
-                prev[curr.address] = curr;
-                return prev;
-              }, {}),
-            };
+          setENS({
+            ...ens,
+            // @ts-ignore
+            ...data.reduce((prev, curr) => {
+              prev[curr.address] = curr;
+              return prev;
+            }, {}),
           });
         }
       })
@@ -48,7 +46,7 @@ export const useENS = ({
     return () => {
       config.abortable && controller.abort();
     };
-  }, [fAddress, config.abortable, config.immediately, setENS]);
+  }, [fAddress, config.abortable, config.immediately, setENS, ens]);
 
   const list = fAddress.map(
     a =>
diff --git a/src/utils/hooks/useGlobal.ts b/src/utils/hooks/useGlobal.ts
index fd4360ecd..e32e3c83f 100644
--- a/src/utils/hooks/useGlobal.ts
+++ b/src/utils/hooks/useGlobal.ts
@@ -50,4 +50,4 @@ export const useGlobalData = createGlobalState<any>({
   ens: {},
 });
 
-export const useGlobalENS = createGlobalState<any>(() => ({}));
+export const useGlobalENS = createGlobalState<any>({});
diff --git a/src/utils/httpRequest.ts b/src/utils/httpRequest.ts
index 6ce516399..ab957eca4 100644
--- a/src/utils/httpRequest.ts
+++ b/src/utils/httpRequest.ts
@@ -454,21 +454,26 @@ export const reqENSInfo = (() => {
 
     if (toRequestAddress.length) {
       pendingAddress = lodash.uniq(pendingAddress.concat(toRequestAddress));
+
       if (
         pendingAddress.length >= ENS_REQUEST_MIN_BUNDLE_SIZE ||
         // @ts-ignore
         extra?.immediately
       ) {
-        const r = call(pendingAddress, extra);
-        pendingAddress = [];
-        return r;
+        const toPendingAddress = pendingAddress.slice(
+          0,
+          ENS_REQUEST_MIN_BUNDLE_SIZE,
+        );
+        pendingAddress = pendingAddress.slice(ENS_REQUEST_MIN_BUNDLE_SIZE);
+        return call(toPendingAddress, extra);
       } else {
         clearTimeout(timeout);
         return new Promise((resolve, reject) => {
-          timeout = setTimeout(
-            () => resolve(call(pendingAddress, extra)),
-            ENS_REQUEST_DELAYED_PERIOD,
-          );
+          timeout = setTimeout(() => {
+            const toPendingAddress = pendingAddress;
+            pendingAddress = [];
+            resolve(call(toPendingAddress, extra));
+          }, ENS_REQUEST_DELAYED_PERIOD);
         });
       }
     } else {

From 472c35cc6bc36d2faad8fccd7a606e4d091021a6 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 23 Nov 2022 13:49:34 +0800
Subject: [PATCH 11/42] feat: disable ens handler in request util fn

---
 src/app/index.tsx    | 58 ++++++++++++++++++++++----------------------
 src/utils/index.ts   |  6 ++++-
 src/utils/request.ts |  4 +--
 3 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/app/index.tsx b/src/app/index.tsx
index a9c0b6efd..68df46d19 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -35,7 +35,7 @@ import lodash from 'lodash';
 import { getClientVersion } from 'utils/rpcRequest';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
-import pubsubLib from 'utils/pubsub';
+// import pubsubLib from 'utils/pubsub';
 
 // pow pages
 import { FCCFX } from './containers/FCCFX';
@@ -167,34 +167,34 @@ export function App() {
   moment.locale(lang);
   dayjs.locale(lang);
 
-  useEffect(() => {
-    const unsubscribe = pubsubLib.subscribe('storage::ens', ens => {
-      const pENS = Object.keys(globalData.ens);
-      const nENS = Object.keys(ens);
-
-      if (
-        nENS.some(key => {
-          // new address or the same address with different ens name, will refresh global ens data
-          return (
-            !pENS.includes(key) || ens[key]?.name !== globalData.ens[key]?.name
-          );
-        })
-      ) {
-        setGlobalData({
-          ...globalData,
-          ens: {
-            ...globalData.ens,
-            ...ens,
-          },
-        });
-      }
-    });
-
-    return () => {
-      unsubscribe();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [globalData]);
+  // useEffect(() => {
+  //   const unsubscribe = pubsubLib.subscribe('storage::ens', ens => {
+  //     const pENS = Object.keys(globalData.ens);
+  //     const nENS = Object.keys(ens);
+
+  //     if (
+  //       nENS.some(key => {
+  //         // new address or the same address with different ens name, will refresh global ens data
+  //         return (
+  //           !pENS.includes(key) || ens[key]?.name !== globalData.ens[key]?.name
+  //         );
+  //       })
+  //     ) {
+  //       setGlobalData({
+  //         ...globalData,
+  //         ens: {
+  //           ...globalData.ens,
+  //           ...ens,
+  //         },
+  //       });
+  //     }
+  //   });
+
+  //   return () => {
+  //     unsubscribe();
+  //   };
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [globalData]);
 
   function _ScrollToTop(props) {
     const { pathname } = useLocation();
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 39c1bbc71..56b720330 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -932,6 +932,7 @@ export const processENSInfo = response => {
         response.data.list.forEach(l => {
           if (l.fromENSInfo) {
             map[l.from] = {
+              address: l.from,
               name: l.fromENSInfo.name,
               expired,
             };
@@ -939,6 +940,7 @@ export const processENSInfo = response => {
 
           if (l.toENSInfo) {
             map[l.to] = {
+              address: l.to,
               name: l.toENSInfo.name,
               expired,
             };
@@ -947,7 +949,9 @@ export const processENSInfo = response => {
       }
     }
 
-    pubsub.publish('storage::ens', map);
+    if (Object.keys(map).length) {
+      pubsub.publish('storage::ens', map);
+    }
   } catch (e) {
     console.log('processENSInfo error: ', e);
   }
diff --git a/src/utils/request.ts b/src/utils/request.ts
index ef6f6fccd..25f0c09d6 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,6 +1,6 @@
 import { PromiseType } from 'react-use/lib/util';
 import { appendApiPrefix } from './api';
-import { publishRequestError, processENSInfo } from './index';
+import { publishRequestError /*, processENSInfo */ } from './index';
 
 type FetchWithAbortType = Partial<PromiseType<any>> & {
   abort?: () => void;
@@ -44,7 +44,7 @@ const parseJSON = async function (response) {
       const data = await response.json();
 
       // process ens info and store into global data
-      processENSInfo(data);
+      // processENSInfo(data);
 
       return { data, response };
     } else if (contentType.includes('text/html')) {

From 935b58d0fe0bbf9f060f0288cbbb7c3d3d552dcd Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 23 Nov 2022 19:38:05 +0800
Subject: [PATCH 12/42] feat: replace ens hook with zustand store

---
 package.json                 |  3 ++-
 src/utils/constants.ts       |  2 +-
 src/utils/hooks/useENS.ts    | 19 ++++++++++++-------
 src/utils/hooks/useGlobal.ts |  2 --
 src/utils/store.ts           | 12 ++++++++++++
 yarn.lock                    | 12 ++++++++++++
 6 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 src/utils/store.ts

diff --git a/package.json b/package.json
index affab61aa..8aa585593 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,8 @@
     "swr": "0.3.2",
     "ts-node": "8.8.2",
     "typescript": "4.5.4",
-    "webfontloader": "1.6.28"
+    "webfontloader": "1.6.28",
+    "zustand": "4.1.4"
   },
   "scripts": {
     "start": "react-app-rewired start",
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 8832fc916..c85400ea0 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -286,4 +286,4 @@ export const IS_FOREIGN_HOST = /.io$/.test(window.location.host);
 // ens request
 export const ENS_REQUEST_DELAYED_PERIOD = 100;
 export const ENS_REQUEST_EXPIRED_PERIOD = 5000;
-export const ENS_REQUEST_MIN_BUNDLE_SIZE = 10;
+export const ENS_REQUEST_MIN_BUNDLE_SIZE = 100;
diff --git a/src/utils/hooks/useENS.ts b/src/utils/hooks/useENS.ts
index e498924ce..db361f380 100644
--- a/src/utils/hooks/useENS.ts
+++ b/src/utils/hooks/useENS.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useGlobalENS } from 'utils/hooks/useGlobal';
+import { useENSStore } from 'utils/store';
 import { reqENSInfo } from 'utils/httpRequest';
 import { formatAddress } from '../index';
 
@@ -19,7 +19,13 @@ export const useENS = ({
   },
 }: props) => {
   const fAddress = address.map(a => a && formatAddress(a));
-  const [ens = {}, setENS] = useGlobalENS();
+
+  const { ens, setENS } = useENSStore(state => ({
+    // @ts-ignore
+    ens: state.ens,
+    // @ts-ignore
+    setENS: state.setENS,
+  }));
 
   useEffect(() => {
     let controller = new AbortController();
@@ -31,14 +37,13 @@ export const useENS = ({
       .then(data => {
         // @ts-ignore
         if (data.length) {
-          setENS({
-            ...ens,
+          setENS(
             // @ts-ignore
-            ...data.reduce((prev, curr) => {
+            data.reduce((prev, curr) => {
               prev[curr.address] = curr;
               return prev;
             }, {}),
-          });
+          );
         }
       })
       .catch(e => console.log('useENS query error: ', e));
@@ -46,7 +51,7 @@ export const useENS = ({
     return () => {
       config.abortable && controller.abort();
     };
-  }, [fAddress, config.abortable, config.immediately, setENS, ens]);
+  }, [fAddress, config.abortable, config.immediately, setENS]);
 
   const list = fAddress.map(
     a =>
diff --git a/src/utils/hooks/useGlobal.ts b/src/utils/hooks/useGlobal.ts
index e32e3c83f..1a90118cd 100644
--- a/src/utils/hooks/useGlobal.ts
+++ b/src/utils/hooks/useGlobal.ts
@@ -49,5 +49,3 @@ export const useGlobalData = createGlobalState<any>({
   currency: getCurrency(),
   ens: {},
 });
-
-export const useGlobalENS = createGlobalState<any>({});
diff --git a/src/utils/store.ts b/src/utils/store.ts
new file mode 100644
index 000000000..57358462a
--- /dev/null
+++ b/src/utils/store.ts
@@ -0,0 +1,12 @@
+import create from 'zustand';
+
+export const useENSStore = create(set => ({
+  ens: {},
+  setENS: newENS =>
+    set(state => ({
+      ens: {
+        ...state.ens,
+        ...newENS,
+      },
+    })),
+}));
diff --git a/yarn.lock b/yarn.lock
index 9d259b9c3..49ee85b51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17261,6 +17261,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz"
@@ -18125,3 +18130,10 @@ yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz"
   integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
+
+zustand@4.1.4:
+  version "4.1.4"
+  resolved "https://registry.npmmirror.com/zustand/-/zustand-4.1.4.tgz#b0286da4cc9edd35e91c96414fa54bfa4652a54d"
+  integrity sha512-k2jVOlWo8p4R83mQ+/uyB8ILPO2PCJOf+QVjcL+1PbMCk1w5OoPYpAIxy9zd93FSfmJqoH6lGdwzzjwqJIRU5A==
+  dependencies:
+    use-sync-external-store "1.2.0"

From 0b4f11b4854a3da7de5d602264e9c2950fc0a1fd Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 24 Nov 2022 14:58:07 +0800
Subject: [PATCH 13/42] feat: remove process ens info util fn

---
 src/app/index.tsx    | 30 ------------------------------
 src/utils/index.ts   | 38 --------------------------------------
 src/utils/request.ts |  3 ---
 3 files changed, 71 deletions(-)

diff --git a/src/app/index.tsx b/src/app/index.tsx
index 68df46d19..269eb35de 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -35,7 +35,6 @@ import lodash from 'lodash';
 import { getClientVersion } from 'utils/rpcRequest';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
-// import pubsubLib from 'utils/pubsub';
 
 // pow pages
 import { FCCFX } from './containers/FCCFX';
@@ -167,35 +166,6 @@ export function App() {
   moment.locale(lang);
   dayjs.locale(lang);
 
-  // useEffect(() => {
-  //   const unsubscribe = pubsubLib.subscribe('storage::ens', ens => {
-  //     const pENS = Object.keys(globalData.ens);
-  //     const nENS = Object.keys(ens);
-
-  //     if (
-  //       nENS.some(key => {
-  //         // new address or the same address with different ens name, will refresh global ens data
-  //         return (
-  //           !pENS.includes(key) || ens[key]?.name !== globalData.ens[key]?.name
-  //         );
-  //       })
-  //     ) {
-  //       setGlobalData({
-  //         ...globalData,
-  //         ens: {
-  //           ...globalData.ens,
-  //           ...ens,
-  //         },
-  //       });
-  //     }
-  //   });
-
-  //   return () => {
-  //     unsubscribe();
-  //   };
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [globalData]);
-
   function _ScrollToTop(props) {
     const { pathname } = useLocation();
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 56b720330..76378641e 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -9,7 +9,6 @@ import {
   NETWORK_ID,
   NETWORK_TYPE,
   NETWORK_TYPES,
-  ENS_REQUEST_EXPIRED_PERIOD,
 } from 'utils/constants';
 import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
 import pubsub from './pubsub';
@@ -919,40 +918,3 @@ export const publishRequestError = (
     },
   });
 };
-
-export const processENSInfo = response => {
-  try {
-    let map = {};
-    const expired = +new Date() + ENS_REQUEST_EXPIRED_PERIOD;
-
-    // check response data is valid
-    if (response.code === 0 && response.data) {
-      // process table list data
-      if (Array.isArray(response.data.list)) {
-        response.data.list.forEach(l => {
-          if (l.fromENSInfo) {
-            map[l.from] = {
-              address: l.from,
-              name: l.fromENSInfo.name,
-              expired,
-            };
-          }
-
-          if (l.toENSInfo) {
-            map[l.to] = {
-              address: l.to,
-              name: l.toENSInfo.name,
-              expired,
-            };
-          }
-        });
-      }
-    }
-
-    if (Object.keys(map).length) {
-      pubsub.publish('storage::ens', map);
-    }
-  } catch (e) {
-    console.log('processENSInfo error: ', e);
-  }
-};
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 25f0c09d6..69e1075c2 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -43,9 +43,6 @@ const parseJSON = async function (response) {
     if (contentType.includes('application/json')) {
       const data = await response.json();
 
-      // process ens info and store into global data
-      // processENSInfo(data);
-
       return { data, response };
     } else if (contentType.includes('text/html')) {
       return { data: await response.text(), response };

From ffb3d06998941d318d2d2215c76ad39d48129449 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 8 Dec 2022 16:26:37 +0800
Subject: [PATCH 14/42] feat: enable ens in global search

---
 package.json                                  |    1 +
 .../__snapshots__/index.test.tsx.snap         |  210 --
 .../Header/Search/__tests__/index.test.tsx    |   16 -
 src/app/containers/Header/Search/index.tsx    |  252 ++-
 .../Header/__/__snapshots__/index.tsx.snap    | 1740 -----------------
 src/app/containers/Header/__/index.tsx        |   52 -
 src/locales/en/translation.json               |    6 +-
 src/locales/zh_cn/translation.json            |    6 +-
 src/utils/constants.ts                        |   29 +
 src/utils/contract/CNSPublicResolver.json     |   42 +
 src/utils/contract/CNSRegistry.json           |   19 +
 src/utils/contract/CNSReverseRegistrar.json   |   21 +
 src/utils/ens/index.ts                        |   65 +
 yarn.lock                                     |    5 +
 14 files changed, 349 insertions(+), 2115 deletions(-)
 delete mode 100644 src/app/containers/Header/Search/__tests__/__snapshots__/index.test.tsx.snap
 delete mode 100644 src/app/containers/Header/Search/__tests__/index.test.tsx
 delete mode 100644 src/app/containers/Header/__/__snapshots__/index.tsx.snap
 delete mode 100644 src/app/containers/Header/__/index.tsx
 create mode 100644 src/utils/contract/CNSPublicResolver.json
 create mode 100644 src/utils/contract/CNSRegistry.json
 create mode 100644 src/utils/contract/CNSReverseRegistrar.json
 create mode 100644 src/utils/ens/index.ts

diff --git a/package.json b/package.json
index 8aa585593..af7733404 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@cfxjs/react-ui": "2.0.0-alpha.15",
     "@cfxjs/use-wallet": "0.0.18",
     "@conflux-dev/conflux-address-js": "1.3.16",
+    "@ensdomains/eth-ens-namehash": "2.0.15",
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1",
     "@types/fontfaceobserver": "0.0.6",
diff --git a/src/app/containers/Header/Search/__tests__/__snapshots__/index.test.tsx.snap b/src/app/containers/Header/Search/__tests__/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 2cca84710..000000000
--- a/src/app/containers/Header/Search/__tests__/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,210 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Search  /> should match snapshot 1`] = `
-.c0 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding: 0 1.5rem;
-}
-
-.c0 .autocomplete-search-input .ant-input-affix-wrapper,
-.c0 .autocomplete-search-input input {
-  background-color: var(--theme-color-gray1);
-}
-
-.c0 .autocomplete-search-input .ant-input-search-button {
-  background-color: var(--theme-color-blue0);
-}
-
-.c0 .autocomplete-search-input .ant-input-search-button:hover {
-  background-color: var(--theme-color-blue2);
-}
-
-.c0 .ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
-  border-radius: 16px;
-}
-
-.c0 .ant-input-affix-wrapper {
-  border-color: #b6bad2;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 12px;
-  color: #333;
-  box-shadow: none !important;
-}
-
-.c0 .ant-input-affix-wrapper:hover,
-.c0 .ant-input-affix-wrapper:focus {
-  border-color: #424a71;
-  box-shadow: none !important;
-}
-
-.c0 .ant-input-affix-wrapper-focused {
-  border-color: #424a71;
-}
-
-.c0 .ant-input::-webkit-input-placeholder {
-  color: rgba(51,51,51,0.6);
-}
-
-.c0 .ant-input::-moz-placeholder {
-  color: rgba(51,51,51,0.6);
-}
-
-.c0 .ant-input:-ms-input-placeholder {
-  color: rgba(51,51,51,0.6);
-}
-
-.c0 .ant-input::placeholder {
-  color: rgba(51,51,51,0.6);
-}
-
-.c0 .ant-input:hover,
-.c0 .ant-input:focus {
-  border-color: #424a71;
-}
-
-.c0 .ant-input-group-addon {
-  position: absolute;
-  right: 50px;
-  top: 0;
-  left: auto !important;
-  width: 0;
-}
-
-.c0 .ant-input-search-button {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: none;
-  background: #424a71;
-  border-radius: 16px !important;
-  width: 50px;
-  z-index: 5;
-}
-
-.c0 .ant-input-search-button:hover {
-  border: none;
-  outline: none;
-  background: #68719c;
-}
-
-.c0 .ant-input-search-button svg {
-  fill: #fff;
-}
-
-.c0 .ant-input-suffix {
-  margin-right: 40px;
-  border: none;
-}
-
-.c0 .ant-input-suffix .ant-input-clear-icon-hidden {
-  display: none;
-}
-
-.c0 .ant-input-suffix .anticon {
-  width: 24px;
-  height: 100%;
-  background: url(clear.png) no-repeat center center;
-  background-size: 16px 16px;
-  opacity: 0.6;
-}
-
-.c0 .ant-input-suffix .anticon:hover {
-  opacity: 1;
-}
-
-.c0 .ant-input-suffix .anticon svg {
-  display: none;
-}
-
-<div
-  class="c0 header-search-container"
->
-  <div
-    class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-    style="width: 100%;"
-  >
-    <div
-      class="ant-select-selector"
-    >
-      <span
-        class="ant-select-selection-search"
-      >
-        <span
-          class="ant-input-group-wrapper ant-input-search ant-input-search-with-button ant-select-selection-search-input autocomplete-search-input"
-        >
-          <span
-            class="ant-input-wrapper ant-input-group"
-          >
-            <span
-              class="ant-input-affix-wrapper"
-            >
-              <input
-                aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-                aria-autocomplete="list"
-                aria-controls="rc_select_TEST_OR_SSR_list"
-                aria-haspopup="listbox"
-                aria-owns="rc_select_TEST_OR_SSR_list"
-                autocomplete="off"
-                class="ant-input"
-                id="rc_select_TEST_OR_SSR"
-                placeholder="Search by Epoch / Block Hash / Txn Hash / Address / Token / Contract Name Tag"
-                role="combobox"
-                type="search"
-                value=""
-              />
-              <span
-                class="ant-input-suffix"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-                  role="button"
-                  tabindex="-1"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-            <span
-              class="ant-input-group-addon"
-            >
-              <button
-                class="ant-btn ant-btn-primary ant-input-search-button"
-                type="button"
-              />
-            </span>
-          </span>
-        </span>
-      </span>
-      <span
-        class="ant-select-selection-placeholder"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/app/containers/Header/Search/__tests__/index.test.tsx b/src/app/containers/Header/Search/__tests__/index.test.tsx
deleted file mode 100644
index 22e42dddf..000000000
--- a/src/app/containers/Header/Search/__tests__/index.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
-
-import { Search } from '../';
-
-describe('<Search  />', () => {
-  it('should match snapshot', () => {
-    const loadingIndicator = render(
-      <MemoryRouter>
-        <Search />
-      </MemoryRouter>,
-    );
-    expect(loadingIndicator.container.firstChild).toMatchSnapshot();
-  });
-});
diff --git a/src/app/containers/Header/Search/index.tsx b/src/app/containers/Header/Search/index.tsx
index 21d3c8b55..fbfd51bb9 100644
--- a/src/app/containers/Header/Search/index.tsx
+++ b/src/app/containers/Header/Search/index.tsx
@@ -24,6 +24,7 @@ import {
   isSpecialAddress,
 } from 'utils';
 import { appendApiPrefix } from 'utils/api';
+import { getAddress, isValidENS, LogoENS } from 'utils/ens';
 
 const { Search: SearchInput } = Input;
 
@@ -72,68 +73,107 @@ const TokenItemWrapper = styled.div`
   }
 `;
 
-const searchResult = (list: any[], notAvailable = '-', type = 'token') =>
-  list.map(l => {
-    const token = {
-      ...l,
-      icon: l.iconUrl || ICON_DEFAULT_TOKEN,
-      name: l.name || notAvailable,
-    };
-
-    return {
-      key: `${type}-${token.address}`,
-      // add type prefix for duplicate value with different type
-      value: `${type}-${token.address}`,
+// type is one of: token, contract, ens
+const searchResult = (list: any[], notAvailable = '-', type = 'token') => {
+  if (type === 'ens') {
+    return list.map(l => ({
+      key: `ens-${l.address}`,
+      value: `ens-${l.address}`,
       type,
-      label: (
+      label: l.address ? (
         <TokenItemWrapper
           onClick={() => {
-            window.location.href = `/${
-              type === 'token' ? 'token' : 'address'
-            }/${token.address}`;
+            window.location.href = `/address/${l.address}`;
           }}
         >
-          {type === 'token' && (
-            <Image
-              preview={false}
-              src={token?.iconUrl || ICON_DEFAULT_TOKEN}
-              fallback={ICON_DEFAULT_TOKEN}
-              alt="token icon"
-            />
-          )}
+          <Image
+            preview={false}
+            src={LogoENS}
+            fallback={ICON_DEFAULT_TOKEN}
+            alt="ens icon"
+          />
           <span>
-            <Translation>
-              {t => (
-                <>
-                  <div className="title">
-                    {token?.name}
-                    {token?.symbol ? ` (${token.symbol}) ` : ' '}
-                    {token?.transferType && (
-                      <span className="tag">
-                        {token?.transferType.replace('ERC', 'CRC')}
-                      </span>
-                    )}
-                  </div>
-                  {token?.address ? (
-                    <div className="address">{token?.address}</div>
-                  ) : null}
-                  {/*{token?.website ? (*/}
-                  {/*  <div className="website">{token?.website}</div>*/}
-                  {/*) : null}*/}
-                  {token?.holderCount ? (
-                    <div className="holders">
-                      {token?.holderCount}{' '}
-                      {t(translations.tokens.table.holders)}
-                    </div>
-                  ) : null}
-                </>
-              )}
-            </Translation>
+            <div className="title">
+              {l.name}{' '}
+              <span className="tag">
+                <Translation>
+                  {t => t(translations.header.search.ens)}
+                </Translation>
+              </span>
+            </div>
+            <div className="address">{l.address}</div>
           </span>
         </TokenItemWrapper>
+      ) : (
+        <span>
+          <Translation>{t => t(translations.general.noResult)}</Translation>
+        </span>
       ),
-    };
-  });
+    }));
+  } else {
+    return list.map(l => {
+      const token = {
+        ...l,
+        icon: l.iconUrl || ICON_DEFAULT_TOKEN,
+        name: l.name || notAvailable,
+      };
+
+      return {
+        key: `${type}-${token.address}`,
+        // add type prefix for duplicate value with different type
+        value: `${type}-${token.address}`,
+        type,
+        label: (
+          <TokenItemWrapper
+            onClick={() => {
+              window.location.href = `/${
+                type === 'token' ? 'token' : 'address'
+              }/${token.address}`;
+            }}
+          >
+            {type === 'token' && (
+              <Image
+                preview={false}
+                src={token?.iconUrl || ICON_DEFAULT_TOKEN}
+                fallback={ICON_DEFAULT_TOKEN}
+                alt="token icon"
+              />
+            )}
+            <span>
+              <Translation>
+                {t => (
+                  <>
+                    <div className="title">
+                      {token?.name}
+                      {token?.symbol ? ` (${token.symbol}) ` : ' '}
+                      {token?.transferType && (
+                        <span className="tag">
+                          {token?.transferType.replace('ERC', 'CRC')}
+                        </span>
+                      )}
+                    </div>
+                    {token?.address ? (
+                      <div className="address">{token?.address}</div>
+                    ) : null}
+                    {/*{token?.website ? (*/}
+                    {/*  <div className="website">{token?.website}</div>*/}
+                    {/*) : null}*/}
+                    {token?.holderCount ? (
+                      <div className="holders">
+                        {token?.holderCount}{' '}
+                        {t(translations.tokens.table.holders)}
+                      </div>
+                    ) : null}
+                  </>
+                )}
+              </Translation>
+            </span>
+          </TokenItemWrapper>
+        ),
+      };
+    });
+  }
+};
 
 let controller = new AbortController();
 
@@ -160,54 +200,80 @@ export const Search = () => {
         isHash(value)
       )
     ) {
-      // abort pre search
-      controller.abort();
-
-      controller = new AbortController();
-
-      fetch(appendApiPrefix('/stat/tokens/name?name=' + value), {
-        signal: controller.signal,
-      })
-        .then(res => {
-          if (res) {
-            const options: any = [];
-            if (res.list && res.list.length > 0)
-              options.push({
+      if (isValidENS(value)) {
+        // demo Oahu11250001.Web3
+        getAddress(value)
+          .then(address => {
+            setOptions([
+              {
                 label: (
                   <LabelWrapper>
-                    {t(translations.header.search.tokens)}
-                  </LabelWrapper>
-                ),
-                options: searchResult(res.list, notAvailable, 'token'),
-              });
-            if (res.contractList && res.contractList.length > 0)
-              options.push({
-                label: (
-                  <LabelWrapper>
-                    {t(translations.header.search.contracts)}
-                    {res.contractList.length > 10
-                      ? ` (${t(translations.header.search.contractsTip)})`
-                      : null}
+                    {t(translations.header.search.ens)}
                   </LabelWrapper>
                 ),
                 options: searchResult(
-                  res.contractList.length > 10
-                    ? res.contractList.slice(0, 10)
-                    : res.contractList,
+                  [
+                    {
+                      address,
+                      name: value,
+                    },
+                  ],
                   notAvailable,
-                  'contract',
+                  'ens',
                 ),
-              });
-            setOptions(options);
-          } else {
-            setOptions([]);
-          }
+              },
+            ]);
+          })
+          .catch(e => console.log(e));
+      } else {
+        // abort pre search
+        controller.abort();
+        controller = new AbortController();
+
+        fetch(appendApiPrefix('/stat/tokens/name?name=' + value), {
+          signal: controller.signal,
         })
-        .catch(e => {
-          if (e.name !== 'AbortError') {
-            console.error(e);
-          }
-        });
+          .then(res => {
+            if (res) {
+              const options: any = [];
+              if (res.list && res.list.length > 0)
+                options.push({
+                  label: (
+                    <LabelWrapper>
+                      {t(translations.header.search.tokens)}
+                    </LabelWrapper>
+                  ),
+                  options: searchResult(res.list, notAvailable, 'token'),
+                });
+              if (res.contractList && res.contractList.length > 0)
+                options.push({
+                  label: (
+                    <LabelWrapper>
+                      {t(translations.header.search.contracts)}
+                      {res.contractList.length > 10
+                        ? ` (${t(translations.header.search.contractsTip)})`
+                        : null}
+                    </LabelWrapper>
+                  ),
+                  options: searchResult(
+                    res.contractList.length > 10
+                      ? res.contractList.slice(0, 10)
+                      : res.contractList,
+                    notAvailable,
+                    'contract',
+                  ),
+                });
+              setOptions(options);
+            } else {
+              setOptions([]);
+            }
+          })
+          .catch(e => {
+            if (e.name !== 'AbortError') {
+              console.error(e);
+            }
+          });
+      }
     } else {
       setOptions([]);
     }
diff --git a/src/app/containers/Header/__/__snapshots__/index.tsx.snap b/src/app/containers/Header/__/__snapshots__/index.tsx.snap
deleted file mode 100644
index f1d712618..000000000
--- a/src/app/containers/Header/__/__snapshots__/index.tsx.snap
+++ /dev/null
@@ -1,1740 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Header /> should match the snapshot 1`] = `
-.c10 {
-  max-width: 30rem;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding: 0px 1.5rem;
-}
-
-.c10 .outerContainer {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c10 .outerContainer .header-search-bar.input-container {
-  height: 2.28rem;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper {
-  border-radius: 1.14rem;
-  border-color: #0054fe;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper input::-webkit-input-placeholder {
-  color: #222a44;
-  font-size: 12px;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper input::-moz-placeholder {
-  color: #222a44;
-  font-size: 12px;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper input:-ms-input-placeholder {
-  color: #222a44;
-  font-size: 12px;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper input::placeholder {
-  color: #222a44;
-  font-size: 12px;
-}
-
-.c4 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  min-height: 5rem;
-}
-
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-right: 4rem;
-}
-
-.c3 .navbar-burger {
-  color: #4c4d52;
-  display: none;
-}
-
-.c6 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c7 {
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin-right: auto;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c9 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  margin-left: auto;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  margin: 0 auto;
-  position: relative;
-  padding: 0 2.86rem;
-}
-
-.c1 {
-  background-color: white;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  width: 100vw;
-  z-index: 1000;
-  min-height: 5rem;
-}
-
-.c8 {
-  min-height: 2.14rem;
-}
-
-.c8 .navbar-link {
-  position: relative;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.c8 .navbar-link:hover {
-  background-color: rgba(100%,87%,11%,70%);
-}
-
-.c8 .navbar-link.matched {
-  background-color: #fede1b;
-}
-
-.c8 .navbar-link.matched:hover {
-  background-color: #fede1b;
-}
-
-.c8 .navbar-link-menu > a.link.navbar-link svg {
-  -webkit-transition: all 0.2s ease-out;
-  transition: all 0.2s ease-out;
-}
-
-.c8 .navbar-link-menu.expanded .header-link-menu > span {
-  width: 100%;
-}
-
-.c8 .navbar-link-menu.expanded > span > a.link.navbar-link svg {
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-.c8 a.link.navbar-link {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #65709a;
-  padding: 0.43rem 1.5rem;
-}
-
-.c8 a.link.navbar-link.level-1 {
-  width: auto;
-}
-
-.c8 a.link.navbar-link.level-1.matched {
-  background-color: #65709a;
-}
-
-.c8 a.link.navbar-link.level-1:hover:not(.matched) {
-  background-color: #f1f4f6;
-}
-
-.c5 .confi-logo {
-  margin-right: 0.57rem;
-  width: 3.3571rem;
-}
-
-.c5 a.link {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link.level-0 {
-  padding: 0.43rem 0.57rem;
-}
-
-.c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link.level-0 svg {
-  display: none;
-}
-
-.c0 .navbar-menu .navbar-end .navbar-item:nth-child(1) {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-@media (max-width:1024px) {
-  .c10 .outerContainer {
-    max-width: unset;
-    left: 20rem;
-    right: 5rem;
-    position: fixed;
-    top: 0.68rem;
-    z-index: 2000;
-    padding: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex-grow: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container {
-    height: 2.67rem;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper {
-    background-color: rgba(0,84,254,0.04);
-    border: 0;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper input::-webkit-input-placeholder {
-    color: #222a44;
-    text-align: end;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper input::-moz-placeholder {
-    color: #222a44;
-    text-align: end;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper input:-ms-input-placeholder {
-    color: #222a44;
-    text-align: end;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper input::placeholder {
-    color: #222a44;
-    text-align: end;
-  }
-}
-
-@media (max-width:600px) {
-  .c10 .outerContainer {
-    position: absolute;
-    left: 1.33rem;
-    right: 1.33rem;
-    top: 5.67rem;
-    z-index: 100;
-  }
-}
-
-@media (max-width:1024px) {
-  .c4 {
-    min-height: 2.14rem;
-  }
-}
-
-@media (max-width:1024px) {
-  .c3 {
-    margin-right: 0;
-  }
-
-  .c3 .navbar-burger {
-    cursor: pointer;
-    display: block;
-    height: 4rem;
-    position: relative;
-    width: 3.25rem;
-    margin-left: auto;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-  }
-
-  .c3 .navbar-burger span {
-    background-color: currentColor;
-    display: block;
-    height: 2px;
-    left: calc(50% - 8px);
-    position: absolute;
-    -webkit-transform-origin: center;
-    -ms-transform-origin: center;
-    transform-origin: center;
-    -webkit-transition-duration: 86ms;
-    transition-duration: 86ms;
-    -webkit-transition-property: background-color,opacity,-webkit-transform;
-    -webkit-transition-property: background-color,opacity,transform;
-    transition-property: background-color,opacity,transform;
-    -webkit-transition-timing-function: ease-out;
-    transition-timing-function: ease-out;
-    width: 18px;
-  }
-
-  .c3 .navbar-burger span:nth-child(1) {
-    top: calc(50% - 6px);
-  }
-
-  .c3 .navbar-burger span:nth-child(2) {
-    top: calc(50% - 1px);
-  }
-
-  .c3 .navbar-burger span:nth-child(3) {
-    top: calc(50% + 4px);
-  }
-
-  .c3 .navbar-burger.is-active span:nth-child(1) {
-    -webkit-transform: translateY(5px) rotate(45deg);
-    -ms-transform: translateY(5px) rotate(45deg);
-    transform: translateY(5px) rotate(45deg);
-  }
-
-  .c3 .navbar-burger.is-active span:nth-child(2) {
-    opacity: 0;
-  }
-
-  .c3 .navbar-burger.is-active span:nth-child(3) {
-    -webkit-transform: translateY(-5px) rotate(-45deg);
-    -ms-transform: translateY(-5px) rotate(-45deg);
-    transform: translateY(-5px) rotate(-45deg);
-  }
-}
-
-@media (max-width:1024px) {
-  .c6 {
-    width: 100vw;
-    position: absolute;
-    left: 0;
-    display: none;
-  }
-}
-
-@media (max-width:1024px) {
-  .c7 {
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    margin-bottom: 4.43rem;
-  }
-}
-
-@media (max-width:1024px) {
-  .c9 {
-    -webkit-align-items: baseline;
-    -webkit-box-align: baseline;
-    -ms-flex-align: baseline;
-    align-items: baseline;
-    -webkit-box-pack: start;
-    -webkit-justify-content: flex-start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-  }
-}
-
-@media (max-width:1024px) {
-  .c2 {
-    display: block;
-    padding: 0 1.71rem;
-  }
-}
-
-@media (max-width:1024px) {
-  .c1 {
-    min-height: 4rem;
-  }
-}
-
-@media (max-width:1024px) {
-  .c8 .navbar-link:hover {
-    background-color: transparent;
-  }
-
-  .c8 a.link.navbar-link {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    color: #aab9eb;
-  }
-
-  .c8 a.link.navbar-link:hover {
-    color: #aab9eb;
-  }
-}
-
-@media (max-width:1024px) {
-  .c5 a.link svg {
-    display: none;
-  }
-}
-
-@media (max-width:1024px) {
-  .c0 .navbar-menu {
-    background-color: #4a5064;
-    padding: 1.64rem 5.14rem;
-    padding-bottom: 3.86rem;
-  }
-
-  .c0 .navbar-menu .navbar-start .navbar-item:nth-child(1) {
-    margin-bottom: 3rem;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-align-items: baseline;
-    -webkit-box-align: baseline;
-    -ms-flex-align: baseline;
-    align-items: baseline;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item .header-link-menu {
-    padding-left: 0;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link {
-    padding: 0.43rem 1.5rem;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link.level-0 {
-    padding: 0.43rem 1.5rem;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link.level-0 svg {
-    display: block;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item:nth-child(1) {
-    -webkit-box-flex: 0;
-    -webkit-flex-grow: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-  }
-}
-
-<header
-  class="c0"
->
-  <nav
-    class="c1"
-  >
-    <div
-      class="c2"
-    >
-      <div
-        class="c3 navbar-brand"
-      >
-        <div
-          class="c4 navbar-item"
-        >
-          <div
-            class="c5"
-          >
-            <a
-              href="/"
-            >
-              <img
-                alt="conflux scan logo"
-                class="confi-logo"
-                src="confi-planet.png"
-              />
-            </a>
-          </div>
-        </div>
-        <a
-          aria-expanded="true"
-          aria-label="menu"
-          class="navbar-burger"
-          data-target="navbar"
-          role="button"
-        >
-          <span
-            aria-hidden="true"
-          />
-          <span
-            aria-hidden="true"
-          />
-          <span
-            aria-hidden="true"
-          />
-        </a>
-      </div>
-      <div
-        class="c6 navbar-menu"
-      >
-        <div
-          class="c7 navbar-start"
-        >
-          <div
-            class="c4 navbar-item"
-          >
-            <svg
-              height="22px"
-              viewBox="0 0 79 30"
-              width="58px"
-            >
-              <title>
-                scan text
-              </title>
-              <g
-                fill="none"
-                fill-rule="evenodd"
-                id="Page-1"
-                stroke-width="1"
-              >
-                <g
-                  fill-rule="nonzero"
-                  id="scan-text"
-                >
-                  <path
-                    d="M9.4198632,0.271168831 L9.4198632,2.39953901 L2.26599481,2.39953901 L2.26599481,7.41818623 L9.4198632,7.41818623 L9.4198632,9.54655641 L0.135584416,9.54655641 L0.135584416,0.271168831 L9.4198632,0.271168831 Z M20.6704196,0.271168831 L20.6704196,9.54655641 L11.3861408,9.54655641 L11.3861408,0.271168831 L20.6704196,0.271168831 Z M31.9209759,0.271168831 L31.9209759,9.54655641 L29.7905655,9.54655641 L29.7905655,2.39953901 L24.7654496,2.39953901 L24.7654496,9.54655641 L22.6366972,9.54655641 L22.6366972,0.271168831 L31.9209759,0.271168831 Z M43.0621104,0.271168831 L43.0621104,2.39953901 L35.9612952,2.39953901 L35.9612952,3.81734827 L40.7128565,3.81734827 L40.7128565,6.00037697 L35.9612952,6.00037697 L35.9612952,9.54655641 L33.7778317,9.54655641 L33.7778317,0.271168831 L43.0621104,0.271168831 Z M47.1571406,0.271168831 L47.1571406,7.41818623 L52.1822565,7.41818623 L52.1822565,4.90886262 L54.3126669,4.90886262 L54.3126669,9.54655641 L45.0283882,9.54655641 L45.0283882,0.271168831 L47.1571406,0.271168831 Z M58.1905112,0.271168831 L58.1905112,7.41818623 L63.2139691,7.41818623 L63.2139691,0.271168831 L65.3443795,0.271168831 L65.3443795,9.54655641 L56.0601008,9.54655641 L56.0601008,0.271168831 L58.1905112,0.271168831 Z M69.7676753,0.271168831 L69.7676753,1.21030182 L72.1699824,3.61030837 L74.5739475,1.21030182 L74.5739475,0.271168831 L76.8121217,0.271168831 L76.8121217,2.44260332 L74.3451562,4.90886262 L74.5739475,5.13743466 L76.8121217,7.37512193 L76.8121217,9.54655641 L74.5739475,9.54655641 L74.5739475,8.60742343 L72.1699824,6.20576057 L69.7676753,8.60742343 L69.7676753,9.54655641 L67.527843,9.54655641 L67.527843,7.37512193 L69.7676753,5.13743466 L69.9964664,4.90886262 L67.527843,2.44260332 L67.527843,0.271168831 L69.7676753,0.271168831 Z M18.5383513,2.39953901 L13.5165511,2.39953901 L13.5165511,7.41818623 L18.5383513,7.41818623 L18.5383513,2.39953901 Z"
-                    fill="#676A71"
-                    fill-opacity="0.8"
-                    id="Conflux"
-                  />
-                  <path
-                    d="M18.0680004,29.4675208 L18.0680004,18.2585447 L4.62112091,18.2585447 L4.62112091,16.0206414 L18.0680004,16.0206414 L18.0680004,11.5351049 L0.135584416,11.5351049 L0.135584416,22.7440811 L13.582464,22.7440811 L13.582464,24.9819843 L0.135584416,24.9819843 L0.135584416,29.4675208 L18.0680004,29.4675208 Z M37.8554938,29.4675208 L37.8554938,24.9819843 L24.4086145,24.9819843 L24.4086145,16.0206414 L37.8554938,16.0206414 L37.8554938,11.5351049 L19.9230779,11.5351049 L19.9230779,29.4675208 L37.8554938,29.4675208 Z M57.5149678,29.3395012 L57.5149678,11.5351049 L39.7105715,11.5351049 L39.7105715,15.9807691 L53.0693034,15.9807691 L53.0693034,18.2090361 L39.7105715,18.2090361 L39.7105715,24.8829673 L39.7105715,29.3395012 L57.5149678,29.3395012 Z M53.0693034,24.8829673 L43.6544227,24.8829673 L43.6544227,22.6764395 L53.0693034,22.6818743 L53.0693034,24.8829673 Z M63.9836014,29.4675208 L63.9836014,16.0206414 L72.9449444,16.0206414 L72.9449444,29.4675208 L77.4304809,29.4675208 L77.4304809,11.5351049 L59.4980649,11.5351049 L59.4980649,29.4675208 L63.9836014,29.4675208 Z"
-                    fill="#4C4D52"
-                    id="SCAN"
-                  />
-                </g>
-              </g>
-            </svg>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-            >
-              <a
-                class="link navbar-link level-0 matched"
-                href="/"
-              >
-                Home
-              </a>
-            </span>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-            >
-              <a
-                class="link navbar-link level-0"
-                href="/blocks-and-transactions"
-              >
-                Blocks & Transactions
-              </a>
-            </span>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-              style="margin-left: -18px;"
-            >
-              <div
-                class="link navbar-link-menu navbar-link"
-              >
-                <span
-                  class="c8"
-                >
-                  <a
-                    class="jsx-1150746702 link navbar-link level-0"
-                    href=""
-                  >
-                    <svg
-                      fill="none"
-                      height="18"
-                      shape-rendering="geometricPrecision"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                      style="color: currentColor;"
-                      viewBox="0 0 24 24"
-                      width="18"
-                    >
-                      <path
-                        d="M6 9l6 6 6-6"
-                      />
-                    </svg>
-                    Tokens
-                  </a>
-                </span>
-              </div>
-            </span>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-              style="margin-left: -18px;"
-            >
-              <div
-                class="link navbar-link-menu navbar-link"
-              >
-                <span
-                  class="c8"
-                >
-                  <a
-                    class="jsx-1150746702 link navbar-link level-0"
-                    href=""
-                  >
-                    <svg
-                      fill="none"
-                      height="18"
-                      shape-rendering="geometricPrecision"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                      style="color: currentColor;"
-                      viewBox="0 0 24 24"
-                      width="18"
-                    >
-                      <path
-                        d="M6 9l6 6 6-6"
-                      />
-                    </svg>
-                    Contract
-                  </a>
-                </span>
-              </div>
-            </span>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-            >
-              <a
-                class="link navbar-link level-0"
-                href="/pow-charts"
-              >
-                Charts
-              </a>
-            </span>
-          </div>
-        </div>
-        <div
-          class="c9 navbar-end"
-        >
-          <div
-            class="c4 navbar-item"
-          />
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-              style="margin-left: -18px;"
-            >
-              <div
-                class="link navbar-link-menu navbar-link"
-              >
-                <span
-                  class="c8"
-                >
-                  <a
-                    class="jsx-1150746702 link navbar-link level-0"
-                    href=""
-                  >
-                    <svg
-                      fill="none"
-                      height="18"
-                      shape-rendering="geometricPrecision"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                      style="color: currentColor;"
-                      viewBox="0 0 24 24"
-                      width="18"
-                    >
-                      <path
-                        d="M6 9l6 6 6-6"
-                      />
-                    </svg>
-                    Hydra
-                  </a>
-                </span>
-              </div>
-            </span>
-            <span
-              class="c8"
-              style="margin-left: -18px;"
-            >
-              <div
-                class="link navbar-link-menu navbar-link"
-              >
-                <span
-                  class="c8"
-                >
-                  <a
-                    class="jsx-1150746702 link navbar-link level-0"
-                    href=""
-                  >
-                    <svg
-                      fill="none"
-                      height="18"
-                      shape-rendering="geometricPrecision"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                      style="color: currentColor;"
-                      viewBox="0 0 24 24"
-                      width="18"
-                    >
-                      <path
-                        d="M6 9l6 6 6-6"
-                      />
-                    </svg>
-                    <div
-                      class="header-link-lang-title"
-                      style="min-width: 2.1rem;"
-                    >
-                      EN
-                    </div>
-                  </a>
-                </span>
-              </div>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nav>
-  <div
-    class="c10"
-  >
-    <div
-      class="outerContainer"
-    >
-      <div
-        class="jsx-1159070929 with-label"
-      >
-        <div
-          class="jsx-1159070929 input-container header-search-bar"
-        >
-          <div
-            class="jsx-1159070929 input-wrapper line    "
-          >
-            <input
-              autocomplete="off"
-              class="jsx-1159070929 right-icon"
-              placeholder="Epoch / Block hash / Txn Hash / Address"
-              type="text"
-              value=""
-            />
-            <span
-              class="jsx-2293214799 input-icon"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</header>
-`;
-
-exports[`<Header /> should match the snapshot when link is matched 1`] = `
-.c10 {
-  max-width: 30rem;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  padding: 0px 1.5rem;
-}
-
-.c10 .outerContainer {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c10 .outerContainer .header-search-bar.input-container {
-  height: 2.28rem;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper {
-  border-radius: 1.14rem;
-  border-color: #0054fe;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper input::-webkit-input-placeholder {
-  color: #222a44;
-  font-size: 12px;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper input::-moz-placeholder {
-  color: #222a44;
-  font-size: 12px;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper input:-ms-input-placeholder {
-  color: #222a44;
-  font-size: 12px;
-}
-
-.c10 .outerContainer .header-search-bar.input-container .input-wrapper input::placeholder {
-  color: #222a44;
-  font-size: 12px;
-}
-
-.c4 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  min-height: 5rem;
-}
-
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-right: 4rem;
-}
-
-.c3 .navbar-burger {
-  color: #4c4d52;
-  display: none;
-}
-
-.c6 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c7 {
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin-right: auto;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c9 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  margin-left: auto;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  margin: 0 auto;
-  position: relative;
-  padding: 0 2.86rem;
-}
-
-.c1 {
-  background-color: white;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  width: 100vw;
-  z-index: 1000;
-  min-height: 5rem;
-}
-
-.c8 {
-  min-height: 2.14rem;
-}
-
-.c8 .navbar-link {
-  position: relative;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.c8 .navbar-link:hover {
-  background-color: rgba(100%,87%,11%,70%);
-}
-
-.c8 .navbar-link.matched {
-  background-color: #fede1b;
-}
-
-.c8 .navbar-link.matched:hover {
-  background-color: #fede1b;
-}
-
-.c8 .navbar-link-menu > a.link.navbar-link svg {
-  -webkit-transition: all 0.2s ease-out;
-  transition: all 0.2s ease-out;
-}
-
-.c8 .navbar-link-menu.expanded .header-link-menu > span {
-  width: 100%;
-}
-
-.c8 .navbar-link-menu.expanded > span > a.link.navbar-link svg {
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-.c8 a.link.navbar-link {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #65709a;
-  padding: 0.43rem 1.5rem;
-}
-
-.c8 a.link.navbar-link.level-1 {
-  width: auto;
-}
-
-.c8 a.link.navbar-link.level-1.matched {
-  background-color: #65709a;
-}
-
-.c8 a.link.navbar-link.level-1:hover:not(.matched) {
-  background-color: #f1f4f6;
-}
-
-.c5 .confi-logo {
-  margin-right: 0.57rem;
-  width: 3.3571rem;
-}
-
-.c5 a.link {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link.level-0 {
-  padding: 0.43rem 0.57rem;
-}
-
-.c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link.level-0 svg {
-  display: none;
-}
-
-.c0 .navbar-menu .navbar-end .navbar-item:nth-child(1) {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-@media (max-width:1024px) {
-  .c10 .outerContainer {
-    max-width: unset;
-    left: 20rem;
-    right: 5rem;
-    position: fixed;
-    top: 0.68rem;
-    z-index: 2000;
-    padding: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex-grow: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container {
-    height: 2.67rem;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper {
-    background-color: rgba(0,84,254,0.04);
-    border: 0;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper input::-webkit-input-placeholder {
-    color: #222a44;
-    text-align: end;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper input::-moz-placeholder {
-    color: #222a44;
-    text-align: end;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper input:-ms-input-placeholder {
-    color: #222a44;
-    text-align: end;
-  }
-
-  .c10 .outerContainer .header-search-bar.input-container .input-wrapper input::placeholder {
-    color: #222a44;
-    text-align: end;
-  }
-}
-
-@media (max-width:600px) {
-  .c10 .outerContainer {
-    position: absolute;
-    left: 1.33rem;
-    right: 1.33rem;
-    top: 5.67rem;
-    z-index: 100;
-  }
-}
-
-@media (max-width:1024px) {
-  .c4 {
-    min-height: 2.14rem;
-  }
-}
-
-@media (max-width:1024px) {
-  .c3 {
-    margin-right: 0;
-  }
-
-  .c3 .navbar-burger {
-    cursor: pointer;
-    display: block;
-    height: 4rem;
-    position: relative;
-    width: 3.25rem;
-    margin-left: auto;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-  }
-
-  .c3 .navbar-burger span {
-    background-color: currentColor;
-    display: block;
-    height: 2px;
-    left: calc(50% - 8px);
-    position: absolute;
-    -webkit-transform-origin: center;
-    -ms-transform-origin: center;
-    transform-origin: center;
-    -webkit-transition-duration: 86ms;
-    transition-duration: 86ms;
-    -webkit-transition-property: background-color,opacity,-webkit-transform;
-    -webkit-transition-property: background-color,opacity,transform;
-    transition-property: background-color,opacity,transform;
-    -webkit-transition-timing-function: ease-out;
-    transition-timing-function: ease-out;
-    width: 18px;
-  }
-
-  .c3 .navbar-burger span:nth-child(1) {
-    top: calc(50% - 6px);
-  }
-
-  .c3 .navbar-burger span:nth-child(2) {
-    top: calc(50% - 1px);
-  }
-
-  .c3 .navbar-burger span:nth-child(3) {
-    top: calc(50% + 4px);
-  }
-
-  .c3 .navbar-burger.is-active span:nth-child(1) {
-    -webkit-transform: translateY(5px) rotate(45deg);
-    -ms-transform: translateY(5px) rotate(45deg);
-    transform: translateY(5px) rotate(45deg);
-  }
-
-  .c3 .navbar-burger.is-active span:nth-child(2) {
-    opacity: 0;
-  }
-
-  .c3 .navbar-burger.is-active span:nth-child(3) {
-    -webkit-transform: translateY(-5px) rotate(-45deg);
-    -ms-transform: translateY(-5px) rotate(-45deg);
-    transform: translateY(-5px) rotate(-45deg);
-  }
-}
-
-@media (max-width:1024px) {
-  .c6 {
-    width: 100vw;
-    position: absolute;
-    left: 0;
-    display: none;
-  }
-}
-
-@media (max-width:1024px) {
-  .c7 {
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    margin-bottom: 4.43rem;
-  }
-}
-
-@media (max-width:1024px) {
-  .c9 {
-    -webkit-align-items: baseline;
-    -webkit-box-align: baseline;
-    -ms-flex-align: baseline;
-    align-items: baseline;
-    -webkit-box-pack: start;
-    -webkit-justify-content: flex-start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-  }
-}
-
-@media (max-width:1024px) {
-  .c2 {
-    display: block;
-    padding: 0 1.71rem;
-  }
-}
-
-@media (max-width:1024px) {
-  .c1 {
-    min-height: 4rem;
-  }
-}
-
-@media (max-width:1024px) {
-  .c8 .navbar-link:hover {
-    background-color: transparent;
-  }
-
-  .c8 a.link.navbar-link {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    color: #aab9eb;
-  }
-
-  .c8 a.link.navbar-link:hover {
-    color: #aab9eb;
-  }
-}
-
-@media (max-width:1024px) {
-  .c5 a.link svg {
-    display: none;
-  }
-}
-
-@media (max-width:1024px) {
-  .c0 .navbar-menu {
-    background-color: #4a5064;
-    padding: 1.64rem 5.14rem;
-    padding-bottom: 3.86rem;
-  }
-
-  .c0 .navbar-menu .navbar-start .navbar-item:nth-child(1) {
-    margin-bottom: 3rem;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-align-items: baseline;
-    -webkit-box-align: baseline;
-    -ms-flex-align: baseline;
-    align-items: baseline;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item .header-link-menu {
-    padding-left: 0;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link {
-    padding: 0.43rem 1.5rem;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link.level-0 {
-    padding: 0.43rem 1.5rem;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item .navbar-link-menu .navbar-link.level-0 svg {
-    display: block;
-  }
-
-  .c0 .navbar-menu .navbar-end .navbar-item:nth-child(1) {
-    -webkit-box-flex: 0;
-    -webkit-flex-grow: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-  }
-}
-
-<header
-  class="c0"
->
-  <nav
-    class="c1"
-  >
-    <div
-      class="c2"
-    >
-      <div
-        class="c3 navbar-brand"
-      >
-        <div
-          class="c4 navbar-item"
-        >
-          <div
-            class="c5"
-          >
-            <a
-              href="/"
-            >
-              <img
-                alt="conflux scan logo"
-                class="confi-logo"
-                src="confi-planet.png"
-              />
-            </a>
-          </div>
-        </div>
-        <a
-          aria-expanded="true"
-          aria-label="menu"
-          class="navbar-burger"
-          data-target="navbar"
-          role="button"
-        >
-          <span
-            aria-hidden="true"
-          />
-          <span
-            aria-hidden="true"
-          />
-          <span
-            aria-hidden="true"
-          />
-        </a>
-      </div>
-      <div
-        class="c6 navbar-menu"
-      >
-        <div
-          class="c7 navbar-start"
-        >
-          <div
-            class="c4 navbar-item"
-          >
-            <svg
-              height="22px"
-              viewBox="0 0 79 30"
-              width="58px"
-            >
-              <title>
-                scan text
-              </title>
-              <g
-                fill="none"
-                fill-rule="evenodd"
-                id="Page-1"
-                stroke-width="1"
-              >
-                <g
-                  fill-rule="nonzero"
-                  id="scan-text"
-                >
-                  <path
-                    d="M9.4198632,0.271168831 L9.4198632,2.39953901 L2.26599481,2.39953901 L2.26599481,7.41818623 L9.4198632,7.41818623 L9.4198632,9.54655641 L0.135584416,9.54655641 L0.135584416,0.271168831 L9.4198632,0.271168831 Z M20.6704196,0.271168831 L20.6704196,9.54655641 L11.3861408,9.54655641 L11.3861408,0.271168831 L20.6704196,0.271168831 Z M31.9209759,0.271168831 L31.9209759,9.54655641 L29.7905655,9.54655641 L29.7905655,2.39953901 L24.7654496,2.39953901 L24.7654496,9.54655641 L22.6366972,9.54655641 L22.6366972,0.271168831 L31.9209759,0.271168831 Z M43.0621104,0.271168831 L43.0621104,2.39953901 L35.9612952,2.39953901 L35.9612952,3.81734827 L40.7128565,3.81734827 L40.7128565,6.00037697 L35.9612952,6.00037697 L35.9612952,9.54655641 L33.7778317,9.54655641 L33.7778317,0.271168831 L43.0621104,0.271168831 Z M47.1571406,0.271168831 L47.1571406,7.41818623 L52.1822565,7.41818623 L52.1822565,4.90886262 L54.3126669,4.90886262 L54.3126669,9.54655641 L45.0283882,9.54655641 L45.0283882,0.271168831 L47.1571406,0.271168831 Z M58.1905112,0.271168831 L58.1905112,7.41818623 L63.2139691,7.41818623 L63.2139691,0.271168831 L65.3443795,0.271168831 L65.3443795,9.54655641 L56.0601008,9.54655641 L56.0601008,0.271168831 L58.1905112,0.271168831 Z M69.7676753,0.271168831 L69.7676753,1.21030182 L72.1699824,3.61030837 L74.5739475,1.21030182 L74.5739475,0.271168831 L76.8121217,0.271168831 L76.8121217,2.44260332 L74.3451562,4.90886262 L74.5739475,5.13743466 L76.8121217,7.37512193 L76.8121217,9.54655641 L74.5739475,9.54655641 L74.5739475,8.60742343 L72.1699824,6.20576057 L69.7676753,8.60742343 L69.7676753,9.54655641 L67.527843,9.54655641 L67.527843,7.37512193 L69.7676753,5.13743466 L69.9964664,4.90886262 L67.527843,2.44260332 L67.527843,0.271168831 L69.7676753,0.271168831 Z M18.5383513,2.39953901 L13.5165511,2.39953901 L13.5165511,7.41818623 L18.5383513,7.41818623 L18.5383513,2.39953901 Z"
-                    fill="#676A71"
-                    fill-opacity="0.8"
-                    id="Conflux"
-                  />
-                  <path
-                    d="M18.0680004,29.4675208 L18.0680004,18.2585447 L4.62112091,18.2585447 L4.62112091,16.0206414 L18.0680004,16.0206414 L18.0680004,11.5351049 L0.135584416,11.5351049 L0.135584416,22.7440811 L13.582464,22.7440811 L13.582464,24.9819843 L0.135584416,24.9819843 L0.135584416,29.4675208 L18.0680004,29.4675208 Z M37.8554938,29.4675208 L37.8554938,24.9819843 L24.4086145,24.9819843 L24.4086145,16.0206414 L37.8554938,16.0206414 L37.8554938,11.5351049 L19.9230779,11.5351049 L19.9230779,29.4675208 L37.8554938,29.4675208 Z M57.5149678,29.3395012 L57.5149678,11.5351049 L39.7105715,11.5351049 L39.7105715,15.9807691 L53.0693034,15.9807691 L53.0693034,18.2090361 L39.7105715,18.2090361 L39.7105715,24.8829673 L39.7105715,29.3395012 L57.5149678,29.3395012 Z M53.0693034,24.8829673 L43.6544227,24.8829673 L43.6544227,22.6764395 L53.0693034,22.6818743 L53.0693034,24.8829673 Z M63.9836014,29.4675208 L63.9836014,16.0206414 L72.9449444,16.0206414 L72.9449444,29.4675208 L77.4304809,29.4675208 L77.4304809,11.5351049 L59.4980649,11.5351049 L59.4980649,29.4675208 L63.9836014,29.4675208 Z"
-                    fill="#4C4D52"
-                    id="SCAN"
-                  />
-                </g>
-              </g>
-            </svg>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-            >
-              <a
-                class="link navbar-link level-0 matched"
-                href="/"
-              >
-                Home
-              </a>
-            </span>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-            >
-              <a
-                class="link navbar-link level-0"
-                href="/blocks-and-transactions"
-              >
-                Blocks & Transactions
-              </a>
-            </span>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-              style="margin-left: -18px;"
-            >
-              <div
-                class="link navbar-link-menu navbar-link"
-              >
-                <span
-                  class="c8"
-                >
-                  <a
-                    class="jsx-1150746702 link navbar-link level-0"
-                    href=""
-                  >
-                    <svg
-                      fill="none"
-                      height="18"
-                      shape-rendering="geometricPrecision"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                      style="color: currentColor;"
-                      viewBox="0 0 24 24"
-                      width="18"
-                    >
-                      <path
-                        d="M6 9l6 6 6-6"
-                      />
-                    </svg>
-                    Tokens
-                  </a>
-                </span>
-              </div>
-            </span>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-              style="margin-left: -18px;"
-            >
-              <div
-                class="link navbar-link-menu navbar-link"
-              >
-                <span
-                  class="c8"
-                >
-                  <a
-                    class="jsx-1150746702 link navbar-link level-0"
-                    href=""
-                  >
-                    <svg
-                      fill="none"
-                      height="18"
-                      shape-rendering="geometricPrecision"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                      style="color: currentColor;"
-                      viewBox="0 0 24 24"
-                      width="18"
-                    >
-                      <path
-                        d="M6 9l6 6 6-6"
-                      />
-                    </svg>
-                    Contract
-                  </a>
-                </span>
-              </div>
-            </span>
-          </div>
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-            >
-              <a
-                class="link navbar-link level-0"
-                href="/pow-charts"
-              >
-                Charts
-              </a>
-            </span>
-          </div>
-        </div>
-        <div
-          class="c9 navbar-end"
-        >
-          <div
-            class="c4 navbar-item"
-          />
-          <div
-            class="c4 navbar-item"
-          >
-            <span
-              class="c8"
-              style="margin-left: -18px;"
-            >
-              <div
-                class="link navbar-link-menu navbar-link"
-              >
-                <span
-                  class="c8"
-                >
-                  <a
-                    class="jsx-1150746702 link navbar-link level-0"
-                    href=""
-                  >
-                    <svg
-                      fill="none"
-                      height="18"
-                      shape-rendering="geometricPrecision"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                      style="color: currentColor;"
-                      viewBox="0 0 24 24"
-                      width="18"
-                    >
-                      <path
-                        d="M6 9l6 6 6-6"
-                      />
-                    </svg>
-                    Hydra
-                  </a>
-                </span>
-              </div>
-            </span>
-            <span
-              class="c8"
-              style="margin-left: -18px;"
-            >
-              <div
-                class="link navbar-link-menu navbar-link"
-              >
-                <span
-                  class="c8"
-                >
-                  <a
-                    class="jsx-1150746702 link navbar-link level-0"
-                    href=""
-                  >
-                    <svg
-                      fill="none"
-                      height="18"
-                      shape-rendering="geometricPrecision"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                      style="color: currentColor;"
-                      viewBox="0 0 24 24"
-                      width="18"
-                    >
-                      <path
-                        d="M6 9l6 6 6-6"
-                      />
-                    </svg>
-                    <div
-                      class="header-link-lang-title"
-                      style="min-width: 2.1rem;"
-                    >
-                      EN
-                    </div>
-                  </a>
-                </span>
-              </div>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nav>
-  <div
-    class="c10"
-  >
-    <div
-      class="outerContainer"
-    >
-      <div
-        class="jsx-1159070929 with-label"
-      >
-        <div
-          class="jsx-1159070929 input-container header-search-bar"
-        >
-          <div
-            class="jsx-1159070929 input-wrapper line    "
-          >
-            <input
-              autocomplete="off"
-              class="jsx-1159070929 right-icon"
-              placeholder="Epoch / Block hash / Txn Hash / Address"
-              type="text"
-              value=""
-            />
-            <span
-              class="jsx-2293214799 input-icon"
-            >
-              <svg
-                height="16px"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="Web"
-                  stroke="none"
-                  stroke-width="1"
-                >
-                  <g
-                    transform="translate(-1208.000000, -28.000000)"
-                  >
-                    <g
-                      transform="translate(884.000000, 20.000000)"
-                    >
-                      <g
-                        transform="translate(324.000000, 8.000000)"
-                      >
-                        <rect
-                          height="16"
-                          width="16"
-                          x="0"
-                          y="0"
-                        />
-                        <path
-                          d="M7,13 C10.3137085,13 13,10.3137085 13,7 C13,3.6862915 10.3137085,1 7,1 C3.6862915,1 1,3.6862915 1,7 C1,10.3137085 3.6862915,13 7,13 Z M15,15 L12,12"
-                          stroke="#0054FE"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                        />
-                      </g>
-                    </g>
-                  </g>
-                </g>
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</header>
-`;
diff --git a/src/app/containers/Header/__/index.tsx b/src/app/containers/Header/__/index.tsx
deleted file mode 100644
index 1a0998c68..000000000
--- a/src/app/containers/Header/__/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router';
-
-import { Header } from '..';
-
-const renderComponent = () =>
-  render(
-    <MemoryRouter>
-      <Header />
-    </MemoryRouter>,
-  );
-
-describe('<Header />', () => {
-  it('should match the snapshot', () => {
-    const ui = renderComponent();
-    expect(ui.container.firstChild).toMatchSnapshot();
-  });
-
-  it('should match the snapshot when link is matched', () => {
-    const ui = renderComponent();
-    expect(ui.container.firstChild).toMatchSnapshot();
-  });
-
-  it('should support expanded menu', async () => {
-    const ui = renderComponent();
-    userEvent.click(ui.getByText('Contract'));
-    expect(
-      ui.container.querySelector('.link.navbar-link-menu.navbar-link.expanded'),
-    ).toBeDefined();
-
-    userEvent.click(ui.getByText('Contract'));
-    await waitFor(
-      () =>
-        expect(
-          ui.container.querySelector(
-            '.link.navbar-link-menu.navbar-link.expanded',
-          ),
-        ).toBeFalsy(),
-      { timeout: 2000, interval: 200 },
-    );
-  });
-  // it('should support click on second level menu', async () => {
-  //   const ui = renderComponent();
-  //   userEvent.click(ui.getByText('Contract'));
-  //   expect(
-  //     ui.container.querySelector('.link.navbar-link-menu.navbar-link.expanded'),
-  //   ).toBeDefined();
-  //   userEvent.click(ui.getByText('Contract Registration'));
-  // });
-});
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 2f0e9243a..0903ddb64 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -481,8 +481,8 @@
     "suggestionBox": "Suggestion Box",
     "testnet": "Conflux Core (Testnet)",
     "oceanus": "Conflux Hydra",
-    "searchPlaceHolder": "Search by Epoch / Block Hash / Txn Hash / Address / Token / Contract Name Tag",
-    "searchPlaceHolderMobile": "Epoch/Block Hash/Txn Hash/Address/Token/Contract Name Tag",
+    "searchPlaceHolder": "Search by Epoch / Block Hash / Txn Hash / Address / Token / Contract Name Tag / .web3 Username",
+    "searchPlaceHolderMobile": "Epoch/Block Hash/Txn Hash/Address/Token/Contract Name Tag/.web3 Username",
     "addressConverter": "Address Format Conversion",
     "faucet": "Test Faucet",
     "broadcastTx": "Broadcast Transaction",
@@ -491,6 +491,7 @@
     "nftDetail": "NFT Detail",
     "notice": "Notice Center",
     "search": {
+      "ens": ".web3 Username",
       "tokens": "Tokens",
       "contracts": "Contracts",
       "contractsTip": "Only the 10 contracts with the earliest registration date are displayed"
@@ -1238,6 +1239,7 @@
       "scanQRCode": "Scan QR Code"
     },
     "notAvailable": "Not Available",
+    "noResult": "No Result",
     "security": {
       "notAvailable": "Not available",
       "finalized": "Finalized",
diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
index 4ecb6ca8b..37822d70d 100644
--- a/src/locales/zh_cn/translation.json
+++ b/src/locales/zh_cn/translation.json
@@ -480,8 +480,8 @@
     "suggestionBox": "意见箱",
     "testnet": "Conflux Core (Testnet)",
     "oceanus": "Conflux Hydra",
-    "searchPlaceHolder": "请输入纪元 / 区块哈希 / 交易哈希 / 地址 / 通证 / 合约名称标签",
-    "searchPlaceHolderMobile": "纪元/区块哈希/交易哈希/地址/通证/合约名称标签",
+    "searchPlaceHolder": "请输入纪元 / 区块哈希 / 交易哈希 / 地址 / 通证 / 合约名称标签 / .web3 用户名",
+    "searchPlaceHolderMobile": "纪元/区块哈希/交易哈希/地址/通证/合约名称标签/.web3 用户名",
     "addressConverter": "地址格式转换",
     "faucet": "测试水管",
     "broadcastTx": "广播交易",
@@ -490,6 +490,7 @@
     "nftDetail": "数字藏品详情",
     "notice": "通知中心",
     "search": {
+      "ens": ".web3 用户名",
       "tokens": "通证",
       "contracts": "合约",
       "contractsTip": "仅显示注册日期最早的 10 个合约"
@@ -1235,6 +1236,7 @@
       "scanQRCode": "扫描二维码"
     },
     "notAvailable": "暂无信息",
+    "noResult": "暂无结果",
     "security": {
       "notAvailable": "暂无信息",
       "finalized": "已确认",
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index c85400ea0..db24c7725 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -228,6 +228,33 @@ export const CROSS_SPACE_ADDRESS = IS_TESTNET
   ? CROSS_SPACE_ADDRESSES.testnet
   : CROSS_SPACE_ADDRESSES.mainnet;
 
+enum ENS_REGISTRY_ADDRESSES {
+  mainnet = '',
+  testnet = 'cfxtest:achg113s8916v2u756tvf6hdvmbsb73b16ykt1pvwm',
+}
+
+export const ENS_REGISTRY_ADDRESS = IS_TESTNET
+  ? ENS_REGISTRY_ADDRESSES.testnet
+  : ENS_REGISTRY_ADDRESSES.mainnet;
+
+enum ENS_PUBLIC_RESOLVER_ADDRESSES {
+  mainnet = '',
+  testnet = 'cfxtest:acecxexm0pg268m44jncw5bmagwwmun53jj9msmadj',
+}
+
+export const ENS_PUBLIC_RESOLVER_ADDRESS = IS_TESTNET
+  ? ENS_PUBLIC_RESOLVER_ADDRESSES.testnet
+  : ENS_PUBLIC_RESOLVER_ADDRESSES.mainnet;
+
+enum ENS_REVERSE_REGISTRAR_ADDRESSES {
+  mainnet = '',
+  testnet = 'cfxtest:ach1p03gkptxz07p4ecn66gjpd0xrnkkbj1n6p96d5',
+}
+
+export const ENS_REVERSE_REGISTRAR_ADDRESS = IS_TESTNET
+  ? ENS_REVERSE_REGISTRAR_ADDRESSES.testnet
+  : ENS_REVERSE_REGISTRAR_ADDRESSES.mainnet;
+
 let APIHost = IS_TESTNET
   ? `api-testnet${IS_PRE_RELEASE ? '-stage' : ''}.confluxscan.net`
   : `api${IS_PRE_RELEASE ? '-stage' : ''}.confluxscan.net`;
@@ -287,3 +314,5 @@ export const IS_FOREIGN_HOST = /.io$/.test(window.location.host);
 export const ENS_REQUEST_DELAYED_PERIOD = 100;
 export const ENS_REQUEST_EXPIRED_PERIOD = 5000;
 export const ENS_REQUEST_MIN_BUNDLE_SIZE = 100;
+
+export const ENS_COINID_CONFLUX = 503;
diff --git a/src/utils/contract/CNSPublicResolver.json b/src/utils/contract/CNSPublicResolver.json
new file mode 100644
index 000000000..22be003dd
--- /dev/null
+++ b/src/utils/contract/CNSPublicResolver.json
@@ -0,0 +1,42 @@
+[
+  "constructor(address,address,address,address)",
+  "event ABIChanged(bytes32 indexed,uint256 indexed)",
+  "event AddrChanged(bytes32 indexed,address)",
+  "event AddressChanged(bytes32 indexed,uint256,bytes)",
+  "event ApprovalForAll(address indexed,address indexed,bool)",
+  "event ContenthashChanged(bytes32 indexed,bytes)",
+  "event DNSRecordChanged(bytes32 indexed,bytes,uint16,bytes)",
+  "event DNSRecordDeleted(bytes32 indexed,bytes,uint16)",
+  "event DNSZonehashChanged(bytes32 indexed,bytes,bytes)",
+  "event InterfaceChanged(bytes32 indexed,bytes4 indexed,address)",
+  "event NameChanged(bytes32 indexed,string)",
+  "event PubkeyChanged(bytes32 indexed,bytes32,bytes32)",
+  "event TextChanged(bytes32 indexed,string indexed,string,string)",
+  "event VersionChanged(bytes32 indexed,uint64)",
+  "function ABI(bytes32,uint256) view returns (uint256, bytes)",
+  "function addr(bytes32,uint256) view returns (bytes)",
+  "function clearRecords(bytes32)",
+  "function contenthash(bytes32) view returns (bytes)",
+  "function dnsRecord(bytes32,bytes32,uint16) view returns (bytes)",
+  "function hasDNSRecords(bytes32,bytes32) view returns (bool)",
+  "function interfaceImplementer(bytes32,bytes4) view returns (address)",
+  "function isApprovedForAll(address,address) view returns (bool)",
+  "function multicall(bytes[]) returns (bytes[])",
+  "function multicallWithNodeCheck(bytes32,bytes[]) returns (bytes[])",
+  "function name(bytes32) view returns (string)",
+  "function pubkey(bytes32) view returns (bytes32, bytes32)",
+  "function recordVersions(bytes32) view returns (uint64)",
+  "function setABI(bytes32,uint256,bytes)",
+  "function setAddr(bytes32,uint256,bytes)",
+  "function setApprovalForAll(address,bool)",
+  "function setContenthash(bytes32,bytes)",
+  "function setDNSRecords(bytes32,bytes)",
+  "function setInterface(bytes32,bytes4,address)",
+  "function setName(bytes32,string)",
+  "function setPubkey(bytes32,bytes32,bytes32)",
+  "function setText(bytes32,string,string)",
+  "function setZonehash(bytes32,bytes)",
+  "function supportsInterface(bytes4) view returns (bool)",
+  "function text(bytes32,string) view returns (string)",
+  "function zonehash(bytes32) view returns (bytes)"
+]
diff --git a/src/utils/contract/CNSRegistry.json b/src/utils/contract/CNSRegistry.json
new file mode 100644
index 000000000..24fffbef6
--- /dev/null
+++ b/src/utils/contract/CNSRegistry.json
@@ -0,0 +1,19 @@
+[
+  "event ApprovalForAll(address indexed,address indexed,bool)",
+  "event NewOwner(bytes32 indexed,bytes32 indexed,address)",
+  "event NewResolver(bytes32 indexed,address)",
+  "event NewTTL(bytes32 indexed,uint64)",
+  "event Transfer(bytes32 indexed,address)",
+  "function isApprovedForAll(address,address) view returns (bool)",
+  "function owner(bytes32) view returns (address)",
+  "function recordExists(bytes32) view returns (bool)",
+  "function resolver(bytes32) view returns (address)",
+  "function setApprovalForAll(address,bool)",
+  "function setOwner(bytes32,address)",
+  "function setRecord(bytes32,address,address,uint64)",
+  "function setResolver(bytes32,address)",
+  "function setSubnodeOwner(bytes32,bytes32,address) returns (bytes32)",
+  "function setSubnodeRecord(bytes32,bytes32,address,address,uint64)",
+  "function setTTL(bytes32,uint64)",
+  "function ttl(bytes32) view returns (uint64)"
+]
diff --git a/src/utils/contract/CNSReverseRegistrar.json b/src/utils/contract/CNSReverseRegistrar.json
new file mode 100644
index 000000000..0e4e70ad9
--- /dev/null
+++ b/src/utils/contract/CNSReverseRegistrar.json
@@ -0,0 +1,21 @@
+[
+  "constructor(address)",
+  "event ControllerChanged(address indexed,bool)",
+  "event DefaultResolverChanged(address indexed)",
+  "event OwnershipTransferred(address indexed,address indexed)",
+  "event ReverseClaimed(address indexed,bytes32 indexed)",
+  "function claim(address) returns (bytes32)",
+  "function claimForAddr(address,address,address) returns (bytes32)",
+  "function claimWithResolver(address,address) returns (bytes32)",
+  "function controllers(address) view returns (bool)",
+  "function defaultResolver() view returns (address)",
+  "function ens() view returns (address)",
+  "function node(address) pure returns (bytes32)",
+  "function owner() view returns (address)",
+  "function renounceOwnership()",
+  "function setController(address,bool)",
+  "function setDefaultResolver(address)",
+  "function setName(string) returns (bytes32)",
+  "function setNameForAddr(address,address,address,string) returns (bytes32)",
+  "function transferOwnership(address)"
+]
diff --git a/src/utils/ens/index.ts b/src/utils/ens/index.ts
new file mode 100644
index 000000000..4a5f076d2
--- /dev/null
+++ b/src/utils/ens/index.ts
@@ -0,0 +1,65 @@
+import {
+  CFX,
+  ENS_REGISTRY_ADDRESS,
+  ENS_PUBLIC_RESOLVER_ADDRESS,
+  // ENS_REVERSE_REGISTRAR_ADDRESS,
+  ENS_COINID_CONFLUX,
+  NETWORK_ID,
+} from 'utils/constants';
+import CNSPublicResolverABI from '../contract/CNSPublicResolver.json';
+import CNSRegistryABI from '../contract/CNSRegistry.json';
+// import CNSReverseRegistrarABI from '../contract/CNSReverseRegistrar.json';
+import { hash } from '@ensdomains/eth-ens-namehash';
+import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
+import { isZeroAddress } from 'utils';
+import LogoENS from 'images/logo-cns.svg';
+
+const registry = CFX.Contract({
+  address: ENS_REGISTRY_ADDRESS,
+  abi: CNSRegistryABI,
+});
+
+const publicResolver = CFX.Contract({
+  address: ENS_PUBLIC_RESOLVER_ADDRESS,
+  abi: CNSPublicResolverABI,
+});
+
+// const reverseRegistry = CFX.Contract({
+//   address: ENS_REVERSE_REGISTRAR_ADDRESS,
+//   abi: CNSReverseRegistrarABI,
+// });
+
+function getResoverContract(address) {
+  try {
+    if (isZeroAddress(address)) {
+      return publicResolver;
+    } else {
+      return CFX.Contract({
+        abi: CNSPublicResolverABI,
+        address: address,
+      });
+    }
+  } catch (error) {
+    console.log('getResoverContract error: ', error);
+  }
+}
+
+export async function getAddress(name) {
+  try {
+    const nh = hash(name);
+    const resolverAddr = await registry.resolver(nh);
+    const resolverContract = getResoverContract(resolverAddr);
+    const addr = await resolverContract.addr(nh, ENS_COINID_CONFLUX);
+
+    return SDK.address.encodeCfxAddress(addr, NETWORK_ID);
+  } catch (error) {
+    console.log('getAddress error: ', error);
+    return '';
+  }
+}
+
+export function isValidENS(name: string) {
+  return /.*(\.web3|\.dao)$/i.test(name);
+}
+
+export { LogoENS };
diff --git a/yarn.lock b/yarn.lock
index 49ee85b51..e41422079 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1683,6 +1683,11 @@
   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@ensdomains/eth-ens-namehash@2.0.15":
+  version "2.0.15"
+  resolved "https://registry.npmmirror.com/@ensdomains/eth-ens-namehash/-/eth-ens-namehash-2.0.15.tgz#5e5f2f24ba802aff8bc19edd822c9a11200cdf4a"
+  integrity sha512-JRDFP6+Hczb1E0/HhIg0PONgBYasfGfDheujmfxaZaAv/NAH4jE6Kf48WbqfRZdxt4IZI3jl3Ri7sZ1nP09lgw==
+
 "@ethersproject/logger@^5.5.0":
   version "5.6.0"
   resolved "https://registry.npmjs.org/@ethersproject/logger/-/logger-5.6.0.tgz"

From 9fb9b4afc5fd2079de1ada3d1c23a459396ae9a5 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Mon, 12 Dec 2022 17:38:22 +0800
Subject: [PATCH 15/42] feat: add library config to contract verification

---
 .../containers/ContractVerification/index.tsx | 191 +++++++++++++++++-
 src/locales/en/translation.json               |   5 +
 src/locales/zh_cn/translation.json            |   5 +
 3 files changed, 199 insertions(+), 2 deletions(-)

diff --git a/src/app/containers/ContractVerification/index.tsx b/src/app/containers/ContractVerification/index.tsx
index 72149c16e..eb8fa11c8 100644
--- a/src/app/containers/ContractVerification/index.tsx
+++ b/src/app/containers/ContractVerification/index.tsx
@@ -6,8 +6,8 @@ import { PageHeader } from 'app/components/PageHeader/Loadable';
 import { Remark } from 'app/components/Remark';
 import styled from 'styled-components/macro';
 import { Card } from 'app/components/Card/Loadable';
-import { Form, Input, Button, Row, Col, Select } from '@cfxjs/antd';
-import { isContractAddress } from 'utils';
+import { Form, Input, Button, Row, Col, Select, Collapse } from '@cfxjs/antd';
+import { isContractAddress, isCurrentNetworkAddress } from 'utils';
 import {
   reqContractCompiler,
   reqContractLicense,
@@ -25,12 +25,47 @@ import { useLocation } from 'react-router-dom';
 import querystring from 'query-string';
 import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
 
+const { Panel } = Collapse;
 const { Option } = Select;
 const AceEditorStyle = {
   width: '100%',
   backgroundColor: '#F8F9FB',
   minHeight: '28.5714rem',
 };
+const EMV_VERSIONS = [
+  {
+    value: ' ',
+    key: 'default (compiler defauls)',
+  },
+  {
+    value: 'homestead',
+    key: 'homestead (oldest version)',
+  },
+  {
+    value: 'tangerineWhistle',
+    key: 'tangerineWhistle',
+  },
+  {
+    value: 'spuriousDragon',
+    key: 'spuriousDragon',
+  },
+  {
+    value: 'byzantium',
+    key: 'byzantium (default for <= v0.5.4)',
+  },
+  {
+    value: 'constantinople',
+    key: 'constantinople',
+  },
+  {
+    value: 'petersburg',
+    key: 'petersburg (default for <= v0.5.5)',
+  },
+  {
+    value: 'istanbul',
+    key: 'istanbul (default for <= v0.5.14)',
+  },
+];
 
 export const ContractVerification = () => {
   const { t } = useTranslation();
@@ -47,6 +82,15 @@ export const ContractVerification = () => {
   const [modalShow, setModalShow] = useState(false);
   const [respErrors, setRespErrors] = useState<Array<string>>([]);
 
+  const isAddress = (_, value) => {
+    if (!value || isCurrentNetworkAddress(value)) {
+      return Promise.resolve();
+    }
+    return Promise.reject(
+      new Error(t(translations.general.advancedSearch.error.invalidAddress)),
+    );
+  };
+
   useEffect(() => {
     reqContractCompiler().then(resp => {
       setCompilers(
@@ -75,6 +119,7 @@ export const ContractVerification = () => {
       compiler: string;
       license: string;
       optimizeRuns?: number;
+      evmversion?: string;
     } = {
       address: data.contractAddress,
       name: data.contractName,
@@ -87,6 +132,17 @@ export const ContractVerification = () => {
       payload.optimizeRuns = Number(data.runs);
     }
 
+    if (data.evmVersion.trim()) {
+      payload.evmversion = data.evmVersion;
+    }
+
+    data.library.forEach(l => {
+      if (l.name && l.address) {
+        payload[`libraryname${l.key}`] = l.name;
+        payload[`libraryaddress${l.key}`] = l.address;
+      }
+    });
+
     setModalStatus('loading');
     setModalShow(true);
     setLoading(true);
@@ -372,6 +428,33 @@ export const ContractVerification = () => {
                 />
               </Form.Item>
             </Col>
+            <Col span={8}>
+              <Form.Item
+                name="evmVersion"
+                label={t(translations.contractVerification.evmVersion)}
+                rules={[
+                  {
+                    required: true,
+                    message: t(
+                      translations.contractVerification.error.pleaseSelect,
+                    ),
+                  },
+                ]}
+                validateFirst
+              >
+                <Select
+                  placeholder={t(
+                    translations.contractVerification.placeholder.license,
+                  )}
+                >
+                  {EMV_VERSIONS.map((l, index) => (
+                    <Option value={l.value} key={l.key}>
+                      {index + 1}) {l.key}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </Col>
           </Row>
           <Form.Item
             name="contractSourceCode"
@@ -408,9 +491,90 @@ export const ContractVerification = () => {
               onChange={handleSourceCodeChange}
             />
           </Form.Item>
+          <Collapse
+            defaultActiveKey={['1']}
+            bordered={false}
+            expandIcon={props => {
+              return <span>{props.isActive ? '折叠' : '展开'}</span>;
+            }}
+          >
+            <Panel
+              header={
+                <span>
+                  {t(translations.contractVerification.contractLibraryAddress)}{' '}
+                  <small>
+                    {t(
+                      translations.contractVerification
+                        .contractLibraryAddressTip,
+                    )}
+                  </small>
+                </span>
+              }
+              key="1"
+              className="collapse-body"
+            >
+              <Form.List
+                name="library"
+                initialValue={Array.from(Array(10), (k, i) => ({
+                  key: i + 1,
+                  name: '',
+                  address: '',
+                }))}
+              >
+                {fields => (
+                  <>
+                    {fields.map(({ key, name, ...restField }) => {
+                      return (
+                        <Row key={key}>
+                          <Col span={8}>
+                            <Form.Item
+                              {...restField}
+                              name={[name, 'name']}
+                              label={t(
+                                translations.contractVerification.libraryName,
+                                {
+                                  index: key + 1,
+                                },
+                              )}
+                            >
+                              <Input placeholder="" />
+                            </Form.Item>
+                          </Col>
+                          <Col span={1} style={{ textAlign: 'center' }}>
+                            <Form.Item label=" ">&rarr;</Form.Item>
+                          </Col>
+                          <Col span={8}>
+                            <Form.Item
+                              {...restField}
+                              name={[name, 'address']}
+                              label={t(
+                                translations.contractVerification
+                                  .libraryContractAddress,
+                                {
+                                  index: key + 1,
+                                },
+                              )}
+                              rules={[
+                                () => ({
+                                  validator: isAddress,
+                                }),
+                              ]}
+                            >
+                              <Input placeholder="" />
+                            </Form.Item>
+                          </Col>
+                        </Row>
+                      );
+                    })}
+                  </>
+                )}
+              </Form.List>
+            </Panel>
+          </Collapse>
           <Form.Item
             style={{
               marginBottom: 0,
+              marginTop: '1rem',
             }}
           >
             {respErrors.length ? (
@@ -485,4 +649,27 @@ const StyledContractVerificationWrapper = styled.div`
       line-height: 1.2;
     }
   }
+
+  .collapse-body {
+    border-bottom: none !important;
+    margin-top: -12px;
+
+    .ant-collapse-header {
+      background-color: #ffffff;
+
+      & > span {
+        margin-left: -1rem !important;
+      }
+    }
+
+    .ant-collapse-content-box {
+      padding-top: 16px !important;
+    }
+
+    .ant-collapse-arrow {
+      float: right;
+      margin-right: -1rem !important;
+      color: var(--theme-color-blue2);
+    }
+  }
 `;
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 0903ddb64..cdf1edb8f 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -296,6 +296,11 @@
     "compiler": "Compiler",
     "optimization": "Optimization",
     "license": "License",
+    "evmVersion": "EVM Version to target",
+    "contractLibraryAddress": "Contract Library Address",
+    "contractLibraryAddressTip": "(for contracts that use libraries, supports up to 10 libraries)",
+    "libraryName": "Library_{{index}} Name",
+    "libraryContractAddress": "Library_{{index}} Contract Address",
     "contractSourceCode": "Contract Source Code",
     "error": {
       "required": "Required",
diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
index 37822d70d..939b7e565 100644
--- a/src/locales/zh_cn/translation.json
+++ b/src/locales/zh_cn/translation.json
@@ -295,6 +295,11 @@
     "compiler": "编译器",
     "optimization": "优化",
     "license": "许可协议",
+    "evmVersion": "EVM 版本",
+    "contractLibraryAddress": "库合约地址",
+    "contractLibraryAddressTip": "（即合约中使用的库合约。库合约名称与地址必须对应，合约名称区分大小写。暂支持验证10份库合约。）",
+    "libraryName": "Library_{{index}} 合约名称",
+    "libraryContractAddress": "Library_{{index}} 合约地址",
     "contractSourceCode": "合约源码",
     "error": {
       "required": "请输入",

From 34bbd5c8c6a2d3780572a52405fec421ffde31ee Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Tue, 13 Dec 2022 16:37:49 +0800
Subject: [PATCH 16/42] feat: debug with contract library verify api

---
 .../AddressContractDetail/ContractContent.tsx | 42 +++++++++++-
 .../containers/ContractVerification/index.tsx | 68 +++++++------------
 src/locales/en/translation.json               |  1 +
 src/locales/zh_cn/translation.json            |  1 +
 src/setupProxy.js                             |  4 +-
 src/utils/httpRequest.ts                      |  6 ++
 6 files changed, 77 insertions(+), 45 deletions(-)

diff --git a/src/app/containers/AddressContractDetail/ContractContent.tsx b/src/app/containers/AddressContractDetail/ContractContent.tsx
index d90d192da..091f19e84 100644
--- a/src/app/containers/AddressContractDetail/ContractContent.tsx
+++ b/src/app/containers/AddressContractDetail/ContractContent.tsx
@@ -13,13 +13,14 @@ import 'ace-builds/src-noconflict/theme-tomorrow';
 import { Card } from 'app/components/Card/Loadable';
 import { Link } from 'app/components/Link/Loadable';
 import clsx from 'clsx';
-import { Row, Col } from '@cfxjs/antd';
+import { Row, Col, Tag } from '@cfxjs/antd';
 import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
 import { CFX } from 'utils/constants';
 import lodash from 'lodash';
 import { formatData } from 'app/components/TxnComponents/util';
 import { monospaceFont } from 'styles/variable';
 import CheckCircle from '@zeit-ui/react-icons/checkCircle';
+import { AddressContainer } from 'app/components/AddressContainer/Loadable';
 
 import { SubTabs } from 'app/components/Tabs/Loadable';
 
@@ -43,6 +44,7 @@ const Code = ({ contractInfo }) => {
     runs,
     version,
     constructorArgs,
+    libraries = [],
   } = verify;
 
   const constructor = useMemo(() => {
@@ -254,6 +256,38 @@ const Code = ({ contractInfo }) => {
             </>
           ) : null}
         </div>
+        {!!libraries?.length && (
+          <div>
+            <div className="contract-sourcecode-and-abi-title">
+              {t(translations.contract.libraryContracts)}
+            </div>
+            <div className="contract-library-body">
+              {libraries.map(l => (
+                <div>
+                  <span>{l.name}: </span>
+                  <span>
+                    <AddressContainer
+                      value={l.address}
+                      isFull={true}
+                      showIcon={false}
+                    ></AddressContainer>
+                  </span>{' '}
+                  <span>
+                    {l.exactMatch ? (
+                      <Tag color="green">
+                        {t(translations.general.verifiedContract)}
+                      </Tag>
+                    ) : (
+                      <Tag color="red">
+                        {t(translations.general.unverifiedContract)}
+                      </Tag>
+                    )}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
       </div>
     </StyledContractContentCodeWrapper>
   );
@@ -326,6 +360,12 @@ const StyledContractContentCodeWrapper = styled.div`
     overflow: auto;
     font-family: ${monospaceFont};
   }
+
+  .contract-library-body {
+    font-size: 1rem;
+    background-color: rgb(248, 249, 251);
+    padding: 5px 10px;
+  }
 `;
 
 type TabsItemType = {
diff --git a/src/app/containers/ContractVerification/index.tsx b/src/app/containers/ContractVerification/index.tsx
index eb8fa11c8..cc2e15b6f 100644
--- a/src/app/containers/ContractVerification/index.tsx
+++ b/src/app/containers/ContractVerification/index.tsx
@@ -11,6 +11,7 @@ import { isContractAddress, isCurrentNetworkAddress } from 'utils';
 import {
   reqContractCompiler,
   reqContractLicense,
+  reqEVMVersion,
   reqContractVerification,
 } from 'utils/httpRequest';
 import AceEditor from 'react-ace';
@@ -32,40 +33,6 @@ const AceEditorStyle = {
   backgroundColor: '#F8F9FB',
   minHeight: '28.5714rem',
 };
-const EMV_VERSIONS = [
-  {
-    value: ' ',
-    key: 'default (compiler defauls)',
-  },
-  {
-    value: 'homestead',
-    key: 'homestead (oldest version)',
-  },
-  {
-    value: 'tangerineWhistle',
-    key: 'tangerineWhistle',
-  },
-  {
-    value: 'spuriousDragon',
-    key: 'spuriousDragon',
-  },
-  {
-    value: 'byzantium',
-    key: 'byzantium (default for <= v0.5.4)',
-  },
-  {
-    value: 'constantinople',
-    key: 'constantinople',
-  },
-  {
-    value: 'petersburg',
-    key: 'petersburg (default for <= v0.5.5)',
-  },
-  {
-    value: 'istanbul',
-    key: 'istanbul (default for <= v0.5.14)',
-  },
-];
 
 export const ContractVerification = () => {
   const { t } = useTranslation();
@@ -75,6 +42,7 @@ export const ContractVerification = () => {
   const [loading, setLoading] = useState(false);
   const [license, setLicense] = useState<Array<any>>([]);
   const [compilers, setCompilers] = useState<Array<any>>([]);
+  const [versions, setVersions] = useState<Array<any>>([]);
   const [optimizationValue, setOptimizationValue] = useState<string>('no');
   const inputRef = createRef<any>();
   const [sourceCode, setSourceCode] = useState('');
@@ -109,6 +77,22 @@ export const ContractVerification = () => {
         })),
       );
     });
+
+    reqEVMVersion().then(resp => {
+      setVersions(
+        [
+          {
+            key: 'default',
+            value: ' ',
+          },
+        ].concat(
+          resp.map(r => ({
+            key: r,
+            value: r,
+          })),
+        ),
+      );
+    });
   }, []);
 
   const onFinish = (data: any) => {
@@ -119,7 +103,7 @@ export const ContractVerification = () => {
       compiler: string;
       license: string;
       optimizeRuns?: number;
-      evmversion?: string;
+      evmVersion?: string;
     } = {
       address: data.contractAddress,
       name: data.contractName,
@@ -132,14 +116,12 @@ export const ContractVerification = () => {
       payload.optimizeRuns = Number(data.runs);
     }
 
-    if (data.evmVersion.trim()) {
-      payload.evmversion = data.evmVersion;
-    }
+    payload.evmVersion = data.evmVersion.trim();
 
     data.library.forEach(l => {
       if (l.name && l.address) {
-        payload[`libraryname${l.key}`] = l.name;
-        payload[`libraryaddress${l.key}`] = l.address;
+        payload[`libraryName${l.key}`] = l.name;
+        payload[`libraryAddress${l.key}`] = l.address;
       }
     });
 
@@ -447,7 +429,7 @@ export const ContractVerification = () => {
                     translations.contractVerification.placeholder.license,
                   )}
                 >
-                  {EMV_VERSIONS.map((l, index) => (
+                  {versions.map((l, index) => (
                     <Option value={l.value} key={l.key}>
                       {index + 1}) {l.key}
                     </Option>
@@ -630,7 +612,7 @@ const StyledContractVerificationWrapper = styled.div`
     justify-content: center;
 
     .link {
-      color: #1e3de4;
+      color: var(--theme-color-blue2);
       font-weight: 500;
       line-height: 1.2857rem;
       text-align: right;
@@ -670,6 +652,8 @@ const StyledContractVerificationWrapper = styled.div`
       float: right;
       margin-right: -1rem !important;
       color: var(--theme-color-blue2);
+      text-decoration: underline;
+      font-weight: 500;
     }
   }
 `;
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index cdf1edb8f..ac38b4a6b 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -185,6 +185,7 @@
     "abi": "Contract ABI",
     "constructorArgs": "Constructor Arguments",
     "constructorArgsTips": " (ABI-Encoded and is the last bytes of the Contract Creation Code above)",
+    "libraryContracts": "Library Contracts",
     "encodedView": "Encoded View",
     "decodedView": "Decoded View",
     "enterPassword": "Please enter your password",
diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
index 939b7e565..ba4c931ee 100644
--- a/src/locales/zh_cn/translation.json
+++ b/src/locales/zh_cn/translation.json
@@ -184,6 +184,7 @@
     "abi": "合约ABI",
     "constructorArgs": "构造器参数",
     "constructorArgsTips": "（ABI-Encoded and is the last bytes of the Contract Creation Code above）",
+    "libraryContracts": "使用的库合约",
     "encodedView": "编码视图",
     "decodedView": "解码视图",
     "enterPassword": "请输入管理员口令",
diff --git a/src/setupProxy.js b/src/setupProxy.js
index 7418097fb..393e0500f 100644
--- a/src/setupProxy.js
+++ b/src/setupProxy.js
@@ -12,8 +12,8 @@ let rpcv2 = `${url}/rpcv2`;
 let confluxDag = `${url}`;
 
 if (process.env.REACT_APP_TestNet === 'true') {
-  const testnet = 'https://testnet-stage.confluxscan.net';
-  // const testnet = 'https://testnet.confluxscan.net/';
+  // const testnet = 'https://testnet-stage.confluxscan.net';
+  const testnet = 'https://testnet.confluxscan.net/';
   stat = `${testnet}`;
   v1 = `${testnet}`;
   rpc = `${testnet}/rpc`;
diff --git a/src/utils/httpRequest.ts b/src/utils/httpRequest.ts
index ab957eca4..093388adb 100644
--- a/src/utils/httpRequest.ts
+++ b/src/utils/httpRequest.ts
@@ -212,6 +212,12 @@ export const reqContractCompiler = () => {
   });
 };
 
+export const reqEVMVersion = () => {
+  return sendRequest({
+    url: `/contract/evm-version`,
+  });
+};
+
 export const reqContractVerification = param => {
   return sendRequest({
     url: `/contract/verify`,

From 0e93a04410ae1e2c6c49b832cbf1c18db273eebe Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Tue, 13 Dec 2022 17:31:26 +0800
Subject: [PATCH 17/42] fix: fixed contract creattion ens issue

---
 src/app/components/AddressContainer/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/components/AddressContainer/index.tsx b/src/app/components/AddressContainer/index.tsx
index d26e49204..dde68d063 100644
--- a/src/app/components/AddressContainer/index.tsx
+++ b/src/app/components/AddressContainer/index.tsx
@@ -242,7 +242,8 @@ export const AddressContainer = withTranslation()(
 
       // try to get ens name
       const [ENSMap] = useENS({
-        address: contractCreated || value ? [contractCreated || value] : [],
+        // @ts-ignore
+        address: value || contractCreated ? [value || contractCreated] : [],
       });
 
       const suffixSize =
@@ -259,6 +260,7 @@ export const AddressContainer = withTranslation()(
 
         if (contractCreated) {
           const fContractCreated = formatAddress(contractCreated);
+
           let prefixIcon: React.ReactNode = null;
           // private name tag
           let addressLabel: React.ReactNode = null;

From f2191993f28e39f9b40fdd149f213d0efbd53cb3 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Tue, 13 Dec 2022 17:59:43 +0800
Subject: [PATCH 18/42] feat: add evm version in contract verify check

---
 .../AddressContractDetail/ContractContent.tsx       | 13 ++++++++++++-
 src/locales/en/translation.json                     |  2 ++
 src/locales/zh_cn/translation.json                  |  2 ++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/app/containers/AddressContractDetail/ContractContent.tsx b/src/app/containers/AddressContractDetail/ContractContent.tsx
index 091f19e84..f5298c516 100644
--- a/src/app/containers/AddressContractDetail/ContractContent.tsx
+++ b/src/app/containers/AddressContractDetail/ContractContent.tsx
@@ -45,6 +45,7 @@ const Code = ({ contractInfo }) => {
     version,
     constructorArgs,
     libraries = [],
+    evmVersion,
   } = verify;
 
   const constructor = useMemo(() => {
@@ -144,7 +145,17 @@ const Code = ({ contractInfo }) => {
               <span className="verify-info-title">
                 {t(translations.contract.verify.otherSettings)}
               </span>
-              <span className="verify-info-content">{license}</span>
+              <span className="verify-info-content">
+                {t(translations.contract.verify.evmVersion, {
+                  version: evmVersion || 'default',
+                })}
+              </span>
+              {', '}
+              <span className="verify-info-content">
+                {t(translations.contract.verify.license, {
+                  license,
+                })}
+              </span>
             </Col>
           </Row>
         </>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index ac38b4a6b..756e957c7 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -206,6 +206,8 @@
       "contractName": "Contract Name: ",
       "optimizationEnabled": "Optimization Enabled: ",
       "otherSettings": "Other Settings: ",
+      "evmVersion": "{{version}} evmVersion",
+      "license": "{{license}} license",
       "compilerVersion": "Compiler Version: ",
       "runs": "{{status}} with {{count}} runs",
       "tipLeft": "You can ",
diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
index ba4c931ee..33e6fa8a5 100644
--- a/src/locales/zh_cn/translation.json
+++ b/src/locales/zh_cn/translation.json
@@ -205,6 +205,8 @@
       "contractName": "合约名：",
       "optimizationEnabled": "是否优化：",
       "otherSettings": "其他设置：",
+      "evmVersion": "{{version}} evmVersion",
+      "license": "{{license}} license",
       "compilerVersion": "编译版本：",
       "runs": "{{status}} with {{count}} runs",
       "tipLeft": "立刻前往",

From 1f02c5a27567bd9d95f9b00e4cac0c7b0f8dcd29 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 14 Dec 2022 14:43:31 +0800
Subject: [PATCH 19/42] fix: make ens name to lowercase string of address tile

---
 src/app/containers/AddressContractDetail/layouts.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/containers/AddressContractDetail/layouts.ts b/src/app/containers/AddressContractDetail/layouts.ts
index 045e311e1..fdc3ec36f 100644
--- a/src/app/containers/AddressContractDetail/layouts.ts
+++ b/src/app/containers/AddressContractDetail/layouts.ts
@@ -140,4 +140,5 @@ export const StyledENSName = styled.span<{
   display: ${props => (props.show ? 'inline-flex' : 'none')};
   align-items: center;
   color: var(--theme-color-gray4);
+  text-transform: none;
 `;

From 8bd70cd77be5e61165382b282b9f0af4365faa9e Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 15 Dec 2022 11:46:48 +0800
Subject: [PATCH 20/42] feat: add default value to contract library veriry

---
 src/app/containers/ContractVerification/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/containers/ContractVerification/index.tsx b/src/app/containers/ContractVerification/index.tsx
index cc2e15b6f..eab618d11 100644
--- a/src/app/containers/ContractVerification/index.tsx
+++ b/src/app/containers/ContractVerification/index.tsx
@@ -428,6 +428,7 @@ export const ContractVerification = () => {
                   placeholder={t(
                     translations.contractVerification.placeholder.license,
                   )}
+                  defaultValue="default"
                 >
                   {versions.map((l, index) => (
                     <Option value={l.value} key={l.key}>
@@ -474,7 +475,7 @@ export const ContractVerification = () => {
             />
           </Form.Item>
           <Collapse
-            defaultActiveKey={['1']}
+            defaultActiveKey={[]}
             bordered={false}
             expandIcon={props => {
               return <span>{props.isActive ? '折叠' : '展开'}</span>;

From 9b79ce5945f5ba83dbb2cd34704860c215e7fccc Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 15 Dec 2022 12:01:48 +0800
Subject: [PATCH 21/42] feat: update default value to contract library veriry

---
 src/app/containers/ContractVerification/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/containers/ContractVerification/index.tsx b/src/app/containers/ContractVerification/index.tsx
index eab618d11..e9ec0bb8e 100644
--- a/src/app/containers/ContractVerification/index.tsx
+++ b/src/app/containers/ContractVerification/index.tsx
@@ -428,7 +428,7 @@ export const ContractVerification = () => {
                   placeholder={t(
                     translations.contractVerification.placeholder.license,
                   )}
-                  defaultValue="default"
+                  defaultValue=" "
                 >
                   {versions.map((l, index) => (
                     <Option value={l.value} key={l.key}>

From 28e46edcdbd0f8ca859ae5ca805bdd7d83ef629e Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 15 Dec 2022 14:26:59 +0800
Subject: [PATCH 22/42] feat: add default value to contract library veriry

---
 src/app/containers/ContractVerification/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/containers/ContractVerification/index.tsx b/src/app/containers/ContractVerification/index.tsx
index cc2e15b6f..e7b36672e 100644
--- a/src/app/containers/ContractVerification/index.tsx
+++ b/src/app/containers/ContractVerification/index.tsx
@@ -423,6 +423,7 @@ export const ContractVerification = () => {
                   },
                 ]}
                 validateFirst
+                initialValue={' '}
               >
                 <Select
                   placeholder={t(
@@ -474,7 +475,6 @@ export const ContractVerification = () => {
             />
           </Form.Item>
           <Collapse
-            defaultActiveKey={['1']}
             bordered={false}
             expandIcon={props => {
               return <span>{props.isActive ? '折叠' : '展开'}</span>;

From 63d0910f62f53320455945314226bc6d952ce10d Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 15 Dec 2022 15:21:01 +0800
Subject: [PATCH 23/42] feat: update ens contract address

---
 src/utils/constants.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index db24c7725..44b1e2da1 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -230,7 +230,7 @@ export const CROSS_SPACE_ADDRESS = IS_TESTNET
 
 enum ENS_REGISTRY_ADDRESSES {
   mainnet = '',
-  testnet = 'cfxtest:achg113s8916v2u756tvf6hdvmbsb73b16ykt1pvwm',
+  testnet = 'cfxtest:acd3rm7y183trhpzvz8m3y72kx1abk4d0jh842585a',
 }
 
 export const ENS_REGISTRY_ADDRESS = IS_TESTNET
@@ -239,7 +239,7 @@ export const ENS_REGISTRY_ADDRESS = IS_TESTNET
 
 enum ENS_PUBLIC_RESOLVER_ADDRESSES {
   mainnet = '',
-  testnet = 'cfxtest:acecxexm0pg268m44jncw5bmagwwmun53jj9msmadj',
+  testnet = 'cfxtest:acfcb2fv6t8xrxyyx3x1atwmdrhh5xvfd21zsje216',
 }
 
 export const ENS_PUBLIC_RESOLVER_ADDRESS = IS_TESTNET
@@ -248,7 +248,7 @@ export const ENS_PUBLIC_RESOLVER_ADDRESS = IS_TESTNET
 
 enum ENS_REVERSE_REGISTRAR_ADDRESSES {
   mainnet = '',
-  testnet = 'cfxtest:ach1p03gkptxz07p4ecn66gjpd0xrnkkbj1n6p96d5',
+  testnet = 'cfxtest:acfmezysbf86jy3jnw835bnamxp08dxzd61w5ur8hy',
 }
 
 export const ENS_REVERSE_REGISTRAR_ADDRESS = IS_TESTNET

From 4e1a2ae97cccf66b2f12711889f7175ceb3fd3fd Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 15 Dec 2022 15:32:54 +0800
Subject: [PATCH 24/42] feat: update cns logo

---
 src/images/logo-cns.svg | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/images/logo-cns.svg b/src/images/logo-cns.svg
index 2f39e789c..1af20900f 100644
--- a/src/images/logo-cns.svg
+++ b/src/images/logo-cns.svg
@@ -1,18 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_6_60)">
-<path d="M12.1911 12.0699C11.6959 12.9277 10.4578 12.9277 9.96251 12.0699L6.232 5.60848C5.73675 4.75068 6.35581 3.67844 7.34631 3.67844H14.8073C15.7978 3.67844 16.4169 4.75068 15.9216 5.60848L12.1911 12.0699Z" fill="#6667AB"/>
-<path d="M7.15619 10.3914C6.66094 11.2492 5.42282 11.2492 4.92757 10.3914L1.19706 3.93001C0.701812 3.07221 1.32087 1.99997 2.31137 1.99997H9.77239C10.7629 1.99997 11.3819 3.07221 10.8867 3.93001L7.15619 10.3914Z" fill="#96D8DE"/>
-<mask id="mask0_6_60" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="3" width="11" height="10">
-<path d="M12.1911 12.0699C11.6959 12.9277 10.4578 12.9277 9.96251 12.0699L6.232 5.60848C5.73675 4.75068 6.35581 3.67844 7.34631 3.67844H14.8073C15.7978 3.67844 16.4169 4.75068 15.9216 5.60848L12.1911 12.0699Z" fill="#6667AB"/>
-</mask>
-<g mask="url(#mask0_6_60)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.07493 8.80049L5.1177 3.67841H11.0322L8.07493 8.80049Z" fill="#8E8FEB"/>
-</g>
-<rect width="3.35659" height="3.35659" rx="1.6783" transform="matrix(-1 0 0 1 3.35657 10.6434)" fill="#96D8DE"/>
-</g>
-<defs>
-<clipPath id="clip0_6_60">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
+<svg width="218" height="219" viewBox="0 0 218 219" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="109.165" cy="109.382" r="108.835" fill="#6667AB"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M109.164 120.232L131.423 81.6782H182.872L134.889 164.788L109.164 120.232Z" fill="#F0EEE9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.9062 81.6782L109.165 120.232L83.4407 164.788L35.457 81.6782H86.9062Z" fill="#F0EEE9"/>
 </svg>

From 2e8f45d1d94a392df0a51f2b5c83a7255d207e26 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 15 Dec 2022 15:51:39 +0800
Subject: [PATCH 25/42] feat: adjust ens icon style

---
 src/app/components/AddressContainer/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/AddressContainer/index.tsx b/src/app/components/AddressContainer/index.tsx
index dde68d063..8f315c83c 100644
--- a/src/app/components/AddressContainer/index.tsx
+++ b/src/app/components/AddressContainer/index.tsx
@@ -70,7 +70,7 @@ export const getLabelInfo = (label, type) => {
         <img
           src={ICON_ENS}
           style={{
-            marginBottom: '2px',
+            marginBottom: '3px',
             marginRight: '2px',
           }}
           alt=""

From 6cdb59badd9bcd5bd8bb5718c9eda5afd303fa27 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Sun, 18 Dec 2022 18:07:44 +0800
Subject: [PATCH 26/42] feat: show contract creation first

---
 src/app/components/AddressContainer/index.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/app/components/AddressContainer/index.tsx b/src/app/components/AddressContainer/index.tsx
index 8f315c83c..ca9208a23 100644
--- a/src/app/components/AddressContainer/index.tsx
+++ b/src/app/components/AddressContainer/index.tsx
@@ -261,7 +261,6 @@ export const AddressContainer = withTranslation()(
         if (contractCreated) {
           const fContractCreated = formatAddress(contractCreated);
 
-          let prefixIcon: React.ReactNode = null;
           // private name tag
           let addressLabel: React.ReactNode = null;
           // ens name tag
@@ -273,22 +272,21 @@ export const AddressContainer = withTranslation()(
             globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][fContractCreated];
 
           if (showAddressLabel && gAddressLabel) {
-            const { label, icon } = getLabelInfo(gAddressLabel, 'tag');
+            const { label } = getLabelInfo(gAddressLabel, 'tag');
 
             addressLabel = label;
-            prefixIcon = icon;
           }
 
           if (showENSLabel && gENSLabel) {
-            const { label, icon } = getLabelInfo(gENSLabel, 'ens');
+            const { label } = getLabelInfo(gENSLabel, 'ens');
 
             ENSLabel = label;
-            prefixIcon = icon;
           }
 
           return RenderAddress({
+            content: txtContractCreation,
             cfxAddress: '',
-            alias: alias || txtContractCreation,
+            alias: alias,
             addressLabel,
             ENSLabel,
             hoverValue: fContractCreated,
@@ -299,7 +297,6 @@ export const AddressContainer = withTranslation()(
             suffixSize,
             prefix: (
               <IconWrapper>
-                {prefixIcon}
                 <Text span hoverValue={txtContractCreation}>
                   <img src={ContractIcon} alt={txtContractCreation} />
                 </Text>

From 240e1e090d21fd10fb667332168e29b66a408f76 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Tue, 20 Dec 2022 11:10:22 +0800
Subject: [PATCH 27/42] feat: update i18n

---
 src/app/containers/ContractVerification/index.tsx | 8 +++++++-
 src/locales/en/translation.json                   | 2 ++
 src/locales/zh_cn/translation.json                | 2 ++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/containers/ContractVerification/index.tsx b/src/app/containers/ContractVerification/index.tsx
index e7b36672e..8544d9d42 100644
--- a/src/app/containers/ContractVerification/index.tsx
+++ b/src/app/containers/ContractVerification/index.tsx
@@ -477,7 +477,13 @@ export const ContractVerification = () => {
           <Collapse
             bordered={false}
             expandIcon={props => {
-              return <span>{props.isActive ? '折叠' : '展开'}</span>;
+              return (
+                <span>
+                  {props.isActive
+                    ? t(translations.general.fold)
+                    : t(translations.general.expand)}
+                </span>
+              );
             }}
           >
             <Panel
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 756e957c7..9d0ac7844 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -982,6 +982,8 @@
     }
   },
   "general": {
+    "fold": "Fold",
+    "expand": "Expand",
     "refresh": "Refresh",
     "timestamp": "Timestamp",
     "create": "Create",
diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
index 33e6fa8a5..7ba066c69 100644
--- a/src/locales/zh_cn/translation.json
+++ b/src/locales/zh_cn/translation.json
@@ -981,6 +981,8 @@
     }
   },
   "general": {
+    "fold": "折叠",
+    "expand": "展开",
     "refresh": "刷新",
     "timestamp": "时间戳",
     "create": "创建",

From 203c76d1cce30e041eaae3a98c0d199ca16640d1 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Tue, 20 Dec 2022 15:47:31 +0800
Subject: [PATCH 28/42] fix: fixed null library issue when contract verify
 submit

---
 src/app/containers/ContractVerification/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/containers/ContractVerification/index.tsx b/src/app/containers/ContractVerification/index.tsx
index 8544d9d42..41bddea8b 100644
--- a/src/app/containers/ContractVerification/index.tsx
+++ b/src/app/containers/ContractVerification/index.tsx
@@ -118,7 +118,7 @@ export const ContractVerification = () => {
 
     payload.evmVersion = data.evmVersion.trim();
 
-    data.library.forEach(l => {
+    data.library?.forEach(l => {
       if (l.name && l.address) {
         payload[`libraryName${l.key}`] = l.name;
         payload[`libraryAddress${l.key}`] = l.address;

From ba4331ef10077592d942dc0f0ccd511e404dd66b Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 21 Dec 2022 12:39:16 +0800
Subject: [PATCH 29/42] feat: add support of glb&gltf media

---
 package.json                            |   7 +-
 src/app/components/NFTPreview/3D.tsx    |  40 +++
 src/app/components/NFTPreview/index.tsx | 109 +++---
 yarn.lock                               | 422 +++++++++++++++++++++++-
 4 files changed, 517 insertions(+), 61 deletions(-)
 create mode 100644 src/app/components/NFTPreview/3D.tsx

diff --git a/package.json b/package.json
index af7733404..4db6ec065 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "@cfxjs/use-wallet": "0.0.18",
     "@conflux-dev/conflux-address-js": "1.3.16",
     "@ensdomains/eth-ens-namehash": "2.0.15",
+    "@react-three/drei": "9.47.1",
+    "@react-three/fiber": "8.9.1",
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1",
     "@types/fontfaceobserver": "0.0.6",
@@ -53,11 +55,11 @@
     "prettier": "2.0.1",
     "qrcode.react": "1.0.0",
     "query-string": "6.13.1",
-    "react": "16.13.0",
+    "react": "^18",
     "react-ace": "9.1.3",
     "react-app-polyfill": "1.0.6",
     "react-component-benchmark": "1.0.0",
-    "react-dom": "16.13.0",
+    "react-dom": "^18",
     "react-google-recaptcha": "2.1.0",
     "react-helmet-async": "1.0.6",
     "react-i18next": "11.3.4",
@@ -77,6 +79,7 @@
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-processor-styled-components": "1.10.0",
     "swr": "0.3.2",
+    "three": "0.147.0",
     "ts-node": "8.8.2",
     "typescript": "4.5.4",
     "webfontloader": "1.6.28",
diff --git a/src/app/components/NFTPreview/3D.tsx b/src/app/components/NFTPreview/3D.tsx
new file mode 100644
index 000000000..80bae4915
--- /dev/null
+++ b/src/app/components/NFTPreview/3D.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Canvas } from '@react-three/fiber';
+import { useLoader } from '@react-three/fiber';
+// @ts-ignore
+import { Environment, OrbitControls } from '@react-three/drei';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { Suspense } from 'react';
+import styled from 'styled-components';
+import { Skeleton } from '@cfxjs/antd';
+
+export const ThreeD = ({ url = '' }) => {
+  const gltf = useLoader(GLTFLoader, url);
+
+  return (
+    <Container>
+      <Skeleton.Image />
+      <Canvas
+        frameloop="demand"
+        className="3d-canvas"
+        style={{
+          position: 'absolute',
+          top: '0',
+        }}
+      >
+        <Suspense fallback={null}>
+          <primitive object={gltf.scene} scale={0.4} />
+          <OrbitControls />
+          <Environment preset="sunset" background />
+        </Suspense>
+      </Canvas>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+`;
diff --git a/src/app/components/NFTPreview/index.tsx b/src/app/components/NFTPreview/index.tsx
index d8fcffa44..0581010dd 100644
--- a/src/app/components/NFTPreview/index.tsx
+++ b/src/app/components/NFTPreview/index.tsx
@@ -25,6 +25,7 @@ import Link from '@zeit-ui/react-icons/link';
 import { Link as ALink } from 'app/components/Link/Loadable';
 import { Tag } from '@cfxjs/antd';
 import { AddressContainer } from '../AddressContainer';
+import { ThreeD } from './3D';
 
 const epiKProtocolKnowledgeBadge =
   'cfx:acev4c2s2ttu3jzxzsd4a2hrzsa4pfc3f6f199y5mk';
@@ -54,6 +55,7 @@ const imageType = [
   'tiff',
   'webp',
 ];
+const threeDType = ['gltf', 'glb'];
 
 export const NFTCardInfo = React.memo(
   ({
@@ -89,6 +91,8 @@ export const NFTCardInfo = React.memo(
           nftType = 'image';
         } else if (audioType.includes(sourceType)) {
           nftType = 'audio';
+        } else if (threeDType.includes(sourceType)) {
+          nftType = '3d';
         }
       } else {
         // has not suffix
@@ -131,52 +135,62 @@ export const NFTCardInfo = React.memo(
       }
     }, [audioRef]);
 
-    return (
-      <>
-        {nftType === 'video' ? (
-          <VideoCard>
-            <video
-              controls
-              className="ant-video"
-              preload="metadata"
-              // poster={imageUri}
-              src={`${imageUri}?source=video`}
-            ></video>
-          </VideoCard>
-        ) : nftType === 'audio' ? (
-          <AudioCard percent={percent}>
-            {audioImg && (
-              <img src={audioImg} alt="audio-img" className="audio-img" />
-            )}
-            <img
-              src={audioDesign}
-              alt="audio-design"
-              className="audio audio-design"
-            />
-            <img src={audioBg} alt="audio-bg" className="audio audio-bg" />
-            <img
-              src={isAudioPlay ? audioPause : audioPlay}
-              alt="audio-play"
-              className="audio audio-play"
-              onClick={audioControl}
-            />
-            <div className="audio-control">
-              <div className="audio-percent"></div>
-            </div>
-            <audio ref={audioRef} preload="metadata" src={imageUri}></audio>
-          </AudioCard>
-        ) : (
-          <Image
-            width={width}
-            style={{ minHeight: imageMinHeight }}
-            src={imageUri}
-            preview={preview}
-            fallback={tokenIdNotFound}
-            alt={tokenId + ''}
+    if (nftType === 'image') {
+      return (
+        <Image
+          width={width}
+          style={{ minHeight: imageMinHeight }}
+          src={imageUri}
+          preview={preview}
+          fallback={tokenIdNotFound}
+          alt={tokenId + ''}
+        />
+      );
+    } else if (nftType === 'video') {
+      return (
+        <VideoCard>
+          <video
+            controls
+            className="ant-video"
+            preload="metadata"
+            // poster={imageUri}
+            src={`${imageUri}?source=video`}
+          ></video>
+        </VideoCard>
+      );
+    } else if (nftType === 'audio') {
+      return (
+        <AudioCard percent={percent}>
+          {audioImg && (
+            <img src={audioImg} alt="audio-img" className="audio-img" />
+          )}
+          <img
+            src={audioDesign}
+            alt="audio-design"
+            className="audio audio-design"
           />
-        )}
-      </>
-    );
+          <img src={audioBg} alt="audio-bg" className="audio audio-bg" />
+          <img
+            src={isAudioPlay ? audioPause : audioPlay}
+            alt="audio-play"
+            className="audio audio-play"
+            onClick={audioControl}
+          />
+          <div className="audio-control">
+            <div className="audio-percent"></div>
+          </div>
+          <audio ref={audioRef} preload="metadata" src={imageUri}></audio>
+        </AudioCard>
+      );
+    } else if (nftType === '3d') {
+      return (
+        <ThreeDCard>
+          <ThreeD url={`${imageUri}?source=3d`} />
+        </ThreeDCard>
+      );
+    } else {
+      return null;
+    }
   },
 );
 
@@ -560,3 +574,8 @@ const NFTCard = styled.div`
     }
   }
 `;
+
+const ThreeDCard = styled.div`
+  width: 100%;
+  height: 100%;
+`;
diff --git a/yarn.lock b/yarn.lock
index e41422079..bdef7df14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1443,6 +1443,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.16.7", "@babel/runtime@^7.17.8":
+  version "7.20.6"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
+  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.16.7", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1563,6 +1570,33 @@
   resolved "https://registry.npmjs.org/@cfxjs/use-wallet/-/use-wallet-0.0.18.tgz"
   integrity sha512-DwHIjTpZGo2ntJO+MYJv1d2nIuXYB9AEk63PYZgSKZARWwcRkLSrc/MmVbhHLPOckoHVpVymdssiU50hw87TqA==
 
+"@chevrotain/cst-dts-gen@10.4.2":
+  version "10.4.2"
+  resolved "https://registry.npmmirror.com/@chevrotain/cst-dts-gen/-/cst-dts-gen-10.4.2.tgz#a3426dba2c48cf6c90e49a0676aea750e8f43e88"
+  integrity sha512-0+4bNjlndNWMoVLH/+y4uHnf6GrTipsC+YTppJxelVJo+xeRVQ0s2PpkdDCVTsu7efyj+8r1gFiwVXsp6JZ0iQ==
+  dependencies:
+    "@chevrotain/gast" "10.4.2"
+    "@chevrotain/types" "10.4.2"
+    lodash "4.17.21"
+
+"@chevrotain/gast@10.4.2":
+  version "10.4.2"
+  resolved "https://registry.npmmirror.com/@chevrotain/gast/-/gast-10.4.2.tgz#236dc48e54cba16260c03bece25d5a3b6e2f5dab"
+  integrity sha512-4ZAn8/mjkmYonilSJ60gGj1tAF0cVWYUMlIGA0e4ATAc3a648aCnvpBw7zlPHDQjFp50XC13iyWEgWAKiRKTOA==
+  dependencies:
+    "@chevrotain/types" "10.4.2"
+    lodash "4.17.21"
+
+"@chevrotain/types@10.4.2":
+  version "10.4.2"
+  resolved "https://registry.npmmirror.com/@chevrotain/types/-/types-10.4.2.tgz#18be6b7a3226b121fccec08c2ba8433219a6813c"
+  integrity sha512-QzSCjg6G4MvIoLeIgOiMR0IgzkGEQqrNJJIr3T5ETRa7l4Av4AMIiEctV99mvDr57iXwwk0/kr3RJxiU36Nevw==
+
+"@chevrotain/utils@10.4.2":
+  version "10.4.2"
+  resolved "https://registry.npmmirror.com/@chevrotain/utils/-/utils-10.4.2.tgz#87735732184cc5a2f8aad2f3454082294ef3c924"
+  integrity sha512-V34dacxWLwKcvcy32dx96ADJVdB7kOJLm7LyBkBQw5u5HC9WdEFw2G17zml+U3ivavGTrGPJHl8o9/UJm0PlUw==
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz"
@@ -2252,6 +2286,90 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
 
+"@react-spring/animated@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.npmmirror.com/@react-spring/animated/-/animated-9.6.1.tgz#ccc626d847cbe346f5f8815d0928183c647eb425"
+  integrity sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==
+  dependencies:
+    "@react-spring/shared" "~9.6.1"
+    "@react-spring/types" "~9.6.1"
+
+"@react-spring/core@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.npmmirror.com/@react-spring/core/-/core-9.6.1.tgz#ebe07c20682b360b06af116ea24e2b609e778c10"
+  integrity sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==
+  dependencies:
+    "@react-spring/animated" "~9.6.1"
+    "@react-spring/rafz" "~9.6.1"
+    "@react-spring/shared" "~9.6.1"
+    "@react-spring/types" "~9.6.1"
+
+"@react-spring/rafz@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.npmmirror.com/@react-spring/rafz/-/rafz-9.6.1.tgz#d71aafb92b78b24e4ff84639f52745afc285c38d"
+  integrity sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ==
+
+"@react-spring/shared@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.npmmirror.com/@react-spring/shared/-/shared-9.6.1.tgz#4e2e4296910656c02bd9fd54c559702bc836ac4e"
+  integrity sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==
+  dependencies:
+    "@react-spring/rafz" "~9.6.1"
+    "@react-spring/types" "~9.6.1"
+
+"@react-spring/three@^9.3.1":
+  version "9.6.1"
+  resolved "https://registry.npmmirror.com/@react-spring/three/-/three-9.6.1.tgz#095fcd1dc6509127c33c14486d88289b89baeb9d"
+  integrity sha512-Tyw2YhZPKJAX3t2FcqvpLRb71CyTe1GvT3V+i+xJzfALgpk10uPGdGaQQ5Xrzmok1340DAeg2pR/MCfaW7b8AA==
+  dependencies:
+    "@react-spring/animated" "~9.6.1"
+    "@react-spring/core" "~9.6.1"
+    "@react-spring/shared" "~9.6.1"
+    "@react-spring/types" "~9.6.1"
+
+"@react-spring/types@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.npmmirror.com/@react-spring/types/-/types-9.6.1.tgz#913d3a68c5cbc1124fdb18eff919432f7b6abdde"
+  integrity sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q==
+
+"@react-three/drei@9.47.1":
+  version "9.47.1"
+  resolved "https://registry.npmmirror.com/@react-three/drei/-/drei-9.47.1.tgz#827b1e391f0a8d1c59b4b6a04370cdfabc4243ef"
+  integrity sha512-Pu4vfpUvE7BSjvAOXDb/XBQIqzzoe1BL97CqpV0Q+dMfgQxm2rw0I5WGzYvF4VXN68qu5iTZUPS8G1u5zebDFw==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    "@react-spring/three" "^9.3.1"
+    "@use-gesture/react" "^10.2.0"
+    detect-gpu "^5.0.1"
+    glsl-noise "^0.0.0"
+    lodash.clamp "^4.0.3"
+    lodash.omit "^4.5.0"
+    lodash.pick "^4.4.0"
+    meshline "^3.1.6"
+    react-composer "^5.0.3"
+    react-merge-refs "^1.1.0"
+    stats.js "^0.17.0"
+    suspend-react "^0.0.8"
+    three-mesh-bvh "^0.5.19"
+    three-stdlib "^2.20.4"
+    troika-three-text "^0.47.1"
+    utility-types "^3.10.0"
+    zustand "^3.5.13"
+
+"@react-three/fiber@8.9.1":
+  version "8.9.1"
+  resolved "https://registry.npmmirror.com/@react-three/fiber/-/fiber-8.9.1.tgz#54e278148ae1c301a4b516936bfce0d9240a7292"
+  integrity sha512-xRMO9RGp0DkxSFu5BmmkjCxJ4r0dEpLobtxXdZwI0h2rZZaCnkPM5zThRN8xaZNbZhzRSVICeNOFaZltr9xFyQ==
+  dependencies:
+    "@babel/runtime" "^7.17.8"
+    "@types/react-reconciler" "^0.26.7"
+    its-fine "^1.0.6"
+    react-reconciler "^0.27.0"
+    react-use-measure "^2.1.1"
+    scheduler "^0.21.0"
+    suspend-react "^0.0.8"
+    zustand "^3.7.1"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
   resolved "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz"
@@ -2715,6 +2833,11 @@
   resolved "https://registry.npmjs.org/@types/numeral/-/numeral-0.0.28.tgz"
   integrity sha512-Sjsy10w6XFHDktJJdXzBJmoondAKW+LcGpRFH+9+zXEDj0cOH8BxJuZA9vUDSMAzU1YRJlsPKmZEEiTYDlICLw==
 
+"@types/offscreencanvas@^2019.6.4":
+  version "2019.7.0"
+  resolved "https://registry.npmmirror.com/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz#e4a932069db47bb3eabeb0b305502d01586fa90d"
+  integrity sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
@@ -2751,6 +2874,20 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-reconciler@^0.26.7":
+  version "0.26.7"
+  resolved "https://registry.npmmirror.com/@types/react-reconciler/-/react-reconciler-0.26.7.tgz#0c4643f30821ae057e401b0d9037e03e8e9b2a36"
+  integrity sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-reconciler@^0.28.0":
+  version "0.28.0"
+  resolved "https://registry.npmmirror.com/@types/react-reconciler/-/react-reconciler-0.28.0.tgz#513acbed173140e958c909041ca14eb40412077f"
+  integrity sha512-5cjk9ottZAj7eaTsqzPUIlrVbh3hBAO2YaEL1rkjHKB3xNAId7oU8GhzvAX+gfmlfoxTwJnBjPxEHyxkEA1Ffg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@5.1.3":
   version "5.1.3"
   resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.3.tgz"
@@ -2928,6 +3065,18 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+"@use-gesture/core@10.2.23":
+  version "10.2.23"
+  resolved "https://registry.npmmirror.com/@use-gesture/core/-/core-10.2.23.tgz#ed5892e86b4ad537613b6ab83111ca58341e40c0"
+  integrity sha512-Ynap/Uh6RX1Vgn3zNmFTyKapapdf7Av+GzAe6h+RsBZaxMF1z3cK6aohHPJP6T1hLrPyH/yehxa7RBqyESG9RA==
+
+"@use-gesture/react@^10.2.0":
+  version "10.2.23"
+  resolved "https://registry.npmmirror.com/@use-gesture/react/-/react-10.2.23.tgz#744f7fb68e904721a2bf3d8bffd40e446b86c82a"
+  integrity sha512-anj9j3Lm4l+/s60Jv1FD2m13r+T+aYstSHUT62hTugojM64LPe9XatfEVHRyWOrGjRU2buQhlm03xN8oxkg/OQ==
+  dependencies:
+    "@use-gesture/core" "10.2.23"
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz"
@@ -3074,6 +3223,11 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@webgpu/glslang@^0.0.15":
+  version "0.0.15"
+  resolved "https://registry.npmmirror.com/@webgpu/glslang/-/glslang-0.0.15.tgz#f5ccaf6015241e6175f4b90906b053f88483d1f2"
+  integrity sha512-niT+Prh3Aff8Uf1MVBVUsaNjFj9rJAKDXuoHIKiQbB+6IUP/3J3JIhBNyZ7lDhytvXxw6ppgnwKZdDJ08UMj4Q==
+
 "@xobotyi/scrollbar-width@1.9.5":
   version "1.9.5"
   resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
@@ -3916,6 +4070,13 @@ before-after-hook@^2.2.0:
   resolved "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz"
   integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==
 
+bidi-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/bidi-js/-/bidi-js-1.0.2.tgz#1a497a762c2ddea377429d2649c9ce0f8a91527f"
+  integrity sha512-rzSy/k7WdX5zOyeHHCOixGXbCHkyogkxPKL2r8QtzHmVQDiWCXUWa18bLdMWT9CYMLOYTjWpTHawuev2ouYJVw==
+  dependencies:
+    require-from-string "^2.0.2"
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
@@ -4548,6 +4709,18 @@ chardet@^0.7.0:
   resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chevrotain@^10.1.2:
+  version "10.4.2"
+  resolved "https://registry.npmmirror.com/chevrotain/-/chevrotain-10.4.2.tgz#9abeac6a60134931c0a0788b206400e5f7a3daba"
+  integrity sha512-gzF5GxE0Ckti5kZVuKEZycLntB5X2aj9RVY0r4/220GwQjdnljU+/t3kP74/FMWC7IzCDDEjQ9wsFUf0WCdSHg==
+  dependencies:
+    "@chevrotain/cst-dts-gen" "10.4.2"
+    "@chevrotain/gast" "10.4.2"
+    "@chevrotain/types" "10.4.2"
+    "@chevrotain/utils" "10.4.2"
+    lodash "4.17.21"
+    regexp-to-ast "0.5.0"
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz"
@@ -5768,6 +5941,11 @@ dayjs@1.x:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
   integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
 
+debounce@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -5989,6 +6167,13 @@ detect-file@^1.0.0:
   resolved "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
+detect-gpu@^5.0.1:
+  version "5.0.3"
+  resolved "https://registry.npmmirror.com/detect-gpu/-/detect-gpu-5.0.3.tgz#12c68bd98723722b7f6f2c1e270a0fb6c0634ad9"
+  integrity sha512-Jko9vTtzrt82frvIX+29ySPltF0+H4cansiGrLr1/ikXjRm9fgzAoCET8gPq6FTOU97CqOqCxMDZxPaBNTEV7Q==
+  dependencies:
+    webgl-constants "^1.1.1"
+
 detect-indent@6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz"
@@ -6247,6 +6432,11 @@ dotenv@8.2.0:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
 
+draco3d@^1.4.1:
+  version "1.5.5"
+  resolved "https://registry.npmmirror.com/draco3d/-/draco3d-1.5.5.tgz#6bf4bbdd65950e6153e991cb0dcb8a10323f610e"
+  integrity sha512-JVuNV0EJzD3LBYhGyIXJLeBID/EVtmFO1ZNhAYflTgiMiAJlbhXQmRRda/azjc8MRVMHh0gqGhiqHUo5dIXM8Q==
+
 drbg.js@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/drbg.js/-/drbg.js-1.0.1.tgz"
@@ -7148,6 +7338,11 @@ fbjs@^0.8.0, fbjs@^0.8.4:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.30"
 
+fflate@^0.6.9:
+  version "0.6.10"
+  resolved "https://registry.npmmirror.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43"
+  integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz"
@@ -7883,6 +8078,11 @@ globjoin@^0.1.4:
   resolved "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz"
   integrity sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=
 
+glsl-noise@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.npmmirror.com/glsl-noise/-/glsl-noise-0.0.0.tgz#367745f3a33382c0eeec4cb54b7e99cfc1d7670b"
+  integrity sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==
+
 gonzales-pe@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz"
@@ -9326,6 +9526,13 @@ istanbul-reports@^2.2.6:
   dependencies:
     html-escaper "^2.0.0"
 
+its-fine@^1.0.6:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/its-fine/-/its-fine-1.0.8.tgz#de55d8e5ed8e03f53de3e6fdb3147577bc86b077"
+  integrity sha512-MagTA9/J6kN3aEQsQu6by3nyrttCm0whCOYo4SfiNzOfYgcr1cb29mJ3zgluaJboaWOL/lHzJeMXi/QGSCfX1Q==
+  dependencies:
+    "@types/react-reconciler" "^0.28.0"
+
 java-properties@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/java-properties/-/java-properties-1.0.2.tgz"
@@ -10180,6 +10387,11 @@ known-css-properties@^0.18.0:
   resolved "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.18.0.tgz"
   integrity sha512-69AgJ1rQa7VvUsd2kpvVq+VeObDuo3zrj0CzM5Slmf6yduQFAI2kXPDQJR2IE/u6MSAUOJrwSzjg5vlz8qcMiw==
 
+ktx-parse@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.npmmirror.com/ktx-parse/-/ktx-parse-0.4.5.tgz#79905e22281a9d3e602b2ff522df1ee7d1813aa6"
+  integrity sha512-MK3FOody4TXbFf8Yqv7EBbySw7aPvEcPX++Ipt6Sox+/YMFvR5xaTyhfNSk1AEmMy+RYIw81ctN4IMxCB8OAlg==
+
 last-call-webpack-plugin@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz"
@@ -10499,6 +10711,11 @@ lodash.capitalize@^4.2.1:
   resolved "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz"
   integrity sha1-+CbJtOKoUR2E46yinbBeGk87cqk=
 
+lodash.clamp@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmmirror.com/lodash.clamp/-/lodash.clamp-4.0.3.tgz#5c24bedeeeef0753560dc2b4cb4671f90a6ddfaa"
+  integrity sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==
+
 lodash.curry@^4.0.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz"
@@ -10554,6 +10771,16 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.omit@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmmirror.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
+  integrity sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==
+
+lodash.pick@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npmmirror.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
+  integrity sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
@@ -10584,7 +10811,7 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz"
   integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
 
-lodash@4.17.20, "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0:
+lodash@4.17.20, lodash@4.17.21, "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0:
   version "4.17.20"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -10919,6 +11146,11 @@ merge@^2.1.0:
   resolved "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz"
   integrity sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==
 
+meshline@^3.1.6:
+  version "3.1.6"
+  resolved "https://registry.npmmirror.com/meshline/-/meshline-3.1.6.tgz#eee67d9b0fd9841652cc1dc2d3833093ae8e68ca"
+  integrity sha512-8JZJOdaL5oz3PI/upG8JvP/5FfzYUOhrkJ8np/WKvXzl0/PZ2V9pqTvCIjSKv+w9ccg2xb+yyBhXAwt6ier3ug==
+
 methods@^1.1.2, methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz"
@@ -11197,6 +11429,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+mmd-parser@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmmirror.com/mmd-parser/-/mmd-parser-1.0.4.tgz#87cc05782cb5974ca854f0303fc5147bc9d690e7"
+  integrity sha512-Qi0VCU46t2IwfGv5KF0+D/t9cizcDug7qnNoy9Ggk7aucp0tssV8IwTMkBlDbm+VqAf3cdQHTCARKSsuS2MYFg==
+
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz"
@@ -12000,6 +12237,14 @@ opener@^1.5.2:
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
   integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
+opentype.js@^1.3.3:
+  version "1.3.4"
+  resolved "https://registry.npmmirror.com/opentype.js/-/opentype.js-1.3.4.tgz#1c0e72e46288473cc4a4c6a2dc60fd7fe6020d77"
+  integrity sha512-d2JE9RP/6uagpQAVtJoF0pJJA/fgai89Cc50Yp0EJHk+eLp6QQ7gBoblsnubRULNY132I0J1QKMJ+JTbMqz4sw==
+  dependencies:
+    string.prototype.codepointat "^0.2.1"
+    tiny-inflate "^1.0.3"
+
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz"
@@ -13362,6 +13607,11 @@ postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, po
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
+potpack@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/potpack/-/potpack-1.0.2.tgz#23b99e64eb74f5741ffe7656b5b5c4ddce8dfc14"
+  integrity sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
@@ -14201,6 +14451,13 @@ react-component-benchmark@1.0.0:
   resolved "https://registry.npmjs.org/react-component-benchmark/-/react-component-benchmark-1.0.0.tgz"
   integrity sha512-YC+PPhfevw1NHYjgb8NeFXdH9gq1D0bG1zcLUxetQ1PregdBwX3t9LTU4fJviDI4IgU/bL3xR6BB3ZID59Sprw==
 
+react-composer@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmmirror.com/react-composer/-/react-composer-5.0.3.tgz#7beb9513da5e8687f4f434ea1333ef36a4f3091b"
+  integrity sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==
+  dependencies:
+    prop-types "^15.6.0"
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz"
@@ -14231,15 +14488,13 @@ react-dev-utils@^10.2.1:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@16.13.0:
-  version "16.13.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.13.0.tgz"
-  integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==
+react-dom@^18:
+  version "18.2.0"
+  resolved "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.0"
+    scheduler "^0.23.0"
 
 react-error-overlay@^6.0.7:
   version "6.0.9"
@@ -14310,6 +14565,11 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-merge-refs@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
+  integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
+
 react-popper@^2.2.3:
   version "2.2.5"
   resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz"
@@ -14318,6 +14578,14 @@ react-popper@^2.2.3:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+react-reconciler@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.npmmirror.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
+  integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.21.0"
+
 react-router-dom@5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz"
@@ -14429,6 +14697,13 @@ react-universal-interface@^0.6.2:
   resolved "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz"
   integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
 
+react-use-measure@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
+  integrity sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==
+  dependencies:
+    debounce "^1.2.1"
+
 react-use@15.3.4:
   version "15.3.4"
   resolved "https://registry.npmjs.org/react-use/-/react-use-15.3.4.tgz"
@@ -14449,14 +14724,12 @@ react-use@15.3.4:
     ts-easing "^0.2.0"
     tslib "^2.0.0"
 
-react@16.13.0:
-  version "16.13.0"
-  resolved "https://registry.npmjs.org/react/-/react-16.13.0.tgz"
-  integrity sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==
+react@^18:
+  version "18.2.0"
+  resolved "https://registry.npmmirror.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-cmd-shim@^2.0.0:
   version "2.0.0"
@@ -14654,6 +14927,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -14686,6 +14964,11 @@ regex-parser@2.2.10:
   resolved "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.10.tgz"
   integrity sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA==
 
+regexp-to-ast@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.npmmirror.com/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz#56c73856bee5e1fef7f73a00f1473452ab712a24"
+  integrity sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==
+
 regexp.prototype.flags@^1.2.0:
   version "1.3.1"
   resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz"
@@ -14916,6 +15199,11 @@ require-directory@^2.1.1:
   resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz"
@@ -15239,6 +15527,20 @@ scheduler@^0.19.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz"
@@ -15993,6 +16295,11 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
+stats.js@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.npmmirror.com/stats.js/-/stats.js-0.17.0.tgz#b1c3dc46d94498b578b7fd3985b81ace7131cc7d"
+  integrity sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==
+
 "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
@@ -16119,6 +16426,11 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string.prototype.codepointat@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmmirror.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz#004ad44c8afc727527b108cd462b4d971cd469bc"
+  integrity sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==
+
 string.prototype.matchall@^4.0.2:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
@@ -16473,6 +16785,11 @@ supports-hyperlinks@^2.1.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+suspend-react@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.npmmirror.com/suspend-react/-/suspend-react-0.0.8.tgz#b0740c1386b4eb652f17affe4339915ee268bd31"
+  integrity sha512-ZC3r8Hu1y0dIThzsGw0RLZplnX9yXwfItcvaIzJc2VQVi8TGyGDlu92syMB5ulybfvGLHAI5Ghzlk23UBPF8xg==
+
 svg-parser@^2.0.0:
   version "2.0.4"
   resolved "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz"
@@ -16649,6 +16966,33 @@ text-table@0.2.0, text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+three-mesh-bvh@^0.5.19:
+  version "0.5.19"
+  resolved "https://registry.npmmirror.com/three-mesh-bvh/-/three-mesh-bvh-0.5.19.tgz#72d489856561d01ef7d4add81f0c82d3fb644d09"
+  integrity sha512-Q8huT0NautyR4afW0oMlOz8a4qm3b1jQ1ccMLF/TZ0rA4i58HljsnBjCLEDLQtIINZyLtZPdw60mrD81V/TZDA==
+
+three-stdlib@^2.20.4:
+  version "2.20.5"
+  resolved "https://registry.npmmirror.com/three-stdlib/-/three-stdlib-2.20.5.tgz#f51a00796fc59d93c636b5428d7aaff2f8ed8daf"
+  integrity sha512-sZm6nuyMsAZh/SH2XbEW77uGtI/bokMwP/eN6oDj2WDna87j1fNQI86jkvwx77tK6rCeAaEIUjJJlzWfFRY3cQ==
+  dependencies:
+    "@babel/runtime" "^7.16.7"
+    "@types/offscreencanvas" "^2019.6.4"
+    "@webgpu/glslang" "^0.0.15"
+    chevrotain "^10.1.2"
+    draco3d "^1.4.1"
+    fflate "^0.6.9"
+    ktx-parse "^0.4.5"
+    mmd-parser "^1.0.4"
+    opentype.js "^1.3.3"
+    potpack "^1.0.1"
+    zstddec "^0.0.2"
+
+three@0.147.0:
+  version "0.147.0"
+  resolved "https://registry.npmmirror.com/three/-/three-0.147.0.tgz#1974af9e8e0c1efb3a8561334d57c0b6c29a7951"
+  integrity sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw==
+
 throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz"
@@ -16696,6 +17040,11 @@ timsort@^0.3.0:
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-inflate@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
+  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
+
 tiny-invariant@^1.0.2:
   version "1.1.0"
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz"
@@ -16844,6 +17193,26 @@ trim@0.0.1:
   resolved "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz"
   integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
 
+troika-three-text@^0.47.1:
+  version "0.47.1"
+  resolved "https://registry.npmmirror.com/troika-three-text/-/troika-three-text-0.47.1.tgz#4a239b122242d7ea93dbbf66a9f1863eca83d979"
+  integrity sha512-/fPRUmxCkXxyUT8k6REC/aWeFzKbNr37ivrkrplSJNb3JcBUXvVt8MT0Ac5wTUvFsYTviYWprYS4/8Laen08WA==
+  dependencies:
+    bidi-js "^1.0.2"
+    troika-three-utils "^0.47.0"
+    troika-worker-utils "^0.47.0"
+    webgl-sdf-generator "1.1.1"
+
+troika-three-utils@^0.47.0:
+  version "0.47.0"
+  resolved "https://registry.npmmirror.com/troika-three-utils/-/troika-three-utils-0.47.0.tgz#4749334ad2ae043767916f79bcc365cbb5ea64b5"
+  integrity sha512-yoVTQxVbpQX3a55giIwqwq6hyJA6oYvq7kaNGwFTeicoWmTZCqqTbytafx1gcuL5umrtw5MYgsxYUSOha+xp5w==
+
+troika-worker-utils@^0.47.0:
+  version "0.47.0"
+  resolved "https://registry.npmmirror.com/troika-worker-utils/-/troika-worker-utils-0.47.0.tgz#bea382fee55333e177955e7ba6497d64b9d9388d"
+  integrity sha512-PSUc9vunDEkbE23jpgXD3PcF96jQHKjgMjS+4o5g6DEK/ZAPTnldb+FNddhppawfUcuraMFrslo0GmIC8UpEmA==
+
 trough@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz"
@@ -17341,6 +17710,11 @@ utila@~0.4:
   resolved "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz"
   integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
 
+utility-types@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.npmmirror.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
+  integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
@@ -17526,6 +17900,16 @@ webfontloader@1.6.28:
   resolved "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz"
   integrity sha1-23hhKSU8tujq5UwvsF+HCvZnW64=
 
+webgl-constants@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/webgl-constants/-/webgl-constants-1.1.1.tgz#f9633ee87fea56647a60b9ce735cbdfb891c6855"
+  integrity sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg==
+
+webgl-sdf-generator@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz#3e1b422b3d87cd3cc77f2602c9db63bc0f6accbd"
+  integrity sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -18136,9 +18520,19 @@ yn@3.1.1:
   resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz"
   integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
 
+zstddec@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.npmmirror.com/zstddec/-/zstddec-0.0.2.tgz#57e2f28dd1ff56b750e07d158a43f0611ad9eeb4"
+  integrity sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA==
+
 zustand@4.1.4:
   version "4.1.4"
   resolved "https://registry.npmmirror.com/zustand/-/zustand-4.1.4.tgz#b0286da4cc9edd35e91c96414fa54bfa4652a54d"
   integrity sha512-k2jVOlWo8p4R83mQ+/uyB8ILPO2PCJOf+QVjcL+1PbMCk1w5OoPYpAIxy9zd93FSfmJqoH6lGdwzzjwqJIRU5A==
   dependencies:
     use-sync-external-store "1.2.0"
+
+zustand@^3.5.13, zustand@^3.7.1:
+  version "3.7.2"
+  resolved "https://registry.npmmirror.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"
+  integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==

From 876c18bb9d70319cbf660dc972adf2505e50e24d Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 21 Dec 2022 15:29:04 +0800
Subject: [PATCH 30/42] feat: add fallback image to NFTPreview

---
 src/app/components/NFTPreview/index.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/app/components/NFTPreview/index.tsx b/src/app/components/NFTPreview/index.tsx
index 0581010dd..4c0156ce4 100644
--- a/src/app/components/NFTPreview/index.tsx
+++ b/src/app/components/NFTPreview/index.tsx
@@ -135,18 +135,7 @@ export const NFTCardInfo = React.memo(
       }
     }, [audioRef]);
 
-    if (nftType === 'image') {
-      return (
-        <Image
-          width={width}
-          style={{ minHeight: imageMinHeight }}
-          src={imageUri}
-          preview={preview}
-          fallback={tokenIdNotFound}
-          alt={tokenId + ''}
-        />
-      );
-    } else if (nftType === 'video') {
+    if (nftType === 'video') {
       return (
         <VideoCard>
           <video
@@ -189,7 +178,16 @@ export const NFTCardInfo = React.memo(
         </ThreeDCard>
       );
     } else {
-      return null;
+      return (
+        <Image
+          width={width}
+          style={{ minHeight: imageMinHeight }}
+          src={imageUri}
+          preview={preview}
+          fallback={tokenIdNotFound}
+          alt={tokenId + ''}
+        />
+      );
     }
   },
 );

From 6b6c77506dd39a124b47e40515e69bb2ba529bd2 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Fri, 23 Dec 2022 11:55:08 +0800
Subject: [PATCH 31/42] feat: enhancement NFT detail to show more info

---
 src/app/components/NFTPreview/index.tsx |  17 ++-
 src/app/components/Text/index.tsx       |   2 +-
 src/app/containers/NFTDetail/index.tsx  | 143 +++++++++++++++++++++++-
 src/locales/en/translation.json         |   4 +-
 src/locales/zh_cn/translation.json      |   4 +-
 5 files changed, 159 insertions(+), 11 deletions(-)

diff --git a/src/app/components/NFTPreview/index.tsx b/src/app/components/NFTPreview/index.tsx
index 4c0156ce4..a175ccf0e 100644
--- a/src/app/components/NFTPreview/index.tsx
+++ b/src/app/components/NFTPreview/index.tsx
@@ -199,12 +199,14 @@ export const NFTPreview = React.memo(
     type = 'preview',
     amount = 0,
     owner = '',
+    enable3D = false,
   }: {
     contractAddress?: string;
     tokenId?: number | string;
     type?: 'preview' | 'card' | 'primary';
     amount?: number;
     owner?: string;
+    enable3D?: boolean;
   }) => {
     const { t, i18n } = useTranslation();
     const lang = i18n.language.includes('zh') ? 'zh' : 'en';
@@ -225,9 +227,18 @@ export const NFTPreview = React.memo(
           .then(data => {
             if (data) {
               setImageMinHeight(data.imageMinHeight);
-              if (data.imageUri) {
-                setImageUri(data.imageUri);
+
+              // support display 3d resource
+              const { image = NotFoundIcon, animation_url } =
+                data.detail?.metadata || {};
+
+              let img = image;
+
+              if (enable3D && animation_url) {
+                img = animation_url;
               }
+
+              setImageUri(img);
               setImageName(data.imageName ? data.imageName[lang] || '' : '');
             }
           })
@@ -239,7 +250,7 @@ export const NFTPreview = React.memo(
             setIsFirstTime(false);
           });
       }
-    }, [contractAddress, tokenId, lang]);
+    }, [contractAddress, tokenId, lang, enable3D]);
 
     if (contractAddress && tokenId) {
       if (type === 'card') {
diff --git a/src/app/components/Text/index.tsx b/src/app/components/Text/index.tsx
index 8cdc07619..aaf4b2cd1 100644
--- a/src/app/components/Text/index.tsx
+++ b/src/app/components/Text/index.tsx
@@ -85,7 +85,7 @@ export const Text = React.memo(
       p.getPopupContainer = getPopupContainer;
     }
     return React.createElement(Tooltip, p, [
-      <StyledTextWrapper maxWidth={maxWidth}>
+      <StyledTextWrapper maxWidth={maxWidth} key="text">
         <UIText className={clsx('sirius-text', className)} {...props}>
           {child}
         </UIText>
diff --git a/src/app/containers/NFTDetail/index.tsx b/src/app/containers/NFTDetail/index.tsx
index 8b9d67f64..8b18875b8 100644
--- a/src/app/containers/NFTDetail/index.tsx
+++ b/src/app/containers/NFTDetail/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -27,11 +27,9 @@ import { formatTimeStamp } from 'utils';
 import { TransferAndHolders } from './TransferAndHolders';
 import { TransferModal } from './TransferModal';
 
-import lodash from 'lodash';
 import { AddressContainer } from 'app/components/AddressContainer';
 import { useCallback } from 'react';
-// @ts-ignore
-window.lodash = lodash;
+import dayjs from 'dayjs';
 
 const AceEditorStyle = {
   width: 'initial',
@@ -52,6 +50,86 @@ interface Query {
   tokenId?: string;
 }
 
+interface StringAttributes {
+  trait_type: string;
+  value: string;
+}
+
+interface NumberAttributes {
+  trait_type: string;
+  value: number;
+}
+
+const TraitPanel = ({ data = [] }: { data: Array<StringAttributes> }) => {
+  return (
+    <StyledTraitPanelWrapper>
+      <Row gutter={[16, 16]} align="stretch">
+        {data.map(d => (
+          <Col span={6} key={d.trait_type}>
+            <div className="container">
+              <div className="type">{d.trait_type}</div>
+              <div className="value">{d.value}</div>
+            </div>
+          </Col>
+        ))}
+      </Row>
+    </StyledTraitPanelWrapper>
+  );
+};
+
+const DatePanel = ({ data = [] }: { data: Array<NumberAttributes> }) => {
+  return (
+    <StyledDatePanelWrapper>
+      {data.map(d => {
+        let date = '--';
+
+        try {
+          date = dayjs(d.value * 1000).format('YYYY-MM-DD HH:mm:ss');
+        } catch (error) {}
+
+        return (
+          <div className="container" key={d.trait_type}>
+            <span className="type">{d.trait_type}</span>
+            <span className="value">{date}</span>
+          </div>
+        );
+      })}
+    </StyledDatePanelWrapper>
+  );
+};
+
+const DescriptionPanel = ({ data = '' }) => {
+  return <div>{data}</div>;
+};
+
+const StyledTraitPanelWrapper = styled.div`
+  .container {
+    border: 1px solid var(--theme-color-blue2);
+    border-radius: 4px;
+    padding: 1rem;
+    text-align: center;
+    background-color: rgba(70, 101, 240, 0.05);
+    height: 100%;
+  }
+
+  .type {
+    color: var(--theme-color-blue2);
+    text-transform: uppercase;
+    font-weight: 500;
+    font-size: 12px;
+  }
+
+  .value {
+    font-weight: 500;
+  }
+`;
+const StyledDatePanelWrapper = styled.div`
+  .container {
+    display: flex;
+    justify-content: space-between;
+  }
+`;
+
 export function NFTDetail(props) {
   const bp = useBreakpoint();
   const { t, i18n } = useTranslation();
@@ -106,6 +184,30 @@ export function NFTDetail(props) {
   const tokenType = data.type?.replace('ERC', 'CRC');
   const name =
     i18n.language === 'zh-CN' ? data.imageName?.zh : data.imageName?.en;
+  const { description = '', attributes = [] } = data.detail?.metadata || {};
+
+  const {
+    description: descrptionStr,
+    dateTypeAttributes,
+    stringTypeAttributes,
+  } = useMemo(() => {
+    let dateTypeAttributes: any = [],
+      stringTypeAttributes: any = [];
+
+    attributes.forEach(a => {
+      if (a.display_type === 'date') {
+        dateTypeAttributes.push(a);
+      } else if (a.display_type === undefined) {
+        stringTypeAttributes.push(a);
+      }
+    });
+
+    return {
+      description,
+      dateTypeAttributes,
+      stringTypeAttributes,
+    };
+  }, [description, attributes]);
 
   return (
     <StyledWrapper>
@@ -121,7 +223,12 @@ export function NFTDetail(props) {
       <Row gutter={[24, 24]}>
         <Col sm={24} md={8} style={{ width: '100%' }}>
           <Card style={{ padding: 0 }}>
-            <NFTPreview contractAddress={address} tokenId={id} type="primary" />
+            <NFTPreview
+              contractAddress={address}
+              tokenId={id}
+              type="primary"
+              enable3D={true}
+            />
           </Card>
 
           {bp !== 's' && (
@@ -250,6 +357,32 @@ export function NFTDetail(props) {
                   </SkeletonContainer>
                 </Description>
               </Collapse.Panel>
+              {!!stringTypeAttributes.length && (
+                <Collapse.Panel
+                  header={t(translations.nftDetail.trait, {
+                    amount: stringTypeAttributes.length,
+                  })}
+                  key="trait"
+                >
+                  <TraitPanel data={stringTypeAttributes} />
+                </Collapse.Panel>
+              )}
+              {!!dateTypeAttributes.length && (
+                <Collapse.Panel
+                  header={t(translations.nftDetail.datetime)}
+                  key="date"
+                >
+                  <DatePanel data={dateTypeAttributes} />
+                </Collapse.Panel>
+              )}
+              {!!descrptionStr && (
+                <Collapse.Panel
+                  header={t(translations.nftDetail.description)}
+                  key="description"
+                >
+                  <DescriptionPanel data={descrptionStr} />
+                </Collapse.Panel>
+              )}
               {data.detail?.metadata && (
                 <Collapse.Panel
                   header={t(translations.nftDetail.metadata)}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 9d0ac7844..b6f8d1f58 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -103,7 +103,9 @@
       "invalidNetwork": "Please input {{network}} address",
       "invalidAmount": "Please input 1 - {{amount}}"
     },
-    "refreshTip": "Request has been submitted, wait a few minute..."
+    "refreshTip": "Request has been submitted, wait a few minute...",
+    "trait": "Trait ({{amount}})",
+    "datetime": "Datetime"
   },
   "fccfx": {
     "title": "FC-CFX Non-reversible Exchange",
diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
index 7ba066c69..1515ff660 100644
--- a/src/locales/zh_cn/translation.json
+++ b/src/locales/zh_cn/translation.json
@@ -102,7 +102,9 @@
       "invalidNetwork": "请输入{{network}}地址",
       "invalidAmount": "请输入 1 - {{amount}} 个"
     },
-    "refreshTip": "请求已提交，请稍等..."
+    "refreshTip": "请求已提交，请稍等...",
+    "trait": "特征（{{amount}}）",
+    "datetime": "日期"
   },
   "fccfx": {
     "title": "FC-CFX 不可逆兑换",

From 5855baa19edb1fe891ceaec7e48814b99fd52257 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Mon, 26 Dec 2022 10:03:44 +0800
Subject: [PATCH 32/42] feat: remove duplicate description panel of NFT detail

---
 src/app/containers/NFTDetail/index.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/app/containers/NFTDetail/index.tsx b/src/app/containers/NFTDetail/index.tsx
index 8b18875b8..710ac8c25 100644
--- a/src/app/containers/NFTDetail/index.tsx
+++ b/src/app/containers/NFTDetail/index.tsx
@@ -406,14 +406,6 @@ export function NFTDetail(props) {
                   />
                 </Collapse.Panel>
               )}
-              {data.detail?.metadata?.description && (
-                <Collapse.Panel
-                  header={t(translations.nftDetail.description)}
-                  key="description"
-                >
-                  {data.detail?.metadata?.description}
-                </Collapse.Panel>
-              )}
             </Collapse>
           </Card>
         </Col>

From 91dd60ad07484b5485653a9e64bbff47cfe78db1 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Mon, 26 Dec 2022 14:57:00 +0800
Subject: [PATCH 33/42] feat: update i18n

---
 src/locales/zh_cn/translation.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
index 1515ff660..da6be13be 100644
--- a/src/locales/zh_cn/translation.json
+++ b/src/locales/zh_cn/translation.json
@@ -86,7 +86,7 @@
     "contractInfoTip": "合约部署时设置的通证的名称和符号",
     "owner": "所有者",
     "url": "内容链接",
-    "creator": "创作者",
+    "creator": "合约创建者",
     "mintedTime": "发行时间",
     "transfer": "转发",
     "from": "发送方",

From 3fe0f88419446b65b7bdf0c229bf3d812a36d332 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Mon, 26 Dec 2022 17:27:11 +0800
Subject: [PATCH 34/42] fix: fixed SDK init contract error

---
 .../AddressContractDetail/ContractContent.tsx | 101 ++++++++++--------
 1 file changed, 59 insertions(+), 42 deletions(-)

diff --git a/src/app/containers/AddressContractDetail/ContractContent.tsx b/src/app/containers/AddressContractDetail/ContractContent.tsx
index f5298c516..be241893d 100644
--- a/src/app/containers/AddressContractDetail/ContractContent.tsx
+++ b/src/app/containers/AddressContractDetail/ContractContent.tsx
@@ -50,53 +50,57 @@ const Code = ({ contractInfo }) => {
 
   const constructor = useMemo(() => {
     if (constructorArgs && abi && address) {
-      const contract = CFX.Contract({
-        abi,
-        address,
-      });
-
-      const data = contract.abi.decodeData(constructorArgs);
-
-      if (data === '0x' || !data) {
-        return null;
-      } else {
-        const encodeArgs = lodash.words(constructorArgs.substr(2), /.{64}/g);
-
-        const { object, fullName } = data;
-
-        try {
-          if (fullName === 'constructor()') {
+      try {
+        const contract = CFX.Contract({
+          abi,
+          address,
+        });
+
+        const data = contract.abi.decodeData(constructorArgs);
+
+        if (data === '0x' || !data) {
+          return null;
+        } else {
+          const encodeArgs = lodash.words(constructorArgs.substr(2), /.{64}/g);
+
+          const { object, fullName } = data;
+
+          try {
+            if (fullName === 'constructor()') {
+              return {
+                fullArgs: constructorArgs,
+                encodeArgs,
+                decodeArgs: [],
+              };
+            } else {
+              let types = (/constructor\((.*)\)/.exec(fullName) as string[])[1]
+                .split(',')
+                .map(t => {
+                  return t.trim().split(' ');
+                })
+                .map(i => {
+                  return i.concat(
+                    formatData(object[i[1]], i[0], {
+                      space: null,
+                    }),
+                  );
+                });
+              return {
+                fullArgs: constructorArgs,
+                encodeArgs,
+                decodeArgs: types,
+              };
+            }
+          } catch (error) {
             return {
               fullArgs: constructorArgs,
               encodeArgs,
               decodeArgs: [],
             };
-          } else {
-            let types = (/constructor\((.*)\)/.exec(fullName) as string[])[1]
-              .split(',')
-              .map(t => {
-                return t.trim().split(' ');
-              })
-              .map(i => {
-                return i.concat(
-                  formatData(object[i[1]], i[0], {
-                    space: null,
-                  }),
-                );
-              });
-            return {
-              fullArgs: constructorArgs,
-              encodeArgs,
-              decodeArgs: types,
-            };
           }
-        } catch (error) {
-          return {
-            fullArgs: constructorArgs,
-            encodeArgs,
-            decodeArgs: [],
-          };
         }
+      } catch (error) {
+        return null;
       }
     }
   }, [abi, address, constructorArgs]);
@@ -397,6 +401,19 @@ export const ContractContent = ({ contractInfo }) => {
     destroy = {},
   } = contractInfo;
   const [activeIndex, setActiveIndex] = useState(0);
+  const [initError, setInitError] = useState(false);
+
+  // some contract init will trigger SDK error, need SDK to solve it
+  useEffect(() => {
+    try {
+      CFX.Contract({
+        abi,
+        address,
+      });
+    } catch (error) {
+      setInitError(true);
+    }
+  }, [abi, address]);
 
   let tabs: Array<TabsItemType> = [
     {
@@ -406,7 +423,7 @@ export const ContractContent = ({ contractInfo }) => {
     },
   ];
 
-  if (abi && destroy.status === 0 && Object.keys(verify).length) {
+  if (!initError && abi && destroy.status === 0 && Object.keys(verify).length) {
     tabs = tabs.concat([
       {
         key: 'read',
@@ -438,7 +455,7 @@ export const ContractContent = ({ contractInfo }) => {
   }
 
   // check if is a proxy contract
-  if (proxy?.proxy && implementation?.address) {
+  if (!initError && proxy?.proxy && implementation?.address) {
     // proxy contract
     if (implementation?.verify?.exactMatch) {
       tabs = tabs.concat([

From 03ea834fb81fe7cd82162f0e438c1f0327fa1884 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 28 Dec 2022 10:54:11 +0800
Subject: [PATCH 35/42] feat: update NFT metadata display style

---
 src/app/containers/NFTDetail/index.tsx | 29 ++++++++++++++++++++++----
 src/styles/global-styles.ts            |  6 ++++++
 src/styles/variable.ts                 |  3 +++
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/app/containers/NFTDetail/index.tsx b/src/app/containers/NFTDetail/index.tsx
index 710ac8c25..7378b51a7 100644
--- a/src/app/containers/NFTDetail/index.tsx
+++ b/src/app/containers/NFTDetail/index.tsx
@@ -58,6 +58,7 @@ interface StringAttributes {
 interface NumberAttributes {
   trait_type: string;
   value: number;
+  display_type: string;
 }
 
 const TraitPanel = ({ data = [] }: { data: Array<StringAttributes> }) => {
@@ -104,29 +105,49 @@ const DescriptionPanel = ({ data = '' }) => {
 
 const StyledTraitPanelWrapper = styled.div`
   .container {
-    border: 1px solid var(--theme-color-blue2);
+    border: 1px solid var(--theme-color-blue4);
     border-radius: 4px;
     padding: 1rem;
     text-align: center;
-    background-color: rgba(70, 101, 240, 0.05);
+    background-color: var(--theme-color-blue3);
     height: 100%;
   }
 
   .type {
-    color: var(--theme-color-blue2);
-    text-transform: uppercase;
+    color: var(--theme-color-gray4);
     font-weight: 500;
     font-size: 12px;
+    margin-bottom: 12px;
   }
 
   .value {
+    font-size: 16px;
     font-weight: 500;
+    line-height: 20px;
   }
 `;
 const StyledDatePanelWrapper = styled.div`
   .container {
     display: flex;
     justify-content: space-between;
+
+    &:not(:last-child) {
+      padding-bottom: 12px;
+    }
+
+    &:not(:first-child) {
+      padding-top: 12px;
+      border-top: 1px solid var(--theme-color-gray0);
+    }
+  }
+
+  .type {
+    font-size: 14px;
+    color: var(--theme-color-gray4);
+  }
+  .value {
+    font-size: 14px;
+    font-weight: 450;
   }
 `;
 
diff --git a/src/styles/global-styles.ts b/src/styles/global-styles.ts
index 8e6767a92..b6fda8c2a 100644
--- a/src/styles/global-styles.ts
+++ b/src/styles/global-styles.ts
@@ -6,12 +6,15 @@ import {
   blue0,
   blue1,
   blue2,
+  blue3,
+  blue4,
   gray0,
   gray1,
   gray2,
   gray3,
   gray4,
   orange0,
+  black0,
 } from './variable';
 
 export const GlobalStyle = createGlobalStyle`
@@ -20,12 +23,15 @@ export const GlobalStyle = createGlobalStyle`
     --theme-color-blue0: ${blue0};
     --theme-color-blue1: ${blue1};
     --theme-color-blue2: ${blue2};
+    --theme-color-blue3: ${blue3};
+    --theme-color-blue4: ${blue4};
     --theme-color-gray0: ${gray0};
     --theme-color-gray1: ${gray1};
     --theme-color-gray2: ${gray2};
     --theme-color-gray3: ${gray3};
     --theme-color-gray4: ${gray4};
     --theme-color-orange0: ${orange0};
+    --theme-color-black0: ${black0};
   }
 
   html,
diff --git a/src/styles/variable.ts b/src/styles/variable.ts
index 4960d96f5..7dd960ca3 100644
--- a/src/styles/variable.ts
+++ b/src/styles/variable.ts
@@ -7,9 +7,12 @@ export const monospaceFont = `'Roboto Mono', 'Lucida Console', Consolas, 'Libera
 export const blue0 = '#7789D3';
 export const blue1 = '#26244B';
 export const blue2 = '#4665f0';
+export const blue3 = '#F5F7FF';
+export const blue4 = '#7789D3';
 export const gray0 = '#F1F3F9';
 export const gray1 = '#FDFDFE';
 export const gray2 = '#8A8C95';
 export const gray3 = '#EBECED';
 export const gray4 = '#74798C';
 export const orange0 = '#F8963E';
+export const black0 = '#0F1327';

From c7bd7a8c4aacd65fd785c701183b61a23a3d3da3 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 28 Dec 2022 15:54:07 +0800
Subject: [PATCH 36/42] feat: fixed 3d uri issue

---
 src/app/components/NFTPreview/3D.tsx    | 7 ++++---
 src/app/components/NFTPreview/index.tsx | 3 ++-
 src/app/containers/NFTDetail/index.tsx  | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/components/NFTPreview/3D.tsx b/src/app/components/NFTPreview/3D.tsx
index 80bae4915..484ffc7f6 100644
--- a/src/app/components/NFTPreview/3D.tsx
+++ b/src/app/components/NFTPreview/3D.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Canvas } from '@react-three/fiber';
 import { useLoader } from '@react-three/fiber';
 // @ts-ignore
-import { Environment, OrbitControls } from '@react-three/drei';
+import { OrbitControls } from '@react-three/drei';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { Suspense } from 'react';
 import styled from 'styled-components';
@@ -20,12 +20,13 @@ export const ThreeD = ({ url = '' }) => {
         style={{
           position: 'absolute',
           top: '0',
+          background: '#FFFFFF',
         }}
       >
         <Suspense fallback={null}>
-          <primitive object={gltf.scene} scale={0.4} />
+          <primitive object={gltf.scene} scale={1} />
           <OrbitControls />
-          <Environment preset="sunset" background />
+          {/* <Environment preset="studio" background /> */}
         </Suspense>
       </Canvas>
     </Container>
diff --git a/src/app/components/NFTPreview/index.tsx b/src/app/components/NFTPreview/index.tsx
index a175ccf0e..5e1ef4260 100644
--- a/src/app/components/NFTPreview/index.tsx
+++ b/src/app/components/NFTPreview/index.tsx
@@ -81,7 +81,8 @@ export const NFTCardInfo = React.memo(
     useEffect(() => {
       let nftType = 'image';
       // eslint-disable-next-line no-useless-escape
-      const suffix = /\.[^\.]+$/.exec(imageUri.substr(-5));
+      const url = /[^?#]+/.exec(imageUri)?.[0] || '';
+      const suffix = /\.[^.]+$/.exec(url);
 
       if (suffix) {
         const sourceType = suffix[0].substr(1);
diff --git a/src/app/containers/NFTDetail/index.tsx b/src/app/containers/NFTDetail/index.tsx
index 7378b51a7..a49fc116b 100644
--- a/src/app/containers/NFTDetail/index.tsx
+++ b/src/app/containers/NFTDetail/index.tsx
@@ -215,7 +215,7 @@ export function NFTDetail(props) {
     let dateTypeAttributes: any = [],
       stringTypeAttributes: any = [];
 
-    attributes.forEach(a => {
+    attributes?.forEach(a => {
       if (a.display_type === 'date') {
         dateTypeAttributes.push(a);
       } else if (a.display_type === undefined) {

From 29d2b4a4c08e62803e647a2d70bafec93ce97d69 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Thu, 5 Jan 2023 14:39:10 +0800
Subject: [PATCH 37/42] feat: add .obj .fbx format support of 3D NFT

---
 package-lock.json                             |  7 +--
 src/app/components/ErrorBoundary/index.tsx    | 31 +++++++++++
 src/app/components/NFTPreview/3D.tsx          | 54 +++++++++++--------
 src/app/components/NFTPreview/index.tsx       |  7 ++-
 src/app/components/NFTPreview/scene/FBX.tsx   | 13 +++++
 src/app/components/NFTPreview/scene/GLTF.tsx  | 13 +++++
 src/app/components/NFTPreview/scene/OBJ.tsx   | 13 +++++
 src/app/components/NFTPreview/scene/index.tsx | 17 ++++++
 8 files changed, 126 insertions(+), 29 deletions(-)
 create mode 100644 src/app/components/ErrorBoundary/index.tsx
 create mode 100644 src/app/components/NFTPreview/scene/FBX.tsx
 create mode 100644 src/app/components/NFTPreview/scene/GLTF.tsx
 create mode 100644 src/app/components/NFTPreview/scene/OBJ.tsx
 create mode 100644 src/app/components/NFTPreview/scene/index.tsx

diff --git a/package-lock.json b/package-lock.json
index 5aacd95c1..f96c41014 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37818,11 +37818,6 @@
         "lodash.uniq": "^4.5.0"
       }
     },
-    "caniuse-lite": {
-      "version": "1.0.30001338",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz",
-      "integrity": "sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ=="
-    },
     "canvas": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.6.1.tgz",
@@ -57539,4 +57534,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/components/ErrorBoundary/index.tsx b/src/app/components/ErrorBoundary/index.tsx
new file mode 100644
index 000000000..30b0c3f9f
--- /dev/null
+++ b/src/app/components/ErrorBoundary/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.log(error, errorInfo);
+  }
+
+  render() {
+    // @ts-ignore
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      // @ts-ignore
+      return this.props.message || <div>Something went wrong.</div>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/src/app/components/NFTPreview/3D.tsx b/src/app/components/NFTPreview/3D.tsx
index 484ffc7f6..f0c0b39b1 100644
--- a/src/app/components/NFTPreview/3D.tsx
+++ b/src/app/components/NFTPreview/3D.tsx
@@ -1,34 +1,46 @@
 import React from 'react';
 import { Canvas } from '@react-three/fiber';
-import { useLoader } from '@react-three/fiber';
 // @ts-ignore
 import { OrbitControls } from '@react-three/drei';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { Suspense } from 'react';
 import styled from 'styled-components';
-import { Skeleton } from '@cfxjs/antd';
+import { Skeleton, Image } from '@cfxjs/antd';
+import ErrorBoundary from '../ErrorBoundary';
+import Scene from './scene';
+import NotFoundIcon from 'images/token/tokenIdNotFound.jpg';
 
-export const ThreeD = ({ url = '' }) => {
-  const gltf = useLoader(GLTFLoader, url);
+const NotFound = () => {
+  return (
+    <Image
+      width={500}
+      height={'auto'}
+      src={NotFoundIcon}
+      alt={'not found'}
+      preview={false}
+    />
+  );
+};
 
+export const ThreeD = ({ url = '', type }) => {
   return (
     <Container>
-      <Skeleton.Image />
-      <Canvas
-        frameloop="demand"
-        className="3d-canvas"
-        style={{
-          position: 'absolute',
-          top: '0',
-          background: '#FFFFFF',
-        }}
-      >
-        <Suspense fallback={null}>
-          <primitive object={gltf.scene} scale={1} />
+      {/* @ts-ignore */}
+      <ErrorBoundary message={<NotFound />}>
+        <Skeleton.Image />
+        <Canvas
+          frameloop="demand"
+          className="3d-canvas"
+          style={{
+            position: 'absolute',
+            top: '0',
+            background: '#FFFFFF',
+          }}
+        >
+          <Scene url={url} type={type}></Scene>
           <OrbitControls />
-          {/* <Environment preset="studio" background /> */}
-        </Suspense>
-      </Canvas>
+          <ambientLight intensity={0.1} />
+          <directionalLight color="#FFFFFF" position={[0, 0, 5]} />
+        </Canvas>
+      </ErrorBoundary>
     </Container>
   );
 };
diff --git a/src/app/components/NFTPreview/index.tsx b/src/app/components/NFTPreview/index.tsx
index 5e1ef4260..0a47a074e 100644
--- a/src/app/components/NFTPreview/index.tsx
+++ b/src/app/components/NFTPreview/index.tsx
@@ -55,7 +55,7 @@ const imageType = [
   'tiff',
   'webp',
 ];
-const threeDType = ['gltf', 'glb'];
+const threeDType = ['gltf', 'glb', 'obj', 'fbx'];
 
 export const NFTCardInfo = React.memo(
   ({
@@ -74,6 +74,7 @@ export const NFTCardInfo = React.memo(
     preview?: boolean;
   }) => {
     let [nftType, setNftType] = useState('image');
+    let [sourceType, setSourceType] = useState('');
     const [isAudioPlay, setIsAudioPlay] = useState(false);
     const [percent, setPercent] = useState<string>();
     const audioRef = useRef<HTMLAudioElement>(null);
@@ -86,6 +87,7 @@ export const NFTCardInfo = React.memo(
 
       if (suffix) {
         const sourceType = suffix[0].substr(1);
+        setSourceType(sourceType);
         if (videoType.includes(sourceType)) {
           nftType = 'video';
         } else if (imageType.includes(sourceType)) {
@@ -105,6 +107,7 @@ export const NFTCardInfo = React.memo(
               if (pair[0] === 'content-type') {
                 nftType = pair[1].split('/')[0];
                 setNftType(nftType);
+                // TODO need to detect .glb, .gltf, .obj, .fbx source type
               }
             }
           })
@@ -175,7 +178,7 @@ export const NFTCardInfo = React.memo(
     } else if (nftType === '3d') {
       return (
         <ThreeDCard>
-          <ThreeD url={`${imageUri}?source=3d`} />
+          <ThreeD url={`${imageUri}`} type={sourceType} />
         </ThreeDCard>
       );
     } else {
diff --git a/src/app/components/NFTPreview/scene/FBX.tsx b/src/app/components/NFTPreview/scene/FBX.tsx
new file mode 100644
index 000000000..9df8bdf56
--- /dev/null
+++ b/src/app/components/NFTPreview/scene/FBX.tsx
@@ -0,0 +1,13 @@
+import React, { Suspense } from 'react';
+import { useLoader } from '@react-three/fiber';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
+
+export default function Scene({ url }) {
+  const fbx = useLoader(FBXLoader, url);
+
+  return (
+    <Suspense fallback={null}>
+      <primitive object={fbx} scale={0.005} />
+    </Suspense>
+  );
+}
diff --git a/src/app/components/NFTPreview/scene/GLTF.tsx b/src/app/components/NFTPreview/scene/GLTF.tsx
new file mode 100644
index 000000000..08ebaf15e
--- /dev/null
+++ b/src/app/components/NFTPreview/scene/GLTF.tsx
@@ -0,0 +1,13 @@
+import React, { Suspense } from 'react';
+import { useLoader } from '@react-three/fiber';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+
+export default function Scene({ url }) {
+  const gltf = useLoader(GLTFLoader, url);
+
+  return (
+    <Suspense fallback={null}>
+      <primitive object={gltf.scene} />
+    </Suspense>
+  );
+}
diff --git a/src/app/components/NFTPreview/scene/OBJ.tsx b/src/app/components/NFTPreview/scene/OBJ.tsx
new file mode 100644
index 000000000..2174e3f0d
--- /dev/null
+++ b/src/app/components/NFTPreview/scene/OBJ.tsx
@@ -0,0 +1,13 @@
+import React, { Suspense } from 'react';
+import { useLoader } from '@react-three/fiber';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
+
+export default function Scene({ url }) {
+  const obj = useLoader(OBJLoader, url);
+
+  return (
+    <Suspense fallback={null}>
+      <primitive object={obj} scale={0.4} />
+    </Suspense>
+  );
+}
diff --git a/src/app/components/NFTPreview/scene/index.tsx b/src/app/components/NFTPreview/scene/index.tsx
new file mode 100644
index 000000000..f2e1f93d5
--- /dev/null
+++ b/src/app/components/NFTPreview/scene/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import GLTFScene from './GLTF';
+import OBJScene from './OBJ';
+import FBXScene from './FBX';
+
+export default ({ url, type = 'GLTF' }) => {
+  if (type.toLowerCase() === 'gltf' || type.toLowerCase() === 'glb') {
+    return <GLTFScene url={url}></GLTFScene>;
+  } else if (type.toLowerCase() === 'obj') {
+    return <OBJScene url={url}></OBJScene>;
+  } else if (type.toLowerCase() === 'fbx') {
+    return <FBXScene url={url}></FBXScene>;
+  } else {
+    // default 3d resource render
+    return <GLTFScene url={url}></GLTFScene>;
+  }
+};

From caad30f2eb1ba32a85414641d3082f7a8399dfa8 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Fri, 6 Jan 2023 12:55:48 +0800
Subject: [PATCH 38/42] feat: replace three.js fiber with google model viewer

---
 package.json                                  |  26 +-
 src/app/components/NFTPreview/3D.tsx          |  55 +-
 src/app/components/NFTPreview/scene/FBX.tsx   |  13 -
 src/app/components/NFTPreview/scene/GLTF.tsx  |  13 -
 src/app/components/NFTPreview/scene/OBJ.tsx   |  13 -
 src/app/components/NFTPreview/scene/index.tsx |  17 -
 yarn.lock                                     | 699 ++++++------------
 7 files changed, 266 insertions(+), 570 deletions(-)
 delete mode 100644 src/app/components/NFTPreview/scene/FBX.tsx
 delete mode 100644 src/app/components/NFTPreview/scene/GLTF.tsx
 delete mode 100644 src/app/components/NFTPreview/scene/OBJ.tsx
 delete mode 100644 src/app/components/NFTPreview/scene/index.tsx

diff --git a/package.json b/package.json
index 4db6ec065..28def335c 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,7 @@
     "@cfxjs/use-wallet": "0.0.18",
     "@conflux-dev/conflux-address-js": "1.3.16",
     "@ensdomains/eth-ens-namehash": "2.0.15",
-    "@react-three/drei": "9.47.1",
-    "@react-three/fiber": "8.9.1",
+    "@google/model-viewer": "2.1.1",
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1",
     "@types/fontfaceobserver": "0.0.6",
@@ -66,7 +65,7 @@
     "react-json-pretty": "2.2.0",
     "react-json-view": "1.19.1",
     "react-router-dom": "5.1.2",
-    "react-scripts": "3.4.3",
+    "react-scripts": "3.4.1",
     "react-test-renderer": "16.13.0",
     "react-use": "15.3.4",
     "recoil": "0.0.10",
@@ -79,7 +78,6 @@
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-processor-styled-components": "1.10.0",
     "swr": "0.3.2",
-    "three": "0.147.0",
     "ts-node": "8.8.2",
     "typescript": "4.5.4",
     "webfontloader": "1.6.28",
@@ -104,19 +102,11 @@
     "generate": "cross-env TS_NODE_PROJECT='./internals/ts-node.tsconfig.json' plop --plopfile internals/generators/plopfile.ts",
     "prettify": "prettier --write"
   },
-  "browserslist": {
-    "production": [
-      ">1%",
-      "not IE 11",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
   "engines": {
     "npm": "^6.14.15",
     "node": "^14.17.0"
@@ -185,6 +175,6 @@
   "resolutions": {
     "@types/react": "16.9.25",
     "@types/react-dom": "16.9.3",
-    "lodash": "4.17.20"
+    "lodash": "4.17.21"
   }
 }
diff --git a/src/app/components/NFTPreview/3D.tsx b/src/app/components/NFTPreview/3D.tsx
index f0c0b39b1..c626536d5 100644
--- a/src/app/components/NFTPreview/3D.tsx
+++ b/src/app/components/NFTPreview/3D.tsx
@@ -1,46 +1,29 @@
 import React from 'react';
-import { Canvas } from '@react-three/fiber';
-// @ts-ignore
-import { OrbitControls } from '@react-three/drei';
 import styled from 'styled-components';
-import { Skeleton, Image } from '@cfxjs/antd';
-import ErrorBoundary from '../ErrorBoundary';
-import Scene from './scene';
-import NotFoundIcon from 'images/token/tokenIdNotFound.jpg';
 
-const NotFound = () => {
-  return (
-    <Image
-      width={500}
-      height={'auto'}
-      src={NotFoundIcon}
-      alt={'not found'}
-      preview={false}
-    />
-  );
-};
+import '@google/model-viewer';
 
 export const ThreeD = ({ url = '', type }) => {
   return (
     <Container>
       {/* @ts-ignore */}
-      <ErrorBoundary message={<NotFound />}>
-        <Skeleton.Image />
-        <Canvas
-          frameloop="demand"
-          className="3d-canvas"
-          style={{
-            position: 'absolute',
-            top: '0',
-            background: '#FFFFFF',
-          }}
-        >
-          <Scene url={url} type={type}></Scene>
-          <OrbitControls />
-          <ambientLight intensity={0.1} />
-          <directionalLight color="#FFFFFF" position={[0, 0, 5]} />
-        </Canvas>
-      </ErrorBoundary>
+      <model-viewer
+        alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum"
+        src={url}
+        // poster="https://vbs-staging.oss-cn-beijing.aliyuncs.com/pattern/thumbnail1024/prop_mask_004_ue_1024.png?versionid=CAEQKRiBgMCc0Jf.oxgiIDU2MGY0Nzc3ZjBjYjRkYmQ4MjdhNzFlMDk5ZWQ3ZjQ1"
+        shadow-intensity="1"
+        camera-controls
+        touch-action="pan-y"
+        // @ts-ignore
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          top: '0',
+        }}
+        // @ts-ignore
+      ></model-viewer>
+      {/* @ts-ignore */}
     </Container>
   );
 };
@@ -49,5 +32,5 @@ const Container = styled.div`
   width: 100%;
   height: 100%;
   position: relative;
-  display: flex;
+  padding-top: 100%;
 `;
diff --git a/src/app/components/NFTPreview/scene/FBX.tsx b/src/app/components/NFTPreview/scene/FBX.tsx
deleted file mode 100644
index 9df8bdf56..000000000
--- a/src/app/components/NFTPreview/scene/FBX.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Suspense } from 'react';
-import { useLoader } from '@react-three/fiber';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
-
-export default function Scene({ url }) {
-  const fbx = useLoader(FBXLoader, url);
-
-  return (
-    <Suspense fallback={null}>
-      <primitive object={fbx} scale={0.005} />
-    </Suspense>
-  );
-}
diff --git a/src/app/components/NFTPreview/scene/GLTF.tsx b/src/app/components/NFTPreview/scene/GLTF.tsx
deleted file mode 100644
index 08ebaf15e..000000000
--- a/src/app/components/NFTPreview/scene/GLTF.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Suspense } from 'react';
-import { useLoader } from '@react-three/fiber';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-
-export default function Scene({ url }) {
-  const gltf = useLoader(GLTFLoader, url);
-
-  return (
-    <Suspense fallback={null}>
-      <primitive object={gltf.scene} />
-    </Suspense>
-  );
-}
diff --git a/src/app/components/NFTPreview/scene/OBJ.tsx b/src/app/components/NFTPreview/scene/OBJ.tsx
deleted file mode 100644
index 2174e3f0d..000000000
--- a/src/app/components/NFTPreview/scene/OBJ.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Suspense } from 'react';
-import { useLoader } from '@react-three/fiber';
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
-
-export default function Scene({ url }) {
-  const obj = useLoader(OBJLoader, url);
-
-  return (
-    <Suspense fallback={null}>
-      <primitive object={obj} scale={0.4} />
-    </Suspense>
-  );
-}
diff --git a/src/app/components/NFTPreview/scene/index.tsx b/src/app/components/NFTPreview/scene/index.tsx
deleted file mode 100644
index f2e1f93d5..000000000
--- a/src/app/components/NFTPreview/scene/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import GLTFScene from './GLTF';
-import OBJScene from './OBJ';
-import FBXScene from './FBX';
-
-export default ({ url, type = 'GLTF' }) => {
-  if (type.toLowerCase() === 'gltf' || type.toLowerCase() === 'glb') {
-    return <GLTFScene url={url}></GLTFScene>;
-  } else if (type.toLowerCase() === 'obj') {
-    return <OBJScene url={url}></OBJScene>;
-  } else if (type.toLowerCase() === 'fbx') {
-    return <FBXScene url={url}></FBXScene>;
-  } else {
-    // default 3d resource render
-    return <GLTFScene url={url}></GLTFScene>;
-  }
-};
diff --git a/yarn.lock b/yarn.lock
index bdef7df14..e2b922028 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1443,13 +1443,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.16.7", "@babel/runtime@^7.17.8":
-  version "7.20.6"
-  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
-  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
-  dependencies:
-    regenerator-runtime "^0.13.11"
-
 "@babel/template@^7.16.7", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1570,33 +1563,6 @@
   resolved "https://registry.npmjs.org/@cfxjs/use-wallet/-/use-wallet-0.0.18.tgz"
   integrity sha512-DwHIjTpZGo2ntJO+MYJv1d2nIuXYB9AEk63PYZgSKZARWwcRkLSrc/MmVbhHLPOckoHVpVymdssiU50hw87TqA==
 
-"@chevrotain/cst-dts-gen@10.4.2":
-  version "10.4.2"
-  resolved "https://registry.npmmirror.com/@chevrotain/cst-dts-gen/-/cst-dts-gen-10.4.2.tgz#a3426dba2c48cf6c90e49a0676aea750e8f43e88"
-  integrity sha512-0+4bNjlndNWMoVLH/+y4uHnf6GrTipsC+YTppJxelVJo+xeRVQ0s2PpkdDCVTsu7efyj+8r1gFiwVXsp6JZ0iQ==
-  dependencies:
-    "@chevrotain/gast" "10.4.2"
-    "@chevrotain/types" "10.4.2"
-    lodash "4.17.21"
-
-"@chevrotain/gast@10.4.2":
-  version "10.4.2"
-  resolved "https://registry.npmmirror.com/@chevrotain/gast/-/gast-10.4.2.tgz#236dc48e54cba16260c03bece25d5a3b6e2f5dab"
-  integrity sha512-4ZAn8/mjkmYonilSJ60gGj1tAF0cVWYUMlIGA0e4ATAc3a648aCnvpBw7zlPHDQjFp50XC13iyWEgWAKiRKTOA==
-  dependencies:
-    "@chevrotain/types" "10.4.2"
-    lodash "4.17.21"
-
-"@chevrotain/types@10.4.2":
-  version "10.4.2"
-  resolved "https://registry.npmmirror.com/@chevrotain/types/-/types-10.4.2.tgz#18be6b7a3226b121fccec08c2ba8433219a6813c"
-  integrity sha512-QzSCjg6G4MvIoLeIgOiMR0IgzkGEQqrNJJIr3T5ETRa7l4Av4AMIiEctV99mvDr57iXwwk0/kr3RJxiU36Nevw==
-
-"@chevrotain/utils@10.4.2":
-  version "10.4.2"
-  resolved "https://registry.npmmirror.com/@chevrotain/utils/-/utils-10.4.2.tgz#87735732184cc5a2f8aad2f3454082294ef3c924"
-  integrity sha512-V34dacxWLwKcvcy32dx96ADJVdB7kOJLm7LyBkBQw5u5HC9WdEFw2G17zml+U3ivavGTrGPJHl8o9/UJm0PlUw==
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz"
@@ -1732,6 +1698,14 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
+"@google/model-viewer@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/@google/model-viewer/-/model-viewer-2.1.1.tgz#37c51143740c07c592d5cccbc8cfaa8be8b7ef82"
+  integrity sha512-5umyLoD5vMxlSVQwtmUXeNCNWs9dzmWykGm1qrHe/pCYrj/1lyJIgJRw+IxoMNodGqtcHEtfDhdNjRDM9yo/TA==
+  dependencies:
+    lit "^2.2.3"
+    three "^0.146.0"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz"
@@ -1994,6 +1968,11 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.npmmirror.com/@lit/reactive-element/-/reactive-element-1.5.0.tgz#344cc33f2d1491d094b8ef824a9fe31d150d2375"
+  integrity sha512-fQh9FDK0LPTwDk+0HhSZEtb8K0LTN1wXerwpGrWA+a8tWulYRDLI4vQDWp4GOIsewn0572KYV/oZ3+492D7osA==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz"
@@ -2286,90 +2265,6 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
 
-"@react-spring/animated@~9.6.1":
-  version "9.6.1"
-  resolved "https://registry.npmmirror.com/@react-spring/animated/-/animated-9.6.1.tgz#ccc626d847cbe346f5f8815d0928183c647eb425"
-  integrity sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==
-  dependencies:
-    "@react-spring/shared" "~9.6.1"
-    "@react-spring/types" "~9.6.1"
-
-"@react-spring/core@~9.6.1":
-  version "9.6.1"
-  resolved "https://registry.npmmirror.com/@react-spring/core/-/core-9.6.1.tgz#ebe07c20682b360b06af116ea24e2b609e778c10"
-  integrity sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==
-  dependencies:
-    "@react-spring/animated" "~9.6.1"
-    "@react-spring/rafz" "~9.6.1"
-    "@react-spring/shared" "~9.6.1"
-    "@react-spring/types" "~9.6.1"
-
-"@react-spring/rafz@~9.6.1":
-  version "9.6.1"
-  resolved "https://registry.npmmirror.com/@react-spring/rafz/-/rafz-9.6.1.tgz#d71aafb92b78b24e4ff84639f52745afc285c38d"
-  integrity sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ==
-
-"@react-spring/shared@~9.6.1":
-  version "9.6.1"
-  resolved "https://registry.npmmirror.com/@react-spring/shared/-/shared-9.6.1.tgz#4e2e4296910656c02bd9fd54c559702bc836ac4e"
-  integrity sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==
-  dependencies:
-    "@react-spring/rafz" "~9.6.1"
-    "@react-spring/types" "~9.6.1"
-
-"@react-spring/three@^9.3.1":
-  version "9.6.1"
-  resolved "https://registry.npmmirror.com/@react-spring/three/-/three-9.6.1.tgz#095fcd1dc6509127c33c14486d88289b89baeb9d"
-  integrity sha512-Tyw2YhZPKJAX3t2FcqvpLRb71CyTe1GvT3V+i+xJzfALgpk10uPGdGaQQ5Xrzmok1340DAeg2pR/MCfaW7b8AA==
-  dependencies:
-    "@react-spring/animated" "~9.6.1"
-    "@react-spring/core" "~9.6.1"
-    "@react-spring/shared" "~9.6.1"
-    "@react-spring/types" "~9.6.1"
-
-"@react-spring/types@~9.6.1":
-  version "9.6.1"
-  resolved "https://registry.npmmirror.com/@react-spring/types/-/types-9.6.1.tgz#913d3a68c5cbc1124fdb18eff919432f7b6abdde"
-  integrity sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q==
-
-"@react-three/drei@9.47.1":
-  version "9.47.1"
-  resolved "https://registry.npmmirror.com/@react-three/drei/-/drei-9.47.1.tgz#827b1e391f0a8d1c59b4b6a04370cdfabc4243ef"
-  integrity sha512-Pu4vfpUvE7BSjvAOXDb/XBQIqzzoe1BL97CqpV0Q+dMfgQxm2rw0I5WGzYvF4VXN68qu5iTZUPS8G1u5zebDFw==
-  dependencies:
-    "@babel/runtime" "^7.11.2"
-    "@react-spring/three" "^9.3.1"
-    "@use-gesture/react" "^10.2.0"
-    detect-gpu "^5.0.1"
-    glsl-noise "^0.0.0"
-    lodash.clamp "^4.0.3"
-    lodash.omit "^4.5.0"
-    lodash.pick "^4.4.0"
-    meshline "^3.1.6"
-    react-composer "^5.0.3"
-    react-merge-refs "^1.1.0"
-    stats.js "^0.17.0"
-    suspend-react "^0.0.8"
-    three-mesh-bvh "^0.5.19"
-    three-stdlib "^2.20.4"
-    troika-three-text "^0.47.1"
-    utility-types "^3.10.0"
-    zustand "^3.5.13"
-
-"@react-three/fiber@8.9.1":
-  version "8.9.1"
-  resolved "https://registry.npmmirror.com/@react-three/fiber/-/fiber-8.9.1.tgz#54e278148ae1c301a4b516936bfce0d9240a7292"
-  integrity sha512-xRMO9RGp0DkxSFu5BmmkjCxJ4r0dEpLobtxXdZwI0h2rZZaCnkPM5zThRN8xaZNbZhzRSVICeNOFaZltr9xFyQ==
-  dependencies:
-    "@babel/runtime" "^7.17.8"
-    "@types/react-reconciler" "^0.26.7"
-    its-fine "^1.0.6"
-    react-reconciler "^0.27.0"
-    react-use-measure "^2.1.1"
-    scheduler "^0.21.0"
-    suspend-react "^0.0.8"
-    zustand "^3.7.1"
-
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
   resolved "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz"
@@ -2833,11 +2728,6 @@
   resolved "https://registry.npmjs.org/@types/numeral/-/numeral-0.0.28.tgz"
   integrity sha512-Sjsy10w6XFHDktJJdXzBJmoondAKW+LcGpRFH+9+zXEDj0cOH8BxJuZA9vUDSMAzU1YRJlsPKmZEEiTYDlICLw==
 
-"@types/offscreencanvas@^2019.6.4":
-  version "2019.7.0"
-  resolved "https://registry.npmmirror.com/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz#e4a932069db47bb3eabeb0b305502d01586fa90d"
-  integrity sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==
-
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
@@ -2874,20 +2764,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-reconciler@^0.26.7":
-  version "0.26.7"
-  resolved "https://registry.npmmirror.com/@types/react-reconciler/-/react-reconciler-0.26.7.tgz#0c4643f30821ae057e401b0d9037e03e8e9b2a36"
-  integrity sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-reconciler@^0.28.0":
-  version "0.28.0"
-  resolved "https://registry.npmmirror.com/@types/react-reconciler/-/react-reconciler-0.28.0.tgz#513acbed173140e958c909041ca14eb40412077f"
-  integrity sha512-5cjk9ottZAj7eaTsqzPUIlrVbh3hBAO2YaEL1rkjHKB3xNAId7oU8GhzvAX+gfmlfoxTwJnBjPxEHyxkEA1Ffg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-router-dom@5.1.3":
   version "5.1.3"
   resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.3.tgz"
@@ -2977,6 +2853,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/trusted-types@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
+  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+
 "@types/unist@*", "@types/unist@^2.0.0":
   version "2.0.6"
   resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz"
@@ -3065,18 +2946,6 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@use-gesture/core@10.2.23":
-  version "10.2.23"
-  resolved "https://registry.npmmirror.com/@use-gesture/core/-/core-10.2.23.tgz#ed5892e86b4ad537613b6ab83111ca58341e40c0"
-  integrity sha512-Ynap/Uh6RX1Vgn3zNmFTyKapapdf7Av+GzAe6h+RsBZaxMF1z3cK6aohHPJP6T1hLrPyH/yehxa7RBqyESG9RA==
-
-"@use-gesture/react@^10.2.0":
-  version "10.2.23"
-  resolved "https://registry.npmmirror.com/@use-gesture/react/-/react-10.2.23.tgz#744f7fb68e904721a2bf3d8bffd40e446b86c82a"
-  integrity sha512-anj9j3Lm4l+/s60Jv1FD2m13r+T+aYstSHUT62hTugojM64LPe9XatfEVHRyWOrGjRU2buQhlm03xN8oxkg/OQ==
-  dependencies:
-    "@use-gesture/core" "10.2.23"
-
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz"
@@ -3223,11 +3092,6 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
-"@webgpu/glslang@^0.0.15":
-  version "0.0.15"
-  resolved "https://registry.npmmirror.com/@webgpu/glslang/-/glslang-0.0.15.tgz#f5ccaf6015241e6175f4b90906b053f88483d1f2"
-  integrity sha512-niT+Prh3Aff8Uf1MVBVUsaNjFj9rJAKDXuoHIKiQbB+6IUP/3J3JIhBNyZ7lDhytvXxw6ppgnwKZdDJ08UMj4Q==
-
 "@xobotyi/scrollbar-width@1.9.5":
   version "1.9.5"
   resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
@@ -3785,10 +3649,10 @@ async-validator@^3.0.3:
   resolved "https://registry.npmjs.org/async-validator/-/async-validator-3.5.2.tgz"
   integrity sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ==
 
-async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.npmjs.org/async/-/async-2.6.3.tgz"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+async@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.npmmirror.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
@@ -4070,13 +3934,6 @@ before-after-hook@^2.2.0:
   resolved "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz"
   integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==
 
-bidi-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmmirror.com/bidi-js/-/bidi-js-1.0.2.tgz#1a497a762c2ddea377429d2649c9ce0f8a91527f"
-  integrity sha512-rzSy/k7WdX5zOyeHHCOixGXbCHkyogkxPKL2r8QtzHmVQDiWCXUWa18bLdMWT9CYMLOYTjWpTHawuev2ouYJVw==
-  dependencies:
-    require-from-string "^2.0.2"
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
@@ -4709,18 +4566,6 @@ chardet@^0.7.0:
   resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chevrotain@^10.1.2:
-  version "10.4.2"
-  resolved "https://registry.npmmirror.com/chevrotain/-/chevrotain-10.4.2.tgz#9abeac6a60134931c0a0788b206400e5f7a3daba"
-  integrity sha512-gzF5GxE0Ckti5kZVuKEZycLntB5X2aj9RVY0r4/220GwQjdnljU+/t3kP74/FMWC7IzCDDEjQ9wsFUf0WCdSHg==
-  dependencies:
-    "@chevrotain/cst-dts-gen" "10.4.2"
-    "@chevrotain/gast" "10.4.2"
-    "@chevrotain/types" "10.4.2"
-    "@chevrotain/utils" "10.4.2"
-    lodash "4.17.21"
-    regexp-to-ast "0.5.0"
-
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz"
@@ -4885,6 +4730,15 @@ clipboardy@1.2.3:
     arch "^2.1.0"
     execa "^0.8.0"
 
+cliui@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
+  integrity sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+    wrap-ansi "^2.0.0"
+
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz"
@@ -5941,11 +5795,6 @@ dayjs@1.x:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
   integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
 
-debounce@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmmirror.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
-  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
-
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -5960,7 +5809,7 @@ debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "2.1.2"
 
-debug@^3.1.1, debug@^3.2.5, debug@^3.2.6, debug@^3.2.7:
+debug@^3.2.5, debug@^3.2.6, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
@@ -6167,13 +6016,6 @@ detect-file@^1.0.0:
   resolved "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
-detect-gpu@^5.0.1:
-  version "5.0.3"
-  resolved "https://registry.npmmirror.com/detect-gpu/-/detect-gpu-5.0.3.tgz#12c68bd98723722b7f6f2c1e270a0fb6c0634ad9"
-  integrity sha512-Jko9vTtzrt82frvIX+29ySPltF0+H4cansiGrLr1/ikXjRm9fgzAoCET8gPq6FTOU97CqOqCxMDZxPaBNTEV7Q==
-  dependencies:
-    webgl-constants "^1.1.1"
-
 detect-indent@6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz"
@@ -6432,11 +6274,6 @@ dotenv@8.2.0:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
 
-draco3d@^1.4.1:
-  version "1.5.5"
-  resolved "https://registry.npmmirror.com/draco3d/-/draco3d-1.5.5.tgz#6bf4bbdd65950e6153e991cb0dcb8a10323f610e"
-  integrity sha512-JVuNV0EJzD3LBYhGyIXJLeBID/EVtmFO1ZNhAYflTgiMiAJlbhXQmRRda/azjc8MRVMHh0gqGhiqHUo5dIXM8Q==
-
 drbg.js@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/drbg.js/-/drbg.js-1.0.1.tgz"
@@ -7338,11 +7175,6 @@ fbjs@^0.8.0, fbjs@^0.8.4:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.30"
 
-fflate@^0.6.9:
-  version "0.6.10"
-  resolved "https://registry.npmmirror.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43"
-  integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
-
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz"
@@ -7443,9 +7275,9 @@ find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.3.1:
+find-cache-dir@^3.2.0:
   version "3.3.2"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
+  resolved "https://registry.npmmirror.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
   integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
   dependencies:
     commondir "^1.0.1"
@@ -7828,6 +7660,11 @@ gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
+get-caller-file@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
+  integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
+
 get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
@@ -8078,11 +7915,6 @@ globjoin@^0.1.4:
   resolved "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz"
   integrity sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=
 
-glsl-noise@^0.0.0:
-  version "0.0.0"
-  resolved "https://registry.npmmirror.com/glsl-noise/-/glsl-noise-0.0.0.tgz#367745f3a33382c0eeec4cb54b7e99cfc1d7670b"
-  integrity sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==
-
 gonzales-pe@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz"
@@ -8387,9 +8219,9 @@ html-encoding-sniffer@^2.0.1:
   dependencies:
     whatwg-encoding "^1.0.5"
 
-html-entities@^1.3.1:
+html-entities@^1.2.1:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz"
+  resolved "https://registry.npmmirror.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
   integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
 
 html-escaper@^2.0.0:
@@ -8913,6 +8745,11 @@ invariant@^2.2.2, invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
+invert-kv@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
+  integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
+
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz"
@@ -9526,13 +9363,6 @@ istanbul-reports@^2.2.6:
   dependencies:
     html-escaper "^2.0.0"
 
-its-fine@^1.0.6:
-  version "1.0.8"
-  resolved "https://registry.npmmirror.com/its-fine/-/its-fine-1.0.8.tgz#de55d8e5ed8e03f53de3e6fdb3147577bc86b077"
-  integrity sha512-MagTA9/J6kN3aEQsQu6by3nyrttCm0whCOYo4SfiNzOfYgcr1cb29mJ3zgluaJboaWOL/lHzJeMXi/QGSCfX1Q==
-  dependencies:
-    "@types/react-reconciler" "^0.28.0"
-
 java-properties@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/java-properties/-/java-properties-1.0.2.tgz"
@@ -10016,9 +9846,9 @@ jest-worker@^24.6.0, jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
-jest-worker@^25.4.0:
+jest-worker@^25.1.0:
   version "25.5.0"
-  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-25.5.0.tgz"
+  resolved "https://registry.npmmirror.com/jest-worker/-/jest-worker-25.5.0.tgz#2611d071b79cea0f43ee57a3d118593ac1547db1"
   integrity sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==
   dependencies:
     merge-stream "^2.0.0"
@@ -10387,11 +10217,6 @@ known-css-properties@^0.18.0:
   resolved "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.18.0.tgz"
   integrity sha512-69AgJ1rQa7VvUsd2kpvVq+VeObDuo3zrj0CzM5Slmf6yduQFAI2kXPDQJR2IE/u6MSAUOJrwSzjg5vlz8qcMiw==
 
-ktx-parse@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.npmmirror.com/ktx-parse/-/ktx-parse-0.4.5.tgz#79905e22281a9d3e602b2ff522df1ee7d1813aa6"
-  integrity sha512-MK3FOody4TXbFf8Yqv7EBbySw7aPvEcPX++Ipt6Sox+/YMFvR5xaTyhfNSk1AEmMy+RYIw81ctN4IMxCB8OAlg==
-
 last-call-webpack-plugin@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz"
@@ -10410,6 +10235,13 @@ lazy-cache@^1.0.3:
   resolved "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz"
   integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
 
+lcid@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
+  integrity sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==
+  dependencies:
+    invert-kv "^2.0.0"
+
 left-pad@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz"
@@ -10627,6 +10459,30 @@ listr@^0.14.3:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
+lit-element@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.npmmirror.com/lit-element/-/lit-element-3.2.2.tgz#d148ab6bf4c53a33f707a5168e087725499e5f2b"
+  integrity sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==
+  dependencies:
+    "@lit/reactive-element" "^1.3.0"
+    lit-html "^2.2.0"
+
+lit-html@^2.2.0, lit-html@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npmmirror.com/lit-html/-/lit-html-2.5.0.tgz#9d4c0bb3652a6b10bc4ccdb627dfa9eff1215474"
+  integrity sha512-bLHosg1XL3JRUcKdSVI0sLCs0y1wWrj2sqqAN3cZ7bDDPNgmDHH29RV48x6Wz3ZmkxIupaE+z7uXSZ/pXWAO1g==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@^2.2.3:
+  version "2.5.0"
+  resolved "https://registry.npmmirror.com/lit/-/lit-2.5.0.tgz#3a425d69ff8483effb2026957b86ae45de0bc51a"
+  integrity sha512-DtnUP6vR3l4Q8nRPPNBD+UxbAhwJPeky+OVbi3pdgMqm0g57xFSl1Sj64D1rIB+nVNdiVVg8YxB0hqKjvdadZA==
+  dependencies:
+    "@lit/reactive-element" "^1.5.0"
+    lit-element "^3.2.0"
+    lit-html "^2.5.0"
+
 load-json-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz"
@@ -10711,11 +10567,6 @@ lodash.capitalize@^4.2.1:
   resolved "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz"
   integrity sha1-+CbJtOKoUR2E46yinbBeGk87cqk=
 
-lodash.clamp@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.npmmirror.com/lodash.clamp/-/lodash.clamp-4.0.3.tgz#5c24bedeeeef0753560dc2b4cb4671f90a6ddfaa"
-  integrity sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==
-
 lodash.curry@^4.0.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz"
@@ -10771,16 +10622,6 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.omit@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.npmmirror.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
-  integrity sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==
-
-lodash.pick@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.npmmirror.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
-  integrity sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
@@ -10811,11 +10652,16 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz"
   integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
 
-lodash@4.17.20, lodash@4.17.21, "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0:
+lodash@4.17.20:
   version "4.17.20"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@4.17.21, "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0:
+  version "4.17.21"
+  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz"
@@ -10846,10 +10692,10 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-loglevel@^1.6.8:
-  version "1.7.1"
-  resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz"
-  integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
+loglevel@^1.6.6:
+  version "1.8.1"
+  resolved "https://registry.npmmirror.com/loglevel/-/loglevel-1.8.1.tgz#5c621f83d5b48c54ae93b6156353f555963377b4"
+  integrity sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==
 
 lolex@^5.0.0:
   version "5.1.2"
@@ -10982,6 +10828,13 @@ mamacro@^0.0.3:
   resolved "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz"
   integrity sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==
 
+map-age-cleaner@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.npmmirror.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
+  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
+  dependencies:
+    p-defer "^1.0.0"
+
 map-cache@^0.2.0, map-cache@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz"
@@ -11067,6 +10920,15 @@ media-typer@0.3.0:
   resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+mem@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/mem/-/mem-4.3.0.tgz#461af497bc4ae09608cdb2e60eefb69bff744178"
+  integrity sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==
+  dependencies:
+    map-age-cleaner "^0.1.1"
+    mimic-fn "^2.0.0"
+    p-is-promise "^2.0.0"
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz"
@@ -11146,11 +11008,6 @@ merge@^2.1.0:
   resolved "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz"
   integrity sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==
 
-meshline@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.npmmirror.com/meshline/-/meshline-3.1.6.tgz#eee67d9b0fd9841652cc1dc2d3833093ae8e68ca"
-  integrity sha512-8JZJOdaL5oz3PI/upG8JvP/5FfzYUOhrkJ8np/WKvXzl0/PZ2V9pqTvCIjSKv+w9ccg2xb+yyBhXAwt6ier3ug==
-
 methods@^1.1.2, methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz"
@@ -11235,7 +11092,7 @@ mimic-fn@^1.0.0:
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
-mimic-fn@^2.1.0:
+mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
@@ -11299,6 +11156,11 @@ minimist@1.2.5, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+minimist@^1.2.6:
+  version "1.2.7"
+  resolved "https://registry.npmmirror.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz"
@@ -11424,16 +11286,18 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+mkdirp@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
 mkdirp@^1.0.3, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mmd-parser@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.npmmirror.com/mmd-parser/-/mmd-parser-1.0.4.tgz#87cc05782cb5974ca854f0303fc5147bc9d690e7"
-  integrity sha512-Qi0VCU46t2IwfGv5KF0+D/t9cizcDug7qnNoy9Ggk7aucp0tssV8IwTMkBlDbm+VqAf3cdQHTCARKSsuS2MYFg==
-
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz"
@@ -12237,14 +12101,6 @@ opener@^1.5.2:
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
   integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
-opentype.js@^1.3.3:
-  version "1.3.4"
-  resolved "https://registry.npmmirror.com/opentype.js/-/opentype.js-1.3.4.tgz#1c0e72e46288473cc4a4c6a2dc60fd7fe6020d77"
-  integrity sha512-d2JE9RP/6uagpQAVtJoF0pJJA/fgai89Cc50Yp0EJHk+eLp6QQ7gBoblsnubRULNY132I0J1QKMJ+JTbMqz4sw==
-  dependencies:
-    string.prototype.codepointat "^0.2.1"
-    tiny-inflate "^1.0.3"
-
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz"
@@ -12301,6 +12157,15 @@ os-homedir@^1.0.0:
   resolved "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz"
   integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
 
+os-locale@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
+  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
+  dependencies:
+    execa "^1.0.0"
+    lcid "^2.0.0"
+    mem "^4.0.0"
+
 os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz"
@@ -12314,6 +12179,11 @@ osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+p-defer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  integrity sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==
+
 p-each-series@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/p-each-series/-/p-each-series-1.0.0.tgz"
@@ -12343,6 +12213,11 @@ p-finally@^2.0.0:
   resolved "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz"
   integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
 
+p-is-promise@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/p-is-promise/-/p-is-promise-2.1.0.tgz#918cebaea248a62cf7ffab8e3bca8c5f882fc42e"
+  integrity sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==
+
 p-is-promise@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/p-is-promise/-/p-is-promise-3.0.0.tgz"
@@ -12355,7 +12230,7 @@ p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
-p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.3.0:
+p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.2.2:
   version "2.3.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
   integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
@@ -12860,14 +12735,14 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
-portfinder@^1.0.26:
-  version "1.0.28"
-  resolved "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz"
-  integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==
+portfinder@^1.0.25:
+  version "1.0.32"
+  resolved "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
+  integrity sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==
   dependencies:
-    async "^2.6.2"
-    debug "^3.1.1"
-    mkdirp "^0.5.5"
+    async "^2.6.4"
+    debug "^3.2.7"
+    mkdirp "^0.5.6"
 
 posix-character-classes@^0.1.0:
   version "0.1.1"
@@ -13607,11 +13482,6 @@ postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, po
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-potpack@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.npmmirror.com/potpack/-/potpack-1.0.2.tgz#23b99e64eb74f5741ffe7656b5b5c4ddce8dfc14"
-  integrity sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==
-
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
@@ -14451,13 +14321,6 @@ react-component-benchmark@1.0.0:
   resolved "https://registry.npmjs.org/react-component-benchmark/-/react-component-benchmark-1.0.0.tgz"
   integrity sha512-YC+PPhfevw1NHYjgb8NeFXdH9gq1D0bG1zcLUxetQ1PregdBwX3t9LTU4fJviDI4IgU/bL3xR6BB3ZID59Sprw==
 
-react-composer@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.npmmirror.com/react-composer/-/react-composer-5.0.3.tgz#7beb9513da5e8687f4f434ea1333ef36a4f3091b"
-  integrity sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==
-  dependencies:
-    prop-types "^15.6.0"
-
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz"
@@ -14565,11 +14428,6 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-merge-refs@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmmirror.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
-  integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
-
 react-popper@^2.2.3:
   version "2.2.5"
   resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz"
@@ -14578,14 +14436,6 @@ react-popper@^2.2.3:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-reconciler@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.npmmirror.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
-  integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.21.0"
-
 react-router-dom@5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz"
@@ -14615,10 +14465,10 @@ react-router@5.1.2:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-scripts@3.4.3:
-  version "3.4.3"
-  resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz"
-  integrity sha512-oSnoWmii/iKdeQiwaO6map1lUaZLmG0xIUyb/HwCVFLT7gNbj8JZ9RmpvMCZ4fB98ZUMRfNmp/ft8uy/xD1RLA==
+react-scripts@3.4.1:
+  version "3.4.1"
+  resolved "https://registry.npmmirror.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"
+  integrity sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==
   dependencies:
     "@babel/core" "7.9.0"
     "@svgr/webpack" "4.3.3"
@@ -14665,11 +14515,11 @@ react-scripts@3.4.3:
     sass-loader "8.0.2"
     semver "6.3.0"
     style-loader "0.23.1"
-    terser-webpack-plugin "2.3.8"
+    terser-webpack-plugin "2.3.5"
     ts-pnp "1.1.6"
     url-loader "2.3.0"
     webpack "4.42.0"
-    webpack-dev-server "3.11.0"
+    webpack-dev-server "3.10.3"
     webpack-manifest-plugin "2.2.0"
     workbox-webpack-plugin "4.3.1"
   optionalDependencies:
@@ -14697,13 +14547,6 @@ react-universal-interface@^0.6.2:
   resolved "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz"
   integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
 
-react-use-measure@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmmirror.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
-  integrity sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==
-  dependencies:
-    debounce "^1.2.1"
-
 react-use@15.3.4:
   version "15.3.4"
   resolved "https://registry.npmjs.org/react-use/-/react-use-15.3.4.tgz"
@@ -14927,11 +14770,6 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.11:
-  version "0.13.11"
-  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
-  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
-
 regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -14964,11 +14802,6 @@ regex-parser@2.2.10:
   resolved "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.10.tgz"
   integrity sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA==
 
-regexp-to-ast@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.npmmirror.com/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz#56c73856bee5e1fef7f73a00f1473452ab712a24"
-  integrity sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==
-
 regexp.prototype.flags@^1.2.0:
   version "1.3.1"
   resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz"
@@ -15199,10 +15032,10 @@ require-directory@^2.1.1:
   resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
-require-from-string@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
-  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+require-main-filename@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+  integrity sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug==
 
 require-main-filename@^2.0.0:
   version "2.0.0"
@@ -15527,13 +15360,6 @@ scheduler@^0.19.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -15550,7 +15376,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.6.6:
+schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6.4, schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
@@ -15709,6 +15535,11 @@ sentence-case@^2.1.0:
     no-case "^2.2.0"
     upper-case-first "^1.1.2"
 
+serialize-javascript@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
+
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz"
@@ -16013,14 +15844,13 @@ sockjs-client@1.4.0:
     json3 "^3.3.2"
     url-parse "^1.4.3"
 
-sockjs@0.3.20:
-  version "0.3.20"
-  resolved "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz"
-  integrity sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==
+sockjs@0.3.19:
+  version "0.3.19"
+  resolved "https://registry.npmmirror.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  integrity sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==
   dependencies:
     faye-websocket "^0.10.0"
-    uuid "^3.4.0"
-    websocket-driver "0.6.5"
+    uuid "^3.0.1"
 
 socks-proxy-agent@^6.0.0:
   version "6.2.0"
@@ -16143,9 +15973,9 @@ spdy-transport@^3.0.0:
     readable-stream "^3.0.6"
     wbuf "^1.7.3"
 
-spdy@^4.0.2:
+spdy@^4.0.1:
   version "4.0.2"
-  resolved "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz"
+  resolved "https://registry.npmmirror.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
   integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
   dependencies:
     debug "^4.1.0"
@@ -16295,11 +16125,6 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-stats.js@^0.17.0:
-  version "0.17.0"
-  resolved "https://registry.npmmirror.com/stats.js/-/stats.js-0.17.0.tgz#b1c3dc46d94498b578b7fd3985b81ace7131cc7d"
-  integrity sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==
-
 "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
@@ -16426,11 +16251,6 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string.prototype.codepointat@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmmirror.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz#004ad44c8afc727527b108cd462b4d971cd469bc"
-  integrity sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==
-
 string.prototype.matchall@^4.0.2:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
@@ -16785,11 +16605,6 @@ supports-hyperlinks@^2.1.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
-suspend-react@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.npmmirror.com/suspend-react/-/suspend-react-0.0.8.tgz#b0740c1386b4eb652f17affe4339915ee268bd31"
-  integrity sha512-ZC3r8Hu1y0dIThzsGw0RLZplnX9yXwfItcvaIzJc2VQVi8TGyGDlu92syMB5ulybfvGLHAI5Ghzlk23UBPF8xg==
-
 svg-parser@^2.0.0:
   version "2.0.4"
   resolved "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz"
@@ -16907,19 +16722,19 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-terser-webpack-plugin@2.3.8:
-  version "2.3.8"
-  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz"
-  integrity sha512-/fKw3R+hWyHfYx7Bv6oPqmk4HGQcrWLtV3X6ggvPuwPNHSnzvVV51z6OaaCOus4YLjutYGOz3pEpbhe6Up2s1w==
+terser-webpack-plugin@2.3.5:
+  version "2.3.5"
+  resolved "https://registry.npmmirror.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.5.tgz#5ad971acce5c517440ba873ea4f09687de2f4a81"
+  integrity sha512-WlWksUoq+E4+JlJ+h+U+QUzXpcsMSSNXkDy9lBVkSqDn1w23Gg29L/ary9GeJVYCGiNJJX7LnVc4bwL1N3/g1w==
   dependencies:
     cacache "^13.0.1"
-    find-cache-dir "^3.3.1"
-    jest-worker "^25.4.0"
-    p-limit "^2.3.0"
-    schema-utils "^2.6.6"
-    serialize-javascript "^4.0.0"
+    find-cache-dir "^3.2.0"
+    jest-worker "^25.1.0"
+    p-limit "^2.2.2"
+    schema-utils "^2.6.4"
+    serialize-javascript "^2.1.2"
     source-map "^0.6.1"
-    terser "^4.6.12"
+    terser "^4.4.3"
     webpack-sources "^1.4.3"
 
 terser-webpack-plugin@^1.4.3:
@@ -16937,7 +16752,7 @@ terser-webpack-plugin@^1.4.3:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser@^4.1.2, terser@^4.6.12, terser@^4.6.3:
+terser@^4.1.2, terser@^4.6.3:
   version "4.8.0"
   resolved "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz"
   integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
@@ -16946,6 +16761,15 @@ terser@^4.1.2, terser@^4.6.12, terser@^4.6.3:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+terser@^4.4.3:
+  version "4.8.1"
+  resolved "https://registry.npmmirror.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+  integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
 test-exclude@^5.2.3:
   version "5.2.3"
   resolved "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz"
@@ -16966,32 +16790,10 @@ text-table@0.2.0, text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-three-mesh-bvh@^0.5.19:
-  version "0.5.19"
-  resolved "https://registry.npmmirror.com/three-mesh-bvh/-/three-mesh-bvh-0.5.19.tgz#72d489856561d01ef7d4add81f0c82d3fb644d09"
-  integrity sha512-Q8huT0NautyR4afW0oMlOz8a4qm3b1jQ1ccMLF/TZ0rA4i58HljsnBjCLEDLQtIINZyLtZPdw60mrD81V/TZDA==
-
-three-stdlib@^2.20.4:
-  version "2.20.5"
-  resolved "https://registry.npmmirror.com/three-stdlib/-/three-stdlib-2.20.5.tgz#f51a00796fc59d93c636b5428d7aaff2f8ed8daf"
-  integrity sha512-sZm6nuyMsAZh/SH2XbEW77uGtI/bokMwP/eN6oDj2WDna87j1fNQI86jkvwx77tK6rCeAaEIUjJJlzWfFRY3cQ==
-  dependencies:
-    "@babel/runtime" "^7.16.7"
-    "@types/offscreencanvas" "^2019.6.4"
-    "@webgpu/glslang" "^0.0.15"
-    chevrotain "^10.1.2"
-    draco3d "^1.4.1"
-    fflate "^0.6.9"
-    ktx-parse "^0.4.5"
-    mmd-parser "^1.0.4"
-    opentype.js "^1.3.3"
-    potpack "^1.0.1"
-    zstddec "^0.0.2"
-
-three@0.147.0:
-  version "0.147.0"
-  resolved "https://registry.npmmirror.com/three/-/three-0.147.0.tgz#1974af9e8e0c1efb3a8561334d57c0b6c29a7951"
-  integrity sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw==
+three@^0.146.0:
+  version "0.146.0"
+  resolved "https://registry.npmmirror.com/three/-/three-0.146.0.tgz#fd80f0d128ab4bb821a02191ae241e4e6326f17a"
+  integrity sha512-1lvNfLezN6OJ9NaFAhfX4sm5e9YCzHtaRgZ1+B4C+Hv6TibRMsuBAM5/wVKzxjpYIlMymvgsHEFrrigEfXnb2A==
 
 throat@^4.0.0:
   version "4.1.0"
@@ -17040,11 +16842,6 @@ timsort@^0.3.0:
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tiny-inflate@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmmirror.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
-  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
-
 tiny-invariant@^1.0.2:
   version "1.1.0"
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz"
@@ -17193,26 +16990,6 @@ trim@0.0.1:
   resolved "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz"
   integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
 
-troika-three-text@^0.47.1:
-  version "0.47.1"
-  resolved "https://registry.npmmirror.com/troika-three-text/-/troika-three-text-0.47.1.tgz#4a239b122242d7ea93dbbf66a9f1863eca83d979"
-  integrity sha512-/fPRUmxCkXxyUT8k6REC/aWeFzKbNr37ivrkrplSJNb3JcBUXvVt8MT0Ac5wTUvFsYTviYWprYS4/8Laen08WA==
-  dependencies:
-    bidi-js "^1.0.2"
-    troika-three-utils "^0.47.0"
-    troika-worker-utils "^0.47.0"
-    webgl-sdf-generator "1.1.1"
-
-troika-three-utils@^0.47.0:
-  version "0.47.0"
-  resolved "https://registry.npmmirror.com/troika-three-utils/-/troika-three-utils-0.47.0.tgz#4749334ad2ae043767916f79bcc365cbb5ea64b5"
-  integrity sha512-yoVTQxVbpQX3a55giIwqwq6hyJA6oYvq7kaNGwFTeicoWmTZCqqTbytafx1gcuL5umrtw5MYgsxYUSOha+xp5w==
-
-troika-worker-utils@^0.47.0:
-  version "0.47.0"
-  resolved "https://registry.npmmirror.com/troika-worker-utils/-/troika-worker-utils-0.47.0.tgz#bea382fee55333e177955e7ba6497d64b9d9388d"
-  integrity sha512-PSUc9vunDEkbE23jpgXD3PcF96jQHKjgMjS+4o5g6DEK/ZAPTnldb+FNddhppawfUcuraMFrslo0GmIC8UpEmA==
-
 trough@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz"
@@ -17710,17 +17487,12 @@ utila@~0.4:
   resolved "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz"
   integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
 
-utility-types@^3.10.0:
-  version "3.10.0"
-  resolved "https://registry.npmmirror.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
-  integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
-
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
-uuid@^3.3.2, uuid@^3.4.0:
+uuid@^3.0.1, uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
@@ -17900,16 +17672,6 @@ webfontloader@1.6.28:
   resolved "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz"
   integrity sha1-23hhKSU8tujq5UwvsF+HCvZnW64=
 
-webgl-constants@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmmirror.com/webgl-constants/-/webgl-constants-1.1.1.tgz#f9633ee87fea56647a60b9ce735cbdfb891c6855"
-  integrity sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg==
-
-webgl-sdf-generator@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmmirror.com/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz#3e1b422b3d87cd3cc77f2602c9db63bc0f6accbd"
-  integrity sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==
-
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -17941,10 +17703,10 @@ webpack-dev-middleware@^3.7.2:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@3.11.0:
-  version "3.11.0"
-  resolved "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz"
-  integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==
+webpack-dev-server@3.10.3:
+  version "3.10.3"
+  resolved "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz#f35945036813e57ef582c2420ef7b470e14d3af0"
+  integrity sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -17954,31 +17716,31 @@ webpack-dev-server@3.11.0:
     debug "^4.1.1"
     del "^4.1.1"
     express "^4.17.1"
-    html-entities "^1.3.1"
+    html-entities "^1.2.1"
     http-proxy-middleware "0.19.1"
     import-local "^2.0.0"
     internal-ip "^4.3.0"
     ip "^1.1.5"
     is-absolute-url "^3.0.3"
     killable "^1.0.1"
-    loglevel "^1.6.8"
+    loglevel "^1.6.6"
     opn "^5.5.0"
     p-retry "^3.0.1"
-    portfinder "^1.0.26"
+    portfinder "^1.0.25"
     schema-utils "^1.0.0"
     selfsigned "^1.10.7"
     semver "^6.3.0"
     serve-index "^1.9.1"
-    sockjs "0.3.20"
+    sockjs "0.3.19"
     sockjs-client "1.4.0"
-    spdy "^4.0.2"
+    spdy "^4.0.1"
     strip-ansi "^3.0.1"
     supports-color "^6.1.0"
     url "^0.11.0"
     webpack-dev-middleware "^3.7.2"
     webpack-log "^2.0.0"
     ws "^6.2.1"
-    yargs "^13.3.2"
+    yargs "12.0.5"
 
 webpack-log@^2.0.0:
   version "2.0.0"
@@ -18035,13 +17797,6 @@ webpack@4.42.0:
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
-websocket-driver@0.6.5:
-  version "0.6.5"
-  resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz"
-  integrity sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=
-  dependencies:
-    websocket-extensions ">=0.1.1"
-
 websocket-driver@>=0.5.1:
   version "0.7.4"
   resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz"
@@ -18328,6 +18083,14 @@ worker-rpc@^0.1.0:
   dependencies:
     microevent.ts "~0.1.1"
 
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  integrity sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
 wrap-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz"
@@ -18431,7 +18194,7 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-y18n@^4.0.0:
+"y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz"
   integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
@@ -18461,6 +18224,14 @@ yaml@^1.10.0, yaml@^1.7.2:
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yargs-parser@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
+  integrity sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^13.1.2:
   version "13.1.2"
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz"
@@ -18482,7 +18253,25 @@ yargs-parser@^20.2.3:
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
-yargs@^13.3.0, yargs@^13.3.2:
+yargs@12.0.5:
+  version "12.0.5"
+  resolved "https://registry.npmmirror.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
+  integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1 || ^4.0.0"
+    yargs-parser "^11.1.1"
+
+yargs@^13.3.0:
   version "13.3.2"
   resolved "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz"
   integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
@@ -18520,19 +18309,9 @@ yn@3.1.1:
   resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz"
   integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
 
-zstddec@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.npmmirror.com/zstddec/-/zstddec-0.0.2.tgz#57e2f28dd1ff56b750e07d158a43f0611ad9eeb4"
-  integrity sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA==
-
 zustand@4.1.4:
   version "4.1.4"
   resolved "https://registry.npmmirror.com/zustand/-/zustand-4.1.4.tgz#b0286da4cc9edd35e91c96414fa54bfa4652a54d"
   integrity sha512-k2jVOlWo8p4R83mQ+/uyB8ILPO2PCJOf+QVjcL+1PbMCk1w5OoPYpAIxy9zd93FSfmJqoH6lGdwzzjwqJIRU5A==
   dependencies:
     use-sync-external-store "1.2.0"
-
-zustand@^3.5.13, zustand@^3.7.1:
-  version "3.7.2"
-  resolved "https://registry.npmmirror.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"
-  integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==

From fba6ded8c777de7379644df1473124be8517f31a Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Tue, 10 Jan 2023 18:38:38 +0800
Subject: [PATCH 39/42] feat: update 3D component

---
 package.json                            |  4 ++--
 src/app/components/NFTPreview/3D.tsx    |  2 +-
 src/app/components/NFTPreview/index.tsx |  6 ++---
 yarn.lock                               | 29 +++++++++++--------------
 4 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 28def335c..98d3c120e 100644
--- a/package.json
+++ b/package.json
@@ -54,11 +54,11 @@
     "prettier": "2.0.1",
     "qrcode.react": "1.0.0",
     "query-string": "6.13.1",
-    "react": "^18",
+    "react": "16.13.0",
     "react-ace": "9.1.3",
     "react-app-polyfill": "1.0.6",
     "react-component-benchmark": "1.0.0",
-    "react-dom": "^18",
+    "react-dom": "16.13.0",
     "react-google-recaptcha": "2.1.0",
     "react-helmet-async": "1.0.6",
     "react-i18next": "11.3.4",
diff --git a/src/app/components/NFTPreview/3D.tsx b/src/app/components/NFTPreview/3D.tsx
index c626536d5..3e8878a0b 100644
--- a/src/app/components/NFTPreview/3D.tsx
+++ b/src/app/components/NFTPreview/3D.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import '@google/model-viewer';
 
-export const ThreeD = ({ url = '', type }) => {
+export const ThreeD = ({ url = '' }) => {
   return (
     <Container>
       {/* @ts-ignore */}
diff --git a/src/app/components/NFTPreview/index.tsx b/src/app/components/NFTPreview/index.tsx
index 0a47a074e..9c65cbc20 100644
--- a/src/app/components/NFTPreview/index.tsx
+++ b/src/app/components/NFTPreview/index.tsx
@@ -55,7 +55,7 @@ const imageType = [
   'tiff',
   'webp',
 ];
-const threeDType = ['gltf', 'glb', 'obj', 'fbx'];
+const threeDType = ['gltf', 'glb'];
 
 export const NFTCardInfo = React.memo(
   ({
@@ -74,7 +74,6 @@ export const NFTCardInfo = React.memo(
     preview?: boolean;
   }) => {
     let [nftType, setNftType] = useState('image');
-    let [sourceType, setSourceType] = useState('');
     const [isAudioPlay, setIsAudioPlay] = useState(false);
     const [percent, setPercent] = useState<string>();
     const audioRef = useRef<HTMLAudioElement>(null);
@@ -87,7 +86,6 @@ export const NFTCardInfo = React.memo(
 
       if (suffix) {
         const sourceType = suffix[0].substr(1);
-        setSourceType(sourceType);
         if (videoType.includes(sourceType)) {
           nftType = 'video';
         } else if (imageType.includes(sourceType)) {
@@ -178,7 +176,7 @@ export const NFTCardInfo = React.memo(
     } else if (nftType === '3d') {
       return (
         <ThreeDCard>
-          <ThreeD url={`${imageUri}`} type={sourceType} />
+          <ThreeD url={`${imageUri}`} />
         </ThreeDCard>
       );
     } else {
diff --git a/yarn.lock b/yarn.lock
index e2b922028..bd1f2b24d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14351,13 +14351,15 @@ react-dev-utils@^10.2.1:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@^18:
-  version "18.2.0"
-  resolved "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+react-dom@16.13.0:
+  version "16.13.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
+  integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.0"
 
 react-error-overlay@^6.0.7:
   version "6.0.9"
@@ -14567,12 +14569,14 @@ react-use@15.3.4:
     ts-easing "^0.2.0"
     tslib "^2.0.0"
 
-react@^18:
-  version "18.2.0"
-  resolved "https://registry.npmmirror.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@16.13.0:
+  version "16.13.0"
+  resolved "https://registry.npmjs.org/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
+  integrity sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==
   dependencies:
     loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
 
 read-cmd-shim@^2.0.0:
   version "2.0.0"
@@ -15360,13 +15364,6 @@ scheduler@^0.19.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
-  dependencies:
-    loose-envify "^1.1.0"
-
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz"

From d954a970db72890949cb3040c8f36ae029dd1045 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 11 Jan 2023 11:32:42 +0800
Subject: [PATCH 40/42] feat: 1. disable ENS 2. update version

---
 src/app/containers/Notices/index.tsx |   8 +-
 src/index.tsx                        |   2 +-
 src/utils/ens/index.ts               |   7 +-
 src/utils/hooks/useENS.ts            | 127 ++++++++++++++-------------
 4 files changed, 77 insertions(+), 67 deletions(-)

diff --git a/src/app/containers/Notices/index.tsx b/src/app/containers/Notices/index.tsx
index 132dc392a..dc9696c5b 100644
--- a/src/app/containers/Notices/index.tsx
+++ b/src/app/containers/Notices/index.tsx
@@ -12,14 +12,14 @@ export const noticeInfo = {
   hot: false,
   type: 'Announcement',
   brief: {
-    en: 'ConfluxScan v2.16.0 Released!',
-    zh: 'ConfluxScan v2.16.0 发布喽！',
+    en: 'ConfluxScan v2.17.0 Released!',
+    zh: 'ConfluxScan v2.17.0 发布喽！',
   },
   link: {
     en:
-      'https://confluxscansupportcenter.zendesk.com/hc/en-us/articles/8115795087643-Jul-25-2022-Aug-15-2022',
+      'https://confluxscansupportcenter.zendesk.com/hc/en-us/articles/11957785142299-v2-17-0',
     zh:
-      'https://confluxscansupportcenter.zendesk.com/hc/zh-cn/articles/8115795087643-2022-7-25-2022-8-15',
+      'https://confluxscansupportcenter.zendesk.com/hc/zh-cn/articles/11957785142299-v2-17-0',
   },
 };
 
diff --git a/src/index.tsx b/src/index.tsx
index 726ff5748..7887ce1f4 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -61,7 +61,7 @@ Promise.all([completeDetect()]).then(() => {
   render(App);
 });
 
-const currentVersion = 'v2.16.2';
+const currentVersion = 'v2.17.0';
 
 const brand = `
 ┌─┐┌─┐┌┐┌┌─┐┬  ┬ ┬─┐ ┬  ┌─┐┌─┐┌─┐┌┐┌ ${currentVersion}
diff --git a/src/utils/ens/index.ts b/src/utils/ens/index.ts
index 4a5f076d2..2fb9be560 100644
--- a/src/utils/ens/index.ts
+++ b/src/utils/ens/index.ts
@@ -58,8 +58,13 @@ export async function getAddress(name) {
   }
 }
 
+// export function isValidENS(name: string) {
+//   return /.*(\.web3|\.dao)$/i.test(name);
+// }
+
+// TODO Temporarily disable useENS feature
 export function isValidENS(name: string) {
-  return /.*(\.web3|\.dao)$/i.test(name);
+  return false;
 }
 
 export { LogoENS };
diff --git a/src/utils/hooks/useENS.ts b/src/utils/hooks/useENS.ts
index db361f380..69a3c5b3e 100644
--- a/src/utils/hooks/useENS.ts
+++ b/src/utils/hooks/useENS.ts
@@ -1,71 +1,76 @@
-import { useEffect } from 'react';
-import { useENSStore } from 'utils/store';
-import { reqENSInfo } from 'utils/httpRequest';
-import { formatAddress } from '../index';
+// import { useEffect } from 'react';
+// import { useENSStore } from 'utils/store';
+// import { reqENSInfo } from 'utils/httpRequest';
+// import { formatAddress } from '../index';
 
-interface props {
-  address: string[];
-  config?: {
-    abortable?: boolean;
-    immediately?: boolean;
-  };
-}
+// interface props {
+//   address: string[];
+//   config?: {
+//     abortable?: boolean;
+//     immediately?: boolean;
+//   };
+// }
 
-export const useENS = ({
-  address = [],
-  config = {
-    abortable: false,
-    immediately: false,
-  },
-}: props) => {
-  const fAddress = address.map(a => a && formatAddress(a));
+// export const useENS = ({
+//   address = [],
+//   config = {
+//     abortable: false,
+//     immediately: false,
+//   },
+// }: props) => {
+//   const fAddress = address.map(a => a && formatAddress(a));
 
-  const { ens, setENS } = useENSStore(state => ({
-    // @ts-ignore
-    ens: state.ens,
-    // @ts-ignore
-    setENS: state.setENS,
-  }));
+//   const { ens, setENS } = useENSStore(state => ({
+//     // @ts-ignore
+//     ens: state.ens,
+//     // @ts-ignore
+//     setENS: state.setENS,
+//   }));
 
-  useEffect(() => {
-    let controller = new AbortController();
+//   useEffect(() => {
+//     let controller = new AbortController();
 
-    reqENSInfo(fAddress, {
-      signal: controller.signal,
-      immediately: config.immediately,
-    })
-      .then(data => {
-        // @ts-ignore
-        if (data.length) {
-          setENS(
-            // @ts-ignore
-            data.reduce((prev, curr) => {
-              prev[curr.address] = curr;
-              return prev;
-            }, {}),
-          );
-        }
-      })
-      .catch(e => console.log('useENS query error: ', e));
+//     reqENSInfo(fAddress, {
+//       signal: controller.signal,
+//       immediately: config.immediately,
+//     })
+//       .then(data => {
+//         // @ts-ignore
+//         if (data.length) {
+//           setENS(
+//             // @ts-ignore
+//             data.reduce((prev, curr) => {
+//               prev[curr.address] = curr;
+//               return prev;
+//             }, {}),
+//           );
+//         }
+//       })
+//       .catch(e => console.log('useENS query error: ', e));
 
-    return () => {
-      config.abortable && controller.abort();
-    };
-  }, [fAddress, config.abortable, config.immediately, setENS]);
+//     return () => {
+//       config.abortable && controller.abort();
+//     };
+//   }, [fAddress, config.abortable, config.immediately, setENS]);
 
-  const list = fAddress.map(
-    a =>
-      ens[a] || {
-        address: a,
-        name: '',
-        expired: 0,
-      },
-  );
+//   const list = fAddress.map(
+//     a =>
+//       ens[a] || {
+//         address: a,
+//         name: '',
+//         expired: 0,
+//       },
+//   );
 
-  const map = list.reduce((prev, curr) => {
-    prev[curr.address] = curr;
-    return prev;
-  }, {});
+//   const map = list.reduce((prev, curr) => {
+//     prev[curr.address] = curr;
+//     return prev;
+//   }, {});
 
-  return [map, list, setENS];
+//   return [map, list, setENS];
+// };
+
+// TODO Temporarily disable useENS feature
+export const useENS = (props: any) => {
+  return [{}, [], () => {}];
 };

From 65c18f1ac067022040876f668c1f3a5381784e0e Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 11 Jan 2023 16:19:27 +0800
Subject: [PATCH 41/42] feat: remove web3 in global search input placeholder

---
 src/locales/en/translation.json    | 6 ++++--
 src/locales/zh_cn/translation.json | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index b6f8d1f58..d45b11988 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -491,8 +491,10 @@
     "suggestionBox": "Suggestion Box",
     "testnet": "Conflux Core (Testnet)",
     "oceanus": "Conflux Hydra",
-    "searchPlaceHolder": "Search by Epoch / Block Hash / Txn Hash / Address / Token / Contract Name Tag / .web3 Username",
-    "searchPlaceHolderMobile": "Epoch/Block Hash/Txn Hash/Address/Token/Contract Name Tag/.web3 Username",
+    "searchPlaceHolder": "Search by Epoch / Block Hash / Txn Hash / Address / Token / Contract Name Tag",
+    "searchPlaceHolderMobile": "Epoch/Block Hash/Txn Hash/Address/Token/Contract Name Tag",
+    "searchPlaceHolderWithWeb3": "Search by Epoch / Block Hash / Txn Hash / Address / Token / Contract Name Tag / .web3 Username",
+    "searchPlaceHolderMobileWithWeb3": "Epoch/Block Hash/Txn Hash/Address/Token/Contract Name Tag/.web3 Username",
     "addressConverter": "Address Format Conversion",
     "faucet": "Test Faucet",
     "broadcastTx": "Broadcast Transaction",
diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
index da6be13be..717733e21 100644
--- a/src/locales/zh_cn/translation.json
+++ b/src/locales/zh_cn/translation.json
@@ -490,8 +490,10 @@
     "suggestionBox": "意见箱",
     "testnet": "Conflux Core (Testnet)",
     "oceanus": "Conflux Hydra",
-    "searchPlaceHolder": "请输入纪元 / 区块哈希 / 交易哈希 / 地址 / 通证 / 合约名称标签 / .web3 用户名",
-    "searchPlaceHolderMobile": "纪元/区块哈希/交易哈希/地址/通证/合约名称标签/.web3 用户名",
+    "searchPlaceHolder": "请输入纪元 / 区块哈希 / 交易哈希 / 地址 / 通证 / 合约名称标签",
+    "searchPlaceHolderMobile": "纪元/区块哈希/交易哈希/地址/通证/合约名称标签",
+    "searchPlaceHolderWithWeb3": "请输入纪元 / 区块哈希 / 交易哈希 / 地址 / 通证 / 合约名称标签 / .web3 用户名",
+    "searchPlaceHolderMobileWithWeb3": "纪元/区块哈希/交易哈希/地址/通证/合约名称标签/.web3 用户名",
     "addressConverter": "地址格式转换",
     "faucet": "测试水管",
     "broadcastTx": "广播交易",

From 29fe2a939007e5492aa0c672073ff953ee80eef7 Mon Sep 17 00:00:00 2001
From: tangxuezhi <0x74616e67@gmail.com>
Date: Wed, 11 Jan 2023 17:08:59 +0800
Subject: [PATCH 42/42] feat: optimize NFT trait card style

---
 src/app/containers/NFTDetail/index.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/containers/NFTDetail/index.tsx b/src/app/containers/NFTDetail/index.tsx
index a49fc116b..d20c466cb 100644
--- a/src/app/containers/NFTDetail/index.tsx
+++ b/src/app/containers/NFTDetail/index.tsx
@@ -8,7 +8,7 @@ import { Card } from 'app/components/Card/Loadable';
 import { Link } from 'app/components/Link/Loadable';
 import { NFTPreview } from 'app/components/NFTPreview';
 import styled from 'styled-components';
-import { Row, Col, Collapse, Tooltip, message } from '@cfxjs/antd';
+import { Row, Col, Collapse, Tooltip, message, Typography } from '@cfxjs/antd';
 import { Description } from 'app/components/Description/Loadable';
 import { CopyButton } from 'app/components/CopyButton/Loadable';
 import { reqNFTDetail, reqToken, reqRefreshMetadata } from 'utils/httpRequest';
@@ -31,6 +31,8 @@ import { AddressContainer } from 'app/components/AddressContainer';
 import { useCallback } from 'react';
 import dayjs from 'dayjs';
 
+const { Text } = Typography;
+
 const AceEditorStyle = {
   width: 'initial',
   backgroundColor: '#F8F9FB',
@@ -68,8 +70,12 @@ const TraitPanel = ({ data = [] }: { data: Array<StringAttributes> }) => {
         {data.map(d => (
           <Col span={6} key={d.trait_type}>
             <div className="container">
-              <div className="type">{d.trait_type}</div>
-              <div className="value">{d.value}</div>
+              <Text className="type" ellipsis={{ tooltip: d.trait_type }}>
+                {d.trait_type}
+              </Text>
+              <Text className="value" ellipsis={{ tooltip: d.value }}>
+                {d.value}
+              </Text>
             </div>
           </Col>
         ))}
@@ -118,12 +124,14 @@ const StyledTraitPanelWrapper = styled.div`
     font-weight: 500;
     font-size: 12px;
     margin-bottom: 12px;
+    width: 100%;
   }
 
   .value {
     font-size: 16px;
     font-weight: 500;
     line-height: 20px;
+    width: 100%;
   }
 `;
 const StyledDatePanelWrapper = styled.div`