fix(wallet-setup): empty wallet list state

apps/wallet-mobile/src/AppNavigator.tsx

@@ -19,7 +19,6 @@ import {ModalScreen} from './components/Modal/ModalScreen'
 import {AgreementChangedNavigator, InitializationNavigator} from './features/Initialization'
 import {LegalAgreement, useLegalAgreement} from './features/Initialization/common'
 import {useDeepLinkWatcher} from './features/Links/common/useDeepLinkWatcher'
-import {AddWalletNavigator} from './features/SetupWallet/SetupWalletNavigator'
 import {CONFIG} from './legacy/config'
 import {DeveloperScreen} from './legacy/DeveloperScreen'
 import {AppRoutes} from './navigation'
@@ -143,8 +142,6 @@ export const AppNavigator = () => {
                     </SearchProvider>
                   )}
                 </Stack.Screen>
-
-                <Stack.Screen name="new-wallet" component={AddWalletNavigator} />
               </Stack.Group>
 
               <Stack.Group screenOptions={{presentation: 'transparentModal'}}>

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -14,6 +14,7 @@ import {useLinksRequestAction} from './features/Links/common/useLinksRequestActi
 import {useLinksShowActionResult} from './features/Links/common/useLinksShowActionResult'
 import {MenuNavigator} from './features/Menu'
 import {SettingsScreenNavigator} from './features/Settings'
+import {SetupWalletNavigator} from './features/SetupWallet/SetupWalletNavigator'
 import {
   ChooseBiometricLoginScreen,
   useShowBiometricsScreen,
@@ -154,10 +155,10 @@ export const WalletNavigator = () => {
   const isAuthOsSupported = useIsAuthOsSupported()
   const {showBiometricsScreen} = useShowBiometricsScreen()
   const walletManager = useWalletManager()
-  const hasWallets = useHasWallets(walletManager)
+  const {hasWallets} = useHasWallets(walletManager)
   const authSetting = useAuthSetting()
 
-  const shouldAskToUseAuthWithOs = !hasWallets && showBiometricsScreen && isAuthOsSupported && authSetting !== 'os'
+  const shouldAskToUseAuthWithOs = showBiometricsScreen && isAuthOsSupported && authSetting !== 'os'
 
   // initialRoute doesn't update the state of the navigator, only at first render
   // https://reactnavigation.org/docs/auth-flow/
@@ -182,14 +183,22 @@ export const WalletNavigator = () => {
         detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
       }}
     >
-      {shouldAskToUseAuthWithOs && (
+      {!hasWallets && shouldAskToUseAuthWithOs && (
         <Stack.Screen //
           name="choose-biometric-login"
           options={{headerShown: false}}
           component={ChooseBiometricLoginScreen}
         />
       )}
 
+      {!hasWallets && !shouldAskToUseAuthWithOs && (
+        <Stack.Screen //
+          name="setup-wallet"
+          options={{headerShown: false}}
+          component={SetupWalletNavigator}
+        />
+      )}
+
       <Stack.Screen
         name="wallet-selection"
         options={{title: strings.walletSelectionScreenHeader}}

apps/wallet-mobile/src/features/Menu/Menu.tsx

@@ -187,7 +187,6 @@ const useNavigateTo = () => {
   const prefetchStakingInfo = usePrefetchStakingInfo(wallet)
 
   return {
-    allWallets: () => navigation.navigate('app-root', {screen: 'wallet-selection'}),
     catalystVoting: () => {
       prefetchStakingInfo()
 

apps/wallet-mobile/src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {ScrollView, StyleSheet, View, ViewProps} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
+import {useQueryClient} from 'react-query'
 
 import {
   Button,
@@ -15,24 +16,39 @@ import {
   TextInputProps,
 } from '../../../components'
 import {useWalletNavigation} from '../../../navigation'
-import {useRemoveWallet, useWalletName} from '../../../yoroi-wallets/hooks'
+import {useWalletManager} from '../../../wallet-manager/WalletManagerContext'
+import {hasWalletsKey, useRemoveWallet, useWalletName} from '../../../yoroi-wallets/hooks'
 import {useSelectedWallet} from '../../WalletManager/Context/SelectedWalletContext'
 
 export const RemoveWalletScreen = () => {
   const strings = useStrings()
   const styles = useStyles()
   const wallet = useSelectedWallet()
   const walletName = useWalletName(wallet)
+  const {resetToWalletSetup, resetToWalletSelection} = useWalletNavigation()
+  const walletManager = useWalletManager()
+  const queryClient = useQueryClient()
 
-  const {resetToWalletSelection} = useWalletNavigation()
-  const {removeWallet, isLoading} = useRemoveWallet(wallet.id, {
-    onSuccess: () => resetToWalletSelection(),
+  const {removeWallet, isLoading: isRemoveWalletLoading} = useRemoveWallet(wallet.id, {
+    onSuccess: async () => {
+      queryClient.invalidateQueries({queryKey: [hasWalletsKey]})
+
+      const walletMetas = await walletManager.listWallets()
+      const hasWallets = walletMetas.length > 0
+
+      if (hasWallets) {
+        resetToWalletSelection()
+        return
+      }
+
+      resetToWalletSetup()
+    },
   })
 
   const [hasMnemonicWrittenDown, setHasMnemonicWrittenDown] = React.useState(false)
   const [typedWalletName, setTypedWalletName] = React.useState('')
 
-  const disabled = isLoading || (!wallet.isHW && !hasMnemonicWrittenDown) || walletName !== typedWalletName
+  const disabled = isRemoveWalletLoading || (!wallet.isHW && !hasMnemonicWrittenDown) || walletName !== typedWalletName
 
   return (
     <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.container}>

apps/wallet-mobile/src/features/SetupWallet/SetupWalletNavigator.tsx

@@ -20,7 +20,7 @@ import {RestoreWalletDetailsScreen} from './useCases/RestoreWallet/RestoreWallet
 import {RestoreWalletScreen} from './useCases/RestoreWallet/RestoreWalletScreen'
 
 const Stack = createStackNavigator<WalletInitRoutes>()
-export const AddWalletNavigator = () => {
+export const SetupWalletNavigator = () => {
   const strings = useStrings()
   const {theme} = useTheme()
 
@@ -37,7 +37,7 @@ export const AddWalletNavigator = () => {
       <Stack.Screen
         name="setup-wallet-choose-setup-type"
         component={ChooseSetupTypeScreen}
-        options={{title: strings.addNewWalletTitle}}
+        options={{title: strings.addNewWalletTitle, headerLeft: () => null}}
       />
 
       <Stack.Screen

apps/wallet-mobile/src/features/SetupWallet/useCases/ChooseBiometricLogin/ChooseBiometricLoginScreen.tsx

@@ -1,4 +1,3 @@
-import {useNavigation} from '@react-navigation/native'
 import {parseBoolean, useAsyncStorage} from '@yoroi/common'
 import {useSetupWallet} from '@yoroi/setup-wallet'
 import {useTheme} from '@yoroi/theme'
@@ -10,6 +9,7 @@ import {useQuery, UseQueryOptions} from 'react-query'
 
 import {Button} from '../../../../components'
 import {Space} from '../../../../components/Space/Space'
+import {useWalletNavigation} from '../../../../navigation'
 import {useEnableAuthWithOs} from '../../../../yoroi-wallets/auth'
 import * as HASKELL_SHELLEY from '../../../../yoroi-wallets/cardano/constants/mainnet/constants'
 import {useStrings} from '../../common/useStrings'
@@ -20,12 +20,11 @@ export const ChooseBiometricLoginScreen = () => {
   const strings = useStrings()
   const storage = useAsyncStorage()
   const {walletImplementationIdChanged} = useSetupWallet()
+  const {resetToWalletSetup} = useWalletNavigation()
 
   const navigate = () => {
     walletImplementationIdChanged(HASKELL_SHELLEY.WALLET_IMPLEMENTATION_ID)
-    navigation.navigate('new-wallet', {
-      screen: 'setup-wallet-choose-setup-type',
-    })
+    resetToWalletSetup()
   }
 
   const {enableAuthWithOs, isLoading} = useEnableAuthWithOs({
@@ -39,8 +38,6 @@ export const ChooseBiometricLoginScreen = () => {
     storage.setItem(chooseBiometricLoginScreenShownKey, JSON.stringify(false))
   }
 
-  const navigation = useNavigation()
-
   return (
     <SafeAreaView edges={['left', 'right', 'top', 'bottom']} style={styles.root}>
       <View style={styles.content}>

apps/wallet-mobile/src/features/SetupWallet/useCases/ChooseSetupType/ChooseSetupTypeScreen.tsx

@@ -21,7 +21,12 @@ import {RestoreWallet} from '../../illustrations/RestoreWallet'
 export const ChooseSetupTypeScreen = () => {
   const {styles} = useStyles()
   const strings = useStrings()
-  const {networkIdChanged, setUpTypeChanged, useUSBChanged: USBChanged} = useSetupWallet()
+  const {
+    walletImplementationIdChanged,
+    networkIdChanged,
+    setUpTypeChanged,
+    useUSBChanged: USBChanged,
+  } = useSetupWallet()
   const [isModalOpen, setIsModalOpen] = React.useState(false)
   const {track} = useMetrics()
 
@@ -34,6 +39,7 @@ export const ChooseSetupTypeScreen = () => {
   const navigation = useNavigation<WalletInitRouteNavigation>()
 
   const handleCreate = () => {
+    walletImplementationIdChanged(HASKELL_SHELLEY.WALLET_IMPLEMENTATION_ID)
     setUpTypeChanged('create')
 
     if (isProduction()) {
@@ -47,6 +53,7 @@ export const ChooseSetupTypeScreen = () => {
   }
 
   const handleRestore = () => {
+    walletImplementationIdChanged(HASKELL_SHELLEY.WALLET_IMPLEMENTATION_ID)
     setUpTypeChanged('restore')
 
     if (isProduction()) {
@@ -65,6 +72,7 @@ export const ChooseSetupTypeScreen = () => {
 
   const navigateHw = () => {
     setIsModalOpen(false)
+    walletImplementationIdChanged(HASKELL_SHELLEY.WALLET_IMPLEMENTATION_ID)
     setUpTypeChanged('hw')
 
     if (isProduction()) {

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

@@ -69,7 +69,7 @@ export const WalletDetailsScreen = () => {
   const {styles} = useStyles()
   const {HEIGHT_MODAL_NAME_PASSWORD, HEIGHT_MODAL_CHECKSUM} = useSizeModal()
   const {openModal, closeModal} = useModal()
-  const {navigateToTxHistory} = useWalletNavigation()
+  const {resetToTxHistory} = useWalletNavigation()
   const strings = useStrings()
   const walletManager = useWalletManager()
   const {walletNames} = useWalletNames(walletManager)
@@ -118,7 +118,7 @@ export const WalletDetailsScreen = () => {
     onSuccess: ([wallet, walletMeta]) => {
       selectWalletMeta(walletMeta)
       selectWallet(wallet)
-      navigateToTxHistory()
+      resetToTxHistory()
     },
     onError: (error) => {
       InteractionManager.runAfterInteractions(() => {

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

@@ -7,7 +7,6 @@ import * as React from 'react'
 import {useIntl} from 'react-intl'
 import {
   InteractionManager,
-  Keyboard,
   Linking,
   ScrollView,
   StyleSheet,
@@ -71,7 +70,7 @@ export const RestoreWalletDetailsScreen = () => {
   const {HEIGHT_MODAL_NAME_PASSWORD, HEIGHT_MODAL_CHECKSUM} = useSizeModal()
   const {openModal, closeModal} = useModal()
   const strings = useStrings()
-  const {navigateToTxHistory} = useWalletNavigation()
+  const {resetToTxHistory} = useWalletNavigation()
   const walletManager = useWalletManager()
   const {track} = useMetrics()
   const {walletNames} = useWalletNames(walletManager)
@@ -107,7 +106,7 @@ export const RestoreWalletDetailsScreen = () => {
     onSuccess: ([wallet, walletMeta]) => {
       selectWalletMeta(walletMeta)
       selectWallet(wallet)
-      navigateToTxHistory()
+      resetToTxHistory()
     },
     onError: (error) => {
       InteractionManager.runAfterInteractions(() => {
@@ -163,7 +162,6 @@ export const RestoreWalletDetailsScreen = () => {
   )
 
   const showModalTipsPassword = () => {
-    Keyboard.dismiss()
     openModal(
       strings.walletDetailsModalTitle,
       <View style={styles.modal}>
@@ -202,7 +200,6 @@ export const RestoreWalletDetailsScreen = () => {
   }
 
   const showModalTipsPlateNumber = () => {
-    Keyboard.dismiss()
     openModal(
       strings.walletDetailsModalTitle,
       <View style={styles.modal}>

apps/wallet-mobile/src/features/WalletManager/SelectWalletFromList/SelectWalletFromListScreen.tsx

@@ -16,7 +16,6 @@ import {useMetrics} from '../../../metrics/metricsManager'
 import {useWalletNavigation} from '../../../navigation'
 import {WalletMeta} from '../../../wallet-manager/types'
 import {useWalletManager} from '../../../wallet-manager/WalletManagerContext'
-import * as HASKELL_SHELLEY from '../../../yoroi-wallets/cardano/constants/mainnet/constants'
 import {InvalidState} from '../../../yoroi-wallets/cardano/errors'
 import {isJormungandr} from '../../../yoroi-wallets/cardano/networks'
 import {useOpenWallet, useWalletMetas} from '../../../yoroi-wallets/hooks'
@@ -146,20 +145,16 @@ const SupportTicketLink = () => {
 }
 
 const AddWalletButton = () => {
-  const navigation = useNavigation()
   const strings = useStrings()
   const {styles} = useStyles()
-  const {walletImplementationIdChanged, reset: resetSetupWallet} = useSetupWallet()
+  const {reset: resetSetupWallet} = useSetupWallet()
+  const {resetToWalletSetup} = useWalletNavigation()
 
   return (
     <Button
       onPress={() => {
-        resetSetupWallet()
-        walletImplementationIdChanged(HASKELL_SHELLEY.WALLET_IMPLEMENTATION_ID)
-
-        navigation.navigate('new-wallet', {
-          screen: 'setup-wallet-choose-setup-type',
-        })
+        resetSetupWallet() // reset state
+        resetToWalletSetup() // navigates to screen
       }}
       title={strings.addWalletButton}
       style={styles.topButton}

apps/wallet-mobile/src/i18n/locales/en-US.json

@@ -829,7 +829,6 @@
   "links.trusted.paymentRequested.description": "A request from a trusted app has been made that requires your approval. While this source is recognized and generally considered safe, we advise you to review the details in the transaction screen carefully before submitting any transaction.",
   "links.untrusted.paymentRequested.title": "Payment requested",
   "links.untrusted.paymentRequested.description": "A request from an untrusted app has been made. Engaging with this request could pose potential security risk to your wallet. Do not proceed without verifying the authenticity of the request. If you didn't start this action, please cancel it.",
-  "menu.allWallets": "All Wallets",
   "menu.appSettings": "App Settings",
   "menu.catalystVoting": "Catalyst Voting",
   "menu.governanceCentre": "Governance centre",

apps/wallet-mobile/src/navigation.tsx

@@ -102,6 +102,7 @@ export type WalletTabRoutes = {
 
 export type WalletStackRoutes = {
   'choose-biometric-login': undefined
+  'setup-wallet': undefined
   'wallet-selection': undefined
   'exchange-result': undefined
   'main-wallet-routes': NavigatorScreenParams<WalletTabRoutes>
@@ -118,7 +119,6 @@ export type WalletInitRoutes = {
   'setup-wallet-create-choose-network': undefined
   'setup-wallet-restore-choose-network': undefined
   'setup-wallet-restore-choose-mnemonic-type': undefined
-  'initial-setup-wallet-choose-setup-type': undefined
   'setup-wallet-details-form': undefined
   'setup-wallet-restore-form': undefined
   'setup-wallet-restore-details': undefined
@@ -305,7 +305,6 @@ export type AppRoutes = {
   'first-run': NavigatorScreenParams<FirstRunRoutes>
   developer: undefined
   storybook: undefined
-  'new-wallet': NavigatorScreenParams<WalletInitRoutes>
   'app-root': NavigatorScreenParams<WalletStackRoutes>
   'custom-pin-auth': undefined
   'exchange-result': undefined
@@ -413,6 +412,27 @@ export const useWalletNavigation = () => {
       })
     },
 
+    resetToWalletSetup: () => {
+      navigation.reset({
+        index: 0,
+        routes: [
+          {
+            name: 'app-root',
+            state: {
+              routes: [
+                {
+                  name: 'setup-wallet',
+                  state: {
+                    routes: [{name: 'setup-wallet-choose-setup-type'}],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      })
+    },
+
     resetToWalletSelection: () => {
       navigation.reset({
         index: 0,