OCB GC AP

app.json

@@ -31,7 +31,8 @@
       "scheme": "onrampdemo"
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/favicon.png",
+      "applicationId": "com.coinbase.onramp.demo"
     },
     "extra": {
       "eas": {

app/(tabs)/_layout.tsx

@@ -2,6 +2,7 @@ import { Tabs } from "expo-router";
 import React from "react";
 
 import WalletIcon from "@/assets/icons/WalletIcon";
+import GearIcon from "@/assets/icons/GearIcon";
 import { HapticTab } from "@/components/HapticTab";
 import { ThemedText } from "@/components/ThemedText";
 import { IconSymbol } from "@/components/ui/IconSymbol";
@@ -46,6 +47,7 @@ export default function TabLayout() {
           ),
         }}
       />
+
       <Tabs.Screen
         name="wallet"
         options={{
@@ -69,6 +71,30 @@ export default function TabLayout() {
           ),
         }}
       />
+
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ color, focused }) => (
+            <GearIcon
+              width={28}
+              height={28}
+              color={focused ? primaryColor : color}
+            />
+          ),
+          tabBarLabel: ({ focused, color }) => (
+            <ThemedText
+              style={{
+                fontSize: 12,
+                color: focused ? primaryColor : color,
+              }}
+            >
+              Settings
+            </ThemedText>
+          ),
+        }}
+      />
     </Tabs>
   );
 }

app/(tabs)/settings.tsx

@@ -0,0 +1,92 @@
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { useThemeColor } from "@/hooks/useThemeColor";
+import { Ionicons } from "@expo/vector-icons";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function SettingsScreen() {
+  const [isSandboxMode, setIsSandboxMode] = useState(false);
+
+  const insets = useSafeAreaInsets();
+  const foregroundMuted = useThemeColor({}, "foregroundMuted");
+  const handleToggleSandboxMode = useCallback(() => {
+    setIsSandboxMode(!isSandboxMode);
+    AsyncStorage.setItem("isSandboxMode", (!isSandboxMode).toString());
+  }, [isSandboxMode]);
+
+  useEffect(() => {
+    const getIsSandboxMode = async () => {
+      const isSandboxMode = await AsyncStorage.getItem("isSandboxMode");
+      if (isSandboxMode) {
+        setIsSandboxMode(isSandboxMode === "true");
+      }
+    };
+    getIsSandboxMode();
+  }, []);
+
+  return (
+    <ThemedView style={{ flex: 1 }}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ flex: 1, paddingTop: insets.top }}
+      >
+        <ThemedText type="subtitle" style={{ textAlign: "center", height: 56 }}>
+          Settings
+        </ThemedText>
+        <ScrollView
+          style={styles.scroll}
+          contentContainerStyle={[styles.scrollContent]}
+        >
+          <TouchableOpacity
+            onPress={() => router.push("/user-info")}
+            style={styles.settingRow}
+          >
+            <ThemedText>User Info</ThemedText>
+            <Ionicons
+              name="chevron-forward-outline"
+              size={24}
+              color={foregroundMuted}
+            />
+          </TouchableOpacity>
+
+          <View style={styles.settingRow}>
+            <ThemedText>Apple Pay Guest Checkout Sandbox Mode</ThemedText>
+
+            <Switch
+              value={isSandboxMode}
+              onValueChange={handleToggleSandboxMode}
+            />
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+  },
+  scrollContent: {
+    gap: 24,
+    padding: 16,
+  },
+  settingRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+  },
+});

app/(tabs)/wallet.tsx

@@ -1,3 +1,4 @@
+import { Balance } from "@/components/Balance/Balance";
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
 import { WalletDetails } from "@/components/WalletDetails/WalletDetails";
@@ -16,7 +17,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 export default function WalletScreen() {
   const { logout } = useLogout();
   const insets = useSafeAreaInsets();
-  const { allNetworks, network } = useApp();
+  const { network } = useApp();
 
   const [selectedNetwork, setSelectedNetwork] = useState<OnrampNetwork>(
     network!
@@ -45,8 +46,8 @@ export default function WalletScreen() {
 
   const handleChangeNetwork = useCallback(
     async (network: OnrampNetwork) => {
-      setSelectedNetwork(network);
       await switchEVMChain(network.chainId);
+      setSelectedNetwork(network);
     },
     [switchEVMChain]
   );
@@ -68,16 +69,17 @@ export default function WalletScreen() {
       ]}
     >
       <View style={styles.content}>
-        {/* <Balance
+         <Balance
           network={selectedNetwork}
           onNetworkChange={handleChangeNetwork}
-        /> */}
+          address={currentWallet?.address}
+        />
 
-        <WalletDetails
+        {/* <WalletDetails
           address={currentWallet?.address}
           network={selectedNetwork}
           onNetworkChange={handleChangeNetwork}
-        />
+        /> */}
 
         <ThemedText>
           You can export your wallet by clicking the button below. It will take

app/_layout.tsx

@@ -8,7 +8,7 @@ import {
   ThemeProvider,
 } from "@react-navigation/native";
 import { useFonts } from "expo-font";
-import { Slot } from "expo-router";
+import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
 import { StyleSheet } from "react-native";
@@ -60,16 +60,45 @@ export default function RootLayout() {
   return (
     <GestureHandlerRootView style={styles.container}>
       <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-        <PrivyProvider
-          appId={PRIVY_APP_ID}
-          clientId={PRIVY_CLIENT_ID}
-          // supportedChains={[base, polygon, unichain]}
+        <PrivyProvider appId={PRIVY_APP_ID} clientId={PRIVY_CLIENT_ID} 
+            config={{
+              embedded: {
+                  ethereum: {
+                      createOnLogin: 'users-without-wallets',
+                  },
+                  solana: {
+                      createOnLogin: 'users-without-wallets',
+                  },
+              },
+          }}
         >
           <PrivyElements />
           <AppProvider>
             <BottomSheetModalProvider>
               <BottomSheetProvider>
-                <Slot />
+                <Stack screenOptions={{ headerShown: false }}>
+                  <Stack.Screen
+                    name="(tabs)"
+                    options={{ headerShown: false }}
+                  />
+                  <Stack.Screen
+                    name="user-info"
+                    options={{
+                      headerShown: true,
+                      headerBackButtonDisplayMode: "minimal",
+                      //presentation: "modal",
+                      // headerStyle: {
+                      //   backgroundColor:
+                      //     colorScheme === "dark" ? "#000" : "#fff",
+                      // },
+                      headerTitle: "User Info",
+                      //headerTintColor: colorScheme === "dark" ? "#fff" : "#000",
+                      // headerTitleStyle: {
+                      //   fontFamily: "Inter_600SemiBold",
+                      // },
+                    }}
+                  />
+                </Stack>
                 {loaded && <LoadingOverlay />}
               </BottomSheetProvider>
             </BottomSheetModalProvider>

app/user-info.tsx

@@ -0,0 +1,65 @@
+import Button from "@/components/Button/Button";
+import { Input } from "@/components/Input/Input";
+import { PhoneNumberInput } from "@/components/PhoneNumberInput/PhoneNumberInput";
+import { ThemedView } from "@/components/ThemedView";
+import { useApp } from "@/context/AppContext";
+import { router } from "expo-router";
+import { useCallback } from "react";
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  View,
+} from "react-native";
+
+export default function UserInfoScreen() {
+  const { userPhoneNumber, setUserPhoneNumber, userEmail, setUserEmail } =
+    useApp();
+
+  const handleDone = useCallback(() => {
+    router.back();
+  }, []);
+
+  return (
+    <ThemedView
+      style={[
+        {
+          flex: 1,
+          paddingHorizontal: 24,
+          paddingTop: 24,
+        },
+      ]}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ flex: 1 }}
+      >
+        <ScrollView style={styles.scroll}>
+          <View style={{ gap: 24 }}>
+            <PhoneNumberInput
+              value={userPhoneNumber}
+              onChangeText={setUserPhoneNumber}
+              onClear={() => setUserPhoneNumber("")}
+            />
+
+            <Input
+              value={userEmail}
+              onChangeText={setUserEmail}
+              placeholder="Email"
+            />
+
+            <Button onPress={handleDone} title="Done" />
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+    height: "100%",
+  },
+});

assets/icons/GearIcon.tsx

@@ -0,0 +1,16 @@
+import Svg, { Path } from "react-native-svg";
+
+export default function GearIcon(props: any) {
+  return (
+    <Svg width="25" height="24" viewBox="0 0 25 24" fill="none" {...props}>
+      <Path
+        d="M12.2383 15.9961C14.3434 15.9961 16.2383 14.1012 16.2383 11.9961C16.2383 9.89099 14.3434 7.99609 12.2383 7.99609C10.1332 7.99609 8.23828 9.89099 8.23828 11.9961C8.23828 14.1012 10.1332 15.9961 12.2383 15.9961Z"
+        fill={props.color}
+      />
+      <Path
+        d="M21.2383 11.9961C21.2383 12.2461 21.2283 12.4961 21.2083 12.7461L23.2383 14.2461C23.3783 14.3461 23.4183 14.5461 23.3183 14.6961L21.3183 17.6961C21.2183 17.8461 21.0183 17.8961 20.8683 17.7961L18.5383 16.2961C18.1383 16.6961 17.6883 17.0461 17.1883 17.2961L16.7383 19.9961C16.6883 20.2461 16.4883 20.4461 16.2383 20.4461H13.2383C12.9883 20.4461 12.7883 20.2461 12.7383 19.9961L12.2883 17.2961C11.7883 17.0461 11.3383 16.6961 10.9383 16.2961L8.60828 17.7961C8.45828 17.8961 8.25828 17.8461 8.15828 17.6961L6.15828 14.6961C6.05828 14.5461 6.09828 14.3461 6.23828 14.2461L8.26828 12.7461C8.24828 12.4961 8.23828 12.2461 8.23828 11.9961C8.23828 11.7461 8.24828 11.4961 8.26828 11.2461L6.23828 9.74609C6.09828 9.64609 6.05828 9.44609 6.15828 9.29609L8.15828 6.29609C8.25828 6.14609 8.45828 6.09609 8.60828 6.19609L10.9383 7.69609C11.3383 7.29609 11.7883 6.94609 12.2883 6.69609L12.7383 3.99609C12.7883 3.74609 12.9883 3.54609 13.2383 3.54609H16.2383C16.4883 3.54609 16.6883 3.74609 16.7383 3.99609L17.1883 6.69609C17.6883 6.94609 18.1383 7.29609 18.5383 7.69609L20.8683 6.19609C21.0183 6.09609 21.2183 6.14609 21.3183 6.29609L23.3183 9.29609C23.4183 9.44609 23.3783 9.64609 23.2383 9.74609L21.2083 11.2461C21.2283 11.4961 21.2383 11.7461 21.2383 11.9961Z"
+        fill={props.color}
+      />
+    </Svg>
+  );
+}