feat(#2633): add support for base64 encoded images

Author: MSzalowski

CHANGELOG.md

@@ -12,7 +12,7 @@ changes.
 
 ### Added
 
--
+- Add support for base64 encoded images [Issue 2633](https://github.com/IntersectMBO/govtool/issues/2633)
 
 ### Fixed
 

govtool/frontend/src/components/molecules/DataMissingHeader.tsx

@@ -2,7 +2,10 @@ import { Avatar, Box, SxProps } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { MetadataValidationStatus } from "@models";
-import { getMetadataDataMissingStatusTranslation } from "@/utils";
+import {
+  getBase64ImageDetails,
+  getMetadataDataMissingStatusTranslation,
+} from "@/utils";
 import { ICONS } from "@/consts";
 
 type DataMissingHeaderProps = {
@@ -19,54 +22,62 @@ export const DataMissingHeader = ({
   titleStyle,
   isDRep,
   image,
-}: DataMissingHeaderProps) => (
-  <Box
-    sx={{
-      display: "grid",
-      gridTemplateColumns: "1fr auto",
-      gap: 2,
-      alignItems: "center",
-      mb: 2,
-    }}
-    data-testid="governance-action-details-card-header"
-  >
+}: DataMissingHeaderProps) => {
+  const base64Image = getBase64ImageDetails(image ?? "");
+
+  return (
     <Box
       sx={{
-        flexDirection: {
-          xxs: "column",
-          md: "row",
-        },
-        alignItems: {
-          md: "center",
-        },
-        display: "flex",
+        display: "grid",
+        gridTemplateColumns: "1fr auto",
+        gap: 2,
+        alignItems: "center",
+        mb: 2,
       }}
+      data-testid="governance-action-details-card-header"
     >
-      {isDRep && (
-        <Avatar
-          alt="drep-image"
-          src={image || ICONS.defaultDRepIcon}
-          sx={{ width: 80, height: 80 }}
-          data-testid="drep-image"
-        />
-      )}
-      <Typography
+      <Box
         sx={{
-          ...(isDRep && { ml: { md: 3 } }),
-          ...(isDRep && { mt: { xxs: 2, md: 0 } }),
-          textOverflow: "ellipsis",
-          fontWeight: 600,
-          ...(isDataMissing && { color: "errorRed" }),
-          ...titleStyle,
+          flexDirection: {
+            xxs: "column",
+            md: "row",
+          },
+          alignItems: {
+            md: "center",
+          },
+          display: "flex",
         }}
-        variant="title2"
       >
-        {(isDataMissing &&
-          getMetadataDataMissingStatusTranslation(
-            isDataMissing as MetadataValidationStatus,
-          )) ||
-          title}
-      </Typography>
+        {isDRep && (
+          <Avatar
+            alt="drep-image"
+            src={
+              (base64Image.isValidBase64Image
+                ? `${base64Image.base64Prefix}${image}`
+                : image) || ICONS.defaultDRepIcon
+            }
+            sx={{ width: 80, height: 80 }}
+            data-testid="drep-image"
+          />
+        )}
+        <Typography
+          sx={{
+            ...(isDRep && { ml: { md: 3 } }),
+            ...(isDRep && { mt: { xxs: 2, md: 0 } }),
+            textOverflow: "ellipsis",
+            fontWeight: 600,
+            ...(isDataMissing && { color: "errorRed" }),
+            ...titleStyle,
+          }}
+          variant="title2"
+        >
+          {(isDataMissing &&
+            getMetadataDataMissingStatusTranslation(
+              isDataMissing as MetadataValidationStatus,
+            )) ||
+            title}
+        </Typography>
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};

govtool/frontend/src/components/organisms/DRepCard.tsx

@@ -11,6 +11,7 @@ import {
   correctDRepDirectoryFormat,
   ellipsizeText,
   encodeCIP129Identifier,
+  getBase64ImageDetails,
   getMetadataDataMissingStatusTranslation,
 } from "@utils";
 
@@ -64,6 +65,8 @@ export const DRepCard = ({
     bech32Prefix: isScriptBased ? "drep_script" : "drep",
   });
 
+  const base64Image = getBase64ImageDetails(image ?? "");
+
   return (
     <Card
       {...(isMe && {
@@ -119,7 +122,11 @@ export const DRepCard = ({
             <Box flexDirection="row" minWidth={0} display="flex">
               <Avatar
                 alt="drep-image"
-                src={image || ICONS.defaultDRepIcon}
+                src={
+                  (base64Image.isValidBase64Image
+                    ? `${base64Image.base64Prefix}${image}`
+                    : image) || ICONS.defaultDRepIcon
+                }
                 data-testid="drep-image"
               />
               <Box

govtool/frontend/src/utils/getBase64ImageDetails.ts

@@ -0,0 +1,68 @@
+/**
+ * Checks if a given string is a base64-encoded image or SVG and returns its details.
+ *
+ * @param str - The string to check.
+ * @returns An object with the MIME type, base64 prefix, and validity flag.
+ */
+export function getBase64ImageDetails(str: string): {
+  type: string | null;
+  base64Prefix: string | null;
+  isValidBase64Image: boolean;
+} {
+  if (!str || typeof str !== "string") {
+    return {
+      type: null,
+      base64Prefix: null,
+      isValidBase64Image: false,
+    };
+  }
+
+  try {
+    const decoded = atob(str);
+
+    if (decoded.trim().startsWith("<?xml") || decoded.includes("<svg")) {
+      return {
+        type: "svg+xml",
+        base64Prefix: "data:image/svg+xml;base64,",
+        isValidBase64Image: true,
+      };
+    }
+
+    const magicNumbers = decoded.slice(0, 4);
+    let type: string | null = null;
+
+    switch (magicNumbers) {
+      case "\x89PNG":
+        type = "png";
+        break;
+      case "\xFF\xD8\xFF":
+        type = "jpeg";
+        break;
+      case "GIF8":
+        type = "gif";
+        break;
+      default:
+        type = null;
+    }
+
+    if (type) {
+      return {
+        type,
+        base64Prefix: `data:image/${type};base64,`,
+        isValidBase64Image: true,
+      };
+    }
+  } catch {
+    return {
+      type: null,
+      base64Prefix: null,
+      isValidBase64Image: false,
+    };
+  }
+
+  return {
+    type: null,
+    base64Prefix: null,
+    isValidBase64Image: false,
+  };
+}

govtool/frontend/src/utils/index.ts

@@ -36,3 +36,4 @@ export * from "./setProtocolParameterUpdate";
 export * from "./testIdFromLabel";
 export * from "./uniqBy";
 export * from "./wait";
+export * from "./getBase64ImageDetails";