Merge pull request #3413 from IntersectMBO/fix/3246-usersnap-im-unable-to-download-the-file-jsonid-the-button-is-not-working

fix(#3246): missing image sha generation validation

Author: MSzalowski

CHANGELOG.md

@@ -15,10 +15,13 @@ changes.
 - Add Proposal discussion context that manages username [Issue 3341](https://github.com/IntersectMBO/govtool/issues/3341)
 - Add epochParams and ada holder balance to Proposal Discussion Pillar [Issue 2243](https://github.com/IntersectMBO/govtool/issues/2243)
 
+- Add uncontrolled image input to improve performance of large base64 encoded image strings
+
 ### Fixed
 
 - Fix scroll on a drawer on smaller resolution
 - Fix incorrect routing on connecting wallet on budget discussion page
+- Fix missing validation on failed image sha generation [Issue 3246](https://github.com/IntersectMBO/govtool/issues/3246)
 
 ### Changed
 

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

@@ -14,7 +14,7 @@ import { Rules } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { DRepDataFormValues } from "@/types/dRep";
 
-import { ControlledField } from "../organisms";
+import { ControlledField, UncontrolledImageInput } from "../organisms";
 
 const MAX_NUMBER_OF_LINKS = 7;
 
@@ -106,9 +106,9 @@ export const DRepDataForm = ({ control, errors, register, watch }: Props) => {
             title={t("forms.dRepData.image")}
             subtitle={t("forms.dRepData.imageHelpfulText")}
           />
-          <ControlledField.Input
-            {...{ control, errors }}
+          <UncontrolledImageInput
             data-testid="image-input"
+            control={control}
             name="image"
             rules={Rules.IMAGE_URL}
           />

govtool/frontend/src/components/organisms/ControlledField/Input.tsx

@@ -8,7 +8,6 @@ import { ControlledInputProps, RenderInputProps } from "./types";
 export const Input = forwardRef<HTMLInputElement, ControlledInputProps>(
   ({ control, name, errors, rules, ...props }, ref) => {
     const errorMessage = get(errors, name)?.message as string;
-
     const renderInput = useCallback(
       ({ field }: RenderInputProps) => (
         <Field.Input

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

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useRef } from "react";
+import { useController } from "react-hook-form";
+import { FormErrorMessage } from "../atoms";
+
+type UncontrolledImageInputProps = {
+  name: string;
+  control: any;
+  rules?: any;
+  placeholder?: string;
+  dataTestId?: string;
+};
+
+export const UncontrolledImageInput = ({
+  name,
+  control,
+  rules,
+  placeholder,
+  dataTestId,
+}: UncontrolledImageInputProps) => {
+  const {
+    field: { onChange },
+    fieldState,
+  } = useController({
+    name,
+    control,
+    rules,
+  });
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div style={{ width: "100%" }}>
+      <input
+        ref={inputRef}
+        onBlur={() => {
+          const value = inputRef.current?.value;
+          if (value !== undefined) {
+            onChange(value);
+          }
+        }}
+        placeholder={placeholder}
+        data-testid={dataTestId}
+        defaultValue=""
+        style={{
+          width: "100%",
+          fontSize: "inherit",
+          padding: "8px 16px",
+          borderRadius: "50px",
+          height: "50px",
+          border: "1px solid",
+          borderColor: fieldState.error?.message ? "red" : "#6F99FF",
+          backgroundColor: fieldState.error?.message ? "#FAEAEB" : "white",
+          boxSizing: "border-box",
+          margin: 0,
+          display: "block",
+          minWidth: 0,
+          lineHeight: "1.4375em",
+          WebkitTapHighlightColor: "transparent",
+          animationDuration: "10ms",
+          WebkitAnimationDuration: "10ms",
+          animationName: "mui-auto-fill-cancel",
+          WebkitAnimationName: "mui-auto-fill-cancel",
+          outline: "none",
+        }}
+      />
+      {fieldState.error && (
+        <FormErrorMessage
+          dataTestId={`${dataTestId}-error`}
+          errorMessage={fieldState.error.message}
+        />
+      )}
+    </div>
+  );
+};

govtool/frontend/src/components/organisms/index.ts

@@ -2,6 +2,8 @@ export * from "./AutomatedVotingOptions";
 export * from "./ChooseStakeKeyPanel";
 export * from "./ControlledField";
 export * from "./CreateGovernanceActionSteps";
+export * from "./DRepCard";
+export * from "./DRepDetailsCard";
 export * from "./DashboardCards";
 export * from "./DashboardCards";
 export * from "./DashboardDrawerMobile";
@@ -11,18 +13,17 @@ export * from "./DashboardGovernanceActionsVotedOn";
 export * from "./DashboardTopNav";
 export * from "./Drawer";
 export * from "./DrawerMobile";
-export * from "./DRepCard";
-export * from "./DRepDetailsCard";
 export * from "./EditDRepInfoSteps";
-export * from "./Modal";
 export * from "./Footer";
 export * from "./GovernanceActionDetailsCard";
 export * from "./GovernanceActionDetailsCardData";
 export * from "./GovernanceActionsToVote";
 export * from "./Hero";
 export * from "./HomeCards";
+export * from "./Modal";
 export * from "./RegisterAsDRepSteps";
 export * from "./Slider";
 export * from "./TopNav";
+export * from "./UncontrolledImageInput";
 export * from "./VoteContext";
 export * from "./WrongRouteInfo";

govtool/frontend/src/consts/dRepActions/fields.ts

@@ -3,6 +3,7 @@ import {
   IMAGE_REGEX,
   URL_REGEX,
   isReceivingAddress,
+  isValidImageUrl,
   isValidURLLength,
 } from "@/utils";
 
@@ -76,5 +77,6 @@ export const Rules = {
       value: IMAGE_REGEX,
       message: i18n.t("registration.fields.validations.image"),
     },
+    validate: isValidImageUrl,
   },
 };

govtool/frontend/src/i18n/locales/en.json

@@ -388,7 +388,8 @@
     "errors": {
       "tooLongUrl": "Url must be less than 128 bytes",
       "mustBeStakeAddress": "It must be reward address in bech32 format",
-      "mustBeReceivingAddress": "Invalid payment address"
+      "mustBeReceivingAddress": "Invalid payment address",
+      "couldNotGenerateImageSha": "Could not generate image sha"
     }
   },
   "proposalDiscussion": {

govtool/frontend/src/utils/generateMetadataBody.ts

@@ -17,47 +17,51 @@ export const generateMetadataBody = async ({
   data,
   acceptedKeys,
 }: MetadataConfig) => {
-  const filteredData = Object.entries(data)
-    .filter(([key, value]) => value && acceptedKeys.includes(key))
-    .map(([key, value]) => [key, value]);
-
-  const references = data?.references
-    ? // uri should not be optional. It is just not yet supported on govtool
-      (data.references as Array<Partial<Reference>>)
-        .filter((link) => link.uri)
-        .map((link) => ({
-          "@type": link["@type"] ?? "Other",
-          label: link.label ?? "Label",
-          uri: link.uri,
-        }))
-    : undefined;
-
-  const isUrl = (url?: unknown) => URL_REGEX.test(url as string);
-  let image;
-
-  if (isUrl(data?.image)) {
-    image = {
-      "@type": "ImageObject",
-      contentUrl: data.image,
-      sha256: await getImageSha(data.image as string),
-    };
-  } else {
-    image = data?.image
-      ? {
-          "@type": "ImageObject",
-          contentUrl: data.image,
-        }
+  try {
+    const filteredData = Object.entries(data)
+      .filter(([key, value]) => value && acceptedKeys.includes(key))
+      .map(([key, value]) => [key, value]);
+
+    const references = data?.references
+      ? // uri should not be optional. It is just not yet supported on govtool
+        (data.references as Array<Partial<Reference>>)
+          .filter((link) => link.uri)
+          .map((link) => ({
+            "@type": link["@type"] ?? "Other",
+            label: link.label ?? "Label",
+            uri: link.uri,
+          }))
       : undefined;
-  }
 
-  const body = Object.fromEntries(filteredData);
-  if (references?.length) {
-    body.references = references;
-  }
+    const isUrl = (url?: unknown) => URL_REGEX.test(url as string);
+    let image;
 
-  if (image) {
-    body.image = image;
-  }
+    if (isUrl(data?.image)) {
+      image = {
+        "@type": "ImageObject",
+        contentUrl: data.image,
+        sha256: await getImageSha(data.image as string),
+      };
+    } else {
+      image = data?.image
+        ? {
+            "@type": "ImageObject",
+            contentUrl: data.image,
+          }
+        : undefined;
+    }
 
-  return body;
+    const body = Object.fromEntries(filteredData);
+    if (references?.length) {
+      body.references = references;
+    }
+
+    if (image) {
+      body.image = image;
+    }
+
+    return body;
+  } catch (error) {
+    console.error({ error });
+  }
 };

govtool/frontend/src/utils/isValidFormat.ts

@@ -5,6 +5,7 @@ import {
 } from "@emurgo/cardano-serialization-lib-asmjs";
 import i18n from "@/i18n";
 import { adaHandleService } from "@/services/AdaHandle";
+import { getImageSha } from "./getImageSha";
 
 export const URL_REGEX =
   /^(?:(?:https?:\/\/)?(?:\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})(?:\/[^\s]*)?)|(?:ipfs:\/\/(?:[a-zA-Z0-9]+(?:\/[a-zA-Z0-9._-]+)*))$|^$/;
@@ -76,3 +77,15 @@ export async function isDRepView(view?: string) {
   }
   return i18n.t("forms.errors.mustBeDRepView");
 }
+
+export async function isValidImageUrl(url: string) {
+  if (!url.length) return false;
+  try {
+    if (URL_REGEX.test(url)) {
+      await getImageSha(url);
+    }
+    return true;
+  } catch (error) {
+    return i18n.t("forms.errors.couldNotGenerateImageSha");
+  }
+}