feat: convert various strings to translatable strings

assets/locales/en/genericComponents.json

@@ -0,0 +1,14 @@
+{
+  "AboutSecondsRemaining" : "About {{seconds}} seconds remaining",
+  "advanced options": "advanced options",
+  "DataLocation" : "Data location",
+  "FinishingUp" : "Finishing up...",
+  "Hide" : "Hide",
+  "loadingDotDotDot": "loading...",
+  "MinorityClient" : "Minority Client",
+  "Network": "Network",
+  "NextStep" : "Next step",
+  "NodeIcon" : "Node icon",
+  "Previous" : "Previous",
+  "Show" : "Show"
+}

assets/locales/en/systemRequirements.json

@@ -9,10 +9,17 @@
   "storageSizeDescription" : "Selected storage: {{storageName}} with {{freeSize}}GB space",
   "internetSpeedTitle" : "Internet speed is at least {{minDownloadSpeed}}Mbit/s download and {{minUploadSpeed}}Mbit/s upload",
   "internetSpeedDescription" : "Internet speed: {{speed}}Mbit/s download and {{minUploadSpeed}}Mbit/s upload",
+  "internetSpeedPleaseTest" : "Please do your own internet speed test to ensure it meets these requirements!",
+  "internetSpeedTestWebsites" : "You can check the speed at one of the following websites",
+  "internetSpeedGoogleSpeedTest" : "Google Speed Test",
+  "internetSpeedOoklaSpeedTest": "Speedtest by Ookla",
   "dockerInstalledTitle" : "Docker is installed",
   "dockerVersionInstalledTitle" : "Docker version {{minVersion}} or later installed",
   "dockerVersionInstalledDescription" : "Docker version: {{version}}",
   "dockerVersionInstalledNeedsUpdateCaption": "Please update Docker from the Docker app",
   "dockerNotInstalledDescription": "Docker can be installed in the next step.",
-  "dockerCaption": "Docker helps software work on a wide range of computers."
+  "dockerCaption": "Docker helps software work on a wide range of computers.",
+  "nodeRequirementsDefaultDescription": "Your computer is checked with the recommended requirements for the selected node.",
+  "nodeRequirementsUnavailable": "The requirements are unavailable. Please check with the node provider.",
+  "nodeRequirementsLearnMore": "Learn more about the requirements"
 }

assets/locales/en/translation.json

@@ -52,6 +52,8 @@
   "DockerInstallation": "Docker installation",
   "LearnMoreDocker": "Learn more about Docker",
   "DownloadAndInstall": "Download and install",
+  "DockerIsRunningProceed": "Docker is running. Please proceed to start your node.",
+  "DockerUncheckOpenAtStartup": "Settings -> Unchceck \"Open Docker at startup\"",
   "GetStarted": "Get started",
   "WelcomeToNiceNode": "Welcome to NiceNode",
   "WelcomeToNiceNodeDescription": "Run a node how you want it — without commands and a terminal. NiceNode shows what the node is doing at a glance. Stats like how many peer nodes are connected and synching progress are built into the app."

assets/locales/es/genericComponents.json

@@ -0,0 +1,7 @@
+{
+  "AboutSecondsRemaining" : "Sobre {{seconds}} segundo remaining",
+  "FinishingUp" : "Finishing arriba...",
+  "MinorityClient" : "Mejor Client",
+  "NextStep" : "Proxima step",
+  "Previous" : "Previouso"
+}

src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import {
   NODE_ICONS,
   NodeIconId,
@@ -43,6 +44,8 @@ export interface NodeIconProps {
  * Primary UI component for user interaction
  */
 export const NodeIcon = ({ iconId, status, size, animate }: NodeIconProps) => {
+  const { t } = useTranslation('genericComponents');
+
   const isAnimated = animate ? 'animate' : '';
   let sizeStyle = mediumStyle;
   if (size === 'small') {
@@ -102,7 +105,7 @@ export const NodeIcon = ({ iconId, status, size, animate }: NodeIconProps) => {
       >
         <img
           src={NODE_ICONS[iconId as NodeIconId] || undefined}
-          alt="Node icon"
+          alt={t('NodeIcon')}
           className={imageStyle}
         />
       </div>

src/renderer/Generics/redesign/ProgressBar/TimedProgressBar.tsx

@@ -1,21 +1,29 @@
 import { useEffect, useState } from 'react';
+import { TFunction, useTranslation } from 'react-i18next';
 import ProgressBar, { ProgressBarProps } from './ProgressBar';
 
 export interface TimedProgressBarProps extends ProgressBarProps {
   totalTimeSeconds: number;
 }
 
-const timeRemainingCaption = (totalTime: number, timeElapsed: number) => {
+const timeRemainingCaption = (
+  t: TFunction<'genericComponents', undefined>,
+  totalTime: number,
+  timeElapsed: number
+) => {
   if (timeElapsed >= totalTime) {
-    return 'Finishing up...';
+    return t('FinishingUp');
   }
-  return `About ${Math.round(totalTime - timeElapsed)} seconds remaining`;
+  return t('AboutSecondsRemaining', {
+    seconds: Math.round(totalTime - timeElapsed),
+  });
 };
 
 const TimedProgressBar = ({
   totalTimeSeconds,
   ...restProps
 }: TimedProgressBarProps) => {
+  const { t } = useTranslation('genericComponents');
   const [sElapsedSeconds, setElapsedSeconds] = useState<number>(0);
 
   useEffect(() => {
@@ -28,7 +36,7 @@ const TimedProgressBar = ({
   return (
     <ProgressBar
       progress={(sElapsedSeconds / totalTimeSeconds) * 100}
-      caption={timeRemainingCaption(totalTimeSeconds, sElapsedSeconds)}
+      caption={timeRemainingCaption(t, totalTimeSeconds, sElapsedSeconds)}
       {...restProps}
     />
   );

src/renderer/Generics/redesign/SelectCard/SelectCard.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useState } from 'react';
 import { NodeIconId } from 'renderer/assets/images/nodeIcons';
+import { useTranslation } from 'react-i18next';
 import { NodeIcon } from '../NodeIcon/NodeIcon';
 import { Label } from '../Label/Label';
 import {
@@ -51,6 +52,7 @@ const SelectCard = ({
   minority = false,
   isSelected = false,
 }: SelectCardProps) => {
+  const { t } = useTranslation('genericComponents');
   const [selected, setSelected] = useState(isSelected);
 
   const onClickAction = () => {
@@ -84,7 +86,7 @@ const SelectCard = ({
         </div>
         {minority && (
           <div className={tagStyle}>
-            <Label bold={false} type="pink2" label="Minority Client" />{' '}
+            <Label bold={false} type="pink2" label={t('MinorityClient')} />{' '}
           </div>
         )}
       </div>

src/renderer/Generics/redesign/Stepper/Stepper.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import Button from '../Button/Button';
 import { bottomBar, previousButton, nextButton } from './stepper.css';
 
@@ -9,13 +10,19 @@ export interface StepperProps {
 }
 
 const Stepper = ({ onChange }: StepperProps) => {
+  const { t } = useTranslation('genericComponents');
+
   return (
     <div className={bottomBar}>
       <div className={previousButton}>
-        <Button label="Previous" onClick={() => onChange('previous')} />
+        <Button label={t('Previous')} onClick={() => onChange('previous')} />
       </div>
       <div className={nextButton}>
-        <Button label="Next step" primary onClick={() => onChange('next')} />
+        <Button
+          label={t('NextStep')}
+          primary
+          onClick={() => onChange('next')}
+        />
       </div>
     </div>
   );

src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx

@@ -117,6 +117,7 @@ const AddEthereumNode = ({
 // beaconOptions,
 AddEthereumNodeProps) => {
   const { t } = useTranslation();
+  const { t: tGeneric } = useTranslation('genericComponents');
   const [sIsOptionsOpen, setIsOptionsOpen] = useState<boolean>();
   const [sSelectedExecutionClient, setSelectedExecutionClient] =
     useState<string>();
@@ -180,7 +181,9 @@ AddEthereumNodeProps) => {
       <p className={sectionFont}>Consensus client</p>
       <SpecialSelect onChange={onChangeCc} options={ccOptions} />
       <DropdownLink
-        text={`${sIsOptionsOpen ? 'Hide' : 'Show'} advanced options`}
+        text={`${
+          sIsOptionsOpen ? tGeneric('Hide') : tGeneric('Show')
+        } ${tGeneric('advancedOptions')}`}
         onClick={() => setIsOptionsOpen(!sIsOptionsOpen)}
         isDown={!sIsOptionsOpen}
       />
@@ -193,7 +196,7 @@ AddEthereumNodeProps) => {
             width: '100%',
           }}
         >
-          <span style={{ fontWeight: 600 }}>Network</span>{' '}
+          <span style={{ fontWeight: 600 }}>{tGeneric('Network')}</span>{' '}
           <div
             style={{ width: 300, display: 'inline-block', marginLeft: 'auto' }}
           >
@@ -202,9 +205,9 @@ AddEthereumNodeProps) => {
         </div>
       )}
       <HorizontalLine />
-      <p className={sectionFont}>Data location</p>
+      <p className={sectionFont}>{tGeneric('DataLocation')}</p>
       <FolderInput
-        placeholder={sNodeStorageLocation ?? 'loading..'}
+        placeholder={sNodeStorageLocation ?? tGeneric('loadingDotDotDot')}
         freeStorageSpaceGBs={sNodeStorageLocationFreeStorageGBs}
         onClickChange={async () => {
           const storageLocationDetails =

src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx

@@ -155,14 +155,10 @@ const DockerInstallation = ({ onChange }: DockerInstallationProps) => {
             label={t('start docker')}
             onClick={onClickStartDocker}
           />
-          <div
-            className={captionText}
-          >{`Settings -> Unchceck "Open Docker at startup"`}</div>
+          <div className={captionText}>{t('DockerUncheckOpenAtStartup')}</div>
         </>
       )}
-      {isDockerRunning && (
-        <>Docker is running. Please proceed to start your node.</>
-      )}
+      {isDockerRunning && <>{t('DockerIsRunningProceed')}</>}
     </div>
   );
 };

src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx

@@ -62,23 +62,16 @@ const NodeRequirements = ({
         {nodeRequirements?.description ? (
           nodeRequirements.description
         ) : (
-          <>
-            Your computer is checked with the recommended requirements for the
-            selected node.
-          </>
+          <>{t('nodeRequirementsDefaultDescription')}</>
         )}
       </div>
       {nodeRequirements?.documentationUrl && (
         <ExternalLink
-          text="Learn more about the requirements"
+          text={t('nodeRequirementsLearnMore')}
           url={nodeRequirements.documentationUrl}
         />
       )}
-      {!nodeRequirements && (
-        <>
-          The requirements are unavailable. Please check with the node provider.
-        </>
-      )}
+      {!nodeRequirements && <>{t('nodeRequirementsUnavailable')}</>}
       <Checklist items={sItems} />
     </div>
   );

src/renderer/Presentational/NodeRequirements/requirementsChecklistUtil.tsx

@@ -156,19 +156,18 @@ export const makeCheckList = (
           minDownloadSpeed: req.minDownloadSpeedMbps,
           minUploadSpeed: req.minUploadSpeedMbps,
         });
-        valueText =
-          'Please do your own internet speed test to ensure it meets these requirements!';
+        valueText = t('internetSpeedPleaseTest');
         valueComponent = (
           <>
-            You can check the speed at one of the following websites{' '}
+            {`${t('internetSpeedTestWebsites')} `}
             <ExternalLink
-              text="Google Speed Test"
+              text={t('internetSpeedGoogleSpeedTest')}
               url="https://www.google.com/search?q=speed+test"
               inline
             />{' '}
             or{' '}
             <ExternalLink
-              text="Speedtest by Ookla"
+              text={t('internetSpeedOoklaSpeedTest')}
               url="https://speedtest.net"
               inline
             />

src/renderer/i18n.js

@@ -7,7 +7,9 @@ import cnTranslations from '../../assets/locales/cn/translation.json';
 import deTranslations from '../../assets/locales/de/translation.json';
 import enTranslations from '../../assets/locales/en/translation.json';
 import enSystemRequirements from '../../assets/locales/en/systemRequirements.json';
+import enGenericComponents from '../../assets/locales/en/genericComponents.json';
 import esTranslations from '../../assets/locales/es/translation.json';
+import esGenericComponents from '../../assets/locales/es/genericComponents.json';
 import frTranslations from '../../assets/locales/fr/translation.json';
 import jaTranslations from '../../assets/locales/ja/translation.json';
 import viTranslations from '../../assets/locales/vi/translation.json';
@@ -44,9 +46,11 @@ i18n
       en: {
         translation: enTranslations,
         systemRequirements: enSystemRequirements,
+        genericComponents: enGenericComponents,
       },
       es: {
         translation: esTranslations,
+        genericComponents: esGenericComponents,
       },
       fr: {
         translation: frTranslations,