fix: onboarding redirects

getAlby · Aug 30, 2024 · e55c162 · e55c162
1 parent 249a453
commit e55c162
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 68 deletions.
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -56,9 +56,7 @@ export default function RootLayout() {
     const checkOnboardingStatus = async () => {
       const hasOnboarded = await secureStorage.getItem("hasOnboarded");
       if (!hasOnboarded && hasNavigationState) {
-        router.push({
-          pathname: "/onboarding",
-        });
+        router.replace("/onboarding");
       }
     };
 

diff --git a/components/Icons.tsx b/components/Icons.tsx
@@ -33,6 +33,7 @@ import {
   Power,
   CameraOff,
   Palette,
+  Egg,
 } from "lucide-react-native";
 import { cssInterop } from "nativewind";
 
@@ -81,6 +82,7 @@ interopIcon(Hotel);
 interopIcon(Power);
 interopIcon(CameraOff);
 interopIcon(Palette);
+interopIcon(Egg);
 
 export {
   AlertCircle,
@@ -116,4 +118,5 @@ export {
   X,
   Power,
   Palette,
+  Egg,
 };
diff --git a/lib/state/appStore.ts b/lib/state/appStore.ts
@@ -19,6 +19,7 @@ interface AppState {
   addWallet(wallet: Wallet): void;
   addAddressBookEntry(entry: AddressBookEntry): void;
   reset(): void;
+  showOnboarding(): void;
 }
 
 const walletKeyPrefix = "wallet";
@@ -177,6 +178,10 @@ export const useAppStore = create<AppState>()((set, get) => {
         addressBookEntries: [...currentAddressBookEntries, addressBookEntry],
       });
     },
+    showOnboarding() {
+      // clear onboarding status
+      secureStorage.removeItem(hasOnboardedKey);
+    },
     reset() {
       // clear wallets
       for (let i = 0; i < get().wallets.length; i++) {

diff --git a/pages/Onboarding.tsx b/pages/Onboarding.tsx
@@ -7,30 +7,31 @@ import { secureStorage } from "~/lib/secureStorage";
 import { CameraIcon } from "lucide-react-native";
 
 export function Onboarding() {
+  async function finish() {
+    secureStorage.setItem("hasOnboarded", "true");
+    router.replace("/");
+  }
 
-    async function finish() {
-        secureStorage.setItem("hasOnboarded", "true");
-        router.push("/");
-    }
-
-    return (
-        <View className="flex-1 flex flex-col p-6 gap-3">
-            <Stack.Screen
-                options={{
-                    title: "Onboarding",
-                    headerShown: false,
-                }}
-            />
-            <View className="flex-1">
-                <CameraIcon />
-                <Text className="font-semibold2 text-2xl">Title</Text>
-                <Text className="font-medium2 text-xl text-muted-foreground">Description</Text>
-            </View>
-            <Link href="/home" asChild >
-                <Button size="lg" onPress={finish}>
-                    <Text>Finish</Text>
-                </Button>
-            </Link>
-        </View>
-    );
+  return (
+    <View className="flex-1 flex flex-col p-6 gap-3">
+      <Stack.Screen
+        options={{
+          title: "Onboarding",
+          headerShown: false,
+        }}
+      />
+      <View className="flex-1">
+        <CameraIcon />
+        <Text className="font-semibold2 text-2xl">Title</Text>
+        <Text className="font-medium2 text-xl text-muted-foreground">
+          Description
+        </Text>
+      </View>
+      <Link href="/" asChild>
+        <Button size="lg" onPress={finish}>
+          <Text>Finish</Text>
+        </Button>
+      </Link>
+    </View>
+  );
 }
diff --git a/pages/Wildcard.tsx b/pages/Wildcard.tsx
@@ -1,4 +1,4 @@
-import { usePathname } from "expo-router";
+import { Stack, usePathname } from "expo-router";
 import { View } from "react-native";
 import Loading from "~/components/Loading";
 import { Text } from "~/components/ui/text";
@@ -10,6 +10,12 @@ export function Wildcard() {
 
   return (
     <View className="flex-1 justify-center items-center flex flex-col gap-3">
+      <Stack.Screen
+        options={{
+          title: "",
+          header: () => null, // hide header completely
+        }}
+      />
       <Loading />
       <Text>Loading {pathname}</Text>
     </View>

diff --git a/pages/settings/Settings.tsx b/pages/settings/Settings.tsx
@@ -1,6 +1,6 @@
 import { Link, router, Stack } from "expo-router";
 import { Alert, Pressable, TouchableOpacity, View } from "react-native";
-import { Bitcoin, Palette, Power, Wallet2 } from "~/components/Icons";
+import { Bitcoin, Egg, Palette, Power, Wallet2 } from "~/components/Icons";
 
 import { DEFAULT_WALLET_NAME } from "~/lib/constants";
 import { useAppStore } from "~/lib/state/appStore";
@@ -26,9 +26,7 @@ export function Settings() {
       <Link href="/settings/wallets" asChild>
         <TouchableOpacity className="flex flex-row items-center gap-4">
           <Wallet2 className="text-foreground" />
-          <Text className="font-medium2 text-xl text-foreground">
-            Wallets
-          </Text>
+          <Text className="font-medium2 text-xl text-foreground">Wallets</Text>
           <Text className="text-muted-foreground text-xl">
             ({wallet.name || DEFAULT_WALLET_NAME})
           </Text>
@@ -44,47 +42,63 @@ export function Settings() {
         </TouchableOpacity>
       </Link>
 
-      <TouchableOpacity className="flex flex-row gap-4" onPress={toggleColorScheme}>
+      <TouchableOpacity
+        className="flex flex-row gap-4"
+        onPress={toggleColorScheme}
+      >
         <Palette className="text-foreground" />
-        <Text className="text-foreground font-medium2 text-xl">
-          Theme
-        </Text>
+        <Text className="text-foreground font-medium2 text-xl">Theme</Text>
         <Text className="text-muted-foreground text-xl">
           ({colorScheme.charAt(0).toUpperCase() + colorScheme.substring(1)})
         </Text>
       </TouchableOpacity>
 
       {developerMode && (
-        <View className="mt-5 flex flex-col gap-4">
-          <Text className="text-muted-foreground uppercase">Developer mode</Text>
-          <Pressable
-            className="flex flex-row gap-4"
-            onPress={() => {
-              Alert.alert(
-                "Reset",
-                "Are you sure you want to reset? You will be signed out of all your wallets. Your connection secrets and address book will be lost.",
-                [
-                  {
-                    text: "Cancel",
-                    style: "cancel",
-                  },
-                  {
-                    text: "Confirm",
-                    onPress: () => {
-                      router.dismissAll();
-                      useAppStore.getState().reset();
-                    },
-                  },
-                ],
-              );
-            }}
-          >
-            <Power className="text-destructive" />
-            <Text className="text-destructive font-medium2 text-xl">
-              Reset Wallet
+        <>
+          <View className="mt-5 flex flex-col gap-4">
+            <Text className="text-muted-foreground uppercase">
+              Developer mode
             </Text>
-          </Pressable>
-        </View>
+            <Pressable
+              className="flex flex-row gap-4"
+              onPress={() => {
+                router.dismissAll();
+                useAppStore.getState().showOnboarding();
+                router.replace("/onboarding");
+              }}
+            >
+              <Egg className="text-primary-foreground" />
+              <Text className="font-medium2 text-xl">Open Onboarding</Text>
+            </Pressable>
+            <Pressable
+              className="flex flex-row gap-4"
+              onPress={() => {
+                Alert.alert(
+                  "Reset",
+                  "Are you sure you want to reset? You will be signed out of all your wallets. Your connection secrets and address book will be lost.",
+                  [
+                    {
+                      text: "Cancel",
+                      style: "cancel",
+                    },
+                    {
+                      text: "Confirm",
+                      onPress: () => {
+                        router.dismissAll();
+                        useAppStore.getState().reset();
+                      },
+                    },
+                  ],
+                );
+              }}
+            >
+              <Power className="text-destructive" />
+              <Text className="text-destructive font-medium2 text-xl">
+                Reset Wallet
+              </Text>
+            </Pressable>
+          </View>
+        </>
       )}
       <TouchableOpacity
         className="flex-1"
@@ -96,7 +110,6 @@ export function Settings() {
             setDeveloperMode(true);
             Toast.show({
               text1: "You are now a developer",
-
             });
           } else if (newCounter > 1 && newCounter < 5) {
             Toast.show({
@@ -106,7 +119,9 @@ export function Settings() {
         }}
       >
         <View className="flex-1 flex-col items-center justify-end">
-          <Text className="text-foreground">Alby Mobile v{Constants.expoConfig?.version}</Text>
+          <Text className="text-foreground">
+            Alby Mobile v{Constants.expoConfig?.version}
+          </Text>
         </View>
       </TouchableOpacity>
     </View>