Create language switcher and activate 5 languages

.github/workflows/translations-sync.yml

@@ -22,8 +22,9 @@ jobs:
         with:
           config: 'crowdin.yml'
           upload_sources: true
-          upload_translations: true
+          upload_translations: false
           download_translations: true
+          skip_untranslated_strings: true
           export_only_approved: true
           localization_branch_name: l10n_crowdin_translations
           create_pull_request: true

bridge_ui/locales/ar-SA/translation.json

@@ -0,0 +1 @@
+{}

bridge_ui/locales/hi-IN/translation.json

@@ -0,0 +1 @@
+{}

bridge_ui/locales/nl-NL/translation.json

@@ -0,0 +1 @@
+{}

bridge_ui/locales/tr-TR/translation.json

@@ -0,0 +1 @@
+{}

bridge_ui/package.json

@@ -35,6 +35,9 @@
     "dexie-react-hooks": "^1.1.1",
     "ethereum-multicall": "^2.17.0",
     "ethers": "^5.7.1",
+    "framer-motion": "^6.5.1",
+    "i18next": "^23.16.8",
+    "i18next-browser-languagedetector": "^8.0.2",
     "js-base64": "^3.6.1",
     "luxon": "^2.3.1",
     "notistack": "^1.0.10",
@@ -43,6 +46,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^14.1.2",
+    "react-icons": "^5.4.0",
     "react-modal": "^3.15.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",

bridge_ui/src/components/Footer.tsx

@@ -1,5 +1,7 @@
 import { makeStyles, Typography } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
+import LanguageSwitch from "../localization/LanguageSwitch";
+import styled from "styled-components";
 
 const useStyles = makeStyles((theme) => ({
   footer: {
@@ -67,6 +69,16 @@ export default function Footer() {
           </Typography>
         </div>
       </div>
+      <LanguageSwitchContainer>
+        <LanguageSwitch />
+      </LanguageSwitchContainer>
     </footer>
   );
 }
+
+const LanguageSwitchContainer = styled.div`
+  padding: 15px 30px;
+  display: flex;
+  justify-content: space-between;
+  backdrop-filter: blur(20px);
+`

bridge_ui/src/components/Recovery.tsx

@@ -67,7 +67,7 @@ import { selectTransferSourceChain, selectTransferTransferTx } from "../store/se
 import { getEVMCurrentBlockNumber, isEVMTxConfirmed } from "../utils/evm";
 import { Wallet, useWallet } from "@alephium/web3-react";
 import { useTranslation } from "react-i18next";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 
 const useStyles = makeStyles((theme) => ({
   mainCard: {

bridge_ui/src/hooks/useEthereumMigratorInformation.tsx

@@ -3,7 +3,7 @@ import { Signer } from "@ethersproject/abstract-signer";
 import { formatUnits } from "@ethersproject/units";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 
 export type EthMigrationInfo = {
   isLoading: boolean;

bridge_ui/src/hooks/useGetSourceParsedTokenAccounts.tsx

@@ -132,7 +132,7 @@ import { getRegisteredTokens, getTokenLogoAndSymbol } from "../utils/tokens";
 import { useWallet } from "@alephium/web3-react";
 import { Alert } from "@material-ui/lab";
 import parseError from "../utils/parseError";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 import { useTranslation } from "react-i18next";
 
 export function createParsedTokenAccount(

bridge_ui/src/hooks/useHandleAttest.tsx

@@ -42,7 +42,7 @@ import { getSignedVAAWithRetry } from "../utils/getSignedVAAWithRetry";
 import parseError from "../utils/parseError";
 import { attestFromEthWithoutWait, waitEVMTxConfirmed, checkETHToken, checkBSCToken } from "../utils/evm";
 import { useWallet, Wallet as AlephiumWallet } from "@alephium/web3-react";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 
 async function evm(
   dispatch: any,

bridge_ui/src/hooks/useHandleCreateWrapped.tsx

@@ -35,7 +35,7 @@ import useAttestSignedVAA from "./useAttestSignedVAA";
 import { createWrappedOnEthWithoutWait, updateWrappedOnEthWithoutWait } from "../utils/evm";
 import { useWallet, Wallet as AlephiumWallet } from "@alephium/web3-react";
 import { MINIMAL_CONTRACT_DEPOSIT } from "@alephium/web3";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 
 async function evm(
   dispatch: any,

bridge_ui/src/hooks/useHandleRedeem.tsx

@@ -37,7 +37,7 @@ import useTransferSignedVAA from "./useTransferSignedVAA";
 import { redeemOnEthNativeWithoutWait, redeemOnEthWithoutWait } from "../utils/evm";
 import { useWallet, Wallet as AlephiumWallet } from "@alephium/web3-react";
 import { SignerProvider } from "@alephium/web3";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 
 async function evm(
   dispatch: any,

bridge_ui/src/hooks/useHandleTransfer.tsx

@@ -52,7 +52,7 @@ import { validateAlephiumRecipientAddress, waitALPHTxConfirmed, waitTxConfirmedA
 import { ExecuteScriptResult } from "@alephium/web3";
 import { transferFromEthNativeWithoutWait, transferFromEthWithoutWait, waitEVMTxConfirmed } from "../utils/evm";
 import { useWallet, Wallet as AlephiumWallet } from "@alephium/web3-react";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 
 async function evm(
   dispatch: any,

bridge_ui/src/hooks/useOriginalAsset.ts

@@ -29,7 +29,7 @@ import useIsWalletReady from "./useIsWalletReady";
 import { NodeProvider } from "@alephium/web3";
 import { getAlephiumTokenWrappedInfo, tryGetContractId } from "../utils/alephium";
 import { useWallet } from "@alephium/web3-react";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 import { useTranslation } from "react-i18next";
 
 export type OriginalAssetInfo = {

bridge_ui/src/hooks/useRelayersAvailable.ts

@@ -3,7 +3,7 @@ import { Dispatch } from "@reduxjs/toolkit";
 import axios from "axios";
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 import { DataWrapper } from "../store/helpers";
 import { selectRelayerTokenInfo } from "../store/selectors";
 import {

bridge_ui/src/hooks/useStateWithLocalStorage.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+
+const useStateWithLocalStorage = <T extends string>(localStorageKey: string, defaultValue: T) => {
+  const [value, setValue] = useState(localStorage.getItem(localStorageKey) || defaultValue)
+
+  useEffect(() => {
+    localStorage.setItem(localStorageKey, value)
+  }, [localStorageKey, value])
+
+  return [value as T, setValue] as const
+}
+
+export default useStateWithLocalStorage

bridge_ui/src/hooks/useTransactionFees.tsx

@@ -24,7 +24,7 @@ import { NodeProvider } from "@alephium/web3";
 import { setGasPrice } from "../store/transferSlice";
 import { useDispatch } from "react-redux";
 import { useWallet } from "@alephium/web3-react";
-import i18n from "../i18n";
+import i18n from "../localization/i18n";
 import { useTranslation } from "react-i18next";
 
 export type GasEstimate = {

bridge_ui/src/index.js

@@ -1,4 +1,4 @@
-import "./i18n";
+import "./localization/i18n";
 
 import { CssBaseline } from "@material-ui/core";
 import { ThemeProvider } from "@material-ui/core/styles";

bridge_ui/src/localization/LanguageSwitch.tsx

@@ -0,0 +1,40 @@
+import i18next from "i18next";
+import { useEffect } from "react";
+import styled from "styled-components";
+
+import { Language, languageOptions } from "./languages";
+import useStateWithLocalStorage from "../hooks/useStateWithLocalStorage";
+import Menu from "./Menu";
+
+interface LanguageSwitchProps {
+  className?: string;
+}
+
+const LanguageSwitch: React.FC<LanguageSwitchProps> = ({ className }) => {
+  const [langValue, setLangValue] = useStateWithLocalStorage<Language>('language', 'en')
+
+  useEffect(() => {
+    i18next.changeLanguage(langValue)
+  }, [langValue])
+
+  const items = languageOptions.map((lang) => ({
+    text: lang.label,
+    onClick: () => setLangValue(lang.value)
+  }))
+
+  return (
+    <Menu
+      aria-label="Language"
+      label={languageOptions.find((o) => o.value === langValue)?.label || ''}
+      items={items}
+      direction="up"
+      className={className}
+    />
+  );
+};
+
+export default styled(LanguageSwitch)`
+  border-radius: 8px;
+  background-color: #1B1B1F;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+`;