fix: translate ErrorBoundary fallback text

apps/web/messages/en.json

@@ -49,5 +49,10 @@
     "connecting": "Connecting...",
     "installFreighter": "Install Freighter",
     "retry": "Retry"
+  },
+
+  "errorBoundary": {
+    "title": "Something went wrong. Please reload the page.",
+    "reload": "Reload"
   }
 }

apps/web/messages/fr.json

@@ -49,5 +49,10 @@
     "connecting": "Connexion...",
     "installFreighter": "Installer Freighter",
     "retry": "Réessayer"
+  },
+
+  "errorBoundary": {
+    "title": "Une erreur s'est produite. Veuillez recharger la page.",
+    "reload": "Recharger"
   }
 }

apps/web/src/__tests__/components/ErrorBoundary.test.tsx

@@ -2,6 +2,16 @@ import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { ErrorBoundary } from "../../components/ui/ErrorBoundary";
 
+vi.mock("react-i18next", () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  withTranslation: () => (WrappedComponent: any) => {
+    function Wrapped(props: Record<string, unknown>) {
+      return <WrappedComponent {...props} t={(key: string) => key} />;
+    }
+    return Wrapped;
+  },
+}));
+
 function Bomb(): never {
   throw new Error("render panic");
 }
@@ -29,9 +39,8 @@ describe("ErrorBoundary", () => {
       </ErrorBoundary>
     );
 
-    expect(
-      screen.getByText("Something went wrong. Please reload the page.")
-    ).toBeDefined();
+    expect(screen.getByText("errorBoundary.title")).toBeDefined();
+    expect(screen.getByText("errorBoundary.reload")).toBeDefined();
 
     consoleErrorSpy.mockRestore();
   });

apps/web/src/components/ui/ErrorBoundary.tsx

@@ -1,6 +1,7 @@
 import { Component, type ErrorInfo, type ReactNode } from "react";
+import { withTranslation, type WithTranslation } from "react-i18next";
 
-interface ErrorBoundaryProps {
+interface ErrorBoundaryProps extends WithTranslation {
   children: ReactNode;
 }
 
@@ -12,7 +13,7 @@ interface ErrorBoundaryState {
 // failures TanStack Query already surfaces via isError/error (handled inline
 // in VaultPanel). A boundary can't recover from a render error other than
 // remounting its subtree, so this deliberately only offers a reload.
-export class ErrorBoundary extends Component<
+class ErrorBoundaryBase extends Component<
   ErrorBoundaryProps,
   ErrorBoundaryState
 > {
@@ -32,20 +33,21 @@ export class ErrorBoundary extends Component<
 
   render() {
     if (this.state.hasError) {
+      const { t } = this.props;
       return (
         <div className="rounded-2xl border border-red-900/50 bg-red-950/20 p-6 text-center">
-          <p className="text-sm text-red-400">
-            Something went wrong. Please reload the page.
-          </p>
+          <p className="text-sm text-red-400">{t("errorBoundary.title")}</p>
           <button
             onClick={() => window.location.reload()}
             className="mt-3 rounded-lg border border-red-800/70 px-4 py-1.5 text-xs font-medium text-red-300 hover:border-red-700 hover:text-red-200 transition-colors duration-150"
           >
-            Reload
+            {t("errorBoundary.reload")}
           </button>
         </div>
       );
     }
     return this.props.children;
   }
 }
+
+export const ErrorBoundary = withTranslation()(ErrorBoundaryBase);