Do not display empty NFT attributes (#2348)

Fixes #2337

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>
   );

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>
         </>

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: {