feat: add error page for LLM (#8762)

feat: add error page

fix: use i18n

chore: logs

chore: changeset

.changeset/honest-badgers-develop.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+LLM add error page

apps/ledger-live-mobile/src/locales/en/common.json

@@ -1019,6 +1019,12 @@
     "ScannedNewImportQrCode": {
       "title": "Update required",
       "description": "To sync your apps, please make sure both are updated to the latest version."
+    },
+    "AppManifestUnknownError": {
+      "title": "Swap Live App not found"
+    },
+    "AppManifestNotFoundError": {
+      "title": "Failed to load Swap Live App"
     }
   },
   "crash": {

apps/ledger-live-mobile/src/screens/Swap/LiveApp/WebView.tsx

@@ -1,16 +1,18 @@
-import React from "react";
 import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
+import React from "react";
 import TabBarSafeAreaView from "~/components/TabBar/TabBarSafeAreaView";
 import { Web3AppWebview } from "~/components/Web3AppWebview";
+import { WebviewState } from "~/components/Web3AppWebview/types";
 
 type Props = {
   manifest: LiveAppManifest;
+  setWebviewState: React.Dispatch<React.SetStateAction<WebviewState>>;
 };
 
-export function WebView({ manifest }: Props) {
+export function WebView({ manifest, setWebviewState }: Props) {
   return (
     <TabBarSafeAreaView>
-      <Web3AppWebview manifest={manifest} customHandlers={{}} />
+      <Web3AppWebview manifest={manifest} customHandlers={{}} onStateChange={setWebviewState} />
     </TabBarSafeAreaView>
   );
 }

apps/ledger-live-mobile/src/screens/Swap/LiveApp/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import {
   useRemoteLiveAppContext,
@@ -7,27 +7,39 @@ import {
 import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
 import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
 import { Flex, InfiniteLoader } from "@ledgerhq/native-ui";
+import { useTranslation } from "react-i18next";
 import GenericErrorView from "~/components/GenericErrorView";
 import TabBarSafeAreaView from "~/components/TabBar/TabBarSafeAreaView";
+import { initialWebviewState } from "~/components/Web3AppWebview/helpers";
+import { WebviewState } from "~/components/Web3AppWebview/types";
 import { WebView } from "./WebView";
 
 const DEFAULT_SWAP_APP_ID = "swap-live-app-demo-3";
-const APP_MANIFEST_NOT_FOUND_ERROR = new Error("Swap Live App not found");
 
 export function SwapLiveApp() {
+  const { t } = useTranslation();
+
+  const APP_MANIFEST_NOT_FOUND_ERROR = new Error(t("errors.AppManifestUnknown.title"));
+  const APP_MANIFEST_UNKNOWN_ERROR = new Error(t("errors.AppManifestNotFoundError.title"));
+
   const localManifest: LiveAppManifest | undefined = useLocalLiveAppManifest(DEFAULT_SWAP_APP_ID);
   const remoteManifest: LiveAppManifest | undefined = useRemoteLiveAppManifest(DEFAULT_SWAP_APP_ID);
   const { state: remoteLiveAppState } = useRemoteLiveAppContext();
 
+  const [webviewState, setWebviewState] = useState<WebviewState>(initialWebviewState);
+  const isWebviewError = webviewState?.url.includes("/unknown-error");
+
   const manifest: LiveAppManifest | undefined = !localManifest ? remoteManifest : localManifest;
 
-  if (!manifest) {
+  if (!manifest || isWebviewError) {
     return (
       <Flex flex={1} p={10} justifyContent="center" alignItems="center">
         {remoteLiveAppState.isLoading ? (
           <InfiniteLoader />
         ) : (
-          <GenericErrorView error={APP_MANIFEST_NOT_FOUND_ERROR} />
+          <GenericErrorView
+            error={isWebviewError ? APP_MANIFEST_UNKNOWN_ERROR : APP_MANIFEST_NOT_FOUND_ERROR}
+          />
         )}
       </Flex>
     );
@@ -36,7 +48,7 @@ export function SwapLiveApp() {
   return (
     <>
       <TabBarSafeAreaView>
-        <WebView manifest={manifest} />
+        <WebView manifest={manifest} setWebviewState={setWebviewState} />
       </TabBarSafeAreaView>
     </>
   );