feat(address): nrc 721 (#298)

* feat(address): nrc 721 * feat(nrc721): add the prefix word `id:` for token id --------- Signed-off-by: Chen Yu <[email protected]> Co-authored-by: Chen Yu <[email protected]>
Magickbase · May 11, 2024 · 019d43e · 019d43e
1 parent bcda583
commit 019d43e
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;