Metamask-extension: Improve ENS Address Input

[danfinlay]

Current behavior:

If you enter an ENS name that is valid, it is instantly replaced with the actual address.

Expected behavior:

Correct names should be detected & resolved, but should not replace the displayed typed name, the same way the URL bar doesn't replace the domain with the IP address.

Reproduction:

• Enter a valid ENS name like dinodan.eth.

• Notice that it is instantly replaced with the resolved address, and you can't easily see what name you had entered.

• Try entering a name like dan.eth.myspecialaddress.eth. You can't, because it eager-resolves at the first .eth.

Desired results:

• Like in old-UI, correct resolution should indicate correct resolution, and should make the resolved address available to the user (either visually or via copy).
• The user entered text should be left alone.

[bdresser]

relates to https://github.com/MetaMask/metamask-extension/issues/4380

[virgil]

The ideal behavior is actually one step further---if the user puts in a hex address, it should be attempted to reverse-lookup to an ENS name.

Likewise, In the selection screens where it shows my hex address, it should show my ENS name via reverse-lookup (if I've specified one).

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 1.0 ETH (204.89 USD @ $204.89/ETH) attached to it.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  
  
  
  • Want to chip in? Add your own contribution here.
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $97,303.10 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Workers have applied to start work__.

These users each claimed they can complete the work by 12 months from now.
Please review their action plans below:

1) nanspro has applied to start work _(Funders only: approve worker | reject worker)_.

I worked with moonlet wallet to add the support for ens,zns,rns using namicorn library. I'll setup it locally and try different methods to show the address in a nice manner while not changing the user entered name.
ETA 3 days

Learn more on the Gitcoin Issue Details page.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Workers have applied to start work__.

These users each claimed they can complete the work by 12 months from now.
Please review their action plans below:

1) nanspro has applied to start work _(Funders only: approve worker | reject worker)_.

I worked with moonlet wallet to add the support for ens,zns,rns using namicorn library. I'll setup it locally and try different methods to show the address in a nice manner while not changing the user entered name.
ETA 3 days

Learn more on the Gitcoin Issue Details page.

2) industral has applied to start work _(Funders only: approve worker | reject worker)_.

• implement functionality to resolve eth address to eth name (web3.eth.ens)
• change css (move input top, move border outside, put resolved address below). Put loading icon while name is resolving if there will be a space
• test

Learn more on the Gitcoin Issue Details page.

[vs77bb]

Hi @industral you've been approved! Please keep us posted with progress / questions here and provide a WIP PR for review when you can 🙂

[industral]

@vs77bb please checkout PR https://github.com/MetaMask/metamask-extension/pull/6606

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work for 1.0 ETH (208.07 USD @ $208.07/ETH) has been submitted by__:

1. @industral

@Arachnid please take a look at the submitted work:

• PR by @industral

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $90,574.46 more funded OSS Work available on the Gitcoin Issue Explorer

[tmashuang]

@vs77bb PR from @industral has been merged.

[Arachnid]

Thanks @industral!

Would it be possible to get some screenshots of how it functions now, so we don't have to wait for the release?

[tmashuang]

@Arachnid There is a video file in the PR description. But for a quick screenshot,

The address in the field can be copied-to-clipboard.

[vs77bb]

Hi @industral -- please join Gitcoin Slack and ping me, would love to stay in touch for future Gitcoin bounties. @Arachnid -- whenever you're ready to pay out, here's the link 🙂

[industral]

@Arachnid any updates on payment? yet haven't been paid.

[Arachnid]

Sorry, I totally missed the video. This looks great! Paying out now.

[gitcoinbot]

⚡️ A *React Reactor* Kudos has been sent to @industral for this issue from @Arachnid. ⚡️ Nice work @industral! Your Kudos has automatically been sent in the ETH address we have on file.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__The funding of 1.0 ETH (251.69 USD @ $251.69/ETH) attached to this issue has been approved & issued to @industral.__

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $85,962.80 more funded OSS Work available on the Gitcoin Issue Explorer

[Arachnid]

This seems to have been reverted for some reason, and ENS name input is back to being really awkward - try for example 'nick.gimmethe.eth'.

@jennypollack Why was this reverted?

[bdresser]

@Arachnid see https://github.com/MetaMask/metamask-extension/pull/6606#issuecomment-499590692

This will be resolved in by our new send flow (https://github.com/MetaMask/metamask-extension/pull/6681) - feel free to try it out & give feedback!

[Arachnid]

Glad to hear it!