Allow changing current network

tkhq · Apr 28, 2023 · b9129ff · b9129ff
1 parent 40ddfd9
commit b9129ff
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 80 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@ethersproject/shims": "~5.7.0",
+    "@expo/react-native-action-sheet": "~4.0.1",
     "@expo/vector-icons": "~13.0.0",
     "@peculiar/webcrypto": "~1.4.3",
     "@react-navigation/native": "~6.1.6",

diff --git a/src/AppRoot.tsx b/src/AppRoot.tsx
@@ -1,11 +1,12 @@
+import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { NavigationContainer, useNavigation } from "@react-navigation/native";
 import {
   createNativeStackNavigator,
   type NativeStackNavigationProp,
 } from "@react-navigation/native-stack";
 import { StatusBar } from "expo-status-bar";
-import { Pressable } from "react-native";
+import { TouchableOpacity } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { TurnkeyWalletContextProvider } from "./TurnkeyWalletContext";
 import { HomeScreen } from "./screens/HomeScreen";
@@ -22,26 +23,28 @@ export function AppRoot() {
   return (
     <>
       <TurnkeyWalletContextProvider>
-        <SafeAreaProvider>
-          <NavigationContainer>
-            <Stack.Navigator initialRouteName="wallet">
-              <Stack.Screen
-                name="wallet"
-                options={{
-                  title: "Wallet",
-                  headerLargeTitle: true,
-                  headerRight: SettingsButton,
-                }}
-                component={HomeScreen}
-              />
-              <Stack.Screen
-                name="settings"
-                options={{ title: "Settings", presentation: "modal" }}
-                component={SettingsScreen}
-              />
-            </Stack.Navigator>
-          </NavigationContainer>
-        </SafeAreaProvider>
+        <ActionSheetProvider>
+          <SafeAreaProvider>
+            <NavigationContainer>
+              <Stack.Navigator initialRouteName="wallet">
+                <Stack.Screen
+                  name="wallet"
+                  options={{
+                    title: "Wallet",
+                    headerLargeTitle: true,
+                    headerRight: SettingsButton,
+                  }}
+                  component={HomeScreen}
+                />
+                <Stack.Screen
+                  name="settings"
+                  options={{ title: "Settings", presentation: "modal" }}
+                  component={SettingsScreen}
+                />
+              </Stack.Navigator>
+            </NavigationContainer>
+          </SafeAreaProvider>
+        </ActionSheetProvider>
       </TurnkeyWalletContextProvider>
 
       <StatusBar style="auto" />
@@ -54,13 +57,12 @@ function SettingsButton() {
     useNavigation<NativeStackNavigationProp<TStackParamList>>();
 
   return (
-    <Pressable
-      style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
+    <TouchableOpacity
       onPress={() => {
         navigation.navigate("settings");
       }}
     >
       <Ionicons name="settings-outline" size={24} />
-    </Pressable>
+    </TouchableOpacity>
   );
 }
diff --git a/src/TurnkeyWalletContext.tsx b/src/TurnkeyWalletContext.tsx
@@ -15,20 +15,23 @@ const TURNKEY_PRIVATE_KEY_ID =
 const ALCHEMY_API_KEY = ExpoConstants.manifest?.extra?.ALCHEMY_API_KEY;
 
 // This is the list that Alchemy supports in Ethers v5
-type TNetwork =
-  | "homestead"
-  | "goerli"
-  | "matic"
-  | "maticmum"
-  | "arbitrum"
-  | "arbitrum-goerli"
-  | "optimism"
-  | "optimism-goerli";
+export const alchemyNetworkList = [
+  "homestead",
+  "goerli",
+  "matic",
+  "maticmum",
+  "arbitrum",
+  "arbitrum-goerli",
+  "optimism",
+  "optimism-goerli",
+] as const;
+
+export type TAlchemyNetwork = (typeof alchemyNetworkList)[number];
 
 type TTurnkeyWalletContextValue = {
   signer: TurnkeySigner;
-  network: TNetwork;
-  setNetwork: (x: TNetwork) => void;
+  network: TAlchemyNetwork;
+  setNetwork: (x: TAlchemyNetwork) => void;
   privateKeyId: string;
   setPrivateKeyId: (x: string) => void;
 };
@@ -44,7 +47,7 @@ export function TurnkeyWalletContextProvider(props: {
   const [privateKeyId, setPrivateKeyId] = React.useState(
     TURNKEY_PRIVATE_KEY_ID
   );
-  const [network, setNetwork] = React.useState<TNetwork>("goerli");
+  const [network, setNetwork] = React.useState<TAlchemyNetwork>("goerli");
 
   const contextValue = React.useMemo(
     () => ({

diff --git a/src/components/design.tsx b/src/components/design.tsx
@@ -34,23 +34,23 @@ export function LabeledRow(props: {
   label: string;
   value: string;
   auxiliary?: string;
-  onValuePress?: () => void | Promise<void>;
+  onValuePress?: (() => void) | (() => Promise<void>);
 }) {
   const { label, value, auxiliary, onValuePress } = props;
 
   return (
-    <LabeledContent label={label} auxiliary={auxiliary}>
-      <TouchableOpacity
-        onPress={
-          onValuePress ??
-          (() => {
-            Clipboard.setStringAsync(value);
-          })
-        }
-      >
+    <TouchableOpacity
+      onPress={
+        onValuePress ??
+        (() => {
+          Clipboard.setStringAsync(value);
+        })
+      }
+    >
+      <LabeledContent label={label} auxiliary={auxiliary}>
         <MonospacedText>{value}</MonospacedText>
-      </TouchableOpacity>
-    </LabeledContent>
+      </LabeledContent>
+    </TouchableOpacity>
   );
 }
 
@@ -108,6 +108,7 @@ const styles = StyleSheet.create({
   auxiliary: {
     fontSize: 14,
     lineHeight: 14 * 1.5,
+    color: "#475569",
   },
   mono: {
     fontSize: 14,