* Create RTL stylesheets using `gulp-rtl`
* Handle RTL stylesheet special cases
Certain blocks of Sass were set to bypass "rtlcss" using ignore
comments. Certain icons had to be flipped 180 degrees.
* Switch stylesheets when locale changes
A second stylesheet has been added to each HTML page for use with
right-to-left locales. It is disabled by default. It is enabled on
startup if a RTL locale is set, and when switching to a RTL locale.
Similarly the LTR stylesheet is disabled when a RTL locale is used.
Unfortunately there is an unpleasant flash of unstyled content when
switching between a LTR and a RTL locale. There is also a slightly
longer page load time when using a RTL locale (<1s difference). We
couldn't think of an easy way to avoid these problems.
* Set `dir="auto"` as default on `TextFields`
Babel 7 moved to a new configuration format, and they've scoped all of
their packages under `@babel/`. This brings MetaMask in-line with
dependencies we use that _already_ use Babel 7, and it eliminates a
few unfortunate edge cases that can prevent dependencies from being
correctly transpiled.
* Implements ability to defer seed phrase backup to later
* Adds incremental-security.spec.js, including test dapp that sends signed tx with stand alone localhost provider
* Update metamask-responsive-ui for incremental account security changes
* Update backup-notification style and fix responsiveness of seed phrase screen
* Remove uneeded files from send-eth-with-private-key-test/
* Apply linguist flags in .gitattributes for send-eth-with-private-key-test/ethereumjs-tx.js
* Improve docs in controllers/onboarding.js
* Clean up metamask-extension/test/e2e/send-eth-with-private-key-test/index.html
* Remove unnecessary newlines in a couple first-time-flow/ files
* Fix import of backup-notification in home.component
* Fix git attrs file
* Style Send Header
* Move Send to-row to send view and restyle
* Add "Recents" group to select recipient view
* Rename SendToRow to AddRecipient
* Basic UI and Layout
* New ENSInput component
* wip - fuzzy search for input
* small refactor
* Add Dialog
* contact list initial
* initial error on invalid address
* clean up edit
* Click to open modal
* Create AddToAddressBookModal component
* Modal styling and layout
* modal i18n
* Add to Addressbook
* ens wip
* ens wip
* ENS Resolution
* Reset input
* Send to explicit address
* Happy Path Complete
* Add back error checking
* Reset send-to when emptying input
* Add back warning object
* Fix linter
* Fix unit test #1 - fix import paths
* Remove dead tests
* One more to go
* Fix all unit tests
* add unit test for reducers and actions
* test rendering AddRecipient
* Add tests for dialog boxes in AddRecipient
* Add test for validating
* Fix linter
* Fix e2e tests
* Token send e2e fix
* Style View Contact
* Style edit-contact
* Fix e2e
* Fix from-import-beta-ui e2e spec
* Make section header say "add recipient” by default
* Auto-focus add recipient input
* Update placeholder text
* Update input title font size
* Auto advance to next step if user paste a valid address
* Ellipsify address when recipient is selected
* Fix app header background color on desktop
* Give each form row a margin of 16px
* Use .container/.component naming pattern for ens-input
* Auto-focus on input when add to addressbook modal is opened; Save on Enter
* Fix and add unit test
* Fix selectors name in e2e tests
* Correct e2e test token amount for address-book-send changes
* Adds e2e test for editing a transaction
* Delete test/integration/lib/send-new-ui.js
* Add tests for amount max button and high value error on send screen to test/e2e/metamask-ui.spec.js
* lint and revert to address as object keys
* add chainId based on current network to address book entry
* fix test
* only display contacts for the current network
* Improve ENS message when not found on current network
* Add error to indicate when network does not support ENS
* bump gaba
* address book, resolve comments
* Move contact-list to its own component
* De-duplicate getaddressbook selector and refactor name selection logic in contact-list-tab/
* Use contact-list component in contact-list-tab.component (i.e. in settings)
* Improve/fix settings headers for popup and browser views
* Lint fixes related to address book updates
* Add 'My accounts' page to settings address book
* Update add new contact button in settings to match floating circular design
* Improve styles of view contact page
* Improve styles and labels of the add-contact.component
* Further lint fixes related to address book updates
* Update unit tests as per address book updates
* Ensure that contact list groups are sorted alphabetically
* Refactor settings component to use a container for connection to redux; allow display of addressbook name in settings header
* Decouple ens-input.component from send context
* Add ens resolution to add contact screen in settings
* Switching networks when an ens address is shown on send form removes the ens address.
* Resolve send screen search for ensAddress to matching address book entry if it exists
* Show resolved ens icon and address if exists (settings: add-contact.component)
* Make the displayed and copied address in view-contact.component the checksummed address
* Default alias state prop in AddToAddressBookModal to empty string
* Use keyCode to detect enter key in AddToAddressBookModal
* Ensure add-contact component properly updates after QR code detection
* Fix display of all recents after clicking 'Load More' in contact list
* Fix send screen contact searching after network switching
* Code cleanup related to address book changes
* Update unit tests for address book changes
* Update ENS name not found on network message
* Add ens registration error message
* Cancel on edit mode takes user back to view screen
* Adds support for memo to settings contact list view and edit screens
* Modify designs of edit and view contact in popup environment
* Update settings content list UX to show split columns in fullscreen and proper internal navigation
* Correct background address book API usages in UI
As a solution to the constant lockfile churn issues we've had with
`npm`, the project now uses `yarn` to manage dependencies.
The `package-lock.json` file has been replaced with `yarn.lock`, which
was created using `yarn import`. It should approximate the contents of
`package-lock.json` fairly well, though there may be some changes due to
deduplication. The codeowners file has been updated to reference this
new lockfile.
All documentation and npm scripts have been updated to reference `yarn`
rather than `npm`. Note that running scripts using `npm run` still works
fine, but it seemed better to switch those to `yarn` as well to avoid
confusion.
The `npm-audit` Bash script has been replaced with `yarn-audit`. The
output of `yarn audit` is a bit different than `npm audit` in that it
returns a bitmask to describe which severity issues were found. This
made it simpler to check the results directly from the Bash script, so
the associated `npm-audit-check.js` script was no longer required. The
output should be exactly the same, and the information is still sourced
from the same place (the npm registry).
The new `yarn-audit` script does have an external dependency: `jq`.
However, `jq` is already assumed to be present by another CI script, and
is present on all CI images we use. `jq` was not added to `package.json`
as a dependency because there is no official package on the npm
registry, just wrapper scripts. We don't need it anywhere exept on CI
anyway.
The section in `CONTRIBUTING` about how to develop inside the
`node_modules` folder was removed, as the advice was a bit dated, and
wasn't specific to this project anyway.
The CSS is now served as an external file instead of being injected.
This was done to improve performance. Ideally we would come to a middle
ground between this and the former behaviour by injecting only the CSS
that was required for the initial page load, then lazily loading the
rest. However that change would be more complex. The hope was that
making all CSS external would at least be a slight improvement.
Performance metrics were collected before and after this change to
determine whether this change actually helped. The metrics collected
were the timing events provided by Chrome DevTools:
* DOM Content Loaded (DCL) [1]
* Load (L) [2]
* First Paint (FP) [3]
* First Contentful Paint (FCP) [3]
* First Meaningful Paint (FMP) [3]
Here are the results (units in milliseconds):
Injected CSS:
| Run | DCL | L | FP | FCP | FMP |
| :--- | ---: | ---: | ---: | ---: | ---: |
| 1 | 1569.45 | 1570.97 | 1700.36 | 1700.36 | 1700.36 |
| 2 | 1517.37 | 1518.84 | 1630.98 | 1630.98 | 1630.98 |
| 3 | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 |
| 4 | 1522.15 | 1523.72 | 1629.3 | 1629.3 | 1629.3 |
| **Min** | 1517.37 | 1518.84 | 1629.3 | 1629.3 | 1629.3 |
| **Max** | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 |
| **Mean** | 1553.17 | 1554.71 | 1668.3 | 1668.3 | 1668.3 |
| **Std. dev.** | 33.41 | 33.43 | 38.16 | 38.16 | 38.16 |
External CSS:
| Run | DCL | L | FP | FCP | FMP |
| :--- | ---: | ---: | ---: | ---: | ---: |
| 1 | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 |
| 2 | 1537.55 | 1538.99 | 199.38 | 1633.5 | 1633.5 |
| 3 | 1571.28 | 1572.74 | 268.65 | 1677.03 | 1677.03 |
| 4 | 1510.98 | 1512.33 | 206.72 | 1607.03 | 1607.03 |
| **Min** | 1510.98 | 1512.33 | 199.38 | 1607.03 | 1607.03 |
| **Max** | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 |
| **Mean** | 1553.8025 | 1555.7425 | 239.93 | 1657.605 | 1657.605 |
| **Std. dev.** | 29.5375 | 30.0825 | 36.88 | 37.34 | 37.34 |
Unfortunately, using an external CSS file made no discernible improvement
to the overall page load time. DCM and L were practically identical, and
FCP and FMP were marginally better (well within error margins).
However, the first paint time was _dramatically_ improved. This change
seems worthwhile for the first paint time improvement alone. It also
allows us to delete some code and remove a dependency.
The old `css.js` module included two third-party CSS files as well, so
those have been imported into the main Sass file. This was easier than
bundling them in the gulpfile.
The resulting CSS bundle needs to be served from the root because we're
using a few `@include` rules that make this assumption. We could move
this under `/css/` if desired, but we'd need to update each of these
`@include` rules.
Relates to #6646
[1]: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
[2]: https://developer.mozilla.org/en-US/docs/Web/Events/load
[3]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
The Babel config had previously supported all browsers with greater than
0.25% global usage (according to `browserlist`). This resulted in
`babel-preset-env` including plugins sufficient to support the following
minimum browser versions:
```
{
"chrome": "49",
"android": "4.4",
"edge": "16",
"firefox": "52",
"ios": "9.3",
"safari": "11"
}
```
Instead, the babel config now explicitly supports chrome >= 58 and
firefox >= 53. Chrome and Firefox are the only browsers we currently
publish to, and these were the minimum versions with no additional Babel
transformations.
The minimum browser versions we support should be re-evaluated later,
when we have added tests and documentation.
The plugin 'transform-async-to-generator' has also been removed. It was
used to translate async/await, but our browser targets all support
async/await.
Removing some of these transformations exposed bugs in `uglify-es` that
only presented themselves in the production build. `gulp-uglify-es` has
been updated to a version that uses `terser` instead of `uglify-es`,
which has resolved these issues.
Relates to #6805
The Drizzle tests have not been used for some time. They were used to
ensure compatibility with newer versions of `web3` v1. If we want to
re-add tests to ensure compatibility with newer `web3` versions, we
should find some way of doing that more reliably than was done here -
these tests were somewhat flaky and unreliable.
We've been using the `eslint-plugin-json` plugin for some time, but we
haven't been visiting `.json` files in the lint script. The lint script
has now been updated to incude `.json` files, which means any invalid
JSON will result in a lint error.
Unfortunately this JSON plugin doesn't seem to apply the other eslint
rules (such as `key-spacing`) to the JSON files. I wasn't able to find a
way to get that to work. Instead I manually auto-formatted each of the
locale `message.json` files, which fixed many whitespace
inconsistencies.
The `states.json` file was deleted completely, as it appears to be
unused. It wasn't a valid JSON file anyway, it was JavaScript. It looks
like a `states.js` file is automatically generated, but an old copy was
accidentally saved as `states.json` and included in the repo.
Many duplicate key errors were found and fixed in the
`development/states/` JSON files.
`package-lock.json` was added to `.eslintignore` because it was very
slow to lint, and linting it doesn't provide much value.
We had forgotten to add `eslint` as a dependency, even though we use it
directly. It had always worked because we have dependencies that also
depend upon it.
`eslint` has also been updated to v6, which necessitated two minor
changes.
The AppVeyor configuration appears to be unused - this project is not
connected to AppVeyor.
After deleting the AppVeyor config, the JSDoc config was the last thing
in the `development/tools` directory. That felt a little silly, so I
moved it up to `development`.
* Add React and Redux DevTools
* Conditionally load react-devtools
* Add start:dev npm script to run the app with devtools
Co-Authored-By: Mark Stacey <markjstacey@gmail.com>
This package is deprecated, and is incompatible with React v16. It has
been replaced by `react-test-renderer`, which has a drop-in replacement
for `react-addons-css-transition-group`.
Strangely, `react-test-renderer` was already listed as a dependency
despite not being used. I had to downgrade it, as the version already
listed was for React v16, and we're still using React v15.
The `stage-0` Babel preset has been replaced with the specific Babel
plugins that we depend upon. We don't use most of `stage-0`, so this
allowed us to remove many unnecessary transformations. We had to remove
this preset soon anyway, because all of the stage presets are
deprecated in Babel 7.
The `stage-0` preset consisted of these plugins:
```
"transform-do-expressions"
"transform-function-bind"
"transform-class-constructor-call"
"transform-export-extensions"
"transform-class-properties"
"transform-decorators"
"syntax-dynamic-import"
"syntax-trailing-function-commas"
"transform-async-generator-functions"
"transform-async-to-generator"
"transform-exponentiation-operator"
"transform-object-rest-spread"
```
Of that list, only 'transform-class-properties', 'transform-object-
rest-spread', and 'transform-async-to-generator' were being used.
The `disc` gulp command no longer works. I wasn't able to fix this
easily, so instead it has been removed. We can probably find something
better to replace it with.
The integration tests are slow, and rather inconvenient to run in
development on a regular basis (they break if you move the mouse). They
have been removed from the `test` script, to make running `test`
frequently during development less painful.
This silences a warning message that was printed to the console whenever
this module was loaded during tests.
The API changes between these two versions were reviewed carefully for
differences. The only difference made was to `PBKDF2_HMAC_SHA256.bytes`,
which was replaced by `Pbkdf2HmacSha256`.
The length argument no longer has a default value, so it has been set
to match what the default value was in the previous version we used,
which is 32 (the SHA256 hash size).
The flat tests also rely upon these transformations, yet invoke
browserify from the command line rather than using the gulpfile. The
transformations have been specified on the command line for those
instead.
Of course it's not ideal to have the same transformations listed in two
different places, but the plan is to delete the flat tests soon anyway,
so this should suffice until then.
Closes#4538
The source maps generated previously were mapping the bundled files to
the post-Babel files - they weren't showing mapping to the source files
as written.
It looks like this was a result of `reactify` being used in addition to
babel - that transformation must have dropped the source maps.
`reactify` still needs to be listed as a dependency because it is
an unlisted requirement of the `boron` package, which we use. We don't
need to use it to create our bundles though, as Babel already performs
the transformations we need.
The `watch` npm script did not work - it must have gone unused for some
time. The following changes were required for it to work:
* Use the `--watch` flag, rather than the `watch` command (which appears
to not exist)
* Set the `METAMASK_ENV` environment variable to "test"
* Include the tests in the `ui` directory
* require the `test/setup.js` file before running the tests
The reporter was also changed to `min`, which is generally recommended
for use with the `--watch` flag.
Nick Doiron
Erik Marks
Whymarrh Whitby
Bruno Barbieri
Mark Stacey
Dan J Miller
Alessandro Ricottone