DRAFT: I18n

.gitignore

@@ -40,4 +40,4 @@ yarn-error.log*
 *.tsbuildinfo
 
 # compiled locales
-# **/locale/*/*.js
+**/locale/*/*.js

app/.linguirc

@@ -1,18 +1,23 @@
 {
-    "locales": [
-        "en",
-        "fr"
-    ],
-    "sourceLocale": "en",
-    "catalogs": [
-        {
-            "path": "<rootDir>/locale/{locale}/messages",
-            "include": [
-                "<rootDir>/"
-            ],
-            "exclude": [
-                "**/node_modules/**"
-            ]
-        }
-    ]
-}
+  "locales": [
+    "en",
+    "fr",
+    "pseudo"
+  ],
+  "sourceLocale": "en",
+  "fallbackLocales": {
+    "default": "en"
+  },
+  "pseudoLocale": "pseudo",
+  "catalogs": [
+    {
+      "path": "<rootDir>/locale/{locale}/messages",
+      "include": [
+        "<rootDir>/"
+      ],
+      "exclude": [
+        "**/node_modules/**"
+      ]
+    }
+  ]
+}

app/.prettierignore

@@ -4,4 +4,7 @@
 # production
 node_modules/
 out/
-build/
+build/
+
+# translation files
+locale/

app/actions/app.ts

@@ -74,3 +74,12 @@ export const loadAppDetails = (params: {
     }
   };
 };
+export const setLocale = (locale: string): Thunk => {
+  return (dispatch) => {
+    dispatch(
+      setAppState({
+        locale,
+      })
+    );
+  };
+};

app/components/views/Bond/AdvancedSettings/index.tsx

@@ -1,6 +1,10 @@
 import React, { ChangeEventHandler, FC } from "react";
-import t from "@klimadao/lib/theme/typography.module.css";
-import styles from "./index.module.css";
+
+// Copied from Stake view despite T/t
+import T from "@klimadao/lib/theme/typography.module.css";
+import styles from "components/views/Stake/index.module.css";
+import { Trans, t, defineMessage } from "@lingui/macro";
+import { i18n } from "@lingui/core";
 
 interface Props {
   slippage: number;
@@ -13,11 +17,13 @@ export const AdvancedSettings: FC<Props> = (props) => {
   return (
     <div className={styles.container}>
       <form>
-        <h5 className={t.subtitle1}>Einstein–Rosen Bridge</h5>
-        <p className={t.caption}>
-          Use this bridge through space-time to direct the transaction to a
-          different recipient address. (default: your currently connected
-          address).
+        <h5 className={T.subtitle1}>Einstein–Rosen Bridge</h5>
+        <p className={T.caption}>
+          <Trans id="bond.esbridge">
+            Use this bridge through space-time to direct the transaction to a
+            different recipient address. (default: your currently connected
+            address).
+          </Trans>
         </p>
         <input
           value={props.recipientAddress}
@@ -28,10 +34,14 @@ export const AdvancedSettings: FC<Props> = (props) => {
         />
       </form>
       <form>
-        <h5 className={t.subtitle1}>Slippage Tolerance</h5>
+        <h5 className={T.subtitle1}>
+          <Trans id="bond.slippage_tolerance">Slippage Tolerance</Trans>
+        </h5>
         <p>
-          Transaction may revert if price changes by more than desired slippage
-          percentage.
+          <Trans id="bond.revert">
+            Transaction may revert if price changes by more than desired
+            slippage percentage.
+          </Trans>
         </p>
         <div className={styles.slippageInput}>
           <input
@@ -42,7 +52,7 @@ export const AdvancedSettings: FC<Props> = (props) => {
             max="100"
             min="1"
           />
-          <div className={t.body1}>%</div>
+          <div className={T.body1}>%</div>
         </div>
       </form>
     </div>