test: #466, #481, #378, #377, #365, #462, #463, #380, #393, #445

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)

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>
     ),
   ],

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

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",

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,

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"
         >

govtool/frontend/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"),

govtool/frontend/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>

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")}

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(

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}

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>