Merged suggestions from @georgewrmarshall and @NidhiKJha, then contin…

…ued to refine

app/scripts/account-import-strategies/index.js

@@ -42,7 +42,7 @@ const accountImporter = {
       try {
         if (
           !isValidPrivate(buffer) ||
-          getBinarySize(prefixedPrivateKey) !== 66 // isValidPrivate() will let a key of 63 hex digits through without complaining, this line ensures 64 hex digits + '0x' = 66 digits
+          getBinarySize(prefixedPrivateKey) !== 64 + '0x'.length // Fixes issue #17719 -- isValidPrivate() will let a key of 63 hex digits through without complaining, this line ensures 64 hex digits + '0x' = 66 digits
         ) {
           throw new Error(`t('importAccountErrorNotAValidPrivateKey')`);
         }

test/e2e/tests/from-import-ui.spec.js

@@ -396,7 +396,7 @@ describe('MetaMask Import UI', function () {
 
         // error should occur
         await driver.waitForSelector({
-          css: '.form-field__error',
+          css: '.mm-help-text',
           text: 'The account you are trying to import is a duplicate',
         });
       },

test/e2e/tests/nfts.spec.js

@@ -131,7 +131,7 @@ describe('NFTs', function () {
         // Verify transaction
         const completedTx = await driver.findElement('.list-item__title');
         const completedTxText = await completedTx.getText();
-        assert.equal(completedTxText, 'Approve TDC spending cap');
+        assert.equal(completedTxText, 'Approve token spending cap');
       },
     );
   });

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

@@ -103,7 +103,6 @@ export const FormTextField = ({
     />
     {helpText && (
       <HelpText
-        error={error}
         severity={error && SEVERITIES.DANGER}
         marginTop={1}
         {...helpTextProps}

ui/components/component-library/help-text/help-text.js

@@ -47,7 +47,7 @@ export const HelpText = ({
 };
 HelpText.propTypes = {
   /**
-   * The color of the HelpText will be overridden if error is true
+   * The color of the HelpText will be overridden if there is a severity passed
    * Defaults to Color.textDefault
    */
   color: PropTypes.oneOf(Object.values(TextColor)),

ui/components/component-library/index.js

@@ -26,7 +26,7 @@ export { Label } from './label';
 export { PickerNetwork } from './picker-network';
 export { Tag } from './tag';
 export { TagUrl } from './tag-url';
-export { Text, TEXT_DIRECTIONS } from './text';
+export { Text, TEXT_DIRECTIONS, INVISIBLE_CHARACTER } from './text';
 export { Input, INPUT_TYPES } from './input';
 export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
 export { TextFieldSearch } from './text-field-search';

ui/components/component-library/text/index.js

@@ -1,2 +1,2 @@
 export { Text } from './text';
-export { TEXT_DIRECTIONS } from './text.constants';
+export { TEXT_DIRECTIONS, INVISIBLE_CHARACTER } from './text.constants';

ui/components/component-library/text/text.constants.js

@@ -3,3 +3,9 @@ export const TEXT_DIRECTIONS = {
   RIGHT_TO_LEFT: 'rtl',
   AUTO: 'auto',
 };
+
+/**
+ * The INVISIBLE_CHARACTER is a very useful tool if you want to make sure a line of text
+ * takes up vertical space even if it's empty.
+ */
+export const INVISIBLE_CHARACTER = '\u200d';

ui/helpers/utils/accounts.js

@@ -1,3 +1,5 @@
+import { INVISIBLE_CHARACTER } from '../../components/component-library';
+
 export function getAccountNameErrorMessage(
   accounts,
   context,
@@ -26,7 +28,7 @@ export function getAccountNameErrorMessage(
 
   let errorMessage;
   if (isValidAccountName) {
-    errorMessage = '\u200d'; // This is Unicode for an invisible character, so the spacing stays constant
+    errorMessage = INVISIBLE_CHARACTER; // Using an invisible character, so the spacing stays constant
   } else if (isDuplicateAccountName) {
     errorMessage = context.t('accountNameDuplicate');
   } else if (isReservedAccountName) {

ui/pages/create-account/import-account/bottom-buttons.js

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import {
-  BUTTON_SECONDARY_SIZES,
   ButtonPrimary,
   ButtonSecondary,
+  BUTTON_SECONDARY_SIZES,
 } from '../../../components/component-library';
 import Box from '../../../components/ui/box/box';
 import { DISPLAY } from '../../../helpers/constants/design-system';
@@ -24,7 +24,7 @@ export default function BottomButtons({
   const dispatch = useDispatch();
 
   return (
-    <Box gap={4} display={DISPLAY.FLEX}>
+    <Box display={DISPLAY.FLEX}>
       <ButtonSecondary
         onClick={() => {
           dispatch(actions.hideWarning());

ui/pages/create-account/import-account/bottom-button.stories.js → ui/pages/create-account/import-account/bottom-buttons.stories.js

@@ -3,12 +3,8 @@ import BottomButtons from './bottom-buttons';
 
 export default {
   title: 'Pages/CreateAccount/ImportAccount/BottomButtons',
+  component: BottomButtons,
   argTypes: {
-    importAccountFunc: {
-      control: {
-        type: 'function',
-      },
-    },
     isPrimaryDisabled: {
       control: {
         type: 'boolean',

ui/pages/create-account/import-account/import-account.js

@@ -123,7 +123,7 @@ export default function NewAccountImportForm() {
         borderColor={BorderColor.borderDefault}
       >
         <Text variant={TextVariant.headingLg}>{t('importAccount')}</Text>
-        <Text variant={TextVariant.bodySm}>
+        <Text variant={TextVariant.bodySm} marginTop={2}>
           {t('importAccountMsg')}{' '}
           <ButtonLink
             size={Size.inherit}

ui/pages/create-account/import-account/import-account.stories.js

@@ -1,13 +1,11 @@
 import React from 'react';
-
 import NewAccountImportForm from '.';
 
 export default {
   title: 'Pages/CreateAccount/ImportAccount',
+  component: NewAccountImportForm,
 };
 
-export const DefaultStory = (args) => {
-  return <NewAccountImportForm {...args} />;
-};
+export const DefaultStory = (args) => <NewAccountImportForm {...args} />;
 
 DefaultStory.storyName = 'Default';

ui/pages/create-account/import-account/json.js

@@ -4,17 +4,16 @@ import { useSelector } from 'react-redux';
 import FileInput from 'react-simple-file-input';
 import {
   ButtonLink,
+  FormTextField,
+  INVISIBLE_CHARACTER,
+  Text,
   TEXT_FIELD_SIZES,
   TEXT_FIELD_TYPES,
-  Text,
-  FormTextField,
 } from '../../../components/component-library';
-
 import {
   Size,
   TextVariant,
   TEXT_ALIGN,
-  SEVERITIES,
 } from '../../../helpers/constants/design-system';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -33,10 +32,6 @@ export default function JsonImportSubview({ importAccountFunc }) {
 
   const isPrimaryDisabled = password === '' || fileContents === '';
 
-  function handleOnChange(event) {
-    setPassword(event.target.value);
-  }
-
   function handleKeyPress(event) {
     if (!isPrimaryDisabled && event.key === 'Enter') {
       event.preventDefault();
@@ -83,16 +78,17 @@ export default function JsonImportSubview({ importAccountFunc }) {
         size={TEXT_FIELD_SIZES.LARGE}
         autoFocus
         type={TEXT_FIELD_TYPES.PASSWORD}
-        helpText={warning}
-        helpTextProps={{ severity: SEVERITIES.DANGER }}
+        helpText={warning || INVISIBLE_CHARACTER} // The INVISIBLE_CHARACTER ensures that the error message takes up vertical space even if there's no error message
+        error
         placeholder={t('enterPassword')}
         value={password}
-        onChange={handleOnChange}
+        onChange={(event) => setPassword(event.target.value)}
         inputProps={{
           onKeyPress: handleKeyPress,
         }}
-        marginBottom={8}
+        marginBottom={2}
       />
+
       <BottomButtons
         importAccountFunc={_importAccountFunc}
         isPrimaryDisabled={isPrimaryDisabled}

ui/pages/create-account/import-account/json.stories.js

@@ -3,13 +3,7 @@ import JsonImportSubview from './json';
 
 export default {
   title: 'Pages/CreateAccount/ImportAccount/JsonImportSubview',
-  argTypes: {
-    importAccountFunc: {
-      control: {
-        type: 'function',
-      },
-    },
-  },
+  component: JsonImportSubview,
 };
 
 export const DefaultStory = () => <JsonImportSubview />;

ui/pages/create-account/import-account/private-key.js

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { SEVERITIES } from '../../../helpers/constants/design-system';
 import {
   FormTextField,
+  INVISIBLE_CHARACTER,
+  TEXT_FIELD_SIZES,
   TEXT_FIELD_TYPES,
 } from '../../../components/component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -19,10 +20,6 @@ export default function PrivateKeyImportView({ importAccountFunc }) {
 
   const warning = useSelector((state) => state.appState.warning);
 
-  function handleOnChange(event) {
-    setPrivateKey(event.target.value);
-  }
-
   function handleKeyPress(event) {
     if (privateKey !== '' && event.key === 'Enter') {
       event.preventDefault();
@@ -38,22 +35,23 @@ export default function PrivateKeyImportView({ importAccountFunc }) {
     <>
       <FormTextField
         id="private-key-box"
+        size={TEXT_FIELD_SIZES.LARGE}
         autoFocus
         type={TEXT_FIELD_TYPES.PASSWORD}
-        helpText={warning}
-        helpTextProps={{ severity: SEVERITIES.DANGER }}
+        helpText={warning || INVISIBLE_CHARACTER} // The INVISIBLE_CHARACTER ensures that the error message takes up vertical space even if there's no error message
+        error
         label={t('pastePrivateKey')}
         value={privateKey}
-        onChange={handleOnChange}
+        onChange={(event) => setPrivateKey(event.target.value)}
         inputProps={{
           onKeyPress: handleKeyPress,
         }}
-        marginBottom={8}
+        marginBottom={2}
       />
+
       <BottomButtons
         importAccountFunc={_importAccountFunc}
         isPrimaryDisabled={privateKey === ''}
-        marginTop={warning ? 0 : 6}
       />
     </>
   );

ui/pages/create-account/import-account/private-key.stories.js

@@ -3,6 +3,7 @@ import PrivateKeyImportView from './private-key';
 
 export default {
   title: 'Pages/CreateAccount/ImportAccount/PrivateKeyImportView',
+  component: PrivateKeyImportView,
   argTypes: {
     importAccountFunc: {
       control: {

ui/pages/create-account/new-account.stories.js

@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import React from 'react';
-import Box from '../../components/ui/box/box';
 import NewAccountCreateForm from './new-account.component';
 
 export default {
   title: 'Pages/CreateAccount/NewAccount',
+  component: NewAccountCreateForm,
   argTypes: {
     accounts: {
       control: 'array',
@@ -14,15 +14,9 @@ export default {
     accounts: [],
   },
 };
-export const DefaultStory = (args) => {
-  return (
-    <Box className="new-account">
-      <NewAccountCreateForm
-        {...args}
-        createAccount={action('Account Created')}
-      />
-    </Box>
-  );
-};
+
+export const DefaultStory = (args) => (
+  <NewAccountCreateForm {...args} createAccount={action('Account Created')} />
+);
 
 DefaultStory.storyName = 'Default';