Two tabs have been created on the home screen: 'Assets' and 'History'.
This tabbed view is shown only on small screens (e.g. in the popup).
The fullscreen view is unchanged.
The toggle-able left sidebar no longer exists, so some 'sidebar-left'
specific code and styles have been removed. The button in the menu bar
has been removed as well.
The 'History' title of the transaction history is now redundant when
where are no pending transactions, so it as been conditionally hidden.
A passthrough for `data-testid` has been added to the Tab component for
convenience in e2e tests.
The popup view would expand beyond the width of the viewport when
expanding a transaction. This bug was introduced in #8139 when I
removed the `min-width: 0` property from the `home__container` class;
this property was giving the parent permission to shrink that div below
the size of its content.
Instead of restoring that property, the parent component is no longer
using `display: flex`. Flexbox was never useful here, as this is just a
wrapper div around a wrapper div, both with identical sizes. The
default display type of `block` produces the desired behaviour with
less rules.
The Tabs component expects the `children` prop to be either a single
Tab component or an array of Tab components, and the internal tab index
should always map onto one of these components. However, if an invalid
tab index was set, it was just returning the first tab contents.
Instead it will now validate that the tab being asked for does exist,
and throw an error otherwise.
The pieces that we'll be referring to as the "Asset List" in the near
future have been extracted from WalletView into a separate AssetList
component. This list includes ETH, the tokens, and the 'Add Token'
button.
The styles were moved alongside this new component as well.
The token cell how shows a warning inline for the case where the token
balance failed to update. It displays a warning icon next to the
balance, with a tooltip that contains the same contents as was shown on
the token list previously.
The 'Add Token' component has been redesigned to be more in-line with
the new home screen design. The description instructing the user to
click the 'Add Token' button has been removed, and the section itself
has been made roughly the same size as one of the list item. The text
now appears on just one line, overflowing to two if necessary.
The 'interactive' prop for React Tippy will keep the tooltip open when
the user moves the mouse over the tooltip. This enables interactive
tooltips, where the user is expected to click on something in the
tooltip (e.g. a message with a link).
The styles for the TokenCell component have been moved to be alongside
the component. They have also been renamed from `token-list-item` to
match the component name.
This commit updates the existing _Connected Sites_ section to a modal using
the `Popover` component. This will serve as a base for the new modal design.
The official npm package for Font Awesome Free is now used instead of
the vendored styles. Previously we had been using v4.4.0, now we're
using v5.13.0.
We're now importing the Font Awesome SCSS modules instead of using the
minified CSS bundle. This integrates more cleanly into our build
system, and it lets us use their mixins directly in the future if we
need to.
The variable `fa-font-path` has been set to reference our font
directory, as instructed here:
https://fontawesome.com/how-to-use/on-the-web/using-with/sass#compile
Various SVGs were being imported directly in components using Webpack
loaders. This was done to get these components to work correctly in
storybook, which uses Webpack. However we don't use Webpack for our
actual build system, so these components would fail when you attempted
to use them.
Instead the storybook script has been updated to use the `--static-dir`
flag, which allows specifying a directory of files to serve statically.
The `app` directory is served statically, so all of the relative URLs
we use in practice to reference fonts and images should just work.
The storybook build command has been updated to use the same flag.
Unfortunately this also means that the uncompiled background code is
now included in the build as well, because it's alongside our static
files. This shouldn't have any impact upon the build though.
The use of this `static-dir` option as made much of the existing
storybook Webpack configuration unnecessary, so it has been reduced to
just the essential steps.
The token list would be stuck on "Loading" when there was at least one
token, but the balance of all tokens was zero. This bug was only
present on `develop`, and has not affected any published version of the
extension.
This was introduced in #8223, which removed what at the time seemed to
be an unnecessary update step. It turns out that the step was required
as a workaround to this bug with the token tracker.
The bug was fixed in https://github.com/MetaMask/eth-token-tracker/pull/33
and published in v2.0.0 of `@metamask/eth-token-tracker`.
The user-specified seed phrase during the first-time-flow import step
required the phrase to be entered in all lowercase. The case does not
add any extra entropy to the seed, so there's no reason to be case
sensitive. Flexibility here will improve the onboarding UX.
This commit makes the entered seed phrase case-insensitive.
Fixes#8171
* Refactor token list into standard container/component modules
The token list has been moved into its own directory and split into
separate container and component modules. Additional updates have been
made to simplify the component logic as well.
* Update token-list to use new React Context API
The token list click handler has been moved up from the token cell to
the wallet view component where the token list is used. This keeps the
responsibilities of the token list and token cell components a bit more
focused - they're now only responsible for display, not what the
effects of clicking should be.
The `network` prop was being passed to the Identicon despite that not
being an Identicon prop, and the `userAddress` prop was being passed
down by the container but was unused. The methods removed were not
called anywhere.
These tests broke when `sinon.restore()` was called in a separate test
because they setup stubs/spies using `sinon` in the module context.
These were constructed then restored before the tests even ran.
Instead the test doubles are now setup in the `beforeEach` hook, which
in addition to fixing this problem also ensures each unit test is
isolated from the others.
* Refactor tab styles to minimize tab component styles
The tab component styles were not applicable to all tab instances, so
they were being overridden in a few places. Instead the tab styles have
been reduced to a minimal set that should be applicable in most cases.
There are a few functional changes here as well, meant to undo
changes made accidentally in #8132. Before that PR the page container
was overriding the tab styles altogether, but after that PR they were
combined with the base tab styles instead.
* Remove background color
This was previously being overridden by the page container styles, and
it matches the inherited background color already in the one other case
(the confirm page for token interactions)
The "i18n-provider" module has been replaced by a new `i18n.js` module
in the `contexts` directory which provides the `t` function via the new
React Context API.
The legacy context API is still used throughout the codebase, so a
legacy context provider has also been added as a shim until we migrate
away from the old API. The migration does require changing every single
place where the `t` function is used, so it is a non-trivial amount of
work. This shim allows us to tackle it one piece at a time without
breaking anything.
This was placed in a new `contexts` directory because it didn't seem
to belong in any existing categories. It certainly isn't a higher-order
component.
The translation helper function we use everywhere (`t`) would fallback
to the message `[${key}]` for any key not found in the set of localized
messages. Instead it how returns `undefined` in that case.
`[${key}]` isn't something you'd typically want to show to users, so
this fallback wasn't overly useful in practice. At best it served to
hide errors.
The falsey return value in the case where the message is missing makes
it easier to implement a fallback for that case. Such a fallback is
used in the `confirm-transaction-base` component, to restore the
fallback behavior accidentally changed in #8211
When the token tracker is first constructed and the first balance
update is triggered, we manually serialize the tracker state and call
our update function. This is _in addition_ to the update event handler
though, so the balances get updated twice. Similarly, we also catch any
errors during this first update to handle them, but this is done via an
event as well, so is redundant.
These steps have been removed; updates and errors are now handled
solely through events. We were able to drop a check from
`updateBalances` as well to ensure the tracker is still running, as the
event cannot be emitted unless it's running.
* Add minimal working popover
* Fix styling of popover component
* Use lorem ipsum
* Update classnames and remove unrelated styles
* Remove unused components
* Add SVG close icon
* Add Close icon to icon stories
* Use div
* Use `addon-actions`
* Use `<button>` for close
* Fix button wobble in Firefox
* Remove border
These two functions were not especially useful. `tOrDefault` was used
only by `tOrKey`, and `tOrKey` was only used in one place. All it did
was return the given `key` directly if it was falsey, so it was easily
replaced by a condition.
Previously a few mostly-empty `div`s would be shown if a render
happened while the confirm page was loading. Now nothing is shown. This
shouldn't impact users at all, as this condition should only last a
fraction of a second.
* Add tx list-item component
New list item compoent for transaction history
* Simplify component logic and remove type checks
* Address remaining feedback
* Remove extra line
* Place className prop on its own line
* Rename to primaryCurrency and secondaryCurrency
* Make the title `isRequired`
* Fix no-undef
* Remove more + buttons to be implemented in seperate PR
* Add minimal store and I18nProvider to storybook
* Use Component to support translations
* Add `metamask` to store
* Rename decorator
The current selected asset in the asset list should be highlighted, but
this highlighting was broken for `ETH`. `ETH` was not highlighted when
it was selected, but it would be highlighted when anything else was.
This was broken accidentally in #7546
The method registry was being initialized with the global variable
`ethereumProvider` before that variable was set. As a result, the
method registry was falling back to an internally constructed provider
that used the wrong provider URL (an obsolete Infura API). This was
resulting in an error with the message "Project ID not found".
The method registry is now initialized lazily, when it's first needed.
This should be well after the initialization of `ethereumProvider`,
which occurs during the UI initialization.
The props `isActive` and `tabIndex of the Tab component are required
and are always passed in, but the prop type warning is triggered
because the tabs are rendered without these props first, then cloned by
the `Tabs` component, where these props are added.
To silence the warning, the props have been made optional.
The sidebar used to speed up a transaction while it's pending or after
it has failed currently allows editing the gas limit, but that new
limit is ignored. This is especially problematic for transactions that
failed due to a low gas limit, as the problem becomes impossible to fix
by retrying.
The gas limit specified by the user is now used in the speed up
transaction.
Fixes#8156Fixes#7977
The address is blank momentarily when navigating to the confirmation
screen when sending a token. The address is updated in a subsequent
render.
The ENS reverse resolution is now only attempted if the address is
given. It has also been updated to attempt resolution when the address
is finally set, which fixes the reverse resolution for token sends.
I had hoped to get rid of this interim render-without-address, but that
turned out to be a bit more challenging. The problem is that the UI
submits transactions through the provider just as a dapp would, and the
provider doesn't say when the transaction is submitted. The promise
returned doesn't resolve until after confirmation. We would have to
start calling the background methods directly and bypass the provider
to get the feedback we need, and that sounded potentially dangerous.
Definitely a challenge for another day.
The `metamask.send.from` field was assumed by various selectors to be
an object, but instead it was recently set to a string. The selectors
have been updated to assume it's a string, and to fetch the full
account object explicitly.
The selector `getSendFromObject` was repurposed for this, as that's
basically what it already did. The optional address parameter was
removed though, as that was only used to fetch the `from` address in
cases where the `send` state was set without there being a `from`
address set. That case is no longer possible, as the `from` address is
always set upon the initialization of the `send` state.
The `getSendFromObject` selector no longer fetches the 'name' of that
address from the address book state either. This property was not used
in either of the cases this selector was used.
The `createRetryTransaction` was accidentally removed from the
`gas-modal-page-container` component during a refactor in #7730.
Attempting to retry a transaction since that change has resulted in a
UI crash.
* Adds notification icon circles and associated storybook stories
* Fix image paths in circle-icon.stories and message-circle-icon.component
* Code improvements for icon circles PR: remove additional z-index, make iconSource required
* Use component story format in circle-icon.stories and message-circle-icon.stories
* Remove success and info circle icons, as not presently needed
* Rename message-circle-icon to alert-circle-icon
* Small code fix ups for alert-circle-icons
* Update i18n-helper to allow substitutions of react components and wrapping of translation substrings
* Simplify code in i18n-helper.js related to substitutions, including react substitutions.
* Remove wrapper support from i18n in favour of using translations in substitutions.
* Fix i18n-helper substitution logic: ensure correct index of substitution is applied
* Throw error if there are not enough substitutions for a translation phrase
* Adds unit tests for now i18n-helper substitution functionality
* Fix grammar, react element line spacing and test layout+readability in i18n-helper.test.js
The base component we use for dropdowns handles ensuring the dropdown
is closed when the user clicks outside the dropdown. This functionality
was accidentally broken in #7781 when converting it to an ES6 class.
The "Transaction View" component has been merged with the Home
component. The division between these two components seemed wrong
because the "Transaction View" contained the menu bar (distinctly a
"home" thing, not a "transaction" thing), and we will be adding more
non-transaction-related components shortly.
This also let us use a single `Media` component instead of two.
The notifications displayed on the home screen were being passed
through the `TransactionView` and `TransactionList` components before
being rendered. This was unnecessary because the notifications are
absolutely positioned.
They are now rendered directly in the home component where they're
defined. A helper function has been written to improve readability.
The styles used for the Home component were in the huge
"newui-sections" SCSS file. Instead they've been moved into an SCSS
module alongside the component, to follow our conventions.
The `main-container` class was left as-is because it is shared between
here and the settings page.
This effectively covers the `Tab` component as well, which doesn't
really make sense to showcase on its own.
One minor change was made to the actual `Tabs` component; `children`
was marked as a required prop. It doesn't render anything sensible if
they are omitted, and it always has at least one child in our codebase.
The tab component now sets the `tab` and `tab--active` classes
internally regardless what class is passed in. The convention in React
is to allow adding _additional_ classes via the `className` prop, not
to allow removing internal classes entirely.
the `activeClassName` prop was removed entirely. A few other props that
are always passed in have been marked as required.
One main configurable story has been added, plus a few distinct other
examples. All props are covered except `className`, which seems safe to
ignore.
Default props have been added to `Identicon` to make more explicit what
defaults were expected; there is no functional change.
The recommended way of writing stories changed in Storybook v5.2 to
the Component Story Format (CSF). Instead of using `storiesOf` and
running everything upon module import, the new story format is a
declarative description of each component that uses ES6 import
semantics.
Previously when the `diameter` prop of the `jazzicon` component was
changed, the new diameter would be ignored. The jazzicon is now
redrawn upon each change, as you would expect.
I don't think it's possible for this bug to manifest itself in the
extension. This was discovered through tinkering with the Storybook
for this component.
The identicon was showing as a white circle on the connect page. This
was a CSS error introduced when `jazzicon` was updated in #7898.
The white circle shown was the white border around the identicon. This
circle is an adjacent `div` in the DOM, and was rendered _underneath_
the identicon itself because it was placed first in the DOM.
Unfortunately the new version of `jazzicon` is no longer explicitly
positioned (it used to have `position: relative` set internally), so
now it's lower in the stack order regardless of DOM position.
Rather than placing the border adjacent and relying upon both elements
being positioned, the border has been changed into a wrapping `div`
instead. Now the stack order is more explicit.
In our base stylesheets we set the `body` background color to white.
This unfortunately also affected the preview area of Storybook. The
Storybook preview only renders isolated components, but it does
include all styles.
To avoid this problem, the white background color has been moved to
the `#app-content` div instead. All of our UI is inside this div.
Implement `eth_decrypt` and `eth_getEncryptionPublicKey`. This allows decryption backed by the user's private key. The message decryption uses a confirmation flow similar to the messaging signing flow, where the message to be decrypted is also able to be decrypted inline for the user to read directly before confirming.
ENS currently supports a variety of tlds in addition to `.eth`, and
more will be supported in the future. Rather than hard-code a list of
supported ENS tlds, all valid domain names will now be interpreted as
potential ENS addresses in our address input component.
Closes#7978
The QR scanner component error handling would sometimes redirect the
user to the wrong page. It was also confusingly handled in two places;
the action used to open the QR scanner, and the scanner component.
The error handling has now been corrected, simplified, and integrated
into the QR scanner component itself.
The old way of handling an error within the component was to close the
modal, then call the action to open it all over again. This action took
a route parameter, which instructed the action on which route to open
if the fullscreen UI needed to be opened (as the fullscreen UI is the
only one where the browser will show the camera permission prompt).
This redirection worked just fine for handling the initial opening
of the QR scanner modal. But for any subsequent errors the same action
was used with a _default route_, meaning the user could click "try
again" and find themselves on a completely different screen.
Instead, errors now trigger a state change instead of closing and re-
opening the modal. The permission checks in the action have been
integrated into the component as well.
One functional change is that the scenario where you have an invalid
QR code has been made an error. Previously this just showed the error
message below the video preview, but left the user with no way to try
again. There error page has a "Try again" button, so it seemed better
suited as an error. Also the message literally started with "Error:".
Another functional change is that _all_ errors during initialization
will result in the error UI being shown. Previously there was one error
case that would instead log to the console and leave the user stuck.
* Use @metamask/eslint-config@1.1.0
* Use eslint-plugin-mocha@6.2.2
* Mark root ESLint config as root
* Update Mocha ESLint rules with shared ESLint config
* Various component tests and some conditional statements
Conditional in account-menu in removeAccount when keyring sometimes is not initially provideed
Conditional on unlock-page when there is no target.getBoundingClientRect on the element.
* Update helpers
* Remove component debugging
* Add default params for render helpers
* Remove stubComponent for old Mascot
Changes in https://github.com/MetaMask/metamask-extension/pull/7893 has prevented the need to stub it out.
Change logout to lock in account-menu test
