Add obfuscation toggle for private key input

Author: ryanml

app/_locales/en/messages.json

@@ -6,7 +6,14 @@ import {
   TEXT_FIELD_SIZES,
   TEXT_FIELD_TYPES,
 } from '../../component-library';
+import {
+  Display,
+  AlignItems,
+  JustifyContent,
+} from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import Box from '../../ui/box';
+import ShowHideToggle from '../../ui/show-hide-toggle';
 import BottomButtons from './bottom-buttons';
 
 PrivateKeyImportView.propTypes = {
@@ -20,6 +27,7 @@ export default function PrivateKeyImportView({
 }) {
   const t = useI18nContext();
   const [privateKey, setPrivateKey] = useState('');
+  const [showPrivateKey, setShowPrivateKey] = useState(false);
 
   const warning = useSelector((state) => state.appState.warning);
 
@@ -36,22 +44,39 @@ export default function PrivateKeyImportView({
 
   return (
     <>
-      <FormTextField
-        id="private-key-box"
-        size={TEXT_FIELD_SIZES.LARGE}
-        autoFocus
-        type={TEXT_FIELD_TYPES.PASSWORD}
-        helpText={warning}
-        error
-        label={t('pastePrivateKey')}
-        value={privateKey}
-        onChange={(event) => setPrivateKey(event.target.value)}
-        inputProps={{
-          onKeyPress: handleKeyPress,
-        }}
-        marginBottom={4}
-      />
-
+      <Box
+        display={Display.Flex}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
+      >
+        <FormTextField
+          id="private-key-box"
+          size={TEXT_FIELD_SIZES.LARGE}
+          autoFocus
+          type={
+            showPrivateKey ? TEXT_FIELD_TYPES.TEXT : TEXT_FIELD_TYPES.PASSWORD
+          }
+          helpText={warning}
+          error
+          label={t('pastePrivateKey')}
+          value={privateKey}
+          onChange={(event) => setPrivateKey(event.target.value)}
+          inputProps={{
+            onKeyPress: handleKeyPress,
+          }}
+          marginBottom={4}
+        />
+        <Box marginTop={4}>
+          <ShowHideToggle
+            shown={showPrivateKey}
+            id="show-hide-private-key"
+            title={t('privateKeyShow')}
+            ariaLabelShown={t('privateKeyShown')}
+            ariaLabelHidden={t('privateKeyHidden')}
+            onChange={() => setShowPrivateKey(!showPrivateKey)}
+          />
+        </Box>
+      </Box>
       <BottomButtons
         importAccountFunc={_importAccountFunc}
         isPrimaryDisabled={privateKey === ''}