Merge pull request #925 from Conflux-Chain/dev

feat: release new version

package.json

@@ -23,6 +23,7 @@
     "@types/styled-components": "5.0.1",
     "@types/testing-library__jest-dom": "5.0.2",
     "@types/webpack-env": "1.15.1",
+    "@web3identity/cns-util": "0.1.20",
     "@zeit-ui/react-icons": "1.3.1",
     "ace-builds": "1.4.12",
     "ace-mode-solidity": "0.1.1",

src/app/components/Charts/StockChartTemplate.tsx

@@ -8,6 +8,9 @@ import lodash from 'lodash';
 import { reqChartData } from 'utils/httpRequest';
 import { useBreakpoint } from 'styles/media';
 import { useHighcharts } from 'utils/hooks/useHighcharts';
+import { useTranslation } from 'react-i18next';
+import { translations } from 'locales/i18n';
+import { getChartsSubTitle } from 'utils';
 
 // @ts-ignore
 window.dayjs = dayjs;
@@ -37,6 +40,7 @@ export function StockChartTemplate({
   options,
   request,
 }: Props) {
+  const { t } = useTranslation();
   const bp = useBreakpoint();
   const chart = useRef(null);
   const [data, setData] = useState({
@@ -194,6 +198,9 @@ export function StockChartTemplate({
           },
         },
       },
+      subtitle: {
+        text: getChartsSubTitle(t(translations.highcharts.subtitle)),
+      },
     },
     options,
   );

src/app/components/Nav/index.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import React, { HTMLAttributes, memo, ReactNode } from 'react';
 import styled from 'styled-components/macro';
 import { media, useBreakpoint } from 'styles/media';
+import { usePlatform } from 'utils/hooks/usePlatform';
 
 interface Props extends HTMLAttributes<HTMLElement> {
   brand: ReactNode;
@@ -46,6 +47,7 @@ export const Nav = memo(
     topMenu = toWrappedArray(topMenu);
     const sourceSubMenu = subMenu;
     subMenu = subMenu ? toWrappedArray(subMenu) : null;
+    const { isDapp } = usePlatform();
 
     return (
       <Outer {...props}>
@@ -60,6 +62,9 @@ export const Nav = memo(
               aria-expanded={'true'}
               data-target="navbar"
               onClick={toggleMenu}
+              style={{
+                visibility: isDapp ? 'hidden' : 'inherit',
+              }}
             >
               <span aria-hidden="true" />
               <span aria-hidden="true" />

src/app/containers/AddressContractDetail/AddressDetailPage.tsx

@@ -136,10 +136,12 @@ export const AddressDetailPage = memo(() => {
               ? t(translations.general.zeroAddress)
               : t(translations.general.address.address)}
 
-            <StyledENSName show={!!label}>
-              {icon}
-              {label}
-            </StyledENSName>
+            <RouterLink to={`/cns-search?text=${label}`}>
+              <StyledENSName show={!!label}>
+                {icon}
+                {label}
+              </StyledENSName>
+            </RouterLink>
           </Title>
           <HeadAddressLine>
             <span className="address">

src/app/containers/AddressContractDetail/ContractContent.tsx

@@ -105,6 +105,84 @@ const Code = ({ contractInfo }) => {
     }
   }, [abi, address, constructorArgs]);
 
+  const sourceCodeContent = useMemo(() => {
+    let fSourceCode = sourceCode;
+
+    try {
+      const jSourceCode = JSON.parse(sourceCode);
+
+      // contains multiple sourcecode file
+      if (jSourceCode.sources) {
+        fSourceCode = Object.keys(jSourceCode.sources).map(k => {
+          const filenameMatch = /([^/]*)$/.exec(k);
+          let key = k;
+
+          if (filenameMatch) {
+            key = filenameMatch[0];
+          }
+
+          return {
+            key,
+            content: jSourceCode.sources[k].content,
+          };
+        });
+      }
+    } catch (error) {
+      // single sourcecode file
+    }
+
+    if (typeof fSourceCode === 'string') {
+      return (
+        <AceEditor
+          readOnly
+          style={AceEditorStyle}
+          mode="solidity"
+          theme="tomorrow"
+          name="UNIQUE_ID_OF_DIV"
+          setOptions={{
+            showLineNumbers: true,
+          }}
+          value={sourceCode}
+          wrapEnabled={true}
+          height="28rem"
+          fontSize="1rem"
+          showGutter={false}
+          showPrintMargin={false}
+        />
+      );
+    } else {
+      const len = fSourceCode.length;
+
+      return fSourceCode.map((s, i) => (
+        <>
+          <div className={`multiple-sourcecode-title ${i === 0 && 'first'}`}>
+            {t(translations.contract.sourceCodeFilename, {
+              index: i + 1,
+              total: len,
+              filename: s.key,
+            })}
+          </div>
+          <AceEditor
+            readOnly
+            style={AceEditorStyle}
+            mode="solidity"
+            theme="tomorrow"
+            name="UNIQUE_ID_OF_DIV"
+            setOptions={{
+              showLineNumbers: true,
+            }}
+            value={s.content}
+            wrapEnabled={true}
+            height="20rem"
+            fontSize="1rem"
+            showGutter={false}
+            showPrintMargin={false}
+          />
+        </>
+      ));
+    }
+  }, [t, sourceCode]);
+
   if (!contractInfo.codeHash) {
     return (
       <StyledContractContentCodeWrapper>
@@ -187,22 +265,7 @@ const Code = ({ contractInfo }) => {
               <div className="contract-sourcecode-and-abi-title">
                 {t(translations.contract.sourceCodeShort)}
               </div>
-              <AceEditor
-                readOnly
-                style={AceEditorStyle}
-                mode="solidity"
-                theme="tomorrow"
-                name="UNIQUE_ID_OF_DIV"
-                setOptions={{
-                  showLineNumbers: true,
-                }}
-                value={sourceCode}
-                wrapEnabled={true}
-                height="28rem"
-                fontSize="1rem"
-                showGutter={false}
-                showPrintMargin={false}
-              />{' '}
+              {sourceCodeContent}
             </>
           ) : null}
         </div>
@@ -381,6 +444,16 @@ const StyledContractContentCodeWrapper = styled.div`
     background-color: rgb(248, 249, 251);
     padding: 5px 10px;
   }
+
+  .multiple-sourcecode-title {
+    margin: 30px 0 10px;
+    color: var(--theme-color-gray2);
+    font-weight: bold;
+
+    &.first {
+      margin-top: 10px;
+    }
+  }
 `;
 
 type TabsItemType = {

src/app/containers/AddressConverter/index.tsx

@@ -22,7 +22,6 @@ import { List } from './List';
 import { trackEvent } from 'utils/ga';
 import { ScanEvent } from 'utils/gaConstants';
 import { isZeroAddress, isInnerContractAddress } from 'utils';
-import imgWarning from 'images/warning.png';
 import { NETWORK_TYPE, NETWORK_TYPES } from 'utils/constants';
 import { getCode } from 'utils/rpcRequest';
 
@@ -188,6 +187,13 @@ export function AddressConverter() {
       }`
     : '';
 
+  const WARNINGS = [
+    t(translations.addressConverter.warnings.one),
+    t(translations.addressConverter.warnings.two),
+    t(translations.addressConverter.warnings.three),
+    t(translations.addressConverter.warnings.four),
+  ];
+
   return (
     <>
       <Helmet>
@@ -201,17 +207,17 @@ export function AddressConverter() {
       <StyledSubtitleWrapper>
         {t(translations.addressConverter.subtitle)}
         <StyledColoredWrapper>
-          <img src={imgWarning} alt="warning-icon" className="img"></img>
-          <span>
-            {t(translations.addressConverter.notice)}
-            <Link
-              target="_blank"
-              href={t(translations.addressConverter.noticeLink)}
-            >
-              {t(translations.addressConverter.noticeLinkText)}
-            </Link>
-            {t(translations.addressConverter.noticeend)}
+          <span className="title">
+            {t(translations.addressConverter.warning)}
           </span>
+          {WARNINGS.map((w, i) => (
+            <span
+              key={i}
+              dangerouslySetInnerHTML={{
+                __html: w,
+              }}
+            ></span>
+          ))}
         </StyledColoredWrapper>
       </StyledSubtitleWrapper>
       <StyledInputWrapper>
@@ -483,11 +489,10 @@ const StyledColoredWrapper = styled.div`
   line-height: 18px;
   margin-top: 5px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  flex-direction: column;
 
-  .img {
-    width: 14px;
-    height: 14px;
-    margin-right: 5px;
+  .title {
+    margin-top: 1rem;
   }
 `;

src/app/containers/CNS/Loadable.tsx

@@ -0,0 +1,10 @@
+/**
+ * Asynchronously loads the component for NFTChecker
+ */
+
+import { lazyLoad } from 'utils/loadable';
+
+export const CNS = lazyLoad(
+  () => import('./index'),
+  module => module.CNS,
+);

src/app/containers/CNS/NotFound.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import imgNotFound from 'images/home/notFoundAddress.svg';
+import styled from 'styled-components/macro';
+
+export const NotFound = ({ children = 'reason' }) => {
+  return (
+    <StyledWrapper>
+      <div>
+        <img src={imgNotFound} alt="cns search result not found"></img>
+      </div>
+      <div className="msg">{children}</div>
+    </StyledWrapper>
+  );
+};
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 30rem;
+  justify-content: center;
+
+  img {
+    width: 240px;
+  }
+
+  .msg {
+    font-style: normal;
+    font-weight: 450;
+    font-size: 1.5714rem;
+    line-height: 2rem;
+    color: #424242;
+    margin-top: 4rem;
+    max-width: 650px;
+    text-align: center;
+  }
+`;