sancho-v1.0.2-alpha

* GA Submitter - Error handling for inputs * GA Submitter - Submit a Governance Action * GA Submitter - Hash and store metadata * GA Submitter - Create metadata from UI * GA Submitter - Error handling for on-chain inputs * GA Submitter - Warning when navigating back to the dashboard * GA Submitter - Interface for inputting a governance action's on-chain variables * GA Submitter - Review inputs for metadata * GA Submitter - Start the user journey * GA Submitter - Information about the deposit
IntersectMBO · Mar 19, 2024 · 388ab94 · 388ab94
1 parent fa67064
commit 388ab94
Show file tree

Hide file tree

Showing 46 changed files with 1,501 additions and 648 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,13 +9,15 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED`
 changes.
 
 ## [Unreleased]
+
 - 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)
 - Create GA creation form [Issue 360](https://github.com/IntersectMBO/govtool/issues/360)
 - Create TextArea [Issue 110](https://github.com/IntersectMBO/govtool/issues/110)
 - Choose GA type - GA Submiter [Issue 358](https://github.com/IntersectMBO/govtool/issues/358)
-
 - Add on-chain inputs validation [Issue 377](https://github.com/IntersectMBO/govtool/issues/377)
+- Add hash and validation of the metadata [Issue 378](https://github.com/IntersectMBO/govtool/issues/378)
+- Add githubusercontent.com and ipfs.io to content security policy header [Issue 451](https://github.com/IntersectMBO/govtool/issues/451)
 
 ### Added
 
@@ -44,6 +46,7 @@ changes.
 - Fixed CSP settings to allow error reports with Sentry [Issue 291](https://github.com/IntersectMBO/govtool/issues/291).
 
 ### Changed
+
 - `drep/list` now return also `status` and `type` fields. Also it now returns the retired dreps, and you can search for given drep by name using optional query parameter. If the drep name is passed exactly, then you can even find a drep that's sole voter. [Issue 446](https://github.com/IntersectMBO/govtool/issues/446)
 - `drep/list` and `drep/info` endpoints now return additional data such as metadata url and hash, and voting power [Issue 223](https://github.com/IntersectMBO/govtool/issues/223)
 - `drep/info` now does not return sole voters (dreps without metadata) [Issue 317](https://github.com/IntersectMBO/govtool/issues/317)

diff --git a/govtool/frontend/.storybook/preview.tsx b/govtool/frontend/.storybook/preview.tsx
@@ -1,8 +1,12 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
 import { ThemeProvider } from "@emotion/react";
 import { theme } from "../src/theme";
 import { MemoryRouter, Routes, Route } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { I18nextProvider } from "react-i18next";
+import i18n from "../src/i18n";
+import { ModalProvider } from "../src/context/modal";
 
 const queryClient = new QueryClient();
 
@@ -19,26 +23,30 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <MemoryRouter>
-            <Routes>
-              <Route
-                path="/*"
-                element={
-                  <div
-                    style={{
-                      margin: "0px",
-                      padding: "0px",
-                      position: "relative",
-                    }}
-                  >
-                    <Story />
-                  </div>
-                }
-              />
-            </Routes>
-          </MemoryRouter>
-        </ThemeProvider>
+        <ModalProvider>
+          <I18nextProvider i18n={i18n}>
+            <ThemeProvider theme={theme}>
+              <MemoryRouter>
+                <Routes>
+                  <Route
+                    path="/*"
+                    element={
+                      <div
+                        style={{
+                          margin: "0px",
+                          padding: "0px",
+                          position: "relative",
+                        }}
+                      >
+                        <Story />
+                      </div>
+                    }
+                  />
+                </Routes>
+              </MemoryRouter>
+            </ThemeProvider>
+          </I18nextProvider>
+        </ModalProvider>
       </QueryClientProvider>
     ),
   ],

diff --git a/govtool/frontend/Makefile b/govtool/frontend/Makefile
@@ -7,7 +7,7 @@ endif
 .DEFAULT_GOAL := push-frontend
 
 # image tags
-frontend_image_tag := $(shell git log -n 1 --format="%H" -- $(root_dir)/govtool/frontend)
+frontend_image_tag := $(shell git log -n 1 --format="%H" -- $(root_dir)/govtool/frontend)-$(env)
 
 .PHONY: build-frontend
 build-frontend: docker-login

diff --git a/govtool/frontend/package.json b/govtool/frontend/package.json
@@ -22,6 +22,7 @@
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.4",
     "@sentry/react": "^7.77.0",
+    "@types/jsonld": "^1.5.13",
     "@types/react": "^18.2.12",
     "@types/react-gtm-module": "^2.0.2",
     "axios": "^1.4.0",

diff --git a/govtool/frontend/src/components/atoms/Typography.tsx b/govtool/frontend/src/components/atoms/Typography.tsx
@@ -8,7 +8,7 @@ export const Typography = ({
 }: TypographyProps) => {
   const fontSize = {
     headline1: 100,
-    headline2: 50,
+    headline2: 57,
     headline3: 36,
     headline4: 32,
     headline5: 28,
@@ -21,7 +21,7 @@ export const Typography = ({
 
   const fontWeight = {
     headline1: 600,
-    headline2: 600,
+    headline2: 700,
     headline3: 400,
     headline4: 600,
     headline5: 500,

diff --git a/govtool/frontend/src/components/molecules/ActionCard.tsx b/govtool/frontend/src/components/molecules/ActionCard.tsx
@@ -33,7 +33,7 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
     secondButtonLabel,
     title,
   } = props;
-  const { isMobile, screenWidth } = useScreenDimension();
+  const { screenWidth } = useScreenDimension();
 
   const {
     palette: { boxShadow2 },
@@ -52,23 +52,14 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
     >
       <Box display="flex" flexDirection="column" flex={1}>
         {imageURL ? (
-          <img
-            src={imageURL}
-            width={imageWidth}
-            height={imageHeight}
-            style={{
-              alignSelf: screenWidth < 640 ? "center" : "start",
-            }}
-          />
+          <img height={imageHeight} src={imageURL} width={imageWidth} />
         ) : null}
         {title ? (
           <Typography
-            fontWeight={isMobile ? 600 : 500}
             sx={{
-              mt: screenWidth < 640 ? 4 : 2.5,
-              textAlign: screenWidth < 640 ? "center" : "left",
+              mt: 2.5,
             }}
-            variant={isMobile ? "title2" : "headline5"}
+            variant={"headline5"}
           >
             {title}
           </Typography>
@@ -79,9 +70,8 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
             sx={{
               mb: 4.25,
               mt: 1.75,
-              textAlign: screenWidth < 640 ? "center" : "left",
             }}
-            variant={isMobile ? "body2" : "body1"}
+            variant={"body1"}
           >
             {description}
           </Typography>
@@ -103,11 +93,11 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
           data-testid={dataTestIdSecondButton}
           onClick={secondButtonAction}
           sx={{
-            visibility: secondButtonLabel ? "visible" : "hidden",
+            display: !secondButtonLabel && screenWidth < 768 ? "none" : "block",
             ml: screenWidth < 640 ? 0 : 2,
             mt: screenWidth < 640 ? 2 : 0,
+            visibility: secondButtonLabel ? "visible" : "hidden",
             width: screenWidth < 640 ? "100%" : "auto",
-            display: !secondButtonLabel && screenWidth < 768 ? "none" : "block",
           }}
           variant="outlined"
         >

diff --git a/...ntend/src/components/organisms/CreateGovernanceActionSteps/CreateGovernanceActionForm.tsx b/...ntend/src/components/organisms/CreateGovernanceActionSteps/CreateGovernanceActionForm.tsx
@@ -6,11 +6,11 @@ import { Button, InfoText, Spacer, Typography } from "@atoms";
 import { GOVERNANCE_ACTION_FIELDS } from "@consts";
 import { useCreateGovernanceActionForm, useTranslation } from "@hooks";
 import { Field } from "@molecules";
+import { URL_REGEX } from "@/utils";
+import { GovernanceActionField } from "@/types/governanceAction";
 
 import { BgCard } from "../BgCard";
 import { ControlledField } from "../ControlledField";
-import { GovernanceActionField } from "@/types/governanceAction";
-import { URL_REGEX } from "@/utils";
 
 const LINK_PLACEHOLDER = "https://website.com/";
 const MAX_NUMBER_OF_LINKS = 8;
@@ -117,10 +117,6 @@ export const CreateGovernanceActionForm = ({
           placeholder={LINK_PLACEHOLDER}
           name={`links.${index}.link`}
           rules={{
-            required: {
-              value: true,
-              message: t("createGovernanceAction.fields.validations.required"),
-            },
             pattern: {
               value: URL_REGEX,
               message: t("createGovernanceAction.fields.validations.url"),

diff --git a/...nd/src/components/organisms/CreateGovernanceActionSteps/ReviewCreatedGovernanceAction.tsx b/...nd/src/components/organisms/CreateGovernanceActionSteps/ReviewCreatedGovernanceAction.tsx
@@ -53,11 +53,14 @@ export const ReviewCreatedGovernanceAction = ({
           key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");
 
         return (
-          <Box sx={{ mb: 5 }}>
+          <Box sx={{ mb: 5, width: "100%" }}>
             <Typography color="neutralGray" fontWeight={400} variant="body2">
               {label}
             </Typography>
-            <Typography sx={{ mt: 0.5 }} variant="body2">
+            <Typography
+              sx={{ mt: 0.5, wordBreak: "break-word" }}
+              variant="body2"
+            >
               {value as string}
             </Typography>
           </Box>

diff --git a/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useCallback, useState } from "react";
+import { Dispatch, SetStateAction, useCallback } from "react";
 import { Box } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
@@ -7,7 +7,7 @@ import { ICONS } from "@consts";
 import { useCreateGovernanceActionForm, useTranslation } from "@hooks";
 import { Step } from "@molecules";
 import { BgCard, ControlledField } from "@organisms";
-import { URL_REGEX, downloadJson, openInNewTab } from "@utils";
+import { URL_REGEX, openInNewTab } from "@utils";
 
 type StorageInformationProps = {
   setStep: Dispatch<SetStateAction<number>>;
@@ -19,11 +19,11 @@ export const StorageInformation = ({ setStep }: StorageInformationProps) => {
     control,
     errors,
     createGovernanceAction,
-    generateJsonBody,
     getValues,
     watch,
-  } = useCreateGovernanceActionForm();
-  const [isJsonDownloaded, setIsJsonDownloaded] = useState<boolean>(false);
+    onClickDownloadJson,
+    isLoading,
+  } = useCreateGovernanceActionForm(setStep);
 
   // TODO: change on correct file name
   const fileName = getValues("governance_action_type");
@@ -34,24 +34,18 @@ export const StorageInformation = ({ setStep }: StorageInformationProps) => {
     []
   );
 
-  const isActionButtonDisabled = !watch("storingURL") || !isJsonDownloaded;
+  const isActionButtonDisabled = !watch("storingURL");
 
   const onClickBack = useCallback(() => setStep(5), []);
 
-  const onClickDownloadJson = async () => {
-    const data = getValues();
-    const jsonBody = await generateJsonBody(data);
-    downloadJson(jsonBody, fileName);
-    setIsJsonDownloaded(true);
-  };
-
   return (
     <BgCard
       actionButtonLabel={t("continue")}
       backButtonLabel={t("back")}
       isActionButtonDisabled={isActionButtonDisabled}
       onClickActionButton={createGovernanceAction}
       onClickBackButton={onClickBack}
+      isLoadingActionButton={isLoading}
     >
       <Typography sx={{ textAlign: "center" }} variant="headline4">
         {t("createGovernanceAction.storingInformationTitle")}

diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -20,19 +20,20 @@ export const DashboardCards = () => {
     buildSignSubmitConwayCertTx,
     delegateTo,
     delegateTransaction,
-    voter,
     dRepID,
     dRepIDBech32,
+    govActionTransaction,
     isDrepLoading,
     isPendingTransaction,
     registerTransaction,
     soleVoterTransaction,
     stakeKey,
+    voter,
   } = useCardano();
   const navigate = useNavigate();
   const { currentDelegation, isCurrentDelegationLoading } =
     useGetAdaHolderCurrentDelegationQuery(stakeKey);
-  const { isMobile, screenWidth } = useScreenDimension();
+  const { screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const [isRetirementLoading, setIsRetirementLoading] =
     useState<boolean>(false);
@@ -185,6 +186,14 @@ export const DashboardCards = () => {
     [isPendingTransaction, navigate]
   );
 
+  const onClickGovernanceActionCardActionButton = useCallback(() => {
+    if (govActionTransaction.transactionHash) {
+      navigate(PATHS.dashboardGovernanceActions);
+      return;
+    }
+    navigate(PATHS.createGovernanceAction);
+  }, [govActionTransaction.transactionHash, navigate]);
+
   const displayedDelegationId = useMemo(() => {
     const restrictedNames = [
       dRepID,
@@ -323,11 +332,12 @@ export const DashboardCards = () => {
         display: "grid",
         gridTemplateColumns:
           screenWidth < 1280
-            ? "1fr"
-            : screenWidth > 1728
-            ? "repeat(3, minmax(300px, 572px))"
-            : "repeat(2, minmax(300px, 572px))",
-        px: isMobile ? 2 : 5,
+            ? "repeat(1, minmax(300px, 530px))"
+            : screenWidth >= 1728
+            ? "repeat(3, minmax(300px, 570px))"
+            : "repeat(2, minmax(300px, 530px))",
+        justifyContent: screenWidth < 1024 ? "center" : "flex-start",
+        px: screenWidth < 640 ? 2 : 5,
         py: 3,
         rowGap: 3,
       }}
@@ -525,16 +535,13 @@ export const DashboardCards = () => {
       <DashboardActionCard
         dataTestidFirstButton="propose-governance-actions-button"
         description={t("dashboard.proposeGovernanceAction.description")}
-        // TODO: add isPendingGovernanceAction to the context
-        // inProgress={isPendingGovernanceAction}
-        firstButtonAction={() => navigate(PATHS.createGovernanceAction)}
+        firstButtonAction={onClickGovernanceActionCardActionButton}
         firstButtonLabel={t(
           `dashboard.proposeGovernanceAction.${
-            // TODO: add isPendingGovernanceAction to the context
-            // isPendingGovernanceAction ? "propose" : "viewGovernanceActions"
-            `propose`
+            govActionTransaction.transactionHash ? "view" : "propose"
           }`
         )}
+        inProgress={!!govActionTransaction.transactionHash}
         secondButtonLabel={t("learnMore")}
         secondButtonAction={() =>
           openInNewTab(

diff --git a/govtool/frontend/src/components/organisms/ExternalLinkModal.tsx b/govtool/frontend/src/components/organisms/ExternalLinkModal.tsx
@@ -42,6 +42,7 @@ export function ExternalLinkModal() {
             marginBottom: "38px",
             color: primaryBlue,
             textDecoration: "underline",
+            wordBreak: "break-word",
           }}
         >
           {state?.externalLink}

diff --git a/govtool/frontend/src/components/organisms/Hero.tsx b/govtool/frontend/src/components/organisms/Hero.tsx
@@ -38,7 +38,7 @@ export const Hero = () => {
         <Typography
           variant={screenWidth < 860 ? "headline2" : "headline1"}
           sx={{ whiteSpace: "pre-line" }}
-          {...(screenWidth < 375 && { fontSize: 45 })}
+          {...(screenWidth < 430 && { fontSize: 50 })}
         >
           {t("hero.headline")}
         </Typography>