fix(address): fix the nrc721 not displayed in the assets list (#289)

* fix(address): fix the nrc721 not displayed in the assets list * style(address_udt): use ellipsis * fix(address): ellipsis --------- Co-authored-by: Chen Yu <keithwhisper@gmail.com>
Magickbase · May 11, 2024 · bcda583 · bcda583
1 parent 094a5b4
commit bcda583
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/pages/Address/AddressComp.tsx b/src/pages/Address/AddressComp.tsx
@@ -54,6 +54,7 @@ import {
   AddressSporeComp,
   AddressSudtComp,
   AddressXudtComp,
+  AddressNRC721Comp,
 } from './AddressAssetComp'
 
 enum AssetInfo {
@@ -267,6 +268,8 @@ 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/addressAssetComp.module.scss b/src/pages/Address/addressAssetComp.module.scss
@@ -4,6 +4,7 @@
   background: #fff;
   border-radius: 4px;
   overflow: hidden;
+  max-width: 287px;
 
   .head {
     display: flex;
@@ -39,7 +40,9 @@
     }
 
     .attribute {
-      display: flex;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .copy {
@@ -62,6 +65,7 @@
     }
 
     .fields {
+      min-width: 0;
       display: flex;
       flex-direction: column;
       justify-content: space-around;

diff --git a/src/utils/string.ts b/src/utils/string.ts
@@ -144,4 +144,5 @@ export const handleBigNumberFloor = (value: BigNumber | string | number, decimal
   return `${parseFloorDecimal(bigValue, decimal)}`
 }
 
-export const sliceNftName = (name?: string) => (name && name.length > 32 ? `${name.slice(0, 32)}...` : name)
+export const sliceNftName = (name?: string, maxLength = 32) =>
+  name && name.length > maxLength ? `${name.slice(0, maxLength)}...` : name