m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

UX: Show Checksum Addresses in Account Menu

Browse Source
This commit is contained in:
David Walsh 2023-07-21 18:57:59 -05:00 committed by Dan J Miller
parent f14a0ddb94
commit 41bab4a6e1
4 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

3
ui/components/multichain/account-list-item/account-list-item.js
View File

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

3
ui/components/multichain/account-list-item/account-list-item.test.js
View File

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

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

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