Button gestures; clean up settings UX; cleanup lfos on unmount; Rende…

…r lights so they fade out when a connection goes away

package.json

@@ -27,7 +27,6 @@
   "dependencies": {
     "@noble/curves": "^1.6.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
-    "@react-native-community/slider": "^4.5.3",
     "@react-navigation/native": "^6.0.2",
     "@scure/base": "^1.1.8",
     "@scure/bip39": "^1.4.0",

src/animationHooks.tsx

@@ -0,0 +1,75 @@
+// NOTE: this whole file is copied from @shopify/react-native-skia, see TODO
+import { useEffect } from "react";
+
+import {
+    DataSourceParam,
+    SkImage,
+    useAnimatedImage,
+} from "@shopify/react-native-skia";
+const DEFAULT_FRAME_DURATION = 60;
+
+import {
+    FrameInfo,
+    SharedValue,
+    useFrameCallback,
+    useSharedValue,
+} from "react-native-reanimated";
+
+export const useAnimatedImageValue = (
+    source: DataSourceParam,
+    paused?: SharedValue<boolean>,
+) => {
+    const defaultPaused = useSharedValue(false);
+    const isPaused = paused ?? defaultPaused;
+    const currentFrame = useSharedValue<null | SkImage>(null);
+    const lastTimestamp = useSharedValue(-1);
+    const animatedImage = useAnimatedImage(
+        source,
+        (err) => {
+            console.error(err);
+            throw new Error(
+                `Could not load animated image - got '${err.message}'`,
+            );
+        },
+        false,
+    );
+    const frameDuration =
+        animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
+
+    useFrameCallback((frameInfo: FrameInfo) => {
+        if (!animatedImage) {
+            currentFrame.value = null;
+            return;
+        }
+        if (isPaused.value && lastTimestamp.value !== -1) {
+            return;
+        }
+        const { timestamp } = frameInfo;
+        const elapsed = timestamp - lastTimestamp.value;
+
+        // Check if it's time to switch frames based on GIF frame duration
+        if (elapsed < frameDuration) {
+            return;
+        }
+
+        // Update the current frame
+        animatedImage.decodeNextFrame();
+        // TODO: this whole file is copied from @shopify/react-native-skia because
+        // the following dispose call seems to be causing flickering in the animated
+        // image. Will try address upstream at some point, then delete this file.
+        //if (currentFrame.value) {
+        //  currentFrame.value.dispose();
+        //}
+        currentFrame.value = animatedImage.getCurrentFrame();
+
+        // Update the last timestamp
+        lastTimestamp.value = timestamp;
+    });
+    useEffect(() => {
+        return () => {
+            animatedImage?.dispose();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return currentFrame;
+};

src/app/(app)/_layout.tsx

@@ -1,28 +1,20 @@
-import { Redirect, Stack } from "expo-router";
+import { Stack } from "expo-router";
 import React from "react";
 
-import { AccountProvider } from "@/src/account/context";
-import { useAuthContext } from "@/src/auth/context";
+import { timedLog } from "@/src/common/utils";
 import { InProxyProvider } from "@/src/inproxy/context";
 
 export default function AppLayout() {
-    const { mnemonic, deviceNonce } = useAuthContext();
-
-    if (!mnemonic || !deviceNonce) {
-        // We are not authenticated
-        return <Redirect href="/" />;
-    }
+    timedLog("AppLayout");
     return (
-        <AccountProvider mnemonic={mnemonic} deviceNonce={deviceNonce}>
-            <InProxyProvider>
-                <Stack
-                    screenOptions={{
-                        headerShown: false,
-                    }}
-                >
-                    <Stack.Screen name="index" />
-                </Stack>
-            </InProxyProvider>
-        </AccountProvider>
+        <InProxyProvider>
+            <Stack
+                screenOptions={{
+                    headerShown: false,
+                }}
+            >
+                <Stack.Screen name="index" />
+            </Stack>
+        </InProxyProvider>
     );
 }

src/app/(app)/index.tsx

@@ -2,44 +2,52 @@ import React from "react";
 import { useWindowDimensions } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import { timedLog } from "@/src/common/utils";
 import { ConduitOrbToggle } from "@/src/components/ConduitOrbToggle";
 import { ConduitSettings } from "@/src/components/ConduitSettings";
 import { ConduitStatus } from "@/src/components/ConduitStatus";
 import { GitHash } from "@/src/components/GitHash";
 import { LogoWordmark } from "@/src/components/LogoWordmark";
 import { SafeAreaView } from "@/src/components/SafeAreaView";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 export default function HomeScreen() {
+    timedLog("HomeScreen");
     const win = useWindowDimensions();
     const insets = useSafeAreaInsets();
 
+    // NOTE this assumes a portrait layout.
     const totalUsableHeight = win.height - insets.top - insets.bottom;
     const totalUsableWidth = win.width - insets.left - insets.right;
     const logoWordmarkHeight = totalUsableHeight * 0.1;
-    // orb takes up a square with dimensions = width
-    // NOTE this assumes a portrait layout.
-    const conduitOrbToggleHeight = totalUsableWidth;
+    const conduitOrbToggleHeight = totalUsableHeight - logoWordmarkHeight;
+    // orb scene takes up a square of with dimensions = width
     const conduitStatusHeight =
-        totalUsableHeight - logoWordmarkHeight - conduitOrbToggleHeight;
+        totalUsableHeight - totalUsableWidth - logoWordmarkHeight;
 
     return (
-        <SafeAreaView>
-            {/* Header takes up 10% of vertical space */}
-            <LogoWordmark
-                width={totalUsableWidth}
-                height={logoWordmarkHeight}
-            />
-            {/* Orb takes up a square, full width */}
-            <ConduitOrbToggle size={conduitOrbToggleHeight} />
-            {/* Status takes up the rest of the vertical space */}
-            <ConduitStatus
-                width={totalUsableWidth}
-                height={conduitStatusHeight}
-            />
-            {/* Settings icon is absolutely positioned bottom right */}
-            <ConduitSettings />
-            {/* GIT_HASH absolutely positioned bottom left */}
-            <GitHash />
-        </SafeAreaView>
+        <GestureHandlerRootView>
+            <SafeAreaView>
+                {/* Header takes up 10% of vertical space */}
+                <LogoWordmark
+                    width={totalUsableWidth}
+                    height={logoWordmarkHeight}
+                />
+                {/* Status is an absolutely positioned background */}
+                <ConduitStatus
+                    width={totalUsableWidth}
+                    height={conduitStatusHeight}
+                />
+                {/* Orb takes up the rest of the height not used by LogoWordmark */}
+                <ConduitOrbToggle
+                    width={totalUsableWidth}
+                    height={conduitOrbToggleHeight}
+                />
+                {/* Settings icon is absolutely positioned bottom right */}
+                <ConduitSettings />
+                {/* GIT_HASH absolutely positioned bottom left */}
+                <GitHash />
+            </SafeAreaView>
+        </GestureHandlerRootView>
     );
 }

src/app/_layout.tsx

@@ -12,12 +12,14 @@ import i18nService from "@/src/i18n/i18n";
 i18nService.initI18n();
 
 import { AuthProvider } from "@/src/auth/context";
+import { timedLog } from "@/src/common/utils";
 import { fonts, palette } from "@/src/styles";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
+    timedLog("RootLayout");
     const [loaded] = useFonts({
         JuraRegular: fonts.JuraRegular,
         JuraBold: fonts.JuraBold,