From fe840da357a6890d2520f344bcce0e3f13c34144 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Mon, 3 Jan 2022 21:50:06 +0100
Subject: [PATCH] Disable google translate on mnemonic

---
 CHANGELOG.md                             |  1 +
 src/popup/component/NoTranslate/index.js | 18 +++++++++
 src/popup/pages/BackupMnemonics/index.js | 50 ++++++++++++++----------
 src/popup/pages/RevealSeed/index.js      |  3 +-
 src/popup/pages/ShowMnemonic/index.js    | 13 +++---
 5 files changed, 58 insertions(+), 27 deletions(-)
 create mode 100644 src/popup/component/NoTranslate/index.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c8fc778..e8e549ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ Little things:
 - Creating new wallets now generates 24-word mnemonic.
 - Popup is now wider.
 - Buttons to confirm wallet resetting are now red and no longer swapped.
+- Blocked Google Translate from translating displayed mnemonic.
 
 ## 1.0.0
 
diff --git a/src/popup/component/NoTranslate/index.js b/src/popup/component/NoTranslate/index.js
new file mode 100644
index 00000000..6685b63d
--- /dev/null
+++ b/src/popup/component/NoTranslate/index.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+/**
+ * Disable Google Translate on child element
+ * https://cloud.google.com/translate/troubleshooting
+ *
+ * Main usage is to display generated mnemonic without modifications, and
+ * without sending it to Google servers.
+ *
+ * @param { { children: React.ReactNode } } props
+ */
+export default function NoTranslate(props) {
+  return (
+    <span className="notranslate" translate="no">
+      {props.children}
+    </span>
+  )
+}
diff --git a/src/popup/pages/BackupMnemonics/index.js b/src/popup/pages/BackupMnemonics/index.js
index fbf8e4d8..eb4bc76d 100644
--- a/src/popup/pages/BackupMnemonics/index.js
+++ b/src/popup/pages/BackupMnemonics/index.js
@@ -9,6 +9,7 @@ import { sendMsg } from "../../../utils/commonMsg";
 import Button from "../../component/Button";
 import CustomView from "../../component/CustomView";
 import Toast from "../../component/Toast";
+import NoTranslate from "../../component/NoTranslate";
 import "./index.scss";
 class BackupMnemonics extends React.Component {
   constructor(props) {
@@ -115,30 +116,37 @@ class BackupMnemonics extends React.Component {
     }
   };
   renderSelectedMne = () => {
-    return (<div className="mne-container mne-select-container">
-      {this.state.selectList.map((item, index) => {
-        return (<p
-          key={index + ""}
-          onClick={() => this.onClickTopItem(item, index)}
-          className={"mne-item mne-item-common click-cursor"}>{index + 1 + ". " + item.name}</p>)
-      })}
-    </div>)
+    return (
+      <NoTranslate>
+        <div className="mne-container mne-select-container">
+          {this.state.selectList.map((item, index) => {
+            return (<p
+              key={index + ""}
+              onClick={() => this.onClickTopItem(item, index)}
+              className={"mne-item mne-item-common click-cursor"}>{index + 1 + ". " + item.name}</p>)
+          })}
+        </div>
+      </NoTranslate>
+    )
   }
   renderMneList = () => {
     return (
-      <div className={"mne-container"}>
-        {this.state.list.map((item, index) => {
-          return (
-            <p
-              key={index + ""}
-              onClick={() => this.onClickBottomItem(item, index)}
-              className={cx("mne-item mne-item-record click-cursor", {
-                "mne-item-select": item.selected,
-              })}
-            >{item.name}</p>)
-        })
-        }
-      </div>)
+      <NoTranslate>
+        <div className={"mne-container"}>
+          {this.state.list.map((item, index) => {
+            return (
+              <p
+                key={index + ""}
+                onClick={() => this.onClickBottomItem(item, index)}
+                className={cx("mne-item mne-item-record click-cursor", {
+                  "mne-item-select": item.selected,
+                })}
+              >{item.name}</p>)
+          })
+          }
+        </div>
+      </NoTranslate>
+    )
   }
   renderBottomBtn = () => {
     return (
diff --git a/src/popup/pages/RevealSeed/index.js b/src/popup/pages/RevealSeed/index.js
index 7dde8124..20649e1a 100644
--- a/src/popup/pages/RevealSeed/index.js
+++ b/src/popup/pages/RevealSeed/index.js
@@ -5,6 +5,7 @@ import { SEC_SHOW_MNEMONIC } from "../../../constant/walletType";
 import { getLanguage } from "../../../i18n";
 import { sendMsg } from "../../../utils/commonMsg";
 import CustomView from "../../component/CustomView";
+import NoTranslate from "../../component/NoTranslate";
 import SecurityPwd from "../../component/SecurityPwd";
 import Toast from "../../component/Toast";
 import "./index.scss"
@@ -32,7 +33,7 @@ class RevealSeedPage extends React.Component {
   }
 
   renderInput = () => {
-    return(<p className={"reveal-text"}>{this.state.mnemonic}</p>)
+    return(<NoTranslate><p className={"reveal-text"}>{this.state.mnemonic}</p></NoTranslate>)
   }
 
   onClickCheck = (password) => {
diff --git a/src/popup/pages/ShowMnemonic/index.js b/src/popup/pages/ShowMnemonic/index.js
index 5eee10c1..779c6070 100644
--- a/src/popup/pages/ShowMnemonic/index.js
+++ b/src/popup/pages/ShowMnemonic/index.js
@@ -5,6 +5,7 @@ import { getLanguage } from "../../../i18n";
 import { sendMsg } from "../../../utils/commonMsg";
 import Button from "../../component/Button";
 import CustomView from "../../component/CustomView";
+import NoTranslate from "../../component/NoTranslate";
 import "./index.scss";
 class ShowMnemonic extends React.Component {
   constructor(props) {
@@ -39,11 +40,13 @@ class ShowMnemonic extends React.Component {
 
   showMne = () => {
     return (
-      <div className={"mne-container"}>
-        {this.state.mnemonic.split(" ").map((item, index) => {
-          return <p key={index + ""} className="mne-item mne-item-common">{index + 1 + ". " + item}</p>;
-        })}
-      </div>
+      <NoTranslate>
+        <div className={"mne-container"}>
+          {this.state.mnemonic.split(" ").map((item, index) => {
+            return <p key={index + ""} className="mne-item mne-item-common">{index + 1 + ". " + item}</p>;
+          })}
+        </div>
+      </NoTranslate>
     );
   };
   goToNext = () => {