feat: add localization support for auth flow (#1570)

* feat: add localization support for auth flow

* chore: changeset

---------

Co-authored-by: Daniel Sinclair <[email protected]>

.changeset/honest-cats-behave.md

@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Added localization support in the `Authentication` flow for SIWE

packages/rainbowkit/src/components/SignIn/SignIn.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useContext, useRef } from 'react';
 import { UserRejectedRequestError } from 'viem';
 import { useAccount, useNetwork, useSignMessage } from 'wagmi';
 import { touchableStyles } from '../../css/touchableStyles';
@@ -8,11 +8,13 @@ import { Box } from '../Box/Box';
 import { ActionButton } from '../Button/ActionButton';
 import { CloseButton } from '../CloseButton/CloseButton';
 import { useAuthenticationAdapter } from '../RainbowKitProvider/AuthenticationContext';
+import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { Text } from '../Text/Text';
 
 export const signInIcon = async () => (await import('./sign.png')).default;
 
 export function SignIn({ onClose }: { onClose: () => void }) {
+  const i18n = useContext(I18nContext);
   const [{ status, ...state }, setState] = React.useState<{
     status: 'idle' | 'signing' | 'verifying';
     errorMessage?: string;
@@ -29,7 +31,7 @@ export function SignIn({ onClose }: { onClose: () => void }) {
     } catch {
       setState((x) => ({
         ...x,
-        errorMessage: 'Error preparing message, please retry!',
+        errorMessage: i18n.t('sign_in.message.preparing_error'),
         status: 'idle',
       }));
     }
@@ -84,7 +86,7 @@ export function SignIn({ onClose }: { onClose: () => void }) {
 
         return setState((x) => ({
           ...x,
-          errorMessage: 'Error signing message, please retry!',
+          errorMessage: i18n.t('sign_in.signature.signing_error'),
           status: 'idle',
         }));
       }
@@ -102,13 +104,13 @@ export function SignIn({ onClose }: { onClose: () => void }) {
       } catch {
         return setState((x) => ({
           ...x,
-          errorMessage: 'Error verifying signature, please retry!',
+          errorMessage: i18n.t('sign_in.signature.verifying_error'),
           status: 'idle',
         }));
       }
     } catch {
       setState({
-        errorMessage: 'Oops, something went wrong!',
+        errorMessage: i18n.t('sign_in.signature.oops_error'),
         status: 'idle',
       });
     }
@@ -154,7 +156,7 @@ export function SignIn({ onClose }: { onClose: () => void }) {
               textAlign="center"
               weight="heavy"
             >
-              Verify your account
+              {i18n.t('sign_in.label')}
             </Text>
           </Box>
           <Box
@@ -168,8 +170,7 @@ export function SignIn({ onClose }: { onClose: () => void }) {
               size={mobile ? '16' : '14'}
               textAlign="center"
             >
-              To finish connecting, you must sign a message in your wallet to
-              verify that you are the owner of this account.
+              {i18n.t('sign_in.description')}
             </Text>
             {status === 'idle' && state.errorMessage ? (
               <Text
@@ -197,12 +198,12 @@ export function SignIn({ onClose }: { onClose: () => void }) {
             }
             label={
               !state.nonce
-                ? 'Preparing message...'
+                ? i18n.t('sign_in.message.preparing')
                 : status === 'signing'
-                ? 'Waiting for signature...'
+                ? i18n.t('sign_in.signature.waiting')
                 : status === 'verifying'
-                ? 'Verifying signature...'
-                : 'Send message'
+                ? i18n.t('sign_in.signature.verifying')
+                : i18n.t('sign_in.message.send')
             }
             onClick={signIn}
             size={mobile ? 'large' : 'medium'}
@@ -234,7 +235,7 @@ export function SignIn({ onClose }: { onClose: () => void }) {
                 size={mobile ? '16' : '14'}
                 weight="bold"
               >
-                Cancel
+                {i18n.t('sign_in.message.cancel')}
               </Text>
             </Box>
           )}

packages/rainbowkit/src/locales/ar_AR.json

@@ -20,6 +20,23 @@
       "label": "تعلم المزيد"
     }
   },
+  "sign_in": {
+    "label": "تحقق من حسابك",
+    "description": "لإنهاء الاتصال، يجب عليك توقيع رسالة في محفظتك للتحقق من أنك صاحب هذا الحساب.",
+    "message": {
+      "send": "إرسال الرسالة",
+      "preparing": "جارٍ تجهيز الرسالة...",
+      "cancel": "إلغاء",
+      "preparing_error": "خطأ في تجهيز الرسالة، يرجى المحاولة مرة أخرى!"
+    },
+    "signature": {
+      "waiting": "انتظار التوقيع...",
+      "verifying": "جار التحقق من التوقيع...",
+      "signing_error": "خطأ في توقيع الرسالة، يرجى المحاولة مرة أخرى!",
+      "verifying_error": "خطأ في التحقق من التوقيع، يرجى المحاولة مرة أخرى!",
+      "oops_error": "عذرًا، حدث خطأ ما!"
+    }
+  },
   "connect": {
     "label": "اتصل",
     "title": "اتصال بالمحفظة",

packages/rainbowkit/src/locales/en_US.json

@@ -22,6 +22,24 @@
     }
   },
 
+  "sign_in": {
+    "label": "Verify your account",
+    "description": "To finish connecting, you must sign a message in your wallet to verify that you are the owner of this account.",
+    "message": {
+      "send": "Send message",
+      "preparing": "Preparing message...",
+      "cancel": "Cancel",
+      "preparing_error": "Error preparing message, please retry!"
+    },
+    "signature": {
+      "waiting": "Waiting for signature...",
+      "verifying": "Verifying signature...",
+      "signing_error": "Error signing message, please retry!",
+      "verifying_error": "Error verifying signature, please retry!",
+      "oops_error": "Oops, something went wrong!"
+    }
+  },
+
   "connect": {
     "label": "Connect",
     "title": "Connect a Wallet",

packages/rainbowkit/src/locales/es_419.json

@@ -20,6 +20,23 @@
       "label": "Obtener más información"
     }
   },
+  "sign_in": {
+    "label": "Verifica tu cuenta",
+    "description": "Para terminar de conectar, debes firmar un mensaje en tu billetera para verificar que eres el propietario de esta cuenta.",
+    "message": {
+      "send": "Enviar mensaje",
+      "preparing": "Preparando mensaje...",
+      "cancel": "Cancelar",
+      "preparing_error": "Error al preparar el mensaje, ¡intenta de nuevo!"
+    },
+    "signature": {
+      "waiting": "Esperando firma...",
+      "verifying": "Verificando firma...",
+      "signing_error": "Error al firmar el mensaje, ¡intenta de nuevo!",
+      "verifying_error": "Error al verificar la firma, ¡intenta de nuevo!",
+      "oops_error": "¡Ups! Algo salió mal."
+    }
+  },
   "connect": {
     "label": "Conectar",
     "title": "Conectar una billetera",

packages/rainbowkit/src/locales/fr_FR.json

@@ -20,6 +20,23 @@
       "label": "En savoir plus"
     }
   },
+  "sign_in": {
+    "label": "Vérifiez votre compte",
+    "description": "Pour terminer la connexion, vous devez signer un message dans votre portefeuille pour vérifier que vous êtes le propriétaire de ce compte.",
+    "message": {
+      "send": "Envoyer le message",
+      "preparing": "Préparation du message...",
+      "cancel": "Annuler",
+      "preparing_error": "Erreur lors de la préparation du message, veuillez réessayer!"
+    },
+    "signature": {
+      "waiting": "En attente de la signature...",
+      "verifying": "Vérification de la signature...",
+      "signing_error": "Erreur lors de la signature du message, veuillez réessayer!",
+      "verifying_error": "Erreur lors de la vérification de la signature, veuillez réessayer!",
+      "oops_error": "Oups, quelque chose a mal tourné!"
+    }
+  },
   "connect": {
     "label": "Connecter",
     "title": "Connecter un portefeuille",

packages/rainbowkit/src/locales/hi_IN.json

@@ -20,6 +20,23 @@
       "label": "और जानें"
     }
   },
+  "sign_in": {
+    "label": "अपने खाते की पुष्टि करें",
+    "description": "जुड़ने को पूरा करने के लिए, आपको अपने बटुए में एक संदेश पर हस्ताक्षर करना होगा ताकि पुष्टि हो सके कि आप इस खाते के मालिक हैं।",
+    "message": {
+      "send": "संदेश भेजें",
+      "preparing": "संदेश तैयार कर रहा है...",
+      "cancel": "रद्द करें",
+      "preparing_error": "संदेश तैयार करते समय त्रुटि, कृपया पुनः प्रयास करें!"
+    },
+    "signature": {
+      "waiting": "हस्ताक्षर का इंतजार कर रहा है...",
+      "verifying": "हस्ताक्षर की पुष्टि की जा रही है...",
+      "signing_error": "संदेश पर हस्ताक्षर करते समय त्रुटि, कृपया पुनः प्रयास करें!",
+      "verifying_error": "हस्ताक्षर की पुष्टि में त्रुटि, कृपया पुनः प्रयास करें!",
+      "oops_error": "ओह, कुछ गलत हो गया!"
+    }
+  },
   "connect": {
     "label": "कनेक्ट करें",
     "title": "वॉलेट को कनेक्ट करें",

packages/rainbowkit/src/locales/id_ID.json

@@ -20,6 +20,23 @@
       "label": "Pelajari lebih lanjut"
     }
   },
+  "sign_in": {
+    "label": "Verifikasi akun Anda",
+    "description": "Untuk menyelesaikan koneksi, Anda harus menandatangani sebuah pesan di dompet Anda untuk memastikan bahwa Anda adalah pemilik dari akun ini.",
+    "message": {
+      "send": "Kirim pesan",
+      "preparing": "Mempersiapkan pesan...",
+      "cancel": "Batal",
+      "preparing_error": "Kesalahan dalam mempersiapkan pesan, silakan coba lagi!"
+    },
+    "signature": {
+      "waiting": "Menunggu tanda tangan...",
+      "verifying": "Memverifikasi tanda tangan...",
+      "signing_error": "Kesalahan dalam menandatangani pesan, silakan coba lagi!",
+      "verifying_error": "Kesalahan dalam memverifikasi tanda tangan, silakan coba lagi!",
+      "oops_error": "Ups, ada yang salah!"
+    }
+  },
   "connect": {
     "label": "Hubungkan",
     "title": "Hubungkan Dompet",

packages/rainbowkit/src/locales/ja_JP.json

@@ -20,6 +20,23 @@
       "label": "詳しくはこちら"
     }
   },
+  "sign_in": {
+    "label": "アカウントを確認する",
+    "description": "接続を完了するには、このアカウントの所有者であることを確認するためにウォレットでメッセージに署名する必要があります。",
+    "message": {
+      "send": "メッセージを送信",
+      "preparing": "メッセージの準備中...",
+      "cancel": "キャンセル",
+      "preparing_error": "メッセージの準備中にエラーが発生しました、再試行してください！"
+    },
+    "signature": {
+      "waiting": "署名を待っています...",
+      "verifying": "署名を検証中...",
+      "signing_error": "メッセージの署名中にエラーが発生しました、再試行してください！",
+      "verifying_error": "署名の検証中にエラーが発生しました、再試行してください！",
+      "oops_error": "おっと、何かが間違っていました！"
+    }
+  },
   "connect": {
     "label": "接続",
     "title": "ウォレットを接続する",

packages/rainbowkit/src/locales/ko_KR.json

@@ -20,6 +20,23 @@
       "label": "더 알아보기"
     }
   },
+  "sign_in": {
+    "label": "계정을 확인하세요",
+    "description": "연결을 완료하려면 이 계정의 소유자임을 확인하기 위해 지갑에 메시지에 서명해야 합니다.",
+    "message": {
+      "send": "메시지 보내기",
+      "preparing": "메시지 준비 중...",
+      "cancel": "취소",
+      "preparing_error": "메시지 준비 중 오류가 발생했습니다. 다시 시도하세요!"
+    },
+    "signature": {
+      "waiting": "서명을 기다리는 중...",
+      "verifying": "서명 검증 중...",
+      "signing_error": "메시지 서명 중 오류가 발생했습니다. 다시 시도하세요!",
+      "verifying_error": "서명 검증 중 오류가 발생했습니다. 다시 시도하세요!",
+      "oops_error": "앗, 문제가 발생했습니다!"
+    }
+  },
   "connect": {
     "label": "연결",
     "title": "지갑 연결",

packages/rainbowkit/src/locales/pt_BR.json

@@ -20,6 +20,23 @@
       "label": "Saiba mais"
     }
   },
+  "sign_in": {
+    "label": "Verifique sua conta",
+    "description": "Para concluir a conexão, você deve assinar uma mensagem em sua carteira para confirmar que você é o proprietário desta conta.",
+    "message": {
+      "send": "Enviar mensagem",
+      "preparing": "Preparando mensagem...",
+      "cancel": "Cancelar",
+      "preparing_error": "Erro ao preparar a mensagem, tente novamente!"
+    },
+    "signature": {
+      "waiting": "Aguardando assinatura...",
+      "verifying": "Verificando assinatura...",
+      "signing_error": "Erro ao assinar a mensagem, tente novamente!",
+      "verifying_error": "Erro ao verificar assinatura, tente novamente!",
+      "oops_error": "Ops, algo deu errado!"
+    }
+  },
   "connect": {
     "label": "Conectar",
     "title": "Conectar uma Carteira",

packages/rainbowkit/src/locales/ru_RU.json

@@ -20,6 +20,23 @@
       "label": "Узнать больше"
     }
   },
+  "sign_in": {
+    "label": "Проверьте ваш аккаунт",
+    "description": "Чтобы завершить подключение, вы должны подписать сообщение в вашем кошельке, чтобы подтвердить, что вы являетесь владельцем этого аккаунта.",
+    "message": {
+      "send": "Отправить сообщение",
+      "preparing": "Подготовка сообщения...",
+      "cancel": "Отмена",
+      "preparing_error": "Ошибка при подготовке сообщения, пожалуйста, попробуйте снова!"
+    },
+    "signature": {
+      "waiting": "Ожидание подписи...",
+      "verifying": "Проверка подписи...",
+      "signing_error": "Ошибка при подписании сообщения, пожалуйста, попробуйте снова!",
+      "verifying_error": "Ошибка при проверке подписи, пожалуйста, попробуйте снова!",
+      "oops_error": "Ой, что-то пошло не так!"
+    }
+  },
   "connect": {
     "label": "Подключить",
     "title": "Подключить кошелек",

packages/rainbowkit/src/locales/th_TH.json

@@ -20,6 +20,23 @@
       "label": "เรียนรู้เพิ่มเติม"
     }
   },
+  "sign_in": {
+    "label": "ยืนยันบัญชีของคุณ",
+    "description": "เพื่อการเชื่อมต่อที่สมบูรณ์, คุณต้องลงนามในข้อความในกระเป๋าเงินของคุณเพื่อยืนยันว่าคุณเป็นเจ้าของบัญชีนี้",
+    "message": {
+      "send": "ส่งข้อความ",
+      "preparing": "กำลังเตรียมข้อความ...",
+      "cancel": "ยกเลิก",
+      "preparing_error": "เกิดข้อผิดพลาดในการเตรียมข้อความ โปรดลองใหม่!"
+    },
+    "signature": {
+      "waiting": "รอการลงนาม...",
+      "verifying": "กำลังตรวจสอบลายเซ็น...",
+      "signing_error": "เกิดข้อผิดพลาดในการลงนามในข้อความ โปรดลองใหม่!",
+      "verifying_error": "เกิดข้อผิดพลาดในการตรวจสอบลายเซ็น โปรดลองใหม่!",
+      "oops_error": "อ๊ะ, เกิดข้อผิดพลาดบางอย่าง!"
+    }
+  },
   "connect": {
     "label": "เชื่อมต่อ",
     "title": "เชื่อมต่อกระเป๋าเงิน",

packages/rainbowkit/src/locales/tr_TR.json

@@ -20,6 +20,23 @@
       "label": "Daha fazla bilgi edinin"
     }
   },
+  "sign_in": {
+    "label": "Hesabınızı doğrulayın",
+    "description": "Bağlantıyı tamamlamak için, bu hesabın sahibi olduğunuzu doğrulamak için cüzdanınızdaki bir mesaja imza atmalısınız.",
+    "message": {
+      "send": "Mesajı gönder",
+      "preparing": "Mesaj hazırlanıyor...",
+      "cancel": "İptal",
+      "preparing_error": "Mesajı hazırlarken hata oluştu, lütfen tekrar deneyin!"
+    },
+    "signature": {
+      "waiting": "İmza bekleniyor...",
+      "verifying": "İmza doğrulanıyor...",
+      "signing_error": "Mesajı imzalarken hata oluştu, lütfen tekrar deneyin!",
+      "verifying_error": "İmza doğrulanırken hata oluştu, lütfen tekrar deneyin!",
+      "oops_error": "Hata, bir şeyler yanlış gitti!"
+    }
+  },
   "connect": {
     "label": "Bağlan",
     "title": "Bir Cüzdanı Bağla",