* Show token symbol when token amount string is long
Fixes#9318
This essentially separates the token cell list item title/token amount and the token symbol.
I do request advice/recomendations on how to better handle the new `subTtitle` which I set the token symbol to and the `subtitle` https://github.com/MetaMask/metamask-extension/blob/develop/ui/app/components/app/asset-list-item/asset-list-item.js#L99.
* Individually test token balance and token symbol and their associated css element
* Feedback commit
* Classname and css overflow for title with string.
Using flex was getting out of hand, I noticed on develop that when
a pending transaction is coming in the speed up and cancel buttons
cause the icon to center according ot their height as well. A grid
is really what is needed. This seemingly greatly simplifies the CSS
AND html (removes unnecessary nesting of divs)
The asset list item and transaction list item do not make great use of
screen realestate when in fullscreen mode on larger displays/windows.
This PR adds in a new prop for list-item for displaying content in the
middle of the list-item when on these types of screens. To facilitate
this, some updates were made to styling to allow for the list item to
better control how items are laid out in various breakpoints.
This works makes it possible to display the outdated balance warning
inline in the middle section of the list item, and convert to a tooltip
when on small displays.
* refactor asset items to use list-item
Refactors the asset-list-item and token-cell to rely on the list-item
component for UI. Little changes were needed to the list-item code
to make this work! The result should be lots of eliminated code
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
A new page has been created for viewing assets. This replaces the old
`selectedToken` state, which previously would augment the home page
to show token-specific information.
The new asset page shows the standard token overview as seen previously
on the home page, plus a history filtered to show just transactions
relevant to that token.
The actions that were available in the old token list menu have been
moved to a "Token Options" menu that mirrors the "Account Options"
menu.
The `selectedTokenAddress` state has been removed, as it is no longer
being used for anything.
`getMetaMetricState` has been renamed to `getBackgroundMetaMetricState`
because its sole purpose is extracting data from the background state
to send metrics from the background. It's not really a selector, but
it was convenient for it to use the same selectors the UI uses to
extract background data, so I left it there for now.
A new Redux store has been added to track state related to browser history.
The most recent "overview" page (i.e. the home page or the asset page) is
currently being tracked, so that actions taken from the asset page can return
the user back to the asset page when the action has finished.
The asset list has been updated to more closely match the new designs.
There are still a few major differences (e.g. the selection state, the
token menu) that can't be implemented until the asset screen has been
implemented.
The background color of the selected asset has been lightened, so that
it's less jarring until we remove it.
All asset list items now use the same component (`AssetListItem`).
Previously the tokens and the Ethereum balance were totally separate
components, despite being styled similarly.
Various unnecessary DOM elements and style rules were removed, but the
overall list looks identical to how it looked before.
Guillaume Roux
David Walsh
ryanml
sooyoung
Brad Decker
Thomas Huang
Mark Stacey