'nftpar 694'

packages/react-components/src/NftDetails/index.tsx

@@ -39,6 +39,10 @@ function NftDetails ({ account }: NftDetailsProps): React.ReactElement<NftDetail
     setShowTransferForm(false);
   }, []);
 
+  const getVideoUrl = useCallback(() => {
+    return tokenUrl.replace('image.jpg', 'video.mp4');
+  }, [tokenUrl]);
+
   return (
     <div className='token-details'>
       <Breadcrumbs
@@ -159,6 +163,18 @@ function NftDetails ({ account }: NftDetailsProps): React.ReactElement<NftDetail
                           <p key={attrKey}><strong>{attrKey}:</strong> {(attributes[attrKey] as string[]).join(', ')}</p>
                         );
                       })}
+                      {attributes && attributes.profile === 'Black profiles' &&
+                      <p key='VideoUrl'>
+                        <strong>Video Url:</strong>
+                        <a
+                          href={getVideoUrl()}
+                          rel='noreferrer'
+                          target='_blank'
+                        >
+                          {getVideoUrl()}
+                        </a>
+                      </p>
+                      }
                     </div>
                   )}
                 </div>

packages/react-components/src/NftDetails/styles.scss

@@ -37,6 +37,15 @@
         background-color: var(--card-background);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         border-radius: 4px;
+
+        a{
+          color: var(--link-color);
+          display: block;
+          cursor: pointer;
+          margin: 8px 0 ;
+          font-size: 18px;
+          font-family: var(--font-roboto);
+        }
       }
 
       &--attributes {

packages/react-components/src/util/protobufUtils.ts

@@ -97,14 +97,7 @@ export function convertEnumToString (value: string, key: string, NFTMeta: Type,
 export function deserializeNft (onChainSchema: ProtobufAttributeType, buffer: Uint8Array, locale: string): { [key: string]: any } {
   try {
     const root = defineMessage(onChainSchema);
-    let NFTMeta: Type;
-
-    // Obtain the message type
-    if (root?.nested?.onChainMetaData) {
-      NFTMeta = root.lookupType('onChainMetaData.NFTMeta');
-    } else if (root?.nested?.onchainmetadata) {
-      NFTMeta = root.lookupType('onchainmetadata.NFTMeta');
-    }
+    const NFTMeta = root.lookupType('onChainMetaData.NFTMeta');
 
     // Decode a Uint8Array (browser) or Buffer (node) to a message
     const message = NFTMeta.decode(buffer);
@@ -120,16 +113,22 @@ export function deserializeNft (onChainSchema: ProtobufAttributeType, buffer: Ui
     });
     const newObjectItem = { ...objectItem };
 
-    for (const key in objectItem) {
+    for (const key in newObjectItem) {
       if (NFTMeta?.fields[key]?.resolvedType?.options && Object.keys(NFTMeta?.fields[key]?.resolvedType?.options as {[key: string]: string}).length > 0) {
         if (Array.isArray(objectItem[key])) {
           const item = objectItem[key] as string[];
 
-          item.forEach((value: string, index) => {
-            (newObjectItem[key] as string[])[index] = convertEnumToString(value, key, NFTMeta, locale);
-          });
+          if (item.length !== 0) {
+            item.forEach((value: string, index) => {
+              (newObjectItem[key] as string[])[index] = convertEnumToString(value, key, NFTMeta, locale);
+            });
+          } else delete newObjectItem[key];
         } else {
-          newObjectItem[key] = convertEnumToString(objectItem[key], key, NFTMeta, locale);
+          const currentItem: string[] = (newObjectItem[key] as string).split('_');
+
+          if (currentItem[currentItem.length - 1] !== '0') {
+            newObjectItem[key] = convertEnumToString(newObjectItem[key], key, NFTMeta, locale);
+          } else delete newObjectItem[key];
         }
       }
     }