Adds protect your account screen and updates button to take children

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

@@ -3,14 +3,11 @@ import { Tabs } from "expo-router";
 
 export default function Layout() {
   return (
-    <Tabs
-      screenOptions={{
-        headerShown: false,
-      }}
-    >
+    <Tabs>
       <Tabs.Screen
         name="index"
         options={{
+          headerShown: false,
           title: "Home",
           tabBarIcon: ({ focused, color, size }) => (
             <Ionicons

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

@@ -13,6 +13,7 @@ import { useEffect, useState } from "react";
 import { LinkButton } from "../../components/LinkButton";
 import { useQueries } from "@tanstack/react-query";
 import { Asset } from "../../data/facades/chain/types";
+import { Stack } from "expo-router";
 
 export default function Balances() {
   const facade = useFacade();
@@ -87,9 +88,11 @@ export default function Balances() {
 
   if (getAccountResult.data === null) {
     return (
-      <View style={styles.container}>
-        <LinkButton title="Onboarding" href="/onboarding/" />
-      </View>
+      <>
+        <View style={styles.container}>
+          <LinkButton title="Onboarding" href="/onboarding/" />
+        </View>
+      </>
     );
   }
 

packages/mobile-app/app/_layout.tsx

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

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

@@ -0,0 +1,33 @@
+import { Stack } from "expo-router";
+
+export default function OnboardingLayout() {
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          headerBackTitleVisible: false,
+        }}
+      >
+        <Stack.Screen
+          name="index"
+          options={{
+            headerShown: false,
+            title: "Create your account",
+          }}
+        />
+        <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,32 +1,31 @@
-import { StatusBar } from "expo-status-bar";
 import { StyleSheet, View } from "react-native";
-import { Text, Button, VStack } from "@ironfish/tackle-box";
+import { Text, VStack, HStack, Icon } from "@ironfish/tackle-box";
 import { LinkButton } from "@/components/LinkButton";
 import SecureOctopus from "@/assets/images/secure-octopus.svg";
-// import { useState } from "react";
-// import { useFacade } from "../../data/facades";
-// import { useRouter } from "expo-router";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "#fff",
     alignItems: "center",
     justifyContent: "center",
+    paddingBottom: 48,
+  },
+  content: {
+    display: "flex",
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingHorizontal: 16,
   },
 });
 
 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}>
-      <View style={{ display: "flex", alignItems: "center", padding: 24 }}>
-        <SecureOctopus style={{ marginBottom: 64 }} />
-        <VStack gap={8}>
+      <View style={styles.content}>
+        <SecureOctopus />
+        <VStack gap={6}>
           <Text textAlign="center" size="xl">
             Protect your account
           </Text>
@@ -37,17 +36,30 @@ export default function OnboardingCreate() {
           </Text>
         </VStack>
       </View>
-
-      <Button
+      <LinkButton
         borderRadius={1}
-        variant="outline"
-        title="Continue"
-        onClick={async () => {
-          // await createAccount.mutateAsync({ name: accountName });
-          // router.dismissAll();
-        }}
-      />
-      {/* <StatusBar style="auto" /> */}
+        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 muted>(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>
   );
 }

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

@@ -5,6 +5,7 @@ import { LinearGradient } from "expo-linear-gradient";
 
 import LogoWithText from "../../assets/images/logo-with-text.svg";
 import KeyPlantOrchid from "../../assets/images/key-plant--orchid.svg";
+import { Stack } from "expo-router";
 
 const styles = StyleSheet.create({
   background: {
@@ -14,7 +15,14 @@ const styles = StyleSheet.create({
 
 export default function Onboarding() {
   return (
-    <View style={{ padding: 24, flex: 1 }}>
+    <View
+      style={{
+        paddingTop: 80,
+        paddingBottom: 24,
+        paddingHorizontal: 24,
+        flex: 1,
+      }}
+    >
       <LinearGradient
         colors={["#FFF4E0", "#DE83F0"]}
         locations={[0, 1]}

packages/mobile-app/components/LinkButton.tsx

@@ -10,17 +10,23 @@ export function LinkButton({
   href,
   onPress,
   variant = "solid",
-  ...rest
+  borderRadius,
+  children,
 }: {
-  title: string;
-  href: string;
+  title?: string;
+  href?: string;
   onPress?: (event: GestureResponderEvent) => void;
   variant?: "solid" | "outline" | "ghost";
+  borderRadius?: number;
+  children?: React.ReactNode;
 }) {
+  const titleProp = title && !children ? { title } : {};
   return (
-    <Link href={href} asChild>
+    <Link href={href ?? undefined} asChild>
       <Pressable onPress={onPress}>
-        <Button variant={variant} title={title} {...rest} />
+        <Button variant={variant} {...titleProp} borderRadius={borderRadius}>
+          {children}
+        </Button>
       </Pressable>
     </Link>
   );

packages/tackle-box/lib/components/Button/Button.tsx

@@ -3,22 +3,28 @@ import { HStack, Text } from "@/index";
 import { Icon, type IconName } from "@/components/Icon/Icon";
 import { type OnClick, styles } from "./shared";
 
-type Props = {
+type BaseProps = {
   disabled?: boolean;
-  title: string;
   variant?: "solid" | "outline" | "ghost";
   onClick?: OnClick;
   rightIcon?: IconName;
   borderRadius?: number;
 };
 
+type Props = BaseProps &
+  (
+    | { title: string; children?: never }
+    | { title?: never; children: React.ReactNode }
+  );
+
 export function Button({
   title,
   disabled,
   onClick,
   rightIcon,
   variant = "solid",
   borderRadius,
+  children,
 }: Props) {
   const borderRadiusStyle = borderRadius
     ? styles.borderRadius(borderRadius)
@@ -40,11 +46,11 @@ export function Button({
         onClick(e);
       }}
     >
-      <ButtonContent title={title} rightIcon={rightIcon} />
+      {title ? <ButtonContent title={title} rightIcon={rightIcon} /> : children}
     </html.button>
   ) : (
     <html.div style={computedStyles}>
-      <ButtonContent title={title} rightIcon={rightIcon} />
+      {title ? <ButtonContent title={title} rightIcon={rightIcon} /> : children}
     </html.div>
   );
 }

packages/tackle-box/lib/components/Icon/Icon.tsx

@@ -3,13 +3,19 @@ import ArrowSend from "./svg/arrow-send.svg?react";
 import ArrowsBridge from "./svg/arrows-bridge.svg?react";
 import Gear from "./svg/gear.svg?react";
 import HamburgerMenu from "./svg/hamburger-menu.svg?react";
+import FaceId from "./svg/face-id.svg?react";
+import ChevronRight from "./svg/chevron-right.svg?react";
+import NumberPadOrchid from "./svg/number-pad--orchid.svg?react";
 
 const ICONS = {
   "arrow-receive": ArrowReceive,
   "arrow-send": ArrowSend,
   "arrows-bridge": ArrowsBridge,
+  "chevron-right": ChevronRight,
+  "face-id": FaceId,
   gear: Gear,
   "hamburger-menu": HamburgerMenu,
+  "number-pad-orchid": NumberPadOrchid,
 } as const;
 
 export type IconName = keyof typeof ICONS;