[#509 #752] Wallet transaction errors modals

IntersectMBO · Apr 19, 2024 · 59d191b · 59d191b
1 parent e5f0a6a
commit 59d191b
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 105 deletions.
diff --git a/govtool/frontend/src/components/organisms/RegisterAsDRepSteps/WhatRetirementMeans.tsx b/govtool/frontend/src/components/organisms/RegisterAsDRepSteps/WhatRetirementMeans.tsx
@@ -2,7 +2,12 @@ import { useCallback, useState } from "react";
 
 import { Typography } from "@atoms";
 import { useCardano, useModal } from "@context";
-import { useGetVoterInfo, useScreenDimension, useTranslation } from "@hooks";
+import {
+  useGetVoterInfo,
+  useScreenDimension,
+  useTranslation,
+  useWalletErrorModal,
+} from "@hooks";
 
 import { BgCard } from "..";
 
@@ -22,6 +27,7 @@ export const WhatRetirementMeans = ({
   const [isRetirementLoading, setIsRetirementLoading] =
     useState<boolean>(false);
   const { voter } = useGetVoterInfo();
+  const openWalletErrorModal = useWalletErrorModal();
 
   const onSubmit = () => {
     onClickCancel();
@@ -59,18 +65,11 @@ export const WhatRetirementMeans = ({
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      const errorMessage = error.info ? error.info : error;
-
-      openModal({
-        type: "statusModal",
-        state: {
-          buttonText: t("modals.common.goToDashboard"),
-          dataTestId: "retirement-transaction-error-modal",
-          message: errorMessage,
-          onSubmit,
-          status: "warning",
-          title: t("modals.common.oops"),
-        },
+      openWalletErrorModal({
+        error,
+        onSumbit: onClickCancel,
+        buttonText: t("modals.common.goToDashboard"),
+        dataTestId: "retirement-transaction-error-modal",
       });
     } finally {
       setIsRetirementLoading(false);

diff --git a/govtool/frontend/src/components/organisms/RegisterAsSoleVoterBox.tsx b/govtool/frontend/src/components/organisms/RegisterAsSoleVoterBox.tsx
@@ -6,7 +6,7 @@ import { PATHS } from "@consts";
 import { RegisterAsSoleVoterBoxContent } from "@organisms";
 import { CenteredBoxBottomButtons } from "@molecules";
 import { useCardano, useModal } from "@context";
-import { useGetVoterInfo } from "@/hooks";
+import { useGetVoterInfo, useWalletErrorModal } from "@hooks";
 
 export const RegisterAsSoleVoterBox = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -17,6 +17,7 @@ export const RegisterAsSoleVoterBox = () => {
   const { openModal, closeModal } = useModal();
   const { t } = useTranslation();
   const { voter } = useGetVoterInfo();
+  const openWalletErrorModal = useWalletErrorModal();
 
   const onRegister = useCallback(async () => {
     setIsLoading(true);
@@ -47,22 +48,12 @@ export const RegisterAsSoleVoterBox = () => {
         });
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
-      const errorMessage = e.info ? e.info : e;
-
-      openModal({
-        type: "statusModal",
-        state: {
-          status: "warning",
-          title: t("modals.common.oops"),
-          message: errorMessage,
-          buttonText: t("modals.common.goToDashboard"),
-          onSubmit: () => {
-            navigate(PATHS.dashboard);
-            closeModal();
-          },
-          dataTestId: "registration-transaction-error-modal",
-        },
+    } catch (error: any) {
+      openWalletErrorModal({
+        error,
+        buttonText: t("modals.common.goToDashboard"),
+        onSumbit: () => navigate(PATHS.dashboard),
+        dataTestId: "registration-transaction-error-modal",
       });
     } finally {
       setIsLoading(false);

diff --git a/govtool/frontend/src/components/organisms/RetireAsSoleVoterBox.tsx b/govtool/frontend/src/components/organisms/RetireAsSoleVoterBox.tsx
@@ -6,7 +6,7 @@ import { PATHS } from "@consts";
 import { CenteredBoxBottomButtons } from "@molecules";
 import { useCardano, useModal } from "@context";
 import { RetireAsSoleVoterBoxContent } from "@organisms";
-import { useGetVoterInfo } from "@/hooks";
+import { useGetVoterInfo, useWalletErrorModal } from "@hooks";
 
 export const RetireAsSoleVoterBox = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -20,6 +20,7 @@ export const RetireAsSoleVoterBox = () => {
   const { openModal, closeModal } = useModal();
   const { t } = useTranslation();
   const { voter } = useGetVoterInfo();
+  const openWalletErrorModal = useWalletErrorModal();
 
   const onRetire = useCallback(async () => {
     try {
@@ -56,21 +57,11 @@ export const RetireAsSoleVoterBox = () => {
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      const errorMessage = error.info ? error.info : error;
-
-      openModal({
-        type: "statusModal",
-        state: {
-          status: "warning",
-          message: errorMessage,
-          buttonText: t("modals.common.goToDashboard"),
-          title: t("modals.common.oops"),
-          dataTestId: "retirement-transaction-error-modal",
-          onSubmit: () => {
-            navigate(PATHS.dashboard);
-            closeModal();
-          },
-        },
+      openWalletErrorModal({
+        error,
+        buttonText: t("modals.common.goToDashboard"),
+        onSumbit: () => navigate(PATHS.dashboard),
+        dataTestId: "retirement-transaction-error-modal",
       });
     } finally {
       setIsLoading(false);

diff --git a/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts b/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts
@@ -19,6 +19,7 @@ import {
   generateJsonld,
   generateMetadataBody,
 } from "@utils";
+import { useWalletErrorModal } from "@hooks";
 import { MetadataValidationStatus } from "@models";
 import {
   GovernanceActionFieldSchemas,
@@ -60,6 +61,7 @@ export const useCreateGovernanceActionForm = (
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { openModal, closeModal } = useModal();
+  const openWalletErrorModal = useWalletErrorModal();
 
   // Queries
   const { validateMetadata } = useValidateMutation();
@@ -226,6 +228,10 @@ export const useCreateGovernanceActionForm = (
             },
           });
         } else {
+          openWalletErrorModal({
+            error,
+            dataTestId: "create-governance-action-error-modal",
+          });
           captureException(error);
         }
       } finally {

diff --git a/govtool/frontend/src/hooks/forms/useEditDRepInfoForm.ts b/govtool/frontend/src/hooks/forms/useEditDRepInfoForm.ts
@@ -20,7 +20,7 @@ import {
   generateMetadataBody,
 } from "@utils";
 import { MetadataValidationStatus } from "@models";
-
+import { useWalletErrorModal } from "@hooks";
 import { useValidateMutation } from "../mutations";
 
 export type EditDRepInfoValues = {
@@ -56,6 +56,7 @@ export const useEditDRepInfoForm = (
   const { closeModal, openModal } = useModal();
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const openWalletErrorModal = useWalletErrorModal();
 
   // Queries
   const { validateMetadata } = useValidateMutation();
@@ -174,18 +175,11 @@ export const useEditDRepInfoForm = (
           });
         } else {
           captureException(error);
-          openModal({
-            type: "statusModal",
-            state: {
-              status: "warning",
-              message: error?.replace("Error: ", ""),
-              onSubmit: () => {
-                closeModal();
-                backToDashboard();
-              },
-              title: t("modals.common.oops"),
-              dataTestId: "wallet-connection-error-modal",
-            },
+
+          openWalletErrorModal({
+            error,
+            onSumbit: () => backToDashboard(),
+            dataTestId: "edit-drep-transaction-error-modal",
           });
         }
       } finally {

diff --git a/govtool/frontend/src/hooks/forms/useRegisterAsdRepForm.tsx b/govtool/frontend/src/hooks/forms/useRegisterAsdRepForm.tsx
@@ -22,7 +22,7 @@ import {
   generateMetadataBody,
 } from "@utils";
 
-import { useGetVoterInfo } from "..";
+import { useGetVoterInfo, useWalletErrorModal } from "@hooks";
 import { useValidateMutation } from "../mutations";
 
 export type RegisterAsDRepValues = {
@@ -59,6 +59,7 @@ export const useRegisterAsdRepForm = (
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { closeModal, openModal } = useModal();
+  const openWalletErrorModal = useWalletErrorModal();
 
   // Queries
   const { validateMetadata } = useValidateMutation();
@@ -200,18 +201,11 @@ export const useRegisterAsdRepForm = (
           });
         } else {
           captureException(error);
-          openModal({
-            type: "statusModal",
-            state: {
-              status: "warning",
-              message: error?.replace("Error: ", ""),
-              onSubmit: () => {
-                closeModal();
-                backToDashboard();
-              },
-              title: t("modals.common.oops"),
-              dataTestId: "wallet-connection-error-modal",
-            },
+
+          openWalletErrorModal({
+            error,
+            onSumbit: () => backToDashboard(),
+            dataTestId: "registration-transaction-error-modal",
           });
         }
       } finally {

diff --git a/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx b/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx
@@ -6,6 +6,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 
 import { PATHS } from "@consts";
 import { useCardano, useSnackbar } from "@context";
+import { useWalletErrorModal } from "@hooks";
 
 export interface VoteActionFormValues {
   vote: string;
@@ -34,9 +35,10 @@ export const useVoteActionForm = (
   const [isLoading, setIsLoading] = useState(false);
   const { buildSignSubmitConwayCertTx, buildVote, isPendingTransaction } =
     useCardano();
-  const { addErrorAlert, addSuccessAlert } = useSnackbar();
+  const { addSuccessAlert } = useSnackbar();
   const navigate = useNavigate();
   const { state } = useLocation();
+  const openWalletErrorModal = useWalletErrorModal();
 
   const {
     control,
@@ -84,8 +86,11 @@ export const useVoteActionForm = (
             },
           });
         }
-      } catch (e) {
-        addErrorAlert("Please try again later");
+      } catch (error) {
+        openWalletErrorModal({
+          error,
+          dataTestId: "vote-transaction-error-modal",
+        });
       } finally {
         setIsLoading(false);
       }

diff --git a/govtool/frontend/src/hooks/index.ts b/govtool/frontend/src/hooks/index.ts
@@ -9,6 +9,7 @@ export * from "./useSaveScrollPosition";
 export * from "./useScreenDimension";
 export * from "./useSlider";
 export * from "./useWalletConnectionListener";
+export * from "./useWalletErrorModal";
 
 export * from "./forms";
 export * from "./queries";
diff --git a/govtool/frontend/src/hooks/useDelegateToDrep.ts b/govtool/frontend/src/hooks/useDelegateToDrep.ts
@@ -1,44 +1,48 @@
 import { useCallback, useState } from "react";
 import * as Sentry from "@sentry/react";
-import { useTranslation } from "@hooks";
+import { useTranslation, useWalletErrorModal } from "@hooks";
 import { useCardano, useSnackbar } from "@/context";
 
 export const useDelegateTodRep = () => {
-  const {
-    buildSignSubmitConwayCertTx,
-    buildVoteDelegationCert,
-  } = useCardano();
+  const { buildSignSubmitConwayCertTx, buildVoteDelegationCert } = useCardano();
   const { t } = useTranslation();
   const { addSuccessAlert, addErrorAlert } = useSnackbar();
+  const openWalletErrorModal = useWalletErrorModal();
 
   const [isDelegating, setIsDelegating] = useState(false);
 
-  const delegate = useCallback(async (dRepId: string | undefined) => {
-    if (!dRepId) return;
-    setIsDelegating(true);
-    try {
-      const certBuilder = await buildVoteDelegationCert(dRepId);
-      const result = await buildSignSubmitConwayCertTx({
-        certBuilder,
-        type: "delegate",
-        resourceId: dRepId,
-      });
-      if (result) {
-        addSuccessAlert(t("alerts.delegate.success"));
+  const delegate = useCallback(
+    async (dRepId: string | undefined) => {
+      if (!dRepId) return;
+      setIsDelegating(true);
+      try {
+        const certBuilder = await buildVoteDelegationCert(dRepId);
+        const result = await buildSignSubmitConwayCertTx({
+          certBuilder,
+          type: "delegate",
+          resourceId: dRepId,
+        });
+        if (result) {
+          addSuccessAlert(t("alerts.delegate.success"));
+        }
+      } catch (error) {
+        openWalletErrorModal({
+          error,
+          dataTestId: "delegate-transaction-error-modal",
+        });
+        Sentry.captureException(error);
+      } finally {
+        setIsDelegating(false);
       }
-    } catch (error) {
-      Sentry.captureException(error);
-      addErrorAlert(t("alerts.delegate.failed"));
-    } finally {
-      setIsDelegating(false);
-    }
-  }, [
-    addErrorAlert,
-    addSuccessAlert,
-    buildSignSubmitConwayCertTx,
-    buildVoteDelegationCert,
-    t,
-  ]);
+    },
+    [
+      addErrorAlert,
+      addSuccessAlert,
+      buildSignSubmitConwayCertTx,
+      buildVoteDelegationCert,
+      t,
+    ],
+  );
 
   return {
     delegate,