import { Suspense , useCallback , useEffect } from 'react' ; import { Outlet } from 'react-router-dom' ; import { useWallet } from '@app/common/hooks/use-wallet' ; import { useAuthRequest } from '@app/store/onboarding/onboarding.hooks' ; import { usePendingTransaction } from '@app/store/transactions/transaction.hooks' ; import { useOnCancel } from '@app/store/transactions/requests.hooks' ; import { useRouteHeaderState } from '@app/store/ui/ui.hooks' ; import { ContainerLayout } from './container.layout' ; function UnmountEffectSuspense ( ) { const pendingTx = usePendingTransaction ( ) ; const { authRequest } = useAuthRequest ( ) ; const handleCancelTransaction = useOnCancel ( ) ; const { cancelAuthentication } = useWallet ( ) ; const handleUnmount = useCallback ( async ( ) => { if ( ! ! pendingTx ) { await handleCancelTransaction ( ) ; } else if ( ! ! authRequest ) { cancelAuthentication ( ) ; } } , [ cancelAuthentication , authRequest , pendingTx , handleCancelTransaction ] ) ; useEffect ( ( ) => { window . addEventListener ( 'beforeunload' , handleUnmount ) ; return ( ) => window . removeEventListener ( 'beforeunload' , handleUnmount ) ; } , [ handleUnmount ] ) ; return null ; } function UnmountEffect ( ) { return ( < Suspense fallback = { < > < />}> < UnmountEffectSuspense / > < /Suspense>); } export function Container ( ) { const [ routeHeader , _ ] = useRouteHeaderState ( ) ; return ( < ContainerLayout header = { routeHeader } > < UnmountEffect /> < Outlet / > < /ContainerLayout>); }