fix: link handling (#147)

* fix: add debug log

* fix: toast ui for long messages

* fix: delay camera further on errors

* fix: nan error if no amount param is passed

* fix: link handling

fix: cleanup

fix: cleanup

fix: prevent nav

fix: nested layouts

fix: entry point & polyfills

fix: debugging

fix: debugging

fix: deep links & auth

fix: cleanup

* fix: enable developer mode based on build

* fix: split hook for testing to work

* fix: cleanup

* fix: review feedback

.github/workflows/pull_requests.yml

@@ -32,6 +32,9 @@ jobs:
       - name: 🚀 Build app
         run: eas build --non-interactive --platform android --local --profile preview --output=./app-release.apk
 
+      - name: 🧪 Run tests
+        run: yarn test:ci
+
       - name: Upload Artifact
         uses: actions/upload-artifact@v4
         with:

app/(app)/_layout.tsx

@@ -0,0 +1,20 @@
+import { Redirect, Stack } from 'expo-router';
+import { useSession } from '~/hooks/useSession';
+import { useHandleLinking } from '~/hooks/useHandleLinking';
+
+export default function AppLayout() {
+    const { hasSession } = useSession();
+    useHandleLinking();
+
+    // Only require authentication within the (app) group's layout as users
+    // need to be able to access the (auth) group and sign in again.
+    if (!hasSession) {
+        console.log("Not authenticated, redirecting to /unlock")
+        // On web, static rendering will stop here as the user is not authenticated
+        // in the headless Node process that the pages are rendered in.
+        return <Redirect href="/unlock" />;
+    }
+
+    // This layout can be deferred because it's not the root layout.
+    return <Stack />;
+}

app/index.js → app/(app)/index.js

@@ -1,4 +1,4 @@
-import { Home } from "../pages/Home";
+import { Home } from "../../pages/Home";
 
 export default function Page() {
   return <Home />;

app/receive/index.js → app/(app)/receive/index.js

@@ -1,4 +1,4 @@
-import { Receive } from "../../pages/receive/Receive";
+import { Receive } from "../../../pages/receive/Receive";
 
 export default function Page() {
   return <Receive />;

app/(app)/receive/success.js

@@ -0,0 +1,5 @@
+import { ReceiveSuccess } from "../../../pages/receive/ReceiveSuccess";
+
+export default function Page() {
+  return <ReceiveSuccess />;
+}

app/(app)/send/address-book.js

@@ -0,0 +1,5 @@
+import { AddressBook } from "../../../pages/send/AddressBook";
+
+export default function Page() {
+  return <AddressBook />;
+}

app/(app)/send/confirm.js

@@ -0,0 +1,5 @@
+import { ConfirmPayment } from "../../../pages/send/ConfirmPayment";
+
+export default function Page() {
+  return <ConfirmPayment />;
+}

app/send/index.js → app/(app)/send/index.js

@@ -1,4 +1,4 @@
-import { Send } from "../../pages/send/Send";
+import { Send } from "../../../pages/send/Send";
 
 export default function Page() {
   return <Send />;

app/send/lnurl-pay.js → app/(app)/send/lnurl-pay.js

@@ -1,4 +1,4 @@
-import { LNURLPay } from "../../pages/send/LNURLPay";
+import { LNURLPay } from "../../../pages/send/LNURLPay";
 
 export default function Page() {
   return <LNURLPay />;

app/(app)/send/success.js

@@ -0,0 +1,5 @@
+import { PaymentSuccess } from "../../../pages/send/PaymentSuccess";
+
+export default function Page() {
+  return <PaymentSuccess />;
+}

app/(app)/settings/address-book/new.js

@@ -0,0 +1,5 @@
+import { NewAddressBookEntry } from "../../../../pages/settings/address-book/NewAddressBookEntry";
+
+export default function Page() {
+  return <NewAddressBookEntry />;
+}

app/(app)/settings/fiat-currency.js

@@ -0,0 +1,5 @@
+import { FiatCurrency } from "../../../pages/settings/FiatCurrency";
+
+export default function Page() {
+  return <FiatCurrency />;
+}

app/(app)/settings/index.js

@@ -0,0 +1,5 @@
+import { Settings } from "../../../pages/settings/Settings";
+
+export default function Page() {
+  return <Settings />;
+}

app/(app)/settings/security.js

@@ -0,0 +1,5 @@
+import { Security } from "../../../pages/settings/Security";
+
+export default function Page() {
+  return <Security />;
+}

app/(app)/settings/wallets/[id]/index.js

@@ -0,0 +1,5 @@
+import { EditWallet } from "../../../../../pages/settings/wallets/EditWallet";
+
+export default function Page() {
+  return <EditWallet />;
+}

app/(app)/settings/wallets/[id]/lightning-address.js

@@ -0,0 +1,5 @@
+import { LightningAddress } from "../../../../../pages/settings/wallets/LightningAddress";
+
+export default function Page() {
+  return <LightningAddress />;
+}

app/(app)/settings/wallets/[id]/name.js

@@ -0,0 +1,5 @@
+import { RenameWallet } from "../../../../../pages/settings/wallets/RenameWallet";
+
+export default function Page() {
+  return <RenameWallet />;
+}

app/(app)/settings/wallets/[id]/wallet-connection.js

@@ -0,0 +1,5 @@
+import { WalletConnection } from "../../../../../pages/settings/wallets/WalletConnection";
+
+export default function Page() {
+  return <WalletConnection />;
+}

app/(app)/settings/wallets/index.js

@@ -0,0 +1,5 @@
+import { Wallets } from "../../../../pages/settings/Wallets";
+
+export default function Page() {
+  return <Wallets />;
+}

app/(app)/settings/wallets/new.js

@@ -0,0 +1,5 @@
+import { NewWallet } from "../../../../pages/settings/wallets/NewWallet";
+
+export default function Page() {
+  return <NewWallet />;
+}

app/transaction.js → app/(app)/transaction.js

@@ -1,4 +1,4 @@
-import { Transaction } from "../pages/Transaction";
+import { Transaction } from "../../pages/Transaction";
 
 export default function Page() {
   return <Transaction />;

app/transactions.js → app/(app)/transactions.js

@@ -1,4 +1,4 @@
-import { Transactions } from "../pages/Transactions";
+import { Transactions } from "../../pages/Transactions";
 
 export default function Page() {
   return <Transactions />;

app/_layout.tsx

@@ -1,12 +1,8 @@
-import "../lib/applyGlobalPolyfills";
-
 import "~/global.css";
 import { Theme, ThemeProvider } from "@react-navigation/native";
 import {
-  router,
-  SplashScreen,
-  Stack,
-  useRootNavigationState,
+  Slot,
+  SplashScreen, useRouter
 } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import * as React from "react";
@@ -22,11 +18,10 @@ import * as Font from "expo-font";
 import { useInfo } from "~/hooks/useInfo";
 import { secureStorage } from "~/lib/secureStorage";
 import { hasOnboardedKey, useAppStore } from "~/lib/state/appStore";
-import { usePathname } from "expo-router";
 import { UserInactivityProvider } from "~/context/UserInactivity";
 import { PortalHost } from '@rn-primitives/portal';
 import { isBiometricSupported } from "~/lib/isBiometricSupported";
-import { useHandleLinking } from "~/hooks/useHandleLinking";
+import { SessionProvider } from "~/hooks/useSession";
 
 const LIGHT_THEME: Theme = {
   dark: false,
@@ -45,26 +40,21 @@ export {
 // Prevent the splash screen from auto-hiding before getting the color scheme.
 SplashScreen.preventAutoHideAsync();
 
-// export const unstable_settings = {
-//   initialRouteName: "index",
-// };
+export const unstable_settings = {
+  initialRouteName: "(app)/index",
+};
 
 export default function RootLayout() {
   const { isDarkColorScheme } = useColorScheme();
   const [fontsLoaded, setFontsLoaded] = React.useState(false);
   const [checkedOnboarding, setCheckedOnboarding] = React.useState(false);
-  const isUnlocked = useAppStore((store) => store.unlocked);
-  const pathname = usePathname();
+  const router = useRouter();
 
-  useHandleLinking();
   useConnectionChecker();
 
-  const rootNavigationState = useRootNavigationState();
-  const hasNavigationState = !!rootNavigationState?.key;
-
   async function checkOnboardingStatus() {
     const hasOnboarded = await secureStorage.getItem(hasOnboardedKey);
-    if (!hasOnboarded && hasNavigationState) {
+    if (!hasOnboarded) {
       router.replace("/onboarding");
     }
 
@@ -104,15 +94,7 @@ export default function RootLayout() {
     };
 
     init();
-  }, [hasNavigationState]);
-
-  React.useEffect(() => {
-    if (hasNavigationState && !isUnlocked) {
-      if (pathname !== "/unlock") {
-        router.push("/unlock");
-      }
-    }
-  }, [isUnlocked, hasNavigationState]);
+  }, []);
 
   if (!fontsLoaded || !checkedOnboarding) {
     return null;
@@ -125,7 +107,9 @@ export default function RootLayout() {
         <PolyfillCrypto />
         <SafeAreaView className="w-full h-full bg-background">
           <UserInactivityProvider>
-            <Stack />
+            <SessionProvider>
+              <Slot />
+            </SessionProvider>
           </UserInactivityProvider>
           <Toast config={toastConfig} position="bottom" bottomOffset={140} topOffset={140} />
           <PortalHost />

babel.config.js

@@ -4,6 +4,7 @@ module.exports = function (api) {
     presets: [
       ["babel-preset-expo", { jsxImportSource: "nativewind" }],
       "nativewind/babel",
+      "@babel/preset-typescript",
     ],
   };
 };

components/Icons.tsx

@@ -38,6 +38,7 @@ import {
   HelpCircle,
   CircleCheck,
   TriangleAlert,
+  LogOut,
 } from "lucide-react-native";
 import { cssInterop } from "nativewind";
 
@@ -91,6 +92,7 @@ interopIcon(Fingerprint);
 interopIcon(HelpCircle);
 interopIcon(CircleCheck);
 interopIcon(TriangleAlert);
+interopIcon(LogOut);
 
 export {
   AlertCircle,
@@ -131,4 +133,5 @@ export {
   HelpCircle,
   CircleCheck,
   TriangleAlert,
+  LogOut
 };

components/ToastConfig.tsx

@@ -8,7 +8,7 @@ import { useAppStore } from "~/lib/state/appStore";
 
 export const toastConfig: ToastConfig = {
   success: ({ text1, text2 }) => (
-    <View className="bg-foreground rounded-full px-6 py-3 mx-6">
+    <View className="bg-foreground rounded-xl px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
         <CircleCheck className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
@@ -17,7 +17,7 @@ export const toastConfig: ToastConfig = {
     </View>
   ),
   error: ({ text1, text2, hide }) => (
-    <View className="bg-destructive rounded-full px-6 py-3 mx-6">
+    <View className="bg-destructive rounded-xl px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
         <XCircle className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
@@ -28,7 +28,7 @@ export const toastConfig: ToastConfig = {
   connectionError: ({ text1, text2, hide }) => {
     const selectedWalletId = useAppStore((store) => store.selectedWalletId);
     return (
-      <View className="bg-foreground rounded-full px-6 py-3 mx-6 flex flex-col gap-2">
+      <View className="bg-foreground rounded-xl px-6 py-3 mx-6 flex flex-col gap-2">
         <View className="flex flex-row gap-2 justify-center items-center">
           <XCircle className="text-background" width={16} height={16} />
           <Text className="text-background font-semibold2">{text1}</Text>