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 +++++++++++++++++++++++++++++++++++++ components/Collapsible.tsx | 33 +++--- components/ParallaxScrollView.tsx | 33 +++--- components/PrimaryButton.tsx | 1 + components/ThemedText.tsx | 29 +++--- components/ThemedView.tsx | 17 +++- components/login/ShipCredsForm.tsx | 105 +++++++++++++++++++ constants/config.ts | 2 +- 14 files changed, 435 insertions(+), 442 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 create mode 100644 components/login/ShipCredsForm.tsx 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, + }, +}); diff --git a/components/Collapsible.tsx b/components/Collapsible.tsx index 55bff2f..5820251 100644 --- a/components/Collapsible.tsx +++ b/components/Collapsible.tsx @@ -1,28 +1,33 @@ -import { PropsWithChildren, useState } from 'react'; -import { StyleSheet, TouchableOpacity } from 'react-native'; +"use client"; +import { PropsWithChildren, useState } from "react"; +import { StyleSheet, TouchableOpacity } from "react-native"; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; -import { IconSymbol } from '@/components/ui/IconSymbol'; -import { Colors } from '@/constants/Colors'; -import { useColorScheme } from '@/hooks/useColorScheme'; +import { ThemedText } from "@/components/ThemedText"; +import { ThemedView } from "@/components/ThemedView"; +import { IconSymbol } from "@/components/ui/IconSymbol"; +import { Colors } from "@/constants/Colors"; +import { useColorScheme } from "@/hooks/useColorScheme"; -export function Collapsible({ children, title }: PropsWithChildren & { title: string }) { +export function Collapsible({ + children, + title, +}: PropsWithChildren & { title: string }) { const [isOpen, setIsOpen] = useState(false); - const theme = useColorScheme() ?? 'light'; + const theme = useColorScheme() ?? "light"; return ( setIsOpen((value) => !value)} - activeOpacity={0.8}> + activeOpacity={0.8} + > {title} @@ -34,8 +39,8 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st const styles = StyleSheet.create({ heading: { - flexDirection: 'row', - alignItems: 'center', + flexDirection: "row", + alignItems: "center", gap: 6, }, content: { diff --git a/components/ParallaxScrollView.tsx b/components/ParallaxScrollView.tsx index 5df1d75..46ed68e 100644 --- a/components/ParallaxScrollView.tsx +++ b/components/ParallaxScrollView.tsx @@ -1,15 +1,16 @@ -import type { PropsWithChildren, ReactElement } from 'react'; -import { StyleSheet } from 'react-native'; +"use client"; +import type { PropsWithChildren, ReactElement } from "react"; +import { StyleSheet } from "react-native"; import Animated, { interpolate, useAnimatedRef, useAnimatedStyle, useScrollViewOffset, -} from 'react-native-reanimated'; +} from "react-native-reanimated"; -import { ThemedView } from '@/components/ThemedView'; -import { useBottomTabOverflow } from '@/components/ui/TabBarBackground'; -import { useColorScheme } from '@/hooks/useColorScheme'; +import { ThemedView } from "@/components/ThemedView"; +import { useBottomTabOverflow } from "@/components/ui/TabBarBackground"; +import { useColorScheme } from "@/hooks/useColorScheme"; const HEADER_HEIGHT = 250; @@ -23,7 +24,7 @@ export default function ParallaxScrollView({ headerImage, headerBackgroundColor, }: Props) { - const colorScheme = useColorScheme() ?? 'light'; + const colorScheme = useColorScheme() ?? "light"; const scrollRef = useAnimatedRef(); const scrollOffset = useScrollViewOffset(scrollRef); const bottom = useBottomTabOverflow(); @@ -34,11 +35,15 @@ export default function ParallaxScrollView({ translateY: interpolate( scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], - [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75] + [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75], ), }, { - scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]), + scale: interpolate( + scrollOffset.value, + [-HEADER_HEIGHT, 0, HEADER_HEIGHT], + [2, 1, 1], + ), }, ], }; @@ -50,13 +55,15 @@ export default function ParallaxScrollView({ ref={scrollRef} scrollEventThrottle={16} scrollIndicatorInsets={{ bottom }} - contentContainerStyle={{ paddingBottom: bottom }}> + contentContainerStyle={{ paddingBottom: bottom }} + > + ]} + > {headerImage} {children} @@ -71,12 +78,12 @@ const styles = StyleSheet.create({ }, header: { height: HEADER_HEIGHT, - overflow: 'hidden', + overflow: "hidden", }, content: { flex: 1, padding: 32, gap: 16, - overflow: 'hidden', + overflow: "hidden", }, }); diff --git a/components/PrimaryButton.tsx b/components/PrimaryButton.tsx index 94bd8ce..b515818 100644 --- a/components/PrimaryButton.tsx +++ b/components/PrimaryButton.tsx @@ -1,3 +1,4 @@ +"use client"; import React from "react"; import { TouchableOpacity, diff --git a/components/ThemedText.tsx b/components/ThemedText.tsx index 9d214a2..c545b1c 100644 --- a/components/ThemedText.tsx +++ b/components/ThemedText.tsx @@ -1,31 +1,32 @@ -import { StyleSheet, Text, type TextProps } from 'react-native'; +"use client"; +import { StyleSheet, Text, type TextProps } from "react-native"; -import { useThemeColor } from '@/hooks/useThemeColor'; +import { useThemeColor } from "@/hooks/useThemeColor"; export type ThemedTextProps = TextProps & { lightColor?: string; darkColor?: string; - type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'; + type?: "default" | "title" | "defaultSemiBold" | "subtitle" | "link"; }; export function ThemedText({ style, lightColor, darkColor, - type = 'default', + type = "default", ...rest }: ThemedTextProps) { - const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text'); + const color = useThemeColor({ light: lightColor, dark: darkColor }, "text"); return ( ; } diff --git a/components/login/ShipCredsForm.tsx b/components/login/ShipCredsForm.tsx new file mode 100644 index 0000000..15712c2 --- /dev/null +++ b/components/login/ShipCredsForm.tsx @@ -0,0 +1,105 @@ +"use client"; +import { ColorScheme, lightColors } from "@/constants"; +import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs"; +import { + StyleSheet, + TextInput, + TouchableOpacity, + View, + Text, +} from "react-native"; +import PrimaryButton from "../PrimaryButton"; +import { useState } from "react"; + +export function ShipForm() { + const colors = lightColors; + const styles = getStyles(colors); + const [patp, setPatp] = useState("~mirtyl-wacdec"); + const [ticket, setTicket] = useState("~posseg-winnub-fogluc-dirmes"); + const [isLoading, setIsLoading] = useState(false); + async function onSubmit() { + console.log({ patp, ticket }); + } + return ( + + + + + + + + No Urbit ID? Get yours. + + + ); +} +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: 12, + }, + logoText: { + fontSize: 18, + color: colors.text, + fontWeight: "400", + }, + bottomSection: { + gap: 8, + marginBottom: 40, + }, + input: { + height: 48, + backgroundColor: colors.card, + borderColor: colors.border, + borderWidth: 1, + borderRadius: 8, + paddingHorizontal: 16, + paddingVertical: 12, + color: colors.text, + fontWeight: "500", + fontSize: 16, + }, + footer: { + marginTop: 50, + alignItems: "center", + }, + footerText: { + color: colors.text, + fontSize: 16, + }, + }); diff --git a/constants/config.ts b/constants/config.ts index 6fa09b6..11379a5 100644 --- a/constants/config.ts +++ b/constants/config.ts @@ -1,5 +1,5 @@ import { JsonRpcProvider, WebSocketProvider } from "ethers"; -import { ETHEREUM_NETWORK } from "../constants"; +import { ETHEREUM_NETWORK } from "../constants/constants"; const isLocal = false; -- cgit v1.2.3