From f492a2aa63d9da33a598e34e9fa1106d0af8d1b4 Mon Sep 17 00:00:00 2001
From: vaagnmazmanyan <vmazmanyanvaagn@gmail.com>
Date: Thu, 23 Sep 2021 16:43:16 +0400
Subject: [PATCH 1/2] create video url

---
 .../react-components/src/NftDetails/index.tsx   |  9 +++++++++
 .../react-components/src/NftDetails/styles.scss |  9 +++++++++
 .../react-components/src/util/protobufUtils.ts  | 17 ++++++-----------
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/react-components/src/NftDetails/index.tsx b/packages/react-components/src/NftDetails/index.tsx
index 260226e..1acbf5a 100644
--- a/packages/react-components/src/NftDetails/index.tsx
+++ b/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
@@ -61,6 +65,11 @@ function NftDetails ({ account }: NftDetailsProps): React.ReactElement<NftDetail
                 src={tokenUrl}
               />
             )}
+            {attributes && attributes.profile === 'Black profiles' && (
+              <a href={getVideoUrl()}
+                rel='noreferrer'
+                target='_blank'>Watch the video</a>
+            )}
           </div>
           <div className='token-info--row--attributes'>
             <div className='token-info--row--attributes--block'>
diff --git a/packages/react-components/src/NftDetails/styles.scss b/packages/react-components/src/NftDetails/styles.scss
index 9c3b15d..9fb527b 100644
--- a/packages/react-components/src/NftDetails/styles.scss
+++ b/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 {
diff --git a/packages/react-components/src/util/protobufUtils.ts b/packages/react-components/src/util/protobufUtils.ts
index 77ae7ce..e6244dd 100644
--- a/packages/react-components/src/util/protobufUtils.ts
+++ b/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);
@@ -125,9 +118,11 @@ export function deserializeNft (onChainSchema: ProtobufAttributeType, buffer: Ui
         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);
         }

From 2930383f71c285dc1999da42823c65ae1bcdf6e6 Mon Sep 17 00:00:00 2001
From: vaagnmazmanyan <vmazmanyanvaagn@gmail.com>
Date: Mon, 27 Sep 2021 11:49:24 +0400
Subject: [PATCH 2/2] Add video url in attributes, remove empty attributes

---
 .../react-components/src/NftDetails/index.tsx   | 17 ++++++++++++-----
 .../react-components/src/util/protobufUtils.ts  |  8 ++++++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/src/NftDetails/index.tsx b/packages/react-components/src/NftDetails/index.tsx
index 1acbf5a..29734fb 100644
--- a/packages/react-components/src/NftDetails/index.tsx
+++ b/packages/react-components/src/NftDetails/index.tsx
@@ -65,11 +65,6 @@ function NftDetails ({ account }: NftDetailsProps): React.ReactElement<NftDetail
                 src={tokenUrl}
               />
             )}
-            {attributes && attributes.profile === 'Black profiles' && (
-              <a href={getVideoUrl()}
-                rel='noreferrer'
-                target='_blank'>Watch the video</a>
-            )}
           </div>
           <div className='token-info--row--attributes'>
             <div className='token-info--row--attributes--block'>
@@ -168,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>
diff --git a/packages/react-components/src/util/protobufUtils.ts b/packages/react-components/src/util/protobufUtils.ts
index e6244dd..bb0d46d 100644
--- a/packages/react-components/src/util/protobufUtils.ts
+++ b/packages/react-components/src/util/protobufUtils.ts
@@ -113,7 +113,7 @@ 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[];
@@ -124,7 +124,11 @@ export function deserializeNft (onChainSchema: ProtobufAttributeType, buffer: Ui
             });
           } 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];
         }
       }
     }