[#510] fix file doesnt match to existed hash

IntersectMBO · Mar 22, 2024 · 572a1d4 · 572a1d4
1 parent 4b133e4
commit 572a1d4
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 71 deletions.
diff --git a/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx
@@ -1,17 +1,17 @@
-import { Dispatch, SetStateAction, useCallback } from 'react';
-import { Box } from '@mui/material';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Dispatch, SetStateAction, useEffect } from "react";
+import { Box } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
-import { Button, Spacer, Typography } from '@atoms';
-import { ICONS } from '@consts';
+import { Button, Spacer, Typography } from "@atoms";
+import { ICONS } from "@consts";
 import {
   useCreateGovernanceActionForm,
   useTranslation,
   useScreenDimension,
-} from '@hooks';
-import { Step } from '@molecules';
-import { BgCard, ControlledField } from '@organisms';
-import { URL_REGEX, openInNewTab } from '@utils';
+} from "@hooks";
+import { Step } from "@molecules";
+import { BgCard, ControlledField } from "@organisms";
+import { URL_REGEX, openInNewTab } from "@utils";
 
 type StorageInformationProps = {
   setStep: Dispatch<SetStateAction<number>>;
@@ -25,55 +25,57 @@ export const StorageInformation = ({ setStep }: StorageInformationProps) => {
     createGovernanceAction,
     getValues,
     watch,
+    generateMetadata,
     onClickDownloadJson,
     isLoading,
   } = useCreateGovernanceActionForm(setStep);
   const { screenWidth } = useScreenDimension();
 
-  // TODO: change on correct file name
-  const fileName = getValues('governance_action_type');
+  const fileName = getValues("governance_action_type");
 
   // TODO: Change link to correct
-  const openGuideAboutStoringInformation = useCallback(
-    () => openInNewTab('https://sancho.network/'),
-    [],
-  );
+  const openGuideAboutStoringInformation = () =>
+    openInNewTab("https://sancho.network/");
+
+  const isActionButtonDisabled = !watch("storingURL");
 
-  const isActionButtonDisabled = !watch('storingURL');
+  const onClickBack = () => setStep(5);
 
-  const onClickBack = useCallback(() => setStep(5), []);
+  useEffect(() => {
+    generateMetadata();
+  }, []);
 
   return (
     <BgCard
-      actionButtonLabel={t('continue')}
-      backButtonLabel={t('back')}
+      actionButtonLabel={t("continue")}
+      backButtonLabel={t("back")}
       isActionButtonDisabled={isActionButtonDisabled}
       onClickActionButton={createGovernanceAction}
       onClickBackButton={onClickBack}
       isLoadingActionButton={isLoading}
     >
-      <Typography sx={{ textAlign: 'center' }} variant="headline4">
-        {t('createGovernanceAction.storingInformationTitle')}
+      <Typography sx={{ textAlign: "center" }} variant="headline4">
+        {t("createGovernanceAction.storingInformationTitle")}
       </Typography>
       <Button
         endIcon={
           <OpenInNewIcon
             sx={{
-              color: 'primary',
+              color: "primary",
               height: 17,
               width: 17,
             }}
           />
         }
         onClick={openGuideAboutStoringInformation}
         size="extraLarge"
-        sx={{ alignSelf: 'center', width: 'fit-content' }}
+        sx={{ alignSelf: "center", width: "fit-content" }}
         variant="text"
       >
-        {t('createGovernanceAction.storingInformationStep2Link')}
+        {t("createGovernanceAction.storingInformationStep2Link")}
       </Button>
-      <Typography fontWeight={400} sx={{ textAlign: 'center' }} variant="body1">
-        {t('createGovernanceAction.storingInformationDescription')}
+      <Typography fontWeight={400} sx={{ textAlign: "center" }} variant="body1">
+        {t("createGovernanceAction.storingInformationDescription")}
       </Typography>
       <Box sx={{ my: 4 }}>
         <Step
@@ -83,7 +85,7 @@ export const StorageInformation = ({ setStep }: StorageInformationProps) => {
               size="extraLarge"
               startIcon={<img src={ICONS.download} />}
               sx={{
-                width: 'fit-content',
+                width: "fit-content",
                 ml: screenWidth < 1024 ? 0 : 1.75,
                 mt: screenWidth < 1024 ? 1.5 : 0,
               }}
@@ -93,15 +95,15 @@ export const StorageInformation = ({ setStep }: StorageInformationProps) => {
             </Button>
           }
           componentsLayoutStyles={{
-            alignItems: screenWidth < 1024 ? undefined : 'center',
-            flexDirection: screenWidth < 1024 ? 'column' : 'row',
+            alignItems: screenWidth < 1024 ? undefined : "center",
+            flexDirection: screenWidth < 1024 ? "column" : "row",
           }}
-          label={t('createGovernanceAction.storingInformationStep1Label')}
+          label={t("createGovernanceAction.storingInformationStep1Label")}
           stepNumber={1}
         />
         <Spacer y={6} />
         <Step
-          label={t('createGovernanceAction.storingInformationStep2Label')}
+          label={t("createGovernanceAction.storingInformationStep2Label")}
           stepNumber={2}
         />
         <Spacer y={6} />
@@ -112,23 +114,23 @@ export const StorageInformation = ({ setStep }: StorageInformationProps) => {
               name="storingURL"
               layoutStyles={{ mt: 1.5 }}
               placeholder={t(
-                'createGovernanceAction.storingInformationURLPlaceholder',
+                "createGovernanceAction.storingInformationURLPlaceholder",
               )}
               rules={{
                 required: {
                   value: true,
                   message: t(
-                    'createGovernanceAction.fields.validations.required',
+                    "createGovernanceAction.fields.validations.required",
                   ),
                 },
                 pattern: {
                   value: URL_REGEX,
-                  message: t('createGovernanceAction.fields.validations.url'),
+                  message: t("createGovernanceAction.fields.validations.url"),
                 },
               }}
             />
           }
-          label={t('createGovernanceAction.storingInformationStep3Label')}
+          label={t("createGovernanceAction.storingInformationStep3Label")}
           stepNumber={3}
         />
       </Box>

diff --git a/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx
@@ -20,19 +20,13 @@ export const StoreDataInfo = ({ setStep }: StoreDataInfoProps) => {
   const { isMobile } = useScreenDimension();
 
   // TODO: change link when available
-  const openLink = () => {
-    openInNewTab("https://docs.sanchogov.tools");
-  };
+  const openLink = () => openInNewTab("https://docs.sanchogov.tools");
 
   const isContinueDisabled = !watch("storeData");
 
-  const onClickContinue = () => {
-    setStep(6);
-  };
+  const onClickContinue = () => setStep(6);
 
-  const onClickBack = () => {
-    setStep(4);
-  };
+  const onClickBack = () => setStep(4);
 
   return (
     <BgCard

diff --git a/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts b/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts
@@ -1,11 +1,10 @@
-import {
-  Dispatch, SetStateAction, useCallback, useState,
-} from "react";
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useFormContext } from "react-hook-form";
-import * as blake from "blakejs";
-import * as Sentry from "@sentry/react";
+import { blake2bHex } from "blakejs";
+import { captureException } from "@sentry/react";
 import { useTranslation } from "react-i18next";
+import { NodeObject } from "jsonld";
 
 import {
   CIP_100,
@@ -34,11 +33,12 @@ export type CreateGovernanceActionValues = {
   governance_action_type?: GovernanceActionType;
 } & Partial<Record<keyof GovernanceActionFieldSchemas, string>>;
 
-export const defaulCreateGovernanceActionValues: CreateGovernanceActionValues = {
-  links: [{ link: "" }],
-  storeData: false,
-  storingURL: "",
-};
+export const defaulCreateGovernanceActionValues: CreateGovernanceActionValues =
+  {
+    links: [{ link: "" }],
+    storeData: false,
+    storingURL: "",
+  };
 
 export const useCreateGovernanceActionForm = (
   setStep?: Dispatch<SetStateAction<number>>,
@@ -51,6 +51,7 @@ export const useCreateGovernanceActionForm = (
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [hash, setHash] = useState<string | null>(null);
+  const [json, setJson] = useState<NodeObject | null>(null);
   const navigate = useNavigate();
   const { openModal, closeModal } = useModal();
   const {
@@ -75,8 +76,11 @@ export const useCreateGovernanceActionForm = (
     closeModal();
   }, []);
 
-  const generateMetadata = async (data: CreateGovernanceActionValues) => {
-    if (!govActionType) throw new Error("Governance action type is not defined");
+  const generateMetadata = useCallback(async () => {
+    const data = getValues();
+
+    if (!govActionType)
+      throw new Error("Governance action type is not defined");
 
     const acceptedKeys = ["title", "motivation", "abstract", "rationale"];
 
@@ -100,20 +104,19 @@ export const useCreateGovernanceActionForm = (
     const jsonld = await generateJsonld(body, GOVERNANCE_ACTION_CONTEXT);
 
     const canonizedJson = await canonizeJSON(jsonld);
-    const hash = blake.blake2bHex(canonizedJson, undefined, 32);
+    const hash = blake2bHex(canonizedJson, undefined, 32);
 
     // That allows to validate metadata hash
     setHash(hash);
+    setJson(jsonld);
 
     return jsonld;
-  };
-
-  const onClickDownloadJson = async () => {
-    const data = getValues();
-    const json = await generateMetadata(data);
+  }, [getValues]);
 
+  const onClickDownloadJson = useCallback(() => {
+    if (!json) return;
     downloadJson(json, govActionType);
-  };
+  }, [govActionType, json]);
 
   const validateHash = useCallback(
     async (storingUrl: string, hash: string | null) => {
@@ -141,7 +144,7 @@ export const useCreateGovernanceActionForm = (
         throw error;
       }
     },
-    [hash, backToForm],
+    [backToForm],
   );
 
   const buildTransaction = useCallback(
@@ -158,8 +161,8 @@ export const useCreateGovernanceActionForm = (
             return await buildNewInfoGovernanceAction(commonGovActionDetails);
           case GovernanceActionType.Treasury:
             if (
-              data.amount === undefined
-              || data.receivingAddress === undefined
+              data.amount === undefined ||
+              data.receivingAddress === undefined
             ) {
               throw new Error(t("errors.invalidTreasuryGovernanceActionType"));
             }
@@ -211,7 +214,7 @@ export const useCreateGovernanceActionForm = (
 
         showSuccessModal();
       } catch (error: any) {
-        Sentry.captureException(error);
+        captureException(error);
         console.error(error);
       } finally {
         setIsLoading(false);
@@ -222,15 +225,16 @@ export const useCreateGovernanceActionForm = (
 
   return {
     control,
+    createGovernanceAction: handleSubmit(onSubmit),
     errors,
+    generateMetadata,
     getValues,
     isLoading,
     isValid,
-    setValue,
-    createGovernanceAction: handleSubmit(onSubmit),
-    watch,
+    onClickDownloadJson,
     register,
     reset,
-    onClickDownloadJson,
+    setValue,
+    watch,
   };
 };