From 9dccf1964e5a5800851d69852733a36c3a15123c Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Thu, 31 Oct 2024 14:01:07 +0100
Subject: [PATCH] Do not display empty NFT attributes

Fixes #2337
---
 ui/shared/TruncatedValue.tsx                    |  2 +-
 .../details/TokenInstanceMetadataInfo.tsx       | 17 +++++++++++++----
 .../metadata/MetadataItemPrimitive.tsx          |  3 +++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/ui/shared/TruncatedValue.tsx b/ui/shared/TruncatedValue.tsx
index f953477b08..3266df076b 100644
--- a/ui/shared/TruncatedValue.tsx
+++ b/ui/shared/TruncatedValue.tsx
@@ -23,7 +23,7 @@ const TruncatedValue = ({ className, isLoading, value, tooltipPlacement }: Props
         textOverflow="ellipsis"
         height="fit-content"
       >
-        { value }
+        <span>{ value }</span>
       </Skeleton>
     </TruncatedTextTooltip>
   );
diff --git a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
index 4839358912..55c528d572 100644
--- a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
+++ b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
@@ -57,9 +57,16 @@ const Item = ({ data, isLoading }: ItemProps) => {
       flexDir="column"
       alignItems="flex-start"
     >
-      <Skeleton isLoaded={ !isLoading } fontSize="xs" lineHeight={ 4 } color="text_secondary" fontWeight={ 500 } mb={ 1 }>
-        <span>{ data.trait_type }</span>
-      </Skeleton>
+      <TruncatedValue
+        value={ data.trait_type }
+        fontSize="xs"
+        w="100%"
+        lineHeight={ 4 }
+        color="text_secondary"
+        fontWeight={ 500 }
+        mb={ 1 }
+        isLoading={ isLoading }
+      />
       { value }
     </GridItem>
   );
@@ -126,7 +133,9 @@ const TokenInstanceMetadataInfo = ({ data, isLoading: isLoadingProp }: Props) =>
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
             <Grid gap={ 2 } templateColumns="repeat(auto-fill,minmax(160px, 1fr))" w="100%" whiteSpace="normal">
-              { metadata.attributes.map((attribute, index) => <Item key={ index } data={ attribute } isLoading={ isLoading }/>) }
+              { metadata.attributes
+                .filter((attribute) => attribute.value)
+                .map((attribute, index) => <Item key={ index } data={ attribute } isLoading={ isLoading }/>) }
             </Grid>
           </DetailsInfoItem.Value>
         </>
diff --git a/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx b/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx
index 256290b5e7..286149c765 100644
--- a/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx
+++ b/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx
@@ -27,6 +27,9 @@ const MetadataItemPrimitive = ({ name, value, isItem = true, isFlat, level }: Pr
         if (url) {
           return <LinkExternal href={ url.toString() }>{ value }</LinkExternal>;
         }
+        if (value === '') {
+          return <div>&quot;&quot;</div>;
+        }
       }
       // eslint-disable-next-line no-fallthrough
       default: {