Merge pull request #761 from Conflux-Chain/s37

feat: optimize NFT 1155 transfer and display
Conflux-Chain · May 25, 2022 · d8263c9 · d8263c9
2 parents b107e42 + 08d9da4
commit d8263c9
Show file tree

Hide file tree

Showing 18 changed files with 465 additions and 452 deletions.
diff --git a/src/app/components/Charts/StockChartTemplate.tsx b/src/app/components/Charts/StockChartTemplate.tsx
@@ -154,7 +154,6 @@ export function StockChartTemplate({
       tooltip: {
         split: false,
         useHTML: true,
-        xDateFormat: '%a %e, %b %Y (UTC)',
         headerFormat: `<table>
             <tr>
               <th colspan="2" style="font-weight: normal;">{point.key}</th>

diff --git a/src/app/components/NFTPreview/index.tsx b/src/app/components/NFTPreview/index.tsx
@@ -23,6 +23,8 @@ import audioPause from './audio-pause.svg';
 import audioPlay from './audio-play.svg';
 import Link from '@zeit-ui/react-icons/link';
 import { Link as ALink } from 'app/components/Link/Loadable';
+import { formatString } from 'utils';
+import { Tag } from '@cfxjs/antd';
 
 const epiKProtocolKnowledgeBadge =
   'cfx:acev4c2s2ttu3jzxzsd4a2hrzsa4pfc3f6f199y5mk';
@@ -181,10 +183,14 @@ export const NFTPreview = React.memo(
     contractAddress,
     tokenId,
     type = 'preview',
+    amount = 0,
+    owner = '',
   }: {
     contractAddress?: string;
     tokenId?: number | string;
     type?: 'preview' | 'card' | 'primary';
+    amount?: number;
+    owner?: string;
   }) => {
     const { t, i18n } = useTranslation();
     const lang = i18n.language.includes('zh') ? 'zh' : 'en';
@@ -226,28 +232,35 @@ export const NFTPreview = React.memo(
         return (
           <NFTCard>
             <Spin spinning={loading}>
-              {imageUri ? (
-                contractAddress === epiKProtocolKnowledgeBadge ? (
-                  <div className="ant-image">
-                    <iframe title={imageName} src={imageUri} />
-                  </div>
+              <div className="nft-container">
+                {imageUri ? (
+                  contractAddress === epiKProtocolKnowledgeBadge ? (
+                    <div className="ant-image">
+                      <iframe title={imageName} src={imageUri} />
+                    </div>
+                  ) : (
+                    <NFTCardInfo
+                      imageUri={imageUri}
+                      tokenId={tokenId}
+                      width={500}
+                    />
+                  )
+                ) : isFirstTime ? (
+                  <Skeleton.Image />
                 ) : (
-                  <NFTCardInfo
-                    imageUri={imageUri}
-                    tokenId={tokenId}
+                  <Image
                     width={500}
+                    src={NotFoundIcon}
+                    alt={'not found'}
+                    fallback={tokenIdNotFound}
                   />
-                )
-              ) : isFirstTime ? (
-                <Skeleton.Image />
-              ) : (
-                <Image
-                  width={500}
-                  src={NotFoundIcon}
-                  alt={'not found'}
-                  fallback={tokenIdNotFound}
-                />
-              )}
+                )}
+                {!!amount && (
+                  <Tooltip title={t(translations.nftChecker.amount)}>
+                    <Tag className="nft-amount">x{amount}</Tag>
+                  </Tooltip>
+                )}
+              </div>
               <div className="info">
                 <div className="info-name">
                   <Tooltip title={imageName}>
@@ -268,6 +281,15 @@ export const NFTPreview = React.memo(
                   <ALink href={`/nft/${contractAddress}/${tokenId}`}>
                     {t(translations.general.table.token.view)}
                   </ALink>
+                  {owner && (
+                    <>
+                      <br></br>
+                      <Tooltip title={owner}>
+                        {t(translations.nftChecker.owner)}:{' '}
+                        {formatString(owner, 'address')}
+                      </Tooltip>
+                    </>
+                  )}
                 </div>
               </div>
             </Spin>
@@ -483,6 +505,18 @@ const NFTCard = styled.div`
     }
   }
 
+  .nft-container {
+    position: relative;
+
+    .nft-amount {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      margin: 0;
+      padding: 0 5px;
+    }
+  }
+
   .info {
     padding: 8px 10px 10px;
     font-size: 12px;

diff --git a/src/app/components/StatsCard/NetworkPie.tsx b/src/app/components/StatsCard/NetworkPie.tsx
@@ -13,6 +13,9 @@ export function NetworkPie({ data }) {
     title: {
       text: '',
     },
+    credits: {
+      enabled: false,
+    },
     height: 9 / 21 / 100 + '%',
     tooltip: {
       outside: true,

diff --git a/src/app/containers/Charts/index.tsx b/src/app/containers/Charts/index.tsx
@@ -23,6 +23,7 @@ import { Contracts } from './Contracts';
 export function NewChart() {
   const { t, i18n } = useTranslation();
   const iszh = i18n.language.includes('zh');
+  dayjs.locale(i18n.language.toLowerCase() as 'zh-cn' | 'en');
 
   const format = iszh ? 'YYYY MMMDD' : 'DD MMM YYYY';
   const current = dayjs().subtract(1, 'day');