more design (#6)

* add particle swirl animation on start; more explicit InProxy status tracking
* fade more stuff in
* fix conduit status tracking for mock context
* make header a skia Canvas
* make settings icon a canvas

app.json

@@ -24,7 +24,8 @@
       "package": "ca.psiphon.conduit"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      "expo-video"
     ],
     "experiments": {
       "typedRoutes": true

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "android": "npm run  get-git-hash && expo run:android",
     "ios": "npm run  get-git-hash && expo run:ios",
-    "get-git-hash": "echo \"export const GIT_HASH = '$(git rev-parse --short HEAD)$(git status --porcelain | grep -q . && echo '-uncommitted')';\" > ./src/git-hash.ts",
+    "get-git-hash": "echo \"export const GIT_HASH = '$(git rev-parse --short HEAD)$(git status --porcelain | grep -q . && echo '?')';\" > ./src/git-hash.ts",
     "build-release": "npm run  get-git-hash && cd android && ./gradlew assembleRelease && cd ..",
     "test": "jest --verbose",
     "format": "prettier --write ./src",
@@ -46,6 +46,7 @@
     "expo-standard-web-crypto": "^1.8.1",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
+    "expo-video": "^1.2.6",
     "i18next": "^23.15.1",
     "micro-key-producer": "^0.7.0",
     "react": "18.2.0",

src/account/context.tsx

@@ -104,7 +104,7 @@ export function AccountProvider({
                     : DEFAULT_INPROXY_LIMIT_BYTES_PER_SECOND,
             });
 
-            // sets the inproxy parameters in the psiphon module. This call
+            // sets the inproxy parameters in the psiphon context. This call
             // also updates the context's state value for the inproxy
             // parameters, so an explicit call to sync them is not needed.
             // TODO: pending new psiphon module

src/app/(app)/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { useWindowDimensions } from "react-native";
 
-import { ConduitHeader } from "@/src/components/ConduitHeader";
 import { ConduitOrbToggle } from "@/src/components/ConduitOrbToggle";
 import { ConduitSettings } from "@/src/components/ConduitSettings";
 import { ConduitStatus } from "@/src/components/ConduitStatus";
+import { LogoWordmark } from "@/src/components/LogoWordmark";
 import { SafeAreaView } from "@/src/components/SafeAreaView";
 
 export default function HomeScreen() {
@@ -13,14 +13,15 @@ export default function HomeScreen() {
     return (
         <SafeAreaView>
             {/* Header takes up 10% of vertical space */}
-            <ConduitHeader width={win.width} height={win.height * 0.1} />
+            <LogoWordmark width={win.width} height={win.height * 0.1} />
             {/* Orb takes up a square, full width */}
             <ConduitOrbToggle size={win.width} />
             {/* Status takes up the rest of the vertical space */}
             <ConduitStatus
                 width={win.width}
                 height={win.height * 0.9 - win.width}
             />
+            {/* Settings icon is absolutely positioned */}
             <ConduitSettings />
         </SafeAreaView>
     );

src/app/_layout.tsx

@@ -3,18 +3,17 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
-import { polyfillWebCrypto } from "expo-standard-web-crypto";
+import * as SystemUI from "expo-system-ui";
 import { useEffect } from "react";
 import "react-native-reanimated";
 
 import i18nService from "@/src/i18n/i18n";
 
 i18nService.initI18n();
 
-polyfillWebCrypto();
-
 import { AuthProvider } from "@/src/auth/context";
 import { NotificationsProvider } from "@/src/notifications/context";
+import { palette } from "@/src/styles";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -29,6 +28,9 @@ export default function RootLayout() {
             SplashScreen.hideAsync();
         }
     }, [loaded]);
+    useEffect(() => {
+        SystemUI.setBackgroundColorAsync(palette.black).then(() => {});
+    }, []);
 
     const queryClient = new QueryClient();
 
@@ -41,13 +43,9 @@ export default function RootLayout() {
                             <Stack
                                 screenOptions={{
                                     headerShown: false,
-                                    animation: "fade",
                                 }}
                             >
-                                <Stack.Screen
-                                    name="(app)"
-                                    options={{ headerShown: false }}
-                                />
+                                <Stack.Screen name="(app)" />
                             </Stack>
                         </AuthProvider>
                     </NotificationsProvider>

src/app/index.tsx

@@ -37,7 +37,9 @@ export default function Index() {
     const conduitFlowerSvg = useSVG(
         require("@/assets/images/conduit-flower-icon.svg"),
     );
-    const testImage = useImage(require("@/assets/images/flower-no-bg.png"));
+    const conduitFlowerPng = useImage(
+        require("@/assets/images/flower-no-bg.png"),
+    );
 
     const canvasSize = 300;
     const cyclePalette = [
@@ -128,7 +130,7 @@ export default function Index() {
                                 height={flowerSize}
                             />
                             <Image
-                                image={testImage}
+                                image={conduitFlowerPng}
                                 width={flowerSize}
                                 height={flowerSize}
                             />