From dc0ad21f0e857adb87d710dd0f2f9affd0a9cbc9 Mon Sep 17 00:00:00 2001 From: polwex Date: Wed, 16 Jul 2025 09:58:34 +0700 Subject: kinda works --- app/(tabs)/_layout.tsx | 54 ------------- app/(tabs)/explore.tsx | 110 --------------------------- app/(tabs)/index.tsx | 75 ------------------ app/(tabs)/login.tsx | 122 ----------------------------- app/+not-found.tsx | 36 ++++++--- app/_layout.tsx | 57 ++++++++------ app/index.tsx | 203 +++++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 261 insertions(+), 396 deletions(-) delete mode 100644 app/(tabs)/_layout.tsx delete mode 100644 app/(tabs)/explore.tsx delete mode 100644 app/(tabs)/index.tsx delete mode 100644 app/(tabs)/login.tsx create mode 100644 app/index.tsx (limited to 'app') 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 ( - <> - - ( - - ), - }} - /> - ( - - ), - }} - /> - - - - ); -} 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 ( - - }> - - Explore - - This app includes example code to help you get started. - - - This app has two screens:{' '} - app/(tabs)/index.tsx and{' '} - app/(tabs)/explore.tsx - - - The layout file in app/(tabs)/_layout.tsx{' '} - sets up the tab navigator. - - - Learn more - - - - - You can open this project on Android, iOS, and the web. To open the web version, press{' '} - w in the terminal running this project. - - - - - For static images, you can use the @2x and{' '} - @3x suffixes to provide files for - different screen densities - - - - Learn more - - - - - Open app/_layout.tsx to see how to load{' '} - - custom fonts such as this one. - - - - Learn more - - - - - This template has light and dark mode support. The{' '} - useColorScheme() hook lets you inspect - what the user's current color scheme is, and so you can adjust UI colors accordingly. - - - Learn more - - - - - This template includes an example of an animated component. The{' '} - components/HelloWave.tsx component uses - the powerful react-native-reanimated{' '} - library to create a waving hand animation. - - {Platform.select({ - ios: ( - - The components/ParallaxScrollView.tsx{' '} - component provides a parallax effect for the header image. - - ), - })} - - - ); -} - -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 ( - - }> - - Welcome! - - - - Step 1: Try it - - Edit app/(tabs)/index.tsx to see changes. - Press{' '} - - {Platform.select({ - ios: 'cmd + d', - android: 'cmd + m', - web: 'F12', - })} - {' '} - to open developer tools. - - - - Step 2: Explore - - {`Tap the Explore tab to learn more about what's included in this starter app.`} - - - - Step 3: Get a fresh start - - {`When you're ready, run `} - npm run reset-project to get a fresh{' '} - app directory. This will move the current{' '} - app to{' '} - app-example. - - - - ); -} - -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 ( - - - - - Secure Your Wallet - - Create a passkey for easy and secure access to your Urbit wallet - - - - - - - - - You can always set up a passkey later in settings - - - - - ); -}; - -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 ( <> - - - This screen does not exist. + + + This screen does not exist. - Go to home screen! + Go to home screen! - + ); } @@ -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 ( - - - - - - - - ); +// return ( +// +// +// +// +// +// +// +// +// ); +// } +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 ( +// +// +// +// +// Secure Your Wallet +// +// Create a passkey for easy and secure access to your Urbit wallet +// +// + +// +// +// + +// +// You can always set up a passkey later in settings +// +// +// +// +// ); +// }; + +// 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 ( + + + + + Secure Your Wallet + + Create a passkey for easy and secure access to your Urbit wallet + + + + + + + You can always set up a passkey later in settings + + + + + ); +} + +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, + }, +}); -- cgit v1.2.3