UX: Show Checksum Addresses in Account Menu (#20135)

* UX: Show Checksum Addresses in Account Menu

* Checksum the account details -> export private key address copy button

* Update tests

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { toChecksumHexAddress } from '@metamask/controller-utils';
 import { renderWithProvider } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
@@ -10,6 +11,7 @@ import {
   exportAccount,
   hideWarning,
 } from '../../../store/actions';
+import { shortenAddress } from '../../../helpers/utils/util';
 import { AccountDetails } from '.';
 
 jest.mock('../../../store/actions.ts');
@@ -58,6 +60,10 @@ describe('AccountDetails', () => {
     const exportPrivateKeyButton = queryByText(showPrivateKey.message);
     fireEvent.click(exportPrivateKeyButton);
 
+    expect(
+      queryByText(shortenAddress(toChecksumHexAddress(address))),
+    ).toBeInTheDocument();
+
     expect(queryByText('Show private key')).toBeInTheDocument();
     expect(queryByPlaceholderText('Password')).toBeInTheDocument();
   });
@@ -86,6 +92,10 @@ describe('AccountDetails', () => {
     const exportPrivateKeyButton = queryByText(showPrivateKey.message);
     fireEvent.click(exportPrivateKeyButton);
 
+    expect(
+      queryByText(shortenAddress(toChecksumHexAddress(address))),
+    ).toBeInTheDocument();
+
     expect(queryByText(samplePrivateKey)).toBeInTheDocument();
   });
 });

ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap

@@ -96,7 +96,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           <p
             class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
           >
-            0x0dc...e7bc
+            0x0DC...E7bc
           </p>
         </div>
         <div

ui/components/multichain/account-list-item/account-list-item.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import { useSelector } from 'react-redux';
+import { toChecksumHexAddress } from '@metamask/controller-utils';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { shortenAddress } from '../../../helpers/utils/util';
 
@@ -202,7 +203,7 @@ export const AccountListItem = ({
               />
             ) : null}
             <Text variant={TextVariant.bodySm} color={Color.textAlternative}>
-              {shortenAddress(identity.address)}
+              {shortenAddress(toChecksumHexAddress(identity.address))}
             </Text>
           </Box>
           <Text

ui/components/multichain/account-list-item/account-list-item.test.js

@@ -1,6 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
+import { toChecksumHexAddress } from '@metamask/controller-utils';
 import { renderWithProvider } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
@@ -34,7 +35,7 @@ describe('AccountListItem', () => {
     const { container } = render();
     expect(screen.getByText(identity.name)).toBeInTheDocument();
     expect(
-      screen.getByText(shortenAddress(identity.address)),
+      screen.getByText(shortenAddress(toChecksumHexAddress(identity.address))),
     ).toBeInTheDocument();
     expect(document.querySelector('[title="0.006 ETH"]')).toBeInTheDocument();
 

ui/components/multichain/address-copy-button/address-copy-button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { toChecksumHexAddress } from '@metamask/controller-utils';
 import { ButtonBase, IconName } from '../../component-library';
 import {
   BackgroundColor,
@@ -22,7 +23,10 @@ export const AddressCopyButton = ({
   wrap = false,
   onClick,
 }) => {
-  const displayAddress = shorten ? shortenAddress(address) : address;
+  const checksummedAddress = toChecksumHexAddress(address);
+  const displayAddress = shorten
+    ? shortenAddress(checksummedAddress)
+    : checksummedAddress;
   const [copied, handleCopy] = useCopyToClipboard(MINUTE);
   const t = useI18nContext();
 
@@ -31,7 +35,7 @@ export const AddressCopyButton = ({
       <ButtonBase
         backgroundColor={BackgroundColor.primaryMuted}
         onClick={() => {
-          handleCopy(address);
+          handleCopy(checksummedAddress);
           onClick?.();
         }}
         paddingRight={4}

ui/components/multichain/address-copy-button/address-copy-button.test.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
+import { toChecksumHexAddress } from '@metamask/controller-utils';
+import { shortenAddress } from '../../../helpers/utils/util';
 import { AddressCopyButton } from '.';
 
 const SAMPLE_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc';
@@ -10,7 +12,7 @@ describe('AccountListItem', () => {
     expect(
       document.querySelector('[data-testid="address-copy-button-text"]')
         .textContent,
-    ).toStrictEqual(SAMPLE_ADDRESS);
+    ).toStrictEqual(toChecksumHexAddress(SAMPLE_ADDRESS));
   });
 
   it('renders a shortened address when it should', () => {
@@ -18,7 +20,7 @@ describe('AccountListItem', () => {
     expect(
       document.querySelector('[data-testid="address-copy-button-text"]')
         .textContent,
-    ).toStrictEqual('0x0dc...e7bc');
+    ).toStrictEqual(shortenAddress(toChecksumHexAddress(SAMPLE_ADDRESS)));
   });
 
   it('changes icon when clicked', () => {

ui/components/multichain/menu-items/view-explorer-menu-item.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
+import { toChecksumHexAddress } from '@metamask/controller-utils';
 import { getAccountLink } from '@metamask/etherscan-link';
 
 import { MenuItem } from '../../ui/menu';
@@ -34,7 +35,11 @@ export const ViewExplorerMenuItem = ({
 
   const chainId = useSelector(getCurrentChainId);
   const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
-  const addressLink = getAccountLink(address, chainId, rpcPrefs);
+  const addressLink = getAccountLink(
+    toChecksumHexAddress(address),
+    chainId,
+    rpcPrefs,
+  );
 
   const { blockExplorerUrl } = rpcPrefs;
   const blockExplorerUrlSubTitle = getURLHostName(blockExplorerUrl);

ui/components/ui/qr-code/qr-code.js

@@ -60,7 +60,7 @@ function QrCodeView({ Qr, warning }) {
       <Box marginBottom={6}>
         <AddressCopyButton
           wrap
-          address={toChecksumHexAddress(data)}
+          address={data}
           onClick={() => {
             trackEvent({
               category: MetaMetricsEventCategory.Accounts,