From aa0884ae4a10bcd08b44e31622f517743a0bdc77 Mon Sep 17 00:00:00 2001 From: jgresham Date: Fri, 4 Nov 2022 12:31:32 -0500 Subject: [PATCH 1/2] feat: convert various strings to translatable strings --- assets/locales/en/genericComponents.json | 14 ++++++++++++++ assets/locales/en/systemRequirements.json | 9 ++++++++- assets/locales/en/translation.json | 2 ++ assets/locales/es/genericComponents.json | 7 +++++++ .../Generics/redesign/NodeIcon/NodeIcon.tsx | 5 ++++- .../redesign/ProgressBar/TimedProgressBar.tsx | 12 ++++++++---- .../Generics/redesign/SelectCard/SelectCard.tsx | 4 +++- src/renderer/Generics/redesign/Stepper/Stepper.tsx | 11 +++++++++-- .../AddEthereumNode/AddEthereumNode.tsx | 11 +++++++---- .../DockerInstallation/DockerInstallation.tsx | 8 ++------ .../NodeRequirements/NodeRequirements.tsx | 13 +++---------- .../NodeRequirements/requirementsChecklistUtil.tsx | 9 ++++----- src/renderer/i18n.js | 4 ++++ 13 files changed, 75 insertions(+), 34 deletions(-) create mode 100644 assets/locales/en/genericComponents.json create mode 100644 assets/locales/es/genericComponents.json diff --git a/assets/locales/en/genericComponents.json b/assets/locales/en/genericComponents.json new file mode 100644 index 000000000..6dcded196 --- /dev/null +++ b/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" +} diff --git a/assets/locales/en/systemRequirements.json b/assets/locales/en/systemRequirements.json index 1f8ca1830..d83d05188 100644 --- a/assets/locales/en/systemRequirements.json +++ b/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" } diff --git a/assets/locales/en/translation.json b/assets/locales/en/translation.json index bb568272c..76177d14e 100644 --- a/assets/locales/en/translation.json +++ b/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." diff --git a/assets/locales/es/genericComponents.json b/assets/locales/es/genericComponents.json new file mode 100644 index 000000000..30566bd0b --- /dev/null +++ b/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" +} diff --git a/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx b/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx index e0e538ff0..7ce637f64 100644 --- a/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx +++ b/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) => { > Node icon diff --git a/src/renderer/Generics/redesign/ProgressBar/TimedProgressBar.tsx b/src/renderer/Generics/redesign/ProgressBar/TimedProgressBar.tsx index f2ddd27e4..00942a4e3 100644 --- a/src/renderer/Generics/redesign/ProgressBar/TimedProgressBar.tsx +++ b/src/renderer/Generics/redesign/ProgressBar/TimedProgressBar.tsx @@ -1,21 +1,25 @@ import { useEffect, useState } from 'react'; +import { 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, 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(0); useEffect(() => { @@ -28,7 +32,7 @@ const TimedProgressBar = ({ return ( ); diff --git a/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx b/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx index cae5177d1..3291a177b 100644 --- a/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx +++ b/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 = ({ {minority && (
-
)} diff --git a/src/renderer/Generics/redesign/Stepper/Stepper.tsx b/src/renderer/Generics/redesign/Stepper/Stepper.tsx index 3e3a2aa22..c8958be49 100644 --- a/src/renderer/Generics/redesign/Stepper/Stepper.tsx +++ b/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 (
-
-
); diff --git a/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx b/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx index b28cf8e8a..c6c8138ae 100644 --- a/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx +++ b/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(); const [sSelectedExecutionClient, setSelectedExecutionClient] = useState(); @@ -180,7 +181,9 @@ AddEthereumNodeProps) => {

Consensus client

setIsOptionsOpen(!sIsOptionsOpen)} isDown={!sIsOptionsOpen} /> @@ -193,7 +196,7 @@ AddEthereumNodeProps) => { width: '100%', }} > - Network{' '} + {tGeneric('Network')}{' '}
@@ -202,9 +205,9 @@ AddEthereumNodeProps) => {
)} -

Data location

+

{tGeneric('DataLocation')}

{ const storageLocationDetails = diff --git a/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx b/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx index 773948675..b199f67b7 100644 --- a/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx +++ b/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx @@ -155,14 +155,10 @@ const DockerInstallation = ({ onChange }: DockerInstallationProps) => { label={t('start docker')} onClick={onClickStartDocker} /> -
{`Settings -> Unchceck "Open Docker at startup"`}
+
{t('DockerUncheckOpenAtStartup')}
)} - {isDockerRunning && ( - <>Docker is running. Please proceed to start your node. - )} + {isDockerRunning && <>{t('DockerIsRunningProceed')}} ); }; diff --git a/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx b/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx index 89d6d040b..a85a94ab7 100644 --- a/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx +++ b/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')} )} {nodeRequirements?.documentationUrl && ( )} - {!nodeRequirements && ( - <> - The requirements are unavailable. Please check with the node provider. - - )} + {!nodeRequirements && <>{t('nodeRequirementsUnavailable')}} ); diff --git a/src/renderer/Presentational/NodeRequirements/requirementsChecklistUtil.tsx b/src/renderer/Presentational/NodeRequirements/requirementsChecklistUtil.tsx index 6549a1302..84d66d58b 100644 --- a/src/renderer/Presentational/NodeRequirements/requirementsChecklistUtil.tsx +++ b/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')} `} {' '} or{' '} diff --git a/src/renderer/i18n.js b/src/renderer/i18n.js index ea1c20c30..fa0d66846 100644 --- a/src/renderer/i18n.js +++ b/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, From cc6f465a5e1eb74f4e610e0966c36b847ff40e46 Mon Sep 17 00:00:00 2001 From: jgresham Date: Fri, 4 Nov 2022 12:41:11 -0500 Subject: [PATCH 2/2] minor type fix --- .../Generics/redesign/ProgressBar/TimedProgressBar.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/renderer/Generics/redesign/ProgressBar/TimedProgressBar.tsx b/src/renderer/Generics/redesign/ProgressBar/TimedProgressBar.tsx index 00942a4e3..2916d1b98 100644 --- a/src/renderer/Generics/redesign/ProgressBar/TimedProgressBar.tsx +++ b/src/renderer/Generics/redesign/ProgressBar/TimedProgressBar.tsx @@ -1,12 +1,16 @@ import { useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; +import { TFunction, useTranslation } from 'react-i18next'; import ProgressBar, { ProgressBarProps } from './ProgressBar'; export interface TimedProgressBarProps extends ProgressBarProps { totalTimeSeconds: number; } -const timeRemainingCaption = (t, totalTime: number, timeElapsed: number) => { +const timeRemainingCaption = ( + t: TFunction<'genericComponents', undefined>, + totalTime: number, + timeElapsed: number +) => { if (timeElapsed >= totalTime) { return t('FinishingUp'); }