Merge pull request #672 from IntersectMBO/feat/646-implement-a-loadin…

…g-modal-for-the-validation-of-the-metadata

[#646] feat: implement a loading modal for the metadata validation

CHANGELOG.md

@@ -11,6 +11,7 @@ changes.
 ## [Unreleased]
 
 - Integrate frontend with metadata validation service [Issue 617](https://github.com/IntersectMBO/govtool/issues/617)
+- Implement a loading modal for the validation of the metadata [Issue 646](https://github.com/IntersectMBO/govtool/issues/646)
 
 ### Added
 

govtool/frontend/src/components/atoms/Loader/Loader.css

@@ -0,0 +1,8 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

govtool/frontend/src/components/atoms/Loader/Loader.tsx

@@ -0,0 +1,15 @@
+import { ICONS } from "@/consts";
+import "./Loader.css";
+
+type Props = {
+  size: number;
+};
+export const Loader = ({ size = 100 }: Props) => (
+  <div style={{ width: size, height: size, margin: "0 auto" }}>
+    <img
+      src={ICONS.loaderIcon}
+      style={{ animation: `spin 2s linear infinite` }}
+      alt="loader"
+    />
+  </div>
+);

govtool/frontend/src/components/atoms/Loader/index.ts

@@ -0,0 +1 @@
+export * from "./Loader";

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

@@ -29,5 +29,6 @@ export * from "./Tooltip";
 export * from "./Typography";
 export * from "./VotePill";
 export * from "./VotingPowerChips";
+export * from "./Loader";
 
 export * from "./types";

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

@@ -10,8 +10,9 @@ import {
   useScreenDimension,
 } from "@hooks";
 import { Step } from "@molecules";
-import { BgCard, ControlledField } from "@organisms";
+import { BgCard, ControlledField, LoadingModalState } from "@organisms";
 import { URL_REGEX, openInNewTab } from "@utils";
+import { useModal } from "@context";
 
 type StorageInformationProps = {
   setStep: Dispatch<SetStateAction<number>>;
@@ -29,6 +30,7 @@ export const StorageInformation = ({ setStep }: StorageInformationProps) => {
     onClickDownloadJson,
     isLoading,
   } = useCreateGovernanceActionForm(setStep);
+  const { openModal, closeModal } = useModal<LoadingModalState>();
   const { screenWidth } = useScreenDimension();
 
   const fileName = getValues("governance_action_type");
@@ -45,6 +47,21 @@ export const StorageInformation = ({ setStep }: StorageInformationProps) => {
     generateMetadata();
   }, []);
 
+  useEffect(() => {
+    if (isLoading) {
+      openModal({
+        type: "loadingModal",
+        state: {
+          title: t("createGovernanceAction.modals.loading.title"),
+          message: t("createGovernanceAction.modals.loading.message"),
+          dataTestId: "storing-information-loading",
+        },
+      });
+    } else {
+      closeModal();
+    }
+  }, [isLoading]);
+
   return (
     <BgCard
       actionButtonLabel={t("continue")}

govtool/frontend/src/components/organisms/Modal/LoadingModal.tsx

@@ -0,0 +1,36 @@
+import { Typography } from "@mui/material";
+
+import { Loader, ModalContents, ModalHeader, ModalWrapper } from "@atoms";
+import { useModal } from "@context";
+import { useScreenDimension } from "@/hooks";
+
+export interface LoadingModalState {
+  message: React.ReactNode;
+  title: string;
+  dataTestId: string;
+}
+
+export const LoadingModal = () => {
+  const { state } = useModal<LoadingModalState>();
+  const { isMobile } = useScreenDimension();
+
+  return (
+    <ModalWrapper
+      dataTestId={state ? state.dataTestId : "loading-modal"}
+      hideCloseButton
+    >
+      <Loader size={100} />
+      <ModalHeader sx={{ marginTop: "34px", px: isMobile ? 0 : 3 }}>
+        {state?.title}
+      </ModalHeader>
+      <ModalContents>
+        <Typography
+          textAlign="center"
+          sx={{ fontSize: "16px", fontWeight: "400" }}
+        >
+          {state?.message}{" "}
+        </Typography>
+      </ModalContents>
+    </ModalWrapper>
+  );
+};

govtool/frontend/src/components/organisms/StatusModal.tsx → govtool/frontend/src/components/organisms/Modal/StatusModal.tsx

@@ -3,8 +3,8 @@ import { Button, Link, Typography } from "@mui/material";
 import { ModalContents, ModalHeader, ModalWrapper } from "@atoms";
 import { ICONS, IMAGES } from "@consts";
 import { useModal } from "@context";
-import { openInNewTab } from "@/utils";
-import { useScreenDimension, useTranslation } from "@/hooks";
+import { openInNewTab } from "@utils";
+import { useScreenDimension, useTranslation } from "@hooks";
 
 export interface StatusModalState {
   buttonText?: string;

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

@@ -0,0 +1,5 @@
+export * from "./ChooseWalletModal";
+export * from "./ExternalLinkModal";
+export * from "./LoadingModal";
+export * from "./StatusModal";
+export * from "./VotingPowerModal";

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

@@ -1,7 +1,6 @@
 export * from "./AutomatedVotingOptions";
 export * from "./BgCard";
 export * from "./ChooseStakeKeyPanel";
-export * from "./ChooseWalletModal";
 export * from "./ControlledField";
 export * from "./CreateGovernanceActionSteps";
 export * from "./DashboardCards";
@@ -17,7 +16,7 @@ export * from "./Drawer";
 export * from "./DrawerMobile";
 export * from "./DRepCard";
 export * from "./EditDRepInfoSteps";
-export * from "./ExternalLinkModal";
+export * from "./Modal";
 export * from "./Footer";
 export * from "./GovernanceActionDetailsCard";
 export * from "./GovernanceActionDetailsCardData";
@@ -30,7 +29,5 @@ export * from "./RegisterAsSoleVoterBoxContent";
 export * from "./RetireAsSoleVoterBox";
 export * from "./RetireAsSoleVoterBoxContent";
 export * from "./Slider";
-export * from "./StatusModal";
 export * from "./TopNav";
 export * from "./VoteContext";
-export * from "./VotingPowerModal";

govtool/frontend/src/consts/icons.ts

@@ -34,4 +34,5 @@ export const ICONS = {
   sortWhiteIcon: "/icons/SortWhite.svg",
   timerIcon: "/icons/Timer.svg",
   warningIcon: "/icons/Warning.svg",
+  loaderIcon: "/icons/Loader.svg",
 };

govtool/frontend/src/context/modal.tsx

@@ -7,6 +7,7 @@ import {
   StatusModal,
   VoteContextModal,
   VotingPowerModal,
+  LoadingModal,
 } from "@organisms";
 import { basicReducer, callAll, BasicReducer } from "@utils";
 
@@ -23,6 +24,7 @@ interface ContextModal {
 
 export type ModalType =
   | "none"
+  | "loadingModal"
   | "chooseWallet"
   | "statusModal"
   | "externalLink"
@@ -33,6 +35,9 @@ const modals: Record<ModalType, ContextModal> = {
   none: {
     component: null,
   },
+  loadingModal: {
+    component: <LoadingModal />,
+  },
   chooseWallet: {
     component: <ChooseWalletModal />,
   },

govtool/frontend/src/i18n/locales/en.ts

@@ -219,6 +219,11 @@ export const en = {
             "Your Governance Action may take a little time to submit to the chain.",
           title: "Governance Action submitted!",
         },
+        loading: {
+          title: "GovTool Is Checking Your Data",
+          message:
+            "GovTool will read the URL that you supplied and make a check to see if it’s identical with the information that you entered on the form.",
+        },
       },
     },
     delegation: {

govtool/frontend/src/stories/modals/LoadingModal.stories.tsx

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Modal } from "@atoms";
+import { LoadingModal, LoadingModalState } from "@organisms";
+import { callAll } from "@utils";
+import { useModal } from "../../context/modal";
+
+const meta = {
+  title: "Example/Modals/LoadingModal",
+  component: LoadingModal,
+} satisfies Meta<typeof LoadingModal>;
+
+export default meta;
+
+const Template: StoryFn<LoadingModalState> = ({
+  message,
+  title,
+  dataTestId,
+}) => {
+  const { openModal, modal, modals, closeModal } = useModal();
+
+  const open = () => {
+    openModal({
+      type: "loadingModal",
+      state: {
+        title,
+        message,
+        dataTestId,
+      },
+    });
+  };
+
+  useEffect(() => {
+    open();
+  }, [openModal]);
+
+  return (
+    <>
+      <button type="button" onClick={open} style={{ cursor: "pointer" }}>
+        Open Modal
+      </button>
+      <button type="button" onClick={closeModal} style={{ cursor: "pointer" }}>
+        Close Modal
+      </button>
+
+      {modals[modal.type]?.component && (
+        <Modal
+          open={Boolean(modals[modal.type].component)}
+          handleClose={callAll(modals[modal.type]?.onClose, () =>
+            openModal({ type: "none", state: null }),
+          )}
+        >
+          {modals[modal.type].component!}
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  message:
+    "GovTool will read the URL that you supplied and make a check to see if it’s identical with the information that you entered on the form.",
+  title: "GovTool Is Checking Your Data",
+  dataTestId: "loading-modal",
+};