fix: white screen of death on iOS (#152)

* fix: add onboarding state to app store * fix: check if navigation state is initialized * fix: consistent naming, cleanup * fix: move redirect to _layout --------- Co-authored-by: René Aaron <[email protected]>
getAlby · Oct 7, 2024 · c3ce92b · c3ce92b
1 parent 3a390f2
commit c3ce92b
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 68 deletions.
diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx
@@ -1,25 +1,19 @@
 import { Redirect, Stack } from 'expo-router';
 import { useSession } from '~/hooks/useSession';
 import { useHandleLinking } from '~/hooks/useHandleLinking';
-import { secureStorage } from '~/lib/secureStorage';
-import { hasOnboardedKey } from '~/lib/state/appStore';
-import { useMemo } from 'react'; // Add useMemo
+import { useAppStore } from '~/lib/state/appStore';
+import { useRouteInfo } from 'expo-router/build/hooks';
 
 export default function AppLayout() {
     const { hasSession } = useSession();
+    const isOnboarded = useAppStore(store => store.isOnboarded);
+    const nwcClient = useAppStore(store => store.nwcClient);
+    const selectedWalletId = useAppStore((store) => store.selectedWalletId);
+    const route = useRouteInfo();
     useHandleLinking();
 
-    // Memoize the onboarded status to prevent unnecessary reads from storage
-    const isOnboarded = useMemo(() => {
-        return secureStorage.getItem(hasOnboardedKey);
-    }, []);
-
-    // Don't render while the onboarding state is loaded
-    if (isOnboarded === null) {
-        return null;
-    }
-
     if (!isOnboarded) {
+        console.log("Not onboarded, redirecting to /onboarding")
         return <Redirect href="/onboarding" />;
     }
 
@@ -28,5 +22,12 @@ export default function AppLayout() {
         return <Redirect href="/unlock" />;
     }
 
+    const connectionPage = `/settings/wallets/${selectedWalletId}/wallet-connection`;
+    // Check the current pathname to prevent redirect loops
+    if (!nwcClient && route.pathname !== connectionPage) {
+        console.log("No NWC client available, redirecting to wallet setup");
+        return <Redirect href={connectionPage} />;
+    }
+
     return <Stack />;
 }
diff --git a/hooks/useOnboarding.ts b/hooks/useOnboarding.ts
diff --git a/hooks/useSession.tsx b/hooks/useSession.tsx
@@ -25,8 +25,8 @@ export function useSession() {
 
 export function SessionProvider({ children }: PropsWithChildren) {
   const appStore = useAppStore();
-  const isSecurityEnabled = useAppStore(x => x.isSecurityEnabled);
-  const unlocked = useAppStore(x => x.unlocked)
+  const isSecurityEnabled = useAppStore(store => store.isSecurityEnabled);
+  const unlocked = useAppStore(store => store.unlocked)
 
   return (
     <AuthContext.Provider

diff --git a/lib/state/appStore.ts b/lib/state/appStore.ts
@@ -11,7 +11,9 @@ interface AppState {
   readonly wallets: Wallet[];
   readonly addressBookEntries: AddressBookEntry[];
   readonly isSecurityEnabled: boolean;
+  readonly isOnboarded: boolean;
   setUnlocked: (unlocked: boolean) => void;
+  setOnboarded: (isOnboarded: boolean) => void;
   setNWCClient: (nwcClient: NWCClient | undefined) => void;
   setNostrWalletConnectUrl(nostrWalletConnectUrl: string): void;
   removeNostrWalletConnectUrl(): void;
@@ -23,7 +25,6 @@ interface AppState {
   addWallet(wallet: Wallet): void;
   addAddressBookEntry(entry: AddressBookEntry): void;
   reset(): void;
-  showOnboarding(): void;
   getLastAlbyPayment(): Date | null;
   updateLastAlbyPayment(): void;
 }
@@ -32,10 +33,10 @@ const walletKeyPrefix = "wallet";
 const addressBookEntryKeyPrefix = "addressBookEntry";
 const selectedWalletIdKey = "selectedWalletId";
 const fiatCurrencyKey = "fiatCurrency";
+const hasOnboardedKey = "hasOnboarded";
+const lastAlbyPaymentKey = "lastAlbyPayment";
 export const isSecurityEnabledKey = "isSecurityEnabled";
-export const hasOnboardedKey = "hasOnboarded";
 export const lastActiveTimeKey = "lastActiveTime";
-const lastAlbyPaymentKey = "lastAlbyPayment";
 
 type Wallet = {
   name?: string;
@@ -116,6 +117,7 @@ export const useAppStore = create<AppState>()((set, get) => {
         nwcClient: undefined,
         selectedWalletId: 0,
         wallets: [{}],
+        isOnboarded: false,
       });
       return;
     }
@@ -153,12 +155,21 @@ export const useAppStore = create<AppState>()((set, get) => {
     nwcClient: getNWCClient(initialSelectedWalletId),
     fiatCurrency: secureStorage.getItem(fiatCurrencyKey) || "",
     isSecurityEnabled: iSecurityEnabled,
+    isOnboarded: secureStorage.getItem(hasOnboardedKey) === "true",
     selectedWalletId: initialSelectedWalletId,
     updateCurrentWallet,
     removeCurrentWallet,
     setUnlocked: (unlocked) => {
       set({ unlocked });
     },
+    setOnboarded: (isOnboarded) => {
+      if (isOnboarded) {
+        secureStorage.setItem(hasOnboardedKey, "true");
+      } else {
+        secureStorage.removeItem(hasOnboardedKey);
+      }
+      set({ isOnboarded });
+    },
     setNWCClient: (nwcClient) => set({ nwcClient }),
     removeNostrWalletConnectUrl: () => {
       updateCurrentWallet({
@@ -221,10 +232,6 @@ export const useAppStore = create<AppState>()((set, get) => {
     updateLastAlbyPayment: () => {
       secureStorage.setItem(lastAlbyPaymentKey, new Date().toString());
     },
-    showOnboarding() {
-      // clear onboarding status
-      secureStorage.removeItem(hasOnboardedKey);
-    },
     reset() {
       // clear wallets
       for (let i = 0; i < get().wallets.length; i++) {
@@ -258,6 +265,7 @@ export const useAppStore = create<AppState>()((set, get) => {
         wallets: [{}],
         addressBookEntries: [],
         isSecurityEnabled: false,
+        isOnboarded: false,
       });
     },
   };

diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -2,9 +2,8 @@ import { View, Pressable, StyleSheet, TouchableOpacity } from "react-native";
 import React, { useState } from "react";
 import { useBalance } from "hooks/useBalance";
 import { useAppStore } from "lib/state/appStore";
-import { WalletConnection } from "~/pages/settings/wallets/WalletConnection";
 import {
-  Link, router, useFocusEffect
+  Link, useFocusEffect
 } from "expo-router";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -19,7 +18,6 @@ import LargeArrowDown from "~/components/icons/LargeArrowDown";
 import { SvgProps } from "react-native-svg";
 import { Button } from "~/components/ui/button";
 import Screen from "~/components/Screen";
-import { useOnboarding } from "~/hooks/useOnboarding";
 import AlbyBanner from "~/components/AlbyBanner";
 
 dayjs.extend(relativeTime);
@@ -39,24 +37,10 @@ export function Home() {
     BalanceState.SATS,
   );
 
-  const isOnboarded = useOnboarding();
-  const hasNwcClient = !!nwcClient;
-
   useFocusEffect(() => {
     reloadBalance();
   });
 
-
-  React.useEffect(() => {
-    if (!hasNwcClient && isOnboarded) {
-      router.replace(`/settings/wallets/${selectedWalletId}/wallet-connection`);
-    }
-  }, [hasNwcClient, isOnboarded]);
-
-  if (!nwcClient && isOnboarded) {
-    return <WalletConnection />;
-  }
-
   function switchBalanceState(): void {
     if (balanceState == BalanceState.SATS) {
       setBalanceState(BalanceState.FIAT);

diff --git a/pages/Onboarding.tsx b/pages/Onboarding.tsx
@@ -4,12 +4,11 @@ import React from "react";
 import { View, Image } from "react-native";
 import { Button } from "~/components/ui/button";
 import { Text } from "~/components/ui/text";
-import { secureStorage } from "~/lib/secureStorage";
-import { hasOnboardedKey } from "~/lib/state/appStore";
+import { useAppStore } from "~/lib/state/appStore";
 
 export function Onboarding() {
   async function finish() {
-    secureStorage.setItem(hasOnboardedKey, "true");
+    useAppStore.getState().setOnboarded(true)
     router.replace("/");
   }
 

diff --git a/pages/settings/Settings.tsx b/pages/settings/Settings.tsx
@@ -86,8 +86,7 @@ export function Settings() {
                 className="flex flex-row gap-4"
                 onPress={() => {
                   router.dismissAll();
-                  useAppStore.getState().showOnboarding();
-                  router.replace("/onboarding");
+                  useAppStore.getState().setOnboarded(false);
                 }}
               >
                 <Egg className="text-foreground" />
@@ -109,7 +108,6 @@ export function Settings() {
                         onPress: () => {
                           router.dismissAll();
                           useAppStore.getState().reset();
-                          router.replace("/onboarding");
                         },
                       },
                     ],

diff --git a/pages/settings/wallets/EditWallet.tsx b/pages/settings/wallets/EditWallet.tsx
@@ -117,13 +117,10 @@ export function EditWallet() {
               {
                 text: "Confirm",
                 onPress: () => {
-                  if (useAppStore.getState().wallets.length == 1) {
-                    router.dismissAll();
-                    router.replace("/onboarding");
-                  } else {
+                  useAppStore.getState().removeCurrentWallet();
+                  if (wallets.length != 1) {
                     router.back();
                   }
-                  useAppStore.getState().removeCurrentWallet();
                 },
               },
             ],