fix/75-multiple-instances-of-the-wallet-opening

govtool/frontend/src/App.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 
-import { ScrollToTop } from "@atoms";
+import { Modal, ScrollToTop } from "@atoms";
 import { PATHS } from "@consts";
-import { useCardano } from "@context";
+import { useCardano, useModal } from "@context";
 import {
   DashboardCards,
   DashboardGovernanceActions,
@@ -23,6 +23,7 @@ import {
   DashboardGovernanceActionsCategory,
 } from "@pages";
 import {
+  callAll,
   getItemFromLocalStorage,
   WALLET_LS_KEY,
   removeItemFromLocalStorage,
@@ -34,6 +35,7 @@ export default function App() {
   const { enable, setDRep, setIsDrepLoading } = useCardano();
   const navigate = useNavigate();
   const { data } = useGetDRepInfo();
+  const { modal, openModal, modals } = useModal();
 
   useWalletConnectionListener();
 
@@ -118,6 +120,20 @@ export default function App() {
         <Route path="*" element={<ErrorPage />} />
         <Route path={PATHS.error} element={<ErrorPage />} />
       </Routes>
+      {modals[modal.type]?.component && (
+        <Modal
+          open={Boolean(modals[modal.type].component)}
+          handleClose={
+            !modals[modal.type].preventDismiss
+              ? callAll(modals[modal.type]?.onClose, () =>
+                  openModal({ type: "none", state: null })
+                )
+              : undefined
+          }
+        >
+          {modals[modal.type]?.component ?? <></>}
+        </Modal>
+      )}
     </>
   );
 }

govtool/frontend/src/components/organisms/DashboardCards.tsx

@@ -73,7 +73,12 @@ export const DashboardCards = () => {
     } finally {
       setIsRetirementLoading(false);
     }
-  }, [buildDRepRetirementCert, buildSignSubmitConwayCertTx]);
+  }, [
+    buildDRepRetirementCert,
+    buildSignSubmitConwayCertTx,
+    isPendingTransaction,
+    openModal,
+  ]);
 
   const delegationDescription = useMemo(() => {
     const correctAdaRepresentation = (

govtool/frontend/src/context/index.tsx

@@ -8,11 +8,11 @@ interface Props {
 
 const ContextProviders = ({ children }: Props) => {
   return (
-    <SnackbarProvider>
-      <CardanoProvider>
-        <ModalProvider>{children}</ModalProvider>
-      </CardanoProvider>
-    </SnackbarProvider>
+    <ModalProvider>
+      <SnackbarProvider>
+        <CardanoProvider>{children}</CardanoProvider>
+      </SnackbarProvider>
+    </ModalProvider>
   );
 };
 

govtool/frontend/src/context/modal.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo, useReducer } from "react";
 
-import { Modal, type MuiModalChildren } from "@atoms";
+import { type MuiModalChildren } from "@atoms";
 import {
   ChooseWalletModal,
   ExternalLinkModal,
@@ -53,7 +53,8 @@ interface ModalState<T> {
 }
 
 interface ModalContext<T> {
-  modal: ContextModal;
+  modal: ModalState<T>;
+  modals: Record<ModalType, ContextModal>;
   state: T | null;
   openModal: (modal: Optional<ModalState<T>, "state">) => void;
   closeModal: () => void;
@@ -74,7 +75,8 @@ function ModalProvider<T>(props: ProviderProps) {
 
   const value = useMemo(
     () => ({
-      modal: modals[modal.type],
+      modals,
+      modal,
       state: modal.state,
       openModal,
       closeModal: callAll(modals[modal.type]?.onClose, () =>
@@ -86,20 +88,6 @@ function ModalProvider<T>(props: ProviderProps) {
 
   return (
     <ModalContext.Provider value={value} {...props}>
-      {modals[modal.type]?.component && (
-        <Modal
-          open={Boolean(modals[modal.type].component)}
-          handleClose={
-            !modals[modal.type].preventDismiss
-              ? callAll(modals[modal.type]?.onClose, () =>
-                  openModal({ type: "none", state: null })
-                )
-              : undefined
-          }
-        >
-          {modals[modal.type]?.component ?? <></>}
-        </Modal>
-      )}
       {props.children}
     </ModalContext.Provider>
   );

govtool/frontend/src/context/wallet.tsx

@@ -66,7 +66,7 @@ import {
   VOTE_TRANSACTION_KEY,
   checkIsMaintenanceOn,
 } from "@utils";
-import { getDRepInfo, getEpochParams, getTransactionStatus } from "@services";
+import { getEpochParams, getTransactionStatus } from "@services";
 import {
   setLimitedDelegationInterval,
   setLimitedRegistrationInterval,
@@ -228,8 +228,10 @@ function CardanoProvider(props: Props) {
     }
     return false;
   }, [
-    registerTransaction?.transactionHash,
+    closeModal,
     delegateTransaction?.transactionHash,
+    openModal,
+    registerTransaction?.transactionHash,
     voteTransaction?.transactionHash,
   ]);