Initial UI (#3)

* install react-native-skia, start implementing UI with it

* mocked animated toggle button WIP

* preserve state before trying to randomize

* random orbs traversing the conduit

* color button text with action colour

* cleanup unused values

* add inproxyprovider mock for animation testing

* show some values for connected peers and bytes transferred, add graph, unify layout

* add app icons, setup splash screen and placeholder loading animation

* fade conduit status elements in and out depending on InProxy state

* cleanup AndroidManifest.xml and Info.plist

android/app/src/main/AndroidManifest.xml

@@ -24,10 +24,10 @@
         <action android:name="android.intent.action.VIEW"/>
         <category android:name="android.intent.category.DEFAULT"/>
         <category android:name="android.intent.category.BROWSABLE"/>
-        <data android:scheme="myapp"/>
         <data android:scheme="ca.psiphon.conduit"/>
+        <data android:scheme="conduit"/>
       </intent-filter>
     </activity>
     <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
   </application>
-</manifest>
+</manifest>

android/app/src/main/res/values/colors.xml

@@ -1,6 +1,6 @@
 <resources>
-  <color name="splashscreen_background">#ffffff</color>
-  <color name="iconBackground">#ffffff</color>
+  <color name="splashscreen_background">#000000</color>
+  <color name="iconBackground">#000000</color>
   <color name="colorPrimary">#023c69</color>
-  <color name="colorPrimaryDark">#ffffff</color>
+  <color name="colorPrimaryDark">#000000</color>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -4,7 +4,7 @@
     <item name="android:editTextStyle">@style/ResetEditText</item>
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="android:statusBarColor">#ffffff</item>
+    <item name="android:statusBarColor">#000000</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>

app.json

@@ -5,29 +5,24 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "myapp",
+    "scheme": "conduit",
     "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#000000"
     },
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "ca.psiphon.conduit"
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
+        "foregroundImage": "./assets/images/icon.png",
+        "backgroundColor": "#000000"
       },
       "package": "ca.psiphon.conduit"
     },
-    "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
     "plugins": [
       "expo-router"
     ],

ios/conduit.xcodeproj/project.pbxproj

@@ -351,7 +351,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = ca.psiphon.conduit;
-				PRODUCT_NAME = conduit;
+				PRODUCT_NAME = "conduit";
 				SWIFT_OBJC_BRIDGING_HEADER = "conduit/conduit-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -379,7 +379,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = ca.psiphon.conduit;
-				PRODUCT_NAME = conduit;
+				PRODUCT_NAME = "conduit";
 				SWIFT_OBJC_BRIDGING_HEADER = "conduit/conduit-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";

ios/conduit/Info.plist

@@ -27,7 +27,7 @@
       <dict>
         <key>CFBundleURLSchemes</key>
         <array>
-          <string>myapp</string>
+          <string>conduit</string>
           <string>ca.psiphon.conduit</string>
         </array>
       </dict>
@@ -74,4 +74,4 @@
     <key>UIViewControllerBasedStatusBarAppearance</key>
     <false/>
   </dict>
-</plist>
+</plist>

ios/conduit/conduit.entitlements

@@ -1,5 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-  <dict/>
+  <dict>
+    <key>aps-environment</key>
+    <string>development</string>
+  </dict>
 </plist>

package.json

@@ -30,6 +30,7 @@
     "@react-navigation/native": "^6.0.2",
     "@scure/base": "^1.1.8",
     "@scure/bip39": "^1.4.0",
+    "@shopify/react-native-skia": "^1.3.13",
     "@tanstack/react-query": "^5.56.2",
     "expo": "~51.0.28",
     "expo-clipboard": "^6.0.3",

src/account/context.tsx

@@ -12,11 +12,12 @@ import {
     DEFAULT_INPROXY_MAX_CLIENTS,
 } from "@/src/constants";
 // TODO: pending new psiphon module
-//import { usePsiphonVpnContext } from "@/src/psiphon/context";
+//import { useInProxyContext } from "@/src/psiphon/context";
 import {
     InProxyParametersSchema,
     formatConduitBip32Path,
 } from "@/src/psiphon/inproxy";
+import { useInProxyContext } from "@/src/psiphon/mockContext";
 
 export interface AccountContextValue {
     rootKeyPair: Ed25519KeyPair;
@@ -72,7 +73,7 @@ export function AccountProvider({
     }, [mnemonic]);
 
     // TODO: pending new psiphon module
-    //const { selectInProxyParameters } = usePsiphonVpnContext();
+    const { selectInProxyParameters } = useInProxyContext();
 
     // We store the user-controllable InProxy settings in AsyncStorage, so that
     // they can be persisted at the application layer instead of only at the VPN
@@ -107,7 +108,7 @@ export function AccountProvider({
             // 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
-            //await selectInProxyParameters(storedInProxyParameters);
+            await selectInProxyParameters(storedInProxyParameters);
 
             // Write the defaults to AsyncStorage if they aren't there
             if (!storedInProxyMaxClients) {

src/app/(app)/_layout.tsx

@@ -3,6 +3,7 @@ import React from "react";
 
 import { AccountProvider } from "@/src/account/context";
 import { useAuthContext } from "@/src/auth/context";
+import { InProxyProvider } from "@/src/psiphon/mockContext";
 
 export default function AppLayout() {
     const { mnemonic, deviceNonce } = useAuthContext();
@@ -12,14 +13,16 @@ export default function AppLayout() {
         return <Redirect href="/" />;
     }
     return (
-        <AccountProvider mnemonic={mnemonic} deviceNonce={deviceNonce}>
-            <Stack
-                screenOptions={{
-                    headerShown: false,
-                }}
-            >
-                <Stack.Screen name="index" />
-            </Stack>
-        </AccountProvider>
+        <InProxyProvider>
+            <AccountProvider mnemonic={mnemonic} deviceNonce={deviceNonce}>
+                <Stack
+                    screenOptions={{
+                        headerShown: false,
+                    }}
+                >
+                    <Stack.Screen name="index" />
+                </Stack>
+            </AccountProvider>
+        </InProxyProvider>
     );
 }

src/app/(app)/index.tsx

@@ -1,77 +1,25 @@
-import * as Notifications from "expo-notifications";
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { Pressable, Text, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useWindowDimensions } from "react-native";
 
-import { useAccountContext } from "@/src/account/context";
-import { NotificationsStatus } from "@/src/components/NotificationsStatus";
-import { ProxyID } from "@/src/components/ProxyID";
-import { getProxyId } from "@/src/psiphon/inproxy";
-import { palette, sharedStyles as ss } from "@/src/styles";
+import { ConduitHeader } from "@/src/components/ConduitHeader";
+import { ConduitOrbToggle } from "@/src/components/ConduitOrbToggle";
+import { ConduitStatus } from "@/src/components/ConduitStatus";
+import { SafeAreaView } from "@/src/components/SafeAreaView";
 
 export default function HomeScreen() {
-    const insets = useSafeAreaInsets();
-    const { conduitKeyPair } = useAccountContext();
-    const { t } = useTranslation();
-
-    const [message, setMessage] = React.useState("Conduit is OFF");
+    const win = useWindowDimensions();
 
     return (
-        <View
-            style={[
-                ss.flex,
-                ss.column,
-                {
-                    marginTop: insets.top,
-                    marginBottom: insets.bottom,
-                    marginLeft: insets.left,
-                    marginRight: insets.right,
-                },
-            ]}
-        >
-            <View style={[ss.flex, ss.padded]}>
-                <Text style={[ss.whiteText, ss.extraLargeFont]}>
-                    {">"} Conduit
-                </Text>
-            </View>
-            <View
-                style={[ss.flex, ss.column, ss.justifyCenter, ss.alignCenter]}
-            >
-                <Pressable
-                    style={({ pressed }) => [
-                        ss.justifyCenter,
-                        ss.alignCenter,
-                        ss.whiteBorder,
-                        ss.circle158,
-                        {
-                            backgroundColor: pressed
-                                ? palette.blue
-                                : palette.grey,
-                        },
-                    ]}
-                    onPress={async () => {
-                        await Notifications.requestPermissionsAsync();
-                        setMessage("Conduit is not implemented yet!");
-                        setTimeout(
-                            () => setMessage(t("CONDUIT_OFF_I18N.string")),
-                            5000,
-                        );
-                    }}
-                >
-                    <Text style={[ss.whiteText, ss.boldFont]}>
-                        {t("TURN_ON_I18N.string")}
-                    </Text>
-                </Pressable>
-                <Text style={[ss.whiteText, ss.bodyFont]}>{message}</Text>
-                <NotificationsStatus />
-            </View>
-            <View style={[ss.flex, ss.row, ss.justifyCenter, ss.alignCenter]}>
-                <Text style={[ss.whiteText, ss.bodyFont]}>
-                    {t("YOUR_ID_I18N.string")}{" "}
-                </Text>
-                <ProxyID proxyId={getProxyId(conduitKeyPair)} />
-            </View>
-        </View>
+        <SafeAreaView>
+            {/* Header takes up 10% of vertical space */}
+            <ConduitHeader 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 - win.width - 100}
+            />
+        </SafeAreaView>
     );
 }