chore(guardian-ui): i18nify meta fields

fedimint · Oct 31, 2023 · 2f5f500 · 2f5f500
1 parent cf341b8
commit 2f5f500
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 20 deletions.
diff --git 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<Props> = ({ 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
@@ -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<Props> = ({
   metaFields,
   onChangeMetaFields,
 }) => {
+  const { t } = useTranslation();
   const theme = useTheme();
 
   const derivedMetaKeys = ['federation_name'];
@@ -43,31 +45,34 @@ export const MetaFieldFormControl: React.FC<Props> = ({
     <FormControl>
       <Flex direction='column' gap={3}>
         <FormHelperText mt={0} mb={2}>
-          Additional configuration sent to fedimint clients. See{' '}
-          <Link
-            href='https://github.com/fedimint/fedimint/blob/master/docs/meta_fields/README.md'
-            target='_blank'
-            rel='noopener noreferrer'
-            color={theme.colors.blue[600]}
-          >
-            documentation
-          </Link>{' '}
-          for more information.
+          <Trans
+            i18nKey='set-config.meta-fields-description'
+            components={{
+              docs: (
+                <Link
+                  href='https://github.com/fedimint/fedimint/blob/master/docs/meta_fields/README.md'
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  color={theme.colors.blue[600]}
+                />
+              ),
+            }}
+          />
         </FormHelperText>
         {metaFields.map(([key, value], idx) => {
           const isDerived = derivedMetaKeys.includes(key);
           return (
             <Flex gap={3} key={idx}>
               <Input
-                placeholder='Key'
+                placeholder={t('set-config.meta-fields-key')}
                 value={key}
                 disabled={isDerived}
                 onChange={(ev) =>
                   handleChangeMetaField(ev.target.value, value, idx)
                 }
               />
               <Input
-                placeholder={isDerived ? '' : 'Value'}
+                placeholder={isDerived ? '' : t('set-config.meta-fields-value')}
                 value={value}
                 disabled={isDerived}
                 onChange={(ev) =>
@@ -83,7 +88,7 @@ export const MetaFieldFormControl: React.FC<Props> = ({
                   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<Props> = ({
           variant='outline'
           onClick={handleAddMetaField}
         >
-          Add another
+          {t('set-config.meta-fields-add-another')}
         </Button>
       </Flex>
     </FormControl>

diff --git 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<Props> = ({ next }: Props) => {
         </FormGroup>
         {isHost && (
           <FormGroup maxWidth={470}>
-            <FormGroupHeading icon={ModulesIcon} title='Meta fields' />
+            <FormGroupHeading
+              icon={ModulesIcon}
+              title={t('set-config.meta-fields')}
+            />
             <MetaFieldFormControl
               metaFields={metaFields}
               onChangeMetaFields={setMetaFields}

diff --git a/apps/guardian-ui/src/languages/en.json b/apps/guardian-ui/src/languages/en.json
@@ -4,7 +4,8 @@
     "next": "Next",
     "back": "Back",
     "error": "Something went wrong.",
-    "unknown": "Unknown"
+    "unknown": "Unknown",
+    "remove": "Remove"
   },
   "connect-guardians": {
     "invite-guardians": "Invite Followers",
@@ -14,7 +15,8 @@
     "pending": "Pending",
     "not-joined": "Not joined",
     "table-title": "Federation Guardians",
-    "table-description": "Guardians will be confirmed here once they confirm Federation settings."
+    "table-description": "Guardians will be confirmed here once they confirm Federation settings.",
+    "meta-field-key": "Meta field - {{key}}"
   },
   "federation-dashboard": {
     "invite-members": "Invite members",
@@ -93,7 +95,12 @@
     "select-network": "Select a network",
     "set-rpc-help": "Locally configured Bitcoin RPC address",
     "bitcoin-rpc": "Bitcoin RPC",
-    "error-valid-number": "Please input a number of 1 or more."
+    "error-valid-number": "Please input a number of 1 or more.",
+    "meta-fields": "Meta fields",
+    "meta-fields-description": "Additional configuration sent to fedimint clients. See <docs>documentation</docs> 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
@@ -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 };