Simplify redirection after closing the modal window

Instead of passing the `closeModal` function, let's just pass the `navigateToOnClose` parameter. The redirection logic will be handled in one place. The`react-router-dom` package has been updated to version `6.26.0` because there was previously a problem with the useNavigate hooks. `useNavigate` caused the component to be re-rendered. This is probably related to this issue - remix-run/react-router#7634

dapp/package.json

@@ -37,7 +37,7 @@
     "react-dom": "^18.2.0",
     "react-number-format": "^5.3.1",
     "react-redux": "^9.1.0",
-    "react-router-dom": "^6.22.0",
+    "react-router-dom": "^6.26.0",
     "viem": "^2.13.8",
     "wagmi": "^2.9.11"
   },

dapp/src/components/ModalRoot/withBaseModal.tsx

@@ -1,7 +1,8 @@
-import React, { ComponentType } from "react"
+import React, { ComponentType, useCallback } from "react"
 import { Modal, ModalContent, ModalOverlay, ModalProps } from "@chakra-ui/react"
 import { BaseModalProps } from "#/types"
 import { useSidebar } from "#/hooks"
+import { useNavigate } from "react-router-dom"
 
 const MODAL_BASE_SIZE = "lg"
 
@@ -10,14 +11,23 @@ function withBaseModal<T extends BaseModalProps>(
   modalProps?: Omit<ModalProps, "isOpen" | "onClose" | "children">,
 ) {
   return function ModalBase(props: T) {
-    const { closeModal, closeOnEsc } = props
+    const { closeModal, closeOnEsc, navigateToOnClose } = props
 
     const { isOpen: isSidebarOpen } = useSidebar()
+    const navigate = useNavigate()
+
+    const handleCloseModal = useCallback(() => {
+      closeModal()
+
+      if (navigateToOnClose) {
+        navigate(navigateToOnClose)
+      }
+    }, [closeModal, navigate, navigateToOnClose])
 
     return (
       <Modal
         isOpen
-        onClose={closeModal}
+        onClose={handleCloseModal}
         scrollBehavior="inside"
         closeOnOverlayClick={false}
         size={MODAL_BASE_SIZE}
@@ -31,7 +41,7 @@ function withBaseModal<T extends BaseModalProps>(
             xl: 0,
           }}
         >
-          <WrappedModalContent {...props} closeModal={closeModal} />
+          <WrappedModalContent {...props} closeModal={handleCloseModal} />
         </ModalContent>
       </Modal>
     )

dapp/src/hooks/useDepositCallToAction.ts

@@ -1,7 +1,6 @@
 import { routerPath } from "#/router/path"
 import { ACTION_FLOW_TYPES, MODAL_TYPES } from "#/types"
 import { useEffect } from "react"
-import { useNavigate } from "react-router-dom"
 import {
   useAllActivitiesCount,
   useHasFetchedActivities,
@@ -15,7 +14,6 @@ function useDepositCallToAction() {
   const hasActivities = activitiesCount > 0
   const { modalType, openModal, closeModal } = useModal()
   const isSignedMessage = useIsSignedMessage()
-  const navigate = useNavigate()
 
   useEffect(() => {
     const shouldOpenDepositModal =
@@ -24,10 +22,7 @@ function useDepositCallToAction() {
     if (shouldOpenDepositModal)
       openModal(MODAL_TYPES.STAKE, {
         type: ACTION_FLOW_TYPES.STAKE,
-        closeModal: () => {
-          closeModal()
-          navigate(routerPath.home)
-        },
+        navigateToOnClose: routerPath.home,
       })
 
     return () => {
@@ -41,7 +36,6 @@ function useDepositCallToAction() {
     isSignedMessage,
     openModal,
     closeModal,
-    navigate,
     modalType,
   ])
 }

dapp/src/store/middleware.ts

@@ -4,9 +4,5 @@ export const middleware = {
   serializableCheck: {
     isSerializable: (value: unknown) =>
       isPlain(value) || typeof value === "bigint",
-    // // Ignore these action types
-    ignoredActions: ["modal/openModal"],
-    // Ignore these field paths in all actions
-    ignoredPaths: ["modal.props.closeModal"],
   },
 }

dapp/src/types/modal.ts

@@ -1,8 +1,11 @@
+import { Pathname } from "#/router/path"
+
 export type ModalProps = Record<string, unknown>
 
 export type BaseModalProps = {
   closeModal: () => void
   closeOnEsc?: boolean
+  navigateToOnClose?: Pathname
 }
 
 export const MODAL_TYPES = {