diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/(tabs)/_layout.tsx | 54 | ||||
| -rw-r--r-- | app/(tabs)/explore.tsx | 110 | ||||
| -rw-r--r-- | app/(tabs)/index.tsx | 75 | ||||
| -rw-r--r-- | app/(tabs)/login.tsx | 122 | ||||
| -rw-r--r-- | app/+not-found.tsx | 36 | ||||
| -rw-r--r-- | app/_layout.tsx | 57 | ||||
| -rw-r--r-- | app/index.tsx | 203 |
7 files changed, 261 insertions, 396 deletions
diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx deleted file mode 100644 index a102c45..0000000 --- a/app/(tabs)/_layout.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Tabs } from "expo-router"; -import { Toaster } from "react-hot-toast"; -import React from "react"; -import { Platform } from "react-native"; - -import { HapticTab } from "@/components/HapticTab"; -import { IconSymbol } from "@/components/ui/IconSymbol"; -import TabBarBackground from "@/components/ui/TabBarBackground"; -import { Colors } from "@/constants/Colors"; -import { useColorScheme } from "@/hooks/useColorScheme"; - -export default function TabLayout() { - const colorScheme = useColorScheme(); - - return ( - <> - <Tabs - screenOptions={{ - tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint, - headerShown: false, - tabBarButton: HapticTab, - tabBarBackground: TabBarBackground, - tabBarStyle: Platform.select({ - ios: { - // Use a transparent background on iOS to show the blur effect - position: "absolute", - }, - default: {}, - }), - }} - > - <Tabs.Screen - name="index" - options={{ - title: "Home", - tabBarIcon: ({ color }) => ( - <IconSymbol size={28} name="house.fill" color={color} /> - ), - }} - /> - <Tabs.Screen - name="explore" - options={{ - title: "Explore", - tabBarIcon: ({ color }) => ( - <IconSymbol size={28} name="paperplane.fill" color={color} /> - ), - }} - /> - </Tabs> - <Toaster position="top-center" /> - </> - ); -} diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx deleted file mode 100644 index d4fbcaa..0000000 --- a/app/(tabs)/explore.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { Image } from 'expo-image'; -import { Platform, StyleSheet } from 'react-native'; - -import { Collapsible } from '@/components/Collapsible'; -import { ExternalLink } from '@/components/ExternalLink'; -import ParallaxScrollView from '@/components/ParallaxScrollView'; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; -import { IconSymbol } from '@/components/ui/IconSymbol'; - -export default function TabTwoScreen() { - return ( - <ParallaxScrollView - headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }} - headerImage={ - <IconSymbol - size={310} - color="#808080" - name="chevron.left.forwardslash.chevron.right" - style={styles.headerImage} - /> - }> - <ThemedView style={styles.titleContainer}> - <ThemedText type="title">Explore</ThemedText> - </ThemedView> - <ThemedText>This app includes example code to help you get started.</ThemedText> - <Collapsible title="File-based routing"> - <ThemedText> - This app has two screens:{' '} - <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '} - <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText> - </ThemedText> - <ThemedText> - The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '} - sets up the tab navigator. - </ThemedText> - <ExternalLink href="https://docs.expo.dev/router/introduction"> - <ThemedText type="link">Learn more</ThemedText> - </ExternalLink> - </Collapsible> - <Collapsible title="Android, iOS, and web support"> - <ThemedText> - You can open this project on Android, iOS, and the web. To open the web version, press{' '} - <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project. - </ThemedText> - </Collapsible> - <Collapsible title="Images"> - <ThemedText> - For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '} - <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for - different screen densities - </ThemedText> - <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} /> - <ExternalLink href="https://reactnative.dev/docs/images"> - <ThemedText type="link">Learn more</ThemedText> - </ExternalLink> - </Collapsible> - <Collapsible title="Custom fonts"> - <ThemedText> - Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '} - <ThemedText style={{ fontFamily: 'SpaceMono' }}> - custom fonts such as this one. - </ThemedText> - </ThemedText> - <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font"> - <ThemedText type="link">Learn more</ThemedText> - </ExternalLink> - </Collapsible> - <Collapsible title="Light and dark mode components"> - <ThemedText> - This template has light and dark mode support. The{' '} - <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect - what the user's current color scheme is, and so you can adjust UI colors accordingly. - </ThemedText> - <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/"> - <ThemedText type="link">Learn more</ThemedText> - </ExternalLink> - </Collapsible> - <Collapsible title="Animations"> - <ThemedText> - This template includes an example of an animated component. The{' '} - <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses - the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '} - library to create a waving hand animation. - </ThemedText> - {Platform.select({ - ios: ( - <ThemedText> - The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '} - component provides a parallax effect for the header image. - </ThemedText> - ), - })} - </Collapsible> - </ParallaxScrollView> - ); -} - -const styles = StyleSheet.create({ - headerImage: { - color: '#808080', - bottom: -90, - left: -35, - position: 'absolute', - }, - titleContainer: { - flexDirection: 'row', - gap: 8, - }, -}); diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx deleted file mode 100644 index 462e8cd..0000000 --- a/app/(tabs)/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { Image } from 'expo-image'; -import { Platform, StyleSheet } from 'react-native'; - -import { HelloWave } from '@/components/HelloWave'; -import ParallaxScrollView from '@/components/ParallaxScrollView'; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; - -export default function HomeScreen() { - return ( - <ParallaxScrollView - headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }} - headerImage={ - <Image - source={require('@/assets/images/partial-react-logo.png')} - style={styles.reactLogo} - /> - }> - <ThemedView style={styles.titleContainer}> - <ThemedText type="title">Welcome!</ThemedText> - <HelloWave /> - </ThemedView> - <ThemedView style={styles.stepContainer}> - <ThemedText type="subtitle">Step 1: Try it</ThemedText> - <ThemedText> - Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes. - Press{' '} - <ThemedText type="defaultSemiBold"> - {Platform.select({ - ios: 'cmd + d', - android: 'cmd + m', - web: 'F12', - })} - </ThemedText>{' '} - to open developer tools. - </ThemedText> - </ThemedView> - <ThemedView style={styles.stepContainer}> - <ThemedText type="subtitle">Step 2: Explore</ThemedText> - <ThemedText> - {`Tap the Explore tab to learn more about what's included in this starter app.`} - </ThemedText> - </ThemedView> - <ThemedView style={styles.stepContainer}> - <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText> - <ThemedText> - {`When you're ready, run `} - <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '} - <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '} - <ThemedText type="defaultSemiBold">app</ThemedText> to{' '} - <ThemedText type="defaultSemiBold">app-example</ThemedText>. - </ThemedText> - </ThemedView> - </ParallaxScrollView> - ); -} - -const styles = StyleSheet.create({ - titleContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: 8, - }, - stepContainer: { - gap: 8, - marginBottom: 8, - }, - reactLogo: { - height: 178, - width: 290, - bottom: 0, - left: 0, - position: 'absolute', - }, -}); diff --git a/app/(tabs)/login.tsx b/app/(tabs)/login.tsx deleted file mode 100644 index c5f826d..0000000 --- a/app/(tabs)/login.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import React, { useState } from "react"; -import { - View, - Text, - StyleSheet, - Image, - KeyboardAvoidingView, - Platform, - Alert, -} from "react-native"; -import PrimaryButton from "../../components/PrimaryButton"; -import ScreenWrapper from "../../components/ScreenWrapper"; -import { useThemeColors, ColorScheme } from "../../constants"; -import { ROUTES } from "../../constants/routes"; -import { Passkee } from "@/components/auth/Auth"; - -// import { useSettingsStore } from "../store/useSettingsStore"; -// import useAuthStore from "../store/useAuthStore"; -// import { createPasskey, isPasskeySupported } from "../lib/passkey"; -// import { navigationRef } from "../lib/navigationRef"; - -const PasskeySetupScreen = async () => { - const [isLoading, setIsLoading] = useState(false); - // const isDarkMode = useSettingsStore((s) => s.isDarkMode); - const isDarkMode = false; - const colors = useThemeColors(); - const styles = getStyles(colors); - // const { setHasPasskey, setHasSeenPasskeyPrompt } = useAuthStore(); - - const logoSource = isDarkMode - ? require("../../assets/urbit-logo-dark.png") - : require("../../assets/urbit-logo-light.png"); - - const handleSkip = () => { - // setHasSeenPasskeyPrompt(true); - // navigationRef.current?.navigate(ROUTES.LOGIN as never); - }; - - return ( - <KeyboardAvoidingView - style={styles.container} - behavior={Platform.OS === "ios" ? "padding" : undefined} - > - <ScreenWrapper> - <View style={styles.topSection}> - <Image - source={logoSource} - style={styles.walletIcon} - resizeMode="contain" - /> - <Text style={styles.title}>Secure Your Wallet</Text> - <Text style={styles.subtitle}> - Create a passkey for easy and secure access to your Urbit wallet - </Text> - </View> - - <View style={styles.bottomSection}> - <Passkee /> - <PrimaryButton - label="Skip for Now" - onPress={handleSkip} - style={{ - backgroundColor: colors.card, - borderWidth: 1, - borderColor: colors.border, - }} - textStyle={{ color: colors.text }} - /> - - <Text style={styles.infoText}> - You can always set up a passkey later in settings - </Text> - </View> - </ScreenWrapper> - </KeyboardAvoidingView> - ); -}; - -export const getStyles = (colors: ColorScheme) => - StyleSheet.create({ - container: { - flex: 1, - backgroundColor: colors.background, - justifyContent: "space-between", - padding: 20, - }, - topSection: { - flex: 1, - justifyContent: "center", - alignItems: "center", - }, - walletIcon: { - width: 64, - height: 64, - marginBottom: 24, - }, - title: { - fontSize: 24, - color: colors.text, - fontWeight: "600", - marginBottom: 12, - textAlign: "center", - }, - subtitle: { - fontSize: 16, - color: colors.secondary, - textAlign: "center", - paddingHorizontal: 20, - lineHeight: 24, - }, - bottomSection: { - marginBottom: 40, - }, - infoText: { - color: colors.secondary, - fontSize: 14, - textAlign: "center", - marginTop: 16, - }, - }); - -export default PasskeySetupScreen; diff --git a/app/+not-found.tsx b/app/+not-found.tsx index 215b0ed..68601c6 100644 --- a/app/+not-found.tsx +++ b/app/+not-found.tsx @@ -1,19 +1,19 @@ -import { Link, Stack } from 'expo-router'; -import { StyleSheet } from 'react-native'; +import { Link, Stack } from "expo-router"; +import { View, Text, StyleSheet } from "react-native"; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; +// import { ThemedText } from '@/components/ThemedText'; +// import { ThemedView } from '@/components/ThemedView'; export default function NotFoundScreen() { return ( <> - <Stack.Screen options={{ title: 'Oops!' }} /> - <ThemedView style={styles.container}> - <ThemedText type="title">This screen does not exist.</ThemedText> + <Stack.Screen options={{ title: "Oops!" }} /> + <View style={styles.container}> + <Text style={styles.title}>This screen does not exist.</Text> <Link href="/" style={styles.link}> - <ThemedText type="link">Go to home screen!</ThemedText> + <Text style={styles.linkText}>Go to home screen!</Text> </Link> - </ThemedView> + </View> </> ); } @@ -21,12 +21,26 @@ export default function NotFoundScreen() { const styles = StyleSheet.create({ container: { flex: 1, - alignItems: 'center', - justifyContent: 'center', + alignItems: "center", + justifyContent: "center", padding: 20, }, link: { marginTop: 15, paddingVertical: 15, }, + title: { + fontSize: 32, + fontWeight: "bold", + lineHeight: 32, + }, + subtitle: { + fontSize: 20, + fontWeight: "bold", + }, + linkText: { + lineHeight: 30, + fontSize: 16, + color: "#0a7ea4", + }, }); diff --git a/app/_layout.tsx b/app/_layout.tsx index 8d506f7..6974539 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,29 +1,38 @@ -import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; -import { useFonts } from 'expo-font'; -import { Stack } from 'expo-router'; -import { StatusBar } from 'expo-status-bar'; -import 'react-native-reanimated'; +// import { +// DarkTheme, +// DefaultTheme, +// ThemeProvider, +// } from "@react-navigation/native"; +// import { useFonts } from "expo-font"; +// import { Stack } from "expo-router"; +// import { StatusBar } from "expo-status-bar"; +// import "react-native-reanimated"; +// import { Toaster } from "react-hot-toast"; -import { useColorScheme } from '@/hooks/useColorScheme'; +// import { useColorScheme } from "@/hooks/useColorScheme"; -export default function RootLayout() { - const colorScheme = useColorScheme(); - const [loaded] = useFonts({ - SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), - }); +// export default function RootLayout() { +// const colorScheme = useColorScheme(); +// const [loaded] = useFonts({ +// SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"), +// }); - if (!loaded) { - // Async font loading only occurs in development. - return null; - } +// if (!loaded) { +// // Async font loading only occurs in development. +// return null; +// } - return ( - <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> - <Stack> - <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> - <Stack.Screen name="+not-found" /> - </Stack> - <StatusBar style="auto" /> - </ThemeProvider> - ); +// return ( +// <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}> +// <Stack> +// <Stack.Screen name="index" options={{ headerShown: false }} /> +// <Stack.Screen name="+not-found" /> +// </Stack> +// <StatusBar style="auto" /> +// <Toaster position="top-center" /> +// </ThemeProvider> +// ); +// } +export default function RootLayout() { + return <></>; } diff --git a/app/index.tsx b/app/index.tsx new file mode 100644 index 0000000..4d13c90 --- /dev/null +++ b/app/index.tsx @@ -0,0 +1,203 @@ +import "server-only"; +import { + View, + Text, + StyleSheet, + Image, + KeyboardAvoidingView, + Platform, + Alert, +} from "react-native"; +import PrimaryButton from "@/components/PrimaryButton"; +import ScreenWrapper from "@/components/ScreenWrapper"; +// // import { useThemeColors, ColorScheme } from "../constants"; +// import { ROUTES } from "@/constants/routes"; +// import { Passkee } from "@/components/auth/Auth"; +import { type ColorScheme, lightColors } from "@/constants"; +import { ShipForm } from "@/components/login/ShipCredsForm"; + +// // import { useSettingsStore } from "../store/useSettingsStore"; +// // import useAuthStore from "../store/useAuthStore"; +// // import { createPasskey, isPasskeySupported } from "../lib/passkey"; +// // import { navigationRef } from "../lib/navigationRef"; + +// const PasskeySetupScreen = async () => { +// // const isDarkMode = useSettingsStore((s) => s.isDarkMode); +// const isDarkMode = false; +// // const colors = useThemeColors(); +// const colors = lightColors; +// const styles = getStyles(colors); +// // const { setHasPasskey, setHasSeenPasskeyPrompt } = useAuthStore(); + +// const logoSource = isDarkMode +// ? require("../assets/urbit-logo-dark.png") +// : require("../assets/urbit-logo-light.png"); + +// const handleSkip = () => { +// // setHasSeenPasskeyPrompt(true); +// // navigationRef.current?.navigate(ROUTES.LOGIN as never); +// }; + +// return ( +// <KeyboardAvoidingView +// style={styles.container} +// behavior={Platform.OS === "ios" ? "padding" : undefined} +// > +// <ScreenWrapper> +// <View style={styles.topSection}> +// <Image +// source={logoSource} +// style={styles.walletIcon} +// resizeMode="contain" +// /> +// <Text style={styles.title}>Secure Your Wallet</Text> +// <Text style={styles.subtitle}> +// Create a passkey for easy and secure access to your Urbit wallet +// </Text> +// </View> + +// <View style={styles.bottomSection}> +// <Passkee /> +// <PrimaryButton +// label="Skip for Now" +// onPress={handleSkip} +// style={{ +// backgroundColor: colors.card, +// borderWidth: 1, +// borderColor: colors.border, +// }} +// textStyle={{ color: colors.text }} +// /> + +// <Text style={styles.infoText}> +// You can always set up a passkey later in settings +// </Text> +// </View> +// </ScreenWrapper> +// </KeyboardAvoidingView> +// ); +// }; + +// export const getStyles = (colors: ColorScheme) => +// StyleSheet.create({ +// container: { +// flex: 1, +// backgroundColor: colors.background, +// justifyContent: "space-between", +// padding: 20, +// }, +// topSection: { +// flex: 1, +// justifyContent: "center", +// alignItems: "center", +// }, +// walletIcon: { +// width: 64, +// height: 64, +// marginBottom: 24, +// }, +// title: { +// fontSize: 24, +// color: colors.text, +// fontWeight: "600", +// marginBottom: 12, +// textAlign: "center", +// }, +// subtitle: { +// fontSize: 16, +// color: colors.secondary, +// textAlign: "center", +// paddingHorizontal: 20, +// lineHeight: 24, +// }, +// bottomSection: { +// marginBottom: 40, +// }, +// infoText: { +// color: colors.secondary, +// fontSize: 14, +// textAlign: "center", +// marginTop: 16, +// }, +// }); + +// export default PasskeySetupScreen; +// +// + +// export const unstable_settings = { +// // This component will be rendered at build-time and never re-rendered in production. +// render: "static", +// }; + +export default async function Index() { + async function handleSubmit() { + // + } + return ( + <View style={styles.container}> + <ScreenWrapper> + <View style={styles.topSection}> + <Image + source={require("../assets/urbit-logo-light.png")} + style={styles.walletIcon} + resizeMode="contain" + /> + <Text style={styles.title}>Secure Your Wallet</Text> + <Text style={styles.subtitle}> + Create a passkey for easy and secure access to your Urbit wallet + </Text> + </View> + <ShipForm /> + + <View style={styles.bottomSection}> + <Text style={styles.infoText}> + You can always set up a passkey later in settings + </Text> + </View> + </ScreenWrapper> + </View> + ); +} + +export const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#F7F7F7", + justifyContent: "space-between", + padding: 20, + }, + topSection: { + flex: 1, + justifyContent: "center", + alignItems: "center", + }, + walletIcon: { + width: 64, + height: 64, + marginBottom: 24, + }, + title: { + fontSize: 24, + color: "#171717", + fontWeight: "600", + marginBottom: 12, + textAlign: "center", + }, + subtitle: { + fontSize: 16, + color: "#737373", + textAlign: "center", + paddingHorizontal: 20, + lineHeight: 24, + }, + bottomSection: { + marginBottom: 40, + }, + infoText: { + color: "#737373", + fontSize: 14, + textAlign: "center", + marginTop: 16, + }, +}); |