Merge remote-tracking branch 'origin/main' into fix/tx-provider-errors

haqq-network · Apr 23, 2024 · 262ae75 · 262ae75
2 parents d6ae236 + eb0faab
commit 262ae75
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 22 deletions.
diff --git a/src/models/nft/nft-types.ts b/src/models/nft/nft-types.ts
@@ -15,6 +15,7 @@ export type NftCollectionIndexer = {
 
 export type NftItemIndexer = {
   address: HaqqCosmosAddress;
+  attributes: NftAttribute[] | null;
   block: number;
   cached_url: string | null;
   contract: HaqqCosmosAddress;
@@ -25,7 +26,7 @@ export type NftItemIndexer = {
   is_failed: boolean;
   is_link_checked: boolean;
   is_name_checked: boolean;
-  metadata: null | Object; // TODO Check it
+  metadata: null | NftMetadata;
   name: string;
   original_url: string | null;
   token_id: string;
@@ -34,6 +35,16 @@ export type NftItemIndexer = {
   properties: Record<string, string> | null;
 };
 
+type NftMetadata = {
+  attributes: NftAttribute[] | null;
+};
+
+export type NftAttribute = {
+  display_type: string;
+  trait_type: string;
+  value: string;
+};
+
 // TODO Reset image as not null when default image will be provided
 export type NftItem = Omit<
   NftItemIndexer,

diff --git a/...HomeStack/NftStack/components/nft-item-details/components/nft-item-details-attributes.tsx b/...HomeStack/NftStack/components/nft-item-details/components/nft-item-details-attributes.tsx
@@ -6,35 +6,48 @@ import {Color} from '@app/colors';
 import {Spacer, Text, TextVariant} from '@app/components/ui';
 import {createTheme} from '@app/helpers';
 import {I18N} from '@app/i18n';
+import {NftAttribute} from '@app/models/nft';
 
 type Props = {
-  properties: Record<string, string> | null;
+  attributes?: NftAttribute[] | null;
 };
 
-export const NftItemDetailsAttributes = ({properties}: Props) => {
+export const NftItemDetailsAttributes = ({attributes}: Props) => {
+  if (!attributes) {
+    return null;
+  }
+
+  const valueConverter = (attr: NftAttribute) => {
+    if (attr.display_type === 'date') {
+      return new Date(Number(attr.value) * 1000).toLocaleDateString();
+    }
+
+    return attr.value;
+  };
+
   return (
     <>
       <Text variant={TextVariant.t12} i18n={I18N.nftDetailsAttributes} />
       <Spacer height={8} />
       <View style={styles.attributeListContainer}>
-        {properties
-          ? Object.entries(properties).map(([key, value]) => {
-              return (
-                <View key={key} style={styles.attributeContainer}>
-                  <View style={styles.attributeValueContainer}>
-                    <Text variant={TextVariant.t13}>{value}</Text>
-                    {/*<Text variant={TextVariant.t13}>*/}
-                    {/*  {value}*/}
-                    {/*  /!*{prop.frequency * 100}%*!/*/}
-                    {/*</Text>*/}
-                  </View>
-                  <Text variant={TextVariant.t15} color={Color.textBase2}>
-                    {key}
-                  </Text>
-                </View>
-              );
-            })
-          : null}
+        {attributes.map(attribute => {
+          return (
+            <View key={attribute.trait_type} style={styles.attributeContainer}>
+              <View style={styles.attributeValueContainer}>
+                <Text variant={TextVariant.t13}>
+                  {valueConverter(attribute)}
+                </Text>
+                {/*<Text variant={TextVariant.t13}>*/}
+                {/*  {value}*/}
+                {/*  /!*{prop.frequency * 100}%*!/*/}
+                {/*</Text>*/}
+              </View>
+              <Text variant={TextVariant.t15} color={Color.textBase2}>
+                {attribute.trait_type}
+              </Text>
+            </View>
+          );
+        })}
       </View>
     </>
   );

diff --git a/src/screens/HomeStack/NftStack/components/nft-item-details/nft-item-details.tsx b/src/screens/HomeStack/NftStack/components/nft-item-details/nft-item-details.tsx
@@ -53,7 +53,7 @@ export const NftItemDetails = ({item, onPressSend}: NftItemDetailsProps) => {
         <NftItemDetailsDescription description={item.description} />
         <NftItemDetailsPrice price={item.price} />
         <NftItemDetailsTokenId tokenId={item.tokenId} />
-        <NftItemDetailsAttributes properties={item.properties} />
+        <NftItemDetailsAttributes attributes={item.attributes} />
       </ScrollView>
       {!item.is_transfer_prohibinden && (
         <View>