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

@@ -14,7 +14,7 @@ import {
   TextInput,
   TextInputProps,
 } from '../../../components'
-import {useWalletNavigation} from '../../../navigation'
+import {useNavigateToWalletSelectionSync} from '../../../navigation'
 import {useRemoveWallet, useWalletName} from '../../../yoroi-wallets/hooks'
 import {useSelectedWallet} from '../../WalletManager/Context/SelectedWalletContext'
 
@@ -24,15 +24,17 @@ export const RemoveWalletScreen = () => {
   const wallet = useSelectedWallet()
   const walletName = useWalletName(wallet)
 
-  const {resetToWalletSelection} = useWalletNavigation()
-  const {removeWallet, isLoading} = useRemoveWallet(wallet.id, {
-    onSuccess: () => resetToWalletSelection(),
+  const resetToWalletSelectionSync = useNavigateToWalletSelectionSync()
+  const {removeWallet, isLoading: isRemoveWalletLoading} = useRemoveWallet(wallet.id, {
+    onSuccess: () => {
+      resetToWalletSelectionSync()
+    },
   })
 
   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()
 

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

@@ -67,7 +67,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)
@@ -115,7 +115,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

@@ -6,7 +6,6 @@ import * as React from 'react'
 import {useIntl} from 'react-intl'
 import {
   InteractionManager,
-  Keyboard,
   Linking,
   ScrollView,
   StyleSheet,
@@ -69,7 +68,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)
@@ -104,7 +103,7 @@ export const RestoreWalletDetailsScreen = () => {
     onSuccess: ([wallet, walletMeta]) => {
       selectWalletMeta(walletMeta)
       selectWallet(wallet)
-      navigateToTxHistory()
+      resetToTxHistory()
     },
     onError: (error) => {
       InteractionManager.runAfterInteractions(() => {
@@ -156,7 +155,6 @@ export const RestoreWalletDetailsScreen = () => {
   )
 
   const showModalTipsPassword = () => {
-    Keyboard.dismiss()
     openModal(
       strings.walletDetailsModalTitle,
       <View style={styles.modal}>
@@ -195,7 +193,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',
-        })
+        resetToWalletSetup()
       }}
       title={strings.addWalletButton}
       style={styles.topButton}

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

@@ -828,7 +828,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

@@ -14,6 +14,8 @@ import {Dimensions, TouchableOpacity, TouchableOpacityProps, ViewStyle} from 're
 import {Icon} from './components'
 import {ScanFeature} from './features/Scan/common/types'
 import {Routes as StakingGovernanceRoutes} from './features/Staking/Governance/common/navigation'
+import {useWalletManager} from './wallet-manager/WalletManagerContext'
+import {useHasWallets} from './yoroi-wallets/hooks'
 import {YoroiUnsignedTx} from './yoroi-wallets/types'
 
 // prettier-ignore
@@ -102,6 +104,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 +121,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 +307,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 +414,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,
@@ -514,6 +536,24 @@ export const useWalletNavigation = () => {
   } as const).current
 }
 
+export const useNavigateToWalletSelectionSync = () => {
+  const {resetToWalletSetup, resetToWalletSelection} = useWalletNavigation()
+  const walletManager = useWalletManager()
+  const {refetch} = useHasWallets(walletManager, {
+    enabled: false,
+    onSuccess: (hasWallets) => {
+      if (hasWallets) {
+        resetToWalletSelection()
+        return
+      }
+
+      resetToWalletSetup()
+    },
+  })
+
+  return refetch
+}
+
 export const hideTabBarForRoutes = (route: RouteProp<WalletTabRoutes, 'history'>): ViewStyle | undefined =>
   getFocusedRouteNameFromRoute(route)?.startsWith('scan') ||
   getFocusedRouteNameFromRoute(route)?.startsWith('swap') ||

apps/wallet-mobile/src/yoroi-wallets/hooks/index.ts

@@ -709,7 +709,10 @@ export const useHasWallets = (
 
   if (query.data == null) throw new Error('invalid state')
 
-  return query.data
+  return {
+    ...query,
+    hasWallets: query.data,
+  }
 }
 
 export const useRemoveWallet = (id: YoroiWallet['id'], options: UseMutationOptions<void, Error, void> = {}) => {