Our source maps were being corrupted during minification, because the
`gulp-terser-js` plugin we were using didn't account for the existence
of sourcemaps in the input. A configuration option to allow the input
of sourcemaps was added in v5.2.0. The plugin has been updated, and we
now use this option.
Previously the generated sourcemaps had an invalid entry in the
"sources" array, with the filename of the bundle itself. This was not a
real source. After this change, this invalid source is no longer
present.
The changes made between v9.10.1 and v13.6.1 don't appear to be
relevant to us, aside from bug fixes that we'd benefit from.
`gulp-stylelint` also needed to be updated, as it's in-step with
`stylelint`. It went from v7 to v13.0.0. The changes aren't notable
here for us either.
* Stylelint: Ignore only top-level directories
The `.stylelintignore` entries lacked leading slashes, so most of the
UI code was ignored (because it fell under the `ui/app` directory, and
`app/` was ignored.
The leading slashes ensure only the intended top-level directories are
ignored.
* Simplify stylelint rules
We use the `stylelint-config-standard` rule-set, so most commonly-used
stylelint rules are inherited from that.
Some of the removed rules were redundant, some of them were more strict
than the rules in `standard` and we hadn't been following them in
practice, and some were obsolete.
* Convert stylelint config to JavaScript
JavaScript is a bit easier than JSON to work with, as it allows
comments.
This was also done to make it easier to merge in the `stylelint-config-
standard`, which is also in JavaScript.
* Inline `stylelint-config-standard`
I intend to go through each of these rules one-by-one, which is easier
with all of these rules inlined. Selectively overriding/disabling them
would have been messy.
* Comment out rules that aren't current working
These rules have been temporarily disabled. They will be re-renabled
one-by-one as they are fixed. This was done to make it easier to split
these changes among separate PRs, as many of the rules require
extensive functional changes.
* Add `stylelint` to `lint` script
`stylelint` is now run as part of the `lint` script. There is also a
separate `lint:styles` script for running just `stylelint`.
The remaining integration tests are all covered by e2e tests, so
they're no longer needed.
All associated scripts, fixtures, and dependencies have also been
removed.
This updated test dapp has a new `personal_sign` button. It also fixes
the `Encrypt` button, which was broken in `v3.0.0`.
The `signature-request` e2e test needed to be updated to find the
'Sign' button by id rather than by text, since there are now two
buttons with the text 'Sign'.
This script is relied upon by our e2e tests. It was broken in #8888,
because `@metamask/test-dapp` was updated to a version with a different
directory structure. The website is now in the `dist` directory instead
of the `website` directory.
* restore and enhance the time est feature
background: we had a feature for showing a time estimate on pending txs
that was accidently removed during the redesign implementation. This PR
restores that feature and also enhances it:
1. Displays the time estimate on all views instead of just fullscreen
2. Uses Intl.RelativeTimeFormat to format the time
3. Adds a way to toggle the feature flag.
4. Uses a hook to calculate the time remaining instead of a component
* Update app/_locales/en/messages.json
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* do not display on test nets
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
The fullscreen UI now shows roughly the same design as the popup UI.
A few additional changes depicted in the new fullscreen designs will
be implemented in subsequent PRs (e.g. the inline buttons on assets)
This was done now to make asset pages easier to implement. Implementing
asset pages solely for the popup UI would have been complicated by the
fact that we use viewport size to switch between the two layouts, so we
would have had to re-route upon resizing the window.
The account options menu is now much faster, and it correctly closes
when 'Switch account' is selected.
A static width had to be set on the menu so that it could be positioned
reliably. Without this width set, it was rendered as a different size
before positioning than after, which resulted in it being positioned
incorrectly. A `z-index` had to be added (equal to the `z-index` used
by the popover component) to ensure it wasn't rendered beneath the
popover.
The menu is automatically positioned relative to the account options
button, appearing below the button by default but above it instead if
there isn't room below. It is positioned to be inside the bounds of the
popover as well.
The account options button is now a `<button>` rather than a `<i>`.
This required a few additional style rules to overrule the default
button styles. Additionally the size was increased so that it matches
the designs more closely.
The callbacks for connecting, disconnecting, and switching accounts
have been updated to use state and props to determine the correct
address to use, rather than being bound to the correct address
parameter in the render function. This means we aren't creating a new
function upon each render anymore.
The `showAccountOptions` method still needs to be bound once per
account, but this was switched to use more readable syntax (`.bind`,
instead of the double arrow function).
`react-popper` and `@popperjs/core` were both added as dependencies.
These should be used for any UI requiring relative positioning (e.g.
tooltips, menus, etc.). Older versions of these libraries are already
in our codebase as transitive dependencies of the tooltip library we're
using.
An alert is now shown when the user switches from an account that is
connected to the active tab to an account that is not connected. The
alert prompts the user to dismiss the alert or connect the account
they're switching to.
The "loading" state is handled by disabling the buttons, and the error
state is handled by displaying a generic error message and disabling
the connect button.
The new reducer for this alert has been created with `createSlice` from
the Redux Toolkit. This utility is recommended by the Redux team, and
represents a new style of writing reducers that I hope we will use more
in the future (or at least something similar). `createSlice` constructs
a reducer, actions, and action creators automatically. The reducer is
constructed using their `createReducer` helper, which uses Immer to
allow directly mutating the state in the reducer but exposing these
changes as immutable.
`pify` v5.0.0 will preserve `this` references correctly, so explicit
binding of objects passed to `pify` is no longer needed.
There are no breaking changes that affect us; the only breaking change
in v4 and v5 is to update the minimum Node.js version to v10.
Previously all browser globals were allowed to be used anywhere by
ESLint because we had set the `env` property to `browser` in the ESLint
config. This has made it easy to accidentally use browser globals
(e.g. #8338), so it has been removed. Instead we now have a short list
of allowed globals.
All browser globals are now accessed as properties on `window`.
Unfortunately this change resulted in a few different confusing unit
test errors, as some of our unit tests setup assumed that a particular
global would be used via `window` or `global`. In particular,
`window.fetch` didn't work correctly because it wasn't patched by the
AbortController polyfill (only `global.fetch` was being patched).
The `jsdom-global` package we were using complicated matters by setting
all of the JSDOM `window` properties directly on `global`, overwriting
the `AbortController` for example.
The `helpers.js` test setup module has been simplified somewhat by
removing `jsdom-global` and constructing the JSDOM instance manually.
The JSDOM window is set on `window`, and a few properties are set on
`global` as well as needed by various dependencies. `node-fetch` and
the AbortController polyfill/patch now work as expected as well,
though `fetch` is only available on `window` now.
The Font Awesome font wasn't loaded correctly in the Storybook build.
Unlike our other fonts, Font Awesome is copied from `node_modules` at
build-time rather than being saved directly in `app/fonts`.
The `copy-webpack-plugin` plugin is now used in the Storybook webpack
build to copy the fonts explicitly from `node_modules` into the build
output directory. The font now seems to load correctly in Storybook.
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 `@storybook/addon-backgrounds' addon has been added, which allows
changing the component preview background. By default no background
colors are defined, though there is a helpful grid button. A "light"
and "dark" background option has been added globally. Additional
story-specific backgrounds or global backgrounds can be added later if
necessary.
This warning was resolved by updating `pubnub`, which is the dependency
that uses `superagent-proxy` which is causing this warning. The
resolution we added to address a security advisory is also no longer
required.
This was primarily done to make explicit that we're using v5.3.x. Our
manifest listed `^5.2.x` but we had already updated to `v5.3.9` in the
lockfile. v5.3.0 lays much of the groundwork for the planned v6.0
release, and includes many changes.
The changes between v5.3.9 and v5.3.14 include various bug fixes, none
of which affect us as far as I know.
Peer dependencies required by Storybook have also been added. These
were already in our dependencies indirectly either way.
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.
