UX Multichain: Updated app header account picker and address button

test/e2e/tests/account-menu/add-account.spec.js

@@ -13,10 +13,8 @@ const {
 } = require('../../helpers');
 
 const FixtureBuilder = require('../../fixture-builder');
-const { shortenAddress } = require('../../../../ui/helpers/utils/util');
 
 describe('Add account', function () {
-  const firstAccount = '0x0Cc5261AB8cE458dc977078A3623E2BaDD27afD3';
   const secondAccount = '0x3ED0eE22E0685Ebbf07b2360A8331693c413CC59';
 
   const ganacheOptions = generateGanacheOptions({
@@ -75,12 +73,7 @@ describe('Add account', function () {
 
         // Check address of 1st account
         await waitForAccountRendered(driver);
-        await driver.findElement({
-          css: process.env.MULTICHAIN
-            ? '.multichain-account-picker-container p'
-            : '.multichain-address-copy-button',
-          text: shortenAddress(firstAccount),
-        });
+        await driver.findElement('[data-testid="app-header-copy-button"]');
 
         // Create 2nd account
         await driver.clickElement('[data-testid="account-menu-icon"]');
@@ -95,12 +88,7 @@ describe('Add account', function () {
 
         // Check address of 2nd account
         await waitForAccountRendered(driver);
-        await driver.findElement({
-          css: process.env.MULTICHAIN
-            ? '.multichain-account-picker-container p'
-            : '.multichain-address-copy-button',
-          text: shortenAddress(secondAccount),
-        });
+        await driver.findElement('[data-testid="app-header-copy-button"]');
 
         // Log into the account with balance(account 1)
         // and transfer some balance to 2nd account
@@ -149,12 +137,7 @@ describe('Add account', function () {
         }
 
         // Check address of 1st account
-        await driver.findElement({
-          css: process.env.MULTICHAIN
-            ? '.multichain-account-picker-container p'
-            : '.multichain-address-copy-button',
-          text: shortenAddress(firstAccount),
-        });
+        await driver.findElement('[data-testid="app-header-copy-button"]');
 
         // Check address of 2nd account
         await driver.clickElement('[data-testid="account-menu-icon"]');
@@ -163,12 +146,7 @@ describe('Add account', function () {
           text: 'Account 2',
         });
 
-        await driver.findElement({
-          css: process.env.MULTICHAIN
-            ? '.multichain-account-picker-container p'
-            : '.multichain-address-copy-button',
-          text: shortenAddress(secondAccount),
-        });
+        await driver.findElement('[data-testid="app-header-copy-button"]');
       },
     );
   });

test/e2e/tests/import-flow.spec.js

@@ -71,10 +71,7 @@ describe('Import flow @no-mmi', function () {
           '[data-testid="account-details-modal"]',
         );
         // shows the correct account address
-        await driver.findElement({
-          css: '.multichain-address-copy-button',
-          text: '0x0Cc52...7afD3',
-        });
+        await driver.findElement('[data-testid="app-header-copy-button"]');
 
         await driver.clickElement('button[aria-label="Close"]');
         await driver.waitForElementNotPresent(

ui/components/app/wallet-overview/wallet-overview.js

@@ -2,35 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useSelector } from 'react-redux';
-import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import { getSelectedInternalAccount } from '../../../selectors';
-import { AddressCopyButton } from '../../multichain';
-import Box from '../../ui/box/box';
 import { IconName, Tag } from '../../component-library';
 import { Color, TextVariant } from '../../../helpers/constants/design-system';
 import { KeyringType } from '../../../../shared/constants/keyring';
 import { getAccountLabel } from '../../../helpers/utils/accounts';
 
-const WalletOverview = ({
-  balance,
-  buttons,
-  className,
-  showAddress = false,
-}) => {
+const WalletOverview = ({ balance, buttons, className }) => {
   const selectedAccount = useSelector(getSelectedInternalAccount);
-  const checksummedAddress = toChecksumHexAddress(selectedAccount.address);
   const { keyring } = selectedAccount.metadata;
   const label = selectedAccount.metadata.snap?.name
     ? getAccountLabel(keyring.type, selectedAccount)
     : null;
   return (
     <div className={classnames('wallet-overview', className)}>
       <div className="wallet-overview__balance">
-        {showAddress ? (
-          <Box marginTop={2}>
-            <AddressCopyButton address={checksummedAddress} shorten />
-          </Box>
-        ) : null}
         {balance}
         {label ? (
           <Tag
@@ -54,7 +40,6 @@ WalletOverview.propTypes = {
   balance: PropTypes.element.isRequired,
   buttons: PropTypes.element.isRequired,
   className: PropTypes.string,
-  showAddress: PropTypes.bool,
 };
 
 export default WalletOverview;

ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap

@@ -3,21 +3,21 @@
 exports[`AccountPicker renders properly 1`] = `
 <div>
   <button
-    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-text--body-md-medium mm-text--ellipsis mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-lg"
+    class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-base--ellipsis multichain-account-picker mm-text--body-md-medium mm-text--ellipsis mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--gap-2 mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-lg"
     data-testid="account-menu-icon"
   >
     <span
-      class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--display-flex mm-box--gap-1 mm-box--align-items-center mm-box--color-text-default"
+      class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-text-default"
     >
       <div
-        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
       >
         <img
           alt=""
-          height="24"
+          height="16"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woMTM5IDg5JSA1OSUpIiBkPSJNMCwwSDhWOEgweiIvPjxwYXRoIGZpbGw9ImhzbCgzMjEgOTIlIDU2JSkiIGQ9Ik0xLDJoMXYxaC0xek02LDJoMXYxaC0xek0yLDJoMXYxaC0xek01LDJoMXYxaC0xek0zLDJoMXYxaC0xek00LDJoMXYxaC0xek0zLDNoMXYxaC0xek00LDNoMXYxaC0xek0wLDRoMXYxaC0xek03LDRoMXYxaC0xek0yLDRoMXYxaC0xek01LDRoMXYxaC0xek0wLDZoMXYxaC0xek03LDZoMXYxaC0xek0xLDZoMXYxaC0xek02LDZoMXYxaC0xek0zLDZoMXYxaC0xek00LDZoMXYxaC0xek0wLDdoMXYxaC0xek03LDdoMXYxaC0xek0yLDdoMXYxaC0xek01LDdoMXYxaC0xek0zLDdoMXYxaC0xek00LDdoMXYxaC0xeiIvPjxwYXRoIGZpbGw9ImhzbCgzMjUgNDclIDU1JSkiIGQ9Ik0xLDBoMXYxaC0xek02LDBoMXYxaC0xek0zLDFoMXYxaC0xek00LDFoMXYxaC0xek0wLDVoMXYxaC0xek03LDVoMXYxaC0xeiIvPjwvc3ZnPg=="
           style="border-radius: 50%;"
-          width="24"
+          width="16"
         />
       </div>
       <span

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useSelector } from 'react-redux';
-import { toChecksumHexAddress } from '@metamask/controller-utils';
 import {
   AvatarAccount,
   AvatarAccountVariant,
@@ -18,26 +17,20 @@ import {
   Display,
   IconColor,
   Size,
-  TextColor,
-  TextVariant,
 } from '../../../helpers/constants/design-system';
 import { getUseBlockie } from '../../../selectors';
-import { shortenAddress } from '../../../helpers/utils/util';
 
 export const AccountPicker = ({
   address,
   name,
   onClick,
   disabled = false,
-  showAddress = false,
-  addressProps = {},
   labelProps = {},
   textProps = {},
   className = '',
   ...props
 }) => {
   const useBlockie = useSelector(getUseBlockie);
-  const shortenedAddress = shortenAddress(toChecksumHexAddress(address));
 
   return (
     <ButtonBase
@@ -50,17 +43,18 @@ export const AccountPicker = ({
       textProps={{
         display: Display.Flex,
         alignItems: AlignItems.center,
-        gap: 1,
+        gap: 2,
         ...textProps,
       }}
-      size={showAddress ? ButtonBaseSize.Lg : ButtonBaseSize.Md}
+      size={ButtonBaseSize.Sm}
       disabled={disabled}
       endIconName={IconName.ArrowDown}
       endIconProps={{
         color: IconColor.iconDefault,
         size: Size.SM,
       }}
       {...props}
+      gap={2}
     >
       <AvatarAccount
         variant={
@@ -69,7 +63,7 @@ export const AccountPicker = ({
             : AvatarAccountVariant.Jazzicon
         }
         address={address}
-        size={Size.SM}
+        size={Size.XS}
         borderColor={BackgroundColor.backgroundDefault} // we currently don't have white color for border hence using backgroundDefault as the border
       />
       <Text
@@ -82,16 +76,6 @@ export const AccountPicker = ({
         )}
       >
         {name}
-        {showAddress ? (
-          <Text
-            color={TextColor.textAlternative}
-            variant={TextVariant.bodySm}
-            ellipsis
-            {...addressProps}
-          >
-            {shortenedAddress}
-          </Text>
-        ) : null}
       </Text>
     </ButtonBase>
   );
@@ -114,18 +98,10 @@ AccountPicker.propTypes = {
    * Represents if the AccountPicker should be actionable
    */
   disabled: PropTypes.bool,
-  /**
-   * Represents if the account address should display
-   */
-  showAddress: PropTypes.bool,
   /**
    * Represents if the AccountPicker should take full width
    */
   block: PropTypes.bool,
-  /**
-   * Props to be added to the address element
-   */
-  addressProps: PropTypes.object,
   /**
    * Props to be added to the label element
    */

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

@@ -47,11 +47,6 @@ describe('AccountPicker', () => {
     expect(container.querySelector('svg')).toBeDefined();
   });
 
-  it('should show the address in the account button for multichain', () => {
-    const { getByText } = render({ showAddress: true });
-    expect(getByText('0x0DCD5...3E7bc')).toBeInTheDocument();
-  });
-
   it('should allow for an additional class name via className prop', () => {
     const { container } = render({ className: 'test-class' });
     expect(container.querySelector('.test-class')).toBeInTheDocument();