Sprint

apps/mobile/package.json

@@ -29,6 +29,7 @@
     "@react-native-community/netinfo": "11.3.1",
     "@react-native-picker/picker": "2.7.5",
     "@react-navigation/bottom-tabs": "^6.5.20",
+    "@react-navigation/drawer": "^6.7.2",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.9.26",
     "@react-navigation/stack": "^6.3.29",
@@ -39,6 +40,7 @@
     "@tanstack/react-query": "^5.40.0",
     "@uniswap/sdk-core": "^5.3.1",
     "@walletconnect/react-native-compat": "^2.13.3",
+    "afk_nostr_sdk": "workspace:*",
     "axios": "^1.7.2",
     "buffer": "^6.0.3",
     "crypto-es": "^2.1.0",
@@ -77,11 +79,10 @@
     "react-native-svg": "15.2.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-web": "~0.19.6",
+    "react-native-webview": "^13.10.5",
     "starknet": "6.9.0",
     "starknetkit": "^1.1.9",
-    "zustand": "^4.5.2",
-    "afk_nostr_sdk":"workspace:*"
-
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

apps/mobile/src/app/Router.tsx

@@ -1,8 +1,8 @@
 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 { Dimensions, Platform, StyleSheet, View } from 'react-native';
+import { useEffect, useMemo, useState } from 'react';
+import { Dimensions, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { Icon } from '../components';
 import { useStyles, useTheme } from '../hooks';
 import { CreateAccount } from '../screens/Auth/CreateAccount';
@@ -20,16 +20,17 @@ import { PostDetail } from '../screens/PostDetail';
 import { Profile } from '../screens/Profile';
 import { Search } from '../screens/Search';
 import { Tips } from '../screens/Tips';
-// import { useAuth } from '../store/auth';
-// import { useAuth } from '../store/auth';
 import { ThemedStyleSheet } from '../styles';
 import { AuthStackParams, HomeBottomStackParams, MainStackParams, RootStackParams } from '../types';
 import { retrievePublicKey } from '../utils/storage';
 import Sidebar from '../modules/Layout/sidebar';
 import { Defi } from '../screens/Defi';
 import { Games } from '../screens/Games';
 import { useAuth } from 'afk_nostr_sdk';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Navbar } from '../components/Navbar';
 
+const DrawerStack = createDrawerNavigator<MainStackParams>();
 const RootStack = createNativeStackNavigator<RootStackParams>();
 const AuthStack = createNativeStackNavigator<AuthStackParams>();
 const MainStack = createNativeStackNavigator<MainStackParams>();
@@ -153,25 +154,80 @@ const AuthNavigator: React.FC = () => {
 };
 
 const MainNavigator: React.FC = () => {
+  const dimensions = useWindowDimensions();
+  const isDesktop = useMemo(() => {
+    return dimensions.width >= 1024
+  }, [dimensions]); // Adjust based on your breakpoint for desktop
+
+  const theme = useTheme()
+
   return (
-    <MainStack.Navigator screenOptions={{ headerShown: false }}
+    <DrawerStack.Navigator
+      // screenOptions={{ headerShown: false }}
+      // initialRouteName="Home"
+      drawerContent={(props) => <Sidebar
+        navigation={props?.navigation}
+      ></Sidebar>}
+      screenOptions={({ navigation }) => ({
+        // headerShown:false,
+        header: () => <Navbar navigation={navigation} title="AFK" showLogo={true} />,
+        headerStyle: {
+          backgroundColor: theme.theme.colors.background
+        },
+        drawerType: isDesktop ? "permanent" : "front",
+        // drawerType:"permanent",
+        headerTintColor: theme.theme.colors.text,
+        overlayColor: isDesktop ? 'transparent' : theme.theme.colors.background,  // Make sure overlay settings are correct
+        // swipeEdgeWidth: 0
+        // drawerStyle: {
+        //   width: 240, // Adjust width or other styling as necessary
+        // }
+      })}
     >
-      <MainStack.Screen name="Home" component={HomeBottomTabNavigator} />
-      <MainStack.Screen name="Profile" component={Profile} />
-      <MainStack.Screen name="EditProfile" component={EditProfile} />
-      <MainStack.Screen name="CreatePost" component={CreatePost} />
-      <MainStack.Screen name="PostDetail" component={PostDetail} />
-      <MainStack.Screen name="ChannelDetail" component={ChannelDetail} />
-      <MainStack.Screen name="Search" component={Search} />
-      <MainStack.Screen name="CreateChannel" component={CreateChannel} />
-      <MainStack.Screen name="ChannelsFeed" component={ChannelsFeed} />
-      <MainStack.Screen name="CreateForm" component={CreateForm} />
-      <MainStack.Screen name="Defi" component={Defi} />
-      <MainStack.Screen name="Games" component={Games} />
-    </MainStack.Navigator>
+      {!isDesktop ?
+        <DrawerStack.Screen name="Home" component={HomeBottomTabNavigator} />
+        :
+        <DrawerStack.Screen name="Feed" component={Feed} />
+
+      }
+      <DrawerStack.Screen name="Profile" component={Profile} />
+      <DrawerStack.Screen name="EditProfile" component={EditProfile} />
+      <DrawerStack.Screen name="CreatePost" component={CreatePost} />
+      <DrawerStack.Screen name="PostDetail" component={PostDetail} />
+      <DrawerStack.Screen name="ChannelDetail" component={ChannelDetail} />
+      <DrawerStack.Screen name="Search" component={Search} />
+      <DrawerStack.Screen name="CreateChannel" component={CreateChannel} />
+      <DrawerStack.Screen name="ChannelsFeed" component={ChannelsFeed} />
+      <DrawerStack.Screen name="CreateForm" component={CreateForm} />
+      <DrawerStack.Screen name="Defi" component={Defi} />
+      <DrawerStack.Screen name="Games" component={Games} />
+      <DrawerStack.Screen name="Tips" component={Tips} />
+    </DrawerStack.Navigator>
   );
 };
 
+// const MainNavigator: React.FC = () => {
+//   const dimensions = useWindowDimensions();
+//   const isDesktop = dimensions.width >= 768; // Adjust based on your breakpoint for desktop
+//   return (
+//     <MainStack.Navigator screenOptions={{ headerShown: false }}
+//     >
+//       <MainStack.Screen name="Home" component={HomeBottomTabNavigator} />
+//       <MainStack.Screen name="Profile" component={Profile} />
+//       <MainStack.Screen name="EditProfile" component={EditProfile} />
+//       <MainStack.Screen name="CreatePost" component={CreatePost} />
+//       <MainStack.Screen name="PostDetail" component={PostDetail} />
+//       <MainStack.Screen name="ChannelDetail" component={ChannelDetail} />
+//       <MainStack.Screen name="Search" component={Search} />
+//       <MainStack.Screen name="CreateChannel" component={CreateChannel} />
+//       <MainStack.Screen name="ChannelsFeed" component={ChannelsFeed} />
+//       <MainStack.Screen name="CreateForm" component={CreateForm} />
+//       <MainStack.Screen name="Defi" component={Defi} />
+//       <MainStack.Screen name="Games" component={Games} />
+//     </MainStack.Navigator>
+//   );
+// };
+
 const linking = {
   prefixes: [
     // "home","search", "profile/:publicKey", "details/:id"
@@ -222,7 +278,7 @@ export const Router: React.FC = () => {
     <NavigationContainer
     // linking={linking}
     >
-      {shouldShowSidebar && <Sidebar></Sidebar>}
+      {/* {shouldShowSidebar && <Sidebar></Sidebar>} */}
 
       <RootNavigator />
     </NavigationContainer>

apps/mobile/src/components/BubbleLive/index.tsx

@@ -0,0 +1,49 @@
+import {NDKEvent, NDKUserProfile} from '@nostr-dev-kit/ndk';
+import {useNavigation} from '@react-navigation/native';
+import {Image, ImageSourcePropType, Pressable, View} from 'react-native';
+
+// import {useProfile} from '../../hooks';
+import {MainStackNavigationProps} from '../../types';
+import {Text} from '../Text';
+import styles from './styles';
+import {useProfile} from "afk_nostr_sdk"
+
+export type StoryProps = {
+  imageProps?: ImageSourcePropType;
+  name?: string;
+  event: NDKEvent;
+  profileProps?: NDKUserProfile;
+};
+
+export const BubbleLive: React.FC<StoryProps> = ({imageProps, name, profileProps, event}) => {
+  const {data: profile} = useProfile({publicKey: event?.pubkey});
+  const navigation = useNavigation<MainStackNavigationProps>();
+  const handleNavigateToProfile = () => {
+    if (!event?.id) return;
+    navigation.navigate('Profile', {publicKey: event?.pubkey});
+  };
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={handleNavigateToProfile}>
+        <View style={styles.imageContainer}>
+          {/* <Image source={profile?.cover ? { uri: profile?.cover } : require('../../../assets/feed/images/story-bg.png')} resizeMode="cover" /> */}
+          <Image
+            source={
+              profile?.cover ? profile?.cover : require('../../../assets/feed/images/story-bg.png')
+            }
+            resizeMode="cover"
+          />
+          <Image
+            style={styles.image}
+            source={profile?.image ? profile?.image : require('../../assets/degen-logo.png')}
+            // resizeMode="cover"
+          />
+        </View>
+
+        <Text weight="medium" fontSize={13} style={styles.name}>
+          {profile?.name ?? profile?.nip05 ?? profile?.displayName ?? 'Anon AFK'}
+        </Text>
+      </Pressable>
+    </View>
+  );
+};

apps/mobile/src/components/BubbleLive/styles.ts

@@ -0,0 +1,32 @@
+import {StyleSheet} from 'react-native';
+import {Spacing} from '../../styles';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    // width: 100, // Set a fixed width for each item
+    // height: 100, // Set a fixed height for each item
+    // justifyContent: 'center',
+    // // alignItems: 'center',
+    // marginHorizontal: 10,
+    // backgroundColor: '#ddd',
+  },
+
+  imageContainer: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius:15
+  },
+  image: {
+    position: 'absolute',
+    width: 35,
+    height: 35,
+    borderRadius:15
+  },
+
+  name: {
+    paddingTop: Spacing.xxsmall,
+  },
+});

apps/mobile/src/components/BubbleUser/index.tsx

@@ -41,7 +41,7 @@ export const BubbleUser: React.FC<StoryProps> = ({imageProps, name, profileProps
         </View>
 
         <Text weight="medium" fontSize={13} style={styles.name}>
-          {profile?.name ?? profile?.nip05 ?? profile?.displayName ?? 'Anon AFK'}
+          {profile?.name ?? profile?.nip05 ?? profile?.displayName ?? 'Anon'}
         </Text>
       </Pressable>
     </View>

apps/mobile/src/components/Embed/EmbedWebsite.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import WebView from 'react-native-webview';
+
+interface EmbedWebsiteInterface {
+    uri?: string
+}
+const EmbedWebsite = ({ uri }: EmbedWebsiteInterface) => {
+
+    const isWeb = Platform.OS == "web"
+
+    if (isWeb) {
+        return <iframe src={uri}
+            height={"100%"}
+        ></iframe>
+    }
+    return (
+        <View style={styles.container}>
+            <WebView
+                source={{ uri: uri ?? 'https://example.com' }} // Replace 'https://example.com' with your desired URL
+                style={{ flex: 1 }}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+
+export default EmbedWebsite;

apps/mobile/src/components/Embed/index.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Platform, StyleSheet, View, Text, Pressable, Image } from 'react-native';
+import WebView from 'react-native-webview';
+import { Button } from '../Button';
+import EmbedWebsite from './EmbedWebsite';
+import stylesheet from "./styles"
+import { useStyles } from '../../hooks';
+import { Link } from '@react-navigation/native';
+import * as Linking from 'expo-linking';
+import { Avatar } from '../Avatar';
+
+interface EmbedWebsiteInterface {
+    uri?: string
+    title?: string;
+    twitter?: string;
+    description?: string;
+    img?: string;
+}
+const EmbedCard = ({ uri, title, twitter, description, img }: EmbedWebsiteInterface) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+    const styles = useStyles(stylesheet)
+    const handleOpen = () => {
+        setIsOpen(!isOpen)
+    }
+
+    const handleGoTo = () => {
+        if(uri) {
+            Linking.openURL(uri)
+        }
+    }
+    return (
+
+        <View style={styles.container}>
+
+            {img &&
+                <Image
+                    src={
+                        img ?? require('../../assets/degen-logo.png')
+                    }
+                />
+            }
+
+
+            {title &&
+                <Text style={styles.text}>{title}</Text>
+            }
+
+            {description &&
+                <Text style={styles.text}>{description}</Text>
+            }
+
+
+
+            <View style={{
+                flex:1,
+                flexDirection:"row"
+            }}>
+                {/* <Button onPress={handleGoTo} >Go</Button> */}
+                <Button onPress={handleOpen}>Open</Button>
+            </View>
+
+
+            {isOpen &&
+                <View style={{ height: 350 }}>
+                    <EmbedWebsite uri={uri}></EmbedWebsite>
+                </View>
+            }
+
+
+        </View>
+    )
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+
+export default EmbedCard;