fix(wallet setup): create wallet navigation (#3221)

apps/wallet-mobile/src/AppNavigator.tsx

@@ -19,12 +19,19 @@ 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 {SetupWalletNavigator} from './features/SetupWallet/SetupWalletNavigator'
+import {
+  ChooseBiometricLoginScreen,
+  useShowBiometricsScreen,
+} from './features/SetupWallet/useCases/ChooseBiometricLogin/ChooseBiometricLoginScreen'
 import {CONFIG} from './legacy/config'
 import {DeveloperScreen} from './legacy/DeveloperScreen'
 import {AppRoutes} from './navigation'
 import {SearchProvider} from './Search/SearchContext'
+import {useWalletManager} from './wallet-manager/WalletManagerContext'
 import {WalletNavigator} from './WalletNavigator'
 import {AuthSetting, useAuthSetting, useAuthWithOs, useIsAuthOsSupported} from './yoroi-wallets/auth'
+import {useHasWallets} from './yoroi-wallets/hooks'
 
 const Stack = createStackNavigator<AppRoutes>()
 const navRef = React.createRef<NavigationContainerRef<ReactNavigation.RootParamList>>()
@@ -35,10 +42,17 @@ export const AppNavigator = () => {
   const strings = useStrings()
   const [routeName, setRouteName] = React.useState<string>()
   useStatusBar(routeName)
-
+  const {showBiometricsScreen} = useShowBiometricsScreen()
+  const isAuthOsSupported = useIsAuthOsSupported()
+  const authSetting = useAuthSetting()
+  const walletManager = useWalletManager()
+  const {hasWallets} = useHasWallets(walletManager)
   useHideScreenInAppSwitcher()
+
   useAutoLogout()
 
+  const shouldAskToUseAuthWithOs = showBiometricsScreen && isAuthOsSupported && authSetting !== 'os'
+
   const {isLoggedIn, isLoggedOut, login} = useAuth()
   const {authWithOs} = useAuthWithOs({
     onSuccess: login,
@@ -133,7 +147,23 @@ export const AppNavigator = () => {
           {isLoggedIn && (
             <>
               <Stack.Group>
-                <Stack.Screen name="app-root">
+                {!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="manage-wallets">
                   {() => (
                     <SearchProvider>
                       <TransferProvider>

apps/wallet-mobile/src/Dashboard/Dashboard.tsx

@@ -153,7 +153,7 @@ const useNavigateTo = () => {
 
   return {
     stakingCenter: () => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'main-wallet-routes',
         params: {
           screen: 'staking-dashboard',

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -15,10 +15,6 @@ import {useLinksShowActionResult} from './features/Links/common/useLinksShowActi
 import {MenuNavigator} from './features/Menu'
 import {SettingsScreenNavigator} from './features/Settings'
 import {SetupWalletNavigator} from './features/SetupWallet/SetupWalletNavigator'
-import {
-  ChooseBiometricLoginScreen,
-  useShowBiometricsScreen,
-} from './features/SetupWallet/useCases/ChooseBiometricLogin/ChooseBiometricLoginScreen'
 import {GovernanceNavigator} from './features/Staking/Governance'
 import {ToggleAnalyticsSettingsNavigator} from './features/ToggleAnalyticsSettings'
 import {useSelectedWallet} from './features/WalletManager/Context/SelectedWalletContext'
@@ -30,10 +26,7 @@ import {NftDetailsNavigator} from './NftDetails/NftDetailsNavigator'
 import {NftsNavigator} from './Nfts/NftsNavigator'
 import {SearchProvider} from './Search/SearchContext'
 import {TxHistoryNavigator} from './TxHistory'
-import {useWalletManager} from './wallet-manager/WalletManagerContext'
-import {useAuthSetting, useIsAuthOsSupported} from './yoroi-wallets/auth'
 import {isHaskellShelley} from './yoroi-wallets/cardano/utils'
-import {useHasWallets} from './yoroi-wallets/hooks'
 
 const Tab = createBottomTabNavigator<WalletTabRoutes>()
 const WalletTabNavigator = () => {
@@ -152,13 +145,6 @@ export const WalletNavigator = () => {
   const strings = useStrings()
   const {theme} = useTheme()
   useLinksRequestAction()
-  const isAuthOsSupported = useIsAuthOsSupported()
-  const {showBiometricsScreen} = useShowBiometricsScreen()
-  const walletManager = useWalletManager()
-  const {hasWallets} = useHasWallets(walletManager)
-  const authSetting = useAuthSetting()
-
-  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/
@@ -183,28 +169,18 @@ export const WalletNavigator = () => {
         detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
       }}
     >
-      {!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}}
         component={SelectWalletFromList}
       />
 
+      <Stack.Screen //
+        name="setup-wallet"
+        options={{headerShown: false}}
+        component={SetupWalletNavigator}
+      />
+
       <Stack.Screen name="main-wallet-routes" options={{headerShown: false}} component={WalletTabNavigator} />
 
       <Stack.Screen name="nft-details-routes" options={{headerShown: false}} component={NftDetailsNavigator} />

apps/wallet-mobile/src/features/Exchange/common/useNavigateTo.tsx

@@ -14,7 +14,7 @@ export const useNavigateTo = () => {
         index: 0,
         routes: [
           {
-            name: 'app-root',
+            name: 'manage-wallets',
             state: {
               routes: [
                 {name: 'wallet-selection'},

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

@@ -190,7 +190,7 @@ const useNavigateTo = () => {
     catalystVoting: () => {
       prefetchStakingInfo()
 
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'voting-registration',
         params: {
           screen: 'download-catalyst',

apps/wallet-mobile/src/features/Send/common/navigation.ts

@@ -21,7 +21,7 @@ export const useNavigateTo = () => {
         index: 0,
         routes: [
           {
-            name: 'app-root',
+            name: 'manage-wallets',
             state: {
               routes: [
                 {name: 'wallet-selection'},

apps/wallet-mobile/src/features/Swap/common/navigation.ts

@@ -20,7 +20,7 @@ export const useNavigateTo = () => {
         index: 0,
         routes: [
           {
-            name: 'app-root',
+            name: 'manage-wallets',
             state: {
               routes: [
                 {name: 'wallet-selection'},

apps/wallet-mobile/src/legacy/DeveloperScreen.tsx

@@ -28,7 +28,7 @@ import {CONFIG} from './config'
 
 const routes: Array<{label: string; path: keyof AppRoutes}> = [
   {label: 'Storybook', path: 'storybook'},
-  {label: 'Skip to wallet list', path: 'app-root'},
+  {label: 'Skip to wallet list', path: 'manage-wallets'},
 ]
 
 const crash = () => {

apps/wallet-mobile/src/navigation.tsx

@@ -179,7 +179,7 @@ export type SwapTokenRoutes = {
   'swap-select-pool': undefined
   'swap-submitted-tx': {txId: string}
   'swap-failed-tx': undefined
-  'app-root': undefined
+  'manage-wallets': undefined
 }
 export type SwapTokenRouteseNavigation = StackNavigationProp<SwapTokenRoutes>
 
@@ -201,7 +201,7 @@ export type ExchangeRoutes = {
   'exchange-result': undefined
   'exchange-select-buy-provider': undefined
   'exchange-select-sell-provider': undefined
-  'app-root': undefined
+  'manage-wallets': undefined
 }
 
 export type ExchangeRoutesNavigation = StackNavigationProp<ExchangeRoutes>
@@ -305,13 +305,15 @@ export type AppRoutes = {
   'first-run': NavigatorScreenParams<FirstRunRoutes>
   developer: undefined
   storybook: undefined
-  'app-root': NavigatorScreenParams<WalletStackRoutes>
+  'manage-wallets': NavigatorScreenParams<WalletStackRoutes>
   'custom-pin-auth': undefined
   'exchange-result': undefined
   'bio-auth-initial': undefined
   'enable-login-with-pin': undefined
   'agreement-changed-notice': undefined
   modal: undefined
+  'choose-biometric-login': undefined
+  'setup-wallet': undefined
 }
 export type AppRouteNavigation = StackNavigationProp<AppRoutes>
 
@@ -347,7 +349,7 @@ export const useWalletNavigation = () => {
         index: 0,
         routes: [
           {
-            name: 'app-root',
+            name: 'manage-wallets',
             state: {
               routes: [
                 {name: 'wallet-selection'},
@@ -376,7 +378,7 @@ export const useWalletNavigation = () => {
         index: 0,
         routes: [
           {
-            name: 'app-root',
+            name: 'manage-wallets',
             state: {
               routes: [
                 {name: 'wallet-selection'},
@@ -401,7 +403,7 @@ export const useWalletNavigation = () => {
     },
 
     navigateToStartTransfer: () => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'main-wallet-routes',
         params: {
           screen: 'history',
@@ -417,7 +419,7 @@ export const useWalletNavigation = () => {
         index: 0,
         routes: [
           {
-            name: 'app-root',
+            name: 'manage-wallets',
             state: {
               routes: [
                 {
@@ -438,7 +440,7 @@ export const useWalletNavigation = () => {
         index: 0,
         routes: [
           {
-            name: 'app-root',
+            name: 'manage-wallets',
             state: {
               routes: [{name: 'wallet-selection'}],
             },
@@ -448,7 +450,7 @@ export const useWalletNavigation = () => {
     },
 
     navigateToStakingDashboard: () => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'main-wallet-routes',
         params: {
           screen: 'staking-dashboard',
@@ -460,7 +462,7 @@ export const useWalletNavigation = () => {
     },
 
     navigateToSettings: () => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'settings',
         params: {
           screen: 'main-settings',
@@ -469,7 +471,7 @@ export const useWalletNavigation = () => {
     },
 
     navigateToTxHistory: () => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'main-wallet-routes',
         params: {
           screen: 'history',
@@ -481,7 +483,7 @@ export const useWalletNavigation = () => {
     },
 
     navigateToNftGallery: () => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'main-wallet-routes',
         params: {
           screen: 'nfts',
@@ -493,7 +495,7 @@ export const useWalletNavigation = () => {
     },
 
     navigateToAppSettings: () => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'settings',
         params: {
           screen: 'app-settings',
@@ -502,7 +504,7 @@ export const useWalletNavigation = () => {
     },
 
     navigateToCollateralSettings: (params?: SettingsStackRoutes['manage-collateral']) => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'settings',
         params: {
           screen: 'manage-collateral',
@@ -512,7 +514,7 @@ export const useWalletNavigation = () => {
     },
 
     navigateToAnalyticsSettings: () => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'toggle-analytics-settings',
         params: {
           screen: 'settings',
@@ -521,7 +523,7 @@ export const useWalletNavigation = () => {
     },
 
     navigateToGovernanceCentre: ({navigateToStakingOnSuccess = false} = {}) => {
-      navigation.navigate('app-root', {
+      navigation.navigate('manage-wallets', {
         screen: 'governance',
         params: {
           screen: 'staking-gov-home',