Clear the clipboard after the seed phrase is pasted (#12828)

* Clear the clipboard after the seed phrase is pasted

On the "Import" page of the import onboarding flow, we now clear the
clipboard after the secret recovery phrase is pasted. This ensures that
the SRP isn't accidentally pasted somewhere else by the user, which can
be an easy and disastrous mistake to make.

* Clear clipboard during new onboarding flow as well

ui/components/ui/text-field/text-field.component.js

@@ -203,6 +203,7 @@ const TextField = ({
   min,
   max,
   autoComplete,
+  onPaste,
   ...textFieldProps
 }) => {
   const inputProps = themeToInputProps[theme]({
@@ -215,6 +216,16 @@ const TextField = ({
     autoComplete,
   });
 
+  if (onPaste) {
+    if (!inputProps.InputProps) {
+      inputProps.InputProps = {};
+    }
+    if (!inputProps.InputProps.inputProps) {
+      inputProps.InputProps.inputProps = {};
+    }
+    inputProps.InputProps.inputProps.onPaste = onPaste;
+  }
+
   return (
     <MaterialTextField
       error={Boolean(error)}
@@ -241,6 +252,7 @@ TextField.propTypes = {
   min: PropTypes.number,
   max: PropTypes.number,
   autoComplete: PropTypes.string,
+  onPaste: PropTypes.func,
 };
 
 export default withStyles(styles)(TextField);

ui/helpers/utils/util.js

@@ -424,3 +424,7 @@ export const toHumanReadableTime = (t, milliseconds) => {
   }
   return t('gasTimingHoursShort', [Math.ceil(seconds / 3600)]);
 };
+
+export function clearClipboard() {
+  window.navigator.clipboard.writeText('');
+}

ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js

@@ -7,6 +7,7 @@ import {
   INITIALIZE_SELECT_ACTION_ROUTE,
   INITIALIZE_END_OF_FLOW_ROUTE,
 } from '../../../../helpers/constants/routes';
+import { clearClipboard } from '../../../../helpers/utils/util';
 
 const { isValidMnemonic } = ethers.utils;
 
@@ -244,6 +245,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
             <textarea
               className="first-time-flow__textarea"
               onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
+              onPaste={clearClipboard}
               value={this.state.seedPhrase}
               placeholder={t('seedPhrasePlaceholder')}
               autoComplete="off"
@@ -256,6 +258,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
               value={this.state.seedPhrase}
               placeholder={t('seedPhrasePlaceholderPaste')}
               autoComplete="off"
+              onPaste={clearClipboard}
             />
           )}
           {seedPhraseError ? (

ui/pages/onboarding-flow/import-srp/import-srp.js

@@ -16,6 +16,7 @@ import {
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
 import { ONBOARDING_CREATE_PASSWORD_ROUTE } from '../../../helpers/constants/routes';
+import { clearClipboard } from '../../../helpers/utils/util';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
 export default function ImportSRP({ submitSecretRecoveryPhrase }) {
@@ -86,6 +87,7 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
               onChange={({ target: { value } }) =>
                 handleSecretRecoveryPhraseChange(value)
               }
+              onPaste={clearClipboard}
               autoComplete="off"
               autoCorrect="off"
             />