Address book send

[chikeichan]

• Implement new send to-autocomplete UI
• Implement new send flow - address list view
• Implement new send flow - send content view
• Fix confirm flow if necessary
• Implement "Add to Address" book modal
• Implement Error/Loading state for to-autocomplete
• Add/Fix unit tests
• Add/Fix integration tests

[chikeichan]

https://www.loom.com/share/8715b92315db4712847416f719997e65
https://www.loom.com/share/519c3b244ae14796ba2d7045c49e611f

[bdresser]

@chikeichan this looks awesome!! could you record a short demo of the flow in the extension popup when you get a chance? will help with design QA

[chikeichan]

@chikeichan this looks awesome!! could you record a short demo of the flow in the extension popup when you get a chance? will help with design QA

https://www.loom.com/share/cd3cae924c3748f5ba490eda2de3e801

There you go!

For this one, please still pull it down and play with it locally if possible 🙇 . This is a major refactor of the send flow, so we want to be very cautious.

[cjeria]

Nice work @chikeichan! Here's a list of some feedback I caught while testing.

1. When clicking “send” from the account view, focus cursor in the to field (if possible) for faster recipient inputting.

2. Make section header say "add recipient” by default. Change to “Send” when ETH address detected.

2.1 Update placeholder text to the suggested text in designs

3. Make recipient name 14 pt font size
   

4. Behavior when pasting an ethereum address, don’t make me have to click the list item below the to field. Auto show the send view.
   

5. If no other tokens in my wallet, don’t make this field a dropdown
   

6. In order to avoid this overlap text, we agreed that it would be fine to ellipsis the middle part of an address like "0x28b…6581"
   

7. In full-screen mode, let’s fix the grey bar color so it blends with the rest of the background
   

8. Are we able to show the saved contact’s name in the confirm screen (if contact was saved)?
   

9. Give each row here a top padding of 16px
   

10. some addresses overlap the "X" here, not sure why? I believe Roboto is mono-spaced...
    

11. Saving is not working consistently, I was only able to save one contact the first time only.

I realize this might be an early stage version of the feature, so please let me know what's still being worked on. cc @bdresser

[danjm]

@chikeichan I think it would be appropriate to remove the test-integration-flat-chrome send test at this point, as long as create an issue that documents the behaviour covered by those tests that is not covered by e2e tests. We need to replace these tests with additions to the e2e tests eventually, and this is a significant enough change that I think now is the appropriate time.

[danjm]

In most places we follow the pattern of creating a .container.js file for connection to redux. Do you have a preference for doing this within the same file that defines the component?

[chikeichan]

Fixed

[danjm]

I think the code looks good generally. I need to take one more close look at the ens-input changes.

[danfinlay]

This is awesome! It looks great.

A question:

• Is there a way to copy the address after the ENS name has resolved?

Some notes for future improvement, I could open as design issues, would that be right, @cjeria?

• Confirmation screen does not show the account nickname like the send form did.
• The nickname should appear somewhere in the TX history list, when we have a nickname for who we sent to.

[cjeria]

@danfinlay

• Is there a way to copy the address after the ENS name has resolved?

Which screen/step are you wanting to copy the address?

Some notes for future improvement, I could open as design issues, would that be right, @cjeria?

Sure! Let's create a new issue in design for future enhancements to this feature.

[danfinlay]

Opened new issues #105, #106, maybe should've been one issue, feel free to consolidate.

[bdresser]

@chikeichan this looks awesome! super smooth

Biggest thing I'm noticing is that addresses should be network-specific. If I save a contact on Mainnet, it's not necessarily a testnet address, so showing it in the testnet Send flow could cause a lot of user errors. Let me know if you want to chat about this live or if we should pull @jennypollack in as well.

Some smaller notes:

• I think the "copy" request is in scope for this. On the confirm screen, the user should be able to copy the address their sending to (whether raw address, contact, or ENS name) by hovering over the address field. We can reuse the existing Copy Address component (see below). Many folks are religious about double double checking.

• On the "Add Contact" screen (below):

• pressing enter on the "add contact" screen should save the contact
• we should auto-focus cursor inside the text field when this modal opens

Also agree with Christian's notes above. Happy to set something up for next week if you want to go over any of this live!

[chikeichan]

@cjeria

1. Fixed
2. Fixed
3. Fixed
4. Fixed
5. Created issue Asset Dropdown should not be openable if the account does not have any tokens added #6787
6. Fixed
7. Fixed
8. Created issue Confirm screen header should show recipient's alias if available #6788
9. Fixed
10. Roboto is not monospaced. Roboto Mono is monospaced.
11. Tagging @jennypollack here for attention re: saving inconsistency.

@danjm

• Refactor the naming to follow .container.js/.component.js
• Would love some help on integration test if possible. Been trying to make it pass in CI and locally...

@bdresser

• "clicked to save" is already there on confirm screen
• Created issue Addressbook should be Network-specific #6789 to make address book network-specifc
• Added autofocus for AddAddressModal
• Added "Press Enter to Save" for AddAddressModal

[danjm]

@cjeria Improved error messaging related to ENS:

[whymarrh]

Closed by #6914