refactor(web3hub): navigators

apps/ledger-live-mobile/src/components/RootNavigator/BaseNavigator.tsx

@@ -87,6 +87,8 @@ import LandingPagesNavigator from "./LandingPagesNavigator";
 import FirmwareUpdateScreen from "~/screens/FirmwareUpdate";
 import EditCurrencyUnits from "~/screens/Settings/CryptoAssets/Currencies/EditCurrencyUnits";
 import WalletSyncNavigator from "LLM/features/WalletSync/WalletSyncNavigator";
+import Web3HubNavigator from "LLM/features/Web3Hub/Navigator";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 
 const Stack = createStackNavigator<BaseNavigatorStackParamList>();
 
@@ -104,6 +106,7 @@ export default function BaseNavigator() {
   const noNanoBuyNanoWallScreenOptions = useNoNanoBuyNanoWallScreenOptions();
   const isAccountsEmpty = useSelector(hasNoAccountsSelector);
   const readOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector) && isAccountsEmpty;
+  const web3hub = useFeature("web3hub");
 
   return (
     <>
@@ -186,6 +189,13 @@ export default function BaseNavigator() {
           component={SendFundsNavigator}
           options={{ headerShown: false }}
         />
+        {web3hub?.enabled ? (
+          <Stack.Screen
+            name={NavigatorName.Web3Hub}
+            component={Web3HubNavigator}
+            options={{ headerShown: false }}
+          />
+        ) : null}
         <Stack.Screen
           name={ScreenName.PlatformApp}
           component={LiveApp}

apps/ledger-live-mobile/src/components/RootNavigator/MainNavigator.tsx

@@ -5,7 +5,7 @@ import { IconsLegacy } from "@ledgerhq/native-ui";
 import { BottomTabBarProps, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { useSelector } from "react-redux";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Web3HubNavigator from "LLM/features/Web3Hub/Navigator";
+import Web3HubTabNavigator from "LLM/features/Web3Hub/TabNavigator";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { useManagerNavLockCallback } from "./CustomBlockRouterNavigator";
 import { ScreenName, NavigatorName } from "~/const";
@@ -136,8 +136,8 @@ export default function MainNavigator() {
       />
       {web3hub?.enabled ? (
         <Tab.Screen
-          name={NavigatorName.Web3Hub}
-          component={Web3HubNavigator}
+          name={NavigatorName.Web3HubTab}
+          component={Web3HubTabNavigator}
           options={{
             headerShown: false,
             tabBarIcon: props => (
@@ -148,7 +148,7 @@ export default function MainNavigator() {
             tabPress: e => {
               e.preventDefault();
               managerLockAwareCallback(() => {
-                navigation.navigate(NavigatorName.Web3Hub);
+                navigation.navigate(NavigatorName.Web3HubTab);
               });
             },
           })}

apps/ledger-live-mobile/src/components/RootNavigator/types/BaseNavigator.ts

@@ -14,6 +14,7 @@ import type { Transaction } from "@ledgerhq/live-common/generated/types";
 import { MappedSwapOperation } from "@ledgerhq/live-common/exchange/swap/types";
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { AppResult } from "@ledgerhq/live-common/hw/actions/app";
+import { Web3HubStackParamList } from "LLM/features/Web3Hub/Navigator";
 import { NavigatorName, ScreenName } from "~/const";
 import type { FirmwareUpdateProps } from "~/screens/FirmwareUpdate";
 import type { AccountSettingsNavigatorParamList } from "./AccountSettingsNavigator";
@@ -108,6 +109,7 @@ export type BaseNavigatorStackParamList = {
     customDappURL?: string;
     uri?: string;
   };
+  [NavigatorName.Web3Hub]: NavigatorScreenParams<Web3HubStackParamList> | undefined;
   [ScreenName.Recover]: {
     platform?: string;
     device?: Device;

apps/ledger-live-mobile/src/components/RootNavigator/types/MainNavigator.ts

@@ -1,6 +1,6 @@
 import { NavigatorScreenParams } from "@react-navigation/native";
 import { NavigatorName, ScreenName } from "~/const";
-import { Web3HubStackParamList } from "LLM/features/Web3Hub/Navigator";
+import { Web3HubTabStackParamList } from "LLM/features/Web3Hub/TabNavigator";
 import { DiscoverNavigatorStackParamList } from "./DiscoverNavigator";
 import { MyLedgerNavigatorStackParamList } from "./MyLedgerNavigator";
 import { PortfolioNavigatorStackParamList } from "./PortfolioNavigator";
@@ -11,6 +11,6 @@ export type MainNavigatorParamList = {
   [NavigatorName.Earn]: NavigatorScreenParams<EarnLiveAppNavigatorParamList> | undefined;
   [ScreenName.Transfer]: undefined;
   [NavigatorName.Discover]: NavigatorScreenParams<DiscoverNavigatorStackParamList> | undefined;
-  [NavigatorName.Web3Hub]: NavigatorScreenParams<Web3HubStackParamList> | undefined;
+  [NavigatorName.Web3HubTab]: NavigatorScreenParams<Web3HubTabStackParamList> | undefined;
   [NavigatorName.MyLedger]: NavigatorScreenParams<MyLedgerNavigatorStackParamList> | undefined;
 };

apps/ledger-live-mobile/src/const/navigation.ts

@@ -632,6 +632,7 @@ export enum NavigatorName {
 
   // Web3Hub
   Web3Hub = "Web3Hub",
+  Web3HubTab = "Web3HubTab",
 
   WalletSync = "WalletSync",
 }

apps/ledger-live-mobile/src/newArch/features/Web3Hub/Navigator.tsx

@@ -1,11 +1,8 @@
 import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { useSharedValue } from "react-native-reanimated";
 import { ScreenName } from "~/const";
 import { HeaderContext } from "./HeaderContext";
-import Web3HubMain from "./screens/Web3HubMain";
-import Web3HubMainHeader from "./screens/Web3HubMain/components/Header";
 import Web3HubSearch from "./screens/Web3HubSearch";
 import Web3HubSearchHeader from "./screens/Web3HubSearch/components/Header";
 import Web3HubTabs from "./screens/Web3HubTabs";
@@ -14,7 +11,6 @@ import Web3HubApp from "./screens/Web3HubApp";
 import Web3HubAppHeader from "./screens/Web3HubApp/components/Header";
 
 export type Web3HubStackParamList = {
-  [ScreenName.Web3HubMain]: undefined;
   [ScreenName.Web3HubSearch]: undefined;
   [ScreenName.Web3HubTabs]: undefined;
   [ScreenName.Web3HubApp]: {
@@ -24,8 +20,7 @@ export type Web3HubStackParamList = {
 
 const Stack = createNativeStackNavigator<Web3HubStackParamList>();
 
-export default function Web3HubNavigator() {
-  const { t } = useTranslation();
+export default function Navigator() {
   const layoutY = useSharedValue(0);
   const [search, setSearch] = useState("");
 
@@ -36,20 +31,7 @@ export default function Web3HubNavigator() {
         search,
       }}
     >
-      <Stack.Navigator initialRouteName={ScreenName.Web3HubMain}>
-        <Stack.Screen
-          name={ScreenName.Web3HubMain}
-          component={Web3HubMain}
-          options={{
-            title: t("web3hub.main.header.title"),
-            // Never just pass a component to header like `header: Web3HubMainHeader,`
-            // as it would break the fast-refresh for the header
-            header: props => (
-              <Web3HubMainHeader title={props.options.title} navigation={props.navigation} />
-            ),
-            animation: "none",
-          }}
-        />
+      <Stack.Navigator>
         <Stack.Screen
           name={ScreenName.Web3HubSearch}
           component={Web3HubSearch}

apps/ledger-live-mobile/src/newArch/features/Web3Hub/TabNavigator.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { useSharedValue } from "react-native-reanimated";
+import { ScreenName } from "~/const";
+import { HeaderContext } from "./HeaderContext";
+import Web3HubMain from "./screens/Web3HubMain";
+import Web3HubMainHeader from "./screens/Web3HubMain/components/Header";
+import { SearchProps } from "./types";
+
+export type Web3HubTabStackParamList = {
+  [ScreenName.Web3HubMain]: undefined;
+};
+
+const Stack = createNativeStackNavigator<Web3HubTabStackParamList>();
+
+export default function TabNavigator() {
+  const { t } = useTranslation();
+  const layoutY = useSharedValue(0);
+
+  return (
+    <HeaderContext.Provider
+      value={{
+        layoutY,
+      }}
+    >
+      <Stack.Navigator initialRouteName={ScreenName.Web3HubMain}>
+        <Stack.Screen
+          name={ScreenName.Web3HubMain}
+          component={Web3HubMain}
+          options={{
+            title: t("web3hub.main.header.title"),
+            // Never just pass a component to header like `header: Web3HubMainHeader,`
+            // as it would break the fast-refresh for the header
+            header: props => (
+              <Web3HubMainHeader
+                title={props.options.title}
+                // Using as here because we cannot use generics on the header props
+                navigation={props.navigation as SearchProps["navigation"]}
+              />
+            ),
+            animation: "none",
+          }}
+        />
+      </Stack.Navigator>
+    </HeaderContext.Provider>
+  );
+}

apps/ledger-live-mobile/src/newArch/features/Web3Hub/__integrations__/shared.tsx

@@ -1,11 +1,27 @@
 import React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import Web3HubNavigator from "../Navigator";
+import Navigator from "../Navigator";
+import TabNavigator from "../TabNavigator";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { NavigatorName } from "~/const";
+
+const Stack = createNativeStackNavigator();
 
 export function Web3HubTest() {
   return (
     <QueryClientProvider client={new QueryClient()}>
-      <Web3HubNavigator />
+      <Stack.Navigator initialRouteName={NavigatorName.Web3HubTab}>
+        <Stack.Screen
+          name={NavigatorName.Web3HubTab}
+          component={TabNavigator}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen
+          name={NavigatorName.Web3Hub}
+          component={Navigator}
+          options={{ headerShown: false }}
+        />
+      </Stack.Navigator>
     </QueryClientProvider>
   );
 }

apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/ManifestsList/ManifestItem/index.tsx

@@ -1,22 +1,14 @@
-import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity } from "react-native";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@react-navigation/native";
 import { Flex, Text } from "@ledgerhq/native-ui";
 import { AppBranch, AppManifest } from "@ledgerhq/live-common/wallet-api/types";
-import { BaseComposite } from "~/components/RootNavigator/types/helpers";
+import type { MainProps, SearchProps } from "LLM/features/Web3Hub/types";
 import { AppIcon } from "~/screens/Platform/v2/AppIcon";
-import { ScreenName } from "~/const";
+import { NavigatorName, ScreenName } from "~/const";
 import { Theme } from "~/colors";
-import type { Web3HubStackParamList } from "LLM/features/Web3Hub/Navigator";
 
-type MainProps = BaseComposite<
-  NativeStackScreenProps<Web3HubStackParamList, ScreenName.Web3HubMain>
->;
-type SearchProps = BaseComposite<
-  NativeStackScreenProps<Web3HubStackParamList, ScreenName.Web3HubSearch>
->;
 export type NavigationProp = MainProps["navigation"] | SearchProps["navigation"];
 
 function getBranchStyle(branch: AppBranch, colors: Theme["colors"]) {
@@ -70,8 +62,11 @@ export default function ManifestItem({
     if (isDisabled) {
       return;
     }
-    navigation.push(ScreenName.Web3HubApp, {
-      manifestId: manifest.id,
+    navigation.push(NavigatorName.Web3Hub, {
+      screen: ScreenName.Web3HubApp,
+      params: {
+        manifestId: manifest.id,
+      },
     });
   }, [isDisabled, navigation, manifest.id]);
 

apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubApp/index.tsx

@@ -1,14 +1,10 @@
 import { Text } from "@ledgerhq/native-ui";
-import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import React from "react";
 import { View } from "react-native";
-import { BaseComposite } from "~/components/RootNavigator/types/helpers";
+import type { AppProps } from "LLM/features/Web3Hub/types";
 import { ScreenName } from "~/const";
-import { Web3HubStackParamList } from "../../Navigator";
 
-type Props = BaseComposite<NativeStackScreenProps<Web3HubStackParamList, ScreenName.Web3HubApp>>;
-
-export default function Web3HubApp({ route }: Props) {
+export default function Web3HubApp({ route }: AppProps) {
   const { manifestId } = route.params;
   return (
     <View

apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/Header/index.tsx

@@ -3,12 +3,12 @@ import React, { useCallback, useContext } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "@react-navigation/native";
-import { NativeStackHeaderProps } from "@react-navigation/native-stack";
 import Animated, { useAnimatedStyle, interpolate, Extrapolation } from "react-native-reanimated";
 import { Flex, Text } from "@ledgerhq/native-ui";
+import type { SearchProps } from "LLM/features/Web3Hub/types";
 import TextInput from "~/components/TextInput";
 import { HeaderContext } from "LLM/features/Web3Hub/HeaderContext";
-import { ScreenName } from "~/const";
+import { NavigatorName, ScreenName } from "~/const";
 
 const TITLE_HEIGHT = 50;
 const SEARCH_HEIGHT = 60;
@@ -19,7 +19,7 @@ const LAYOUT_RANGE = [0, 35];
 
 type Props = {
   title?: string;
-  navigation: NativeStackHeaderProps["navigation"];
+  navigation: SearchProps["navigation"];
 };
 
 export default function Web3HubMainHeader({ title, navigation }: Props) {
@@ -70,7 +70,9 @@ export default function Web3HubMainHeader({ title, navigation }: Props) {
   });
 
   const goToSearch = useCallback(() => {
-    navigation.push(ScreenName.Web3HubSearch, {});
+    navigation.push(NavigatorName.Web3Hub, {
+      screen: ScreenName.Web3HubSearch,
+    });
   }, [navigation]);
 
   return (

apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/index.tsx

@@ -1,15 +1,10 @@
 import React, { useContext } from "react";
-import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import Animated, { useAnimatedScrollHandler } from "react-native-reanimated";
-import { BaseComposite } from "~/components/RootNavigator/types/helpers";
-import { ScreenName } from "~/const";
-import type { Web3HubStackParamList } from "LLM/features/Web3Hub/Navigator";
+import type { MainProps } from "LLM/features/Web3Hub/types";
 import { HeaderContext } from "LLM/features/Web3Hub/HeaderContext";
 import ManifestsList from "LLM/features/Web3Hub/components/ManifestsList";
 
-type Props = BaseComposite<NativeStackScreenProps<Web3HubStackParamList, ScreenName.Web3HubMain>>;
-
-export default function Web3HubMain({ navigation }: Props) {
+export default function Web3HubMain({ navigation }: MainProps) {
   const { layoutY } = useContext(HeaderContext);
 
   const scrollHandler = useAnimatedScrollHandler(event => {

apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubSearch/components/SearchList/SearchItem/index.tsx

@@ -1,18 +1,13 @@
-import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import React, { useCallback } from "react";
 import { TouchableOpacity } from "react-native";
 import { useTheme } from "@react-navigation/native";
 import { Flex, Text } from "@ledgerhq/native-ui";
 import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
-import { BaseComposite } from "~/components/RootNavigator/types/helpers";
+import type { SearchProps } from "LLM/features/Web3Hub/types";
 import { AppIcon } from "~/screens/Platform/v2/AppIcon";
 import { ScreenName } from "~/const";
-import type { Web3HubStackParamList } from "LLM/features/Web3Hub/Navigator";
 import CurrencyIconList from "./CurrencyIconList";
 
-type SearchProps = BaseComposite<
-  NativeStackScreenProps<Web3HubStackParamList, ScreenName.Web3HubSearch>
->;
 export type NavigationProp = SearchProps["navigation"];
 
 export default function SearchItem({

apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubSearch/index.tsx

@@ -1,16 +1,11 @@
-import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import React, { useContext } from "react";
 import { ScrollView } from "react-native";
-import { BaseComposite } from "~/components/RootNavigator/types/helpers";
-import { ScreenName } from "~/const";
-import { Web3HubStackParamList } from "LLM/features/Web3Hub/Navigator";
+import type { SearchProps } from "LLM/features/Web3Hub/types";
 import { HeaderContext } from "LLM/features/Web3Hub/HeaderContext";
 import ManifestsList from "LLM/features/Web3Hub/components/ManifestsList";
 import SearchList from "./components/SearchList";
 
-type Props = BaseComposite<NativeStackScreenProps<Web3HubStackParamList, ScreenName.Web3HubSearch>>;
-
-export default function Web3HubSearch({ navigation }: Props) {
+export default function Web3HubSearch({ navigation }: SearchProps) {
   const { search } = useContext(HeaderContext);
 
   return (

apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/index.tsx

@@ -1,14 +1,10 @@
-import { Text } from "@ledgerhq/native-ui";
-import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import React from "react";
 import { View } from "react-native";
-import { BaseComposite } from "~/components/RootNavigator/types/helpers";
-import { Web3HubStackParamList } from "../../Navigator";
+import { Text } from "@ledgerhq/native-ui";
+import type { TabsProps } from "LLM/features/Web3Hub/types";
 import { ScreenName } from "~/const";
 
-type Props = BaseComposite<NativeStackScreenProps<Web3HubStackParamList, ScreenName.Web3HubTabs>>;
-
-export default function Web3HubTabs(_: Props) {
+export default function Web3HubTabs(_: TabsProps) {
   return (
     <View
       style={{