Translation framework

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+/app/package-lock.json
+/site/package-lock.json
+
 # dependencies
 /.pnp
 .pnp.js
@@ -35,3 +38,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# compiled locales
+**/locale/*/*.js

app/.babelrc

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

app/.linguirc

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

app/components/views/Home/index.module.css

@@ -123,6 +123,27 @@ TEMP
   opacity: 1;
   border: 2px dashed var(--secondary) !important;
 }
+.localeSelectionButton {
+  composes: textButton from "@klimadao/lib/theme/common.module.css";
+  justify-self: start;
+}
+.localeSelectionDropdown {
+  display: inline-block;
+}
+.localeSelectionItem {
+  composes: textButton from "@klimadao/lib/theme/common.module.css";
+  display: inline-block;
+}
+
+.userMenu {
+  justify-self: end;
+  text-align: right;
+  display: grid;
+  grid-gap: 0.8rem;
+  gap: 0.8rem;
+  height:0;
+  overflow:visible;
+}
 
 .main {
   justify-self: center;
@@ -221,6 +242,9 @@ TEMP
   .disconnectWalletButton {
     justify-self: end;
   }
+  .localeSelectionButton {
+    justify-self: end;
+  }
   .nav {
     display: grid;
     gap: 0.8rem;

app/components/views/Home/index.tsx

@@ -24,6 +24,10 @@ import { Wrap } from "components/views/Wrap";
 import { InvalidNetworkModal } from "components/InvalidNetworkModal";
 import { InvalidRPCModal } from "components/InvalidRPCModal";
 
+import { Trans } from "@lingui/macro";
+import { locales, activate } from "lib/i18n";
+import { i18n } from "@lingui/core";
+
 import styles from "./index.module.css";
 
 type EIP1139Provider = ethers.providers.ExternalProvider & {
@@ -129,6 +133,8 @@ export const Home: FC = () => {
   const { pathname } = useLocation();
   const [path, setPath] = useState("");
   const balances = useSelector(selectBalances);
+  const [ localesMenuVisible, setLocalesMenuVisible ] = useState(false);
+
 
   /**
    * This is a hack to force re-render of nav component
@@ -268,7 +274,7 @@ export const Home: FC = () => {
     <nav className={styles.nav}>
       {chainId === 80001 && (
         <p className={styles.testnet_warning}>
-          ⚠️You are connected to <strong>testnet</strong>
+          ⚠️<Trans id="header.connectedto">You are connected to </Trans><strong>testnet</strong>
           <br />
           <em>{`"where everything is made up and the points don't matter."`}</em>
         </p>
@@ -279,36 +285,36 @@ export const Home: FC = () => {
           to="/redeem"
           data-active={path === "/redeem"}
         >
-          REDEEM
+          <Trans id="menu.redeem">REDEEM</Trans>
         </Link>
       )}
       <Link
         className={styles.textButton}
         to="/stake"
         data-active={path === "/stake"}
       >
-        STAKE
+        <Trans id="menu.stake">STAKE</Trans>
       </Link>
       <Link
         className={styles.textButton}
         to="/wrap"
         data-active={path === "/wrap"}
       >
-        WRAP
+        <Trans id="menu.wrap">WRAP</Trans>
       </Link>
       <Link
         className={styles.textButton}
         to="/bonds"
         data-active={path.includes("/bonds")}
       >
-        BOND
+        <Trans id="menu.bond">BOND</Trans>
       </Link>
       <Link
         className={styles.textButton}
         to="/info"
         data-active={path === "/info"}
       >
-        INFO
+        <Trans id="menu.info">INFO</Trans>
       </Link>
       {showPklimaButton && (
         <Link
@@ -338,28 +344,50 @@ export const Home: FC = () => {
                 </a>
               </div>
               <p className={t.h6} style={{ maxWidth: "46rem" }}>
-                Welcome to the Klima dApp. Bond carbon to buy KLIMA. Stake KLIMA
-                to earn interest.
+                <Trans id="header.welcome">Welcome to the Klima dApp. Bond carbon to buy KLIMA. Stake KLIMA
+                to earn interest.</Trans>
               </p>
             </div>
-            {!isConnected && (
-              <button
-                type="button"
-                className={styles.connectWalletButton}
-                onClick={loadWeb3Modal}
-              >
-                CONNECT WALLET
-              </button>
-            )}
-            {isConnected && (
-              <button
-                type="button"
-                className={styles.disconnectWalletButton}
-                onClick={disconnect}
-              >
-                DISCONNECT WALLET
-              </button>
-            )}
+            <div>
+              <div className={styles.userMenu}>
+                {!isConnected && (
+                  <button
+                    type="button"
+                    className={styles.connectWalletButton}
+                    onClick={loadWeb3Modal}
+                  >
+                    <Trans id="usermenu.connect_wallet">CONNECT WALLET</Trans>
+                  </button>
+                )}
+                {isConnected && (
+                  <button
+                    type="button"
+                    className={styles.disconnectWalletButton}
+                    onClick={loadWeb3Modal}
+                  >
+                    <Trans id="usermenu.disconnect_wallet">DISCONNECT WALLET</Trans>
+                  </button>
+                )}
+                <button
+                    type="button"
+                    className={styles.localeSelectionButton}
+                    onClick={() => { setLocalesMenuVisible(!localesMenuVisible) }}
+                  >
+                    <Trans id="usermenu.changelanguage">Language</Trans>
+                </button>
+
+                {Object.keys(locales).map((locale, key) => (
+                  <div key={key} style={{ display: localesMenuVisible ? "block" : "none" }}>
+                    <button 
+                      data-active={i18n.locale == locale ? "true" : "false"}
+                      className={styles.localeSelectionItem} 
+                      onClick={() => activate(locale)}>
+                      { locale }
+                    </button>
+                  </div>
+                  ))}
+              </div>
+            </div>
           </header>
           <main className={styles.main}>
             {nav}
@@ -441,10 +469,10 @@ export const Home: FC = () => {
               <img src="klima-logo.png" alt="" />
             </a>
             <nav className={styles.footer_content_nav}>
-              <a href={urls.home}>home</a>
-              <a href={urls.gitbook}>docs</a>
-              <a href={urls.blog}>blog</a>
-              <a href={urls.discordInvite}>community</a>
+              <a href={urls.home}><Trans id="footer.home">home</Trans></a>
+              <a href={urls.gitbook}><Trans id="footer.docs">docs</Trans></a>
+              <a href={urls.blog}><Trans id="footer.blog">blog</Trans></a>
+              <a href={urls.discordInvite}><Trans id="footer.community">community</Trans></a>
             </nav>
           </div>
         </footer>

app/lib/i18n.ts

@@ -0,0 +1,44 @@
+import { i18n } from "@lingui/core";
+import { en, fr } from "make-plural/plurals";
+
+interface ILocales {
+    [locale: string]: {
+        plurals: (n: number | string, ord?: boolean) => "zero" | "one" | "two" | "few" | "many" | "other";
+    }
+}
+const locales: ILocales = {
+    "en": { plurals: en},
+    "fr": { plurals: fr}
+};
+
+for (const key in locales) {
+    const locale = locales[key];
+    i18n.loadLocaleData(key, { plurals: locale.plurals });
+    //i18n.loadLocaleData("fr", { plurals: fr });
+}
+async function load(locale: string) {
+    const { messages } = await import(`../locale/${locale}/messages.js`);
+    i18n.load(locale, messages);
+    i18n.activate(locale);
+}
+
+/**
+ * Load messages for requested locale and activate it.
+ * This function isn't part of the LinguiJS library because there're
+ * many ways how to load messages  from REST API, from file, from cache, etc.
+ */
+ async function activate(locale: string) {
+    load(locale);
+    window.localStorage.setItem("locale", locale);
+}
+
+function init() {
+    var locale = window.localStorage.getItem("locale") as string;
+    if (!Object.keys(locales).includes(locale)) locale = "en";
+    load(locale);
+  }
+
+export {locales, activate, init};
+
+
+

app/locale/en/messages.po

@@ -0,0 +1,70 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2021-12-10 22:51+0100\n"
+"Mime-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: components/views/Home/index.tsx:325
+msgid "footer.blog"
+msgstr "blog"
+
+#: components/views/Home/index.tsx:326
+msgid "footer.community"
+msgstr "community"
+
+#: components/views/Home/index.tsx:324
+msgid "footer.docs"
+msgstr "docs"
+
+#: components/views/Home/index.tsx:323
+msgid "footer.home"
+msgstr "home"
+
+#: components/views/Home/index.tsx:235
+msgid "header.connectedto"
+msgstr "You are connected to"
+
+#: components/views/Home/index.tsx:273
+msgid "header.welcome"
+msgstr "Welcome to the Klima dApp. Bond carbon to buy KLIMA. Stake KLIMA to earn interest."
+
+#: components/views/Home/index.tsx:249
+msgid "menu.bond"
+msgstr "BOND"
+
+#: components/views/Home/index.tsx:252
+msgid "menu.info"
+msgstr "INFO"
+
+#: components/views/Home/index.tsx:240
+msgid "menu.redeem"
+msgstr "REDEEM"
+
+#: components/views/Home/index.tsx:243
+msgid "menu.stake"
+msgstr "STAKE"
+
+#: components/views/Home/index.tsx:246
+msgid "menu.wrap"
+msgstr "WRAP"
+
+#: components/views/Home/index.tsx:286
+msgid "usermenu.changelanguage"
+msgstr "Language"
+
+#: components/views/Home/index.tsx:280
+msgid "usermenu.connect_wallet"
+msgstr "CONNECT WALLET"
+
+#: components/views/Home/index.tsx:283
+msgid "usermenu.disconnect_wallet"
+msgstr "DISCONNECT WALLET"