Merge pull request #792 from Conflux-Chain/s40

feat: add profile
Conflux-Chain · Jun 28, 2022 · 2efc1ab · 2efc1ab
2 parents 752fc4e + 22327a2
commit 2efc1ab
Show file tree

Hide file tree

Showing 20 changed files with 1,519 additions and 24 deletions.
diff --git a/src/app/components/AddressContainer/index.tsx b/src/app/components/AddressContainer/index.tsx
@@ -14,7 +14,7 @@ import {
   isPosAddress,
   getUrl,
 } from 'utils';
-import { AlertTriangle, File } from '@zeit-ui/react-icons';
+import { AlertTriangle, File, Bookmark } from '@zeit-ui/react-icons';
 import ContractIcon from 'images/contract-icon.png';
 import isMeIcon from 'images/me.png';
 import InternalContractIcon from 'images/internal-contract-icon.png';
@@ -27,6 +27,8 @@ import {
 } 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';
 
 interface Props {
   value: string; // address value
@@ -41,6 +43,7 @@ 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;
 }
 
 const defaultPCMaxWidth = 138;
@@ -147,7 +150,10 @@ export const AddressContainer = withTranslation()(
       t,
       verify = false,
       isEspaceAddress,
+      showLabeled = true,
     }: Props & WithTranslation) => {
+      const [globalData = {}] = useGlobalData();
+
       const suffixSize =
         suffixAddressSize ||
         (window.innerWidth <= sizes.m
@@ -259,6 +265,21 @@ export const AddressContainer = withTranslation()(
         alias = t(translations.general.zeroAddress);
       }
 
+      let labelIcon: React.ReactNode = null;
+      if (showLabeled) {
+        const addressLabelMap = globalData[LOCALSTORAGE_KEYS_MAP.addressLabel];
+        if (addressLabelMap[cfxAddress]) {
+          alias = `${addressLabelMap[cfxAddress]}${alias ? ` (${alias})` : ''}`;
+          labelIcon = (
+            <IconWrapper className={prefixFloat ? 'float' : ''}>
+              <Text span hoverValue={t(translations.profile.tip.label)}>
+                <Bookmark color="var(--theme-color-gray2)" size={16} />
+              </Text>
+            </IconWrapper>
+          );
+        }
+      }
+
       if (isContractAddress(cfxAddress) || isInnerContractAddress(cfxAddress)) {
         const typeText = t(
           isInnerContractAddress(cfxAddress)
@@ -280,6 +301,7 @@ export const AddressContainer = withTranslation()(
                 prefixFloat ? 'float' : ''
               }`}
             >
+              {labelIcon}
               <Text span hoverValue={typeText}>
                 <ImgWrapper>
                   {isInnerContractAddress(cfxAddress) ? (
@@ -334,6 +356,7 @@ export const AddressContainer = withTranslation()(
         isFull,
         maxWidth,
         suffixSize,
+        prefix: labelIcon,
       });
     },
   ),

diff --git a/src/app/components/ConnectWallet/Button.tsx b/src/app/components/ConnectWallet/Button.tsx
@@ -31,7 +31,6 @@ export const Button = ({ className, onClick, showBalance }: Button) => {
   const { t } = useTranslation();
   const [balance, setBalance] = useState('0');
   const { installed, connected, accounts } = usePortal();
-
   const { pendingRecords } = useContext(TxnHistoryContext);
   const { isValid } = useCheckHook(true);
 

diff --git a/src/app/containers/AddressContractDetail/AddressDetailPage.tsx b/src/app/containers/AddressContractDetail/AddressDetailPage.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -25,12 +25,18 @@ import { Link as RouterLink } from 'react-router-dom';
 import DownIcon from '../../../images/down.png';
 import styled from 'styled-components';
 import { media } from '../../../styles/media';
+import { useGlobalData } from 'utils/hooks/useGlobal';
+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';
 
 interface RouteParams {
   address: string;
 }
 
 export const AddressDetailPage = memo(() => {
+  const [globalData = {}] = useGlobalData();
   const { t } = useTranslation();
   const { address } = useParams<RouteParams>();
   const { data: accountInfo } = useAccount(address, [
@@ -40,6 +46,10 @@ export const AddressDetailPage = memo(() => {
     'erc1155TransferCount',
     'stakingBalance',
   ]);
+  const [visible, setVisible] = useState(false);
+
+  const addressLabelMap = globalData[LOCALSTORAGE_KEYS_MAP.addressLabel];
+  const addressLabel = addressLabelMap[address];
 
   const menu = (
     <MenuWrapper>
@@ -53,6 +63,23 @@ export const AddressDetailPage = memo(() => {
           {t(translations.general.address.more.NFTChecker)}
         </RouterLink>
       </Menu.Item>
+      <Menu.Item>
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <a
+          onClick={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            setVisible(true);
+          }}
+          href=""
+        >
+          {t(
+            translations.general.address.more[
+              addressLabel ? 'updateLabel' : 'addLabel'
+            ],
+          )}
+        </a>
+      </Menu.Item>
       <Menu.Item>
         <RouterLink to={`/report?address=${address}`}>
           {t(translations.general.address.more.report)}
@@ -61,6 +88,20 @@ export const AddressDetailPage = memo(() => {
     </MenuWrapper>
   );
 
+  const props = {
+    stage: addressLabel ? 'edit' : 'create',
+    visible,
+    data: {
+      address,
+    },
+    onOk: () => {
+      setVisible(false);
+    },
+    onCancel: () => {
+      setVisible(false);
+    },
+  };
+
   return (
     <>
       <Helmet>
@@ -78,11 +119,25 @@ export const AddressDetailPage = memo(() => {
               : t(translations.general.address.address)}
           </Title>
           <HeadAddressLine>
-            <span className="address">{address}</span>
+            <span className="address">
+              {address}
+              {addressLabel ? (
+                <>
+                  {' '}
+                  (
+                  <Text span hoverValue={t(translations.profile.tip.label)}>
+                    <Bookmark color="var(--theme-color-gray2)" size={16} />
+                  </Text>
+                  {addressLabel})
+                </>
+              ) : (
+                ''
+              )}
+            </span>
             <div className="icons">
               <Copy address={address} />
               <Qrcode address={address} />
-              <DropdownWrapper overlay={menu} trigger={['click']}>
+              <DropdownWrapper overlay={menu} trigger={['hover']}>
                 <span onClick={e => e.preventDefault()}>
                   {t(translations.general.address.more.title)}{' '}
                   <img
@@ -107,6 +162,7 @@ export const AddressDetailPage = memo(() => {
         <Bottom>
           <Table address={address} addressInfo={accountInfo} key={address} />
         </Bottom>
+        <CreateAddressLabel {...props}></CreateAddressLabel>
       </Main>
     </>
   );

diff --git a/src/app/containers/AddressContractDetail/ContractDetailPage.tsx b/src/app/containers/AddressContractDetail/ContractDetailPage.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link as RouterLink, useHistory, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -41,15 +41,22 @@ import DownIcon from '../../../images/down.png';
 import { Menu } from '@cfxjs/antd';
 import { DropdownWrapper, MenuWrapper } from './AddressDetailPage';
 import { tokenTypeTag } from '../TokenDetail/Basic';
+import { useGlobalData } from 'utils/hooks/useGlobal';
+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';
 
 interface RouteParams {
   address: string;
 }
 
 export const ContractDetailPage = memo(() => {
+  const [globalData = {}] = useGlobalData();
   const { t } = useTranslation();
   const { address } = useParams<RouteParams>();
   const history = useHistory();
+  const [visible, setVisible] = useState(false);
 
   const { data: contractInfo } = useContract(address, [
     'name',
@@ -92,6 +99,8 @@ export const ContractDetailPage = memo(() => {
     websiteUrl !== 'https://' &&
     websiteUrl !== 'http://' &&
     websiteUrl !== t(translations.general.loading);
+  const addressLabelMap = globalData[LOCALSTORAGE_KEYS_MAP.addressLabel];
+  const addressLabel = addressLabelMap[address];
 
   const menu = (
     <MenuWrapper>
@@ -112,6 +121,23 @@ export const ContractDetailPage = memo(() => {
           {t(translations.general.address.more.editContract)}
         </RouterLink>
       </Menu.Item>
+      <Menu.Item>
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <a
+          onClick={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            setVisible(true);
+          }}
+          href=""
+        >
+          {t(
+            translations.general.address.more[
+              addressLabel ? 'updateLabel' : 'addLabel'
+            ],
+          )}
+        </a>
+      </Menu.Item>
       {[NETWORK_TYPES.testnet, NETWORK_TYPES.mainnet].includes(NETWORK_TYPE) ? (
         <Menu.Item>
           <RouterLink to={`/sponsor/${address}`}>
@@ -146,6 +172,20 @@ export const ContractDetailPage = memo(() => {
     </MenuWrapper>
   );
 
+  const props = {
+    stage: addressLabel ? 'edit' : 'create',
+    visible,
+    data: {
+      address,
+    },
+    onOk: () => {
+      setVisible(false);
+    },
+    onCancel: () => {
+      setVisible(false);
+    },
+  };
+
   return (
     <>
       <Helmet>
@@ -181,6 +221,18 @@ export const ContractDetailPage = memo(() => {
               )}
               &nbsp;
               <span>{address}</span>
+              {addressLabel ? (
+                <>
+                  {' '}
+                  (
+                  <Text span hoverValue={t(translations.profile.tip.label)}>
+                    <Bookmark color="var(--theme-color-gray2)" size={16} />
+                  </Text>
+                  {addressLabel})
+                </>
+              ) : (
+                ''
+              )}
             </IconWrapper>
             <div className="icons">
               <Copy address={address} />
@@ -227,6 +279,7 @@ export const ContractDetailPage = memo(() => {
         <Bottom key="bottom">
           <Table key="table" address={address} addressInfo={contractInfo} />
         </Bottom>
+        <CreateAddressLabel {...props}></CreateAddressLabel>
       </Main>
     </>
   );

diff --git a/src/app/containers/Header/index.tsx b/src/app/containers/Header/index.tsx
@@ -519,6 +519,14 @@ export const Header = memo(() => {
               afterClick: menuClick,
               href: '/balance-checker',
             },
+            {
+              // profile
+              title: t(translations.header.profile),
+              name: ScanEvent.menu.action.home,
+              afterClick: menuClick,
+              href: '/profile',
+              className: 'profile',
+            },
           ],
         },
         {
@@ -535,6 +543,14 @@ export const Header = memo(() => {
   ];
 
   const endLinks: HeaderLinks = [
+    // {
+    //   // profile
+    //   title: t(translations.header.profile),
+    //   name: ScanEvent.menu.action.home,
+    //   afterClick: menuClick,
+    //   href: '/profile',
+    //   className: 'profile',
+    // },
     {
       // switch network
       name: 'switch-network',