Translate app

src/components/Apps/AppViewer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { Box } from '@mui/material';
 import { getBaseApiReact } from '../../App';
 import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
@@ -7,7 +7,7 @@ import { useQortalMessageListener } from './useQortalMessageListener';
 import { useThemeContext } from '../Theme/ThemeContext';
 import { useTranslation } from 'react-i18next';
 
-export const AppViewer = React.forwardRef(
+export const AppViewer = forwardRef(
   ({ app, hide, isDevMode, skipAuth }, iframeRef) => {
     // const iframeRef = useRef(null);
     const { window: frameWindow } = useFrame();
@@ -23,7 +23,7 @@ export const AppViewer = React.forwardRef(
       );
     const [url, setUrl] = useState('');
     const { themeMode } = useThemeContext();
-    const { i18n } = useTranslation(['core']);
+    const { i18n, t } = useTranslation(['core']);
     const currentLang = i18n.language;
 
     useEffect(() => {
@@ -184,7 +184,13 @@ export const AppViewer = React.forwardRef(
           // Timeout after 200ms if no response
           setTimeout(() => {
             window.removeEventListener('message', handleNavigationSuccess);
-            reject(new Error('Navigation timeout'));
+            reject(
+              new Error(
+                t('core:message.error.navigation_timeout', {
+                  postProcess: 'capitalizeFirst',
+                })
+              )
+            );
           }, 200);
           const targetOrigin = iframeRef.current
             ? new URL(iframeRef.current.src).origin

src/components/Apps/AppViewerContainer.tsx

@@ -1,9 +1,8 @@
-import React, { useContext } from 'react';
+import { forwardRef } from 'react';
 import { AppViewer } from './AppViewer';
 import Frame from 'react-frame-component';
-import { MyContext } from '../../App';
 
-const AppViewerContainer = React.forwardRef(
+const AppViewerContainer = forwardRef(
   ({ app, isSelected, hide, isDevMode, customHeight, skipAuth }, ref) => {
     return (
       <Frame

src/i18n/locales/en/core.json

@@ -117,6 +117,7 @@
       "minting_account_add": "unable to add minting account",
       "minting_account_remove": "unable to remove minting account",
       "missing_fields": "missing: {{ fields }}",
+      "navigation_timeout": "navigation timeout",
       "publish_app": "unable to publish app",
       "rating_option": "cannot find rating option",
       "save_qdn": "unable to save to QDN",