Cleanup headers and organize routes

alephium · Jun 12, 2023 · da40464 · da40464
1 parent 7471650
commit da40464
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 116 deletions.
diff --git a/src/components/headers/BottomModalHeader.tsx b/src/components/headers/BottomModalHeader.tsx
@@ -16,18 +16,26 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { StackHeaderProps } from '@react-navigation/stack'
 import { ReactNode } from 'react'
 import { View } from 'react-native'
 import { useTheme } from 'styled-components/native'
 
+import { BottomModalScreenTitle, ScreenSection } from '~/components/layout/Screen'
+
+interface BottomModalHeaderProps {
+  title?: StackHeaderProps['options']['title']
+  children?: ReactNode
+}
+
 export const bottomModalHeights = {
   pullTab: {
     container: 20,
     bar: 4
   }
 }
 
-const BottomModalHeader = ({ children }: { children?: ReactNode }) => {
+const BottomModalHeader = ({ children, title }: BottomModalHeaderProps) => {
   const theme = useTheme()
 
   return (
@@ -42,6 +50,11 @@ const BottomModalHeader = ({ children }: { children?: ReactNode }) => {
       >
         <View style={{ width: 35, height: '100%', backgroundColor: theme.font.tertiary, borderRadius: 20 }} />
       </View>
+      {title && (
+        <ScreenSection>
+          <BottomModalScreenTitle>{title}</BottomModalScreenTitle>
+        </ScreenSection>
+      )}
       {children && <View>{children}</View>}
     </View>
   )

diff --git a/src/hooks/layout/useBottomModalOptions.tsx b/src/hooks/layout/useBottomModalOptions.tsx
@@ -41,7 +41,7 @@ const useBottomModalOptions = (options?: BottomModalOptions): StackNavigationOpt
       borderTopLeftRadius: borderRadius,
       backgroundColor: theme.bg.primary
     },
-    header: () => <BottomModalHeader />
+    header: ({ options }) => <BottomModalHeader title={options.title} />
   }
 }
 

diff --git a/src/navigation/NewAddressNavigation.tsx b/src/navigation/NewAddressNavigation.tsx
@@ -43,7 +43,11 @@ const NewAddressNavigation = (props: StackScreenProps<RootStackParamList, 'NewAd
           component={NewAddressScreen}
           options={{ headerTitle: 'New address', headerBackTitleVisible: false }}
         />
-        <NewAddressStack.Screen name="GroupSelectScreen" component={GroupSelectScreen} options={bottomModalOptions} />
+        <NewAddressStack.Screen
+          name="GroupSelectScreen"
+          component={GroupSelectScreen}
+          options={{ ...bottomModalOptions, title: 'Address group' }}
+        />
       </NewAddressStack.Navigator>
     </NewAddressContextProvider>
   )

diff --git a/src/navigation/RootStackNavigation.tsx b/src/navigation/RootStackNavigation.tsx
@@ -84,82 +84,67 @@ const RootStackNavigation = () => {
           screenOptions={{
             headerStyle: { elevation: 0, shadowOpacity: 0 },
             headerTitle: '',
-            headerBackTitleVisible: false,
-            cardStyle: {
-              backgroundColor: theme.bg.primary
-            }
+            headerBackTitleVisible: false
           }}
         >
-          <RootStack.Screen name="SplashScreen" component={SplashScreen} options={{ headerShown: false }} />
-          <RootStack.Screen name="LandingScreen" component={LandingScreen} options={{ headerShown: false }} />
-          <RootStack.Screen name="LoginScreen" component={LoginScreen} options={{ headerShown: false }} />
-
-          {/* NEW WALLET */}
-          <RootStack.Screen name="NewWalletIntroScreen" component={NewWalletIntroScreen} />
-          <RootStack.Screen name="NewWalletNameScreen" component={NewWalletNameScreen} />
-          <RootStack.Screen
-            name="ImportWalletSeedScreen"
-            component={ImportWalletSeedScreen}
-            options={{ headerTitle: 'Import wallet' }}
-          />
-          <RootStack.Screen
-            name="ImportWalletAddressDiscoveryScreen"
-            component={ImportWalletAddressDiscoveryScreen}
-            options={{ headerTitle: 'Active addresses' }}
-          />
-          <RootStack.Screen name="PinCodeCreationScreen" component={PinCodeCreationScreen} />
-          <RootStack.Screen name="AddBiometricsScreen" component={AddBiometricsScreen} />
-          <RootStack.Screen
-            name="NewWalletSuccessPage"
-            component={NewWalletSuccessPage}
-            options={{ headerShown: false }}
-          />
-
-          <RootStack.Screen name="InWalletScreen" component={InWalletTabsNavigation} options={{ headerShown: false }} />
-
-          <RootStack.Screen name="SwitchWalletScreen" component={SwitchWalletScreen} options={bottomModalOptions} />
-
-          <RootStack.Screen
-            name="NewAddressNavigation"
-            component={NewAddressNavigation}
-            options={{ headerShown: false }}
-          />
-          <RootStack.Screen
-            name="EditAddressScreen"
-            component={EditAddressScreen}
-            options={{ ...bottomModalOptions }}
-          />
-
-          <RootStack.Screen name="SettingsScreen" component={SettingsScreen} options={{ headerTitle: 'Settings' }} />
-          <RootStack.Screen
-            name="CurrencySelectScreen"
-            component={CurrencySelectScreen}
-            options={{ ...bottomModalOptions }}
-          />
-          <RootStack.Screen
-            name="SecurityScreen"
-            component={SecurityScreen}
-            options={{ headerTitle: 'Security', cardStyle: { backgroundColor: theme.global.pale } }}
-          />
-          <RootStack.Screen name="SwitchNetworkScreen" component={SwitchNetworkScreen} options={bottomModalOptions} />
-          <RootStack.Screen
-            name="SwitchWalletAfterDeletionScreen"
-            component={SwitchWalletAfterDeletionScreen}
-            options={{ headerShown: false }}
-          />
-          <RootStack.Screen name="TransactionScreen" component={TransactionScreen} options={bottomModalOptions} />
-          <RootStack.Screen name="ReceiveScreen" component={ReceiveScreen} options={bottomModalOptions} />
-          <RootStack.Screen
-            name="AddressDiscoveryScreen"
-            component={AddressDiscoveryScreen}
-            options={{ headerTitle: 'Active addresses' }}
-          />
-
-          <RootStack.Screen
-            name="SendNavigation"
-            component={SendNavigation}
-            options={{ ...bottomModalOptions, header: (props) => <SendScreenHeader {...props} /> }}
-          />
+          {/* Screens with header */}
+          <RootStack.Group>
+            <RootStack.Screen name="LandingScreen" component={LandingScreen} />
+            <RootStack.Screen name="NewWalletIntroScreen" component={NewWalletIntroScreen} />
+            <RootStack.Screen name="NewWalletNameScreen" component={NewWalletNameScreen} />
+            <RootStack.Screen name="PinCodeCreationScreen" component={PinCodeCreationScreen} />
+            <RootStack.Screen name="AddBiometricsScreen" component={AddBiometricsScreen} />
+            <RootStack.Screen name="SettingsScreen" component={SettingsScreen} options={{ headerTitle: 'Settings' }} />
+            <RootStack.Screen
+              name="ImportWalletSeedScreen"
+              component={ImportWalletSeedScreen}
+              options={{ headerTitle: 'Import wallet' }}
+            />
+            <RootStack.Screen
+              name="ImportWalletAddressDiscoveryScreen"
+              component={ImportWalletAddressDiscoveryScreen}
+              options={{ headerTitle: 'Active addresses' }}
+            />
+            <RootStack.Screen
+              name="SecurityScreen"
+              component={SecurityScreen}
+              options={{ headerTitle: 'Security', headerStyle: { backgroundColor: theme.global.pale } }}
+            />
+            <RootStack.Screen
+              name="AddressDiscoveryScreen"
+              component={AddressDiscoveryScreen}
+              options={{ headerTitle: 'Active addresses' }}
+            />
+          </RootStack.Group>
+
+          {/* Screens without header */}
+          <RootStack.Group screenOptions={{ headerShown: false }}>
+            <RootStack.Screen name="SplashScreen" component={SplashScreen} />
+            <RootStack.Screen name="LoginScreen" component={LoginScreen} />
+            <RootStack.Screen name="NewWalletSuccessPage" component={NewWalletSuccessPage} />
+            <RootStack.Screen name="InWalletTabsNavigation" component={InWalletTabsNavigation} />
+            <RootStack.Screen name="NewAddressNavigation" component={NewAddressNavigation} />
+            <RootStack.Screen name="SwitchWalletAfterDeletionScreen" component={SwitchWalletAfterDeletionScreen} />
+          </RootStack.Group>
+
+          {/* Bottom modal screens */}
+          <RootStack.Group screenOptions={bottomModalOptions}>
+            <RootStack.Screen name="TransactionScreen" component={TransactionScreen} />
+            <RootStack.Screen name="ReceiveScreen" component={ReceiveScreen} />
+            <RootStack.Screen name="SwitchNetworkScreen" component={SwitchNetworkScreen} />
+            <RootStack.Screen name="EditAddressScreen" component={EditAddressScreen} />
+            <RootStack.Screen name="SwitchWalletScreen" component={SwitchWalletScreen} />
+            <RootStack.Screen
+              name="CurrencySelectScreen"
+              component={CurrencySelectScreen}
+              options={{ title: 'Currency' }}
+            />
+            <RootStack.Screen
+              name="SendNavigation"
+              component={SendNavigation}
+              options={{ header: (props) => <SendScreenHeader {...props} /> }}
+            />
+          </RootStack.Group>
         </RootStack.Navigator>
       </ScrollContextProvider>
     </NavigationContainer>

diff --git a/src/navigation/rootStackRoutes.ts b/src/navigation/rootStackRoutes.ts
@@ -28,7 +28,7 @@ type RootStackParamList = {
   NewWalletSuccessPage: undefined
   ImportWalletSeedScreen: undefined
   ImportWalletAddressDiscoveryScreen: undefined
-  InWalletScreen: undefined
+  InWalletTabsNavigation: undefined
   LoginScreen: {
     walletIdToLogin?: string
     workflow: 'wallet-switch' | 'wallet-unlock'

diff --git a/src/screens/Address/GroupSelectScreen.tsx b/src/screens/Address/GroupSelectScreen.tsx
@@ -18,12 +18,11 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { TOTAL_NUMBER_OF_GROUPS } from '@alephium/web3'
 import { StackScreenProps } from '@react-navigation/stack'
-import React, { useEffect } from 'react'
+import React from 'react'
 
-import BottomModalHeader from '~/components/headers/BottomModalHeader'
 import { SelectOption } from '~/components/inputs/Select'
 import BoxSurface from '~/components/layout/BoxSurface'
-import { BottomModalScreenTitle, ScreenSection } from '~/components/layout/Screen'
+import { ScreenSection } from '~/components/layout/Screen'
 import ScrollScreen from '~/components/layout/ScrollScreen'
 import RadioButtonRow from '~/components/RadioButtonRow'
 import { useNewAddressContext } from '~/contexts/NewAddressContext'
@@ -51,18 +50,6 @@ const GroupSelectScreen = ({ navigation }: ScreenProps) => {
     navigation.goBack()
   }
 
-  useEffect(() => {
-    navigation.setOptions({
-      header: () => (
-        <BottomModalHeader>
-          <ScreenSection>
-            <BottomModalScreenTitle>Address group</BottomModalScreenTitle>
-          </ScreenSection>
-        </BottomModalHeader>
-      )
-    })
-  }, [navigation])
-
   return (
     <ScrollScreen>
       <ScreenSection>

diff --git a/src/screens/AddressDiscovery.tsx b/src/screens/AddressDiscovery.tsx
@@ -43,6 +43,7 @@ import {
 } from '~/store/addressesSlice'
 import { AddressHash } from '~/types/addresses'
 import { getRandomLabelColor } from '~/utils/colors'
+import { resetNavigationState } from '~/utils/navigation'
 
 type ScreenProps = StackScreenProps<RootStackParamList, 'AddressDiscoveryScreen'>
 
@@ -78,7 +79,11 @@ const AddressDiscoveryScreen = ({ navigation, route: { params } }: ScreenProps)
     await dispatch(syncAddressesData(newAddressHashes))
     await dispatch(syncAddressesHistoricBalances(newAddressHashes))
 
-    navigation.navigate(isImporting ? 'NewWalletSuccessPage' : 'InWalletScreen')
+    if (isImporting) {
+      navigation.navigate('NewWalletSuccessPage')
+    } else {
+      resetNavigationState()
+    }
 
     setImportLoading(false)
   }

diff --git a/src/screens/CurrencySelectScreen.tsx b/src/screens/CurrencySelectScreen.tsx
@@ -17,11 +17,10 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { StackScreenProps } from '@react-navigation/stack'
-import React, { useEffect } from 'react'
+import React from 'react'
 
-import BottomModalHeader from '~/components/headers/BottomModalHeader'
 import BoxSurface from '~/components/layout/BoxSurface'
-import { BottomModalScreenTitle, ScreenSection } from '~/components/layout/Screen'
+import { ScreenSection } from '~/components/layout/Screen'
 import ScrollScreen from '~/components/layout/ScrollScreen'
 import RadioButtonRow from '~/components/RadioButtonRow'
 import { useAppDispatch, useAppSelector } from '~/hooks/redux'
@@ -46,18 +45,6 @@ const CurrencySelectScreen = ({ navigation }: ScreenProps) => {
     navigation.goBack()
   }
 
-  useEffect(() => {
-    navigation.setOptions({
-      header: () => (
-        <BottomModalHeader>
-          <ScreenSection>
-            <BottomModalScreenTitle>Currency</BottomModalScreenTitle>
-          </ScreenSection>
-        </BottomModalHeader>
-      )
-    })
-  }, [navigation])
-
   return (
     <ScrollScreen>
       <ScreenSection>

diff --git a/src/screens/LandingScreen.tsx b/src/screens/LandingScreen.tsx
@@ -17,8 +17,9 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { StackScreenProps } from '@react-navigation/stack'
+import { useEffect } from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
-import styled from 'styled-components/native'
+import styled, { useTheme } from 'styled-components/native'
 
 import AppText from '~/components/AppText'
 import Button from '~/components/buttons/Button'
@@ -33,16 +34,27 @@ type ScreenProps = StackScreenProps<RootStackParamList, 'LandingScreen'>
 
 const LandingScreen = ({ navigation }: { style: StyleProp<ViewStyle> } & ScreenProps) => {
   const dispatch = useAppDispatch()
+  const theme = useTheme()
 
   const handleButtonPress = (method: WalletGenerationMethod) => {
     dispatch(methodSelected(method))
     navigation.navigate('NewWalletIntroScreen')
   }
 
+  useEffect(() => {
+    const routesHistory = navigation.getState().routes.map((route) => route.name)
+    console.log(routesHistory)
+
+    const previousRouteName = routesHistory.length > 1 ? routesHistory[routesHistory.length - 2] : undefined
+    console.log(previousRouteName)
+
+    if (previousRouteName === 'SplashScreen') navigation.setOptions({ headerShown: false })
+  }, [navigation])
+
   return (
     <Screen>
       <LogoContainer>
-        <AlephiumLogoStyled />
+        <AlephiumLogoStyled color={theme.bg.contrast} />
       </LogoContainer>
       <TitleContainer>
         <TitleFirstLine>Welcome to the official</TitleFirstLine>

diff --git a/src/screens/SecurityScreen.tsx b/src/screens/SecurityScreen.tsx
@@ -55,7 +55,7 @@ const SecurityScreen = ({ navigation, style }: ScreenProps) => {
       dispatch(mnemonicBackedUp())
     }
 
-    navigation.navigate('InWalletScreen')
+    navigation.navigate('InWalletTabsNavigation')
   }, [metadataId, dispatch, isMnemonicBackedUp, navigation])
 
   return (

diff --git a/src/screens/TransactionScreen.tsx b/src/screens/TransactionScreen.tsx
@@ -43,13 +43,12 @@ const TransactionScreen = ({
   }
 }: ScreenProps) => {
   const theme = useTheme()
-  const { direction, infoType } = getTransactionInfo(tx)
+  const { direction, infoType, assets } = getTransactionInfo(tx)
   const explorerBaseUrl = useAppSelector((s) => s.network.settings.explorerUrl)
 
   const explorerTxUrl = `${explorerBaseUrl}/transactions/${tx.hash}`
   const isOut = direction === 'out'
   const isMoved = infoType === 'move'
-  const { assets } = getTransactionInfo(tx)
 
   return (
     <ScrollView>

diff --git a/src/screens/new-wallet/NewWalletSuccessPage.tsx b/src/screens/new-wallet/NewWalletSuccessPage.tsx
@@ -26,6 +26,7 @@ import Screen from '~/components/layout/Screen'
 import CenteredInstructions, { Instruction } from '~/components/text/CenteredInstructions'
 import AlephiumLogo from '~/images/logos/AlephiumLogo'
 import RootStackParamList from '~/navigation/rootStackRoutes'
+import { resetNavigationState } from '~/utils/navigation'
 
 type ScreenProps = StackScreenProps<RootStackParamList, 'NewWalletSuccessPage'>
 
@@ -45,7 +46,7 @@ const NewWalletSuccessPage = ({ navigation }: ScreenProps) => {
       </AnimationContainer>
       <CenteredInstructions instructions={instructions} stretch fontSize={19} />
       <ActionsContainer>
-        <HighlightButton title="Let's go!" wide onPress={() => navigation.navigate('InWalletScreen')} />
+        <HighlightButton title="Let's go!" wide onPress={resetNavigationState} />
       </ActionsContainer>
     </Screen>
   )

diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
@@ -26,7 +26,7 @@ const initialNavigationState = {
   index: 0,
   routes: [
     {
-      name: 'InWalletScreen'
+      name: 'InWalletTabsNavigation'
     }
   ]
 }