Add obfuscation toggle for private key input

ui/components/multichain/import-account/private-key.js

@@ -1,9 +1,16 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { TextFieldSize, TextFieldType } from '../../component-library';
-import { FormTextField } from '../../component-library/form-text-field/deprecated';
+
+import {
+  FormTextField,
+  TextFieldSize,
+  TextFieldType,
+} from '../../component-library';
+
 import { useI18nContext } from '../../../hooks/useI18nContext';
+
+import ShowHideToggle from '../../ui/show-hide-toggle';
 import BottomButtons from './bottom-buttons';
 
 export default function PrivateKeyImportView({
@@ -13,6 +20,8 @@ export default function PrivateKeyImportView({
   const t = useI18nContext();
   const [privateKey, setPrivateKey] = useState('');
 
+  const [showPrivateKey, setShowPrivateKey] = useState(false);
+
   const warning = useSelector((state) => state.appState.warning);
 
   function handleKeyPress(event) {
@@ -32,16 +41,28 @@ export default function PrivateKeyImportView({
         id="private-key-box"
         size={TextFieldSize.Lg}
         autoFocus
-        type={TextFieldType.Password}
-        helpText={warning}
         error
+        helpText={warning}
         label={t('pastePrivateKey')}
         value={privateKey}
         onChange={(event) => setPrivateKey(event.target.value)}
         inputProps={{
           onKeyPress: handleKeyPress,
         }}
         marginBottom={4}
+        type={showPrivateKey ? TextFieldType.Text : TextFieldType.Password}
+        textFieldProps={{
+          endAccessory: (
+            <ShowHideToggle
+              shown={showPrivateKey}
+              id="show-hide-private-key"
+              title={t('privateKeyShow')}
+              ariaLabelShown={t('privateKeyShown')}
+              ariaLabelHidden={t('privateKeyHidden')}
+              onChange={() => setShowPrivateKey(!showPrivateKey)}
+            />
+          ),
+        }}
       />
 
       <BottomButtons

ui/components/ui/show-hide-toggle/index.scss

@@ -6,6 +6,7 @@
     appearance: none;
 
     + .show-hide-toggle__label {
+      display: flex;
       cursor: pointer;
       user-select: none;
     }