* 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>
This reverts commit 466ece4588, which has
the message:
"Revert "Merge pull request #7599 from MetaMask/Version-v7.7.0" (#7648)"
This effectively re-introduces the changes from the "LoginPerSite" PR.
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
Erik Marks
Whymarrh Whitby
Brad Decker
dependabot[bot]
Mark Stacey