From f5e0e668ad950f38582e499fe34a0dbbb582516f Mon Sep 17 00:00:00 2001 From: dorianvp Date: Tue, 18 Feb 2025 01:06:03 -0300 Subject: [PATCH] chore(drawer): WIP fix --- app/LoadedApp/LoadedApp.tsx | 1007 +++++++++++++++++++------------- components/About/About.tsx | 2 +- components/Header/Header.tsx | 2 +- components/History/History.tsx | 2 +- 4 files changed, 610 insertions(+), 403 deletions(-) diff --git a/app/LoadedApp/LoadedApp.tsx b/app/LoadedApp/LoadedApp.tsx index 4c951d315..6124269ce 100644 --- a/app/LoadedApp/LoadedApp.tsx +++ b/app/LoadedApp/LoadedApp.tsx @@ -15,8 +15,16 @@ import { } from 'react-native'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import { BottomTabBarButtonProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { createDrawerNavigator, DrawerNavigatorProps } from '@react-navigation/drawer'; import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; -import { faDownload, faCog, faRefresh, faPaperPlane, faClockRotateLeft } from '@fortawesome/free-solid-svg-icons'; +import { + faDownload, + faCog, + faRefresh, + faPaperPlane, + faClockRotateLeft, + faUpload, +} from '@fortawesome/free-solid-svg-icons'; import { useTheme } from '@react-navigation/native'; import ReanimatedDrawerLayout, { DrawerType } from 'react-native-gesture-handler/ReanimatedDrawerLayout'; import { I18n } from 'i18n-js'; @@ -91,10 +99,12 @@ import Receive from '../../components/Receive'; import Settings from '../../components/Settings'; import Menu from './components/Menu'; import { MessagesModal } from '../../components/Messages'; -import { PlatformPressable } from '@react-navigation/elements'; +import { PlatformPressable, Text } from '@react-navigation/elements'; -const About = React.lazy(() => import('../../components/About')); -const Seed = React.lazy(() => import('../../components/Seed')); +// const About = React.lazy(() => import('../../components/About')); +import About from '../../components/About'; +// const Seed = React.lazy(() => import('../../components/Seed')); +import Seed from '../../components/Seed'; const Info = React.lazy(() => import('../../components/Info')); const SyncReport = React.lazy(() => import('../../components/SyncReport')); const Rescan = React.lazy(() => import('../../components/Rescan')); @@ -109,6 +119,7 @@ const pt = require('../translations/pt.json'); const ru = require('../translations/ru.json'); const Tab = createBottomTabNavigator(); +const Drawer = createDrawerNavigator(); // for testing //const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); @@ -436,8 +447,6 @@ type LoadedAppClassProps = { type LoadedAppClassState = AppStateLoaded & AppContextLoaded; const TabPressable: React.FC = ({ colors, ...props }) => { - console.log('colors', colors); - return ; }; @@ -1828,403 +1837,601 @@ export class LoadedAppClass extends Component - (this.drawerRef = ref)} - renderNavigationView={() => menu} - drawerType={DrawerType.BACK} - drawerWidth={Dimensions.get('window').width * 0.7}> - this.setState({ aboutModalVisible: false })}> - }> - this.setState({ aboutModalVisible: false })} /> - - - - this.setState({ infoModalVisible: false })}> - }> - this.setState({ infoModalVisible: false })} /> - - - - this.setState({ syncReportModalVisible: false })}> - }> - this.setState({ syncReportModalVisible: false })} /> - - - - this.setState({ poolsModalVisible: false })}> - }> - this.setState({ poolsModalVisible: false })} - setPrivacyOption={this.setPrivacyOption} - /> - - - - this.setState({ insightModalVisible: false })}> - }> - this.setState({ insightModalVisible: false })} - setPrivacyOption={this.setPrivacyOption} - /> - - - - this.setState({ rescanModalVisible: false })}> - }> - this.setState({ rescanModalVisible: false })} doRescan={this.doRescan} /> - - - - this.setState({ settingsModalVisible: false })}> - this.setState({ settingsModalVisible: false })} - setWalletOption={this.setWalletOption} - setServerOption={this.setServerOption} - setCurrencyOption={this.setCurrencyOption} - setLanguageOption={this.setLanguageOption} - setSendAllOption={this.setSendAllOption} - setDonationOption={this.setDonationOption} + this.setState({ syncReportModalVisible: false })}> + }> + this.setState({ syncReportModalVisible: false })} /> + + + + this.setState({ poolsModalVisible: false })}> + }> + this.setState({ poolsModalVisible: false })} + setPrivacyOption={this.setPrivacyOption} + /> + + + this.setState({ rescanModalVisible: false })}> + }> + this.setState({ rescanModalVisible: false })} doRescan={this.doRescan} /> + + + this.setState({ seedViewModalVisible: false })}> + }> + this.setState({ seedViewModalVisible: false })} + onClickCancel={() => this.setState({ seedViewModalVisible: false })} + action={SeedActionEnum.view} setPrivacyOption={this.setPrivacyOption} - setModeOption={this.setModeOption} - setSecurityOption={this.setSecurityOption} - setSelectServerOption={this.setSelectServerOption} - setRescanMenuOption={this.setRescanMenuOption} - setRecoveryWalletInfoOnDeviceOption={this.setRecoveryWalletInfoOnDeviceOption} + keepAwake={this.keepAwake} /> - - - this.setState({ seedViewModalVisible: false })}> - }> - this.setState({ seedViewModalVisible: false })} - onClickCancel={() => this.setState({ seedViewModalVisible: false })} - action={SeedActionEnum.view} - setPrivacyOption={this.setPrivacyOption} - keepAwake={this.keepAwake} - /> - - - - this.setState({ seedChangeModalVisible: false })}> - }> - await this.onClickOKChangeWallet({ startingApp: false })} - onClickCancel={() => this.setState({ seedChangeModalVisible: false })} - action={SeedActionEnum.change} - setPrivacyOption={this.setPrivacyOption} - /> - - - - this.setState({ seedBackupModalVisible: false })}> - }> - await this.onClickOKRestoreBackup()} - onClickCancel={() => this.setState({ seedBackupModalVisible: false })} - action={SeedActionEnum.backup} - setPrivacyOption={this.setPrivacyOption} - /> - - - - this.setState({ seedServerModalVisible: false })}> - }> - await this.onClickOKServerWallet()} - onClickCancel={async () => { - // restart all the tasks again, nothing happen. - this.rpc.setInRefresh(false); - await this.rpc.clearTimers(); - await this.rpc.configure(); - this.setState({ seedServerModalVisible: false }); - }} - action={SeedActionEnum.server} - setPrivacyOption={this.setPrivacyOption} - /> - - - - this.setState({ ufvkViewModalVisible: false })}> - }> - this.setState({ ufvkViewModalVisible: false })} - onClickCancel={() => this.setState({ ufvkViewModalVisible: false })} - action={UfvkActionEnum.view} - setPrivacyOption={this.setPrivacyOption} - /> - - - - this.setState({ ufvkChangeModalVisible: false })}> - }> - await this.onClickOKChangeWallet({ startingApp: false })} - onClickCancel={() => this.setState({ ufvkChangeModalVisible: false })} - action={UfvkActionEnum.change} - setPrivacyOption={this.setPrivacyOption} - /> - - - - this.setState({ ufvkBackupModalVisible: false })}> - }> - await this.onClickOKRestoreBackup()} - onClickCancel={() => this.setState({ ufvkBackupModalVisible: false })} - action={UfvkActionEnum.backup} - setPrivacyOption={this.setPrivacyOption} - /> - - - - this.setState({ ufvkServerModalVisible: false })}> - }> - await this.onClickOKServerWallet()} - onClickCancel={async () => { - // restart all the tasks again, nothing happen. - this.rpc.setInRefresh(false); - await this.rpc.clearTimers(); - await this.rpc.configure(); - this.setState({ ufvkServerModalVisible: false }); - }} - action={UfvkActionEnum.server} - setPrivacyOption={this.setPrivacyOption} - /> - - - - this.setState({ computingModalVisible: false })}> - }> - - - - - - this.setState({ - addressBookModalVisible: false, - addressBookCurrentAddress: '', - addressBookOpenPriorModal: () => {}, - }) - }> - }> - - this.setState({ - addressBookModalVisible: false, - addressBookCurrentAddress: '', - addressBookOpenPriorModal: () => {}, - }) - } - setAddressBook={this.setAddressBook} - /> - - - - this.setState({ messagesModalVisible: false })}> - }> - this.setState({ messagesModalVisible: false })} - /> - - - - - - {mode === ModeEnum.advanced || - (valueTransfersTotal !== null && valueTransfersTotal > 0) || - (!readOnly && !!totalBalance && totalBalance.spendableOrchard + totalBalance.spendablePrivate > 0) ? ( - ({ - tabBarIcon: ({ focused }) => fnTabBarIcon(route, focused), - tabBarIconStyle: { alignItems: 'center', justifyContent: 'center', alignSelf: 'center' }, - tabBarItemStyle: { - justifyContent: 'center', - alignSelf: 'center', - }, - tabBarLabelPosition: 'below-icon', - tabBarActiveTintColor: colors.background, - tabBarActiveBackgroundColor: colors.primaryDisabled, - tabBarInactiveTintColor: colors.money, - tabBarStyle: { - borderRadius: 0, - borderTopColor: colors.primaryDisabled, - borderTopWidth: 1, - }, - headerShown: false, - tabBarButton: renderTabPressable(colors), - })}> - - {() => ( - - )} - - {!readOnly && - selectServer !== SelectServerEnum.offline && - (mode === ModeEnum.advanced || - (!!totalBalance && totalBalance.spendableOrchard + totalBalance.spendablePrivate > 0) || - (!!totalBalance && - totalBalance.orchardBal + totalBalance.privateBal > 0 && - totalBalance.spendableOrchard + totalBalance.spendablePrivate === 0 && - somePending)) && ( - - {() => ( - - )} - - )} - - {() => ( - - )} - - - ) : ( - <> - {valueTransfersTotal === null || addresses === null || totalBalance === null ? ( - - ) : ( - - - {() => ( - - )} - - - )} - - )} - + + + + this.setState({ seedChangeModalVisible: false })}> + }> + await this.onClickOKChangeWallet({ startingApp: false })} + onClickCancel={() => this.setState({ seedChangeModalVisible: false })} + action={SeedActionEnum.change} + setPrivacyOption={this.setPrivacyOption} + /> + + + + this.setState({ seedBackupModalVisible: false })}> + }> + await this.onClickOKRestoreBackup()} + onClickCancel={() => this.setState({ seedBackupModalVisible: false })} + action={SeedActionEnum.backup} + setPrivacyOption={this.setPrivacyOption} + /> + + + + this.setState({ seedServerModalVisible: false })}> + }> + await this.onClickOKServerWallet()} + onClickCancel={async () => { + // restart all the tasks again, nothing happen. + this.rpc.setInRefresh(false); + await this.rpc.clearTimers(); + await this.rpc.configure(); + this.setState({ seedServerModalVisible: false }); + }} + action={SeedActionEnum.server} + setPrivacyOption={this.setPrivacyOption} + /> + + + + this.setState({ ufvkViewModalVisible: false })}> + }> + this.setState({ ufvkViewModalVisible: false })} + onClickCancel={() => this.setState({ ufvkViewModalVisible: false })} + action={UfvkActionEnum.view} + setPrivacyOption={this.setPrivacyOption} + /> + + + + this.setState({ ufvkChangeModalVisible: false })}> + }> + await this.onClickOKChangeWallet({ startingApp: false })} + onClickCancel={() => this.setState({ ufvkChangeModalVisible: false })} + action={UfvkActionEnum.change} + setPrivacyOption={this.setPrivacyOption} + /> + + + + this.setState({ ufvkBackupModalVisible: false })}> + }> + await this.onClickOKRestoreBackup()} + onClickCancel={() => this.setState({ ufvkBackupModalVisible: false })} + action={UfvkActionEnum.backup} + setPrivacyOption={this.setPrivacyOption} + /> + + + + this.setState({ ufvkServerModalVisible: false })}> + }> + await this.onClickOKServerWallet()} + onClickCancel={async () => { + // restart all the tasks again, nothing happen. + this.rpc.setInRefresh(false); + await this.rpc.clearTimers(); + await this.rpc.configure(); + this.setState({ ufvkServerModalVisible: false }); + }} + action={UfvkActionEnum.server} + setPrivacyOption={this.setPrivacyOption} + /> + + + + this.setState({ computingModalVisible: false })}> + }> + + + + this.setState({ messagesModalVisible: false })}> + }> + this.setState({ messagesModalVisible: false })} + /> + + + + + + {/* + If 'advanced mode' OR (total VTs > 0) OR (!readOnly AND total balance > 0 AND total shielded balance > 0) + else + if not read only AND + server online AND + (advanced mode OR spendable orchard + spendable private > 0 OR orchard balance + private balance > 0) + {!readOnly && + // selectServer !== SelectServerEnum.offline && + // (mode === ModeEnum.advanced || + // (!!totalBalance && totalBalance.spendableOrchard + totalBalance.spendablePrivate > 0) || + // (!!totalBalance && + // totalBalance.orchardBal + totalBalance.privateBal > 0 && + // totalBalance.spendableOrchard + totalBalance.spendablePrivate === 0 && + // somePending)) && + + */} + {mode === ModeEnum.advanced || + (valueTransfersTotal !== null && valueTransfersTotal > 0) || + (!readOnly && !!totalBalance && totalBalance.spendableOrchard + totalBalance.spendablePrivate > 0) ? ( + {}, + poolsMoreInfoOnClick: this.poolsMoreInfoOnClick, + syncingStatusMoreInfoOnClick: this.syncingStatusMoreInfoOnClick, + setPrivacyOption: this.setPrivacyOption, + setShieldingAmount: this.setShieldingAmount, + setComputingModalVisible: this.setComputingModalVisible, + setScrollToTop: this.setScrollToTop, + scrollToTop: scrollToTop, + setScrollToBottom: this.setScrollToBottom, + scrollToBottom: scrollToBottom, + setUfvkViewModalVisible: this.setUfvkViewModalVisible, + sendTransaction: this.sendTransaction, + setServerOption: this.setServerOption, + }, + }} + settingsOptions={{ + setWalletOption: this.setWalletOption, + setServerOption: this.setServerOption, + setCurrencyOption: this.setCurrencyOption, + setLanguageOption: this.setLanguageOption, + setDonationOption: this.setDonationOption, + setModeOption: this.setModeOption, + setRecoveryWalletInfoOnDeviceOption: this.setRecoveryWalletInfoOnDeviceOption, + setRescanMenuOption: this.setRescanMenuOption, + setSecurityOption: this.setSecurityOption, + setSelectServerOption: this.setSelectServerOption, + setSendAllOption: this.setSendAllOption, + }} + walletSwitcherOptions={{ + onClickOK: async () => await this.onClickOKChangeWallet({ startingApp: false }), + onClickCancel: () => this.setState({ seedChangeModalVisible: false }), + action: SeedActionEnum.change, + }} + addressBookOptions={{ + setState: () => + this.setState({ + addressBookModalVisible: false, + addressBookCurrentAddress: '', + addressBookOpenPriorModal: () => {}, + }), + setAddressBook: this.setAddressBook, + }} + setPrivacyOption={this.setPrivacyOption} + /> + ) : ( + // ({ + // tabBarIcon: ({ focused }) => fnTabBarIcon(route, focused), + // tabBarIconStyle: { alignItems: 'center', justifyContent: 'center', alignSelf: 'center' }, + // tabBarItemStyle: { + // justifyContent: 'center', + // alignSelf: 'center', + // }, + // tabBarLabelPosition: 'below-icon', + // tabBarActiveTintColor: colors.background, + // tabBarActiveBackgroundColor: colors.primaryDisabled, + // tabBarInactiveTintColor: colors.money, + // tabBarStyle: { + // borderRadius: 0, + // borderTopColor: colors.primaryDisabled, + // borderTopWidth: 1, + // }, + // headerShown: false, + // tabBarButton: renderTabPressable(colors), + // })}> + // + // {() => ( + // + // )} + // + // {!readOnly && + // selectServer !== SelectServerEnum.offline && + // (mode === ModeEnum.advanced || + // (!!totalBalance && totalBalance.spendableOrchard + totalBalance.spendablePrivate > 0) || + // (!!totalBalance && + // totalBalance.orchardBal + totalBalance.privateBal > 0 && + // totalBalance.spendableOrchard + totalBalance.spendablePrivate === 0 && + // somePending)) && ( + // + // {() => ( + // + // )} + // + // )} + // + // {() => ( + // + // )} + // + // + <> + {valueTransfersTotal === null || addresses === null || totalBalance === null ? ( + + ) : ( + + + {() => ( + + )} + + + )} + + )} ); } } + +type HistoryProps = { + toggleMenuDrawer: () => void; + poolsMoreInfoOnClick: () => void; + syncingStatusMoreInfoOnClick: () => void; + setPrivacyOption: (value: boolean) => Promise; + setShieldingAmount: (value: number) => void; + setComputingModalVisible: (visible: boolean) => void; + setScrollToTop: (value: boolean) => void; + setScrollToBottom: (value: boolean) => void; + setUfvkViewModalVisible: (value: boolean) => Promise; + sendTransaction: (sendPageState: SendPageStateClass) => Promise; + setServerOption: ( + value: ServerType, + selectServer: SelectServerEnum, + toast: boolean, + sameServerChainName: boolean, + ) => Promise; + scrollToTop: boolean; + scrollToBottom: boolean; +}; + +type BottomTabsProps = { + historySettings: HistoryProps; +}; + +function BottomTabs({ navigation, bottomTabsOptions }: { navigation: any; bottomTabsOptions: BottomTabsProps }) { + const { colors } = useTheme() as ThemeType; + const { historySettings } = bottomTabsOptions; + + return ( + + ( + + ), + tabBarInactiveTintColor: colors.text, + tabBarActiveTintColor: colors.background, + tabBarActiveBackgroundColor: colors.primaryDisabled, + }}> + {() => ( + + )} + + ( + + ), + tabBarInactiveTintColor: colors.text, + tabBarActiveTintColor: colors.background, + tabBarActiveBackgroundColor: colors.primaryDisabled, + }}> + {() => ( + navigation.toggleDrawer() /* header */} + poolsMoreInfoOnClick={() => {} /* header */} + syncingStatusMoreInfoOnClick={() => {} /* header */} + setPrivacyOption={async () => {} /* header */} + setShieldingAmount={() => {} /* header */} + setComputingModalVisible={() => {} /* header & send */} + setScrollToTop={() => {} /* header & send */} + setScrollToBottom={() => {} /* header & send */} + setUfvkViewModalVisible={() => {} /* header */} + sendTransaction={async () => '' /* send */} + setServerOption={async () => {} /* send */} + clearToAddr={() => {} /* send */} + /> + )} + + ( + + ), + tabBarInactiveTintColor: colors.text, + tabBarActiveTintColor: colors.background, + tabBarActiveBackgroundColor: colors.primaryDisabled, + }}> + {() => ( + {} /* header */} + syncingStatusMoreInfoOnClick={() => {} /* header */} + setUfvkViewModalVisible={() => {} /* header */} + alone={false /* receive */} + /> + )} + + + ); +} + +type SettingsProps = { + setWalletOption: (walletOption: string, value: string) => Promise; + setServerOption: ( + value: ServerType, + selectServer: SelectServerEnum, + toast: boolean, + sameServerChainName: boolean, + ) => Promise; + setCurrencyOption: (value: CurrencyEnum) => Promise; + setLanguageOption: (value: LanguageEnum, reset: boolean) => Promise; + setSendAllOption: (value: boolean) => Promise; + setDonationOption: (value: boolean) => Promise; + + setModeOption: (value: string) => Promise; + setSecurityOption: (value: SecurityType) => Promise; + setSelectServerOption: (value: string) => Promise; + setRescanMenuOption: (value: boolean) => Promise; + setRecoveryWalletInfoOnDeviceOption: (value: boolean) => Promise; +}; + +type WalletSwitcherProps = { + onClickOK: (seedPhrase: string, birthdayNumber: number) => void; + onClickCancel: () => void; + action: SeedActionEnum; +}; + +type AddressBookProps = { + setState: (state: { + addressBookModalVisible: boolean; + addressBookCurrentAddress: string; + addressBookOpenPriorModal: () => void; + }) => void; + setAddressBook: (addressBook: AddressBookFileClass[]) => void; +}; + +type AppDrawerProps = { + bottomTabsOptions: BottomTabsProps; + settingsOptions: SettingsProps; + walletSwitcherOptions: WalletSwitcherProps; + addressBookOptions: AddressBookProps; + setPrivacyOption: (value: boolean) => Promise; +}; + +function AppDrawer({ + settingsOptions, + walletSwitcherOptions, + addressBookOptions, + bottomTabsOptions, + setPrivacyOption, +}: AppDrawerProps) { + return ( + + + {({ navigation, ...props }) => ( + + )} + + + {({ navigation }) => ( + navigation.toggleDrawer()} + setAddressBook={addressBookOptions.setAddressBook} + /> + )} + + + {({ navigation }) => ( + navigation.toggleDrawer()} + setWalletOption={settingsOptions.setWalletOption} + setServerOption={settingsOptions.setServerOption} + setCurrencyOption={settingsOptions.setCurrencyOption} + setLanguageOption={settingsOptions.setLanguageOption} + setSendAllOption={settingsOptions.setSendAllOption} + setDonationOption={settingsOptions.setDonationOption} + setPrivacyOption={setPrivacyOption} + setModeOption={settingsOptions.setModeOption} + setSecurityOption={settingsOptions.setSecurityOption} + setSelectServerOption={settingsOptions.setSelectServerOption} + setRescanMenuOption={settingsOptions.setRescanMenuOption} + setRecoveryWalletInfoOnDeviceOption={settingsOptions.setRecoveryWalletInfoOnDeviceOption} + /> + )} + + + {({ navigation }) => ( + navigation.toggleDrawer('Home')} + setPrivacyOption={setPrivacyOption} + /> + )} + + + {/* TODO */} + {({ navigation }) => navigation.toggleDrawer()} />} + + + {/* TODO */} + {({ navigation }) => navigation.toggleDrawer()} />} + + + {({ navigation }) => ( + navigation.toggleDrawer()} setPrivacyOption={setPrivacyOption} /> + )} + + + {({ navigation }) => navigation.toggleDrawer()} setPrivacyOption={setPrivacyOption} />} + + + {/* TODO */} + {({ navigation }) => navigation.toggleDrawer()} />} + + + {({ navigation }) => navigation.toggleDrawer()} />} + + + {/* TODO */} + {({ navigation }) => navigation.toggleDrawer()} />} + + + {/* TODO */} + {({ navigation }) => navigation.toggleDrawer()} />} + + + {({ navigation }) => navigation.toggleDrawer()} />} + + + ); +} diff --git a/components/About/About.tsx b/components/About/About.tsx index f19b40fe1..46b908677 100644 --- a/components/About/About.tsx +++ b/components/About/About.tsx @@ -21,7 +21,7 @@ type AboutProps = { const About: React.FunctionComponent = ({ closeModal }) => { const context = useContext(ContextAppLoaded); const { info, translate, language } = context; - const { colors } = useTheme() as ThemeType; + const { colors } = useTheme() as ThemeType; moment.locale(language); const arrayTxtObject = translate('about.copyright'); diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 166e7157b..e392f69fa 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -154,7 +154,7 @@ const Header: React.FunctionComponent = ({ privacy = context.privacy; } - const { colors } = useTheme() as ThemeType; + const { colors } = useTheme() as ThemeType; moment.locale(language); const opacityValue = useRef(new Animated.Value(1)).current; diff --git a/components/History/History.tsx b/components/History/History.tsx index f3b3f074a..39a7e1bdd 100644 --- a/components/History/History.tsx +++ b/components/History/History.tsx @@ -93,7 +93,7 @@ const History: React.FunctionComponent = ({ doRefresh, zenniesDonationAddress, } = context; - const { colors } = useTheme() as ThemeType; + const { colors } = useTheme() as ThemeType; moment.locale(language); const [isValueTransferDetailModalShowing, setValueTransferDetailModalShowing] = useState(false);