From 019d43ef025389a3909c5e874d003d4c060c859d Mon Sep 17 00:00:00 2001
From: daryl <sai9375@hotmail.com>
Date: Sat, 11 May 2024 14:44:24 +0800
Subject: [PATCH] feat(address): nrc 721 (#298)

* feat(address): nrc 721

* feat(nrc721): add the prefix word `id:` for token id

---------

Signed-off-by: Chen Yu <keithwhisper@gmail.com>
Co-authored-by: Chen Yu <keithwhisper@gmail.com>
---
 src/pages/Address/AddressAssetComp.tsx        | 25 ++++---------------
 src/pages/Address/AddressComp.tsx             |  2 ++
 src/pages/Address/Cells.tsx                   |  9 ++++---
 src/pages/Address/MergedAssetList.tsx         |  2 +-
 .../Address/addressAssetComp.module.scss      |  1 +
 src/pages/Address/cells.module.scss           |  6 +++++
 6 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/pages/Address/AddressAssetComp.tsx b/src/pages/Address/AddressAssetComp.tsx
index e2b6e4c03..453dba981 100644
--- a/src/pages/Address/AddressAssetComp.tsx
+++ b/src/pages/Address/AddressAssetComp.tsx
@@ -10,6 +10,7 @@ import { formatNftDisplayId, handleNftImgError, hexToBase64, patchMibaoImg } fro
 import { getDobs } from '../../services/DobsService'
 import { sliceNftName } from '../../utils/string'
 import styles from './addressAssetComp.module.scss'
+import EllipsisMiddle from '../../components/EllipsisMiddle'
 
 export const AddressAssetComp = ({
   href,
@@ -51,9 +52,7 @@ export const AddressAssetComp = ({
         )}
         <div className={styles.fields}>
           <div className={styles.assetName}>{name}</div>
-          <div className={styles.attribute} title={property}>
-            {property}
-          </div>
+          <EllipsisMiddle className={styles.attribute} text={property} />
         </div>
       </div>
     </a>
@@ -177,16 +176,7 @@ export const AddressMNFTComp = ({ account, isRGBPP }: { account: MNFT; isRGBPP?:
   )
 }
 
-export const AddressNRC721Comp = ({
-  account,
-  isRGBPP,
-  isMerged = false,
-}: {
-  account: NRC721
-  isRGBPP?: boolean
-  isMerged?: boolean
-}) => {
-  const { t } = useTranslation()
+export const AddressNRC721Comp = ({ account, isRGBPP }: { account: NRC721; isRGBPP?: boolean }) => {
   const { symbol, amount, udtIconFile, collection } = account
   const [icon, setIcon] = useState(udtIconFile)
 
@@ -205,17 +195,12 @@ export const AddressNRC721Comp = ({
       })
   }, [udtIconFile])
 
-  let name = !symbol ? '?' : sliceNftName(symbol)
-  if (isMerged) {
-    name = `${t('rgbpp.amount')}: ${(+amount).toLocaleString('en')}`
-  }
-
   return (
     <AddressAssetComp
       isRGBPP={isRGBPP ?? false}
       href={`/nft-collections/${collection?.typeHash}`}
-      property={!symbol ? '?' : `#${amount}`}
-      name={name}
+      property={`id: ${amount}`}
+      name={!symbol ? '?' : sliceNftName(`${symbol} #${collection.typeHash.slice(2, 5)}`)}
       isUnverified={!symbol}
       udtLabel="NRC 721"
       icon={{
diff --git a/src/pages/Address/AddressComp.tsx b/src/pages/Address/AddressComp.tsx
index 90f0e8eb2..53812319b 100644
--- a/src/pages/Address/AddressComp.tsx
+++ b/src/pages/Address/AddressComp.tsx
@@ -268,8 +268,10 @@ export const AddressOverviewCard: FC<{ address: Address }> = ({ address }) => {
 
                       case 'm_nft_token':
                         return <AddressMNFTComp account={udt} key={udt.symbol + udt.udtType + udt.amount} />
+
                       case 'nrc_721_token':
                         return <AddressNRC721Comp account={udt} key={udt.symbol + udt.udtType + udt.amount} />
+                        
                       default:
                         return null
                     }
diff --git a/src/pages/Address/Cells.tsx b/src/pages/Address/Cells.tsx
index 756b493eb..872c56ddd 100644
--- a/src/pages/Address/Cells.tsx
+++ b/src/pages/Address/Cells.tsx
@@ -22,6 +22,7 @@ import { useSetToast } from '../../components/Toast'
 import { PAGE_SIZE } from '../../constants/common'
 import styles from './cells.module.scss'
 import SmallLoading from '../../components/Loading/SmallLoading'
+import { sliceNftName } from '../../utils/string'
 
 enum Sort {
   TimeAsc = 'block_timestamp.asc',
@@ -164,8 +165,10 @@ const Cell: FC<{ cell: LiveCell }> = ({ cell }) => {
     }
     case 'nrc_721': {
       icon = SUDTTokenIcon
-      assetName = 'NRC 721'
-      attribute = '-'
+      assetName = !cell.extraInfo.symbol
+        ? '?'
+        : sliceNftName(`${cell.extraInfo.symbol} #${cell.extraInfo.typeHash.slice(0, 3)}`)
+      attribute = cell.extraInfo.amount
       break
     }
     case 'm_nft': {
@@ -201,7 +204,7 @@ const Cell: FC<{ cell: LiveCell }> = ({ cell }) => {
         <div className={styles.fields}>
           <div className={styles.assetName}>{assetName}</div>
           <div className={styles.attribute} title={detailInfo ?? attribute}>
-            {attribute}
+            <div className={styles.attributeContent}>{attribute}</div>
             {detailInfo ? (
               <button type="button" className={styles.copy} data-detail={detailInfo} onClick={handleCopy}>
                 <CopyIcon />
diff --git a/src/pages/Address/MergedAssetList.tsx b/src/pages/Address/MergedAssetList.tsx
index f91785a21..f8a50e0f1 100644
--- a/src/pages/Address/MergedAssetList.tsx
+++ b/src/pages/Address/MergedAssetList.tsx
@@ -95,7 +95,7 @@ const MergedAssetList: FC<{
           case 'spore_cell':
             return <AddressSporeComp isRGBPP isMerged account={nft} key={nft.symbol + nft.udtType + nft.amount} />
           case 'nrc_721_token':
-            return <AddressNRC721Comp isRGBPP isMerged account={nft} key={nft.symbol + nft.udtType + nft.amount} />
+            return <AddressNRC721Comp isRGBPP account={nft} key={nft.symbol + nft.udtType + nft.amount} />
           case 'm_nft_token':
             return <AddressMNFTComp isRGBPP account={nft} key={nft.symbol + nft.udtType + nft.amount} />
           default:
diff --git a/src/pages/Address/addressAssetComp.module.scss b/src/pages/Address/addressAssetComp.module.scss
index c8d647041..d799dd301 100644
--- a/src/pages/Address/addressAssetComp.module.scss
+++ b/src/pages/Address/addressAssetComp.module.scss
@@ -65,6 +65,7 @@
     }
 
     .fields {
+      width: 100%;
       min-width: 0;
       display: flex;
       flex-direction: column;
diff --git a/src/pages/Address/cells.module.scss b/src/pages/Address/cells.module.scss
index 981e35fb2..fac4d70ce 100644
--- a/src/pages/Address/cells.module.scss
+++ b/src/pages/Address/cells.module.scss
@@ -125,6 +125,11 @@
 
     .attribute {
       display: flex;
+
+      &Content {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
     }
 
     .copy {
@@ -147,6 +152,7 @@
     }
 
     .fields {
+      min-width: 0;
       display: flex;
       flex-direction: column;
       justify-content: space-around;