Merge pull request #551 from IntersectMBO/feat/new-drep-registration-…

…flow

feat/new-drep-registration

CHANGELOG.md

@@ -10,6 +10,7 @@ changes.
 
 ## [Unreleased]
 
+- DRep metadata builder [Issue 497](https://github.com/IntersectMBO/govtool/issues/497)
 - Update Cardano Serialization Lib to 12.0.0-alpha.19 [Issue 521](https://github.com/IntersectMBO/govtool/issues/521)
 - Add generate jsonld function [Issue 451](https://github.com/IntersectMBO/govtool/issues/451)
 - Create GA review subbmision page [Issue 362](https://github.com/IntersectMBO/govtool/issues/362)

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx

@@ -37,7 +37,7 @@ export const StorageInformation = ({ setStep }: StorageInformationProps) => {
   const openGuideAboutStoringInformation = () =>
     openInNewTab("https://sancho.network/");
 
-  const isActionButtonDisabled = !watch("storingURL");
+  const isActionButtonDisabled = !watch("storingURL") || !!errors.storingURL;
 
   const onClickBack = () => setStep(5);
 

govtool/frontend/src/components/organisms/RegisterAsDRepSteps/DRepStorageInformation.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useCallback } from "react";
+import { Dispatch, SetStateAction, useEffect } from "react";
 import { Box } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
@@ -24,24 +24,28 @@ export const DRepStorageInformation = ({
   const {
     control,
     errors,
+    generateMetadata,
+    getValues,
     isRegistrationAsDRepLoading,
+    onClickDownloadJson,
     registerAsDrep,
     watch,
   } = useRegisterAsdRepForm();
   const { screenWidth } = useScreenDimension();
 
-  // TODO: change on correct file name
-  const fileName = "fileName";
+  const fileName = getValues("dRepName");
 
   // TODO: Change link to correct
-  const openGuideAboutStoringInformation = useCallback(
-    () => openInNewTab("https://sancho.network/"),
-    [],
-  );
+  const openGuideAboutStoringInformation = () =>
+    openInNewTab("https://sancho.network/");
+
+  const isActionButtonDisabled = !watch("storingURL") || !!errors.storingURL;
 
-  const isActionButtonDisabled = !watch("storingURL");
+  const onClickBack = () => setStep(3);
 
-  const onClickBack = useCallback(() => setStep(3), []);
+  useEffect(() => {
+    generateMetadata();
+  }, []);
 
   return (
     <BgCard
@@ -79,8 +83,7 @@ export const DRepStorageInformation = ({
         <Step
           component={
             <Button
-              // TODO: add function onClickDownloadJson
-              // onClick={onClickDownloadJson}
+              onClick={onClickDownloadJson}
               size="extraLarge"
               startIcon={<img alt="download" src={ICONS.download} />}
               sx={{

govtool/frontend/src/components/organisms/RegisterAsDRepSteps/DRepStoreDataInfo.tsx

@@ -18,13 +18,10 @@ export const DRepStoreDataInfo = ({
 }) => {
   const { t } = useTranslation();
   const { isMobile } = useScreenDimension();
-  const { control, errors, isRegistrationAsDRepLoading, resetField, watch } =
+  const { control, errors, isRegistrationAsDRepLoading, watch } =
     useRegisterAsdRepForm();
 
-  const onClickBackButton = () => {
-    setStep(2);
-    resetField("storeData");
-  };
+  const onClickBackButton = () => setStep(2);
 
   const isContinueDisabled = !watch("storeData");
 

govtool/frontend/src/components/organisms/RegisterAsDRepSteps/RegisterAsDRepForm.tsx

@@ -4,17 +4,16 @@ import { Box } from "@mui/material";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 
 import { Button, InfoText, Spacer, Typography } from "@atoms";
+import { Placeholders, Rules } from "@consts";
 import {
   useRegisterAsdRepForm,
   useScreenDimension,
   useTranslation,
 } from "@hooks";
-import { URL_REGEX } from "@utils";
 
 import { BgCard, ControlledField } from "..";
-import { Placeholders } from "@/consts";
 
-const MAX_NUMBER_OF_LINKS = 8;
+const MAX_NUMBER_OF_LINKS = 7;
 
 export const RegisterAsDRepForm = ({
   setStep,
@@ -23,7 +22,7 @@ export const RegisterAsDRepForm = ({
 }) => {
   const { t } = useTranslation();
   const { isMobile } = useScreenDimension();
-  const { control, errors, register, watch } = useRegisterAsdRepForm();
+  const { control, errors, isError, register, watch } = useRegisterAsdRepForm();
   const {
     append,
     fields: links,
@@ -41,7 +40,7 @@ export const RegisterAsDRepForm = ({
 
   const removeLink = useCallback((index: number) => remove(index), [remove]);
 
-  const isContinueButtonDisabled = !watch("dRepName");
+  const isContinueButtonDisabled = !watch("dRepName") || isError;
 
   const renderLinks = useCallback(
     () =>
@@ -65,15 +64,10 @@ export const RegisterAsDRepForm = ({
           layoutStyles={{ mb: 3 }}
           placeholder={Placeholders.LINK}
           name={`links.${index}.link`}
-          rules={{
-            pattern: {
-              value: URL_REGEX,
-              message: t("createGovernanceAction.fields.validations.url"),
-            },
-          }}
+          rules={Rules.LINK}
         />
       )),
-    [links],
+    [errors, links],
   );
 
   return (
@@ -98,6 +92,7 @@ export const RegisterAsDRepForm = ({
         helpfulText={t("forms.registerAsDRep.dRepNameHelpfulText")}
         label={t("forms.registerAsDRep.dRepName")}
         name="dRepName"
+        rules={Rules.DREP_NAME}
         placeholder={t("forms.registerAsDRep.dRepNamePlaceholder")}
       />
       <Spacer y={isMobile ? 5 : 6} />
@@ -115,6 +110,7 @@ export const RegisterAsDRepForm = ({
         label={t("forms.registerAsDRep.email")}
         name="email"
         placeholder={t("forms.registerAsDRep.emailPlaceholder")}
+        rules={Rules.EMAIL}
       />
       <Spacer y={3} />
       <ControlledField.TextArea
@@ -123,6 +119,7 @@ export const RegisterAsDRepForm = ({
         name="bio"
         placeholder={t("forms.registerAsDRep.bioPlaceholder")}
         helpfulText={t("forms.registerAsDRep.bioHelpfulText")}
+        rules={Rules.BIO}
       />
       <Spacer y={4} />
       <p
@@ -136,7 +133,9 @@ export const RegisterAsDRepForm = ({
       >
         {t("registration.linksDescription")}
         <span style={{ fontSize: 16, fontWeight: 400 }}>
-          {t("registration.maximumLinks")}
+          {t("registration.maximumLinks", {
+            numberOfLinks: MAX_NUMBER_OF_LINKS,
+          })}
         </span>
       </p>
       <Spacer y={3} />

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

@@ -0,0 +1,41 @@
+import i18n from "@/i18n";
+import { EMAIL_REGEX, NICKNAME_REGEX, URL_REGEX } from "@/utils";
+
+export const Rules = {
+  BIO: {
+    maxLength: {
+      value: 500,
+      message: i18n.t("registration.fields.validations.maxLength", {
+        maxLength: 500,
+      }),
+    },
+  },
+  DREP_NAME: {
+    required: {
+      value: true,
+      message: i18n.t("registration.fields.validations.required"),
+    },
+    pattern: {
+      value: NICKNAME_REGEX,
+      message: i18n.t("registration.fields.validations.nickname"),
+    },
+    maxLength: {
+      value: 80,
+      message: i18n.t("registration.fields.validations.maxLength", {
+        maxLength: 80,
+      }),
+    },
+  },
+  EMAIL: {
+    pattern: {
+      value: EMAIL_REGEX,
+      message: i18n.t("registration.fields.validations.email"),
+    },
+  },
+  LINK: {
+    pattern: {
+      value: URL_REGEX,
+      message: i18n.t("registration.fields.validations.url"),
+    },
+  },
+};

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

@@ -0,0 +1,2 @@
+export * from "./fields";
+export * from "./jsonContext";

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

@@ -0,0 +1,50 @@
+export const CIP_QQQ =
+  "https://github.com/cardano-foundation/CIPs/blob/master/CIP-QQQ/README.md#";
+
+export const DREP_CONTEXT = {
+  "@language": "en-us",
+  CIP100:
+    "https://github.com/cardano-foundation/CIPs/blob/master/CIP-0100/README.md#",
+  CIPQQQ: CIP_QQQ,
+  hashAlgorithm: "CIP100:hashAlgorithm",
+  body: {
+    "@id": "CIPQQQ:body",
+    "@context": {
+      references: {
+        "@id": "CIPQQQ:references",
+        "@container": "@set" as const,
+        "@context": {
+          GovernanceMetadata: "CIP100:GovernanceMetadataReference",
+          Other: "CIP100:OtherReference",
+          label: "CIP100:reference-label",
+          uri: "CIP100:reference-uri",
+          referenceHash: {
+            "@id": "CIPQQQ:referenceHash",
+            "@context": {
+              hashDigest: "CIPQQQ:hashDigest",
+              hashAlgorithm: "CIP100:hashAlgorithm",
+            },
+          },
+        },
+      },
+      dRepName: "CIPQQQ:dRepName",
+      bio: "CIPQQQ:bio",
+      email: "CIPQQQ:email",
+    },
+  },
+  authors: {
+    "@id": "CIP100:authors",
+    "@container": "@set" as const,
+    "@context": {
+      name: "http://xmlns.com/foaf/0.1/name",
+      witness: {
+        "@id": "CIP100:witness",
+        "@context": {
+          witnessAlgorithm: "CIP100:witnessAlgorithm",
+          publicKey: "CIP100:publicKey",
+          signature: "CIP100:signature",
+        },
+      },
+    },
+  },
+};

govtool/frontend/src/consts/externalDataModalConfig.ts

@@ -0,0 +1,41 @@
+import { ModalState } from "@/context";
+import I18n from "@/i18n";
+
+export enum MetadataHashValidationErrors {
+  INVALID_URL = "Invalid URL",
+  INVALID_JSON = "Invalid JSON",
+  INVALID_HASH = "Invalid hash",
+  FETCH_ERROR = "Error fetching data",
+}
+
+const externalDataDoesntMatchModal = {
+  status: "warning",
+  title: I18n.t("modals.externalDataDoesntMatch.title"),
+  message: I18n.t("modals.externalDataDoesntMatch.message"),
+  buttonText: I18n.t("modals.externalDataDoesntMatch.buttonText"),
+  cancelText: I18n.t("modals.externalDataDoesntMatch.cancelRegistrationText"),
+  feedbackText: I18n.t("modals.externalDataDoesntMatch.feedbackText"),
+} as const;
+
+const urlCannotBeFound = {
+  status: "warning",
+  title: I18n.t("modals.urlCannotBeFound.title"),
+  message: I18n.t("modals.urlCannotBeFound.message"),
+  link: "https://docs.sanchogov.tools",
+  linkText: I18n.t("modals.urlCannotBeFound.linkText"),
+  buttonText: I18n.t("modals.urlCannotBeFound.buttonText"),
+  cancelText: I18n.t("modals.urlCannotBeFound.cancelRegistrationText"),
+  feedbackText: I18n.t("modals.urlCannotBeFound.feedbackText"),
+};
+
+export const storageInformationErrorModals: Record<
+  MetadataHashValidationErrors,
+  ModalState<
+    typeof externalDataDoesntMatchModal | typeof urlCannotBeFound
+  >["state"]
+> = {
+  [MetadataHashValidationErrors.INVALID_URL]: urlCannotBeFound,
+  [MetadataHashValidationErrors.FETCH_ERROR]: urlCannotBeFound,
+  [MetadataHashValidationErrors.INVALID_JSON]: externalDataDoesntMatchModal,
+  [MetadataHashValidationErrors.INVALID_HASH]: externalDataDoesntMatchModal,
+};

govtool/frontend/src/consts/governanceAction/index.ts

@@ -1,5 +1,3 @@
 export * from "./fields";
 export * from "./filters";
 export * from "./sorting";
-export * from "./modalConfig";
-export * from "./metadataHashValidationErrors";

govtool/frontend/src/consts/index.ts

@@ -1,4 +1,6 @@
+export * from "./externalDataModalConfig";
 export * from "./colors";
+export * from "./dRepActions";
 export * from "./governanceAction";
 export * from "./icons";
 export * from "./images";

govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts

@@ -135,7 +135,7 @@ export const useCreateGovernanceActionForm = (
             type: "statusModal",
             state: {
               ...storageInformationErrorModals[
-              error.message as MetadataHashValidationErrors
+                error.message as MetadataHashValidationErrors
               ],
               onSubmit: backToForm,
               onCancel: backToDashboard,