From 2f5f5001801c5ca32dd348f8b7d6fdf6162655da Mon Sep 17 00:00:00 2001 From: Will O'Beirne Date: Fri, 27 Oct 2023 23:12:04 -0400 Subject: [PATCH] chore(guardian-ui): i18nify meta fields --- .../src/components/ConnectGuardians.tsx | 5 ++- .../src/components/MetaFieldFormControl.tsx | 33 +++++++++++-------- .../src/components/SetConfiguration.tsx | 5 ++- apps/guardian-ui/src/languages/en.json | 13 ++++++-- packages/utils/src/i18n.tsx | 2 +- 5 files changed, 38 insertions(+), 20 deletions(-) diff --git a/apps/guardian-ui/src/components/ConnectGuardians.tsx b/apps/guardian-ui/src/components/ConnectGuardians.tsx index 3ba910ce8..47c896d36 100644 --- a/apps/guardian-ui/src/components/ConnectGuardians.tsx +++ b/apps/guardian-ui/src/components/ConnectGuardians.tsx @@ -105,7 +105,10 @@ export const ConnectGuardians: React.FC = ({ next }) => { } catch { /* no-op, use value as string */ } - rows.push({ label: `Meta - ${key}`, value }); + rows.push({ + label: t('connect-guardians.meta-field-key', { key }), + value, + }); }); content = ( diff --git a/apps/guardian-ui/src/components/MetaFieldFormControl.tsx b/apps/guardian-ui/src/components/MetaFieldFormControl.tsx index fe71ecb22..1b4ea76c4 100644 --- a/apps/guardian-ui/src/components/MetaFieldFormControl.tsx +++ b/apps/guardian-ui/src/components/MetaFieldFormControl.tsx @@ -11,6 +11,7 @@ import { import React from 'react'; import { ReactComponent as TrashIcon } from '../assets/svgs/trash.svg'; import { ReactComponent as PlusIcon } from '../assets/svgs/plus.svg'; +import { useTranslation, Trans } from '@fedimint/utils'; interface Props { metaFields: [string, string][]; @@ -21,6 +22,7 @@ export const MetaFieldFormControl: React.FC = ({ metaFields, onChangeMetaFields, }) => { + const { t } = useTranslation(); const theme = useTheme(); const derivedMetaKeys = ['federation_name']; @@ -43,23 +45,26 @@ export const MetaFieldFormControl: React.FC = ({ - Additional configuration sent to fedimint clients. See{' '} - - documentation - {' '} - for more information. + + ), + }} + /> {metaFields.map(([key, value], idx) => { const isDerived = derivedMetaKeys.includes(key); return ( @@ -67,7 +72,7 @@ export const MetaFieldFormControl: React.FC = ({ } /> @@ -83,7 +88,7 @@ export const MetaFieldFormControl: React.FC = ({ width={'42px'} height={'42px'} fontSize={12} - aria-label='Remove' + aria-label={t('common.remove')} colorScheme='red' color={theme.colors.gray[300]} _hover={{ color: theme.colors.red[500] }} @@ -99,7 +104,7 @@ export const MetaFieldFormControl: React.FC = ({ variant='outline' onClick={handleAddMetaField} > - Add another + {t('set-config.meta-fields-add-another')} diff --git a/apps/guardian-ui/src/components/SetConfiguration.tsx b/apps/guardian-ui/src/components/SetConfiguration.tsx index 8cf146f92..d9d1355d3 100644 --- a/apps/guardian-ui/src/components/SetConfiguration.tsx +++ b/apps/guardian-ui/src/components/SetConfiguration.tsx @@ -302,7 +302,10 @@ export const SetConfiguration: React.FC = ({ next }: Props) => { {isHost && ( - + documentation or more information.", + "meta-fields-key": "Meta key", + "meta-fields-value": "Value", + "meta-fields-add-another": "Add another" }, "setup": { "progress": { diff --git a/packages/utils/src/i18n.tsx b/packages/utils/src/i18n.tsx index e4f63803a..3d56df08f 100644 --- a/packages/utils/src/i18n.tsx +++ b/packages/utils/src/i18n.tsx @@ -1,7 +1,7 @@ import i18n from 'i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import { initReactI18next } from 'react-i18next'; -export { useTranslation } from 'react-i18next'; +export { useTranslation, Trans } from 'react-i18next'; type Language = { key: string; description: string; translation: object };