From 1c20e01f51654f46bb89843cb6b5c4824fd53b9b Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Sat, 30 Nov 2024 19:36:03 +0530 Subject: [PATCH 1/6] feat(web): google-translate --- web/src/app.tsx | 125 +++++++++--------- web/src/components/TranslateDropdown.tsx | 36 +++++ web/src/context/TranslateProvider.tsx | 68 ++++++++++ .../Header/navbar/Menu/Settings/General.tsx | 6 + web/src/styles/global-style.ts | 7 + web/tsconfig.json | 3 +- 6 files changed, 183 insertions(+), 62 deletions(-) create mode 100644 web/src/components/TranslateDropdown.tsx create mode 100644 web/src/context/TranslateProvider.tsx diff --git a/web/src/app.tsx b/web/src/app.tsx index a961e70ca..5a3aa17a2 100644 --- a/web/src/app.tsx +++ b/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 = () => { - - }> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯} /> - - + + + }> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯} /> + + + diff --git a/web/src/components/TranslateDropdown.tsx b/web/src/components/TranslateDropdown.tsx new file mode 100644 index 000000000..a5225aebf --- /dev/null +++ b/web/src/components/TranslateDropdown.tsx @@ -0,0 +1,36 @@ +import React from "react"; + +import { DropdownSelect } from "@kleros/ui-components-library"; + +import { SupportedLangs, useTranslate } from "context/TranslateProvider"; + +const Langs: { value: SupportedLangs; text: string }[] = [ + { text: "en", value: "en" }, + { text: "es", value: "es" }, + { text: "hi", value: "hi" }, + { text: "js", value: "ja" }, + { text: "zh", value: "zh" }, + { text: "ko", value: "ko" }, + { text: "fr", value: "fr" }, +]; + +const TranslateDropdown: React.FC = () => { + const { setLang } = useTranslate(); + return ( + ({ + value: range.value, + text: range.text, + }))} + defaultValue={"en"} + callback={(val) => { + //@ts-expect-error is string + setLang(val); + }} + /> + ); +}; + +export default TranslateDropdown; diff --git a/web/src/context/TranslateProvider.tsx b/web/src/context/TranslateProvider.tsx new file mode 100644 index 000000000..1b646a479 --- /dev/null +++ b/web/src/context/TranslateProvider.tsx @@ -0,0 +1,68 @@ +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(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("lang", "en"); + + useEffect(() => { + try { + // Check if the Google Translate script is already in the document + 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); + + //@ts-expect-error will exist + window.googleTranslateElementInit = () => { + //@ts-expect-error will exist + new window.google.translate.TranslateElement( + { + pageLanguage: "en", + includedLanguages: "en,es,hi,ja,zh,fr,ko", // Include all languages you need here + }, + "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=/"; + window.location.reload(); + }, + [setCurrentLang] + ); + + return ( + ({ currentLang, setLang }), [currentLang, setLang])}> +
+ {children} + + ); +}; + +export default TranslateProvider; diff --git a/web/src/layout/Header/navbar/Menu/Settings/General.tsx b/web/src/layout/Header/navbar/Menu/Settings/General.tsx index 398f6673d..6b75187fb 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/General.tsx +++ b/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 ( + {address && ( diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts index cb5f5caa0..00c68c066 100644 --- a/web/src/styles/global-style.ts +++ b/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; + }; + `; diff --git a/web/tsconfig.json b/web/tsconfig.json index fae4af75b..543ee43c4 100644 --- a/web/tsconfig.json +++ b/web/tsconfig.json @@ -66,7 +66,8 @@ "noImplicitAny": false, "resolveJsonModule": true, "lib": [ - "ESNext.Array" + "ESNext.Array", + "DOM" ], "types": [ "vite/client", From 1d59d83a59092bbc433de16aa23b35de88c8b749 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Sat, 30 Nov 2024 21:57:59 +0530 Subject: [PATCH 2/6] feat(web): instant-translate --- web/global.d.ts | 16 +++++++++++++++- web/src/components/TranslateDropdown.tsx | 17 ++++++++--------- web/src/context/TranslateProvider.tsx | 13 ++++++++----- web/src/layout/Header/navbar/Menu/index.tsx | 2 ++ 4 files changed, 33 insertions(+), 15 deletions(-) diff --git a/web/global.d.ts b/web/global.d.ts index 2fa15462b..3cc0c7de1 100644 --- a/web/global.d.ts +++ b/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 {} } diff --git a/web/src/components/TranslateDropdown.tsx b/web/src/components/TranslateDropdown.tsx index a5225aebf..9ca5a7ab1 100644 --- a/web/src/components/TranslateDropdown.tsx +++ b/web/src/components/TranslateDropdown.tsx @@ -5,13 +5,13 @@ import { DropdownSelect } from "@kleros/ui-components-library"; import { SupportedLangs, useTranslate } from "context/TranslateProvider"; const Langs: { value: SupportedLangs; text: string }[] = [ - { text: "en", value: "en" }, - { text: "es", value: "es" }, - { text: "hi", value: "hi" }, - { text: "js", value: "ja" }, - { text: "zh", value: "zh" }, - { text: "ko", value: "ko" }, - { text: "fr", value: "fr" }, + { 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 = () => { @@ -26,8 +26,7 @@ const TranslateDropdown: React.FC = () => { }))} defaultValue={"en"} callback={(val) => { - //@ts-expect-error is string - setLang(val); + setLang(val as SupportedLangs); }} /> ); diff --git a/web/src/context/TranslateProvider.tsx b/web/src/context/TranslateProvider.tsx index 1b646a479..f5cd8b24c 100644 --- a/web/src/context/TranslateProvider.tsx +++ b/web/src/context/TranslateProvider.tsx @@ -23,20 +23,17 @@ export const TranslateProvider: React.FC<{ children: React.ReactNode }> = ({ chi useEffect(() => { try { - // Check if the Google Translate script is already in the document 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); - //@ts-expect-error will exist window.googleTranslateElementInit = () => { - //@ts-expect-error will exist new window.google.translate.TranslateElement( { pageLanguage: "en", - includedLanguages: "en,es,hi,ja,zh,fr,ko", // Include all languages you need here + includedLanguages: "en,es,hi,ja,zh,fr,ko", }, "google_translate_element" ); @@ -52,7 +49,13 @@ export const TranslateProvider: React.FC<{ children: React.ReactNode }> = ({ chi (cValue: SupportedLangs) => { setCurrentLang(cValue); document.cookie = "googtrans" + "=" + `/en/${cValue}` + ";" + "Session" + ";path=/"; - window.location.reload(); + 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] ); diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx index 93d8a83ab..ab2f0775f 100644 --- a/web/src/layout/Header/navbar/Menu/index.tsx +++ b/web/src/layout/Header/navbar/Menu/index.tsx @@ -12,6 +12,7 @@ import { useToggleTheme } from "hooks/useToggleThemeContext"; import { landscapeStyle } from "styles/landscapeStyle"; import LightButton from "components/LightButton"; +import TranslateDropdown from "components/TranslateDropdown"; import { IHelp, ISettings } from ".."; @@ -90,6 +91,7 @@ const Menu: React.FC = ({ toggleIsHelpOpen, toggleIsSettingsO ))} + ); }; From 246c26abd3232a43043491931c4c016dea010da0 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Sat, 30 Nov 2024 22:01:46 +0530 Subject: [PATCH 3/6] chore: remove-dropwdown-from-menu --- web/src/layout/Header/navbar/Menu/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx index ab2f0775f..93d8a83ab 100644 --- a/web/src/layout/Header/navbar/Menu/index.tsx +++ b/web/src/layout/Header/navbar/Menu/index.tsx @@ -12,7 +12,6 @@ import { useToggleTheme } from "hooks/useToggleThemeContext"; import { landscapeStyle } from "styles/landscapeStyle"; import LightButton from "components/LightButton"; -import TranslateDropdown from "components/TranslateDropdown"; import { IHelp, ISettings } from ".."; @@ -91,7 +90,6 @@ const Menu: React.FC = ({ toggleIsHelpOpen, toggleIsSettingsO ))} - ); }; From e023c06448a69642784b0615357c5576c11d8270 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 2 Dec 2024 17:22:04 +0530 Subject: [PATCH 4/6] chore(web): remove-chinese-language --- web/src/components/TranslateDropdown.tsx | 5 ++--- web/src/context/TranslateProvider.tsx | 8 +++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/web/src/components/TranslateDropdown.tsx b/web/src/components/TranslateDropdown.tsx index 9ca5a7ab1..c23b57308 100644 --- a/web/src/components/TranslateDropdown.tsx +++ b/web/src/components/TranslateDropdown.tsx @@ -9,13 +9,12 @@ const Langs: { value: SupportedLangs; text: string }[] = [ { 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(); + const { currentLang, setLang } = useTranslate(); return ( { value: range.value, text: range.text, }))} - defaultValue={"en"} + defaultValue={currentLang} callback={(val) => { setLang(val as SupportedLangs); }} diff --git a/web/src/context/TranslateProvider.tsx b/web/src/context/TranslateProvider.tsx index f5cd8b24c..280a83db7 100644 --- a/web/src/context/TranslateProvider.tsx +++ b/web/src/context/TranslateProvider.tsx @@ -2,7 +2,7 @@ import React, { createContext, useCallback, useContext, useEffect, useMemo } fro import { useLocalStorage } from "hooks/useLocalStorage"; -export type SupportedLangs = "en" | "es" | "zh" | "fr" | "hi" | "ko" | "ja"; +export type SupportedLangs = "en" | "es" | "fr" | "hi" | "ko" | "ja"; interface ITranslate { currentLang: SupportedLangs; @@ -33,7 +33,7 @@ export const TranslateProvider: React.FC<{ children: React.ReactNode }> = ({ chi new window.google.translate.TranslateElement( { pageLanguage: "en", - includedLanguages: "en,es,hi,ja,zh,fr,ko", + includedLanguages: "en,es,hi,ja,fr,ko", }, "google_translate_element" ); @@ -53,7 +53,9 @@ export const TranslateProvider: React.FC<{ children: React.ReactNode }> = ({ chi const select = document.querySelector(".goog-te-combo") as HTMLSelectElement; if (select) { select.value = cValue; - select.dispatchEvent(new Event("change")); + + select.dispatchEvent(new Event("change", { bubbles: true })); + select.click(); } } }, From b8933ac6b09cbdcc0dc7cc95b4eb0bd7fc51d62b Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 2 Dec 2024 23:46:06 +0530 Subject: [PATCH 5/6] fix(web): hide-google-translate-tooltip --- web/src/styles/global-style.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts index 00c68c066..4b3f06901 100644 --- a/web/src/styles/global-style.ts +++ b/web/src/styles/global-style.ts @@ -124,7 +124,12 @@ export const GlobalStyle = createGlobalStyle` //hide-default-google-translate .skiptranslate{ - display: none; + display: none !important ; + visibility: hidden !important; }; +font{ + background-color: transparent !important; + box-shadow: none !important ; +} `; From 73ce4987d54e3ffb451d20e818d0dc9180bfdf5c Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 4 Dec 2024 15:47:28 +0530 Subject: [PATCH 6/6] chore(web): no-translate-addresses --- web/src/components/ConnectWallet/AccountDisplay.tsx | 4 ++-- web/src/components/EvidenceCard.tsx | 2 +- .../Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx index 2a415237a..b0b3a2ccb 100644 --- a/web/src/components/ConnectWallet/AccountDisplay.tsx +++ b/web/src/components/ConnectWallet/AccountDisplay.tsx @@ -140,13 +140,13 @@ export const AddressOrName: React.FC = ({ address: propAddress } chainId: 1, }); - return ; + return ; }; export const ChainDisplay: React.FC = () => { const chainId = useChainId(); const chain = getChain(chainId); - return ; + return ; }; const AccountDisplay: React.FC = () => { diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index 75eb614d8..44fcd3e6d 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -177,7 +177,7 @@ const EvidenceCard: React.FC = ({ - +

{shortenAddress(sender)}

 diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx index 4eaed0799..8d9836fd4 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx @@ -3,8 +3,8 @@ import styled, { css } from "styled-components"; import Identicon from "react-identicons"; -import { Answer } from "context/NewDisputeContext"; import { DEFAULT_CHAIN, getChain } from "consts/chains"; +import { Answer } from "context/NewDisputeContext"; import { getVoteChoice } from "utils/getVoteChoice"; import { isUndefined } from "utils/index"; import { shortenAddress } from "utils/shortenAddress"; @@ -94,7 +94,7 @@ const AccordionTitle: React.FC<{ return ( - + {shortenAddress(juror)}