Skip to content

Commit

Permalink
Desktop view + writing issues and screens to start (#9)
Browse files Browse the repository at this point in the history
* lint fix

* fix link + start ui desktop

* add desktop view + sidebar + start empty screen
  • Loading branch information
MSghais authored Aug 6, 2024
1 parent 9c2c9cd commit 7002b51
Show file tree
Hide file tree
Showing 11 changed files with 364 additions and 25 deletions.
2 changes: 1 addition & 1 deletion apps/mobile/src/app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default function App() {
if (!appIsReady) return null;

return (
<View style={{flex: 1}} onLayout={onLayoutRootView}>
<View style={{flex: 1, flexDirection:"row"}} onLayout={onLayoutRootView}>
<Router />
</View>
);
Expand Down
5 changes: 5 additions & 0 deletions apps/mobile/src/app/Router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<RootStackParams>();
const AuthStack = createNativeStackNavigator<AuthStackParams>();
Expand Down Expand Up @@ -164,6 +166,8 @@ const MainNavigator: React.FC = () => {
<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>
);
};
Expand Down Expand Up @@ -220,6 +224,7 @@ export const Router: React.FC = () => {
<NavigationContainer
// linking={linking}
>
<Sidebar></Sidebar>
<RootNavigator />
</NavigationContainer>
);
Expand Down
16 changes: 13 additions & 3 deletions apps/mobile/src/assets/icons.tsx
Original file line number Diff line number Diff line change
@@ -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<SvgProps> = (props) => (
<Svg viewBox="0 0 72 72" fill="none" {...props}>
Expand All @@ -15,6 +15,16 @@ export const AddPostIcon: React.FC<SvgProps> = (props) => (
</Svg>
);

export const GameIcon = () => {
return (
<Svg x="0px" y="0px" width="32" height="32" viewBox="0 0 32 32">
<Path
fill="currentColor"
d="M 16 3 C 14.55 3 13.336007 3.5797556 12.552734 4.4609375 C 11.769462 5.3421194 11.400391 6.4773872 11.400391 7.5996094 C 11.400391 8.7218315 11.769462 9.8590529 12.552734 10.740234 C 12.684189 10.888121 12.845202 11.013079 13 11.142578 L 13 11.632812 L 2.4023438 15.722656 C 1.5531496 16.050203 1.0301181 16.859848 1.0019531 17.664062 C 1.0011783 17.686188 1.0097926 17.708288 1.0097656 17.730469 L 1 17.730469 L 1 22.152344 C 1 22.772954 1.3647211 23.338196 1.921875 23.599609 L 11.005859 27.882812 C 14.164346 29.372377 17.835654 29.372377 20.994141 27.882812 L 30.082031 23.597656 C 30.633469 23.336312 31 22.772954 31 22.152344 L 31 17.732422 L 30.990234 17.732422 C 30.990226 17.709596 30.998844 17.68683 30.998047 17.664062 C 30.969877 16.859848 30.44685 16.050203 29.597656 15.722656 L 19 11.632812 L 19 11.142578 C 19.154798 11.013079 19.315811 10.888121 19.447266 10.740234 C 20.230538 9.8590529 20.599609 8.7218315 20.599609 7.5996094 C 20.599609 6.4773872 20.230538 5.3421194 19.447266 4.4609375 C 18.663993 3.5797556 17.45 3 16 3 z M 16 5 C 16.949999 5 17.536398 5.3202444 17.953125 5.7890625 C 18.369852 6.2578806 18.599609 6.9218315 18.599609 7.5996094 C 18.599609 8.2773872 18.369852 8.9413383 17.953125 9.4101562 C 17.536398 9.8789744 16.949999 10.199219 16 10.199219 C 15.050001 10.199219 14.463602 9.8789744 14.046875 9.4101562 C 13.630148 8.9413382 13.400391 8.2773872 13.400391 7.5996094 C 13.400391 6.9218315 13.630148 6.2578806 14.046875 5.7890625 C 14.463602 5.3202444 15.050001 5 16 5 z M 15 12.101562 C 15.318018 12.164288 15.652124 12.199219 16 12.199219 C 16.347876 12.199219 16.681982 12.164288 17 12.101562 L 17 17.548828 C 17 18.113858 16.56503 18.548828 16 18.548828 C 15.43497 18.548828 15 18.113858 15 17.548828 L 15 12.101562 z M 13 13.777344 L 13 17.548828 C 13 19.193798 14.35503 20.548828 16 20.548828 C 17.64497 20.548828 19 19.193798 19 17.548828 L 19 13.777344 L 28.878906 17.587891 C 29.008074 17.637709 28.99826 17.674197 29 17.732422 C 29.000022 17.73316 28.999974 17.733629 29 17.734375 C 29.0021 17.793905 29.01757 17.826805 28.892578 17.884766 L 19.537109 22.222656 C 17.304967 23.257064 14.693875 23.256941 12.462891 22.222656 L 3.109375 17.884766 C 2.9843856 17.826805 2.997915 17.793909 3 17.734375 C 3.0000519 17.732896 2.9999605 17.73192 3 17.730469 C 3.0015514 17.673511 2.9954893 17.637091 3.1230469 17.587891 L 13 13.777344 z M 8 17 A 2 1 0 0 0 8 19 A 2 1 0 0 0 8 17 z M 3 20.039062 L 11.623047 24.037109 C 14.392063 25.320825 17.609049 25.320702 20.378906 24.037109 L 29 20.039062 L 29 21.896484 L 20.140625 26.074219 C 17.523111 27.308656 14.476889 27.308656 11.859375 26.074219 L 3 21.896484 L 3 20.039062 z"></Path>
</Svg>
)
}

export const HomeIcon: React.FC<SvgProps> = (props) => (
<Svg viewBox="0 0 24 24" fill="none" {...props}>
<Path
Expand Down Expand Up @@ -86,8 +96,8 @@ export const AFKIcon: React.FC<SvgProps> = (props) => (
<Path
fill="currentColor"
d="m0 0h205l6 3 2 4v120l-4 5-2 1-132 1v38l136 1 2 3v127l-4 3-133 1-1 68-2 5-6 5h-139l-6-4-2-4v-285l3-6 4-3 64-1 1-76 5-5z"
// d="m0 0h143l5 4 1 4v156h62v-100l3-3h149l3 3v127l-3 3-96 1-1 57h96l4 3v127l-2 3h-151l-2-3v-84h-62v77l-3 6-4 2h-142l-4-2-3-8v-364l3-7z"
// d="M7.202 9.44V1h3.38v9.32c0 3.72-3.02 5.12-5.78 5.12-1.66 0-3.24-.52-4.04-1.32l.94-3.04c.76.66 1.86 1.06 2.86 1.06 1.4 0 2.64-.78 2.64-2.7ZM28.578 8c0 5-4.32 7.46-7.98 7.46-3.68 0-7.98-2.46-7.98-7.46s4.3-7.46 7.98-7.46c3.66 0 7.98 2.46 7.98 7.46Zm-3.46 0c0-2.86-2.44-4.26-4.52-4.26-2.1 0-4.54 1.4-4.54 4.26s2.44 4.24 4.54 4.24c2.08 0 4.52-1.38 4.52-4.24Zm-6.08.02c0-.94.6-1.56 1.56-1.56.94 0 1.54.62 1.54 1.56 0 .94-.6 1.54-1.54 1.54-.96 0-1.56-.6-1.56-1.54ZM30.001 1h3.94l5.52 8.26V15h-3.38V9.38L30.001 1Zm9.2 3.5 2.4-3.5h3.94l-4.38 5.82-1.96-2.32ZM56.335 15h-9v-2.74h8.3c1.14 0 1.72-.78 1.72-1.58 0-.78-.58-1.56-1.72-1.56h-8.3v-2.5h7.04c1.14 0 1.72-.76 1.72-1.54 0-.76-.58-1.54-1.72-1.54h-7.04V1h7.74c2.92 0 4.38 2.02 4.38 4.06 0 .84-.26 1.68-.76 2.38 1.3.84 1.92 2.2 1.92 3.54 0 2.04-1.46 4.02-4.28 4.02ZM78.414 8c0 5-4.32 7.46-7.98 7.46-3.68 0-7.98-2.46-7.98-7.46s4.3-7.46 7.98-7.46c3.66 0 7.98 2.46 7.98 7.46Zm-3.46 0c0-2.86-2.44-4.26-4.52-4.26-2.1 0-4.54 1.4-4.54 4.26s2.44 4.24 4.54 4.24c2.08 0 4.52-1.38 4.52-4.24Zm-6.08.02c0-.94.6-1.56 1.56-1.56.94 0 1.54.62 1.54 1.56 0 .94-.6 1.54-1.54 1.54-.96 0-1.56-.6-1.56-1.54ZM79.836 1h3.94l5.52 8.26V15h-3.38V9.38L79.836 1Zm9.2 3.5 2.4-3.5h3.94l-4.38 5.82-1.96-2.32Z"
// d="m0 0h143l5 4 1 4v156h62v-100l3-3h149l3 3v127l-3 3-96 1-1 57h96l4 3v127l-2 3h-151l-2-3v-84h-62v77l-3 6-4 2h-142l-4-2-3-8v-364l3-7z"
// d="M7.202 9.44V1h3.38v9.32c0 3.72-3.02 5.12-5.78 5.12-1.66 0-3.24-.52-4.04-1.32l.94-3.04c.76.66 1.86 1.06 2.86 1.06 1.4 0 2.64-.78 2.64-2.7ZM28.578 8c0 5-4.32 7.46-7.98 7.46-3.68 0-7.98-2.46-7.98-7.46s4.3-7.46 7.98-7.46c3.66 0 7.98 2.46 7.98 7.46Zm-3.46 0c0-2.86-2.44-4.26-4.52-4.26-2.1 0-4.54 1.4-4.54 4.26s2.44 4.24 4.54 4.24c2.08 0 4.52-1.38 4.52-4.24Zm-6.08.02c0-.94.6-1.56 1.56-1.56.94 0 1.54.62 1.54 1.56 0 .94-.6 1.54-1.54 1.54-.96 0-1.56-.6-1.56-1.54ZM30.001 1h3.94l5.52 8.26V15h-3.38V9.38L30.001 1Zm9.2 3.5 2.4-3.5h3.94l-4.38 5.82-1.96-2.32ZM56.335 15h-9v-2.74h8.3c1.14 0 1.72-.78 1.72-1.58 0-.78-.58-1.56-1.72-1.56h-8.3v-2.5h7.04c1.14 0 1.72-.76 1.72-1.54 0-.76-.58-1.54-1.72-1.54h-7.04V1h7.74c2.92 0 4.38 2.02 4.38 4.06 0 .84-.26 1.68-.76 2.38 1.3.84 1.92 2.2 1.92 3.54 0 2.04-1.46 4.02-4.28 4.02ZM78.414 8c0 5-4.32 7.46-7.98 7.46-3.68 0-7.98-2.46-7.98-7.46s4.3-7.46 7.98-7.46c3.66 0 7.98 2.46 7.98 7.46Zm-3.46 0c0-2.86-2.44-4.26-4.52-4.26-2.1 0-4.54 1.4-4.54 4.26s2.44 4.24 4.54 4.24c2.08 0 4.52-1.38 4.52-4.24Zm-6.08.02c0-.94.6-1.56 1.56-1.56.94 0 1.54.62 1.54 1.56 0 .94-.6 1.54-1.54 1.54-.96 0-1.56-.6-1.56-1.54ZM79.836 1h3.94l5.52 8.26V15h-3.38V9.38L79.836 1Zm9.2 3.5 2.4-3.5h3.94l-4.38 5.82-1.96-2.32Z"
/>
</Svg>
);
Expand Down
106 changes: 94 additions & 12 deletions apps/mobile/src/components/Layout/sidebar/index.tsx
Original file line number Diff line number Diff line change
@@ -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<MainStackNavigationProps>()
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 (
<View style={styles.sidebar}>
<Text style={styles.sidebarText}>AFK</Text>
<Text style={[styles.title]}>Features coming soon</Text>
{/*
<Text style={[styles.item]}>
Launchpad
</Text>
<Text style={[styles.item,]}>
Notifications
</Text>
<Text style={[styles.item]}>
Communities
</Text>
<Text style={[styles.item]}>
Art peace
</Text>
<Text style={[styles.item]}>
Onramp & DeFI
</Text>
</Text> */}
{/* <Pressable style={[styles.item]}
// onPress={handleNavigateToPostDetails}
>
</Pressable> */}
{/* <Pressable
// onPress={handleNavigateHome}
style={styles.item}>
<Text
style={styles.textItem}
>
Home
</Text>
</Pressable> */}


<Pressable
onPress={handleGameScreen}
style={styles.item}>
<Icon
name="GameIcon"
size={24}
style={{backgroundColor:theme.theme.colors.background}}
/>
<Text style={styles.textItem}>
Gamefi
</Text>

</Pressable>


<Pressable
onPress={handleDefiScreen}
style={styles.item}>
<Icon
name="CoinIcon"
size={24}
/>
<Text style={styles.textItem}>
Onramp & DeFI
</Text>

</Pressable>


<Pressable
onPress={handleNavigateProfile}
style={styles.item}>
<Icon
name="UserIcon"
size={24}
/>
<Text style={styles.textItem}>
Profile

</Text>

</Pressable>



</View>
);
};
Expand Down
23 changes: 17 additions & 6 deletions apps/mobile/src/components/Layout/sidebar/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,34 @@ 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
},
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',
Expand Down
9 changes: 6 additions & 3 deletions apps/mobile/src/components/Skeleton/RootScreenContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ export const RootScreenContainer: React.FC<ViewProps> = ({ style, children, ...p
const shouldShowSidebar = isWeb && windowWidth >= 768;
return (
<View style={[styles.container, style]} {...props}>
{shouldShowSidebar && <Sidebar></Sidebar>}
<View style={styles.content}>{children}</View>
<View style={styles.content}>
{/* {shouldShowSidebar && <Sidebar></Sidebar>} */}
{children}</View>
</View>
);
};
Expand All @@ -22,13 +23,15 @@ const stylesheet = ThemedStyleSheet((theme) => ({
container: {
flex: 1,
backgroundColor: theme.colors.background,
flexDirection:"row",
flexDirection: "row",
width: '100%',

},
content: {
flex: 1,
width: '100%',
maxWidth: '100%',
flexDirection: "row",
// width: '100%',
},
}));
43 changes: 43 additions & 0 deletions apps/mobile/src/screens/Defi/index.tsx
Original file line number Diff line number Diff line change
@@ -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<DefiScreenProps> = ({ navigation }) => {
const styles = useStyles(stylesheet);
const [selectedTab, setSelectedTab] = useState<SelectedTab | undefined>(SelectedTab.CREATE_NOTE);

const handleTabSelected = (tab: string | SelectedTab, screen?: string) => {
setSelectedTab(tab as any);
if (screen) {
navigation.navigate(screen as any);
}
};

return (
<View style={styles.container}>
<SafeAreaView edges={['top', 'left', 'right']} style={styles.header}>
<TextButton style={styles.cancelButton} onPress={navigation.goBack}>
Cancel
</TextButton>
</SafeAreaView>

<KeyboardAvoidingView behavior="padding" style={styles.content}>
{/* <TabSelector
activeTab={selectedTab}
handleActiveTab={handleTabSelected}
buttons={TABS_FORM_CREATE}
addScreenNavigation={false}
></TabSelector> */}
<SafeAreaView edges={['bottom', 'left', 'right']} style={styles.content}>
<Text>Coming soon</Text>
</SafeAreaView>
</KeyboardAvoidingView>
</View>
);
};
64 changes: 64 additions & 0 deletions apps/mobile/src/screens/Defi/styles.ts
Original file line number Diff line number Diff line change
@@ -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%',
},
}));
Loading

0 comments on commit 7002b51

Please sign in to comment.