Identity Page Redesign - Form

[magwalk]

IDENTITY FORM:
This ticket is for the redesign of the Identity form ONLY. The attached designs show the final state of the identities page as well as the first iterations.

• If a user enters any modifications to the identity form, that should activate the “save identity” button; this indicates when saving changes is needed.
• The chips that display the aliases should be clickable to the url that is associated with the alias, clicking on the “x” deletes the alias (they are not currently delete-able. MVP can be clickable chips without the “x” icon). The chips should flow similarly to text - i.e. if there become too many to fit on one row, they should flow onto multiple rows.
• If there is an update saved (i.e. someone saves a change to an identity or creates a new identity), the “save ledger to disk” button should become activated (purple). If a user attempts to click to another page when changes have not yet been saved to the ledger, one of the “Leave site? Changes you made have not been saved.” warning boxes should appear.
• Upon entering a valid Payout Address, the “view” button link should appear on the end of the input field. If a user enters anything that is NOT a valid eth address, there should be an error on the field with the message “Invalid Eth address”
• Both the "Save ledger to disk" button and "Save Identity" buttons should be primary, contained buttons. The "new identity" button is a primary outlined button.

NEW ID FORM:

• If a user attempts to add a payout address or aliases without adding a name, there should be an error state activated on the “name” input field that states “Identity must have a name”

DESIGN FOR THIS TICKET:
New Identity form (default state):

Edit identity form (when a user in the list is clicked):

FULL IDENTITIES PAGE REDESIGN:

Figma File: https://www.figma.com/file/To52xZBxYgaW0W0F1HdzIS/identities-page?node-id=2%3A397