New layout for account creation screens

mobile/app/(app)/toselect/index.tsx

@@ -1,12 +1,13 @@
 import { Layout } from '@/components'
 import VaultListItem from '@/components/list/vault-list/VaultListItem'
-import { fetchVaults, Vault, selectCallback, selectVaults, useAppDispatch, useAppSelector } from '@/redux'
+import { fetchVaults, selectCallback, selectVaults, useAppDispatch, useAppSelector } from '@/redux'
 import { useGnoNativeContext } from '@gnolang/gnonative'
 import { router, useNavigation } from 'expo-router'
 import { useCallback, useEffect, useState } from 'react'
 import { FlatList } from 'react-native'
 import * as Linking from 'expo-linking'
 import { Button, Spacer, Text } from '@/modules/ui-components'
+import { Vault } from '@/types'
 
 export default function Page() {
   const [loading, setLoading] = useState<string | undefined>(undefined)

mobile/app/(app)/tosign/index.tsx

@@ -1,4 +1,4 @@
-import { BetaVersionMiniBanner, Layout, Ruller } from '@/components'
+import { Layout, Ruller } from '@/components'
 import {
   estimateGasWanted,
   selectClientName,
@@ -22,6 +22,7 @@ import * as Linking from 'expo-linking'
 import { ScrollView, View, TouchableOpacity, SafeAreaView, ActivityIndicator } from 'react-native'
 import { Button, Container, FormItem, FormItemInline, Spacer, Text } from '@/modules/ui-components'
 import styled from 'styled-components/native'
+import { BetaVersionMiniBanner } from '@/modules/ui-components/molecules'
 
 export default function Page() {
   const dispatch = useAppDispatch()

mobile/app/(app)/tosignin/index.tsx

@@ -1,8 +1,7 @@
-import { BetaVersionMiniBanner, Layout } from '@/components'
+import { Layout } from '@/components'
 import VaultListItem from '@/components/list/vault-list/VaultListItem'
 import {
   clearLinking,
-  Vault,
   selectCallback,
   selectClientName,
   selectVaults,
@@ -17,6 +16,8 @@ import { useCallback, useEffect, useState } from 'react'
 import { FlatList } from 'react-native'
 import * as Linking from 'expo-linking'
 import { Button, Container, SafeAreaView, Spacer, Text } from '@/modules/ui-components'
+import { Vault } from '@/types'
+import { BetaVersionMiniBanner } from '@/modules/ui-components/molecules'
 
 export default function Page() {
   const [loading, setLoading] = useState<string | undefined>(undefined)

mobile/app/(app)/welcome/index.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react'
 import { useRouter } from 'expo-router'
-import { BetaVersionBanner } from '@/components/index'
 import { selectAction, useAppDispatch, useAppSelector, doSignIn } from '@/redux'
 import { OnboardingLayout, WelcomeBack, WelcomeBackFooter } from '@/modules/ui-components'
 import { WelcomeBackError } from '@/modules/ui-components/organisms/WelcomeBackError'
+import { BetaVersionBanner } from '@/modules/ui-components/molecules'
 
 export default function Root() {
   const [error, setError] = useState<string | undefined>(undefined)
-  const route = useRouter()
+  const router = useRouter()
   const dispatch = useAppDispatch()
   const action = useAppSelector(selectAction)
 
@@ -23,17 +23,16 @@ export default function Root() {
 
   const navigateTo = () => {
     if (action) {
-      route.replace(action)
+      router.replace(action)
     } else {
-      route.replace('/home')
+      router.replace('/home')
     }
   }
 
   return (
-    <OnboardingLayout>
+    <OnboardingLayout keyboardAware footer={<WelcomeBackFooter onUnlockPress={onUnlockPress} />}>
       <BetaVersionBanner />
       {!error ? <WelcomeBack /> : <WelcomeBackError error={error} />}
-      <WelcomeBackFooter onUnlockPress={onUnlockPress} />
     </OnboardingLayout>
   )
 }

mobile/app/home/(modal)/new-network.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router'
+import { Alert } from 'react-native'
+import { OnboardingLayout } from '@/modules/ui-components'
+import ScreenHeader from '@/modules/ui-components/organisms/ScreenHeader'
+import { Form, NetworkForm } from '@/modules/ui-components/organisms/NetworkForm'
+import { useAppDispatch, saveChain, setSelectedChain } from '@/redux'
+
+const Page = () => {
+  const dispatch = useAppDispatch()
+  const router = useRouter()
+  const params = useLocalSearchParams<{ fromScreen: string | 'NewVault' }>()
+
+  const [loading, setLoading] = useState(false)
+  const onSaveChain = async (data: Form) => {
+    if (!data) {
+      Alert.alert('No chain provided')
+      return
+    }
+    try {
+      setLoading(true)
+      const savedChain = await dispatch(saveChain(data)).unwrap()
+
+      if (params.fromScreen === 'NewVault') {
+        await dispatch(setSelectedChain(savedChain))
+      }
+      // setLoading(false)
+      router.back()
+    } catch (error) {
+      Alert.alert('Error', 'Failed to save chain. Please try again.', [{ text: 'OK' }])
+      console.error('Failed to save chain:', error)
+      return
+    }
+  }
+
+  return (
+    <OnboardingLayout>
+      <Stack.Screen
+        options={{
+          header: (props) => <ScreenHeader {...props} title="New chain" />
+        }}
+      />
+      {/* <LoadingModal visible={loading} /> */}
+      <NetworkForm onSaveChain={onSaveChain} loading={loading} />
+    </OnboardingLayout>
+  )
+}
+
+export default Page

mobile/app/home/_layout.tsx

@@ -13,34 +13,14 @@ export default function AppLayout() {
 
   return (
     <Stack>
-      <Stack.Screen
-        name="home"
-        options={{
-          headerShown: false,
-          headerLargeTitle: true,
-          headerBackVisible: false
-        }}
-      />
+      <Stack.Screen name="home" />
       <Stack.Screen
         name="settings/index"
         options={{
           title: 'Settings',
           ...defaultOptions
         }}
       />
-      <Stack.Screen
-        name="settings/change-network"
-        options={{
-          title: 'Network',
-          ...defaultOptions
-        }}
-      />
-      <Stack.Screen
-        name="(modal)/vault-detail-modal"
-        options={{
-          presentation: 'modal'
-        }}
-      />
       <Stack.Screen
         name="(modal)/change-master-pass"
         options={{
@@ -56,7 +36,7 @@ export default function AppLayout() {
         }}
       />
 
-      <Stack.Screen name="vault" options={{ title: 'Vaults', headerShown: false, presentation: 'modal' }} />
+      <Stack.Screen name="vault" options={{ headerShown: false }} />
     </Stack>
   )
 }