Skip to content

Commit ae7ee5d

Browse files
sarahschwartzsarahschwartz
committed
fix: i18n setup
1 parent ce01724 commit ae7ee5d

File tree

2 files changed

+144
-121
lines changed

2 files changed

+144
-121
lines changed

‎passkey-wallet-app/main.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {
3434
getWrappedTokenAddress,
3535
transferTokensInterop,
3636
} from "./token-interop.js";
37-
import setupTranslation from "./translation.js";
37+
import { initTranslation, updateTranslation } from "./translation.js";
3838

3939
// ZKsync OS configuration
4040
const zksyncOsTestnet = defineChain({
@@ -141,11 +141,11 @@ document.addEventListener("DOMContentLoaded", async () => {
141141
// setup translation
142142
async function setLanguage(lang) {
143143
activeLanguage = lang;
144-
await setupTranslation(lang);
144+
await updateTranslation(lang);
145145
}
146146
const select = document.getElementById("lang");
147147
select.addEventListener("change", async () => setLanguage(select.value));
148-
await setupTranslation(activeLanguage);
148+
await initTranslation(activeLanguage);
149149

150150
// Setup public client for balance checks FIRST
151151
publicClient = createPublicClient({

‎passkey-wallet-app/translation.js‎

Lines changed: 141 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -374,133 +374,156 @@ export const PORTUGUESE_BR = {
374374
},
375375
};
376376

377-
export default async function setupTranslation(language) {
377+
const elementIdMappings = {
378+
topbar: {
379+
network: "topbar-network",
380+
balance: "topbar-balance",
381+
},
382+
nav: {
383+
home: "nav-home",
384+
send: "nav-send",
385+
earn: "nav-earn",
386+
interop: "nav-interop",
387+
activity: "nav-activity",
388+
},
389+
home: {
390+
getStarted: "home-get-started",
391+
setupWallet: "home-setup-wallet",
392+
createKey: "home-create-key",
393+
userName: "home-user-name",
394+
createPasskeyBtn: "createPasskeyBtn",
395+
keyCreated: "home-key-created",
396+
credentialID: "home-credential-id",
397+
resetPasskeyBtn: "resetPasskeyBtn",
398+
activateWallet: "home-activate-wallet",
399+
deployWallet: "home-deploy-wallet",
400+
deployAccountBtn: "deployAccountBtn",
401+
walletActivated: "home-wallet-activated",
402+
walletAddress: ["home-wallet-address", "home-wallet-address-2"],
403+
refreshBalanceBtn: "refreshBalanceBtn",
404+
walletBalance: "home-wallet-balance",
405+
yourWallet: "home-your-wallet",
406+
resetPasskeyMainBtn: "resetPasskeyMainBtn",
407+
quickActions: "home-quick-actions",
408+
quickSendBtn: "quickSendBtn",
409+
quickEarnBtn: "quickEarnBtn",
410+
faucetBtn: "faucetBtn",
411+
},
412+
send: {
413+
sendMoney: "send-money",
414+
recipientAddress: "send-recipient",
415+
amount: "send-amount",
416+
transferBtn: "transferBtn",
417+
txSent: "send-tx-sent",
418+
txLabel: "send-tx-label",
419+
},
420+
earn: {
421+
title: "earn-title",
422+
subtitle: "earn-subtitle",
423+
shadowAccount: "earn-shadow",
424+
deposits: "earn-deposits",
425+
refreshBtn: "refreshAaveBalanceBtn",
426+
depositLabel: "earn-deposit-label",
427+
depositAmount: "earn-deposit-amount",
428+
depositBtn: "aaveDepositBtn",
429+
depositInit: "earn-deposit-init",
430+
depositTx: "earn-deposit-tx",
431+
depositWaitMsg: "earn-deposit-wait-msg",
432+
withdrawLabel: "earn-withdraw-label",
433+
withdrawAmount: "earn-withdraw-amount",
434+
withdrawBtn: "aaveWithdrawBtn",
435+
withdrawInit: "earn-withdraw-init",
436+
withdrawTx: "earn-withdraw-tx",
437+
withdrawWaitMsg: "earn-withdraw-wait-msg",
438+
},
439+
interop: {
440+
title: "interop-title",
441+
subtitle: "interop-subtitle",
442+
noteLabel: "interop-note-label",
443+
note: "interop-note",
444+
setupWarning: "interop-setup-warning",
445+
setupMsg: "interop-setup-msg",
446+
chainA: "interop-chain-a",
447+
chainB: "interop-chain-b",
448+
connectionIssue: "interop-connection-issue",
449+
connectionMsg: "interop-connection-msg",
450+
conectionCheck1: "interop-connection-check-1",
451+
conectionCheck2: "interop-connection-check-2",
452+
sendMsgLabel: "interop-send-msg-label",
453+
msgLabel: "interop-msg-label",
454+
msgDirection: "interop-msg-direction",
455+
aToB: "interop-a-to-b",
456+
bToA: "interop-b-to-a",
457+
sendMsgBtn: "interopSendBtn",
458+
msgProgressTitle: "interopProgressTitle",
459+
msgVerified: "interop-msg-verified",
460+
srcChainTx: "interop-src-chain-tx",
461+
l1Batch: "interop-l1-batch",
462+
msgIndex: "interop-msg-index",
463+
msgFinalDirection: "interop-msg-final-direction",
464+
msgVerifiedOnDestination: "interop-msg-verified-on-dest",
465+
msgSuccess: "interop-msg-success",
466+
tokenTransferTitle: "interop-token-transfer-title",
467+
tokenTransferSubtitle: "interop-token-transfer-subtitle",
468+
tokenLabel: "interop-token-label",
469+
tokenAddress: "interop-token-address",
470+
chainABalance: "interop-chain-a-balance",
471+
chainBBalance: "interop-chain-b-balance",
472+
refreshTokenBalanceBtn: "refreshTokenBalancesBtn",
473+
tokenTransferAmount: "interop-token-transfer-amount",
474+
transferDirection: "interop-transfer-direction",
475+
transferTokenAToB: "interop-transfer-token-a-to-b",
476+
transferTokenBToA: "interop-transfer-token-b-to-a",
477+
transferBtn: "tokenTransferBtn",
478+
transferProgressTitle: "tokenTransferProgressTitle",
479+
transferComplete: "interop-transfer-complete",
480+
statusSrcChainTx: "interop-status-src-chain-tx",
481+
destinationChainTx: "interop-destination-chain-tx",
482+
statusAmount: "interop-status-amount",
483+
statusDirection: "interop-status-direction",
484+
},
485+
activity: {
486+
title: "activity-title",
487+
subtitle: "activity-subtitle",
488+
noTxns: "activity-no-txns",
489+
},
490+
footer: {
491+
network: "footer-network",
492+
poweredByZk: "footer-powered-by-zk",
493+
securedByPasskeys: "footer-secured-by-passkeys",
494+
},
495+
};
496+
497+
export async function initTranslation(language) {
378498
await i18next.init({
379499
lng: language,
380500
debug: true,
381-
fallback: "en",
501+
fallbackLng: "en",
382502
resources: {
383503
en: ENGLISH,
384504
es: SPANISH,
385505
pt: PORTUGUESE_BR,
386506
},
387507
});
388508

389-
// TOP BAR
390-
document.getElementById("topbar-network").innerHTML = i18next.t("topbar.network");
391-
document.getElementById("topbar-balance").innerHTML = i18next.t("topbar.balance");
392-
393-
// NAVIGATION
394-
document.getElementById("nav-home").innerHTML = i18next.t("nav.home");
395-
document.getElementById("nav-send").innerHTML = i18next.t("nav.send");
396-
document.getElementById("nav-earn").innerHTML = i18next.t("nav.earn");
397-
document.getElementById("nav-interop").innerHTML = i18next.t("nav.interop");
398-
document.getElementById("nav-activity").innerHTML = i18next.t("nav.activity");
399-
400-
// HOME TAB
401-
document.getElementById("home-get-started").innerHTML = i18next.t("home.getStarted");
402-
document.getElementById("home-setup-wallet").innerHTML = i18next.t("home.setupWallet");
403-
document.getElementById("home-create-key").innerHTML = i18next.t("home.createKey");
404-
document.getElementById("home-user-name").innerHTML = i18next.t("home.userName");
405-
document.getElementById("createPasskeyBtn").innerHTML = i18next.t("home.createPasskeyBtn");
406-
document.getElementById("home-key-created").innerHTML = i18next.t("home.keyCreated");
407-
document.getElementById("home-credential-id").innerHTML = i18next.t("home.credentialID");
408-
document.getElementById("resetPasskeyBtn").innerHTML = i18next.t("home.resetPasskeyBtn");
409-
document.getElementById("home-activate-wallet").innerHTML = i18next.t("home.activateWallet");
410-
document.getElementById("home-deploy-wallet").innerHTML = i18next.t("home.deployWallet");
411-
document.getElementById("deployAccountBtn").innerHTML = i18next.t("home.deployAccountBtn");
412-
document.getElementById("home-wallet-activated").innerHTML = i18next.t("home.walletActivated");
413-
document.getElementById("home-wallet-address").innerHTML = i18next.t("home.walletAddress");
414-
document.getElementById("refreshBalanceBtn").innerHTML = i18next.t("home.refreshBalanceBtn");
415-
document.getElementById("home-wallet-balance").innerHTML = i18next.t("home.walletBalance");
416-
document.getElementById("home-your-wallet").innerHTML = i18next.t("home.yourWallet");
417-
document.getElementById("home-wallet-address-2").innerHTML = i18next.t("home.walletAddress");
418-
document.getElementById("resetPasskeyMainBtn").innerHTML = i18next.t("home.resetPasskeyMainBtn");
419-
document.getElementById("home-quick-actions").innerHTML = i18next.t("home.quickActions");
420-
document.getElementById("quickSendBtn").innerHTML = i18next.t("home.quickSendBtn");
421-
document.getElementById("quickEarnBtn").innerHTML = i18next.t("home.quickEarnBtn");
422-
document.getElementById("faucetBtn").innerHTML = i18next.t("home.faucetBtn");
423-
424-
// SEND TAB
425-
document.getElementById("send-money").innerHTML = i18next.t("send.sendMoney");
426-
document.getElementById("send-recipient").innerHTML = i18next.t("send.recipientAddress");
427-
document.getElementById("send-amount").innerHTML = i18next.t("send.amount");
428-
document.getElementById("transferBtn").innerHTML = i18next.t("send.transferBtn");
429-
document.getElementById("send-tx-sent").innerHTML = i18next.t("send.txSent");
430-
document.getElementById("send-tx-label").innerHTML = i18next.t("send.txLabel");
431-
432-
// EARN TAB
433-
document.getElementById("earn-title").innerHTML = i18next.t("earn.title");
434-
document.getElementById("earn-subtitle").innerHTML = i18next.t("earn.subtitle");
435-
document.getElementById("earn-shadow").innerHTML = i18next.t("earn.shadowAccount");
436-
document.getElementById("earn-deposits").innerHTML = i18next.t("earn.deposits");
437-
document.getElementById("refreshAaveBalanceBtn").innerHTML = i18next.t("earn.refreshBtn");
438-
document.getElementById("earn-deposit-label").innerHTML = i18next.t("earn.depositLabel");
439-
document.getElementById("earn-deposit-amount").innerHTML = i18next.t("earn.depositAmount");
440-
document.getElementById("aaveDepositBtn").innerHTML = i18next.t("earn.depositBtn");
441-
document.getElementById("earn-deposit-init").innerHTML = i18next.t("earn.depositInit");
442-
document.getElementById("earn-deposit-tx").innerHTML = i18next.t("earn.depositTx");
443-
document.getElementById("earn-deposit-wait-msg").innerHTML = i18next.t("earn.depositWaitMsg");
444-
document.getElementById("earn-withdraw-label").innerHTML = i18next.t("earn.withdrawLabel");
445-
document.getElementById("earn-withdraw-amount").innerHTML = i18next.t("earn.withdrawAmount");
446-
document.getElementById("aaveWithdrawBtn").innerHTML = i18next.t("earn.withdrawBtn");
447-
document.getElementById("earn-withdraw-init").innerHTML = i18next.t("earn.withdrawInit");
448-
document.getElementById("earn-withdraw-tx").innerHTML = i18next.t("earn.withdrawTx");
449-
document.getElementById("earn-withdraw-wait-msg").innerHTML = i18next.t("earn.withdrawWaitMsg");
450-
451-
// INTEROP TAB
452-
document.getElementById("interop-title").innerHTML = i18next.t("interop.title");
453-
document.getElementById("interop-subtitle").innerHTML = i18next.t("interop.subtitle");
454-
document.getElementById("interop-note-label").innerHTML = i18next.t("interop.noteLabel");
455-
document.getElementById("interop-note").innerHTML = i18next.t("interop.note");
456-
document.getElementById("interop-setup-warning").innerHTML = i18next.t("interop.setupWarning");
457-
document.getElementById("interop-setup-msg").innerHTML = i18next.t("interop.setupMsg");
458-
document.getElementById("interop-chain-a").innerHTML = i18next.t("interop.chainA");
459-
document.getElementById("interop-chain-b").innerHTML = i18next.t("interop.chainB");
460-
document.getElementById("interop-connection-issue").innerHTML = i18next.t("interop.connectionIssue");
461-
document.getElementById("interop-connection-msg").innerHTML = i18next.t("interop.connectionMsg");
462-
document.getElementById("interop-connection-check-1").innerHTML = i18next.t("interop.conectionCheck1");
463-
document.getElementById("interop-connection-check-2").innerHTML = i18next.t("interop.conectionCheck2");
464-
document.getElementById("interop-send-msg-label").innerHTML = i18next.t("interop.sendMsgLabel");
465-
document.getElementById("interop-msg-label").innerHTML = i18next.t("interop.msgLabel");
466-
document.getElementById("interop-msg-direction").innerHTML = i18next.t("interop.msgDirection");
467-
document.getElementById("interop-a-to-b").innerHTML = i18next.t("interop.aToB");
468-
document.getElementById("interop-b-to-a").innerHTML = i18next.t("interop.bToA");
469-
document.getElementById("interopSendBtn").innerHTML = i18next.t("interop.sendMsgBtn");
470-
document.getElementById("interopProgressTitle").innerHTML = i18next.t("interop.msgProgressTitle");
471-
document.getElementById("interop-msg-verified").innerHTML = i18next.t("interop.msgVerified");
472-
document.getElementById("interop-src-chain-tx").innerHTML = i18next.t("interop.srcChainTx");
473-
document.getElementById("interop-l1-batch").innerHTML = i18next.t("interop.l1Batch");
474-
document.getElementById("interop-msg-index").innerHTML = i18next.t("interop.msgIndex");
475-
document.getElementById("interop-msg-final-direction").innerHTML = i18next.t("interop.msgFinalDirection");
476-
document.getElementById("interop-msg-verified-on-dest").innerHTML = i18next.t("interop.msgVerifiedOnDestination");
477-
document.getElementById("interop-msg-success").innerHTML = i18next.t("interop.msgSuccess");
478-
document.getElementById("interop-token-transfer-title").innerHTML = i18next.t("interop.tokenTransferTitle");
479-
document.getElementById("interop-token-transfer-subtitle").innerHTML = i18next.t("interop.tokenTransferSubtitle");
480-
document.getElementById("interop-token-label").innerHTML = i18next.t("interop.tokenLabel");
481-
document.getElementById("interop-token-address").innerHTML = i18next.t("interop.tokenAddress");
482-
document.getElementById("interop-chain-a-balance").innerHTML = i18next.t("interop.chainABalance");
483-
document.getElementById("interop-chain-b-balance").innerHTML = i18next.t("interop.chainBBalance");
484-
document.getElementById("refreshTokenBalancesBtn").innerHTML = i18next.t("interop.refreshTokenBalanceBtn");
485-
document.getElementById("interop-token-transfer-amount").innerHTML = i18next.t("interop.tokenTransferAmount");
486-
document.getElementById("interop-transfer-direction").innerHTML = i18next.t("interop.transferDirection");
487-
document.getElementById("interop-transfer-token-a-to-b").innerHTML = i18next.t("interop.transferTokenAToB");
488-
document.getElementById("interop-transfer-token-b-to-a").innerHTML = i18next.t("interop.transferTokenBToA");
489-
document.getElementById("tokenTransferBtn").innerHTML = i18next.t("interop.transferBtn");
490-
document.getElementById("tokenTransferProgressTitle").innerHTML = i18next.t("interop.transferProgressTitle");
491-
document.getElementById("interop-transfer-complete").innerHTML = i18next.t("interop.transferComplete");
492-
document.getElementById("interop-status-src-chain-tx").innerHTML = i18next.t("interop.statusSrcChainTx");
493-
document.getElementById("interop-destination-chain-tx").innerHTML = i18next.t("interop.destinationChainTx");
494-
document.getElementById("interop-status-amount").innerHTML = i18next.t("interop.statusAmount");
495-
document.getElementById("interop-status-direction").innerHTML = i18next.t("interop.statusDirection");
496-
497-
// ACTIVITY TAB
498-
document.getElementById("activity-title").innerHTML = i18next.t("activity.title");
499-
document.getElementById("activity-subtitle").innerHTML = i18next.t("activity.subtitle");
500-
document.getElementById("activity-no-txns").innerHTML = i18next.t("activity.noTxns");
509+
updateText();
510+
}
511+
export async function updateTranslation(language) {
512+
await i18next.changeLanguage(language, updateText);
513+
}
501514

502-
// FOOTER
503-
document.getElementById("footer-network").innerHTML = i18next.t("footer.network");
504-
document.getElementById("footer-powered-by-zk").innerHTML = i18next.t("footer.poweredByZk");
505-
document.getElementById("footer-secured-by-passkeys").innerHTML = i18next.t("footer.securedByPasskeys");
515+
function updateText() {
516+
Object.keys(elementIdMappings).forEach((key) => {
517+
Object.keys(elementIdMappings[key]).forEach((subkey) => {
518+
const t = `${key}.${subkey}`;
519+
const id = elementIdMappings[key][subkey];
520+
if (Array.isArray(id)) {
521+
id.forEach((i) => {
522+
document.getElementById(i).innerHTML = i18next.t(t);
523+
});
524+
} else {
525+
document.getElementById(id).innerHTML = i18next.t(t);
526+
}
527+
});
528+
});
506529
}

0 commit comments

Comments
 (0)