m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Update address component on transaction data screen (#15888)

Browse Source 
* Update address component on transaction data screen

E2E test fix

Fix tests

* Metadata accounts

* Remove test resulsts

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
amerkadicE 2022-11-08 09:34:21 +01:00 committed by GitHub
parent e7deab4b9b
commit d4ffc3a587
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 94 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/e2e/tests/send-eth.spec.js
View File

@ -135,7 +135,7 @@ describe('Send ETH non-contract address with data that matches ERC20 transfer da
await driver.clickElement({ text: 'Next', tag: 'button' });
await driver.clickElement({ text: '0xc42...cd28' });
await driver.clickElement({ text: 'New contract' });
const recipientAddress = await driver.findElements({
text: '0xc427D562164062a23a5cFf596A4a3208e72Acd28',

8
test/e2e/tests/send-hex-address.spec.js
View File

@ -57,7 +57,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () {
);
await sendTransactionListItem.click();
await driver.clickElement({ text: 'Activity log', tag: 'summary' });
await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)');
await driver.clickElement('[data-testid="sender-to-recipient__name"]');
// Verify address in activity log
const publicAddress = await driver.findElement(
@ -108,7 +108,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () {
);
await sendTransactionListItem.click();
await driver.clickElement({ text: 'Activity log', tag: 'summary' });
await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)');
await driver.clickElement('[data-testid="sender-to-recipient__name"]');
// Verify address in activity log
const publicAddress = await driver.findElement(
@ -212,7 +212,7 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () {
);
await sendTransactionListItem.click();
await driver.clickElement({ text: 'Activity log', tag: 'summary' });
await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)');
await driver.clickElement('[data-testid="sender-to-recipient__name"]');
// Verify address in activity log
const publicAddress = await driver.findElement(
@ -302,7 +302,7 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () {
);
await sendTransactionListItem.click();
await driver.clickElement({ text: 'Activity log', tag: 'summary' });
await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)');
await driver.clickElement('[data-testid="sender-to-recipient__name"]');
// Verify address in activity log
const publicAddress = await driver.findElement(

4
ui/components/app/confirm-page-container/confirm-page-container-container.test.js
View File

@ -92,7 +92,7 @@ describe('Confirm Page Container Container Test', () => {
expect(senderRecipient).toBeInTheDocument();
});
it('should render recipient as address', () => {
const recipientName = screen.queryByText(shortenAddress(props.toAddress));
const recipientName = screen.queryByText('New contract');
expect(recipientName).toBeInTheDocument();
});
@ -118,7 +118,7 @@ describe('Confirm Page Container Container Test', () => {
describe('Contact/AddressBook name should appear in recipient header', () => {
it('should not show add to address dialog if recipient is in contact list and should display contact name', () => {
const addressBookName = 'test save name';
const addressBookName = 'New contract';
const addressBook = {
'0x5': {

3
ui/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -63,6 +63,7 @@ export default class ConfirmPageContainer extends Component {
fromName: PropTypes.string,
toAddress: PropTypes.string,
toName: PropTypes.string,
toMetadataName: PropTypes.string,
toEns: PropTypes.string,
toNickname: PropTypes.string,
// Content
@ -118,6 +119,7 @@ export default class ConfirmPageContainer extends Component {
fromName,
fromAddress,
toName,
toMetadataName,
toEns,
toNickname,
toAddress,
@ -231,6 +233,7 @@ export default class ConfirmPageContainer extends Component {
senderName={fromName}
senderAddress={fromAddress}
recipientName={toName}
recipientMetadataName={toMetadataName}
recipientAddress={toAddress}
recipientEns={toEns}
recipientNickname={toNickname}

7
ui/components/app/confirm-page-container/confirm-page-container.container.js
View File

@ -5,6 +5,8 @@ import {
getIsBuyableChain,
getNetworkIdentifier,
getSwapsDefaultToken,
getMetadataContractName,
getAccountName,
} from '../../../selectors';
import { showModal } from '../../../store/actions';
import ConfirmPageContainer from './confirm-page-container.component';
@ -16,11 +18,14 @@ function mapStateToProps(state, ownProps) {
const networkIdentifier = getNetworkIdentifier(state);
const defaultToken = getSwapsDefaultToken(state);
const accountBalance = defaultToken.string;
const toName = getAccountName(state, to);
const toMetadataName = getMetadataContractName(to);
return {
isBuyableChain,
contact,
toName: contact?.name || ownProps.toName,
toName,
toMetadataName,
isOwnedAccount: getAccountsWithLabels(state)
.map((accountWithLabel) => accountWithLabel.address)
.includes(to),

6
ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
View File

@ -41,6 +41,8 @@ export default class TransactionListItemDetails extends PureComponent {
onClose: PropTypes.func.isRequired,
recipientEns: PropTypes.string,
recipientAddress: PropTypes.string,
recipientName: PropTypes.string,
recipientMetadataName: PropTypes.string,
rpcPrefs: PropTypes.object,
senderAddress: PropTypes.string.isRequired,
tryReverseResolveAddress: PropTypes.func.isRequired,
@ -139,6 +141,8 @@ export default class TransactionListItemDetails extends PureComponent {
showRetry,
recipientEns,
recipientAddress,
recipientName,
recipientMetadataName,
senderAddress,
isEarliestNonce,
senderNickname,
@ -238,6 +242,8 @@ export default class TransactionListItemDetails extends PureComponent {
recipientEns={recipientEns}
recipientAddress={recipientAddress}
recipientNickname={recipientNickname}
recipientName={recipientName}
recipientMetadataName={recipientMetadataName}
senderName={senderNickname}
senderAddress={senderAddress}
onRecipientClick={() => {

6
ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js
View File

@ -8,6 +8,8 @@ import {
getIsCustomNetwork,
getRpcPrefsForCurrentProvider,
getEnsResolutionByAddress,
getAccountName,
getMetadataContractName,
} from '../../../selectors';
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
import TransactionListItemDetails from './transaction-list-item-details.component';
@ -20,6 +22,8 @@ const mapStateToProps = (state, ownProps) => {
recipientEns = getEnsResolutionByAddress(state, address);
}
const addressBook = getAddressBook(state);
const recipientName = getAccountName(state, recipientAddress);
const recipientMetadataName = getMetadataContractName(recipientAddress);
const getNickName = (address) => {
const entry = addressBook.find((contact) => {
@ -38,6 +42,8 @@ const mapStateToProps = (state, ownProps) => {
recipientNickname: recipientAddress ? getNickName(recipientAddress) : null,
isCustomNetwork,
blockExplorerLinkText: getBlockExplorerLinkText(state),
recipientName,
recipientMetadataName,
};
};

65
ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
View File

@ -103,34 +103,69 @@ export function RecipientWithAddress({
recipientNickname,
recipientEns,
recipientName,
recipientMetadataName,
}) {
const t = useI18nContext();
const [showNicknamePopovers, setShowNicknamePopovers] = useState(false);
const [addressCopied, setAddressCopied] = useState(false);
let tooltipHtml = <p>{t('copiedExclamation')}</p>;
if (!addressCopied) {
tooltipHtml = addressOnly ? (
<p>{t('copyAddress')}</p>
) : (
<p>
{shortenAddress(checksummedRecipientAddress)}
<br />
{t('copyAddress')}
</p>
);
}
return (
<>
<div
className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
onClick={() => {
setShowNicknamePopovers(true);
if (onRecipientClick) {
onRecipientClick();
if (recipientName) {
setAddressCopied(true);
copyToClipboard(checksummedRecipientAddress);
} else {
setShowNicknamePopovers(true);
if (onRecipientClick) {
onRecipientClick();
}
}
}}
>
<div className="sender-to-recipient__sender-icon">
<Identicon address={checksummedRecipientAddress} diameter={24} />
</div>
<div className="sender-to-recipient__name">
{addressOnly
? recipientNickname ||
recipientEns ||
shortenAddress(checksummedRecipientAddress)
: recipientNickname ||
recipientEns ||
recipientName ||
t('newContract')}
</div>
<Tooltip
position="bottom"
disabled={!recipientName}
html={tooltipHtml}
wrapperClassName="sender-to-recipient__tooltip-wrapper"
containerClassName="sender-to-recipient__tooltip-container"
onHidden={() => setAddressCopied(false)}
>
<div
className="sender-to-recipient__name"
data-testid="sender-to-recipient__name"
>
{addressOnly
? recipientName ||
recipientNickname ||
recipientMetadataName ||
recipientEns ||
shortenAddress(checksummedRecipientAddress)
: recipientName ||
recipientNickname ||
recipientMetadataName ||
recipientEns ||
t('newContract')}
</div>
</Tooltip>
</div>
{showNicknamePopovers ? (
<NicknamePopovers
@ -145,6 +180,7 @@ export function RecipientWithAddress({
RecipientWithAddress.propTypes = {
checksummedRecipientAddress: PropTypes.string,
recipientName: PropTypes.string,
recipientMetadataName: PropTypes.string,
recipientEns: PropTypes.string,
recipientNickname: PropTypes.string,
addressOnly: PropTypes.bool,
@ -175,6 +211,7 @@ export default function SenderToRecipient({
senderName,
recipientNickname,
recipientName,
recipientMetadataName,
recipientEns,
onRecipientClick,
onSenderClick,
@ -208,6 +245,7 @@ export default function SenderToRecipient({
recipientNickname={recipientNickname}
recipientEns={recipientEns}
recipientName={recipientName}
recipientMetadataName={recipientMetadataName}
/>
) : (
<div className="sender-to-recipient__party sender-to-recipient__party--recipient">
@ -228,6 +266,7 @@ SenderToRecipient.propTypes = {
senderName: PropTypes.string,
senderAddress: PropTypes.string,
recipientName: PropTypes.string,
recipientMetadataName: PropTypes.string,
recipientEns: PropTypes.string,
recipientAddress: PropTypes.string,
recipientNickname: PropTypes.string,

14
ui/selectors/selectors.js
View File

@ -412,6 +412,20 @@ export function getAddressBookEntryOrAccountName(state, address) {
return entry && entry.name !== '' ? entry.name : address;
}
export function getAccountName(state, address) {
const entry = Object.values(state.metamask.identities).find((identity) =>
isEqualCaseInsensitive(identity.address, toChecksumHexAddress(address)),
);
return entry && entry.name !== '' ? entry.name : '';
}
export function getMetadataContractName(address) {
const entry = Object.values(STATIC_MAINNET_TOKEN_LIST).find((identity) =>
isEqualCaseInsensitive(identity.address, toChecksumHexAddress(address)),
);
return entry && entry.name !== '' ? entry.name : '';
}
export function accountsWithSendEtherInfoSelector(state) {
const accounts = getMetaMaskAccounts(state);
const identities = getMetaMaskIdentities(state);