chore: return raw translation message if missing in steps section (#1848

) * chore: return raw key if translation is missing in steps * chore: tweak changeset --------- Co-authored-by: Magomed Khamidov <53529533+KosmosKey@users.noreply.github.com> Co-authored-by: Daniel Sinclair <d@niel.nyc>
rainbow-me · Mar 11, 2024 · df572f1 · df572f1
1 parent 74c0bcd
commit df572f1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/.changeset/thirty-years-mate.md b/.changeset/thirty-years-mate.md
@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Resolved an issue for Custom Wallets that displayed a "missing translation" error for instructions during connect and installation flows. Now Custom Wallets will display their original strings without attempted translation.
diff --git a/packages/rainbowkit/src/components/ConnectOptions/ConnectDetails.tsx b/packages/rainbowkit/src/components/ConnectOptions/ConnectDetails.tsx
@@ -860,10 +860,14 @@ export function InstructionMobileDetail({
             </Box>
             <Box display="flex" flexDirection="column" gap="4">
               <Text color="modalText" size="14" weight="bold">
-                {i18n.t(d.title)}
+                {i18n.t(d.title, undefined, {
+                  rawKeyIfTranslationMissing: true,
+                })}
               </Text>
               <Text color="modalTextSecondary" size="14" weight="medium">
-                {i18n.t(d.description)}
+                {i18n.t(d.description, undefined, {
+                  rawKeyIfTranslationMissing: true,
+                })}
               </Text>
             </Box>
           </Box>
@@ -947,10 +951,14 @@ export function InstructionExtensionDetail({
             </Box>
             <Box display="flex" flexDirection="column" gap="4">
               <Text color="modalText" size="14" weight="bold">
-                {i18n.t(d.title)}
+                {i18n.t(d.title, undefined, {
+                  rawKeyIfTranslationMissing: true,
+                })}
               </Text>
               <Text color="modalTextSecondary" size="14" weight="medium">
-                {i18n.t(d.description)}
+                {i18n.t(d.description, undefined, {
+                  rawKeyIfTranslationMissing: true,
+                })}
               </Text>
             </Box>
           </Box>
@@ -1036,10 +1044,14 @@ export function InstructionDesktopDetail({
             </Box>
             <Box display="flex" flexDirection="column" gap="4">
               <Text color="modalText" size="14" weight="bold">
-                {i18n.t(d.title)}
+                {i18n.t(d.title, undefined, {
+                  rawKeyIfTranslationMissing: true,
+                })}
               </Text>
               <Text color="modalTextSecondary" size="14" weight="medium">
-                {i18n.t(d.description)}
+                {i18n.t(d.description, undefined, {
+                  rawKeyIfTranslationMissing: true,
+                })}
               </Text>
             </Box>
           </Box>

diff --git a/packages/rainbowkit/src/locales/I18n.ts b/packages/rainbowkit/src/locales/I18n.ts
@@ -1,3 +1,7 @@
+interface TranslationOptions {
+  rawKeyIfTranslationMissing?: boolean;
+}
+
 type GenericTranslationObject = Record<string, any>;
 
 const defaultOptions = {
@@ -73,7 +77,11 @@ export class I18n {
     return translatedString;
   }
 
-  public t(key: string, replacements?: Record<string, string>): string {
+  public t(
+    key: string,
+    replacements?: Record<string, string>,
+    options?: TranslationOptions,
+  ): string {
     const translationKey = `${this.locale}.${key}`;
     const translation = this.translations[translationKey];
 
@@ -93,6 +101,12 @@ export class I18n {
         }
       }
 
+      // If translation is missing -> return the raw key instead.
+      // This is useful if someone were to create their own RainbowKit
+      // wallet with steps, but translations are missing. In this case
+      // we don't want to throw missing translation message.
+      if (options?.rawKeyIfTranslationMissing) return key;
+
       return this.missingMessage(key);
     }