Drawer component optimizations

components/About/About.tsx

@@ -17,11 +17,12 @@ import 'moment/locale/ru';
 import { useMagicModal } from 'react-native-magic-modal';
 
 type AboutProps = {
+  goBack: () => void;
 };
-const About: React.FunctionComponent<AboutProps> = () => {
+const About: React.FunctionComponent<AboutProps> = ({ goBack }) => {
   const context = useContext(ContextAppLoaded);
   const { info, translate, language } = context;
-  const { colors } = useTheme()  as ThemeType;
+  const { colors } = useTheme() as ThemeType;
   moment.locale(language);
   const { hide } = useMagicModal();
 
@@ -47,7 +48,7 @@ const About: React.FunctionComponent<AboutProps> = () => {
           noSyncingStatus={true}
           noDrawMenu={true}
           noPrivacy={true}
-          closeScreen={hide}
+          closeScreen={goBack}
         />
         <ScrollView
           style={{ maxHeight: '90%' }}

components/AddressBook/AddressBook.tsx

@@ -31,18 +31,13 @@ import { useMagicModal } from 'react-native-magic-modal';
 
 type AddressBookProps = {
   setAddressBook: (ab: AddressBookFileClass[]) => void;
+  goBack: () => void;
 };
 
-const AddressBook: React.FunctionComponent<AddressBookProps> = ({ setAddressBook }) => {
+const AddressBook: React.FunctionComponent<AddressBookProps> = ({ setAddressBook, goBack }) => {
   const context = useContext(ContextAppLoaded);
-  const {
-    translate,
-    language,
-    addressBook,
-    addressBookCurrentAddress,
-    zenniesDonationAddress,
-  } = context;
-  const { colors } = useTheme()  as ThemeType;
+  const { translate, language, addressBook, addressBookCurrentAddress, zenniesDonationAddress } = context;
+  const { colors } = useTheme() as ThemeType;
   const { hide } = useMagicModal();
   moment.locale(language);
 
@@ -163,7 +158,7 @@ const AddressBook: React.FunctionComponent<AddressBookProps> = ({ setAddressBook
           noSyncingStatus={true}
           noDrawMenu={true}
           noPrivacy={true}
-          closeScreen={hide}
+          closeScreen={goBack}
         />
         <ScrollView
           ref={scrollViewRef}

components/Insight/Insight.tsx

@@ -42,12 +42,13 @@ const getPercent = (percent: number) => {
 
 type InsightProps = {
   setPrivacyOption: (value: boolean) => Promise<void>;
+  goBack: () => void;
 };
 
-const Insight: React.FunctionComponent<InsightProps> = ({ setPrivacyOption }) => {
+const Insight: React.FunctionComponent<InsightProps> = ({ setPrivacyOption, goBack }) => {
   const context = useContext(ContextAppLoaded);
   const { info, translate, privacy, addLastSnackbar, language } = context;
-  const { colors } = useTheme()  as ThemeType;
+  const { colors } = useTheme() as ThemeType;
   const { hide } = useMagicModal();
   moment.locale(language);
 
@@ -170,12 +171,7 @@ const Insight: React.FunctionComponent<InsightProps> = ({ setPrivacyOption }) =>
                   flexWrap: 'wrap',
                 }}>
                 {item.address !== 'fee' && (
-                  <AddressItem
-                    address={item.address}
-                    oneLine={true}
-                    onlyContact={true}
-                    withIcon={true}
-                  />
+                  <AddressItem address={item.address} oneLine={true} onlyContact={true} withIcon={true} />
                 )}
                 {!expandAddress[index] && !!item.address && (
                   <RegText>
@@ -230,7 +226,7 @@ const Insight: React.FunctionComponent<InsightProps> = ({ setPrivacyOption }) =>
         {item?.value}
       </SvgText>
     ),
-    []
+    [],
   );
 
   //console.log('render insight');
@@ -252,7 +248,7 @@ const Insight: React.FunctionComponent<InsightProps> = ({ setPrivacyOption }) =>
           noDrawMenu={true}
           setPrivacyOption={setPrivacyOption}
           addLastSnackbar={addLastSnackbar}
-          closeScreen={hide}
+          closeScreen={goBack}
         />
 
         <View style={{ width: '100%', flexDirection: 'row', marginTop: 10 }}>

components/Messages/MessagesModal.tsx

@@ -24,6 +24,7 @@ type MessagesModalProps = {
     toast: boolean,
     sameServerChainName: boolean,
   ) => Promise<void>;
+  goBack: () => void;
 };
 
 const MessagesModal: React.FunctionComponent<MessagesModalProps> = ({
@@ -34,6 +35,7 @@ const MessagesModal: React.FunctionComponent<MessagesModalProps> = ({
   scrollToBottom,
   sendTransaction,
   setServerOption,
+  goBack,
 }) => {
   const context = useContext(ContextAppLoaded);
   const { language } = context;
@@ -49,7 +51,7 @@ const MessagesModal: React.FunctionComponent<MessagesModalProps> = ({
       scrollToBottom={scrollToBottom}
       sendTransaction={sendTransaction}
       setServerOption={setServerOption}
-      closeModal={hide}
+      closeModal={goBack}
       noDrawMenu={true}
     />
   );

components/Pools/Pools.tsx

@@ -25,12 +25,13 @@ import { useMagicModal } from 'react-native-magic-modal';
 
 type PoolsProps = {
   setPrivacyOption: (value: boolean) => Promise<void>;
+  goBack: () => void;
 };
 
-const Pools: React.FunctionComponent<PoolsProps> = ({ setPrivacyOption }) => {
+const Pools: React.FunctionComponent<PoolsProps> = ({ setPrivacyOption, goBack }) => {
   const context = useContext(ContextAppLoaded);
   const { totalBalance, info, translate, privacy, addLastSnackbar, somePending, language, shieldingAmount } = context;
-  const { colors } = useTheme()  as ThemeType;
+  const { colors } = useTheme() as ThemeType;
   const { hide } = useMagicModal();
   const [orchardPool, setOrchardPool] = useState<boolean>(false);
   const [saplingPool, setSaplingPool] = useState<boolean>(false);
@@ -70,7 +71,7 @@ const Pools: React.FunctionComponent<PoolsProps> = ({ setPrivacyOption }) => {
           noDrawMenu={true}
           setPrivacyOption={setPrivacyOption}
           addLastSnackbar={addLastSnackbar}
-          closeScreen={hide}
+          closeScreen={goBack}
         />
         <ScrollView
           style={{ maxHeight: '90%' }}
@@ -113,7 +114,8 @@ const Pools: React.FunctionComponent<PoolsProps> = ({ setPrivacyOption }) => {
                           size={18}
                           currencyName={info.currencyName}
                           color={
-                            totalBalance.spendableOrchard > 0 && totalBalance.spendableOrchard === totalBalance.orchardBal
+                            totalBalance.spendableOrchard > 0 &&
+                            totalBalance.spendableOrchard === totalBalance.orchardBal
                               ? colors.primary
                               : 'red'
                           }
@@ -156,7 +158,8 @@ const Pools: React.FunctionComponent<PoolsProps> = ({ setPrivacyOption }) => {
                           size={18}
                           currencyName={info.currencyName}
                           color={
-                            totalBalance.spendablePrivate > 0 && totalBalance.spendablePrivate === totalBalance.privateBal
+                            totalBalance.spendablePrivate > 0 &&
+                            totalBalance.spendablePrivate === totalBalance.privateBal
                               ? colors.syncing
                               : 'red'
                           }

components/Rescan/Rescan.tsx

@@ -19,12 +19,13 @@ import { useMagicModal } from 'react-native-magic-modal';
 
 type RescanProps = {
   doRescan: () => void;
+  goBack: () => void;
 };
 
-const Rescan: React.FunctionComponent<RescanProps> = ({ doRescan }) => {
+const Rescan: React.FunctionComponent<RescanProps> = ({ doRescan, goBack }) => {
   const context = useContext(ContextAppLoaded);
   const { wallet, translate, netInfo, addLastSnackbar, language, selectServer } = context;
-  const { colors } = useTheme()  as ThemeType;
+  const { colors } = useTheme() as ThemeType;
   const { hide } = useMagicModal();
   moment.locale(language);
 
@@ -57,7 +58,7 @@ const Rescan: React.FunctionComponent<RescanProps> = ({ doRescan }) => {
           noSyncingStatus={true}
           noDrawMenu={true}
           noPrivacy={true}
-          closeScreen={hide}
+          closeScreen={goBack}
         />
         <ScrollView
           style={{ height: '80%', maxHeight: '80%' }}
@@ -78,7 +79,11 @@ const Rescan: React.FunctionComponent<RescanProps> = ({ doRescan }) => {
             alignItems: 'center',
             marginVertical: 5,
           }}>
-          <Button type={ButtonTypeEnum.Primary} title={translate('rescan.button') as string} onPress={doRescanAndClose} />
+          <Button
+            type={ButtonTypeEnum.Primary}
+            title={translate('rescan.button') as string}
+            onPress={doRescanAndClose}
+          />
         </View>
       </SafeAreaView>
     </SafeAreaProvider>

components/Seed/Seed.tsx

@@ -49,13 +49,15 @@ type SeedProps = {
   action: SeedActionEnum;
   setPrivacyOption: (value: boolean) => Promise<void>;
   keepAwake?: (v: boolean) => void;
+  goBack: () => void;
 };
 const Seed: React.FunctionComponent<SeedProps> = ({
   onClickOK,
   onClickCancel,
   action,
   setPrivacyOption,
   keepAwake,
+  goBack,
 }) => {
   const contextLoaded = useContext(ContextAppLoaded);
   const contextLoading = useContext(ContextAppLoading);
@@ -87,7 +89,7 @@ const Seed: React.FunctionComponent<SeedProps> = ({
     language = contextLoaded.language;
   }
 
-  const { colors } = useTheme()  as ThemeType;
+  const { colors } = useTheme() as ThemeType;
   // when this screen is open from LoadingApp (new wallet)
   // is using the standard modal from react-native
   const { hide } = useMagicModal();
@@ -221,7 +223,7 @@ const Seed: React.FunctionComponent<SeedProps> = ({
           mode={mode}
           privacy={privacy}
           receivedLegend={action === SeedActionEnum.view ? !basicFirstViewSeed : false}
-          closeScreen={onClickCancelHide}
+          closeScreen={goBack}
         />
         <ScrollView
           keyboardShouldPersistTaps="handled"

components/Settings/Settings.tsx

@@ -1,13 +1,6 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { useContext, useEffect, useState } from 'react';
-import {
-  View,
-  ScrollView,
-  TouchableOpacity,
-  TextInput,
-  Platform,
-  KeyboardAvoidingView,
-} from 'react-native';
+import { View, ScrollView, TouchableOpacity, TextInput, Platform, KeyboardAvoidingView } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
 import { useTheme } from '@react-navigation/native';
@@ -66,6 +59,7 @@ type SettingsProps = {
   setSelectServerOption: (value: string) => Promise<void>;
   setRescanMenuOption: (value: boolean) => Promise<void>;
   setRecoveryWalletInfoOnDeviceOption: (value: boolean) => Promise<void>;
+  goBack: () => void;
 };
 
 type Options = {
@@ -86,6 +80,7 @@ const Settings: React.FunctionComponent<SettingsProps> = ({
   setSelectServerOption,
   setRescanMenuOption,
   setRecoveryWalletInfoOnDeviceOption,
+  goBack,
 }) => {
   const context = useContext(ContextAppLoaded);
   const {
@@ -162,7 +157,7 @@ const Settings: React.FunctionComponent<SettingsProps> = ({
     RECOVERYWALLETINFOONDEVICE = recoveryWalletInfoOnDevicesArray as Options[];
   }
 
-  const { colors } = useTheme()  as ThemeType;
+  const { colors } = useTheme() as ThemeType;
   const { hide } = useMagicModal();
   moment.locale(languageContext);
 
@@ -553,7 +548,7 @@ const Settings: React.FunctionComponent<SettingsProps> = ({
             noSyncingStatus={true}
             noDrawMenu={true}
             noPrivacy={true}
-            closeScreen={hide}
+            closeScreen={goBack}
           />
           <ScrollView
             keyboardShouldPersistTaps="handled"

components/SyncReport/SyncReport.tsx

@@ -22,12 +22,13 @@ import Utils from '../../app/utils';
 import { useMagicModal } from 'react-native-magic-modal';
 
 type SyncReportProps = {
+  goBack: () => void;
 };
 
-const SyncReport: React.FunctionComponent<SyncReportProps> = () => {
+const SyncReport: React.FunctionComponent<SyncReportProps> = ({ goBack }) => {
   const context = useContext(ContextAppLoaded);
   const { syncingStatus, wallet, translate, background, language, netInfo } = context;
-  const { colors } = useTheme()  as ThemeType;
+  const { colors } = useTheme() as ThemeType;
   const { hide } = useMagicModal();
   moment.locale(language);
 
@@ -229,7 +230,7 @@ const SyncReport: React.FunctionComponent<SyncReportProps> = () => {
           noSyncingStatus={true}
           noDrawMenu={true}
           noPrivacy={true}
-          closeScreen={hide}
+          closeScreen={goBack}
         />
         <ScrollView
           testID="syncreport.scroll-view"

components/Ufvk/ShowUfvk.tsx

@@ -32,11 +32,18 @@ type ShowUfvkProps = {
   onClickCancel: () => void;
   action: UfvkActionEnum;
   setPrivacyOption: (value: boolean) => Promise<void>;
+  goBack: () => void;
 };
-const ShowUfvk: React.FunctionComponent<ShowUfvkProps> = ({ onClickOK, onClickCancel, action, setPrivacyOption }) => {
+const ShowUfvk: React.FunctionComponent<ShowUfvkProps> = ({
+  onClickOK,
+  onClickCancel,
+  action,
+  setPrivacyOption,
+  goBack,
+}) => {
   const context = useContext(ContextAppLoaded);
   const { translate, wallet, server, mode, addLastSnackbar, language } = context;
-  const { colors } = useTheme()  as ThemeType;
+  const { colors } = useTheme() as ThemeType;
   const { hide } = useMagicModal();
   moment.locale(language);
 
@@ -107,7 +114,7 @@ const ShowUfvk: React.FunctionComponent<ShowUfvkProps> = ({ onClickOK, onClickCa
           noDrawMenu={true}
           setPrivacyOption={setPrivacyOption}
           addLastSnackbar={addLastSnackbar}
-          closeScreen={onClickCancelHide}
+          closeScreen={goBack}
         />
         <ScrollView
           style={{ height: '80%', maxHeight: '80%' }}
@@ -124,7 +131,14 @@ const ShowUfvk: React.FunctionComponent<ShowUfvkProps> = ({ onClickOK, onClickCa
 
           <View style={{ display: 'flex', flexDirection: 'column', marginTop: 0, alignItems: 'center' }}>
             {!!wallet.ufvk && (
-              <SingleAddress address={wallet.ufvk} ufvk={true} index={0} total={1} prev={() => null} next={() => null} />
+              <SingleAddress
+                address={wallet.ufvk}
+                ufvk={true}
+                index={0}
+                total={1}
+                prev={() => null}
+                next={() => null}
+              />
             )}
             {!wallet.ufvk && <ActivityIndicator size="large" color={colors.primary} />}
           </View>