Merge pull request #1337 from IntersectMBO/fix/console-errors

fix/console-errors
IntersectMBO · Jun 21, 2024 · f4e24da · f4e24da
2 parents 0b29322 + f185f8b
commit f4e24da
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 72 deletions.
diff --git a/govtool/frontend/src/components/atoms/modal/Modal.tsx b/govtool/frontend/src/components/atoms/modal/Modal.tsx
@@ -1,3 +1,4 @@
+import { DialogContent } from "@mui/material";
 import MuiModal from "@mui/material/Modal";
 import type { ComponentProps } from "react";
 
@@ -11,6 +12,6 @@ interface Props {
 
 export const Modal = ({ open, children, handleClose }: Props) => (
   <MuiModal open={open} onClose={handleClose} disableAutoFocus>
-    {children}
+    <DialogContent>{children}</DialogContent>
   </MuiModal>
 );
diff --git a/govtool/frontend/src/components/atoms/modal/ModalWrapper.tsx b/govtool/frontend/src/components/atoms/modal/ModalWrapper.tsx
@@ -3,6 +3,7 @@ import { SxProps, styled } from "@mui/material/styles";
 import { ICONS } from "@consts";
 import { useModal } from "@context";
 import { callAll } from "@utils";
+import { forwardRef } from "react";
 
 interface Props {
   variant?: "modal" | "popup";
@@ -49,27 +50,32 @@ export const CloseButton = styled("img")`
   right: 24px;
 `;
 
-export const ModalWrapper = ({
-  children,
-  onClose,
-  variant = "modal",
-  hideCloseButton = false,
-  dataTestId = "modal",
-  sx,
-}: Props) => {
-  const { closeModal } = useModal();
+export const ModalWrapper = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      onClose,
+      variant = "modal",
+      hideCloseButton = false,
+      dataTestId = "modal",
+      sx,
+    },
+    ref,
+  ) => {
+    const { closeModal } = useModal();
 
-  return (
-    <BaseWrapper variant={variant} data-testid={dataTestId} sx={sx}>
-      {variant !== "popup" && !hideCloseButton && (
-        <CloseButton
-          data-testid="close-modal-button"
-          alt="close"
-          onClick={callAll(closeModal, onClose)}
-          src={ICONS.closeIcon}
-        />
-      )}
-      {children}
-    </BaseWrapper>
-  );
-};
+    return (
+      <BaseWrapper variant={variant} data-testid={dataTestId} sx={sx} ref={ref}>
+        {variant !== "popup" && !hideCloseButton && (
+          <CloseButton
+            data-testid="close-modal-button"
+            alt="close"
+            onClick={callAll(closeModal, onClose)}
+            src={ICONS.closeIcon}
+          />
+        )}
+        {children}
+      </BaseWrapper>
+    );
+  },
+);
diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
@@ -21,7 +21,7 @@ export type LoadingButtonProps = ButtonProps & {
 
 export type TypographyProps = Pick<
   MUITypographyProps,
-  "color" | "lineHeight" | "sx"
+  "color" | "lineHeight" | "sx" | "component"
 > & {
   children?: React.ReactNode;
   fontSize?: number;

diff --git a/govtool/frontend/src/components/molecules/DashboardActionCard.tsx b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
@@ -85,6 +85,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
                 variant="title2"
                 fontWeight={600}
                 sx={{ display: "inline" }}
+                component="span"
               >
                 {` ${t("inProgress")}`}
               </Typography>

diff --git a/govtool/frontend/src/components/molecules/WalletInfoCard.tsx b/govtool/frontend/src/components/molecules/WalletInfoCard.tsx
@@ -16,7 +16,7 @@ export const WalletInfoCard = () => {
     await disconnectWallet();
     navigate(
       pathname.includes("/connected")
-        ? `${pathname.replace("/connected", "")}${hash}`
+        ? `${pathname.replace("/connected", "")}${hash ?? ""}`
         : PATHS.home,
     );
     window.location.reload();

diff --git a/govtool/frontend/src/components/molecules/WalletOption.tsx b/govtool/frontend/src/components/molecules/WalletOption.tsx
@@ -35,9 +35,12 @@ export const WalletOptionButton: FC<WalletOption> = ({
     const result = await enable(name);
     if (result?.stakeKey) {
       navigate(
-        pathToNavigate ?? pathname === "/"
+        // eslint-disable-next-line no-unneeded-ternary
+        pathToNavigate
+          ? pathToNavigate
+          : pathname === "/"
           ? "/dashboard"
-          : `connected${pathname}${hash}`,
+          : `connected${pathname}${hash ?? ""}`,
         { state },
       );
       return;

diff --git a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx
@@ -64,7 +64,9 @@ export const GovernanceActionDetailsCardData = ({
 
   const govActionLinkToShare = `${window.location.protocol}//${
     window.location.hostname
-  }${window.location.port ? `:${window.location.port}` : ""}${pathname}${hash}`;
+  }${window.location.port ? `:${window.location.port}` : ""}${pathname}${
+    hash ?? ""
+  }`;
 
   return (
     <Box

diff --git a/govtool/frontend/src/components/organisms/Modal/ChooseWalletModal.tsx b/govtool/frontend/src/components/organisms/Modal/ChooseWalletModal.tsx
@@ -1,5 +1,5 @@
 import { Box, Link, Typography } from "@mui/material";
-import { useMemo } from "react";
+import { forwardRef, useMemo } from "react";
 
 import { ModalContents, ModalHeader, ModalWrapper } from "@atoms";
 import { useModal } from "@context";
@@ -13,7 +13,7 @@ type ChooseWalletModalState = {
   pathToNavigate?: To;
 };
 
-export const ChooseWalletModal = () => {
+export const ChooseWalletModal = forwardRef<HTMLDivElement>((_, ref) => {
   const { t } = useTranslation();
   const { state } = useModal<ChooseWalletModalState>();
 
@@ -47,7 +47,7 @@ export const ChooseWalletModal = () => {
   }, [window]);
 
   return (
-    <ModalWrapper dataTestId="connect-your-wallet-modal">
+    <ModalWrapper dataTestId="connect-your-wallet-modal" ref={ref}>
       <ModalHeader>{t("wallet.connectYourWallet")}</ModalHeader>
       <ModalContents>
         <Typography
@@ -119,4 +119,4 @@ export const ChooseWalletModal = () => {
       </ModalContents>
     </ModalWrapper>
   );
-};
+});
diff --git a/govtool/frontend/src/components/organisms/Modal/ExternalLinkModal.tsx b/govtool/frontend/src/components/organisms/Modal/ExternalLinkModal.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Box, Button, Typography } from "@mui/material";
 
 import { ModalContents, ModalHeader, ModalWrapper } from "@atoms";
@@ -11,7 +12,7 @@ export interface ExternalLinkModalState {
   externalLink: string;
 }
 
-export const ExternalLinkModal = () => {
+export const ExternalLinkModal = forwardRef<HTMLDivElement>((_, ref) => {
   const { state, closeModal } = useModal<ExternalLinkModalState>();
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
@@ -20,7 +21,7 @@ export const ExternalLinkModal = () => {
   } = theme;
 
   return (
-    <ModalWrapper dataTestId="external-link-modal">
+    <ModalWrapper dataTestId="external-link-modal" ref={ref}>
       <img
         alt="Status icon"
         src={IMAGES.warningYellowImage}
@@ -100,4 +101,4 @@ export const ExternalLinkModal = () => {
       </Box>
     </ModalWrapper>
   );
-};
+});
diff --git a/govtool/frontend/src/components/organisms/Modal/LoadingModal.tsx b/govtool/frontend/src/components/organisms/Modal/LoadingModal.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Typography } from "@mui/material";
 
 import { Loader, ModalContents, ModalHeader, ModalWrapper } from "@atoms";
@@ -10,14 +11,15 @@ export interface LoadingModalState {
   dataTestId: string;
 }
 
-export const LoadingModal = () => {
+export const LoadingModal = forwardRef<HTMLDivElement>((_, ref) => {
   const { state } = useModal<LoadingModalState>();
   const { isMobile } = useScreenDimension();
 
   return (
     <ModalWrapper
       dataTestId={state ? state.dataTestId : "loading-modal"}
       hideCloseButton
+      ref={ref}
     >
       <Loader size={100} />
       <ModalHeader sx={{ marginTop: "34px", px: isMobile ? 0 : 3 }}>
@@ -33,4 +35,4 @@ export const LoadingModal = () => {
       </ModalContents>
     </ModalWrapper>
   );
-};
+});
diff --git a/govtool/frontend/src/components/organisms/Modal/StatusModal.tsx b/govtool/frontend/src/components/organisms/Modal/StatusModal.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Button, Link, Typography } from "@mui/material";
 
 import { ModalContents, ModalHeader, ModalWrapper } from "@atoms";
@@ -22,7 +23,7 @@ export interface StatusModalState {
   dataTestId: string;
 }
 
-export const StatusModal = () => {
+export const StatusModal = forwardRef<HTMLDivElement>((_, ref) => {
   const { state, closeModal } = useModal<StatusModalState>();
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
@@ -34,7 +35,10 @@ export const StatusModal = () => {
   };
 
   return (
-    <ModalWrapper dataTestId={state ? state.dataTestId : "status-modal"}>
+    <ModalWrapper
+      dataTestId={state ? state.dataTestId : "status-modal"}
+      ref={ref}
+    >
       <img
         alt="Status icon"
         src={
@@ -60,6 +64,7 @@ export const StatusModal = () => {
             WebkitBoxOrient: "vertical",
             WebkitLineClamp: 8,
             wordBreak: "break-word",
+            whiteSpace: "pre-line",
           }}
         >
           {state?.message}{" "}
@@ -125,4 +130,4 @@ export const StatusModal = () => {
       )}
     </ModalWrapper>
   );
-};
+});
diff --git a/govtool/frontend/src/components/organisms/Modal/VotingPowerModal.tsx b/govtool/frontend/src/components/organisms/Modal/VotingPowerModal.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Box } from "@mui/material";
 
 import { ModalContents, ModalWrapper, Typography, VotePill } from "@atoms";
@@ -13,7 +14,7 @@ export interface VotingPowerModalState {
   vote?: string;
 }
 
-export const VotingPowerModal = () => {
+export const VotingPowerModal = forwardRef<HTMLDivElement>((_, ref) => {
   const { state } = useModal<VotingPowerModalState>();
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
@@ -28,6 +29,7 @@ export const VotingPowerModal = () => {
     <ModalWrapper
       dataTestId="external-link-modal"
       sx={{ maxWidth: "372px", paddingBottom: 6 }}
+      ref={ref}
     >
       <ModalContents>
         <Box alignItems="center">
@@ -94,4 +96,4 @@ export const VotingPowerModal = () => {
       </ModalContents>
     </ModalWrapper>
   );
-};
+});
diff --git a/govtool/frontend/src/context/pendingTransaction/utils.tsx b/govtool/frontend/src/context/pendingTransaction/utils.tsx
@@ -70,13 +70,13 @@ export const refetchData = async (
       resourceId === AutomatedVotingOptionDelegationId.no_confidence ||
       resourceId === AutomatedVotingOptionDelegationId.abstain
     ) {
-      return data.dRepView;
+      return data?.dRepView;
     }
-    return data.dRepHash;
+    return data?.dRepHash;
   }
   if (type === "registerAsDrep" || type === "retireAsDrep")
-    return data.isRegisteredAsDRep;
+    return data?.isRegisteredAsDRep;
   if (type === "registerAsDirectVoter" || type === "retireAsDirectVoter")
-    return data.isRegisteredAsSoleVoter;
+    return data?.isRegisteredAsSoleVoter;
   return undefined;
 };
diff --git a/govtool/frontend/src/context/wallet.tsx b/govtool/frontend/src/context/wallet.tsx
@@ -217,6 +217,7 @@ const CardanoProvider = (props: Props) => {
     try {
       const raw = await enabledApi.getUsedAddresses();
       const rawFirst = raw[0];
+      if (!rawFirst) return [];
       const usedAddress = Address.from_bytes(
         Buffer.from(rawFirst, "hex"),
       ).to_bech32();
@@ -932,26 +933,17 @@ function useCardano() {
                 status: "info",
                 dataTestId: "info-about-sancho-net-modal",
                 message: (
-                  <p style={{ margin: 0 }}>
-                    {t("system.sanchoNetIsBeta")}
-                    <Link
-                      onClick={() => openInNewTab("https://sancho.network/")}
-                      sx={{ cursor: "pointer" }}
-                    >
-                      {t("system.sanchoNet")}
-                    </Link>
-                    .
-                    <br />
-                    <br />
-                    <Trans
-                      i18nKey="system.testAdaNote"
-                      components={[
-                        <span style={{ fontWeight: 700 }} key="0" />,
-                      ]}
-                    />
-                  </p>
+                  <Trans
+                    i18nKey="system.testnetDescription"
+                    components={[
+                      <Link
+                        onClick={() => openInNewTab("https://sancho.network/")}
+                        sx={{ cursor: "pointer" }}
+                      />,
+                    ]}
+                  />
                 ),
-                title: t("system.toolConnectedToSanchonet"),
+                title: t("system.testnetTitle"),
                 buttonText: t("ok"),
               },
             });

diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
@@ -712,12 +712,9 @@ export const en = {
       retireDirectVoter: "Retire as a Direct Voter",
     },
     system: {
-      sanchoNet: "SanchoNet",
-      sanchoNetIsBeta:
-        "The SanchoNet GovTool is currently in beta and it connects to ",
-      testAdaNote:
-        "Please note, this tool uses ‘Test ada’ <0>NOT real ada</0>. All governance actions and related terms pertain to SanchoNet.",
-      toolConnectedToSanchonet: "This tool is connected to SanchoNet",
+      testnetDescription:
+        "The SanchoNet GovTool is currently in beta and it connects to <0>SanchoNet</0>.\n\n Please note, this tool uses ‘Test ada’ <strong>NOT real ada</strong>. All governance actions and related terms pertain to SanchoNet.",
+      testnetTitle: "This tool is connected to SanchoNet",
     },
     tooltips: {
       delegateTodRep: {