Get settings working against mock context. Break apart inproxy contex…

…t into stats/reporting and operating halfs for better control over rendering

package.json

@@ -27,6 +27,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",

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>
     );
 }

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>
     );
 }

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;
+}

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");
             }