Merge pull request #155 from oasisprotocol/lw/cancel-on-navigate

lukaw3d · web-flow · commit 4e0992c25f71 · 2025-02-25T23:11:19.000+07:00
move: Cancel long running promises on react-router navigation
diff --git a/.changelog/155.bugfix.md b/.changelog/155.bugfix.md
@@ -0,0 +1 @@
+move: Fix withdrawing/depositing after navigating away and back without reload
diff --git a/move/src/App.tsx b/move/src/App.tsx
@@ -2,8 +2,6 @@ import { ConnectButton } from '@rainbow-me/rainbowkit'
 import classes from './App.module.css'
 import { MoveButton as Button, PrivateKeyHelpModal, VideoModal } from '@oasisprotocol/rose-app-ui/move'
 import { Layout } from './components/Layout'
-import { useDeposit } from './useDeposit'
-import { useWithdraw } from './useWithdraw'
 import { useIsRpcResponding } from './utils/useIsRpcResponding'
 
 import videocam_svg from '@material-design-icons/svg/filled/videocam.svg'
@@ -17,13 +15,16 @@ import { Deposit } from './deposit/Deposit'
 import { useReloadIfAccountSwitched } from './utils/useReloadIfAccountSwitched'
 import { Withdraw } from './withdraw/Withdraw'
 import { Header } from '@oasisprotocol/rose-app-ui/core'
+import { trackEvent } from 'fathom-client'
+import { useGenerateConsensusAccount } from './deposit/useGenerateConsensusAccount'
+import { useGenerateSapphireAccount } from './withdraw/useGenerateSapphireAccount'
 
 export function App() {
   useReloadIfAccountSwitched()
   const isRpcResponding = useIsRpcResponding()
   const sapphireAddress = useAccount().address
-  const deposit = useDeposit()
-  const withdraw = useWithdraw()
+  const deposit = useGenerateConsensusAccount()
+  const withdraw = useGenerateSapphireAccount()
 
   const [isMoveWalkthroughVideoModalOpen, setIsMoveWalkthroughVideoModalOpen] = useState(false)
   const [isPrivateKeyHelpModalOpen, setIsPrivateKeyHelpModalOpen] = useState(false)
@@ -113,7 +114,16 @@ export function App() {
               </div>
               <div className={classes.cardContent}>
                 <p>Easily move your ROSE from a crypto exchange or consensus account to use on Sapphire.</p>
-                <Button onClick={deposit.step2}>Select and sign-in</Button>
+                <Button
+                  onClick={async () => {
+                    const generatedConsensusAccount = await deposit.generateConsensusAccount(sapphireAddress)
+                    if (generatedConsensusAccount.isFresh) {
+                      trackEvent('deposit account created')
+                    }
+                  }}
+                >
+                  Select and sign-in
+                </Button>
               </div>
             </div>
 
@@ -123,7 +133,17 @@ export function App() {
               </div>
               <div className={classes.cardContent}>
                 <p>Move your ROSE from Sapphire back to a crypto exchange or consensus account.</p>
-                <Button onClick={withdraw.step2}>Select and sign-in</Button>
+                <Button
+                  onClick={async () => {
+                    const { generatedConsensusAccount } =
+                      await withdraw.generateSapphireAccount(sapphireAddress)
+                    if (generatedConsensusAccount.isFresh) {
+                      trackEvent('withdrawal account created')
+                    }
+                  }}
+                >
+                  Select and sign-in
+                </Button>
               </div>
             </div>
           </div>
@@ -133,9 +153,14 @@ export function App() {
   }
 
   if (deposit.generatedConsensusAccount) {
-    return <Deposit deposit={deposit} />
+    return <Deposit generatedConsensusAccount={deposit.generatedConsensusAccount} />
   }
-  if (withdraw.generatedConsensusAccount) {
-    return <Withdraw withdraw={withdraw} />
+  if (withdraw.generatedSapphireAccount && withdraw.generatedConsensusAccount) {
+    return (
+      <Withdraw
+        generatedSapphireAccount={withdraw.generatedSapphireAccount}
+        generatedConsensusAccount={withdraw.generatedConsensusAccount}
+      />
+    )
   }
 }
diff --git a/move/src/deposit/Deposit.tsx b/move/src/deposit/Deposit.tsx
@@ -21,17 +21,18 @@ import loader_blocks_svg from '/move/loader_blocks.svg?url'
 import logo_rose_move_svg from '/move/logo_rose_move.svg?url'
 import symbol_check_circle_svg from '/move/symbol_check_circle.svg?url'
 import symbol_warning_svg from '/move/symbol_warning.svg?url'
+import { ConsensusAccount } from './useGenerateConsensusAccount'
 
-export function Deposit(props: { deposit: ReturnType<typeof useDeposit> }) {
-  const { generatedConsensusAccount, transferMore, progress, isBlockingNavigatingAway, isPrevError } =
-    props.deposit // Parent useDeposit
+export function Deposit({ generatedConsensusAccount }: { generatedConsensusAccount: ConsensusAccount }) {
+  const { transferMore, progress, isBlockingNavigatingAway, isPrevError } = useDeposit({
+    generatedConsensusAccount,
+  })
 
   const isError = progress.percentage === undefined
 
   const [isMoveTransferVideoModalOpen, setIsMoveTransferVideoModalOpen] = useState(false)
   const [isCopyPrivateKeyModalOpen, setIsCopyPrivateKeyModalOpen] = useState(false)
 
-  if (!generatedConsensusAccount) throw new Error('<Deposit> used before SIWE')
   return (
     <>
       <Layout
diff --git a/move/src/useDeposit.ts b/move/src/useDeposit.ts
@@ -1,7 +1,7 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useAccount, useBalance } from 'wagmi'
 import { depositToSapphireStep1, depositToSapphireStep2 } from './deposit/depositToSapphire'
-import { ConsensusAccount, useGenerateConsensusAccount } from './deposit/useGenerateConsensusAccount'
+import { ConsensusAccount } from './deposit/useGenerateConsensusAccount'
 import { usePrevious } from './hooks/usePrevious.ts'
 import {
   fromBaseUnitsToTrackEventCents,
@@ -12,34 +12,33 @@ import {
 import { useBlockNavigatingAway } from './utils/useBlockNavigatingAway'
 import { trackEvent } from 'fathom-client'
 import { consensusConfig } from './utils/oasisConfig.ts'
+import { UnmountedAbortError, useUnmountSignal } from './utils/useUnmountSignal'
 
 /** any consensus -> generatedConsensusAccount -> sapphireAddress */
-export function useDeposit() {
+export function useDeposit({ generatedConsensusAccount }: { generatedConsensusAccount: ConsensusAccount }) {
+  const unmountSignal = useUnmountSignal()
   const { isBlockingNavigatingAway, blockNavigatingAway, allowNavigatingAway } = useBlockNavigatingAway()
   const sapphireAddress = useAccount().address
-  const { generatedConsensusAccount, generateConsensusAccount } = useGenerateConsensusAccount()
   const [progress, setProgress] = useState({ percentage: 0 as number | undefined, message: '' })
   const { refetch: updateBalanceInsideConnectButton } = useBalance({ address: sapphireAddress })
   const isPrevError = usePrevious(progress.percentage === undefined)
 
-  // Long running promise, doesn't get canceled if this component is destroyed
-  async function step2() {
-    if (!sapphireAddress) return
-    const generatedConsensusAccount = await generateConsensusAccount(sapphireAddress)
-
-    if (generatedConsensusAccount.isFresh) {
-      trackEvent('deposit account created')
-    }
-
+  // Automatically start listening, and only cancel if unmounted.
+  useEffect(() => {
+    if (!sapphireAddress) throw new Error('useDeposit used before wallet connected')
     blockNavigatingAway() // Start blocking early for the first transfer
-    await step3(generatedConsensusAccount, sapphireAddress)
-  }
+    step3(generatedConsensusAccount, sapphireAddress)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   async function step3(consensusAccount: ConsensusAccount, sapphireAddress: `0x${string}`) {
     // Note: don't use outside state vars. They are outdated.
     try {
+      await new Promise(r => setTimeout(r, 1000)) // Handle React StrictMode: step3 is called by useEffect on mount
+      if (unmountSignal.aborted) throw new UnmountedAbortError()
+
       setProgress({ percentage: 0.05, message: 'Waiting to move your ROSE…' })
-      const amountToDeposit = await waitForConsensusBalance(consensusAccount.address, 0n)
+      const amountToDeposit = await waitForConsensusBalance(consensusAccount.address, 0n, unmountSignal)
 
       trackEvent('deposit flow started', {
         _value: fromBaseUnitsToTrackEventCents(amountToDeposit.raw, consensusConfig.decimals),
@@ -63,7 +62,7 @@ export function useDeposit() {
         sapphireAddress: sapphireAddress,
       })
       setProgress({ percentage: 0.75, message: 'ROSE transfer initiated' })
-      await waitForSapphireBalance(sapphireAddress, preDepositSapphireBalance.raw)
+      await waitForSapphireBalance(sapphireAddress, preDepositSapphireBalance.raw, unmountSignal)
       // TODO: handle probable failure if balance doesn't change after ~10 seconds of depositing
       setProgress({
         percentage: 1.0,
@@ -77,11 +76,14 @@ export function useDeposit() {
       allowNavigatingAway() // Stop blocking unless new transfer comes in
       await updateBalanceInsideConnectButton()
 
+      if (unmountSignal.aborted) throw new UnmountedAbortError()
       await new Promise(r => setTimeout(r, 6000))
       // Stay on "Deposited" screen unless new transfer comes in
-      await waitForConsensusBalance(consensusAccount.address, 0n)
+      await waitForConsensusBalance(consensusAccount.address, 0n, unmountSignal)
+      if (unmountSignal.aborted) throw new UnmountedAbortError()
       if (window.mock) throw 'mock error'
     } catch (err) {
+      if (err instanceof UnmountedAbortError) return // Ignore and stop looping
       console.error(err)
       setProgress({ percentage: undefined, message: `Error. Retrying…` })
       await new Promise(r => setTimeout(r, 6000))
@@ -101,8 +103,6 @@ export function useDeposit() {
 
   return {
     sapphireAddress,
-    generatedConsensusAccount,
-    step2,
     transferMore,
     progress,
     isBlockingNavigatingAway,
diff --git a/move/src/useWithdraw.ts b/move/src/useWithdraw.ts
@@ -9,19 +9,26 @@ import {
 } from './utils/getBalances'
 import { useBlockNavigatingAway } from './utils/useBlockNavigatingAway'
 import { transferToConsensus } from './withdraw/transferToConsensus'
-import { useGenerateSapphireAccount } from './withdraw/useGenerateSapphireAccount'
+import { ConsensusAccount, SapphireAccount } from './withdraw/useGenerateSapphireAccount'
 import { minimalWithdrawableAmount, withdrawToConsensus } from './withdraw/withdrawToConsensus'
 import { trackEvent } from 'fathom-client'
 import { consensusConfig, sapphireConfig } from './utils/oasisConfig.ts'
+import { UnmountedAbortError, useUnmountSignal } from './utils/useUnmountSignal'
 
 /**
  * sapphireAddress -> generatedSapphireAccount -> generatedConsensusAccount -> consensusAddress
  */
-export function useWithdraw() {
+export function useWithdraw({
+  generatedSapphireAccount,
+  generatedConsensusAccount,
+}: {
+  generatedSapphireAccount: SapphireAccount
+  generatedConsensusAccount: ConsensusAccount
+}) {
+  const unmountSignal = useUnmountSignal()
   const { isBlockingNavigatingAway, blockNavigatingAway, allowNavigatingAway } = useBlockNavigatingAway()
   const sapphireAddress = useAccount().address
-  const { generatedSapphireAccount, generatedConsensusAccount, generateSapphireAccount } =
-    useGenerateSapphireAccount()
+
   const [consensusAddress, setConsensusAddress] = useState<`oasis1${string}`>()
   const [progress, setProgress] = useState({ percentage: 0 as number | undefined, message: '' })
   const [isInputMode, setIsInputMode] = useState(true)
@@ -31,15 +38,6 @@ export function useWithdraw() {
   const { sendTransactionAsync } = useSendTransaction()
   const isPrevError = usePrevious(progress.percentage === undefined)
 
-  async function step2() {
-    if (!sapphireAddress) return
-    await generateSapphireAccount(sapphireAddress)
-
-    if (generatedConsensusAccount?.isFresh) {
-      trackEvent('withdrawal account created')
-    }
-  }
-
   async function step3(value: bigint) {
     if (!generatedSapphireAccount) return
 
@@ -53,7 +51,6 @@ export function useWithdraw() {
     })
   }
 
-  // Long running promise, doesn't get canceled if this component is destroyed
   async function step4(consensusAddress: `oasis1${string}`, retryingAfterError: number) {
     // Note: outside state var consensusAddress is outdated. Use param.
     if (!sapphireAddress) return
@@ -67,7 +64,8 @@ export function useWithdraw() {
         setProgress({ percentage: 0.05, message: 'Waiting to move your ROSE…' })
         const availableAmountToWithdraw = await waitForSapphireBalance(
           generatedSapphireAccount.address,
-          minimalWithdrawableAmount
+          minimalWithdrawableAmount,
+          unmountSignal
         )
         setProgress({ percentage: 0.25, message: 'ROSE transfer initiated' })
 
@@ -84,21 +82,26 @@ export function useWithdraw() {
       }
 
       // TODO: handle probable failure if balance doesn't change after ~10 seconds of withdraw
-      const amountToWithdraw2 = await waitForConsensusBalance(generatedConsensusAccount.address, 0n)
+      const amountToWithdraw2 = await waitForConsensusBalance(
+        generatedConsensusAccount.address,
+        0n,
+        unmountSignal
+      )
 
       trackEvent('withdrawal flow started', {
         _value: fromBaseUnitsToTrackEventCents(amountToWithdraw2.raw, consensusConfig.decimals),
       })
 
       const preWithdrawConsensusBalance = await getConsensusBalance(consensusAddress)
+      if (unmountSignal.aborted) throw new UnmountedAbortError()
       await transferToConsensus({
         amount: amountToWithdraw2.raw,
         fromConsensusAccount: generatedConsensusAccount,
         toConsensusAddress: consensusAddress,
       })
       setProgress({ percentage: 0.75, message: `Withdrawing ${amountToWithdraw2.formatted} ROSE` })
       if (window.mock && !retryingAfterError) throw 'mock error'
-      await waitForConsensusBalance(consensusAddress, preWithdrawConsensusBalance.raw)
+      await waitForConsensusBalance(consensusAddress, preWithdrawConsensusBalance.raw, unmountSignal)
       setProgress({
         percentage: 1.0,
         message: 'Your ROSE transfer is complete!',
@@ -110,6 +113,7 @@ export function useWithdraw() {
 
       allowNavigatingAway() // Stop blocking unless new transfer comes in
     } catch (err) {
+      if (err instanceof UnmountedAbortError) return // Ignore and stop looping
       console.error(err)
       setProgress({ percentage: undefined, message: `Error. Retrying…` })
       await new Promise(r => setTimeout(r, 6000))
@@ -118,11 +122,17 @@ export function useWithdraw() {
       return
     }
 
-    await new Promise(r => setTimeout(r, 6000))
-    // Stay on "Withdrawn" screen unless new transfer comes in
-    await waitForSapphireBalance(generatedSapphireAccount.address, 0n)
-    // Don't loop, force user to input destination again
-    transferMore()
+    try {
+      await new Promise(r => setTimeout(r, 6000))
+      if (unmountSignal.aborted) throw new UnmountedAbortError()
+      // Stay on "Withdrawn" screen unless new transfer comes in
+      await waitForSapphireBalance(generatedSapphireAccount.address, 0n, unmountSignal)
+      if (unmountSignal.aborted) throw new UnmountedAbortError()
+      // Don't loop, force user to input destination again
+      transferMore()
+    } catch (err) {
+      return // Ignore
+    }
   }
 
   function transferMore() {
@@ -131,11 +141,8 @@ export function useWithdraw() {
 
   return {
     sapphireAddress,
-    generatedSapphireAccount,
-    generatedConsensusAccount,
     consensusAddress,
     setConsensusAddress,
-    step2,
     step3,
     step4,
     transferMore,
diff --git a/move/src/utils/getBalances.ts b/move/src/utils/getBalances.ts
@@ -4,6 +4,7 @@ import * as oasisRT from '@oasisprotocol/client-rt'
 import BigNumber from 'bignumber.js'
 import { getConsensusAccountsWrapper, getNodeInternal } from './client.ts'
 import { consensusConfig, sapphireConfig } from './oasisConfig'
+import { UnmountedAbortError } from './useUnmountSignal'
 
 export async function getBalances(props: {
   consensusAddress: `oasis1${string}`
@@ -15,25 +16,37 @@ export async function getBalances(props: {
 }
 
 /** Continuously fetches gRPC balance until it is > minBalance */
-export async function waitForConsensusBalance(consensusAddress: `oasis1${string}`, moreThan: bigint) {
+export async function waitForConsensusBalance(
+  consensusAddress: `oasis1${string}`,
+  moreThan: bigint,
+  unmountSignal: undefined | AbortSignal
+) {
   // eslint-disable-next-line no-constant-condition
   while (true) {
     const balance = await getConsensusBalance(consensusAddress)
+    if (unmountSignal?.aborted) throw new UnmountedAbortError()
     console.log('waitForConsensusBalance', balance, '>', moreThan)
     if (balance.raw > moreThan) return balance
     await new Promise(r => setTimeout(r, 6000))
+    if (unmountSignal?.aborted) throw new UnmountedAbortError()
     if (window.mock) return balance
   }
 }
 
 /** Continuously fetches gRPC balance until it is > minBalance */
-export async function waitForSapphireBalance(sapphireAddress: `0x${string}`, moreThan: bigint) {
+export async function waitForSapphireBalance(
+  sapphireAddress: `0x${string}`,
+  moreThan: bigint,
+  unmountSignal: undefined | AbortSignal
+) {
   // eslint-disable-next-line no-constant-condition
   while (true) {
     const balance = await getSapphireBalance(sapphireAddress)
+    if (unmountSignal?.aborted) throw new UnmountedAbortError()
     console.log('waitForSapphireBalance', balance, '>', moreThan)
     if (balance.raw > moreThan) return balance
     await new Promise(r => setTimeout(r, 6000))
+    if (unmountSignal?.aborted) throw new UnmountedAbortError()
     if (window.mock) return balance
   }
 }
diff --git a/move/src/utils/useUnmountSignal.ts b/move/src/utils/useUnmountSignal.ts
diff --git a/move/src/withdraw/Withdraw.tsx b/move/src/withdraw/Withdraw.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+move: Fix withdrawing/depositing after navigating away and back without reload`