refactor: Make app MVP ready (#206)

* Strict tsconfig

* Chain id constant

* fixes

* Auth flow changes

* Fix package versions

* Fix require cycles

* Fix imports

* Query invalidations

* Remove stories

* fetch next page

* Shadow & border

* fix version & require cycle

* Toast close button

* toast timeout

* web max width

* Get claim events & filter tips by claimed ones

* Remove connect wallet title

* merge useClaimedTips hook to useTips

* Add unclaimed tips notification

* Refetch tips when claimed

JoyboyCommunity/package.json

@@ -23,8 +23,8 @@
     "@noble/curves": "^1.4.0",
     "@nostr-dev-kit/ndk": "^2.8.2",
     "@react-native-async-storage/async-storage": "^1.23.1",
-    "@react-native-community/netinfo": "^11.3.2",
-    "@react-native-picker/picker": "^2.7.7",
+    "@react-native-community/netinfo": "11.3.1",
+    "@react-native-picker/picker": "2.7.5",
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.9.26",
@@ -40,13 +40,13 @@
     "buffer": "^6.0.3",
     "crypto-es": "^2.1.0",
     "events": "^3.3.0",
-    "expo": "~51.0.8",
+    "expo": "~51.0.17",
     "expo-application": "^5.9.1",
     "expo-clipboard": "~6.0.3",
     "expo-crypto": "~13.0.2",
-    "expo-image-picker": "~15.0.5",
+    "expo-image-picker": "~15.0.7",
     "expo-linking": "~6.3.1",
-    "expo-secure-store": "~13.0.1",
+    "expo-secure-store": "~13.0.2",
     "expo-splash-screen": "~0.27.4",
     "expo-status-bar": "~1.12.1",
     "fast-text-encoding": "^1.0.6",
@@ -56,7 +56,7 @@
     "pbkdf2": "^3.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.1",
+    "react-native": "0.74.3",
     "react-native-gesture-handler": "2.16.2",
     "react-native-get-random-values": "^1.11.0",
     "react-native-keychain": "^8.2.0",
@@ -66,9 +66,9 @@
     "react-native-qrcode-svg": "^6.3.1",
     "react-native-reanimated": "~3.10.1",
     "react-native-redash": "^18.1.3",
-    "react-native-safe-area-context": "^4.8.2",
-    "react-native-screens": "^3.29.0",
-    "react-native-svg": "^15.3.0",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-web": "~0.19.6",
     "starknet": "6.9.0",

JoyboyCommunity/src/app/App.tsx

@@ -3,15 +3,20 @@ import '@walletconnect/react-native-compat';
 import * as Font from 'expo-font';
 import * as SplashScreen from 'expo-splash-screen';
 import {useCallback, useEffect, useState} from 'react';
-import {StatusBar, View} from 'react-native';
+import {View} from 'react-native';
 
+import {useTips} from '../hooks';
+import {useToast} from '../hooks/modals';
 import {Router} from './Router';
 
-// Keep the splash screen visible while we fetch resources
 SplashScreen.preventAutoHideAsync();
 
 export default function App() {
   const [appIsReady, setAppIsReady] = useState(false);
+  const [sentTipNotification, setSentTipNotification] = useState(false);
+
+  const tips = useTips();
+  const {showToast} = useToast();
 
   useEffect(() => {
     (async () => {
@@ -27,31 +32,41 @@ export default function App() {
       } catch (e) {
         console.warn(e);
       } finally {
-        // Tell the application to render
         setAppIsReady(true);
       }
     })();
   }, []);
 
+  useEffect(() => {
+    const interval = setInterval(() => tips.refetch(), 2 * 60 * 1_000);
+    return () => clearInterval(interval);
+  }, [tips]);
+
+  useEffect(() => {
+    if (sentTipNotification) return;
+
+    const hasUnclaimedTip = (tips.data ?? []).some((tip) => !tip.claimed && tip.depositId);
+    if (hasUnclaimedTip) {
+      setSentTipNotification(true);
+      showToast({
+        type: 'info',
+        title: 'You have unclaimed tips',
+      });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tips.data]);
+
   const onLayoutRootView = useCallback(async () => {
     if (appIsReady) {
-      // This tells the splash screen to hide immediately! If we call this after
-      // `setAppIsReady`, then we may see a blank screen while the app is
-      // loading its initial state and rendering its first pixels. So instead,
-      // we hide the splash screen once we know the root view has already
-      // performed layout.
       await SplashScreen.hideAsync();
     }
   }, [appIsReady]);
 
-  if (!appIsReady) {
-    return null;
-  }
+  if (!appIsReady) return null;
 
   return (
     <View style={{flex: 1}} onLayout={onLayoutRootView}>
-      <StatusBar backgroundColor="#15141A" />
-
       <Router />
     </View>
   );

JoyboyCommunity/src/app/Router.tsx

@@ -1,10 +1,11 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {useEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 
 import {Icon} from '../components';
-import {useTheme} from '../hooks';
+import {useStyles} from '../hooks';
 import {CreateAccount} from '../screens/Auth/CreateAccount';
 import {Login} from '../screens/Auth/Login';
 import {SaveKeys} from '../screens/Auth/SaveKeys';
@@ -15,30 +16,27 @@ import {PostDetail} from '../screens/PostDetail';
 import {Profile} from '../screens/Profile';
 import {Tips} from '../screens/Tips';
 import {useAuth} from '../store/auth';
+import {ThemedStyleSheet} from '../styles';
 import {AuthStackParams, HomeBottomStackParams, MainStackParams, RootStackParams} from '../types';
+import {retrievePublicKey} from '../utils/storage';
 
 const RootStack = createNativeStackNavigator<RootStackParams>();
 const AuthStack = createNativeStackNavigator<AuthStackParams>();
 const MainStack = createNativeStackNavigator<MainStackParams>();
 const HomeBottomTabsStack = createBottomTabNavigator<HomeBottomStackParams>();
 
 const HomeBottomTabNavigator: React.FC = () => {
-  const theme = useTheme();
+  const styles = useStyles(stylesheet);
+
   const {publicKey} = useAuth();
 
   return (
     <HomeBottomTabsStack.Navigator
-      sceneContainerStyle={{
-        backgroundColor: theme.colors.background,
-      }}
+      sceneContainerStyle={styles.sceneContainer}
       screenOptions={{
         headerShown: false,
         tabBarShowLabel: false,
-        tabBarStyle: {
-          backgroundColor: theme.colors.surface,
-          borderTopColor: theme.colors.divider,
-          borderTopWidth: StyleSheet.hairlineWidth,
-        },
+        tabBarStyle: styles.tabBar,
       }}
     >
       <HomeBottomTabsStack.Screen
@@ -48,7 +46,7 @@ const HomeBottomTabNavigator: React.FC = () => {
           tabBarActiveTintColor: 'white',
           tabBarInactiveTintColor: '',
           tabBarIcon: ({focused}) => (
-            <View style={{flex: 1, alignItems: 'center', gap: 2, justifyContent: 'center'}}>
+            <View style={styles.tabBarIcon}>
               <Icon
                 name="HomeIcon"
                 size={24}
@@ -60,34 +58,14 @@ const HomeBottomTabNavigator: React.FC = () => {
         }}
       />
 
-      <HomeBottomTabsStack.Screen
-        name="Notifications"
-        component={Profile}
-        initialParams={{publicKey}}
-        options={{
-          tabBarActiveTintColor: 'white',
-          tabBarInactiveTintColor: '',
-          tabBarIcon: ({focused}) => (
-            <View style={{flex: 1, alignItems: 'center', gap: 1, justifyContent: 'center'}}>
-              <Icon
-                name="SearchIcon"
-                size={24}
-                color={focused ? 'bottomBarActive' : 'bottomBarInactive'}
-              />
-              {focused && <Icon name="IndicatorIcon" color="primary" size={6} />}
-            </View>
-          ),
-        }}
-      />
-
       <HomeBottomTabsStack.Screen
         name="Tips"
         component={Tips}
         options={{
           tabBarActiveTintColor: 'white',
           tabBarInactiveTintColor: 'grey',
           tabBarIcon: ({focused}) => (
-            <View style={{flex: 1, alignItems: 'center', gap: 4, justifyContent: 'center'}}>
+            <View style={styles.tabBarIcon}>
               <Icon
                 name="CoinIcon"
                 size={24}
@@ -101,13 +79,13 @@ const HomeBottomTabNavigator: React.FC = () => {
 
       <HomeBottomTabsStack.Screen
         name="UserProfile"
-        component={Profile}
+        component={Profile as any}
         initialParams={{publicKey}}
         options={{
           tabBarActiveTintColor: 'white',
           tabBarInactiveTintColor: 'grey',
           tabBarIcon: ({focused}) => (
-            <View style={{flex: 1, alignItems: 'center', gap: 1, justifyContent: 'center'}}>
+            <View style={styles.tabBarIcon}>
               <Icon
                 name="UserIcon"
                 size={24}
@@ -123,9 +101,19 @@ const HomeBottomTabNavigator: React.FC = () => {
 };
 
 const AuthNavigator: React.FC = () => {
+  const [publicKey, setPublicKey] = useState<string | null | undefined>(undefined);
+
+  useEffect(() => {
+    retrievePublicKey().then((key) => {
+      setPublicKey(key);
+    });
+  });
+
+  if (publicKey === undefined) return null;
+
   return (
     <AuthStack.Navigator screenOptions={{headerShown: false}}>
-      <AuthStack.Screen name="Login" component={Login} />
+      {publicKey && <AuthStack.Screen name="Login" component={Login} />}
       <AuthStack.Screen name="CreateAccount" component={CreateAccount} />
       <AuthStack.Screen name="SaveKeys" component={SaveKeys} />
     </AuthStack.Navigator>
@@ -165,3 +153,21 @@ export const Router: React.FC = () => {
     </NavigationContainer>
   );
 };
+
+const stylesheet = ThemedStyleSheet((theme) => ({
+  sceneContainer: {
+    backgroundColor: theme.colors.background,
+  },
+
+  tabBar: {
+    backgroundColor: theme.colors.surface,
+    borderTopColor: theme.colors.divider,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  tabBarIcon: {
+    flex: 1,
+    gap: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));

JoyboyCommunity/src/app/Wrapper.tsx

@@ -37,17 +37,17 @@ export const Wrapper: React.FC = () => {
         <NostrProvider>
           <QueryClientProvider client={queryClient}>
             <SafeAreaProvider>
-              <PortalizeProvider>
-                <DialogProvider>
-                  <StarknetProvider>
-                    <ModalProviders>
-                      <RootScreenContainer>
+              <RootScreenContainer>
+                <PortalizeProvider>
+                  <DialogProvider>
+                    <StarknetProvider>
+                      <ModalProviders>
                         <App />
-                      </RootScreenContainer>
-                    </ModalProviders>
-                  </StarknetProvider>
-                </DialogProvider>
-              </PortalizeProvider>
+                      </ModalProviders>
+                    </StarknetProvider>
+                  </DialogProvider>
+                </PortalizeProvider>
+              </RootScreenContainer>
             </SafeAreaProvider>
           </QueryClientProvider>
         </NostrProvider>

JoyboyCommunity/src/assets/icons.tsx

@@ -510,3 +510,20 @@ export const FlagIcon: React.FC<SvgProps> = (props) => (
     />
   </Svg>
 );
+
+export const CloseIcon: React.FC<SvgProps> = (props) => (
+  <Svg viewBox="0 0 24 24" fill="none" {...props}>
+    <Path
+      d="M15.1194 14.4L9.35999 8.64M9.3606 14.4L15.12 8.64"
+      stroke="currentColor"
+      strokeWidth="1.44"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M21.84 11.52C21.84 6.21806 17.5419 1.92 12.24 1.92C6.93808 1.92 2.64001 6.21806 2.64001 11.52C2.64001 16.8219 6.93808 21.12 12.24 21.12C17.5419 21.12 21.84 16.8219 21.84 11.52Z"
+      stroke="currentColor"
+      strokeWidth="1.44"
+    />
+  </Svg>
+);

JoyboyCommunity/src/components/Button/index.tsx

@@ -26,7 +26,7 @@ export const Button: React.FC<ButtonProps> = ({
   style: styleProp,
   ...pressableProps
 }) => {
-  const styles = useStyles(stylesheet, variant, block, disabled, small);
+  const styles = useStyles(stylesheet, variant, !!block, !!disabled, !!small);
 
   return (
     <Pressable

JoyboyCommunity/src/components/Header/styles.ts

@@ -1,3 +1,5 @@
+import {StyleSheet} from 'react-native';
+
 import {Spacing, ThemedStyleSheet} from '../../styles';
 
 export default ThemedStyleSheet((theme) => ({
@@ -11,6 +13,8 @@ export default ThemedStyleSheet((theme) => ({
     alignItems: 'center',
     paddingVertical: Spacing.xxsmall,
     paddingHorizontal: Spacing.medium,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: theme.colors.divider,
   },
 
   logoContainer: {

JoyboyCommunity/src/components/IconButton/index.tsx

@@ -26,7 +26,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
   const color = useColor(colorProp);
   const backgroundColor = useColor(backgroundColorProp);
 
-  const styles = useStyles(stylesheet, disabled, backgroundColor);
+  const styles = useStyles(stylesheet, !!disabled, backgroundColor);
 
   return (
     <Pressable

JoyboyCommunity/src/components/Menu/index.tsx

@@ -1,11 +1,5 @@
 import {useEffect} from 'react';
-import {
-  Pressable,
-  PressableProps,
-  TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native';
+import {Pressable, PressableProps, TouchableWithoutFeedback, View} from 'react-native';
 import {Portal} from 'react-native-portalize';
 import Animated, {
   measure,
@@ -15,7 +9,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import {useColor, useStyles} from '../../hooks';
+import {useColor, useStyles, useWindowDimensions} from '../../hooks';
 import {ColorProp} from '../../styles';
 import {Icon, IconNames} from '../Icon';
 import {Text} from '../Text';
@@ -51,7 +45,7 @@ const Menu: React.FC<MenuProps> & MenuSubComponents = ({handle, open, onClose, c
   }, [animation, open]);
 
   const animatedMenuStyles = useAnimatedStyle(() => {
-    const menuWidth = Math.min(width / 1.6, 320);
+    const menuWidth = Math.min(width / 1.5, 320);
 
     const menuStyle = {
       ...styles.menu,