diff --git a/apps/mobile/src/app/Router.tsx b/apps/mobile/src/app/Router.tsx index 6626baa2..91067bf9 100644 --- a/apps/mobile/src/app/Router.tsx +++ b/apps/mobile/src/app/Router.tsx @@ -70,6 +70,7 @@ import { Community } from '../screens/Community'; import { AuthStackParams, HomeBottomStackParams, MainStackParams, RootStackParams } from '../types'; import { initGoogleAnalytics, logPageView } from '../utils/analytics'; import { ScreenRecordStream } from '../modules/Studio/ScreenRecord'; +import { DAOScreen } from '../screens/DAO'; type TabBarIconProps = { focused: boolean; @@ -343,6 +344,7 @@ const MainNavigator: React.FC = () => { + ); @@ -484,7 +486,14 @@ const linking = { token: (token: string) => `${token}`, }, }, - Community: 'app/community' + Community: 'app/community', + DAO: 'app/dao', + DAODetail: { + path: 'app/dao/:daoId', + parse: { + daoId: (daoId: string) => `${daoId}`, + }, + }, }, }, }, diff --git a/apps/mobile/src/modules/DAO/index.tsx b/apps/mobile/src/modules/DAO/index.tsx new file mode 100644 index 00000000..320aa2b4 --- /dev/null +++ b/apps/mobile/src/modules/DAO/index.tsx @@ -0,0 +1,71 @@ +import { useNavigation } from '@react-navigation/native'; +import { useState } from 'react'; +import { View, Text } from 'react-native'; +import { useStyles, useTheme } from '../../hooks'; +import { MainStackNavigationProps } from '../../types'; +import { SelectedTab, TABS_COMMUNITY, TABS_TIP_LIST } from '../../types/tab'; +import stylesheet from './styles'; +import { Button, Input, Modal } from '../../components'; + +export const DAOComponent: React.FC = () => { + const styles = useStyles(stylesheet); + const theme = useTheme(); + const navigation = useNavigation(); + const [selectedTab, setSelectedTab] = useState(SelectedTab.ALL_GROUP); + const handleTabSelected = (tab: string | SelectedTab, screen?: string) => { + setSelectedTab(tab as any); + if (screen) { + navigation.navigate(screen as any); + } + }; + + + const [isFormCreateDao, setIsFormCreateDao] = useState(false); + const handleFormCreateDao = () => { + + setIsFormCreateDao(!isFormCreateDao); + // navigation.navigate('MainStack', { screen: 'CreateForm' }); + } + + const handleCallbackCreateDao = () => { + + } + return ( + + + {isFormCreateDao && ( + + Create DAO + + + + + + + + + + + + + )} + + DAO coming soon + + + + + ); +}; diff --git a/apps/mobile/src/modules/DAO/styles.ts b/apps/mobile/src/modules/DAO/styles.ts new file mode 100644 index 00000000..f9d7da04 --- /dev/null +++ b/apps/mobile/src/modules/DAO/styles.ts @@ -0,0 +1,66 @@ +import {Spacing, ThemedStyleSheet} from '../../styles'; + +export default ThemedStyleSheet((theme) => ({ + container: { + flex: 1, + backgroundColor: theme.colors.background, + paddingVertical: Spacing.xxxsmall, + paddingHorizontal: Spacing.normal, + }, + text: { + color: theme.colors.text, + }, + + flatListContent: { + paddingHorizontal: Spacing.pagePadding, + paddingVertical: Spacing.medium, + }, + + separator: { + height: 1, + backgroundColor: theme.colors.divider, + }, + + tip: { + flexDirection: 'row', + justifyContent: 'space-between', + backgroundColor: theme.colors.surface, + padding: Spacing.xsmall, + borderRadius: 8, + gap: Spacing.xsmall, + }, + tipInfo: { + gap: Spacing.xxsmall, + }, + token: { + flex: 1, + flexDirection: 'row', + gap: Spacing.xsmall, + }, + + senderInfo: { + flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + gap: Spacing.medium, + }, + sender: { + flex: 1, + }, + + buttonIndicator: { + marginRight: Spacing.xsmall, + }, + createPostButton: { + position: 'absolute', + bottom: Spacing.large, + right: Spacing.pagePadding, + }, + modal: { + // backgroundColor: theme.colors.background, + // padding: Spacing.normal, + // borderRadius: 8, + height: '100%', + }, +})); diff --git a/apps/mobile/src/screens/DAO/index.tsx b/apps/mobile/src/screens/DAO/index.tsx new file mode 100644 index 00000000..16f1bad4 --- /dev/null +++ b/apps/mobile/src/screens/DAO/index.tsx @@ -0,0 +1,40 @@ +import {useState} from 'react'; +import {KeyboardAvoidingView, ScrollView, Text, View} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {TextButton} from '../../components'; +import {useStyles, useTheme} from '../../hooks'; +import { DAOScreenProps} from '../../types'; +import {SelectedTab, TABS_CONSOLE} from '../../types/tab'; +import stylesheet from './styles'; +import { DAOComponent } from '../../modules/DAO'; + +export const DAOScreen: React.FC = ({navigation}) => { + const theme = useTheme(); + const styles = useStyles(stylesheet); + const [selectedTab, setSelectedTab] = useState( + SelectedTab.LAUNCHPAD_VIEW, + ); + const handleTabSelected = (tab: string | SelectedTab, screen?: string) => { + setSelectedTab(tab as any); + if (screen) { + navigation.navigate(screen as any); + } + }; + return ( + + + + Cancel + + + + + + + + + + + + ); +}; diff --git a/apps/mobile/src/screens/DAO/styles.ts b/apps/mobile/src/screens/DAO/styles.ts new file mode 100644 index 00000000..c4cb27ec --- /dev/null +++ b/apps/mobile/src/screens/DAO/styles.ts @@ -0,0 +1,76 @@ +// import {StyleSheet} from 'react-native'; + +import {Spacing, ThemedStyleSheet, Typography} from '../../styles'; + +export default ThemedStyleSheet((theme) => ({ + container: { + flex: 1, + color: theme.colors.text, + backgroundColor: theme.colors.background, + }, + 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, + margin: Spacing.pagePadding, + // color: theme.colors.text, + }, + viewContent: { + flex: 1, + backgroundColor: theme.colors.background, + marginTop: Spacing.pagePadding, + marginBottom: Spacing.pagePadding, + // color: theme.colors.text, + }, + 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%', + }, + text: { + color: theme.colors.text, + }, +})); diff --git a/apps/mobile/src/types/routes.ts b/apps/mobile/src/types/routes.ts index 4a5f689a..229a2579 100644 --- a/apps/mobile/src/types/routes.ts +++ b/apps/mobile/src/types/routes.ts @@ -94,6 +94,8 @@ export type MainStackParams = { Console: undefined; Community: undefined; RecordedStream: { streamId: string, recordingUrl?: string }; + DAO: undefined; + DAODetail: { daoId: string }; }; @@ -131,6 +133,8 @@ export type HomeBottomStackParams = { Nameservice: undefined; Console: undefined; Community: undefined; + DAO: undefined; + DAODetail: { daoId: string }; // CreateForm: undefined; // ChannelsFeed:undefined; @@ -426,6 +430,12 @@ export type CommunityScreenProps = CompositeScreenProps< NativeStackScreenProps >; + +export type DAOScreenProps = CompositeScreenProps< + NativeStackScreenProps, + NativeStackScreenProps +>; + export type DrawerStackNavigationProps = DrawerNavigationProp; /** TODO delete */