-
Notifications
You must be signed in to change notification settings - Fork 4.7k
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
PoC - Typed Translations #24250
base: develop
Are you sure you want to change the base?
PoC - Typed Translations #24250
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -96,7 +96,9 @@ function getProviderLabel( | |
if (LOCALIZED_PROVIDERS.includes(sourceId)) { | ||
// Use intermediate variable to avoid "Forbidden use of template strings | ||
// in 't' function" error. | ||
const messageKey = `nameProvider_${sourceId}`; | ||
const messageKey = `nameProvider_${ | ||
sourceId as 'ens' | 'etherscan' | 'lens' | 'token' | ||
}` as const; | ||
return t(messageKey); | ||
Comment on lines
+99
to
102
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just a quirk due to the translations being a bit more strict - it doesn't accept any arbitrary string. In fact could slowly migrate from a loose function definition to a strict function definition if we wanted to. |
||
} | ||
return nameSources[sourceId]?.label ?? sourceId; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -265,7 +265,9 @@ export const Connections = () => { | |
menuType={AccountListItemMenuTypes.Connection} | ||
currentTabOrigin={activeTabOrigin} | ||
isActive={ | ||
mergedAccountsProps.isAccountActive ? t('active') : null | ||
mergedAccountsProps.isAccountActive | ||
? Boolean(t('active')) | ||
: Boolean(null) | ||
Comment on lines
+268
to
+270
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Lol, this isActive expects a boolean, but we were passing it a |
||
} | ||
onActionClick={setShowAccountDisconnectedToast} | ||
/> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import type TranslationsJson from '../../app/_locales/en/messages.json.d.ts'; //'app/_locales/en/messages.json' | ||
|
||
type TJson = typeof TranslationsJson; | ||
type Keys = keyof typeof TranslationsJson; | ||
|
||
// Gets a message from a given key | ||
type GetMessage<K extends Keys> = (typeof TranslationsJson)[K]['message']; | ||
|
||
// A message might have $1, etc. This will aggregate all these into a args tuple | ||
// Useful so we know how many args a given translation needs! | ||
// Can be used to find outdated translations that forgot to remove args, or translations that forgot args. | ||
type GetArgTuple< | ||
Message extends string, | ||
Acc extends unknown[] = [], | ||
> = Message extends '' | ||
? Acc | ||
: Message extends `${string}$${number}${infer Tail}` | ||
? GetArgTuple<Tail, [...Acc, unknown]> | ||
: Acc; | ||
|
||
// Yay JS. The first func sig are for cases where we have multiple params... | ||
type FuncSig1 = <K extends Keys>( | ||
key: K, | ||
...args: GetArgTuple<GetMessage<K>> | ||
) => string; | ||
|
||
// This second func sig is where developers use an array for multiple args. | ||
type FuncSig2 = <K extends Keys>( | ||
key: K, | ||
args: GetArgTuple<GetMessage<K>>, | ||
) => string; | ||
|
||
// A bit cheeky here but it works. | ||
// We declare that the translation can be either these 2 signatures | ||
// NOTE using intersection instead of unions by how functions are contravariant (or one of those terms). | ||
export type TranslationFn = FuncSig1 & FuncSig2; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -101,7 +101,7 @@ const getDisplayValues = ({ | |
} else if (isSmartTransactionCancelled) { | ||
return { | ||
title: t('smartTransactionCancelled'), | ||
description: t('smartTransactionCancelledDescription', [countdown]), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Perfect example! This translation doesn't need an argument! Thankfully from the files I could test (only typescript files), there weren't any issues where we were using translations but forgetting to pass args. |
||
description: t('smartTransactionCancelledDescription'), | ||
iconName: IconName.Danger, | ||
iconColor: IconColor.errorDefault, | ||
}; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
yarn verify-locales
still works if we just add these as comments - don't need to actually call the translations.