Merge pull request #208 from oasisprotocol/lw/block-soft-nav

move: Block react-router navigation while withdrawing/depositing

Author: lukaw3d

.changelog/208.bugfix.md

@@ -0,0 +1 @@
+move: Block react-router navigation while withdrawing/depositing

move/package.json

@@ -27,6 +27,7 @@
     "bignumber.js": "^9.1.2",
     "fathom-client": "^3.7.2",
     "react": "^18.2.0",
+    "react-router-dom": "^6.22.2",
     "tweetnacl": "^1.0.3",
     "viem": "^2.23.1",
     "wagmi": "^2.14.11"

move/src/utils/useBlockNavigatingAway.ts

@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useBlocker } from 'react-router-dom'
 
 let globalIsBlocking = false // If useBlockNavigatingAway gets destroyed, load state from this.
 
@@ -10,17 +11,36 @@ const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
 
 export function useBlockNavigatingAway() {
   const [reactiveIsBlocking, setReactiveIsBlocking] = useState(globalIsBlocking)
+  const reactRouterBlocker = useBlocker(() => reactiveIsBlocking) // Blocks soft navigation away
+  // TODO can't have two blockers
+
+  function blockNavigatingAway() {
+    window.addEventListener('beforeunload', beforeUnloadHandler) // Blocks hard navigation away
+    setReactiveIsBlocking(true)
+    globalIsBlocking = true
+  }
+
+  function allowNavigatingAway() {
+    window.removeEventListener('beforeunload', beforeUnloadHandler)
+    setReactiveIsBlocking(false)
+    globalIsBlocking = false
+  }
+
+  useEffect(() => {
+    if (reactRouterBlocker.state === 'blocked') {
+      if (window.confirm('You are navigating away. Progress you made may not be saved.')) {
+        reactRouterBlocker.proceed()
+        allowNavigatingAway()
+      } else {
+        reactRouterBlocker.reset()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reactRouterBlocker.state])
+
   return {
     isBlockingNavigatingAway: reactiveIsBlocking,
-    blockNavigatingAway: () => {
-      window.addEventListener('beforeunload', beforeUnloadHandler)
-      setReactiveIsBlocking(true)
-      globalIsBlocking = true
-    },
-    allowNavigatingAway: () => {
-      window.removeEventListener('beforeunload', beforeUnloadHandler)
-      setReactiveIsBlocking(false)
-      globalIsBlocking = false
-    },
+    blockNavigatingAway,
+    allowNavigatingAway,
   }
 }

pnpm-lock.yaml

@@ -14,7 +14,7 @@ export const withConnectedWallet = (WrappedComponent: FC) => {
 
     useEffect(() => {
       if (isSupportedNetwork && isConnected) {
-        navigate('/stake/dashboard')
+        navigate('/stake/dashboard', { replace: true })
       }
     }, [isSupportedNetwork, isConnected, navigate])