diff --git a/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx index 70ee32308..51a4d2c4d 100644 --- 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>; @@ -25,41 +25,43 @@ 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 ( - - {t('createGovernanceAction.storingInformationTitle')} + + {t("createGovernanceAction.storingInformationTitle")} - - {t('createGovernanceAction.storingInformationDescription')} + + {t("createGovernanceAction.storingInformationDescription")} { size="extraLarge" startIcon={} 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) => { } 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} /> @@ -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} /> diff --git a/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx index a36888444..1e08357d2 100644 --- 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 ( >; -export const defaulCreateGovernanceActionValues: CreateGovernanceActionValues = { - links: [{ link: "" }], - storeData: false, - storingURL: "", -}; +export const defaulCreateGovernanceActionValues: CreateGovernanceActionValues = + { + links: [{ link: "" }], + storeData: false, + storingURL: "", + }; export const useCreateGovernanceActionForm = ( setStep?: Dispatch>, @@ -51,6 +51,7 @@ export const useCreateGovernanceActionForm = ( const { t } = useTranslation(); const [isLoading, setIsLoading] = useState(false); const [hash, setHash] = useState(null); + const [json, setJson] = useState(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, }; };