feat(web): google-translate

web/global.d.ts

@@ -10,11 +10,25 @@ declare global {
     const path: string;
     export default path;
   }
+  interface Window {
+    google: {
+      translate: {
+        TranslateElement: new (
+          config: {
+            pageLanguage: string;
+            includedLanguages: string;
+          },
+          elementId: string
+        ) => void;
+      };
+    };
+    googleTranslateElementInit: () => void;
+  }
 }
 
 declare module "styled-components" {
   type Theme = typeof lightTheme;
-  //eslint-disable-next-line @typescript-eslint/no-empty-interface
+
   export interface DefaultTheme extends Theme {}
 }
 

web/src/app.tsx

@@ -22,6 +22,7 @@ import Web3Provider from "context/Web3Provider";
 import Loader from "components/Loader";
 import Layout from "layout/index";
 
+import TranslateProvider from "./context/TranslateProvider";
 import { SentryRoutes } from "./utils/sentry";
 
 const App: React.FC = () => {
@@ -33,67 +34,69 @@ const App: React.FC = () => {
             <AtlasProvider>
               <IsListProvider>
                 <NewDisputeProvider>
-                  <SentryRoutes>
-                    <Route path="/" element={<Layout />}>
-                      <Route
-                        index
-                        element={
-                          <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                            <Home />
-                          </Suspense>
-                        }
-                      />
-                      <Route
-                        path="cases/*"
-                        element={
-                          <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                            <Cases />
-                          </Suspense>
-                        }
-                      />
-                      <Route
-                        path="courts/*"
-                        element={
-                          <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                            <Courts />
-                          </Suspense>
-                        }
-                      />
-                      <Route
-                        path="dashboard/:page/:order/:filter"
-                        element={
-                          <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                            <Dashboard />
-                          </Suspense>
-                        }
-                      />
-                      <Route
-                        path="resolver/*"
-                        element={
-                          <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                            <DisputeResolver />
-                          </Suspense>
-                        }
-                      />
-                      <Route
-                        path="get-pnk/*"
-                        element={
-                          <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                            <GetPnk />
-                          </Suspense>
-                        }
-                      />
-                      <Route
-                        path="settings/*"
-                        element={
-                          <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                            <Settings />
-                          </Suspense>
-                        }
-                      />
-                      <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
-                    </Route>
-                  </SentryRoutes>
+                  <TranslateProvider>
+                    <SentryRoutes>
+                      <Route path="/" element={<Layout />}>
+                        <Route
+                          index
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <Home />
+                            </Suspense>
+                          }
+                        />
+                        <Route
+                          path="cases/*"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <Cases />
+                            </Suspense>
+                          }
+                        />
+                        <Route
+                          path="courts/*"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <Courts />
+                            </Suspense>
+                          }
+                        />
+                        <Route
+                          path="dashboard/:page/:order/:filter"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <Dashboard />
+                            </Suspense>
+                          }
+                        />
+                        <Route
+                          path="resolver/*"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <DisputeResolver />
+                            </Suspense>
+                          }
+                        />
+                        <Route
+                          path="get-pnk/*"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <GetPnk />
+                            </Suspense>
+                          }
+                        />
+                        <Route
+                          path="settings/*"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <Settings />
+                            </Suspense>
+                          }
+                        />
+                        <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
+                      </Route>
+                    </SentryRoutes>
+                  </TranslateProvider>
                 </NewDisputeProvider>
               </IsListProvider>
             </AtlasProvider>

web/src/components/TranslateDropdown.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { DropdownSelect } from "@kleros/ui-components-library";
+
+import { SupportedLangs, useTranslate } from "context/TranslateProvider";
+
+const Langs: { value: SupportedLangs; text: string }[] = [
+  { text: "English", value: "en" },
+  { text: "Spanish", value: "es" },
+  { text: "Hindi", value: "hi" },
+  { text: "Japanese", value: "ja" },
+  { text: "Chinese", value: "zh" },
+  { text: "Korean", value: "ko" },
+  { text: "French", value: "fr" },
+];
+
+const TranslateDropdown: React.FC = () => {
+  const { setLang } = useTranslate();
+  return (
+    <DropdownSelect
+      smallButton
+      simpleButton
+      items={Langs.map((range) => ({
+        value: range.value,
+        text: range.text,
+      }))}
+      defaultValue={"en"}
+      callback={(val) => {
+        setLang(val as SupportedLangs);
+      }}
+    />
+  );
+};
+
+export default TranslateDropdown;

web/src/context/TranslateProvider.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo } from "react";
+
+import { useLocalStorage } from "hooks/useLocalStorage";
+
+export type SupportedLangs = "en" | "es" | "zh" | "fr" | "hi" | "ko" | "ja";
+
+interface ITranslate {
+  currentLang: SupportedLangs;
+  setLang: (lang: SupportedLangs) => void;
+}
+const TranslateContext = createContext<ITranslate | undefined>(undefined);
+
+export const useTranslate = () => {
+  const context = useContext(TranslateContext);
+  if (!context) {
+    throw new Error("Context Provider not found.");
+  }
+  return context;
+};
+
+export const TranslateProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [currentLang, setCurrentLang] = useLocalStorage<SupportedLangs>("lang", "en");
+
+  useEffect(() => {
+    try {
+      const existingScript = document.querySelector('script[src*="translate.google.com/translate_a/element.js"]');
+      if (!existingScript) {
+        const addScript = document.createElement("script");
+        addScript.setAttribute("src", "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
+        document.body.appendChild(addScript);
+
+        window.googleTranslateElementInit = () => {
+          new window.google.translate.TranslateElement(
+            {
+              pageLanguage: "en",
+              includedLanguages: "en,es,hi,ja,zh,fr,ko",
+            },
+            "google_translate_element"
+          );
+        };
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log("Error injecting google translate script", err);
+    }
+  }, []);
+
+  const setLang = useCallback(
+    (cValue: SupportedLangs) => {
+      setCurrentLang(cValue);
+      document.cookie = "googtrans" + "=" + `/en/${cValue}` + ";" + "Session" + ";path=/";
+      if (window.google?.translate?.TranslateElement) {
+        const select = document.querySelector(".goog-te-combo") as HTMLSelectElement;
+        if (select) {
+          select.value = cValue;
+          select.dispatchEvent(new Event("change"));
+        }
+      }
+    },
+    [setCurrentLang]
+  );
+
+  return (
+    <TranslateContext.Provider value={useMemo(() => ({ currentLang, setLang }), [currentLang, setLang])}>
+      <div id="google_translate_element"></div>
+      {children}
+    </TranslateContext.Provider>
+  );
+};
+
+export default TranslateProvider;

web/src/layout/Header/navbar/Menu/Settings/General.tsx

@@ -7,12 +7,14 @@ import { Button } from "@kleros/ui-components-library";
 
 import { AddressOrName, ChainDisplay, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay";
 import { EnsureChain } from "components/EnsureChain";
+import TranslateDropdown from "components/TranslateDropdown";
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin-top: 12px;
+  align-items: center;
 `;
 
 const StyledChainContainer = styled.div`
@@ -57,6 +59,9 @@ const StyledButton = styled.div`
 
 const EnsureChainContainer = styled.div`
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
   justify-content: center;
   padding: 16px;
 `;
@@ -93,6 +98,7 @@ const General: React.FC = () => {
 
   return (
     <EnsureChainContainer>
+      <TranslateDropdown />
       <EnsureChain>
         <Container>
           {address && (

web/src/styles/global-style.ts

@@ -17,6 +17,7 @@ export const GlobalStyle = createGlobalStyle`
   body {
     font-family: "Open Sans", sans-serif;
     margin: 0px;
+    top:0px !important
   }
 
   html {
@@ -120,4 +121,10 @@ export const GlobalStyle = createGlobalStyle`
   .hiddenCanvasElement{
     display: none;
   }
+
+  //hide-default-google-translate 
+.skiptranslate{
+  display: none;
+  };
+
 `;

web/tsconfig.json

@@ -66,7 +66,8 @@
     "noImplicitAny": false,
     "resolveJsonModule": true,
     "lib": [
-      "ESNext.Array"
+      "ESNext.Array",
+      "DOM"
     ],
     "types": [
       "vite/client",