feature(setup-wallets): dialog management

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx

@@ -47,7 +47,7 @@ export const RecoveryPhraseScreen = () => {
   const [isBlur, setIsBlur] = React.useState(true)
   const navigation = useNavigation<WalletInitRouteNavigation>()
   const strings = useStrings()
-  const {mnemonicChanged} = useSetupWallet()
+  const {mnemonicChanged, showCreateWalletInfoModal, showCreateWalletInfoModalChanged} = useSetupWallet()
   const {track} = useMetrics()
   const bold = useBold()
 
@@ -86,7 +86,14 @@ export const RecoveryPhraseScreen = () => {
 
         <Space height="s" />
 
-        <Button title={strings.continueButton} style={styles.button} onPress={closeModal} />
+        <Button
+          title={strings.continueButton}
+          style={styles.button}
+          onPress={() => {
+            closeModal()
+            showCreateWalletInfoModalChanged(false)
+          }}
+        />
 
         <Space height="l" />
       </View>,
@@ -96,6 +103,7 @@ export const RecoveryPhraseScreen = () => {
     HEIGHT_MODAL,
     closeModal,
     openModal,
+    showCreateWalletInfoModalChanged,
     strings.continueButton,
     strings.recoveryPhraseCardFifthItem,
     strings.recoveryPhraseCardFirstItem,
@@ -110,9 +118,9 @@ export const RecoveryPhraseScreen = () => {
   ])
 
   React.useEffect(() => {
-    handleOnShowModal()
+    if (showCreateWalletInfoModal) handleOnShowModal()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [showCreateWalletInfoModal])
 
   return (
     <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.root}>

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx

@@ -38,7 +38,8 @@ import {
   validateWalletName,
 } from '../../../../yoroi-wallets/utils'
 import {debugWalletInfo, features} from '../../..'
-import {useSetSelectedWallet, useSetSelectedWalletMeta} from '../../../WalletManager/Context'
+import {useSetSelectedWallet} from '../../../WalletManager/Context/SelectedWalletContext'
+import {useSetSelectedWalletMeta} from '../../../WalletManager/Context/SelectedWalletMetaContext'
 import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
 import {YoroiZendeskLink} from '../../common/contants'
 import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'
@@ -75,7 +76,14 @@ export const WalletDetailsScreen = () => {
   const selectWalletMeta = useSetSelectedWalletMeta()
   const selectWallet = useSetSelectedWallet()
   const storage = useAsyncStorage()
-  const {mnemonic, networkId, publicKeyHex, walletImplementationId} = useSetupWallet()
+  const {
+    mnemonic,
+    networkId,
+    publicKeyHex,
+    walletImplementationId,
+    showRestoreWalletInfoModal,
+    showRestoreWalletInfoModalChanged,
+  } = useSetupWallet()
   const plate = usePlate({networkId, publicKeyHex})
   const [name, setName] = React.useState(features.prefillWalletInfo ? debugWalletInfo.WALLET_NAME : '')
   const passwordRef = React.useRef<RNTextInput>(null)
@@ -194,7 +202,14 @@ export const WalletDetailsScreen = () => {
 
         <Space height="s" />
 
-        <Button title={strings.continueButton} style={styles.button} onPress={closeModal} />
+        <Button
+          title={strings.continueButton}
+          style={styles.button}
+          onPress={() => {
+            closeModal()
+            showRestoreWalletInfoModalChanged(false)
+          }}
+        />
 
         <Space height="l" />
       </View>,
@@ -204,6 +219,7 @@ export const WalletDetailsScreen = () => {
     HEIGHT_MODAL_NAME_PASSWORD,
     closeModal,
     openModal,
+    showRestoreWalletInfoModalChanged,
     strings.continueButton,
     strings.walletDetailsModalTitle,
     strings.walletNameModalCardFirstItem,
@@ -217,9 +233,9 @@ export const WalletDetailsScreen = () => {
   ])
 
   React.useEffect(() => {
-    showModalTipsPassword()
+    if (showRestoreWalletInfoModal) showModalTipsPassword()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [showRestoreWalletInfoModal])
 
   const showModalTipsPlateNumber = () => {
     Keyboard.dismiss()

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx

@@ -38,7 +38,8 @@ import {
   validateWalletName,
 } from '../../../../yoroi-wallets/utils'
 import {debugWalletInfo, features} from '../../..'
-import {useSetSelectedWallet, useSetSelectedWalletMeta} from '../../../WalletManager/Context'
+import {useSetSelectedWallet} from '../../../WalletManager/Context/SelectedWalletContext'
+import {useSetSelectedWalletMeta} from '../../../WalletManager/Context/SelectedWalletMetaContext'
 import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
 import {YoroiZendeskLink} from '../../common/contants'
 import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'

packages/setup-wallet/src/translators/reactjs/provider/SetupWalletProvider.test.tsx

@@ -114,6 +114,26 @@ describe('SetupWalletContext :: hooks', () => {
     expect(result.current.useUSB).toBe(true)
   })
 
+  test('showRestoreWalletInfoModalChanged', () => {
+    const {result} = renderHook(() => useSetupWallet(), {wrapper})
+
+    act(() => {
+      result.current.showRestoreWalletInfoModalChanged(true)
+    })
+
+    expect(result.current.showRestoreWalletInfoModal).toBe(true)
+  })
+
+  test('showCreateWalletInfoModalChanged', () => {
+    const {result} = renderHook(() => useSetupWallet(), {wrapper})
+
+    act(() => {
+      result.current.showCreateWalletInfoModalChanged(true)
+    })
+
+    expect(result.current.showCreateWalletInfoModal).toBe(true)
+  })
+
   test('reset', () => {
     const {result} = renderHook(() => useSetupWallet(), {wrapper})
 

packages/setup-wallet/src/translators/reactjs/provider/SetupWalletProvider.tsx

@@ -60,6 +60,20 @@ export const SetupWalletProvider = ({
     useUSBChanged: (useUSB: SetupWalletState['useUSB']) =>
       dispatch({type: SetupWalletActionType.UseUSBChanged, useUSB}),
     reset: () => dispatch({type: SetupWalletActionType.Reset}),
+    showRestoreWalletInfoModalChanged: (
+      showRestoreWalletInfoModal: SetupWalletState['showRestoreWalletInfoModal'],
+    ) =>
+      dispatch({
+        type: SetupWalletActionType.ShowRestoreWalletInfoModalChanged,
+        showRestoreWalletInfoModal,
+      }),
+    showCreateWalletInfoModalChanged: (
+      showCreateWalletInfoModal: SetupWalletState['showCreateWalletInfoModal'],
+    ) =>
+      dispatch({
+        type: SetupWalletActionType.ShowCreateWalletInfoModalChanged,
+        showCreateWalletInfoModal,
+      }),
   }).current
 
   const context = React.useMemo(

packages/setup-wallet/src/translators/reactjs/state/state.test.ts

@@ -126,6 +126,38 @@ describe('State Actions', () => {
     expect(state.useUSB).toBe(action.useUSB)
   })
 
+  it('ShowCreateWalletInfoModalChanged', () => {
+    const action: SetupWalletAction = {
+      type: SetupWalletActionType.ShowCreateWalletInfoModalChanged,
+      showCreateWalletInfoModal: true,
+    }
+
+    const state = setupWalletReducer(
+      {...setupWalletDefaultState, showCreateWalletInfoModal: false},
+      action,
+    )
+
+    expect(state.showCreateWalletInfoModal).toBe(
+      action.showCreateWalletInfoModal,
+    )
+  })
+
+  it('ShowRestoreWalletInfoModalChanged', () => {
+    const action: SetupWalletAction = {
+      type: SetupWalletActionType.ShowRestoreWalletInfoModalChanged,
+      showRestoreWalletInfoModal: true,
+    }
+
+    const state = setupWalletReducer(
+      {...setupWalletDefaultState, showRestoreWalletInfoModal: false},
+      action,
+    )
+
+    expect(state.showRestoreWalletInfoModal).toBe(
+      action.showRestoreWalletInfoModal,
+    )
+  })
+
   it('Reset', () => {
     const action: SetupWalletAction = {
       type: SetupWalletActionType.Reset,
@@ -144,6 +176,8 @@ describe('State Actions', () => {
         setUpType: 'restore',
         mnemonicType: 15,
         useUSB: true,
+        showCreateWalletInfoModal: true,
+        showRestoreWalletInfoModal: true,
       },
       action,
     )

packages/setup-wallet/src/translators/reactjs/state/state.ts

@@ -50,6 +50,14 @@ export const setupWalletReducer = (
         draft.useUSB = action.useUSB
         return
 
+      case SetupWalletActionType.ShowCreateWalletInfoModalChanged:
+        draft.showCreateWalletInfoModal = action.showCreateWalletInfoModal
+        return
+
+      case SetupWalletActionType.ShowRestoreWalletInfoModalChanged:
+        draft.showRestoreWalletInfoModal = action.showRestoreWalletInfoModal
+        return
+
       case SetupWalletActionType.Reset:
         return setupWalletDefaultState
 
@@ -72,6 +80,8 @@ export const setupWalletDefaultState: Readonly<SetupWalletState> = freeze(
     setUpType: null,
     mnemonicType: null,
     useUSB: false,
+    showRestoreWalletInfoModal: true,
+    showCreateWalletInfoModal: true,
   },
   true,
 )
@@ -88,6 +98,8 @@ export type SetupWalletState = {
   setUpType: 'restore' | 'create' | 'hw' | null
   mnemonicType: 15 | 24 | null
   useUSB: boolean
+  showRestoreWalletInfoModal: boolean
+  showCreateWalletInfoModal: boolean
 }
 
 export enum SetupWalletActionType {
@@ -103,6 +115,8 @@ export enum SetupWalletActionType {
   MnemonicTypeChanged = 'mnemonicTypeChanged',
   UseUSBChanged = 'useUSBChanged',
   Reset = 'reset',
+  ShowRestoreWalletInfoModalChanged = 'showRestoreWalletInfoModalChanged',
+  ShowCreateWalletInfoModalChanged = 'showCreateWalletInfoModalChanged',
 }
 
 export type SetupWalletAction =
@@ -153,6 +167,14 @@ export type SetupWalletAction =
   | {
       type: SetupWalletActionType.Reset
     }
+  | {
+      type: SetupWalletActionType.ShowRestoreWalletInfoModalChanged
+      showRestoreWalletInfoModal: SetupWalletState['showRestoreWalletInfoModal']
+    }
+  | {
+      type: SetupWalletActionType.ShowCreateWalletInfoModalChanged
+      showCreateWalletInfoModal: SetupWalletState['showCreateWalletInfoModal']
+    }
 
 export type SetupWalletActions = {
   mnemonicChanged: (mnemonic: SetupWalletState['mnemonic']) => void
@@ -171,6 +193,10 @@ export type SetupWalletActions = {
   mnemonicTypeChanged: (mnemonicType: SetupWalletState['mnemonicType']) => void
   useUSBChanged: (useUSB: SetupWalletState['useUSB']) => void
   reset: () => void
+  showRestoreWalletInfoModalChanged: (
+    showRestoreWalletInfoModal: boolean,
+  ) => void
+  showCreateWalletInfoModalChanged: (showCreateWalletInfoModal: boolean) => void
 }
 
 export type SetupWalletContext = SetupWalletState & SetupWalletActions
@@ -189,6 +215,8 @@ export const setupWalletInitialContext: SetupWalletContext = freeze(
     mnemonicTypeChanged: missingInit,
     useUSBChanged: missingInit,
     reset: missingInit,
+    showRestoreWalletInfoModalChanged: missingInit,
+    showCreateWalletInfoModalChanged: missingInit,
   },
   true,
 )