Merge i18n system to staging

.gitignore

@@ -38,3 +38,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# compiled locales
+**/locale/*/*.js

.prettierignore

@@ -4,4 +4,7 @@
 # production
 node_modules/
 out/
-build/
+build/
+
+# translation files
+**/locale/*/messages.js

app/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-env": {},
+        "transform-runtime": {},
+        "styled-jsx": {},
+        "class-properties": {}
+      }
+    ]
+  ],
+  "plugins": ["macros"]
+}

app/.linguirc

@@ -0,0 +1,23 @@
+{
+  "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/ChangeLanguageButton/index.tsx

@@ -0,0 +1,70 @@
+import React, { FC, useState } from "react";
+import { useSelector } from "react-redux";
+import Tippy from "@tippyjs/react";
+import { t } from "@lingui/macro";
+import Language from "@mui/icons-material/Language";
+
+import { activate, locales } from "lib/i18n";
+import { selectAppState } from "state/selectors";
+import { useAppDispatch } from "state";
+import { setAppState } from "state/app";
+
+import * as styles from "./styles";
+
+/**
+ * Temporary demo component until we have one from design
+ */
+export const ChangeLanguageButton: FC = () => {
+  const [showMenu, setShowMenu] = useState(false);
+  const { locale } = useSelector(selectAppState);
+  const dispatch = useAppDispatch();
+
+  const selectLocale = async (locale: string) => {
+    activate(locale);
+    dispatch(setAppState({ locale }));
+  };
+
+  const handleClickMenuItem = (localeKey: string) => () => {
+    selectLocale(localeKey);
+    setShowMenu(false);
+  };
+
+  const labels = {
+    en: "English",
+    fr: "Français",
+    pseudo: "Pseudo",
+  };
+
+  const content = (
+    <div className={styles.menuItemContainer}>
+      {Object.keys(locales).map((localeKey) => (
+        <button
+          key={localeKey}
+          data-active={locale == localeKey ? "true" : "false"}
+          onClick={handleClickMenuItem(localeKey)}
+          className={styles.menuItem}
+        >
+          {labels[localeKey as keyof typeof labels]}
+        </button>
+      ))}
+    </div>
+  );
+
+  return (
+    <Tippy
+      content={content}
+      placement="bottom-end"
+      visible={showMenu}
+      interactive
+      className={styles.tooltip}
+    >
+      <button
+        onClick={() => setShowMenu((s) => !s)}
+        className={styles.changeLanguageButton}
+        aria-label={t`Change language`}
+      >
+        <Language fontSize="large" />
+      </button>
+    </Tippy>
+  );
+};

app/components/ChangeLanguageButton/styles.ts

@@ -0,0 +1,58 @@
+import { css } from "@emotion/css";
+import breakpoints from "@klimadao/lib/theme/breakpoints";
+import typography from "@klimadao/lib/theme/typography";
+
+export const changeLanguageButton = css`
+  padding: 0.8rem;
+  position: absolute;
+  right: -0.4rem;
+  top: 6.4rem;
+
+  ${breakpoints.small} {
+    top: 3.2rem;
+    right: -0.2rem;
+    display: flex;
+    min-height: 4rem;
+    align-items: center;
+    border: 2px solid var(--primary);
+    background-color: var(--surface-02);
+    padding: 0.8rem;
+    border-radius: 0.4rem;
+    align-items: center;
+    align-content: center;
+  }
+
+  ${breakpoints.medium} {
+    top: 9.8rem;
+  }
+
+  ${breakpoints.medium} {
+    top: 10.8rem;
+  }
+`;
+
+export const tooltip = css`
+  ${typography.caption};
+  text-align: center;
+  border: 1px solid var(--primary-variant);
+  background: var(--surface-08);
+  border-radius: 0.4rem;
+  padding: 1.6rem;
+  @media (max-width: 32.5rem) {
+    &.tippy-box {
+      max-width: 24rem !important; // fix x-overflow bug on small mobile
+    }
+  }
+`;
+
+export const menuItem = css`
+  ${typography.button};
+  &:hover {
+    color: var(--primary-variant);
+  }
+`;
+
+export const menuItemContainer = css`
+  display: grid;
+  gap: 1.6rem;
+`;

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

@@ -1,6 +1,9 @@
 import React, { ChangeEventHandler, FC } from "react";
-import t from "@klimadao/lib/theme/typography.module.css";
+
+// Copied from Stake view despite T/t
+import T from "@klimadao/lib/theme/typography.module.css";
 import styles from "./index.module.css";
+import { Trans } from "@lingui/macro";
 
 interface Props {
   slippage: number;
@@ -13,11 +16,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 +33,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 +51,7 @@ export const AdvancedSettings: FC<Props> = (props) => {
             max="100"
             min="1"
           />
-          <div className={t.body1}>%</div>
+          <div className={T.body1}>%</div>
         </div>
       </form>
     </div>