Merge pull request #794 from Conflux-Chain/s40

fix: SCAN-4181, SCAN-4182

Author: 0x74616e67

src/app/components/TxnComponents/AddressLabel.tsx

@@ -0,0 +1,31 @@
+import React 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';
+
+export const AddressLabel = ({ address }) => {
+  const [globalData = {}] = useGlobalData();
+  const { t } = useTranslation();
+
+  const addressLabel = globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][address];
+  const addressLabelIcon = (
+    <Text span hoverValue={t(translations.profile.tip.label)}>
+      <Bookmark color="var(--theme-color-gray2)" size={16} />
+    </Text>
+  );
+
+  if (addressLabel) {
+    return (
+      <span>
+        {' '}
+        ({addressLabelIcon}
+        {addressLabel})
+      </span>
+    );
+  }
+
+  return null;
+};

src/app/components/TxnComponents/InputData/OptimizationDecode.tsx

@@ -10,6 +10,7 @@ import { Text } from 'app/components/Text/Loadable';
 import { Event } from '../Event';
 // import Info from '@zeit-ui/react-icons/info';
 import { media } from 'styles/media';
+import { AddressLabel } from '../AddressLabel';
 
 export const OptimizationDecode = ({
   data = '',
@@ -75,6 +76,7 @@ export const OptimizationDecode = ({
                       {a.formattedValue}{' '}
                     </Link>
                     <ContractDetail info={contractInfo} />
+                    <AddressLabel address={a.formattedValue} />
                   </>
                 );
               }

src/app/containers/Transaction/EventLogs/Address.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { Link } from 'app/components/Link/Loadable';
 import { formatAddress } from 'utils';
 import { ContractDetail } from 'app/components/TxnComponents/ContractDetail';
+import { AddressLabel } from 'app/components/TxnComponents/AddressLabel';
 
 export const Address = ({ address, contract }) => {
   return (
     <>
       <Link href={`/address/${address}`}>{formatAddress(address)}</Link>
       <ContractDetail info={contract} />
+      <AddressLabel address={formatAddress(address)} />
     </>
   );
 };

src/app/containers/Transaction/EventLogs/Data.tsx

@@ -10,6 +10,7 @@ import { media } from '../../../../styles/media';
 import { ContractDetail } from 'app/components/TxnComponents/ContractDetail';
 import { formatAddress } from 'utils';
 import { DecodedParams } from 'app/components/TxnComponents/util';
+import { AddressLabel } from 'app/components/TxnComponents/AddressLabel';
 
 const isPossibleAddress = data => {
   try {
@@ -78,7 +79,12 @@ const decodeData = (value, type) => {
     switch (type) {
       case 'address':
         const address = SDK.format.address(`0x${value.substr(24)}`, NETWORK_ID);
-        result = <Link href={`/address/${address}`}>{address}</Link>;
+        result = (
+          <>
+            <Link href={`/address/${address}`}>{address}</Link>
+            <AddressLabel address={address} />
+          </>
+        );
         break;
       case 'number':
         result = SDK.format.bigInt(v).toString();
@@ -168,6 +174,7 @@ export const Data = ({
               <>
                 <Link href={`/address/${d.value}`}>{d.value} </Link>
                 <ContractDetail info={contractInfo}></ContractDetail>
+                <AddressLabel address={d.value} />
               </>
             );
           }

src/app/containers/Transaction/EventLogs/Topics.tsx

@@ -7,6 +7,7 @@ import { Link } from 'app/components/Link';
 import { ContractDetail } from 'app/components/TxnComponents/ContractDetail';
 import { media } from 'styles/media';
 import { formatAddress } from 'utils';
+import { AddressLabel } from 'app/components/TxnComponents/AddressLabel';
 
 export const Topics = ({ data, signature, contractAndTokenInfo }) => {
   const { t } = useTranslation();
@@ -81,6 +82,7 @@ export const Topics = ({ data, signature, contractAndTokenInfo }) => {
               <>
                 <Link href={`/address/${value}`}>{value} </Link>
                 <ContractDetail info={contractInfo}></ContractDetail>
+                <AddressLabel address={value} />
               </>
             );
           }

src/app/containers/Transaction/EventLogs/index.tsx

@@ -22,6 +22,7 @@ import { Data } from './Data';
 import { Event } from 'app/components/TxnComponents/Event';
 import { disassembleEvent } from 'app/components/TxnComponents/util';
 import { media } from 'styles/media';
+import { AddressLabel } from 'app/components/TxnComponents/AddressLabel';
 
 interface Props {
   hash: string;
@@ -193,6 +194,7 @@ const EventLog = ({ log }) => {
                 address={address}
                 contract={contractAndTokenInfo[formatAddress(address)]}
               ></Address>
+              <AddressLabel address={address} />
             </Description>
             {fnName ? (
               <Description