Merge pull request #772 from Conflux-Chain/dev

feat: upgrade NFT asset list and detail
Conflux-Chain · Jun 2, 2022 · f167e97 · f167e97
2 parents 3d6cd08 + c97ffb2
commit f167e97
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/src/app/containers/NFTAsset/index.tsx b/src/app/containers/NFTAsset/index.tsx
@@ -275,8 +275,9 @@ export function NFTAsset({
               current={page}
               defaultPageSize={pageSize}
               total={total}
-              showSizeChanger={false}
-              showQuickJumper={false}
+              // showSizeChanger={false}
+              // showQuickJumper={false}
+              pageSizeOptions={['12', '24', '60', '120']}
               onChange={handlePaginationChange}
             />
           </NFTWrapper>

diff --git a/src/app/containers/NFTDetail/index.tsx b/src/app/containers/NFTDetail/index.tsx
@@ -11,9 +11,10 @@ import styled from 'styled-components';
 import { Row, Col, Collapse, Tooltip } from '@cfxjs/antd';
 import { Description } from 'app/components/Description/Loadable';
 import { CopyButton } from 'app/components/CopyButton/Loadable';
-import { reqNFTDetail } from 'utils/httpRequest';
+import { reqNFTDetail, reqToken } from 'utils/httpRequest';
 import SkeletonContainer from 'app/components/SkeletonContainer/Loadable';
 import { useBreakpoint } from 'styles/media';
+import { InfoIconWithTooltip } from 'app/components/InfoIconWithTooltip/Loadable';
 
 import AceEditor from 'react-ace';
 import 'ace-builds/webpack-resolver';
@@ -57,6 +58,10 @@ export function NFTDetail(props) {
   }>();
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<any>({});
+  const [tokenInfo, setTokenInfo] = useState({
+    name: '',
+    symbol: '',
+  });
 
   useEffect(() => {
     setLoading(true);
@@ -73,6 +78,13 @@ export function NFTDetail(props) {
       .finally(() => {
         setLoading(false);
       });
+
+    reqToken({ address }).then(({ name, symbol }) => {
+      setTokenInfo({
+        name,
+        symbol,
+      });
+    });
   }, [address, id]);
 
   const tokenType = data.type?.replace('ERC', 'CRC');
@@ -170,6 +182,21 @@ export function NFTDetail(props) {
                     )}
                   </SkeletonContainer>
                 </Description>
+                <Description
+                  title={
+                    <InfoIconWithTooltip
+                      info={t(translations.nftDetail.contractInfoTip)}
+                    >
+                      {t(translations.nftDetail.contractInfo)}
+                    </InfoIconWithTooltip>
+                  }
+                >
+                  <SkeletonContainer shown={loading}>
+                    {`${tokenInfo.name ? tokenInfo.name : '--'} (${
+                      tokenInfo.symbol ? tokenInfo.symbol : '--'
+                    })`}
+                  </SkeletonContainer>
+                </Description>
                 <Description title={t(translations.nftDetail.creator)}>
                   <SkeletonContainer shown={loading}>
                     {data.creator ? (

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -12,6 +12,8 @@
     "name": "Token Name",
     "type": "Token Standard",
     "address": "Contract Address",
+    "contractInfo": "Contract Info",
+    "contractInfoTip": "Token name and symbol initialized by deployed the contract.",
     "owner": "Owner",
     "url": "Original Content URL",
     "creator": "Creator",

diff --git a/src/locales/zh_cn/translation.json b/src/locales/zh_cn/translation.json
@@ -12,6 +12,8 @@
     "name": "代币名称",
     "type": "代币标准",
     "address": "合约地址",
+    "contractInfo": "合约信息",
+    "contractInfoTip": "合约部署时设置的代币的名称和符号",
     "owner": "所有者",
     "url": "内容链接",
     "creator": "创作者",