Translation framework (#43)

* update package-lock files

* update gitignores

* i18n minimal

* Fixed newline add end of file in config files

* Trying to add a postinstall script to compile translations so the application deploys properly on Vercel

* Nicer localization menu

* Translated Home

* Save selected language in LocalStorage

* Translation: Stake page

* Updated translation files

* Optimized package.json dependencies

* Rebased with klima/staging

* Made files pretty.
Updated .prettierignore

* Commiting compiled translation files

* Fixed merge of .prettierignore

* Commited package-lock.json

Co-authored-by: Atmosfearful <atmosfearful@protonmail.com>
Co-authored-by: Bruno Ilponse <bruno.ilponse@gmail.com>
Co-authored-by: bilponse <bilponse@localhost.localdomain>

.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,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

@@ -25,6 +25,10 @@ import { InvalidNetworkModal } from "components/InvalidNetworkModal";
 import { InvalidRPCModal } from "components/InvalidRPCModal";
 import { CheckURLBanner } from "components/CheckURLBanner";
 
+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 & {
@@ -131,6 +135,7 @@ 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
@@ -270,7 +275,8 @@ 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>
@@ -281,36 +287,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
@@ -340,28 +346,60 @@ 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}
@@ -446,10 +484,18 @@ 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>