feat(multi-language-support): added i18n

packages/interface/package.json

@@ -20,14 +20,16 @@
     "@hatsprotocol/sdk-v1-core": "^0.10.0",
     "@hookform/resolvers": "^3.3.4",
     "@nivo/line": "^0.84.0",
+    "@openzeppelin/merkle-tree": "^1.0.7",
     "@pcd/eddsa-pcd": "^0.6.5",
     "@pcd/pcd-types": "^0.11.4",
     "@pcd/util": "^0.5.4",
     "@pcd/zk-eddsa-event-ticket-pcd": "^0.6.6",
     "@pcd/zuauth": "^1.4.5",
-    "@openzeppelin/merkle-tree": "^1.0.7",
+    "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
     "@rainbow-me/rainbowkit": "^2.0.1",
     "@semaphore-protocol/core": "4.0.3",
     "@semaphore-protocol/data": "4.0.3",
@@ -43,6 +45,9 @@
     "dotenv": "^16.4.1",
     "ethers": "^6.13.1",
     "graphql-request": "^6.1.0",
+    "i18next": "^23.15.1",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.6.1",
     "js-sha256": "^0.11.0",
     "lowdb": "^1.0.0",
     "lucide-react": "^0.316.0",
@@ -56,6 +61,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.3",
+    "react-i18next": "^15.0.2",
     "react-icons": "^5.0.1",
     "react-markdown": "^9.0.1",
     "react-number-format": "^5.3.1",

packages/interface/src/components/EligibilityDialog.tsx

@@ -5,6 +5,7 @@ import { zuAuthPopup } from "@pcd/zuauth";
 import { GatekeeperTrait, getZupassGatekeeperData } from "maci-cli/sdk";
 import { useRouter } from "next/router";
 import { useState, useCallback, useEffect } from "react";
+import { useTranslation } from 'react-i18next';
 import { toast } from "sonner";
 import { useAccount, useDisconnect } from "wagmi";
 
@@ -34,6 +35,7 @@ export const EligibilityDialog = (): JSX.Element | null => {
     storeZupassProof,
   } = useMaci();
   const router = useRouter();
+  const { t } = useTranslation();
 
   const appState = useAppState();
 
@@ -205,7 +207,7 @@ export const EligibilityDialog = (): JSX.Element | null => {
         description="The result is under tallying, please come back to check the result later."
         isOpen={openDialog}
         size="sm"
-        title="The result is under tallying"
+        title={t("tallying")}
         onOpenChange={handleCloseDialog}
       />
     );

packages/interface/src/components/Header.tsx

@@ -12,6 +12,7 @@ import { EAppState } from "~/utils/types";
 
 import { ConnectButton } from "./ConnectButton";
 import { IconButton } from "./ui/Button";
+import { LanguageButton } from "./LanguageButton";
 import { Logo } from "./ui/Logo";
 
 interface INavLinkProps extends ComponentPropsWithRef<typeof Link> {
@@ -100,9 +101,11 @@ const Header = ({ navLinks }: IHeaderProps) => {
           })}
         </div>
 
+
         <div className="flex-1 md:ml-8" />
 
         <div className="ml-4 flex items-center gap-4 md:ml-8 xl:ml-32">
+          <LanguageButton />
           <IconButton
             className="text-gray-600"
             icon={theme === "light" ? SunIcon : MoonIcon}

packages/interface/src/components/LanguageButton.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import {
+    CheckIcon,
+    ChevronRightIcon,
+  } from '@radix-ui/react-icons';
+import { useTranslation } from "react-i18next";
+import { Globe } from "lucide-react";
+import { IconButton } from './ui/Button';
+import { useRouter } from "next/navigation";
+
+
+export const LanguageButton = () => {
+  const { i18n } = useTranslation();
+  const [language, setLanguage] = React.useState(i18n.language);
+  const router = useRouter();
+
+  const onChangeLanguage = (value: string) => {
+    setLanguage(value);
+    i18n.changeLanguage(value);
+    router.refresh();
+  }
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <IconButton className="text-gray-600" icon={Globe} variant="ghost">
+        {language.toUpperCase()}
+        </IconButton>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="DropdownMenuContent" sideOffset={25}>
+          <DropdownMenu.RadioGroup value={language} onValueChange={onChangeLanguage}>
+            <DropdownMenu.RadioItem className="DropdownMenuRadioItem" value="en">
+              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
+              <CheckIcon />
+              </DropdownMenu.ItemIndicator>
+              🇺🇸 English
+            </DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem className="DropdownMenuRadioItem" value="es">
+              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
+              <CheckIcon />
+              </DropdownMenu.ItemIndicator>
+              🇪🇸 Español
+            </DropdownMenu.RadioItem>
+          </DropdownMenu.RadioGroup>
+
+          <DropdownMenu.Arrow className="DropdownMenuArrow" />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

packages/interface/src/components/ui/Navigation.tsx

@@ -1,19 +1,23 @@
 import Link from "next/link";
+import { useTranslation } from "react-i18next";
 
 interface INavigationProps {
   projectName: string;
 }
 
-export const Navigation = ({ projectName }: INavigationProps): JSX.Element => (
-  <div className="flex gap-2 text-sm uppercase text-gray-400">
-    <span>
-      <Link href="/projects">Projects</Link>
-    </span>
+export const Navigation = ({ projectName }: INavigationProps): JSX.Element => {
+  const { t } = useTranslation();
+  return(
+    <div className="flex gap-2 text-sm uppercase text-gray-400">
+        <span>
+        <Link href="/projects">{t("projects")}</Link>
+        </span>
 
-    <span>{">"}</span>
+        <span>{">"}</span>
 
-    <span className="text-blue-400">
-      <b>{projectName}</b>
-    </span>
-  </div>
-);
+        <span className="text-blue-400">
+        <b>{projectName}</b>
+        </span>
+    </div>
+  );
+}

packages/interface/src/layouts/DefaultLayout.tsx

@@ -1,6 +1,7 @@
 import { GatekeeperTrait } from "maci-cli/sdk";
 import { type ReactNode, type PropsWithChildren, useMemo } from "react";
 import { useAccount } from "wagmi";
+import { useTranslation } from "react-i18next";
 
 import Header from "~/components/Header";
 import { Info } from "~/components/Info";
@@ -26,33 +27,34 @@ export const Layout = ({ children = null, ...props }: ILayoutProps): JSX.Element
   const appState = useAppState();
   const { ballot } = useBallot();
   const { isRegistered, gatekeeperTrait } = useMaci();
+  const { t } = useTranslation();
 
   const navLinks = useMemo(() => {
     const links = [
       {
         href: "/projects",
-        children: "Projects",
+        children: t("links.projects"),
       },
     ];
 
     if (appState === EAppState.VOTING && isRegistered) {
       links.push({
         href: "/ballot",
-        children: "My Ballot",
+        children: t("links.ballot"),
       });
     }
 
     if ((appState === EAppState.TALLYING || appState === EAppState.RESULTS) && ballot.published) {
       links.push({
         href: "/ballot/confirmation",
-        children: "Submitted Ballot",
+        children: t("links.ballot_submitted"),
       });
     }
 
     if (appState === EAppState.RESULTS) {
       links.push({
         href: "/stats",
-        children: "Stats",
+        children: t("links.stats"),
       });
     }
 
@@ -61,7 +63,7 @@ export const Layout = ({ children = null, ...props }: ILayoutProps): JSX.Element
         ...[
           {
             href: "/applications",
-            children: "Applications",
+            children: t("links.applications"),
           },
         ],
       );
@@ -72,7 +74,7 @@ export const Layout = ({ children = null, ...props }: ILayoutProps): JSX.Element
         ...[
           {
             href: "/voters",
-            children: "Voters",
+            children: t("links.voters"),
           },
         ],
       );
@@ -93,6 +95,7 @@ export const LayoutWithSidebar = ({ ...props }: ILayoutProps): JSX.Element => {
   const { address } = useAccount();
   const { ballot } = useBallot();
   const appState = useAppState();
+  const { t } = useTranslation();
 
   const { showInfo, showBallot, showSubmitButton } = props;
 
@@ -114,7 +117,7 @@ export const LayoutWithSidebar = ({ ...props }: ILayoutProps): JSX.Element => {
 
               <Notice
                 italic
-                content="This is not a final submission, you can edit your ballot and resubmit it anytime during the voting period."
+                content={t("links.showSubmitBallot")}
               />
             </div>
           )}

packages/interface/src/locales/en/translations.json

@@ -0,0 +1,13 @@
+{
+    "links":{
+        "projects": "Projects",
+        "ballot": "My Ballot",
+        "ballot_submitted": "Submitted Ballot",
+        "stats": "Stats",
+        "applications": "Applications",
+        "voters": "Voters",
+        "showSubmitBallot": "This is not a final submission, you can edit your ballot and resubmit it anytime during the voting period."
+
+    },
+    "tallying": "The result is under tallying"
+}

packages/interface/src/locales/es/translations.json

@@ -0,0 +1,12 @@
+{
+    "links": {
+        "projects": "Proyectos",
+        "ballot": "Mi Boleta",
+        "ballot_submitted": "Boleta Enviada",
+        "stats": "Estadísticas",
+        "applications": "Aplicaciones",
+        "voters": "Votantes",
+        "showSubmitBallot": "Esto no es una presentación final, puedes editar tu boleta y enviarla nuevamente en cualquier momento durante el período de votación."
+    },
+    "tallying": "El resultado está siendo contabilizado"
+}

packages/interface/src/pages/_app.tsx

@@ -3,9 +3,11 @@ import { Inter } from "next/font/google";
 
 import { Providers } from "~/providers";
 import "~/styles/globals.css";
+import "~/styles/languageButton.css";
 import { api } from "~/utils/api";
 
 import type { AppProps } from "next/app";
+import './i18n';
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 

packages/interface/src/pages/i18n.ts

@@ -0,0 +1,27 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import HttpApi from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import enTranslation from "../locales/en/translations.json";
+import esTranslation from "../locales/es/translations.json";
+
+const resources = {
+    en: { translation: enTranslation },
+    es: { translation: esTranslation },
+  };
+
+i18n
+  .use(HttpApi) // Enables loading translation files over HTTP.
+  .use(LanguageDetector) // Detects user language.
+  .use(initReactI18next) // Initializes the react-i18next plugin.
+  .init({
+    resources,
+    supportedLngs: ["en", "es"], // Languages we're supporting.
+    fallbackLng: "en", // Fallback language if user's language isn't supported.
+    detection: {
+      order: ["cookie", "htmlTag", "localStorage", "path", "subdomain"], // Order of language detection.
+      caches: ["cookie"], // Cache the detected language in cookies.
+    }
+  });
+
+export default i18n;