WIP

govtool/frontend/src/components/organisms/ChooseGovernanceActionType.tsx → govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/ChooseGovernanceActionType.tsx

@@ -8,7 +8,7 @@ import {
   useTranslation,
 } from "@hooks";
 
-import { BgCard } from "./BgCard";
+import { BgCard } from "../BgCard";
 
 type ChooseGovernanceActionTypeProps = {
   setStep: Dispatch<SetStateAction<number>>;

govtool/frontend/src/components/organisms/CreateGovernanceActionForm.tsx → govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/CreateGovernanceActionForm.tsx

@@ -7,8 +7,8 @@ import { GOVERNANCE_ACTIONS_FIELDS } from "@consts";
 import { useCreateGovernanceActionForm, useTranslation } from "@hooks";
 import { Field } from "@molecules";
 
-import { BgCard } from "./BgCard";
-import { ControlledField } from "./ControlledField";
+import { BgCard } from "../BgCard";
+import { ControlledField } from "../ControlledField";
 
 const LINK_PLACEHOLDER = "https://website.com/";
 const MAX_NUMBER_OF_LINKS = 8;

govtool/frontend/src/components/organisms/ReviewCreatedGovernanceAction.tsx → govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/ReviewCreatedGovernanceAction.tsx

@@ -12,7 +12,7 @@ import {
 import { LinkWithIcon } from "@molecules";
 import { openInNewTab } from "@utils";
 
-import { BgCard } from "./BgCard";
+import { BgCard } from "../BgCard";
 
 type ReviewCreatedGovernanceActionProps = {
   setStep: Dispatch<SetStateAction<number>>;

govtool/frontend/src/components/organisms/WhatGovernanceActionIsAbout.tsx → govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/WhatGovernanceActionIsAbout.tsx

@@ -9,7 +9,7 @@ import {
   PROTOCOL_PARAMS_KEY,
 } from "@utils";
 
-import { BgCard } from ".";
+import { BgCard } from "..";
 
 type WhatGovernanceActionIsAboutProps = {
   onClickCancel: () => void;

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

@@ -1,2 +1,6 @@
+export * from "./ChooseGovernanceActionType";
+export * from "./CreateGovernanceActionForm";
+export * from "./ReviewCreatedGovernanceAction";
 export * from "./StorageInformation";
 export * from "./StoreDataInfo";
+export * from "./WhatGovernanceActionIsAbout";

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

@@ -1,9 +1,7 @@
 export * from "./BgCard";
-export * from "./ChooseGovernanceActionType";
 export * from "./ChooseStakeKeyPanel";
 export * from "./ChooseWalletModal";
 export * from "./ControlledField";
-export * from "./CreateGovernanceActionForm";
 export * from "./CreateGovernanceActionSteps";
 export * from "./DashboardCards";
 export * from "./DashboardCards";
@@ -29,9 +27,7 @@ export * from "./RegisterAsSoleVoterBox";
 export * from "./RegisterAsSoleVoterBoxContent";
 export * from "./RetireAsSoleVoterBox";
 export * from "./RetireAsSoleVoterBoxContent";
-export * from "./ReviewCreatedGovernanceAction";
 export * from "./Slider";
 export * from "./StatusModal";
 export * from "./TopNav";
 export * from "./VotingPowerModal";
-export * from "./WhatGovernanceActionIsAbout";

govtool/frontend/src/consts/governanceActionTypes.ts

@@ -1,5 +1,49 @@
 export const GOVERNANCE_ACTION_TYPES = ["Info", "Treasury"];
 
+enum GovernanceActionTypes {
+  Info = "Info",
+  Treasury = "Treasury",
+}
+
+// TBD: This is a placeholder
+type GovernanceActionSchema = any;
+
+const GOVERNANCE_ACTION_SCHEMA: Record<
+  GovernanceActionTypes,
+  GovernanceActionSchema
+> = {
+  [GovernanceActionTypes.Info]: {
+    title: "",
+    abstract: "",
+    motivation: "",
+    rationale: "",
+  },
+  [GovernanceActionTypes.Treasury]: {
+    title: "",
+    abstract: "",
+    motivation: "",
+    rationale: "",
+    receiving_address: "",
+    amount: 0,
+  },
+};
+
+enum GovernanceActionField {
+  Input = "input",
+  TextArea = "textarea",
+}
+
+// Should be just Yup schema
+type GovernanceActionValidationSchema = "string" | "number" | "url" | "bech32";
+
+type GovernanceActionFieldDefinition = {
+  // Tuple indicates that it is a set of fields
+  component: GovernanceActionField | [GovernanceActionField];
+  placeholderI18nKey: string;
+  tipI18nKey: string;
+  validationSchema: GovernanceActionValidationSchema;
+};
+
 export const GOVERNANCE_ACTIONS_FIELDS = [
   {
     name: "Info",

govtool/frontend/src/context/governanceActionSubmission.tsx

@@ -0,0 +1,42 @@
+import { PropsWithChildren, createContext, useContext, useMemo } from "react";
+import { useFormContext } from "react-hook-form";
+
+// TODO: provide context specification
+type GovernanceActionContextType = any;
+
+const GovernanceActionContext = createContext<GovernanceActionContextType>(
+  {} as GovernanceActionContextType
+);
+
+function GovernanceActionSubmissionProvider({ children }: PropsWithChildren) {
+  const value = useMemo(() => ({}), []);
+
+  const {
+    control,
+    formState: { errors, isValid },
+    getValues,
+    handleSubmit,
+    setValue,
+    watch,
+    register,
+    reset,
+  } = useFormContext<createGovernanceActionValues>();
+
+  return (
+    <GovernanceActionContext.Provider value={value}>
+      {children}
+    </GovernanceActionContext.Provider>
+  );
+}
+
+function useGovernanceAction() {
+  const context = useContext(GovernanceActionContext);
+  if (context === undefined) {
+    throw new Error(
+      "useGovernanceAction must be used within a GovernanceActionProvider"
+    );
+  }
+  return context;
+}
+
+export { GovernanceActionSubmissionProvider, useGovernanceAction };

govtool/frontend/src/context/index.ts

@@ -0,0 +1,5 @@
+export * from "./contextProviders";
+export * from "./governanceActionSubmission";
+export * from "./modal";
+export * from "./snackbar";
+export * from "./wallet";

govtool/frontend/src/pages/CreateGovernanceAction.tsx

@@ -5,7 +5,7 @@ import { Box } from "@mui/material";
 
 import { Background } from "@atoms";
 import { PATHS } from "@consts";
-import { useModal } from "@context";
+import { useModal, GovernanceActionSubmissionProvider } from "@context";
 import {
   defaulCreateGovernanceActionValues,
   useScreenDimension,
@@ -61,35 +61,37 @@ export const CreateGovernanceAction = () => {
   };
 
   return (
-    <Background isReverted>
-      <Box
-        sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
-      >
-        <DashboardTopNav title={t("createGovernanceAction.title")} />
-        <LinkWithIcon
-          label={t("backToDashboard")}
-          onClick={onClickBackToDashboard}
-          sx={{
-            mb: isMobile ? 0 : 1.5,
-            ml: isMobile ? 2 : 5,
-            mt: isMobile ? 3 : 1.5,
-          }}
-        />
-        <FormProvider {...methods}>
-          {step === 1 && (
-            <WhatGovernanceActionIsAbout
-              onClickCancel={onClickBackToDashboard}
-              setStep={setStep}
-            />
-          )}
-          {step === 2 && <ChooseGovernanceActionType setStep={setStep} />}
-          {step === 3 && <CreateGovernanceActionForm setStep={setStep} />}
-          {step === 4 && <ReviewCreatedGovernanceAction setStep={setStep} />}
-          {step === 5 && <StoreDataInfo setStep={setStep} />}
-          {step === 6 && <StorageInformation setStep={setStep} />}
-        </FormProvider>
-        {isMobile && <Footer />}
-      </Box>
-    </Background>
+    <GovernanceActionSubmissionProvider>
+      <Background isReverted>
+        <Box
+          sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
+        >
+          <DashboardTopNav title={t("createGovernanceAction.title")} />
+          <LinkWithIcon
+            label={t("backToDashboard")}
+            onClick={onClickBackToDashboard}
+            sx={{
+              mb: isMobile ? 0 : 1.5,
+              ml: isMobile ? 2 : 5,
+              mt: isMobile ? 3 : 1.5,
+            }}
+          />
+          <FormProvider {...methods}>
+            {step === 1 && (
+              <WhatGovernanceActionIsAbout
+                onClickCancel={onClickBackToDashboard}
+                setStep={setStep}
+              />
+            )}
+            {step === 2 && <ChooseGovernanceActionType setStep={setStep} />}
+            {step === 3 && <CreateGovernanceActionForm setStep={setStep} />}
+            {step === 4 && <ReviewCreatedGovernanceAction setStep={setStep} />}
+            {step === 5 && <StoreDataInfo setStep={setStep} />}
+            {step === 6 && <StorageInformation setStep={setStep} />}
+          </FormProvider>
+          {isMobile && <Footer />}
+        </Box>
+      </Background>
+    </GovernanceActionSubmissionProvider>
   );
 };