fix blob image parsing

lib/blob/guessDataType.ts

@@ -2,8 +2,11 @@ import filetype from 'magic-bytes.js';
 
 import hexToBytes from 'lib/hexToBytes';
 
+import removeNonSignificantZeroBytes from './removeNonSignificantZeroBytes';
+
 export default function guessDataType(data: string) {
   const bytes = new Uint8Array(hexToBytes(data));
+  const filteredBytes = removeNonSignificantZeroBytes(bytes);
 
-  return filetype(bytes)[0];
+  return filetype(filteredBytes)[0];
 }

lib/blob/removeNonSignificantZeroBytes.ts

@@ -0,0 +1,20 @@
+export default function removeNonSignificantZeroBytes(bytes: Uint8Array) {
+  return shouldRemoveBytes(bytes) ? bytes.filter((item, index) => index % 32) : bytes;
+}
+
+// check if every 0, 32, 64, etc byte is 0 in the provided array
+function shouldRemoveBytes(bytes: Uint8Array) {
+  let result = true;
+
+  for (let index = 0; index < bytes.length; index += 32) {
+    const element = bytes[index];
+    if (element === 0) {
+      continue;
+    } else {
+      result = false;
+      break;
+    }
+  }
+
+  return result;
+}

lib/bytesToBase64.ts

@@ -0,0 +1,10 @@
+export default function bytesToBase64(bytes: Uint8Array) {
+  let binary = '';
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+
+  const base64String = btoa(binary);
+
+  return base64String;
+}

lib/hexToBase64.ts

@@ -1,14 +1,8 @@
+import bytesToBase64 from './bytesToBase64';
 import hexToBytes from './hexToBytes';
 
 export default function hexToBase64(hex: string) {
   const bytes = new Uint8Array(hexToBytes(hex));
 
-  let binary = '';
-  for (const byte of bytes) {
-    binary += String.fromCharCode(byte);
-  }
-
-  const base64String = btoa(binary);
-
-  return base64String;
+  return bytesToBase64(bytes);
 }

ui/blob/BlobData.tsx

@@ -2,6 +2,8 @@ import { Flex, GridItem, Select, Skeleton, Button } from '@chakra-ui/react';
 import React from 'react';
 
 import * as blobUtils from 'lib/blob';
+import removeNonSignificantZeroBytes from 'lib/blob/removeNonSignificantZeroBytes';
+import bytesToBase64 from 'lib/bytesToBase64';
 import downloadBlob from 'lib/downloadBlob';
 import hexToBase64 from 'lib/hexToBase64';
 import hexToBytes from 'lib/hexToBytes';
@@ -49,7 +51,8 @@ const BlobData = ({ data, isLoading, hash }: Props) => {
       switch (format) {
         case 'Image': {
           const bytes = new Uint8Array(hexToBytes(data));
-          return new Blob([ bytes ], { type: guessedType?.mime });
+          const filteredBytes = removeNonSignificantZeroBytes(bytes);
+          return new Blob([ filteredBytes ], { type: guessedType?.mime });
         }
         case 'UTF-8': {
           return new Blob([ hexToUtf8(data) ], { type: guessedType?.mime ?? 'text/plain' });
@@ -74,7 +77,10 @@ const BlobData = ({ data, isLoading, hash }: Props) => {
           return <RawDataSnippet data="Not an image" showCopy={ false } isLoading={ isLoading }/>;
         }
 
-        const base64 = hexToBase64(data);
+        const bytes = new Uint8Array(hexToBytes(data));
+        const filteredBytes = removeNonSignificantZeroBytes(bytes);
+        const base64 = bytesToBase64(filteredBytes);
+
         const imgSrc = `data:${ guessedType.mime };base64,${ base64 }`;
 
         return <BlobDataImage src={ imgSrc }/>;