Merge pull request #7350 from LedgerHQ/feat/LIVE-13179

feat(web3hub): add app screen webview [LIVE-13179]

.changeset/hot-stingrays-divide.md

@@ -0,0 +1,8 @@
+---
+"live-mobile": minor
+---
+
+feat(web3hub): add app screen webview
+
+Also add real fetch calls to new manifest-api v2 preview
+Update tests for app screen with mocks

apps/ledger-live-mobile/__tests__/jest-setup.js

@@ -117,6 +117,8 @@ jest.mock("@react-native-firebase/messaging", () => ({
 
 jest.mock("@braze/react-native-sdk", () => ({}));
 
+jest.mock("react-native-webview", () => jest.fn());
+
 const originalError = console.error;
 const originalWarn = console.warn;
 

apps/ledger-live-mobile/package.json

@@ -89,6 +89,7 @@
     "@ledgerhq/live-countervalues": "workspace:^",
     "@ledgerhq/live-countervalues-react": "workspace:^",
     "@ledgerhq/live-env": "workspace:^",
+    "@ledgerhq/live-network": "workspace:^",
     "@ledgerhq/live-nft": "workspace:^",
     "@ledgerhq/live-nft-react": "workspace:^",
     "@ledgerhq/live-wallet": "workspace:^",

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,31 +1,30 @@
 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";
 import Web3HubTabsHeader from "./screens/Web3HubTabs/components/Header";
 import Web3HubApp from "./screens/Web3HubApp";
 import Web3HubAppHeader from "./screens/Web3HubApp/components/Header";
 
+// Uncomment to use mocks
+// process.env.MOCK_WEB3HUB = "1";
+
 export type Web3HubStackParamList = {
-  [ScreenName.Web3HubMain]: undefined;
   [ScreenName.Web3HubSearch]: undefined;
   [ScreenName.Web3HubTabs]: undefined;
   [ScreenName.Web3HubApp]: {
     manifestId: string;
+    queryParams?: Record<string, string | undefined>;
   };
 };
 
 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 +35,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>
   );
 }