fix(web): resolve t() shadowing in VaultPanel tab switcher - #441
Conversation
The .map((t) => ...) callback parameter shadowed the useTranslation t()
function, causing tab labels to always render the raw capitalised English
string instead of the active locale translation.
Rename the map parameter to tabId and replace the manual capitalisation
with t(`vaultPanel.${tabId}`) so Deposit/Withdraw are translated via the
existing vaultPanel.deposit / vaultPanel.withdraw keys in en.json and fr.json.
|
@badmusnadrohabidemi-blip is attempting to deploy a commit to the Collins' projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@badmusnadrohabidemi-blip Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
collinsezedike
left a comment
collinsezedike
left a comment
There was a problem hiding this comment.
The fix itself is correct, verified against the real translation bug. But it breaks 4 existing tests in VaultPanel.test.tsx (Test CI job fails). Before your change, only the deposit/withdraw submit button called t("vaultPanel.deposit"), the tab button rendered a manually-capitalized literal string, so getByText("vaultPanel.deposit") uniquely matched the submit button by accident. Now that the tab button also calls t(), both buttons render identical text under the test's translation mock, and those queries fail with "Found multiple elements."
VaultPanel.tsx already has data-testid="vault-tab-deposit"/"vault-tab-withdraw" on the tab buttons from an earlier PR. Please update the 4 failing assertions in VaultPanel.test.tsx to query the tab button by getByTestId instead of getByText("vaultPanel.deposit"), to disambiguate it from the submit button.
Please also run pnpm test locally before pushing, not just manual browser verification, this is the kind of regression it would have caught.
2 participants
Problem
The tab switcher in VaultPanel always showed "Deposit" / "Withdraw" in English regardless of the active locale. The root
cause was a variable-shadowing bug: useTranslation's t function was re-bound as the .map((t) => ...) callback parameter,
so inside the map t was a string ("deposit" / "withdraw"), not the translator. The label was built by capitalising the
raw string — t.charAt(0).toUpperCase() + t.slice(1) — which is plain string manipulation, never a translation call.
Fix
Renamed the map callback parameter from t to tabId so the outer t translator stays in scope, then replaced the manual
capitalisation with t(\vaultPanel.${tabId}
). No new translation keys were needed — vaultPanel.depositandvaultPanel.withdrawalready existed in bothen.jsonandfr.json.Changed file
Testing
Switch the app locale to French and open the vault panel with a wallet connected. Tabs now read "Déposer" / "Retirer".
English locale continues to show "Deposit" / "Withdraw" as before.
closes #425