Improve ENS names UI/UX

[3esmit]

Feature Issue

User Story

As a user I want to have full information about ENS names.

Description

There are some places where ENS names are supported. Such as to make a payment, you can enter an ENS name. However, after the ENS name is resolved it is discarded, leaving only the address.

This can be confusing, specially for users unaware of what is ENS.
Also, it might hide information, as when scanned from QRCode in form of ERC681.

Acceptance Criteria

Whenever an ENS name is entered and resolves some value, the ENS name should be kept being displayed, alongside a representation of the resolved value (e.g. Identicon, Three Word Name).

Notes

Consider that in future it might be supported as well reversal ENS names, so entering an address could also resolve an ENS name, and not only, but an ENS name could resolve an address that reverse-resolve another ENS name.

Reverse resolution is not implemented yet, but any designs should take in account of that feature, that is exclusive for address data type, as probably it will be implemented at some point.

[acolytec3]

Is ENS reverse resolution on the roadmap? I've built an app in the past that integrated pretty closely with ENS and would be interested in helping build out deeper ENS support if that's of interest.

[3esmit]

We need design input on how that information is displayed. From my perspective, any field that accepts address type should, by default, resolve ENS name and reverse resolve addresses.

The component itself also should be able to handle multiple data, that is:

1. user input: can be an ENS name, or address;
2. the resulting address: always an address type;
3. reverse resolved name: usually null, but sometime an ENS name, that can, or not, be the same as the user input).

Also the error state, which happens when input is invalid.

Something useful would be to have identicons and feature to copy each of the individual data stored on it, when available.

@errorists What do you think? Can we define an universal field for ethereum addresses?

Example of such field, in React.js https://github.com/status-im/multisig-dapp/blob/master/app/components/EthAddress.jsx
Running on the multisig dapp https://status-im.github.io/multisig-dapp/

[hesterbruikman]

Verify in current UI