Background

This ticket improves upon the current import token (ERC20) flow.

There was an improved import token flow designed and Amanda helped make it even better. This story only focused on the screens related to importing ERC20s and adding the newest imported token to the list view.

There is a follow up effort related to showing more security messaging.

Original Import token flow designs: https://www.figma.com/file/LDlI7yjKBNIY60MtQv9QS0/Amon-Hen%2FV1?type=design&node-id=3254-549674&mode=design&t=Zg5rfcrrGp6fSgy1-0

Newest, updated designs from Amanda Yeoh: https://www.figma.com/file/TfVzSMJA8KwpWX8TTWQ2iO/MMASSETS-15%3A-Asset-list-and-details?type=design&node-id=503-58909&mode=design&t=5fKdgvNKVboFsXVo-0

Requirements

User Story

As a user, I want to import commonly found tokens and custom tokens.

Acceptance criteria

• Click into import token from the "Import Token" button on the main list view
• Search for tokens that refresh the search list after each keystroke
• Tracks the set of tokens that have been selected, even after search text box as changed
• Only shows a clickable "Next" when there exists at least one token selected
• Already imported tokens are disabled.
• Confirmation message when screen is exited by the "x"
• After token is imported, the list view scrolls to the new token
• For custom tokens, I can click on the "Custom token" tab and then fill out the contract address, token symbol and token decimal. If after filling the contract address, the token has been detected, the other two fields autopopulate
• Success message on successful import
• Detailed error message on unsuccessful import (needs some eng thought on what possible errors could come up)

Some key notes

• one design shift is from modal => in-page
• another design shift is enabling multi select via check box