Mobile create account landing (#89)

packages/mobile-app/app/(tabs)/_layout.tsx

@@ -1,101 +1,68 @@
 import { FontAwesome6, Ionicons, FontAwesome } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
-import { useState } from "react";
-import { Button, Modal, SafeAreaView, Text } from "react-native";
-import { LinkButton } from "../../components/LinkButton";
 
 export default function Layout() {
-  const [modalVisible, setModalVisible] = useState(false);
-
   return (
-    <>
-      <Modal animationType="slide" visible={modalVisible}>
-        <SafeAreaView style={{ flex: 1 }}>
-          <Text>Transact</Text>
-          <LinkButton
-            title="Receive"
-            href="/address/"
-            onPress={() => setModalVisible(false)}
-          />
-          <Text>Receive assets from another wallet</Text>
-          <LinkButton
-            title="Send"
-            href="/send/"
-            onPress={() => setModalVisible(false)}
-          />
-          <Text>Send assets to another wallet</Text>
-          <Button title="Close" onPress={() => setModalVisible(false)} />
-        </SafeAreaView>
-      </Modal>
-      <Tabs
-        screenOptions={{
+    <Tabs>
+      <Tabs.Screen
+        name="index"
+        options={{
+          headerShown: false,
+          title: "Home",
+          tabBarIcon: ({ focused, color, size }) => (
+            <Ionicons
+              name={focused ? "wallet" : "wallet-outline"}
+              size={size}
+              color={color}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="balances"
+        options={{
           headerShown: false,
+          tabBarIcon: ({ focused, color, size }) => (
+            <Ionicons
+              name={focused ? "wallet" : "wallet-outline"}
+              size={size}
+              color={color}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="transact"
+        options={{
+          title: "Transact",
+          headerShown: false,
+          tabBarIcon: ({ color, size }) => (
+            <FontAwesome6
+              name="arrow-right-arrow-left"
+              size={size}
+              color={color}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="contacts"
+        options={{
+          title: "Contacts",
+          tabBarIcon: ({ color, size }) => (
+            <FontAwesome name="user-circle-o" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="ui"
+        options={{
+          title: "UI Kit",
+          tabBarIcon: ({ color, size }) => (
+            <FontAwesome name="paint-brush" size={size} color={color} />
+          ),
         }}
-      >
-        <Tabs.Screen
-          name="index"
-          options={{
-            title: "Home",
-            tabBarIcon: ({ focused, color, size }) => (
-              <Ionicons
-                name={focused ? "wallet" : "wallet-outline"}
-                size={size}
-                color={color}
-              />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="balances"
-          options={{
-            title: "Balances",
-            tabBarIcon: ({ focused, color, size }) => (
-              <Ionicons
-                name={focused ? "wallet" : "wallet-outline"}
-                size={size}
-                color={color}
-              />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="transact"
-          listeners={{
-            tabPress: (e) => {
-              e.preventDefault();
-              setModalVisible(!modalVisible);
-            },
-          }}
-          options={{
-            title: "Transact",
-            tabBarIcon: ({ color, size }) => (
-              <FontAwesome6
-                name="arrow-right-arrow-left"
-                size={size}
-                color={color}
-              />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="contacts"
-          options={{
-            title: "Contacts",
-            tabBarIcon: ({ color, size }) => (
-              <FontAwesome name="user-circle-o" size={size} color={color} />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="ui"
-          options={{
-            title: "UI Kit",
-            tabBarIcon: ({ color, size }) => (
-              <FontAwesome name="paint-brush" size={size} color={color} />
-            ),
-          }}
-        />
-      </Tabs>
-    </>
+      />
+    </Tabs>
   );
 }

packages/mobile-app/app/(tabs)/transact.tsx

@@ -1,7 +1,24 @@
+import { Modal, SafeAreaView, Button } from "react-native";
+import { router } from "expo-router";
+import { Text } from "react-native";
+import { LinkButton } from "../../components/LinkButton";
+
 /**
- * This is a placeholder page to make the Expo Tabs layout work with
- * the Transact button as a modal.
+ * This is a placeholder page to show a modal with the Transact options.
  */
 export default function Transact() {
-  return null;
+  const isPresented = router.canGoBack();
+
+  return (
+    <Modal animationType="slide">
+      <SafeAreaView style={{ flex: 1 }}>
+        <Text>Transact</Text>
+        <LinkButton title="Receive" href="/address/" />
+        <Text>Receive assets from another wallet</Text>
+        <LinkButton title="Send" href="/send/" />
+        <Text>Send assets to another wallet</Text>
+        {isPresented && <Button title="Close" onPress={() => router.back()} />}
+      </SafeAreaView>
+    </Modal>
+  );
 }

packages/mobile-app/app/_layout.tsx

@@ -82,6 +82,12 @@ export default function Layout() {
                   headerShown: false,
                 }}
               />
+              <Stack.Screen
+                name="onboarding"
+                options={{
+                  headerShown: false,
+                }}
+              />
             </Stack>
           </DatabaseLoader>
         </FacadeProvider>

packages/mobile-app/app/onboarding/_layout.tsx

@@ -0,0 +1,30 @@
+import { Stack } from "expo-router";
+
+export default function OnboardingLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerBackTitleVisible: false,
+      }}
+    >
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name="create"
+        options={{
+          title: "Security",
+        }}
+      />
+      <Stack.Screen
+        name="name-account"
+        options={{
+          title: "Name your account",
+        }}
+      />
+    </Stack>
+  );
+}

packages/mobile-app/app/onboarding/create.tsx

@@ -1,40 +1,64 @@
-import { StatusBar } from "expo-status-bar";
-import { Button, StyleSheet, TextInput, View } from "react-native";
-import { useRouter } from "expo-router";
-import { useState } from "react";
-import { useFacade } from "../../data/facades";
-
-export default function OnboardingCreate() {
-  const router = useRouter();
-  const facade = useFacade();
-  const createAccount = facade.createAccount.useMutation();
-
-  const [accountName, setAccountName] = useState("Account Name");
-
-  return (
-    <View style={styles.container}>
-      <TextInput
-        placeholder="Account Name"
-        value={accountName}
-        onChangeText={setAccountName}
-      />
-      <Button
-        title="Continue"
-        onPress={async () => {
-          await createAccount.mutateAsync({ name: accountName });
-          router.dismissAll();
-        }}
-      />
-      <StatusBar style="auto" />
-    </View>
-  );
-}
+import { StyleSheet, View } from "react-native";
+import { Text, VStack, HStack, Icon } from "@ironfish/tackle-box";
+import { LinkButton } from "@/components/LinkButton";
+import SecureOctopus from "@/assets/images/secure-octopus.svg";
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: "#fff",
     alignItems: "center",
+    backgroundColor: "#fff",
+    flex: 1,
     justifyContent: "center",
+    paddingBottom: 48,
+  },
+  content: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "space-around",
+    paddingHorizontal: 16,
   },
 });
+
+export default function OnboardingCreate() {
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <SecureOctopus />
+        <VStack gap={6}>
+          <Text textAlign="center" size="xl">
+            Protect your account
+          </Text>
+          <Text textAlign="center" color="textSecondary">
+            Enabling biometric security or a PIN, your wallet becomes
+            exclusively accessible to you, providing a unique layer of
+            protection.
+          </Text>
+        </VStack>
+      </View>
+      <LinkButton
+        borderRadius={1}
+        variant="ghost"
+        href="/onboarding/biometrics"
+      >
+        <HStack justifyContent="space-between" alignItems="center" gap={8}>
+          <HStack alignItems="center" gap={4}>
+            <Icon name="face-id" />
+            <Text>
+              Face ID <Text color="textSecondary">(Recommended)</Text>
+            </Text>
+          </HStack>
+          <Icon name="chevron-right" />
+        </HStack>
+      </LinkButton>
+      <LinkButton borderRadius={1} variant="ghost" href="/onboarding/pin">
+        <HStack justifyContent="space-between" alignItems="center" gap={8}>
+          <HStack alignItems="center" gap={4}>
+            <Icon name="number-pad-orchid" />
+            <Text>Create a custom PIN</Text>
+          </HStack>
+          <Icon name="chevron-right" />
+        </HStack>
+      </LinkButton>
+    </View>
+  );
+}