fix: auto browser language translation for seed phrases / private keys (

#1544)
rainbow-me · May 16, 2024 · 52e1dc8 · 52e1dc8
1 parent 82a8c62
commit 52e1dc8
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 4 deletions.
diff --git a/src/design-system/components/Box/Box.tsx b/src/design-system/components/Box/Box.tsx
@@ -1,6 +1,6 @@
 import type * as Polymorphic from '@radix-ui/react-polymorphic';
 import clsx, { ClassValue } from 'clsx';
-import React, { forwardRef } from 'react';
+import React, { HTMLAttributes, forwardRef } from 'react';
 
 import {
   BoxStyles,
@@ -41,6 +41,7 @@ export type BoxProps = Omit<BoxStyles, 'background'> & {
   isModal?: boolean;
   isExplainerSheet?: boolean;
   testId?: string;
+  translate?: HTMLAttributes<unknown>['translate'];
   onKeyDown?: React.KeyboardEventHandler;
   tabIndex?: number;
 };
@@ -54,6 +55,7 @@ export const Box = forwardRef(function Box(
     isModal,
     isExplainerSheet,
     testId,
+    translate,
     ...props
   },
   ref,
@@ -123,6 +125,7 @@ export const Box = forwardRef(function Box(
       data-is-modally-presented={isModal || undefined}
       data-is-explainer-sheet={isExplainerSheet || undefined}
       data-testid={testId}
+      translate={translate}
       // Since Box is a primitive component, it needs to spread props
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...restProps}

diff --git a/src/design-system/components/Text/Text.tsx b/src/design-system/components/Text/Text.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 
 import { TextStyles, textStyles } from '../../styles/core.css';
 import { Box } from '../Box/Box';
@@ -21,6 +21,7 @@ export interface TextProps {
   whiteSpace?: TextStyles['whiteSpace'];
   textShadow?: TextStyles['textShadow'];
   fontFamily?: TextStyles['fontFamily'];
+  translate?: HTMLAttributes<unknown>['translate'];
 }
 
 export function Text({
@@ -38,6 +39,7 @@ export function Text({
   whiteSpace,
   textShadow,
   fontFamily = 'rounded',
+  translate,
 }: TextProps) {
   return (
     <Box
@@ -62,6 +64,7 @@ export function Text({
       testId={testId}
       marginVertical={webkitBackgroundClip === 'text' ? '-6px' : undefined}
       paddingVertical={webkitBackgroundClip === 'text' ? '6px' : undefined}
+      translate={translate}
     >
       {children}
     </Box>

diff --git a/src/entries/popup/components/SeedPhraseTable/SeedPhraseTable.tsx b/src/entries/popup/components/SeedPhraseTable/SeedPhraseTable.tsx
@@ -49,6 +49,7 @@ export default function SeedPhraseTable({ seed }: { seed: string }) {
                       color="label"
                       align="center"
                       testId={`seed_word_${index + 1}`}
+                      translate="no"
                     >
                       {word}
                     </Text>
@@ -105,6 +106,7 @@ export default function SeedPhraseTable({ seed }: { seed: string }) {
                       color="label"
                       align="center"
                       testId={`seed_word_${index + 7}`}
+                      translate="no"
                     >
                       {word}
                     </Text>

diff --git a/src/entries/popup/components/SeedVerifyQuiz/SeedVerifyQuiz.tsx b/src/entries/popup/components/SeedVerifyQuiz/SeedVerifyQuiz.tsx
@@ -119,7 +119,13 @@ const SeedWordRow = ({
         </Box>
 
         <Box style={{ width: 57 + additionalWidth }}>
-          <Text size="14pt" weight="bold" color="label" align="left">
+          <Text
+            size="14pt"
+            weight="bold"
+            color="label"
+            align="left"
+            translate="no"
+          >
             {word}
           </Text>
         </Box>

diff --git a/src/entries/popup/pages/settings/walletsAndKeys/privateKey/privateKey.tsx b/src/entries/popup/pages/settings/walletsAndKeys/privateKey/privateKey.tsx
@@ -67,7 +67,12 @@ export function PrivateKey() {
             wordBreak: 'break-all',
           }}
         >
-          <Text size="14pt" weight="bold" testId={'private-key-hash'}>
+          <Text
+            size="14pt"
+            weight="bold"
+            testId={'private-key-hash'}
+            translate="no"
+          >
             {privKey}
           </Text>
         </Box>