feat(i18n): enhanced i18n support (#3761)

platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import i18n from 'i18next';
 
 import Modal from '../Modal';
 import Icon from '../Icon';
@@ -9,9 +11,10 @@ import IconButton from '../IconButton';
 const isProduction = process.env.NODE_ENV === 'production';
 
 const DefaultFallback = ({ error, context, resetErrorBoundary, fallbackRoute }) => {
+  const { t } = useTranslation('ErrorBoundary');
   const [showDetails, setShowDetails] = useState(false);
-  const title = `Something went wrong${!isProduction && ` in ${context}`}.`;
-  const subtitle = `Sorry, something went wrong there. Try again.`;
+  const title = `${t('Something went wrong')}${!isProduction && ` ${t('in')} ${context}`}.`;
+  const subtitle = t('Sorry, something went wrong there. Try again.');
   return (
     <div
       className="ErrorFallback bg-primary-dark h-full w-full"
@@ -21,8 +24,8 @@ const DefaultFallback = ({ error, context, resetErrorBoundary, fallbackRoute })
       <p className="text-primary-light text-base">{subtitle}</p>
       {!isProduction && (
         <div className="bg-secondary-dark mt-5 space-y-2 rounded-md p-5 font-mono">
-          <p className="text-primary-light">Context: {context}</p>
-          <p className="text-primary-light">Error Message: {error.message}</p>
+          <p className="text-primary-light">{t('Context')}: {context}</p>
+          <p className="text-primary-light">{t('Error Message')}: {error.message}</p>
 
           <IconButton
             variant="contained"
@@ -32,7 +35,7 @@ const DefaultFallback = ({ error, context, resetErrorBoundary, fallbackRoute })
             onClick={() => setShowDetails(!showDetails)}
           >
             <React.Fragment>
-              <div>{'Stack Trace'}</div>
+              <div>{t('Stack Trace')}</div>
               <Icon
                 width="15px"
                 height="15px"
@@ -83,7 +86,7 @@ const ErrorBoundary = ({
       closeButton
       shouldCloseOnEsc
       isOpen={isOpen}
-      title={'Something went wrong'}
+      title={i18n.t('ErrorBoundary:Something went wrong')}
       onClose={() => {
         setIsOpen(false);
         if (fallbackRoute && typeof window !== 'undefined') {