Conduit Settings UI (#4)

+ Break apart inproxy context into stats/reporting and operating halfs for better control over rendering
Psiphon-Inc · Sep 18, 2024 · 2b6f524 · 2b6f524
1 parent 938bdff
commit 2b6f524
Show file tree

Hide file tree

Showing 16 changed files with 734 additions and 121 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,4 +17,7 @@ web-build/
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
+# @end expo-cli
+
+# git hash version file
+src/git-hash.ts
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,9 +3,10 @@
   "main": "src/entrypoint",
   "version": "1.0.0",
   "scripts": {
-    "android": "expo run:android",
-    "build-release": "cd android && ./gradlew assembleRelease && cd ..",
-    "ios": "expo run:ios",
+    "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",
+    "build-release": "npm run  get-git-hash && cd android && ./gradlew assembleRelease && cd ..",
     "test": "jest --verbose",
     "format": "prettier --write ./src",
     "tsc": "tsc --noUnusedLocals --noUnusedParameters",
@@ -27,6 +28,7 @@
     "@expo/vector-icons": "^14.0.2",
     "@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",

diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx
@@ -3,7 +3,10 @@ import React from "react";
 
 import { AccountProvider } from "@/src/account/context";
 import { useAuthContext } from "@/src/auth/context";
-import { InProxyProvider } from "@/src/psiphon/mockContext";
+import {
+    InProxyActivityProvider,
+    InProxyProvider,
+} from "@/src/psiphon/mockContext";
 
 export default function AppLayout() {
     const { mnemonic, deviceNonce } = useAuthContext();
@@ -14,15 +17,17 @@ export default function AppLayout() {
     }
     return (
         <InProxyProvider>
-            <AccountProvider mnemonic={mnemonic} deviceNonce={deviceNonce}>
-                <Stack
-                    screenOptions={{
-                        headerShown: false,
-                    }}
-                >
-                    <Stack.Screen name="index" />
-                </Stack>
-            </AccountProvider>
+            <InProxyActivityProvider>
+                <AccountProvider mnemonic={mnemonic} deviceNonce={deviceNonce}>
+                    <Stack
+                        screenOptions={{
+                            headerShown: false,
+                        }}
+                    >
+                        <Stack.Screen name="index" />
+                    </Stack>
+                </AccountProvider>
+            </InProxyActivityProvider>
         </InProxyProvider>
     );
 }
diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx
@@ -3,6 +3,7 @@ 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 { SafeAreaView } from "@/src/components/SafeAreaView";
 
@@ -18,8 +19,9 @@ export default function HomeScreen() {
             {/* Status takes up the rest of the vertical space */}
             <ConduitStatus
                 width={win.width}
-                height={win.height - win.width - 100}
+                height={win.height * 0.9 - win.width}
             />
+            <ConduitSettings />
         </SafeAreaView>
     );
 }
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -30,3 +30,11 @@ export function niceBytes(bytes: number) {
 
     return `${bytes.toFixed(1)} ${unit}`;
 }
+
+export function bytesToMB(bytes: number) {
+    return bytes / 1024 / 1024;
+}
+
+export function MBToBytes(MB: number) {
+    return MB * 1024 * 1024;
+}
diff --git a/src/components/ConduitHeader.tsx b/src/components/ConduitHeader.tsx
@@ -1,8 +1,10 @@
-import { View } from "react-native";
+import { Text, View } from "react-native";
 
+import { ConduitFlowerIcon } from "@/src/components/svgs/ConduitFlowerIcon";
+import { ConduitWordmark } from "@/src/components/svgs/ConduitWordmark";
 import { palette, sharedStyles as ss } from "@/src/styles";
-import { ConduitFlowerIcon } from "./svgs/ConduitFlowerIcon";
-import { ConduitWordmark } from "./svgs/ConduitWordmark";
+// @ts-ignore
+import { GIT_HASH } from "@/src/git-hash";
 
 export function ConduitHeader({
     width,
@@ -20,9 +22,27 @@ export function ConduitHeader({
                 },
             ]}
         >
-            <View style={[ss.padded, ss.row, ss.alignCenter]}>
-                <ConduitFlowerIcon size={50} color={palette.white} />
-                <ConduitWordmark size={140} color={palette.white} />
+            <View style={[ss.row, ss.justifySpaceBetween]}>
+                <View style={[ss.padded, ss.row, ss.alignCenter]}>
+                    <ConduitFlowerIcon size={50} color={palette.white} />
+                    <ConduitWordmark size={140} color={palette.white} />
+                </View>
+                <View
+                    style={[
+                        ss.justifyCenter,
+                        ss.alignCenter,
+                        ss.paddedRight,
+                        { maxWidth: "30%" },
+                    ]}
+                >
+                    <Text
+                        adjustsFontSizeToFit
+                        numberOfLines={1}
+                        style={[ss.greyText, ss.bodyFont]}
+                    >
+                        v.{GIT_HASH}
+                    </Text>
+                </View>
             </View>
         </View>
     );

diff --git a/src/components/ConduitOrbToggle.tsx b/src/components/ConduitOrbToggle.tsx
@@ -27,13 +27,16 @@ import {
 } from "react-native-reanimated";
 
 //import { useInProxyContext } from "@/src/psiphon/context";
-import { useInProxyContext } from "@/src/psiphon/mockContext";
+import {
+    useInProxyActivityContext,
+    useInProxyContext,
+} from "@/src/psiphon/mockContext";
 import { palette, sharedStyles as ss } from "@/src/styles";
 
 export function ConduitOrbToggle({ size }: { size: number }) {
     const { t } = useTranslation();
-    const { toggleInProxy, isInProxyRunning, inProxyCurrentConnectedClients } =
-        useInProxyContext();
+    const { toggleInProxy, isInProxyRunning } = useInProxyContext();
+    const { inProxyCurrentConnectedClients } = useInProxyActivityContext();
 
     const radius = size / 4;
     const centeringTransform = [
@@ -113,13 +116,11 @@ export function ConduitOrbToggle({ size }: { size: number }) {
         if (isInProxyRunning()) {
             if (inProxyCurrentConnectedClients === 0) {
                 if (animationState !== "announcing") {
-                    console.log("enter announcing state");
                     animateAnnouncing();
                     setAnimationState("announcing");
                 }
             } else {
                 if (animationState !== "active") {
-                    console.log("enter peers connected state");
                     animatePeersConnected();
                     setAnimationState("active");
                 }
@@ -128,7 +129,6 @@ export function ConduitOrbToggle({ size }: { size: number }) {
         } else {
             randomizeVelocity.setActive(false);
             if (animationState !== "idle") {
-                console.log("enter idle state");
                 animateTurnOff();
                 setAnimationState("idle");
             }