Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create language settings screen and enable 3 languages #232

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Create language settings screen and enable 4 languages
Closes #201
  • Loading branch information
nop33 committed Jan 9, 2025
commit 45565fbb2b972f2b63eac70a27c2ad1d29ba63a2
1 change: 1 addition & 0 deletions packages/extension/package.json
Original file line number Diff line number Diff line change
@@ -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",
35 changes: 0 additions & 35 deletions packages/extension/src/i18n.ts

This file was deleted.

33 changes: 0 additions & 33 deletions packages/extension/src/i18next.d.ts

This file was deleted.

6 changes: 6 additions & 0 deletions packages/extension/src/ui/AppRoutes.tsx
Original file line number Diff line number Diff line change
@@ -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}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { IExplorerTransactionTransformer } from "./type"
import i18n from "../../../../../../i18n"
import i18n from "../../../../../features/localization/i18n"

export default function ({
explorerTransaction,
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import i18n from "../../../../../../i18n"
import i18n from "../../../../../features/localization/i18n"
import { IExplorerTransactionTransformer } from "./type"

export default function ({
Original file line number Diff line number Diff line change
@@ -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 */

Original file line number Diff line number Diff line change
@@ -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 */

Original file line number Diff line number Diff line change
@@ -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 */

Original file line number Diff line number Diff line change
@@ -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 */

Original file line number Diff line number Diff line change
@@ -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 */

Original file line number Diff line number Diff line change
@@ -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 */

Original file line number Diff line number Diff line change
@@ -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 */

Original file line number Diff line number Diff line change
@@ -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 */

Original file line number Diff line number Diff line change
@@ -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

Original file line number Diff line number Diff line change
@@ -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"
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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) {
Original file line number Diff line number Diff line change
@@ -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'
Original file line number Diff line number Diff line change
@@ -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>
)
}
31 changes: 31 additions & 0 deletions packages/extension/src/ui/features/localization/i18n.ts
Original file line number Diff line number Diff line change
@@ -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
15 changes: 15 additions & 0 deletions packages/extension/src/ui/features/localization/i18next.d.ts
Original file line number Diff line number Diff line change
@@ -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
}
}
}
10 changes: 10 additions & 0 deletions packages/extension/src/ui/features/localization/languages.ts
Original file line number Diff line number Diff line change
@@ -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' },
]
Original file line number Diff line number Diff line change
@@ -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 />}
Original file line number Diff line number Diff line change
@@ -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"
2 changes: 1 addition & 1 deletion packages/extension/src/ui/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "../i18n"
import "./features/localization/i18n"

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
1 change: 1 addition & 0 deletions packages/extension/src/ui/routes.ts
Original file line number Diff line number Diff line change
@@ -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"),
2 changes: 1 addition & 1 deletion packages/extension/src/ui/services/backgroundAccounts.ts
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import {
} from "../../shared/wallet.model"
import { walletStore } from "../../shared/wallet/walletStore"
import { decryptFromBackground, generateEncryptedSecret } from "./crypto"
import i18n from "../../i18n"
import i18n from "../features/localization/i18n"

export const createNewAccount = async (networkId: string, keyType: KeyType, group?: number) => {
sendMessage({ type: "ALPH_NEW_ACCOUNT", data: { networkId: networkId, keyType: keyType, group: group } })
2 changes: 1 addition & 1 deletion packages/extension/src/ui/services/backgroundRecovery.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import i18n from "../../i18n"
import i18n from "../features/localization/i18n"
import { sendMessage, waitForMessage } from "../../shared/messages"
import { encryptForBackground } from "./crypto"

2 changes: 1 addition & 1 deletion packages/extension/src/ui/services/backgroundSessions.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import i18n from "../../i18n"
import i18n from "../features/localization/i18n"
import { sendMessage, waitForMessage } from "../../shared/messages"
import { encryptForBackground } from "./crypto"

Loading
Loading