diff --git a/apps/mobile/src/app/App.tsx b/apps/mobile/src/app/App.tsx index 181fca80..fe99179b 100644 --- a/apps/mobile/src/app/App.tsx +++ b/apps/mobile/src/app/App.tsx @@ -91,7 +91,7 @@ export default function App() { if (!appIsReady) return null; return ( - + ); diff --git a/apps/mobile/src/app/Router.tsx b/apps/mobile/src/app/Router.tsx index 78b64556..a94cd994 100644 --- a/apps/mobile/src/app/Router.tsx +++ b/apps/mobile/src/app/Router.tsx @@ -26,6 +26,8 @@ import { ThemedStyleSheet } from '../styles'; import { AuthStackParams, HomeBottomStackParams, MainStackParams, RootStackParams } from '../types'; import { retrievePublicKey } from '../utils/storage'; import Sidebar from '../components/Layout/sidebar'; +import { Defi } from '../screens/Defi'; +import { Games } from '../screens/Games'; const RootStack = createNativeStackNavigator(); const AuthStack = createNativeStackNavigator(); @@ -164,6 +166,8 @@ const MainNavigator: React.FC = () => { + + ); }; @@ -220,6 +224,7 @@ export const Router: React.FC = () => { + ); diff --git a/apps/mobile/src/assets/icons.tsx b/apps/mobile/src/assets/icons.tsx index 124dedd1..5c0ab8c4 100644 --- a/apps/mobile/src/assets/icons.tsx +++ b/apps/mobile/src/assets/icons.tsx @@ -1,4 +1,4 @@ -import Svg, {G, Path, Rect, SvgProps} from 'react-native-svg'; +import Svg, { G, Path, Rect, SvgProps } from 'react-native-svg'; export const AddPostIcon: React.FC = (props) => ( @@ -15,6 +15,16 @@ export const AddPostIcon: React.FC = (props) => ( ); +export const GameIcon = () => { + return ( + + + + ) +} + export const HomeIcon: React.FC = (props) => ( = (props) => ( ); diff --git a/apps/mobile/src/components/Layout/sidebar/index.tsx b/apps/mobile/src/components/Layout/sidebar/index.tsx index c5edc6aa..4b49ea11 100644 --- a/apps/mobile/src/components/Layout/sidebar/index.tsx +++ b/apps/mobile/src/components/Layout/sidebar/index.tsx @@ -1,30 +1,112 @@ import React from 'react'; -import { View, Text, StyleSheet } from 'react-native'; +import { View, Text, StyleSheet, Pressable } from 'react-native'; import stylesheet from './styles'; -import { useStyles } from '../../../hooks'; +import { useStyles, useTheme } from '../../../hooks'; +import { Icon } from '../../Icon'; +import { useNavigation } from '@react-navigation/native'; +import { MainStackNavigationProps } from '../../../types'; +import { useAuth } from '../../../store/auth'; const Sidebar = () => { const styles = useStyles(stylesheet); + const publicKey = useAuth((state) => state.publicKey); + + + const navigation = useNavigation() + const handleNavigateProfile = () => { + navigation.navigate("Profile", { publicKey: publicKey }); + }; + + + const theme = useTheme() + + + // const handleNavigateHome = () => { + // navigation.navigate("Home"); + // }; + + + const handleDefiScreen = () => { + navigation.navigate("Defi"); + }; + + const handleGameScreen = () => { + navigation.navigate("Games"); + }; + return ( AFK Features coming soon + {/* Launchpad Notifications - - - Communities - - - Art peace - - - Onramp & DeFI - + */} + {/* + */} + {/* + + Home + + + */} + + + + + + Gamefi + + + + + + + + + Onramp & DeFI + + + + + + + + + Profile + + + + + + + ); }; diff --git a/apps/mobile/src/components/Layout/sidebar/styles.ts b/apps/mobile/src/components/Layout/sidebar/styles.ts index 38f96c87..2d18fd9c 100644 --- a/apps/mobile/src/components/Layout/sidebar/styles.ts +++ b/apps/mobile/src/components/Layout/sidebar/styles.ts @@ -3,10 +3,11 @@ import { Spacing, ThemedStyleSheet } from "../../../styles"; export default ThemedStyleSheet((theme) => ({ container: {}, sidebar: { - width: 250, + width: 350, height: '100%', backgroundColor: theme.colors.background, - padding: 20 + padding: 20, + gap:1 }, sidebarText: { fontSize: 18 @@ -14,12 +15,22 @@ export default ThemedStyleSheet((theme) => ({ title: { fontWeight: 'bold', marginBottom: 16, - color:theme.colors.text + color: theme.colors.text }, item: { - paddingVertical: 8, - color:theme.colors.text - + display: 'flex', + width:"100%", + height:100, + backgroundColor: theme.colors.background, + // flex + // flex: 1, + flexDirection: "row", + // paddingVertical: 8, + color: theme.colors.text, + }, + textItem: { + backgroundColor: theme.colors.background, + color: theme.colors.text, }, outsideContainer: { position: 'absolute', diff --git a/apps/mobile/src/components/Skeleton/RootScreenContainer.tsx b/apps/mobile/src/components/Skeleton/RootScreenContainer.tsx index f677fce4..a2bd12f3 100644 --- a/apps/mobile/src/components/Skeleton/RootScreenContainer.tsx +++ b/apps/mobile/src/components/Skeleton/RootScreenContainer.tsx @@ -12,8 +12,9 @@ export const RootScreenContainer: React.FC = ({ style, children, ...p const shouldShowSidebar = isWeb && windowWidth >= 768; return ( - {shouldShowSidebar && } - {children} + + {/* {shouldShowSidebar && } */} + {children} ); }; @@ -22,7 +23,7 @@ const stylesheet = ThemedStyleSheet((theme) => ({ container: { flex: 1, backgroundColor: theme.colors.background, - flexDirection:"row", + flexDirection: "row", width: '100%', }, @@ -30,5 +31,7 @@ const stylesheet = ThemedStyleSheet((theme) => ({ flex: 1, width: '100%', maxWidth: '100%', + flexDirection: "row", + // width: '100%', }, })); diff --git a/apps/mobile/src/screens/Defi/index.tsx b/apps/mobile/src/screens/Defi/index.tsx new file mode 100644 index 00000000..c5a4f572 --- /dev/null +++ b/apps/mobile/src/screens/Defi/index.tsx @@ -0,0 +1,43 @@ +import { useState } from 'react'; +import { KeyboardAvoidingView, View, Text } from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { TextButton } from '../../components'; +import TabSelector from '../../components/TabSelector'; +import { useStyles } from '../../hooks'; +import { DefiScreenProps } from '../../types'; +import { SelectedTab, TABS_FORM_CREATE } from '../../types/tab'; +import stylesheet from './styles'; + +export const Defi: React.FC = ({ navigation }) => { + const styles = useStyles(stylesheet); + const [selectedTab, setSelectedTab] = useState(SelectedTab.CREATE_NOTE); + + const handleTabSelected = (tab: string | SelectedTab, screen?: string) => { + setSelectedTab(tab as any); + if (screen) { + navigation.navigate(screen as any); + } + }; + + return ( + + + + Cancel + + + + + {/* */} + + Coming soon + + + + ); +}; \ No newline at end of file diff --git a/apps/mobile/src/screens/Defi/styles.ts b/apps/mobile/src/screens/Defi/styles.ts new file mode 100644 index 00000000..5bb3943b --- /dev/null +++ b/apps/mobile/src/screens/Defi/styles.ts @@ -0,0 +1,64 @@ +import {StyleSheet} from 'react-native'; + +import {Spacing, ThemedStyleSheet, Typography} from '../../styles'; + +export default ThemedStyleSheet((theme) => ({ + container: { + flex: 1, + }, + + header: { + flexDirection: 'row', + justifyContent: 'space-between', + backgroundColor: theme.colors.surface, + paddingHorizontal: Spacing.pagePadding, + borderBottomWidth: StyleSheet.hairlineWidth, + borderBottomColor: theme.colors.divider, + }, + cancelButton: { + paddingVertical: Spacing.small, + paddingHorizontal: Spacing.xsmall, + }, + + content: { + flex: 1, + backgroundColor: theme.colors.background, + }, + form: { + flex: 1, + }, + input: { + flex: 1, + padding: Spacing.large, + color: theme.colors.inputText, + textAlignVertical: 'top', + fontSize: 16, + lineHeight: 24, + ...Typography.medium, + }, + imageContainer: { + padding: Spacing.pagePadding, + }, + image: { + width: '100%', + resizeMode: 'cover', + borderRadius: 8, + overflow: 'hidden', + }, + + buttons: { + position: 'relative', + }, + mediaButtons: { + flexDirection: 'row', + paddingHorizontal: Spacing.pagePadding, + paddingVertical: Spacing.small, + gap: Spacing.large, + alignItems: 'center', + }, + sendButton: { + position: 'absolute', + right: Spacing.pagePadding, + bottom: '110%', + }, +})); diff --git a/apps/mobile/src/screens/Games/index.tsx b/apps/mobile/src/screens/Games/index.tsx new file mode 100644 index 00000000..2229dbc7 --- /dev/null +++ b/apps/mobile/src/screens/Games/index.tsx @@ -0,0 +1,44 @@ +import { useState } from 'react'; +import { KeyboardAvoidingView, View, Text} from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { TextButton } from '../../components'; +import TabSelector from '../../components/TabSelector'; +import { useStyles } from '../../hooks'; +import { GameSreenProps } from '../../types'; +import { SelectedTab, TABS_FORM_CREATE } from '../../types/tab'; +import stylesheet from './styles'; + +export const Games: React.FC = ({ navigation }) => { + const styles = useStyles(stylesheet); + const [selectedTab, setSelectedTab] = useState(SelectedTab.CREATE_NOTE); + + const handleTabSelected = (tab: string | SelectedTab, screen?: string) => { + setSelectedTab(tab as any); + if (screen) { + navigation.navigate(screen as any); + } + }; + + return ( + + + + Cancel + + + + + {/* */} + + Coming soon + + + + + ); +}; diff --git a/apps/mobile/src/screens/Games/styles.ts b/apps/mobile/src/screens/Games/styles.ts new file mode 100644 index 00000000..5bb3943b --- /dev/null +++ b/apps/mobile/src/screens/Games/styles.ts @@ -0,0 +1,64 @@ +import {StyleSheet} from 'react-native'; + +import {Spacing, ThemedStyleSheet, Typography} from '../../styles'; + +export default ThemedStyleSheet((theme) => ({ + container: { + flex: 1, + }, + + header: { + flexDirection: 'row', + justifyContent: 'space-between', + backgroundColor: theme.colors.surface, + paddingHorizontal: Spacing.pagePadding, + borderBottomWidth: StyleSheet.hairlineWidth, + borderBottomColor: theme.colors.divider, + }, + cancelButton: { + paddingVertical: Spacing.small, + paddingHorizontal: Spacing.xsmall, + }, + + content: { + flex: 1, + backgroundColor: theme.colors.background, + }, + form: { + flex: 1, + }, + input: { + flex: 1, + padding: Spacing.large, + color: theme.colors.inputText, + textAlignVertical: 'top', + fontSize: 16, + lineHeight: 24, + ...Typography.medium, + }, + imageContainer: { + padding: Spacing.pagePadding, + }, + image: { + width: '100%', + resizeMode: 'cover', + borderRadius: 8, + overflow: 'hidden', + }, + + buttons: { + position: 'relative', + }, + mediaButtons: { + flexDirection: 'row', + paddingHorizontal: Spacing.pagePadding, + paddingVertical: Spacing.small, + gap: Spacing.large, + alignItems: 'center', + }, + sendButton: { + position: 'absolute', + right: Spacing.pagePadding, + bottom: '110%', + }, +})); diff --git a/apps/mobile/src/types/routes.ts b/apps/mobile/src/types/routes.ts index e73be770..cb80fbe4 100644 --- a/apps/mobile/src/types/routes.ts +++ b/apps/mobile/src/types/routes.ts @@ -28,6 +28,8 @@ export type MainStackParams = { ChannelsFeed: undefined; ChannelDetail: {postId: string; post?: NDKEvent}; CreateForm: undefined; + Defi: undefined; + Games:undefined }; export type HomeBottomStackParams = { @@ -142,3 +144,14 @@ export type CreateFormScreenProps = CompositeScreenProps< NativeStackScreenProps, NativeStackScreenProps >; + + +export type DefiScreenProps = CompositeScreenProps< + NativeStackScreenProps, + NativeStackScreenProps +>; + +export type GameSreenProps = CompositeScreenProps< + NativeStackScreenProps, + NativeStackScreenProps +>;