Fix clicking outside modal to close

Emurgo · Jun 13, 2024 · 47fe823 · 47fe823
1 parent 45ce876
commit 47fe823
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx b/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx
@@ -6,9 +6,7 @@ import LinearGradient from 'react-native-linear-gradient'
 
 import {Button, Icon, useModal} from '../../components'
 import {Space} from '../../components/Space/Space'
-import {useSelectedWallet} from '../../features/WalletManager/Context/SelectedWalletContext'
 import {formatTimeSpan} from '../../yoroi-wallets/utils'
-import {usePoolTransitionContext} from './PoolTransitionProvider'
 import {useStrings} from './usePoolTransition'
 
 export const PoolTransitionModal = ({
@@ -23,11 +21,8 @@ export const PoolTransitionModal = ({
   const strings = useStrings()
 
   const {closeModal} = useModal()
-  const wallet = useSelectedWallet()
-  const [, setClosedWallets] = usePoolTransitionContext()
 
-  const handleClose = () => {
-    setClosedWallets((closedWallets) => [wallet.id, ...closedWallets])
+  const handleOnSkip = () => {
     closeModal()
   }
 
@@ -37,7 +32,7 @@ export const PoolTransitionModal = ({
       await onContinue()
     } finally {
       setIsLoading(false)
-      handleClose()
+      closeModal()
     }
   }
 
@@ -138,7 +133,7 @@ export const PoolTransitionModal = ({
       <Space height="xl" />
 
       <Actions>
-        <Button outline title={strings.skipNoRewards} textStyles={styles.outlineButton} onPress={handleClose} />
+        <Button outline title={strings.skipNoRewards} textStyles={styles.outlineButton} onPress={handleOnSkip} />
 
         <Button
           shelleyTheme

diff --git a/apps/wallet-mobile/src/Staking/PoolTransition/usePoolTransitionModal.tsx b/apps/wallet-mobile/src/Staking/PoolTransition/usePoolTransitionModal.tsx
@@ -9,28 +9,30 @@ import {usePoolTransition, useStrings} from './usePoolTransition'
 export const usePoolTransitionModal = () => {
   const {poolTransition, isPoolRetiring, isLoading, navigateToUpdate} = usePoolTransition()
   const wallet = useSelectedWallet()
-  const [closedWallets] = usePoolTransitionContext()
+  const [shownWallets, setShownWallets] = usePoolTransitionContext()
   const {openModal} = useModal()
   const strings = useStrings()
   const modalHeight = 700
 
   React.useEffect(() => {
-    if (!closedWallets.includes(wallet.id) && isPoolRetiring && poolTransition !== null) {
+    if (!shownWallets.includes(wallet.id) && isPoolRetiring && poolTransition !== null) {
       openModal(
         strings.title,
         <PoolTransitionModal poolTransition={poolTransition} onContinue={navigateToUpdate} />,
         modalHeight,
       )
+      setShownWallets(() => [wallet.id, ...shownWallets])
     }
   }, [
-    closedWallets,
+    shownWallets,
     isPoolRetiring,
     modalHeight,
     navigateToUpdate,
     openModal,
     poolTransition,
     strings.title,
     wallet.id,
+    setShownWallets,
   ])
 
   return {isLoading}