added constants

mani/App.tsx → mani/app/_layout.tsx

@@ -2,44 +2,42 @@ import 'expo-dev-client'
 import * as Notifications from 'expo-notifications'
 import { User as FirebaseUser } from 'firebase/auth'
 import React, { useEffect, useRef, useState } from 'react'
-import { Dimensions, Platform, SafeAreaView } from 'react-native'
-import { app, auth, ENV } from './init'
-// @ts-ignore
+import { Dimensions, Linking, Platform, SafeAreaView } from 'react-native'
+import { app, auth, ENV } from '../init'
 import { setFirebaseUserViaJson } from 'common/firebase-auth'
 import { Notification } from 'common/notification'
 import { IosIapListener } from 'components/ios-iap-listener'
-import * as Linking from 'expo-linking'
 import { Subscription } from 'expo-modules-core'
 import { StatusBar } from 'expo-status-bar'
 import { withIAPContext } from 'react-native-iap'
-
 import { ReadexPro_400Regular, useFonts } from '@expo-google-fonts/readex-pro'
 import * as Sentry from '@sentry/react-native'
 import { log } from 'components/logger'
 import { SplashAuth } from 'components/splash-auth'
-import Constants from 'expo-constants'
 import { getData } from 'lib/auth'
 import { useIsConnected } from 'lib/use-is-connected'
+import { TokenModeProvider } from 'hooks/useTokenMode'
+import { Stack } from 'expo-router'
+import Constants from 'expo-constants'
+import { StyleSheet } from 'react-native'
+import { Colors } from 'constants/colors'
+
+const HEADER_HEIGHT = 250
 
+// Initialize Sentry
+// Initialize Sentry
 Sentry.init({
   dsn: 'https://2353d2023dad4bc192d293c8ce13b9a1@o4504040581496832.ingest.us.sentry.io/4504040585494528',
   debug: ENV === 'DEV',
 })
-// NOTE: you must change NEXT_PUBLIC_API_URL in dev.sh to match your local IP address. ie:
-// "cross-env NEXT_PUBLIC_API_URL=192.168.1.229:8088 \
-// Then, set the native url in the app on the user settings page: http://192.168.1.229:3000/
 
-const isIOS = Platform.OS === 'ios'
-const App = () => {
-  // Init
+function RootLayout() {
+  // Your existing App.tsx logic here
   const notificationResponseListener = useRef<Subscription>()
   useFonts({ ReadexPro_400Regular })
 
-  // Auth
   const [fbUser, setFbUser] = useState<FirebaseUser | null>(auth.currentUser)
-  // Auth.currentUser didn't update, so we track the state manually
   auth.onAuthStateChanged((user) => (user ? setFbUser(user) : null))
-
   const signInUserFromStorage = async () => {
     const user = await getData<FirebaseUser>('user')
     if (!user) return
@@ -119,28 +117,47 @@ const App = () => {
   const height = Dimensions.get('window').height //full height
 
   return (
-    <>
+    <TokenModeProvider>
+      <SafeAreaView style={styles.container}>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        {/* <Stack.Screen name="+not-found" options={{ title: 'Not Found' }} /> */}
+      </SafeAreaView>
+
       <SplashAuth
-        height={height}
-        width={width}
-        source={require('./assets/splash.png')}
+        source={require('../assets/splash.png')}
         fbUser={fbUser}
         isConnected={isConnected}
+        height={height}
+        width={width}
       />
+
       {Platform.OS === 'ios' && fullyLoaded && (
         <IosIapListener
           checkoutAmount={checkoutAmount}
           setCheckoutAmount={setCheckoutAmount}
         />
       )}
 
-      <SafeAreaView
-      // style={styles.container}
-      >
-        <StatusBar animated={true} style={'dark'} hidden={false} />
-      </SafeAreaView>
-      {/*<ExportLogsButton />*/}
-    </>
+      <StatusBar style="dark" />
+    </TokenModeProvider>
   )
 }
-export default Sentry.wrap(withIAPContext(App))
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 20,
+  },
+  header: {
+    height: HEADER_HEIGHT,
+    overflow: 'hidden',
+  },
+  content: {
+    flex: 1,
+    gap: 16,
+    overflow: 'hidden',
+  },
+})
+
+export default Sentry.wrap(withIAPContext(RootLayout))

mani/app/index.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+export default function Home() {
+  return (
+    <SafeAreaView edges={['top']} style={{ flex: 1 }}>
+      <View style={{ padding: 16 }}>
+        <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Home</Text>
+      </View>
+    </SafeAreaView>
+  )
+}

mani/constants/Colors.ts

@@ -0,0 +1,88 @@
+/**
+ * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ */
+
+// Dark mode optimized grays
+const gray = {
+  50: '#FAFAFA',
+  100: '#F4F4F5',
+  200: '#E4E4E7',
+  300: '#D4D4D8',
+  400: '#A1A1AA',
+  500: '#71717A',
+  600: '#52525B',
+  700: '#3F3F46',
+  800: '#27272A',
+  900: '#18181B',
+  950: '#09090B',
+} as const;
+
+// Tailwind emerald colors
+const emerald = {
+  50: '#ECFDF5',
+  100: '#D1FAE5',
+  200: '#A7F3D0',
+  300: '#6EE7B7',
+  400: '#34D399',
+  500: '#10B981',
+  600: '#059669',
+  700: '#047857',
+  800: '#065F46',
+  900: '#064E3B',
+} as const;
+
+// Tailwind purple colors
+// const purple = {
+//   50: '#FAF6FE',
+//   100: '#F3EAFD',
+//   200: '#E7D9FB',
+//   300: '#D5BCF6',
+//   400: '#BB90F0',
+//   500: '#9B5DE5',
+//   600: '#8A46D7',
+//   700: '#7534BC',
+//   800: '#642F9A',
+//   900: '#52277C',
+//   950: '#36115A',
+// } as const;
+
+const purple = {
+  50:  '#FAF6FE',  // Kept same - lightest shade
+  100: '#F3EAFD',  // Kept same
+  200: '#E7D9FB',  // Kept same
+  300: '#C8A6F4',  // Made darker (was D5BCF6)
+  400: '#BB90F0',  // Kept same
+  500: '#9B5DE5',  // Kept same
+  600: '#8A46D7',  // Kept same
+  700: '#7534BC',  // Kept same
+  800: '#642F9A',  // Kept same
+  900: '#52277C',  // Kept same
+  950: '#36115A',  // Kept same
+} as const;
+
+
+const white = '#FFFFFF';
+
+// Mode-specific colors
+export const modes = {
+  play: {
+    primary: purple[300],
+    sliderBackground: purple[500],
+  },
+  sweep: {
+    primary: emerald[300],
+    sliderBackground: emerald[500],
+  },
+} as const;
+
+// Theme colors (used for UI components)
+export const Colors = {
+  text: white,
+  background: gray[950],
+  icon: gray[400],
+  border: gray[800],
+} as const;
+
+// Mode-specific colors (used for game modes)
+export const ModeColors = modes;

mani/index.js

@@ -1,6 +1,12 @@
 import 'expo-asset'
 import { registerRootComponent } from 'expo'
-import App from './App'
+import { ExpoRoot } from 'expo-router'
+
+// Must be exported or Fast Refresh won't update the context
+export function App() {
+  const ctx = require.context('./app')
+  return <ExpoRoot context={ctx} />
+}
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in Expo Go or in a native build,