Add translations to keys page

Concordium · Nov 8, 2024 · 4ea799e · 4ea799e
1 parent 54ae44e
commit 4ea799e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/...ges/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Keys/ValidatorKeys.tsx b/...ges/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Keys/ValidatorKeys.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { GenerateBakerKeysOutput, generateBakerKeys } from '@concordium/web-sdk';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
 
 import ExportIcon from '@assets/svgX/sign-out.svg';
 import Caret from '@assets/svgX/caret-right.svg';
@@ -11,7 +13,6 @@ import { ensureDefined } from '@shared/utils/basic-helpers';
 import { saveData } from '@popup/shared/utils/file-helpers';
 import { useSelectedAccountInfo } from '@popup/shared/AccountInfoListenerContext/AccountInfoListenerContext';
 import { getBakerKeyExport } from '@popup/shared/utils/baking-helpers';
-import clsx from 'clsx';
 
 const KEYS_FILENAME = 'validator-credentials.json';
 
@@ -21,6 +22,7 @@ type Props = {
 };
 
 export default function ValidatorKeys({ onSubmit, initial }: Props) {
+    const { t } = useTranslation('x', { keyPrefix: 'earn.validator' });
     const [expand, setExpand] = useState(false);
     const [exported, setExported] = useState(false);
     const accountInfo = ensureDefined(useSelectedAccountInfo(), 'Expected seleted account');
@@ -33,34 +35,31 @@ export default function ValidatorKeys({ onSubmit, initial }: Props) {
 
     return (
         <Page className={clsx('validator-keys', expand && 'validator-keys--expanded')}>
-            <Page.Top heading="Validator keys" />
-            <Text.Capture>
-                Your new validator keys have been generated. Before you can continue, you must export and save them. The
-                keys will have to be added to the validator node.
-            </Text.Capture>
+            <Page.Top heading={t('keys.title')} />
+            <Text.Capture>{t('keys.description')}</Text.Capture>
             <Card>
                 <Card.Row>
-                    <Card.RowDetails title="Election verify key" value={keys.electionVerifyKey} />
+                    <Card.RowDetails title={t('values.electionKey.label')} value={keys.electionVerifyKey} />
                 </Card.Row>
                 <Card.Row>
-                    <Card.RowDetails title="Signature verify key" value={keys.signatureVerifyKey} />
+                    <Card.RowDetails title={t('values.signatureKey.label')} value={keys.signatureVerifyKey} />
                 </Card.Row>
                 <Card.Row>
-                    <Card.RowDetails title="Aggregation verify key" value={keys.aggregationVerifyKey} />
+                    <Card.RowDetails title={t('values.aggregationKey.label')} value={keys.aggregationVerifyKey} />
                 </Card.Row>
             </Card>
             <div>
                 <Button.IconText
                     className="validator-keys__expand"
                     icon={<Caret />}
-                    label={expand ? 'Show less' : 'Show full'}
+                    label={expand ? t('keys.buttonToggle.less') : t('keys.buttonToggle.full')}
                     onClick={() => setExpand((v) => !v)}
                 />
-                <Button.IconText icon={<ExportIcon />} label="Export keys as .json" onClick={exportKeys} />
+                <Button.IconText icon={<ExportIcon />} label={t('keys.buttonExport')} onClick={exportKeys} />
             </div>
             {(exported || initial !== undefined) && (
                 <Page.Footer>
-                    <Button.Main label="Continue" onClick={() => onSubmit(keys)} />
+                    <Button.Main label={t('keys.buttonContinue')} onClick={() => onSubmit(keys)} />
                 </Page.Footer>
             )}
         </Page>

diff --git a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/i18n/en.ts
@@ -244,6 +244,14 @@ const t = {
                 buttonBack: 'Enter new stake',
             },
         },
+        keys: {
+            title: 'Validator keys',
+            description:
+                'Your new validator keys have been generated. Before you can continue, you must export and save them. The keys will have to be added to the validator node.',
+            buttonToggle: { less: 'Show less', full: 'Show full' },
+            buttonExport: 'Export as .json',
+            buttonContinue: 'Continue',
+        },
         openStatus: {
             title: 'Opening a pool',
             switch: {