[Cashtab][Alias] Upgrade Alias UI
Summary:
T3216
Upgrading the Alias UI to be a bit more prod-worthy and in anticipation of the need to separate Registered and Pending aliases. This diff introduces dropdowns and tags whereby within the Registered Aliases dropdown it renders the registered aliases into Tags, which can be clicked on to copy the alias to the clipboard.
This is also an efficient use of the UI real estate to avoid users having to scroll endlessly if they have registered a lot of aliases.
Tag color is aligned to branding guidelines.
Test Plan:
- npm test
- set alias flag to true in Ticker.js
- npm start and navigate to the Alias page
- expand the Registered Aliases dropdown and verify the correct alphabetical rendering of aliases attached to this wallet and on hover, cursor recognizes this as a link
- click on any of the registered aliases and ensure the full alias is copied to clipboard
- register a 21 byte alias, wait for confirmation and ensure no UI funkiness with wrapping over the dropdown border
- create a new wallet and ensure the dropdown displays N/A
- trigger an alias-server outage and observe error rendered within the Registered Aliases dropdown
Reviewers: bytesofman, #bitcoin_abc
Reviewed By: bytesofman, #bitcoin_abc
Subscribers: Fabien
Differential Revision: https://reviews.bitcoinabc.org/D14334