New "approve" screen doesn't let you copy the address being approved

[haydenadams]

Describe the bug
Address being approved is truncated and can not be copied.

To Reproduce
Steps to reproduce the behavior:

1. Do an approve transaction
2. Look at transaction details
3. Try and figure out how to get the address being approved, other than parsing raw transaction data

Expected behavior
A little button that allows you to copy the address.

Screenshots

Browser details (please complete the following information):

• OS: OS X
• Browser - Chrome
• MetaMask Version - Latest

[danfinlay]

@MetaMask/design ^ good opportunity to enhance this design. Anywhere we show an address is an opportunity to do all the things we do for an address.

[cjeria]

It appears this was spec'd in the initial designs but wasn't implemented and was missed during QA. See mockup below. This is the icon I'd suggest we use for the copy to clipboard. I'd also advise making the entire address string clickable + tool tip "copy to clipboard". cc @danjm @whymarrh

[cjeria]

@danjm consolidating design feedback for Approve screen designs here.

1. The current approve screen account details row has some text-overflow bugs. The proposed solution is to show a header and balance of the specific token being approved. Here's a link to the updated design.

2. The expanded transaction fee detail section has a few px's more padding. It should be flush with the top section at 24px padding:
   

[danfinlay]

We also got some feedback today, which I agree with, that the top of the approve screen should not refer to the domain, but to the contract address actually being granted the permission. It should also have its name drawn from the address book or reverse-resolved from ENS if possible (not just hex or the word "contract" for "to").

This is to match the reality of what is being trusted: The smart contract, not the domain. Might also want to add a link to its block-explorer page.

[cjeria]

We also got some feedback today, which I agree with, that the top of the approve screen should not refer to the domain, but to the contract address actually being granted the permission.

@danfinlay based on our lengthy design discussions, the goal was to make the Approve screen overall more human-readable and reduce confusion for the user.

Since the user is interacting with a site/dapp at the very moment that the Approve function is called, it makes more usability sense to call out the domain in the header for the reason that it provides the user a more direct context and association with the dapp/site they are interacting with.

We were also very conscious about making it simple to access the contract address, which is just one level deep under the transaction details. So we feel confident that this design meets the requirements that satisfy our usability goals with pro users' needs with minimal friction. That said, I don't feel it's necessary to swap out the domain name with the contract address.

cc @bdresser @rachelcope @omnat

[danfinlay]

@danfinlay based on our lengthy design discussions, the goal was to make the Approve screen overall more human-readable and reduce confusion for the user.

The length of the discussion is irrelevant. Long discussions can reach wrong conclusions.

The word we're showing there is not representative of what is being permitted, and without the presence of the actual address, we are not giving the tools to correctly review this.

We were also very conscious about making it simple to access the contract address, which is just one level deep under the transaction details. So we feel confident that this design meets the requirements

Currently this address is concatenated, and does not allow copying, so this requirement is not yet met:

It would also be nice to use the address book and/or ENS to render a rich name here when available.

[cjeria]

Dan pointed out that Etherscan now has dedicated smart contract pages . We may want to consider linking users to these smart contract dapp pages from the Approve screen. We may also want to take inspiration from how they display the smart contract address for our approve screen (bubble up the smart contract address). cc @rachelcope

[amsimoes]

Guys, any update on this?

It isn't possible yet to check the contract requesting approval, being useless actually...

Is there any workaround to check the contract apart from confirming the TX? Like in console/inspector?

@cjeria

Thanks!

[dzid26]

Seems like a easy fix.
It's a shame one still cannot easily verify address of a contract they interact with.

Yes, this is a security issue.

[jedcli]

I double the comment by @dzid26 on top. It is really frustrating issue you can't check a contract before confirming a transaction.

[bschorchit]

Closing as this has been solved. There's a copy button currently in prod.