Merge pull request #564 from cocrafts/fix/broken-navigation

fix: remote duplicated Setting stack, prevent redundant nested widget…

apps/wallet/src/features/Explorer/Header.tsx

@@ -15,12 +15,7 @@ const Header = () => {
 	const handleNavigateToSettings = () => {
 		navigate('Dashboard', {
 			screen: 'Explore',
-			params: {
-				screen: 'Widget',
-				params: {
-					screen: 'Setting',
-				},
-			},
+			params: { screen: 'Profile', params: { screen: 'Setting' } },
 		});
 	};
 

apps/wallet/src/features/Setting/index.tsx

@@ -31,9 +31,7 @@ const SettingFeature: FC<Props> = ({ style }) => {
 	const handleNavigateToReferralScreen = () => {
 		navigate('Dashboard', {
 			screen: 'Setting',
-			params: {
-				screen: 'Referral',
-			},
+			params: { screen: 'Referral' },
 		});
 	};
 

apps/wallet/src/screens/Dashboard/Widget/index.tsx

@@ -6,16 +6,16 @@ import WidgetFeature from 'features/Widget';
 import { appState } from 'state/app';
 import { mockWidgets } from 'state/widget';
 import { useSafeAreaInsets, useSnapshot } from 'utils/hooks';
-import type { WidgetParamList } from 'utils/navigation';
+import type { ExploreParamList } from 'utils/navigation';
 
-type Props = DrawerScreenProps<WidgetParamList, 'Default'>;
+type Props = DrawerScreenProps<ExploreParamList, 'Widget'>;
 
 export const WidgetScreen: FC<Props> = ({ navigation, route }) => {
 	const { top, bottom } = useSafeAreaInsets();
 	const { navigationDisplay } = useSnapshot(appState);
-	const widgetId = route.params?.id;
+	const widgetId = route.params.id;
 
-	if (!widgetId || widgetId === 'explorer') {
+	if (widgetId === 'explorer') {
 		return (
 			<ExplorerFeature
 				style={[styles.container, { paddingTop: top, paddingBottom: bottom }]}

apps/wallet/src/stacks/Explorer/Sidebar.tsx

@@ -27,10 +27,7 @@ export const Sidebar: FC<DrawerContentComponentProps> = ({ state }) => {
 			screen: 'Explore',
 			params: {
 				screen: 'Widget',
-				params: {
-					screen: 'Default',
-					params: { id: item._id },
-				},
+				params: { id: item._id },
 			},
 		});
 	};
@@ -45,10 +42,7 @@ export const Sidebar: FC<DrawerContentComponentProps> = ({ state }) => {
 				screen: 'Explore',
 				params: {
 					screen: 'Widget',
-					params: {
-						screen: 'Default',
-						params: { id: 'explorer' },
-					},
+					params: { id: 'explorer' },
 				},
 			});
 		}

apps/wallet/src/stacks/Explorer/index.tsx

@@ -4,8 +4,8 @@ import type { DrawerNavigationOptions } from 'components/DrawerNavigation';
 import { createDrawerNavigator } from 'components/DrawerNavigation';
 import { withStackContainer } from 'components/StackContainer';
 import LoyaltyScreen from 'screens/Dashboard/Loyalty';
+import WidgetScreen from 'screens/Dashboard/Widget';
 import CollectionStack from 'stacks/Explorer/CollectionStack';
-import WidgetStack from 'stacks/Widget';
 import { appState } from 'state/app';
 import { useSnapshot } from 'utils/hooks';
 import type { ExploreParamList } from 'utils/navigation';
@@ -18,18 +18,20 @@ const Drawer = createDrawerNavigator<ExploreParamList>();
 
 export const ExplorerStack = () => {
 	const { navigationDisplay } = useSnapshot(appState);
-	const screenOptions: DrawerNavigationOptions = {
-		headerShown: false,
-		drawerStyle: styles.drawer,
-		swipeEdgeWidth: 100,
-		swipeMinDistance: sidebarWidth / 3,
-		overlayColor: 'transparent',
-		drawerType: navigationDisplay.isPermanentDrawer ? 'permanent' : 'back',
-	};
+	const screenOptions: DrawerNavigationOptions = useMemo(() => {
+		return {
+			headerShown: false,
+			drawerStyle: styles.drawer,
+			swipeEdgeWidth: 100,
+			swipeMinDistance: sidebarWidth / 3,
+			overlayColor: 'transparent',
+			drawerType: navigationDisplay.isPermanentDrawer ? 'permanent' : 'back',
+		};
+	}, [navigationDisplay]);
 
-	const options = {
-		unmountOnBlur: false,
-	};
+	const options = useMemo(() => {
+		return { unmountOnBlur: false };
+	}, []);
 
 	const ManageLoyaltyScreen = useMemo(
 		() =>
@@ -41,10 +43,7 @@ export const ExplorerStack = () => {
 						screen: 'Explore',
 						params: {
 							screen: 'Widget',
-							params: {
-								screen: 'Default',
-								params: { id: 'explorer' },
-							},
+							params: { id: 'explorer' },
 						},
 					}),
 			}),
@@ -55,9 +54,9 @@ export const ExplorerStack = () => {
 		<Drawer.Navigator
 			drawerContent={Sidebar}
 			screenOptions={screenOptions}
-			backBehavior="order"
+			backBehavior="history"
 		>
-			<Drawer.Screen name="Widget" component={WidgetStack} options={options} />
+			<Drawer.Screen name="Widget" component={WidgetScreen} options={options} />
 			<Drawer.Screen
 				name="Collection"
 				component={CollectionStack}
@@ -73,10 +72,7 @@ export const ExplorerStack = () => {
 			<Drawer.Screen
 				name="Loyalty"
 				component={ManageLoyaltyScreen}
-				options={{
-					...options,
-					drawerType: 'back',
-				}}
+				options={{ ...options, drawerType: 'back' }}
 			/>
 		</Drawer.Navigator>
 	);

apps/wallet/src/stacks/Home/index.tsx

@@ -1,34 +1,34 @@
 import type { FC } from 'react';
+import { useMemo } from 'react';
 import type { StackScreenProps } from '@react-navigation/stack';
 import { createStackNavigator } from '@react-navigation/stack';
 import { withStackContainer } from 'components/StackContainer';
 import HistoryScreen from 'screens/Dashboard/History';
 import ProfileScreen from 'screens/Dashboard/Home';
 import { noHeaderNavigation } from 'utils/constants';
-import {
-	type DashboardParamList,
-	type HomeParamList,
-	navigate,
-} from 'utils/navigation';
+import type { DashboardParamList, HomeParamList } from 'utils/navigation';
+import { navigate } from 'utils/navigation';
 
 type Props = StackScreenProps<DashboardParamList, 'Home'>;
 
 const Stack = createStackNavigator<HomeParamList>();
 
 export const HomeStack: FC<Props> = () => {
-	const ManagedHomeScreen = withStackContainer(ProfileScreen, {
-		title: 'Home',
-	});
-	const ManagedHistoryScreen = withStackContainer(HistoryScreen, {
-		title: 'Transaction History',
-		goBack: () =>
-			navigate('Dashboard', {
-				screen: 'Home',
-				params: {
-					screen: 'Default',
-				},
-			}),
-	});
+	const ManagedHomeScreen = useMemo(() => {
+		return withStackContainer(ProfileScreen, {
+			title: 'Home',
+		});
+	}, []);
+	const ManagedHistoryScreen = useMemo(() => {
+		return withStackContainer(HistoryScreen, {
+			title: 'Transaction History',
+			goBack: () =>
+				navigate('Dashboard', {
+					screen: 'Home',
+					params: { screen: 'Default' },
+				}),
+		});
+	}, []);
 
 	return (
 		<Stack.Navigator screenOptions={noHeaderNavigation}>

apps/wallet/src/stacks/Setting/index.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import { useMemo } from 'react';
 import type { StackScreenProps } from '@react-navigation/stack';
 import { createStackNavigator } from '@react-navigation/stack';
 import { withStackContainer } from 'components/StackContainer';
@@ -18,18 +19,22 @@ export const SettingStack: FC<Props> = () => {
 	const { navigationDisplay } = useSnapshot(appState);
 
 	const screenOptions = { headerShown: false };
-	const ManagedSettingScreen = withStackContainer(SettingScreen, {
-		title: 'Settings',
-	});
-	const ManagedReferralScreen = withStackContainer(ReferralScreen, {
-		title: 'Referral',
-		noBottomTabs: !navigationDisplay.isBottomTabActive,
-		goBack: handleGoBackFromReferralScreen,
-	});
+	const ManagedSettingScreen = useMemo(() => {
+		return withStackContainer(SettingScreen, {
+			title: 'Settings',
+		});
+	}, []);
+	const ManagedReferralScreen = useMemo(() => {
+		return withStackContainer(ReferralScreen, {
+			title: 'Referral',
+			noBottomTabs: !navigationDisplay.isBottomTabActive,
+			goBack: handleGoBackFromReferralScreen,
+		});
+	}, []);
 
 	return (
 		<Stack.Navigator screenOptions={screenOptions}>
-			<Stack.Screen name="Default" component={ManagedSettingScreen as never} />
+			<Stack.Screen name="Default" component={ManagedSettingScreen} />
 			<Stack.Screen name="Referral" component={ManagedReferralScreen} />
 		</Stack.Navigator>
 	);

apps/wallet/src/utils/navigation/index.ts

@@ -51,13 +51,8 @@ export const linking: LinkingOptions<RootParamList> = {
 					Explore: {
 						path: '/explore',
 						screens: {
-							Widget: {
-								path: '/widget',
-								screens: {
-									Default: '/:id',
-									Setting: '/setting',
-								},
-							},
+							Widget: '/widget/:id',
+							Setting: '/setting',
 							Collection: {
 								path: '/collection',
 								screens: {

apps/wallet/src/utils/navigation/types.ts

@@ -18,21 +18,14 @@ export type CollectionParamList = {
 	};
 };
 
-export type WidgetParamList = {
-	Default: {
-		id?: string;
-	};
-	Setting?: undefined;
-};
-
 export type ProfileParamList = {
 	Default: undefined;
 	Setting: undefined;
 	History: undefined;
 };
 
 export type ExploreParamList = {
-	Widget: NavigatorScreenParams<WidgetParamList>;
+	Widget: { id: string };
 	Collection: NavigatorScreenParams<CollectionParamList>;
 	Profile: NavigatorScreenParams<ProfileParamList>;
 	Loyalty: undefined;