Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Desktop view + writing issues and screens to start #9

Merged
merged 5 commits into from
Aug 6, 2024
Merged

Desktop view + writing issues and screens to start #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d172162
lint fix
MSghais Aug 4, 2024
c9f1e03
fix link + start ui desktop
MSghais Aug 5, 2024
f597bf7
Merge branch 'main' into develop
MSghais Aug 5, 2024
8076add
add desktop view + sidebar + start empty screen
MSghais Aug 6, 2024
c4a3699
merge
MSghais Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/mobile/src/app/App.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading