Create language settings screen and enable 3 languages

.github/workflows/translations-sync.yml

@@ -22,7 +22,7 @@ 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

packages/extension/locales/ar-SA/translation.json

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

packages/extension/locales/bg-BG/translation.json

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

packages/extension/locales/el-GR/translation.json

@@ -0,0 +1,6 @@
+{
+  "Welcome to Alephium": "Καλωσορίσατε στο Alephium",
+  "A New Paradigm": "Ένα νέο παράδειγμα",
+  "Create a new wallet": "Δημιουργία νέου πορτοφολιού",
+  "Restore an existing wallet": "Επαναφορά υπάρχοντος πορτοφολιού"
+}

packages/extension/locales/es-ES/translation.json

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

packages/extension/locales/fr-FR/translation.json

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

packages/extension/locales/hi-IN/translation.json

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

packages/extension/locales/id-ID/translation.json

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

packages/extension/locales/it-IT/translation.json

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

packages/extension/locales/nl-NL/translation.json

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

packages/extension/locales/ru-RU/translation.json

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

packages/extension/locales/tr-TR/translation.json

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

packages/extension/locales/zh-CN/translation.json

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

packages/extension/package.json

@@ -98,6 +98,7 @@
     "cross-env": "^7.0.3",
     "ethers": "^5.5.1",
     "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.2",
     "jose": "^4.3.6",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.88.0",

packages/extension/src/ui/AppRoutes.tsx

@@ -65,6 +65,7 @@ import { useEntryRoute } from "./useEntryRoute"
 import { AddTokenScreen } from "./features/actions/AddTokenScreen"
 import { LedgerStartScreen } from "./features/ledger/start"
 import { LedgerDoneScreen } from "./features/ledger/done"
+import { SettingsLanguageScreen } from "./features/localization/SettingsLanguageScreen"
 
 const ResponsiveContainer = chakra(ResponsiveBox, {
   baseStyle: {
@@ -212,6 +213,11 @@ const walletRoutes = (
       path={routes.settingsPrivacyStatement.path}
       element={<SettingsPrivacyStatementScreen />}
     />
+    <Route
+      presentation="push"
+      path={routes.settingsLanguage.path}
+      element={<SettingsLanguageScreen />}
+    />
     <Route
       presentation="modal"
       path={routes.transactionDetail.path}

packages/extension/src/ui/features/accountActivity/transform/explorerTransaction/transformers/accountCreateTransformer.ts

@@ -1,5 +1,5 @@
 import { IExplorerTransactionTransformer } from "./type"
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 
 export default function ({
   explorerTransaction,

packages/extension/src/ui/features/accountActivity/transform/explorerTransaction/transformers/accountUpgradeTransformer.ts

@@ -1,4 +1,4 @@
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 import { IExplorerTransactionTransformer } from "./type"
 
 export default function ({

packages/extension/src/ui/features/accountActivity/transform/explorerTransaction/transformers/dappInfluenceMintTransformer.ts

@@ -2,7 +2,7 @@ import { NFTTransaction } from "../../type"
 import { getEntityWithName } from "../getEntityWithName"
 import { getParameter } from "../getParameter"
 import { IExplorerTransactionTransformer } from "./type"
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 
 /** adds Influence NFT purcahse */
 

packages/extension/src/ui/features/accountActivity/transform/explorerTransaction/transformers/dappMintSquareBuyNFTTransformer.ts

@@ -2,7 +2,7 @@ import { NFTTransaction } from "../../type"
 import { getEntityWithName } from "../getEntityWithName"
 import { getParameter } from "../getParameter"
 import { IExplorerTransactionTransformer } from "./type"
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 
 /** Mint Square buy NFT */
 

packages/extension/src/ui/features/accountActivity/transform/explorerTransaction/transformers/knownNftTransformer.ts

@@ -2,7 +2,7 @@ import { includesAddress } from "../../../../../../shared/knownDapps"
 import { isEqualAddress } from "../../../../../services/addresses"
 import { NFTTransaction, NFTTransferTransaction } from "../../type"
 import { IExplorerTransactionTransformer } from "./type"
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 
 /** adds erc721 token transfer data */
 

packages/extension/src/ui/features/accountActivity/transform/explorerTransaction/transformers/postSwapTransformer.ts

@@ -1,7 +1,7 @@
 import { getTokenForContractAddress } from "../../getTokenForContractAddress"
 import { isSwapTransaction } from "../../is"
 import { IExplorerTransactionTransformer } from "./type"
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 
 /** adds token swap tokens */
 

packages/extension/src/ui/features/accountActivity/transform/explorerTransaction/transformers/tokenApproveTransformer.ts

@@ -1,7 +1,7 @@
 import { TokenApproveTransaction } from "../../type"
 import { getParameter } from "../getParameter"
 import { IExplorerTransactionTransformer } from "./type"
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 
 /** adds erc20 token approve data */
 

packages/extension/src/ui/features/accountActivity/transform/explorerTransaction/transformers/tokenMintTransformer.ts

@@ -1,7 +1,7 @@
 import { TokenMintTransaction } from "../../type"
 import { getParameter } from "../getParameter"
 import { IExplorerTransactionTransformer } from "./type"
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 
 /** adds erc20 token mint data */
 

packages/extension/src/ui/features/accountActivity/transform/explorerTransaction/transformers/tokenTransferTransformer.ts

@@ -2,7 +2,7 @@ import { isEqualAddress } from "../../../../../services/addresses"
 import { TokenTransferTransaction } from "../../type"
 import { getParameter } from "../getParameter"
 import { IExplorerTransactionTransformer } from "./type"
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 
 /** adds erc20 token transfer data */
 

packages/extension/src/ui/features/accountActivity/transform/transaction/transformers/nftTransferTransformer.ts

@@ -5,7 +5,7 @@ import {
 import { NFTTransferTransaction } from "../../type"
 import { getCallsFromTransaction } from "../getCallsFromTransaction"
 import { ITransactionTransformer } from "./type"
-import i18n from "../../../../../../i18n"
+import i18n from "../../../../../features/localization/i18n"
 
 /** adds erc721 token transfer data */
 

packages/extension/src/ui/features/accounts/accounts.service.ts

@@ -7,7 +7,7 @@ import { BaseWalletAccount } from "../../../shared/wallet.model"
 import { accountsEqual } from "../../../shared/wallet.service"
 import { startSession } from "../../services/backgroundSessions"
 import { Account } from "./Account"
-import i18n from "../../../i18n"
+import i18n from "../../features/localization/i18n"
 
 const { toBN } = number
 

packages/extension/src/ui/features/actions/ApproveTransactionScreen.tsx

@@ -27,7 +27,7 @@ import { getToken } from "../../../shared/token/storage"
 import { BigNumber } from "ethers"
 import { addTokenToBalances } from "../../../shared/token/balance"
 import { useTranslation } from "react-i18next"
-import i18n from "../../../i18n"
+import i18n from "../../features/localization/i18n"
 import { LedgerStatus } from "./LedgerStatus"
 import { useLedgerApp } from "../ledger/useLedgerApp"
 import { getConfirmationTextByState } from "../ledger/types"

packages/extension/src/ui/features/actions/LoadingScreen.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components"
 import { useLoadingProgress } from "../../app.state"
 import { Spinner } from "../../components/Spinner"
 import { Greetings } from "../lock/Greetings"
-import i18n from "../../../i18n"
+import i18n from "../../features/localization/i18n"
 
 const LoadingScreenWrapper = styled.div`
   display: flex;

packages/extension/src/ui/features/actions/feeEstimation/utils.tsx

@@ -1,5 +1,5 @@
 import { BigNumber, utils } from "ethers"
-import i18n from "../../../../i18n"
+import i18n from "../../../features/localization/i18n"
 
 export function getTooltipText(maxFee?: string, feeTokenBalance?: BigNumber) {
   if (!maxFee || !feeTokenBalance) {

packages/extension/src/ui/features/funding/FundingQrCodeScreen.tsx

@@ -19,7 +19,7 @@ import { useSelectedAccount } from "../accounts/accounts.state"
 import { QrCode } from "./QrCode"
 import { testNodeWallet } from '@alephium/web3-test'
 import { Flex } from "@chakra-ui/react"
-import i18n from "../../../i18n"
+import i18n from "../../features/localization/i18n"
 import { useTranslation } from "react-i18next"
 import { LedgerAlephium } from '../ledger/utils'
 import { set } from 'lodash-es'

packages/extension/src/ui/features/localization/SettingsLanguageScreen.tsx

@@ -0,0 +1,32 @@
+import { BarBackButton, ButtonCell, CellStack, NavigationContainer } from "@argent/ui"
+import { FC } from "react"
+
+import { Language, languageOptions } from "./languages"
+import { routes } from "../../routes"
+import i18next from "i18next"
+import { useNavigate } from "react-router-dom"
+
+export const SettingsLanguageScreen: FC = () => {
+  const navigate = useNavigate()
+
+  const handleLanguageChange = (lang: Language) => {
+    i18next.changeLanguage(lang).then(() => {
+      navigate(routes.settings())
+    })
+  }
+
+  return (
+    <NavigationContainer
+      leftButton={<BarBackButton />}
+      title="Language"
+    >
+      <CellStack>
+        {languageOptions.map(({ value, label }) => (
+          <ButtonCell key={label} onClick={() => handleLanguageChange(value)} title={label}>
+            {label}
+          </ButtonCell>
+        ))}
+      </CellStack>
+    </NavigationContainer>
+  )
+}

packages/extension/src/ui/features/localization/i18n.ts

@@ -0,0 +1,31 @@
+import i18next from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { initReactI18next } from 'react-i18next'
+
+import de from '../../../../locales/de-DE/translation.json'
+import en from '../../../../locales/en-US/translation.json'
+import pt from '../../../../locales/pt-PT/translation.json'
+import vi from '../../../../locales/vi-VN/translation.json'
+import { supportedLanguages } from './languages'
+
+i18next
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init({
+    resources: {
+      en: { translation: en },
+      de: { translation: de },
+      vi: { translation: vi },
+      pt: { translation: pt },
+    },
+    supportedLngs: supportedLanguages,
+    fallbackLng: 'en',
+    detection: {
+      lookupLocalStorage: 'language'
+    },
+    interpolation: {
+      escapeValue: false
+    }
+  })
+
+export default i18next

packages/extension/src/ui/features/localization/i18next.d.ts

@@ -0,0 +1,15 @@
+import 'i18next'
+
+import en from '../../../../locales/en-US/translation.json'
+
+type EnglishTranslationKeys = typeof en
+
+export type TranslationKey = keyof EnglishTranslationKeys
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    resources: {
+      translation: EnglishTranslationKeys
+    }
+  }
+}

packages/extension/src/ui/features/localization/languages.ts

@@ -0,0 +1,10 @@
+export const supportedLanguages = ["en", "de", "vi", "pt"] as const;
+
+export type Language = (typeof supportedLanguages)[number];
+
+export const languageOptions: Array<{ label: string; value: Language }> = [
+  { label: 'English', value: 'en' },
+  { label: 'Deutsch', value: 'de' },
+  { label: 'Português', value: 'pt' },
+  { label: 'Tiếng Việt', value: 'vi' },
+]

packages/extension/src/ui/features/settings/SettingsScreen.tsx

@@ -32,6 +32,7 @@ const {
   LinkIcon,
   PasswordIcon,
   ShieldIcon,
+  SettingsIcon,
 } = icons
 
 export const Title = styled.h3`
@@ -140,6 +141,12 @@ export const SettingsScreen: FC = () => {
             title={t("Developer settings")}
           />
 
+          <SettingsMenuItem
+            leftIcon={<SettingsIcon />}
+            to={routes.settingsLanguage()}
+            title="Language"
+          />
+
           {isPrivacySettingsEnabled && (
             <SettingsMenuItem
               leftIcon={<ShieldIcon />}

packages/extension/src/ui/features/settings/validateRemoveNetwork.ts

@@ -1,4 +1,4 @@
-import i18n from "../../../i18n"
+import i18n from "../../features/localization/i18n"
 import { getNetworkSelector } from "../../../shared/account/selectors"
 import { accountStore } from "../../../shared/account/store"
 import { useAppState } from "../../app.state"

packages/extension/src/ui/index.tsx

@@ -1,4 +1,4 @@
-import "../i18n"
+import "./features/localization/i18n"
 
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"

packages/extension/src/ui/routes.ts

@@ -132,6 +132,7 @@ export const routes = {
   ),
   settingsDappConnections: route("/settings/dapp-connections"),
   settingsPrivacy: route("/settings/privacy"),
+  settingsLanguage: route("/settings/language"),
   settingsDeveloper: route("/settings/developer-settings"),
   settingsExperimental: route("/settings/developer-settings/experimental"),
   settingsBlockExplorer: route("/settings/developer-settings/block-explorer"),