diff --git a/app.json b/app.json index 585f5ca..6d2478d 100644 --- a/app.json +++ b/app.json @@ -31,7 +31,8 @@ "scheme": "onrampdemo" }, "web": { - "favicon": "./assets/favicon.png" + "favicon": "./assets/favicon.png", + "applicationId": "com.coinbase.onramp.demo" }, "extra": { "eas": { diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index b04bda1..165dacc 100644 --- a/app/(tabs)/_layout.tsx +++ b/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() { ), }} /> + + + ( + + ), + tabBarLabel: ({ focused, color }) => ( + + Settings + + ), + }} + /> ); } diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx new file mode 100644 index 0000000..421e4e7 --- /dev/null +++ b/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 ( + + + + Settings + + + router.push("/user-info")} + style={styles.settingRow} + > + User Info + + + + + Apple Pay Guest Checkout Sandbox Mode + + + + + + + ); +} + +const styles = StyleSheet.create({ + scroll: { + flex: 1, + }, + scrollContent: { + gap: 24, + padding: 16, + }, + settingRow: { + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + paddingVertical: 12, + }, +}); diff --git a/app/(tabs)/wallet.tsx b/app/(tabs)/wallet.tsx index fad45c5..f052f22 100644 --- a/app/(tabs)/wallet.tsx +++ b/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( 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() { ]} > - {/* */} + address={currentWallet?.address} + /> - + /> */} You can export your wallet by clicking the button below. It will take diff --git a/app/_layout.tsx b/app/_layout.tsx index 7eb73ab..f765ffc 100644 --- a/app/_layout.tsx +++ b/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 ( - - + + + + {loaded && } diff --git a/app/user-info.tsx b/app/user-info.tsx new file mode 100644 index 0000000..2b520f0 --- /dev/null +++ b/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 ( + + + + + setUserPhoneNumber("")} + /> + + + +