PoC - Typed Translations

ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.tsx

@@ -48,14 +48,14 @@ export default function HoldToRevealModal({
       : 'holdToRevealContentPrivateKey';
 
   // If this is done inline, verify-locales will output `Forbidden use of template strings in 't' function`
-  const holdToRevealContent1 = `${holdToRevealContent}1`;
-  const holdToRevealContent2 = `${holdToRevealContent}2`;
+  const holdToRevealContent1 = `${holdToRevealContent}1` as const;
+  const holdToRevealContent2 = `${holdToRevealContent}2` as const;
 
   // This is here to stop yarn verify-locales from removing these strings
-  t('holdToRevealContentPrivateKey1');
-  t('holdToRevealContentPrivateKey2');
-  t('holdToRevealContent1');
-  t('holdToRevealContent2');
+  // t('holdToRevealContentPrivateKey1');
+  // t('holdToRevealContentPrivateKey2');
+  // t('holdToRevealContent1');
+  // t('holdToRevealContent2');
 
   const MainContent = () => {
     return (

ui/components/app/name/name-details/name-details.tsx

@@ -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);
   }
   return nameSources[sourceId]?.label ?? sourceId;

ui/components/multichain/asset-picker-amount/asset-balance/asset-balance.tsx

@@ -30,7 +30,11 @@ export function AssetBalance({ asset, error }: AssetBalanceProps) {
       <AssetBalanceText asset={asset} balanceColor={balanceColor} />
       {error ? (
         <Text variant={TextVariant.bodySm} color={TextColor.errorDefault}>
-          . {t(error)}
+          .{' '}
+          {
+            // @ts-expect-error purposely widened string
+            t(error)
+          }
         </Text>
       ) : null}
     </Box>

ui/components/multichain/pages/connections/connections.tsx

@@ -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)
                   }
                   onActionClick={setShowAccountDisconnectedToast}
                 />

ui/contexts/i18n.types.d.ts

@@ -0,0 +1,36 @@
+import type TranslationsJson from '../../app/_locales/en/messages.json.d.ts';
+
+type TJson = typeof TranslationsJson;
+type Keys = keyof TJson;
+
+// 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;

ui/hooks/useI18nContext.js

@@ -7,7 +7,7 @@ import { I18nContext } from '../contexts/i18n';
  * A time saving shortcut to using useContext + I18ncontext in many
  * different places.
  *
- * @returns {Function} I18n function from contexts/I18n.js
+ * @returns {import('../contexts/i18n.types').TranslationFn} I18n function from contexts/I18n.js
  */
 export function useI18nContext() {
   return useContext(I18nContext);

ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx

@@ -101,7 +101,7 @@ const getDisplayValues = ({
   } else if (isSmartTransactionCancelled) {
     return {
       title: t('smartTransactionCancelled'),
-      description: t('smartTransactionCancelledDescription', [countdown]),
+      description: t('smartTransactionCancelledDescription'),
       iconName: IconName.Danger,
       iconColor: IconColor.errorDefault,
     };