UX: Multichain: Account Details Fixes (#18999)

* Fix account details editable label

* Fix font-weight of the password label

* Remove duplicate error

* Hide password warning on first screen after bad password, autofocus password field

* Fix jest failure

* Restore className

ui/components/app/modals/account-details-modal/account-details-modal.test.js

@@ -24,7 +24,7 @@ describe('Account Details Modal', () => {
   global.platform = { openTab: jest.fn() };
 
   it('should set account label when changing default account label', () => {
-    const { queryByTestId } = renderWithProvider(
+    const { queryByTestId, getByPlaceholderText } = renderWithProvider(
       <AccountDetailsModal />,
       mockStore,
     );
@@ -35,7 +35,7 @@ describe('Account Details Modal', () => {
     fireEvent.click(editButton);
     expect(queryByTestId('editable-input')).toBeInTheDocument();
 
-    const editableInput = queryByTestId('editable-input');
+    const editableInput = getByPlaceholderText('Account name');
     const newAccountLabel = 'New Label';
 
     fireEvent.change(editableInput, {

ui/components/multichain/account-details/account-details-authenticate.js

@@ -3,8 +3,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   DISPLAY,
+  FontWeight,
   SEVERITIES,
-  TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import {
@@ -56,19 +56,10 @@ export const AccountDetailsAuthenticate = ({ address, onCancel }) => {
         value={password}
         variant={TextVariant.bodySm}
         type="password"
-        inputProps={{
+        inputProps={{ onKeyPress: handleKeyPress }}
-          onKeyPress: handleKeyPress,
+        labelProps={{ fontWeight: FontWeight.Medium }}
-        }}
+        autoFocus
       />
-      {warning ? (
-        <Text
-          marginTop={1}
-          color={TextColor.errorDefault}
-          variant={TextVariant.bodySm}
-        >
-          {warning}
-        </Text>
-      ) : null}
       <BannerAlert marginTop={6} severity={SEVERITIES.DANGER}>
         <Text variant={TextVariant.bodySm}>{t('privateKeyWarning')}</Text>
       </BannerAlert>

ui/components/multichain/account-details/account-details.js

@@ -79,7 +79,10 @@ export const AccountDetails = ({ address }) => {
           <PopoverHeader
             startAccessory={
               <ButtonIcon
-                onClick={() => setAttemptingExport(false)}
+                onClick={() => {
+                  dispatch(hideWarning());
+                  setAttemptingExport(false);
+                }}
                 iconName={IconName.ArrowLeft}
                 size={Size.SM}
               />

ui/components/multichain/account-details/account-details.test.js

@@ -45,7 +45,7 @@ describe('AccountDetails', () => {
     const editButton = screen.getByTestId('editable-label-button');
     fireEvent.click(editButton);
 
-    const editableInput = screen.getByTestId('editable-input');
+    const editableInput = screen.getByPlaceholderText('Account name');
     const newAccountLabel = 'New Label';
 
     fireEvent.change(editableInput, { target: { value: newAccountLabel } });

ui/components/ui/editable-label/editable-label.js

@@ -1,9 +1,20 @@
+import React, { Component } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import {
-import { Color } from '../../../helpers/constants/design-system';
+  AlignItems,
+  Color,
+  DISPLAY,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
 import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
-import { ButtonIcon, IconName } from '../../component-library';
+import {
+  ButtonIcon,
+  FormTextField,
+  IconName,
+  Text,
+} from '../../component-library';
+import Box from '../box/box';
 
 export default class EditableLabel extends Component {
   static propTypes = {
@@ -40,40 +51,40 @@ export default class EditableLabel extends Component {
     );
 
     return (
-      <div className={classnames('editable-label', this.props.className)}>
+      <Box
-        <input
+        className={classnames('editable-label', this.props.className)}
-          type="text"
+        display={DISPLAY.FLEX}
+        gap={3}
+      >
+        <FormTextField
           required
-          dir="auto"
           value={this.state.value}
           onKeyPress={(event) => {
             if (event.key === 'Enter') {
               this.handleSubmit(isValidAccountName);
             }
           }}
-          onChange={(event) => this.setState({ value: event.target.value })}
+          onChange={(event) => {
+            this.setState({ value: event.target.value });
+          }}
           data-testid="editable-input"
-          className={classnames('large-input', 'editable-label__input', {
+          error={!isValidAccountName}
-            'editable-label__input--error': !isValidAccountName,
+          helpText={errorMessage}
-          })}
           autoFocus
+          placeholder={this.context.t('accountName')}
         />
         <ButtonIcon
           iconName={IconName.Check}
-          className="editable-label__icon-button"
           onClick={() => this.handleSubmit(isValidAccountName)}
         />
-        <div className="editable-label__error editable-label__error-amount">
+      </Box>
-          {errorMessage}
-        </div>
-      </div>
     );
   }
 
   renderReadonly() {
     return (
-      <div className={classnames('editable-label', this.props.className)}>
+      <Box display={DISPLAY.FLEX} alignItems={AlignItems.center} gap={3}>
-        <div className="editable-label__value">{this.state.value}</div>
+        <Text variant={TextVariant.bodyLgMedium}>{this.state.value}</Text>
         <ButtonIcon
           iconName={IconName.Edit}
           ariaLabel={this.context.t('edit')}
@@ -81,7 +92,7 @@ export default class EditableLabel extends Component {
           onClick={() => this.setState({ isEditing: true })}
           color={Color.iconDefault}
         />
-      </div>
+      </Box>
     );
   }
 

ui/components/ui/editable-label/index.scss

@@ -1,46 +0,0 @@
-.editable-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  flex-flow: wrap;
-
-  &__value {
-    max-width: 250px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &__input {
-    @include H6;
-
-    color: var(--color-text-default);
-    background-color: var(--color-background-default);
-    width: 250px;
-    text-align: center;
-    border: 1px solid var(--color-border-default);
-
-    &--error {
-      border: 1px solid var(--color-error-default);
-    }
-  }
-
-  &__icon-button {
-    margin-left: 10px;
-    left: 100%;
-  }
-
-  &__error {
-    @include H7;
-
-    left: 8px;
-    color: var(--color-error-default);
-    width: 100%;
-    text-align: center;
-  }
-
-  &__error-amount {
-    margin-top: 5px;
-  }
-}

ui/components/ui/ui-components.scss

@@ -16,7 +16,6 @@
 @import 'definition-list/definition-list';
 @import 'dialog/dialog';
 @import 'dropdown/dropdown';
-@import 'editable-label/index';
 @import 'error-message/index';
 @import 'icon-border/icon-border';
 @import 'icon-button/icon-button';

ui/helpers/utils/accounts.js

@@ -10,6 +10,8 @@ export function getAccountNameErrorMessage(
     (item) => item.name === newAccountName,
   );
 
+  const isEmptyAccountName = newAccountName === '';
+
   const localizedWordForAccount = context
     .t('newAccountNumberName')
     .replace(' $1', '');
@@ -24,7 +26,7 @@ export function getAccountNameErrorMessage(
 
   const isValidAccountName =
     newAccountName === defaultAccountName || // What is written in the text field is the same as the placeholder
-    (!isDuplicateAccountName && !isReservedAccountName);
+    (!isDuplicateAccountName && !isReservedAccountName && !isEmptyAccountName);
 
   let errorMessage;
   if (isValidAccountName) {
@@ -33,6 +35,8 @@ export function getAccountNameErrorMessage(
     errorMessage = context.t('accountNameDuplicate');
   } else if (isReservedAccountName) {
     errorMessage = context.t('accountNameReserved');
+  } else if (isEmptyAccountName) {
+    errorMessage = context.t('required');
   }
 
   return { isValidAccountName, errorMessage };