From d172162ebfa5aa029ac7ab2c104cb589485c8239 Mon Sep 17 00:00:00 2001 From: MSghais Date: Sun, 4 Aug 2024 15:35:13 +0200 Subject: [PATCH 1/3] lint fix --- apps/website/src/app/components/About.tsx | 15 ++++++----- .../src/app/components/HeroSection.tsx | 26 +++++++++---------- apps/website/src/app/components/Navbar.tsx | 6 ++++- 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/apps/website/src/app/components/About.tsx b/apps/website/src/app/components/About.tsx index 40f503fd..0ed0ee93 100644 --- a/apps/website/src/app/components/About.tsx +++ b/apps/website/src/app/components/About.tsx @@ -1,18 +1,21 @@ 'use client'; -import { motion } from 'framer-motion'; +import {motion} from 'framer-motion'; export function About() { return (
- The name "Aligned Fam Kernel" is inspired by our vision to align the web3 family together, in one Social graph. We build and fight together, not against. What if the treasure are the friends we made along the way? Then A decentralized social network should be a treasure trove of memories and connections! + The name "Aligned Fam Kernel" is inspired by our vision to align the web3 family + together, in one Social graph. We build and fight together, not against. What if the + treasure are the friends we made along the way? Then A decentralized social network should + be a treasure trove of memories and connections!
); diff --git a/apps/website/src/app/components/HeroSection.tsx b/apps/website/src/app/components/HeroSection.tsx index 5cc61c8e..d27a8ea2 100644 --- a/apps/website/src/app/components/HeroSection.tsx +++ b/apps/website/src/app/components/HeroSection.tsx @@ -1,28 +1,28 @@ 'use client'; -import { motion } from 'framer-motion'; +import {motion} from 'framer-motion'; export function HeroSection() { return (

@@ -48,12 +48,12 @@ export function HeroSection() { src="/assets/degen-logo.png" className="absolute left-[-31px] desktop:left-2 bottom-[39px] desktop:bottom-[49px] z-[250] desktop:w-[380px] w-[210px]" alt="" - animate={{ x: [-500, 0] }} + animate={{x: [-500, 0]}} transition={{ - x: { duration: 1 }, + x: {duration: 1}, }} - initial={{ opacity: 0 }} - whileInView={{ opacity: 1 }} + initial={{opacity: 0}} + whileInView={{opacity: 1}} />

); diff --git a/apps/website/src/app/components/Navbar.tsx b/apps/website/src/app/components/Navbar.tsx index 3af36bb9..b44ad69d 100644 --- a/apps/website/src/app/components/Navbar.tsx +++ b/apps/website/src/app/components/Navbar.tsx @@ -23,7 +23,11 @@ export function Navbar() {
- +
- + */}
From 8076add55f061c160eef9863e96d28a4d68167f1 Mon Sep 17 00:00:00 2001 From: MSGhais Date: Tue, 6 Aug 2024 20:21:16 +0200 Subject: [PATCH 3/3] add desktop view + sidebar + start empty screen --- apps/mobile/src/app/App.tsx | 2 +- apps/mobile/src/app/Router.tsx | 5 + apps/mobile/src/assets/icons.tsx | 16 ++- .../src/components/Layout/sidebar/index.tsx | 106 ++++++++++++++++-- .../src/components/Layout/sidebar/styles.ts | 23 +++- .../Skeleton/RootScreenContainer.tsx | 9 +- apps/mobile/src/screens/Defi/index.tsx | 43 +++++++ apps/mobile/src/screens/Defi/styles.ts | 64 +++++++++++ apps/mobile/src/screens/Games/index.tsx | 44 ++++++++ apps/mobile/src/screens/Games/styles.ts | 64 +++++++++++ apps/mobile/src/types/routes.ts | 13 +++ 11 files changed, 364 insertions(+), 25 deletions(-) create mode 100644 apps/mobile/src/screens/Defi/index.tsx create mode 100644 apps/mobile/src/screens/Defi/styles.ts create mode 100644 apps/mobile/src/screens/Games/index.tsx create mode 100644 apps/mobile/src/screens/Games/styles.ts 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 +>;