We are working on migrating the extension to a unified network
controller, but before we do so we want to extract some of the existing
pieces, specifically `createInfuraClient` and `createJsonRpcClient`,
which provide the majority of the behavior exhibited within the provider
API that the existing NetworkController exposes. This necessitates that
we understand and test that behavior as a whole.
With that in mind, this commit starts with the Infura-specific network
client and adds some initial functional tests for `createInfuraClient`,
specifically covering three pieces of middleware provided by
`eth-json-rpc-middleware`: `createNetworkAndChainIdMiddleware`,
`createBlockCacheMiddleware`, and `createBlockRefMiddleware`.
These tests exercise logic that originate from multiple different places
and combine in sometimes surprising ways, and as a result, understanding
the nature of the tests can be tricky. I've tried to explain the logic
(both of the implementation and the tests) via comments. Additionally,
debugging why a certain test is failing is not the most fun thing in the
world, so to aid with this, I've added some logging to the underlying
packages used when a request passes through the middleware stack.
Because some middleware change the request being made, or make new
requests altogether, this greatly helps to peel back the curtain, as
failures from Nock do not supply much meaningful information on their
own. This logging is disabled by default, but can be activated by
setting `DEBUG=metamask:*,eth-query DEBUG_COLORS=1` alongside the `jest`
command.
We use this logging by bumping `eth-block-tracker`, and
`eth-json-rpc-middleware`.
The package `object.values` was updated in #15293 but we forgot to
update the patch. This was resulting in a warning on the command line
upon each install.
The patch was still applied successfully, so no changes were needed
other than updating the version.
A patch made in #15672 was found to be unnecessary. Instead of setting
a `rootGlobals` object upon construction of the root compartment, we
are now creating a `sentryHooks` object in the initial top-level
compartment. I hadn't realized at the time that the root compartment
would inherit all properties of the initial compartment `globalThis`.
This accomplishes the same goals as #15672 except without needing a
patch.
Our Sentry setup relies upon application state, but it wasn't able to
access it in LavaMoat builds because it's running in a separate
Compartment.
A patch has been introduced to the LavaMoat runtime to allow the root
Compartment to mutate the `rootGlobals` object, which is accessible
from outside the compartment as well. This lets us expose application
state to our Sentry integration.
As we convert parts of the codebase to TypeScript, we will want a way to
track progress. This commit adds a dashboard which displays all of the
files that we wish to convert to TypeScript and which files we've
already converted.
The list of all possible files to convert is predetermined by walking
the dependency graph of each entrypoint the build system uses to compile
the extension (the files that the entrypoint imports, the files that the
imports import, etc). The list should not need to be regenerated, but
you can do it by running:
yarn ts-migration:enumerate
The dashboard is implemented as a separate React app. The CircleCI
configuration has been updated so that when a new commit is pushed, the
React app is built and stored in the CircleCI artifacts. When a PR is
merged, the built files will be pushed to a separate repo whose sole
purpose is to serve the dashboard via GitHub Pages (this is the same
way that the Storybook works). All of the app code and script to build
the app are self-contained under
`development/ts-migration-dashboard`. To build this app yourself, you
can run:
yarn ts-migration:dashboard:build
or if you want to build automatically as you change files, run:
yarn ts-migration:dashboard:watch
Then open the following file in your browser (there is no server
component):
development/ts-migration-dashboard/build/index.html
Finally, although you shouldn't have to do this, to manually deploy the
dashboard once built, you can run:
git remote add ts-migration-dashboard git@github.com:MetaMask/metamask-extension-ts-migration-dashboard.git
yarn ts-migration:dashboard:deploy
The build script now uses `yargs` rather than `minimist`. The CLI is
now better documented, and we have additional validation for each
option.
A patch for `yargs` was required because it would blow up on the line
`Error.captureStackTrace`. For some reason when running under LavaMoat,
that property did not exist.
Closes#12766
A patch has been added to ensure lavapack no longer includes the path
for each module as part of each serialized module. This path was
originally added for debugging purposes, and is not used for anything
at runtime. The module path was an absolute path, not a relative one,
so it was an obstacle to having reproducible builds between
environments.
* lavamoat - apply lavamoat protections to popup and notification
* build - enable lavamoat for home
* lavamoat - add missing ui overrides for react family
* deps/patches - patch zxcvbn for ses compat
* origin/develop: (210 commits)
Dark Mode: Remove unwanted background for price quote (#14278)
Dark Mode: Fix colors in toggle button (#14280)
Ensure proper color for swaps edit link (#14273)
Dark Mode: Ensure actionable message button colors are the same color as previously (#14271)
Add token standard to Token Added event. (#14253)
Token Aggregators component for Tokens Detected page (#14157)
Ensure Metafox follows cursor on Fetching quotes screen (#14261)
TransactionsControllerTest: catch uncaught errors (#14196)
GasModalPageContainer story: convert knobs and actions to controls / args (#13516)
Show STX switch for wrapping / unwrapping (#14225)
Change over ImportToken stories to use controls instead of knobs, update props in stories (#14246)
Change over FeeCard stories to use controls instead of knobs, update props in stories (#13766)
Update What's new screen with Token Detection information (#14124)
Improvements for multi-layer fee UX (#13547)
metaMetricsEvent -> trackEvent (#14249)
E2e dapp interactions (#14149)
failing contract interaction e2e (#14227)
Removed metrics event (#14042)
Add TypeScript to the build system (#13489)
Build user traits object when metamask state changes (#14192)
...
An array of integers is now used to represent the SRP in three cases:
* In the import wallet flow, the UI uses it to pass the user-provided
SRP to the background (which converts the array to a buffer).
* In the create wallet flow, the UI uses it to retrieve the generated
SRP from the background.
* When persisting the wallet to state, the background uses it to
serialize the SRP.
Co-authored-by: Elliot Winkler <elliot.winkler@gmail.com>
This commit allows developers to write TypeScript files and lint them
(either via a language server in their editor of choice or through the
`yarn lint` command).
The new TypeScript configuration as well as the updated ESLint
configuration not only includes support for parsing TypeScript files,
but also provides some compatibility between JavaScript and TypeScript.
That is, it makes it possible for a TypeScript file that imports a
JavaScript file or a JavaScript file that imports a TypeScript file to
be linted.
Note that this commit does not integrate TypeScript into the build
system yet, so we cannot start converting files to TypeScript and
pushing them to the repo until that final step is complete.
Sass has changed the syntax for dividing two numbers. Previously you
would use `/`, but because this causes some ambiguity with color
functions (`rgb()`, `rgba()`, and the like), where `/` is regularly used
to separate color channel information from an alpha value, Sass has
deprecate the use of `/` for division. [1]
This commit converts all such usages to use `math.div()` instead. This
is a little bit difficult because there are a few places in
`@fortawesome/fontawesome-free` which use the old syntax. There is an
issue open here about it [2] but that has not been fixed yet. So we have
to patch this package to make the deprecation warnings go away.
[1]: https://sass-lang.com/documentation/breaking-changes/slash-div
[2]: https://github.com/FortAwesome/Font-Awesome/issues/18371
We are currently patching `@babel/runtime` to fix various lockdown
errors caused by `@babel/runtime` modifying globals as part of various
polyfills. There was one lockdown error that was showing up in Sentry
error reports, which is the polyfill used for `Reflect.construct`.
All of our supported browsers include this API, so the polyfill has
been replaced with a Proxy that returns the `Reflect.construct`
function directly, except with the addition of the `default` and
`__esModule` properties. I don't know what these properties are for
(maybe ES5/ES6 interoperability?) but I left them just in case they
were being relied upon.
This should include no functional changes. We only use `electron` for
`react-devtools`, which appears to still work after this update.
This replaces PR #12338.
* integration for tx decoding confirmation and history view
* upgrading @truffle/decoder to latest release 5.1.0
* Update acorn and colors patches
* feat: remove redundant styling
* feat: basic integration for nickname components
* feat: wiring functionality of adding new nickname
* feat: wire functionality of showing nickname modal
* feat: link the nickname popover with add/update popover
* feat: moving forward with address nicknames integration
* feat: fixing a bug related to passing chainId in addressBook
* feat: populating memo prop in addressbook entry
* feat: add explorer link
* feat: bug fixing update nickname component
* feat: fix proptypes
* feat: adding tooltip for copying nickname address
* featL fix styling for tx-details page
* feat: optimize code for error handling
* feat: limiting transaction decoding to tx with data
* feat: remove tree UI component
* feat: adding request to check for tx decoding supported networks
* feat: showing data hex component
* feat: fix react warnings
* feat: remove extra margin in tx decoding
* Remove unused package @truffle/source-map-utils
* Ensure messages get translated
* feat: link tx-decoding addresses with nicknames
* Omit value for boolean attributes
* Fix props reading in CopyRawData
* fix: fixing issue with transaltion
* Fix lint errors in TransactionDecoding
- Remove unused import
- Reorder imports
- Address conflict between caught `error` and error state flag by
renaming state flag to `hasError`
- Fix requestUrl identifier casing and use of template string
- Ensure `useEffect` gets passed the deps it needs
- Add scope braces around case statement where it's needed
- Omit literal `true` for boolean jsx attribute
- Refactor nested ternary as `if` statements
* fix: revert fetchWithCache modifications
* Fix linting for TransactionListItemDetails
- Remove unused import
- Fix import spacing
- Remove unused prop dereference
- Fix string interpolation for translated From/To
* Moving to popover pattern
* fix: sass color variable
* Omit value for boolean attribute
* Remove changes from modal.js
* fix: refactor nickname popovers
* Ensure const gets declared before it's used
* Fix linting for ConfirmTransactionBase
- Remove unused prop chainId
- Stop destructuring an unused field
* fix: refactor usage of nicknames popovers in send-content-container
* fix: remove extra prop updateAccountNicknameModal
* fix: refactor code for address.component
* fix: remove extra tooltip
* Ensure NicknamePopovers always returns component
* Fix linting for NicknamePopover component
- Fix useCallback deps
- Switch ternary to logical-or
* Fix linting for SenderToRecipient
... by fixing import order
* Remove unused addressCopied state
* Delete empty file
* fix: remove sender-to-recipient.container
* fix: refactor usage of nickname popovers in confirm-page-container
* fix: bug related to state variable
* Stylelint fix
* Lint fix
* Change "Total Amount" to "Total"
* Lint fix locales
* Update address-book.spec.js
* e2e test update
* Update e2e tests
* Fix issue where absence of function params in data hex tab would result in rendering a string
* Fix border radius, and width and height in small notification windows, of the update-nickname-popover
* Remove fake await
* Clean up
* Clean up
Co-authored-by: Alaa Hadad <alaahd@Alaas-MacBook-M1-Pro-14-inch.local>
Co-authored-by: Dan Miller <danjm.com@gmail.com>
Co-authored-by: g. nicholas d'andrea <gnidan@trufflesuite.com>
This PR enables the exclusion of JavaScript and JSON source by `buildType`, and enables the running of `eslint` under LavaMoat. 80-90% of the changes in this PR are `.patch` files and LavaMoat policy additions.
The file exclusion is designed to work in conjunction with our code fencing. If you forget to fence an import statement of an excluded file, the application will now error on boot. **This PR commits us to a particular naming convention for files intended only for certain builds.** Continue reading for details.
### Code Fencing and ESLint
When a file is modified by the code fencing transform, we run ESLint on it to ensure that we fail early for syntax-related issues. This PR adds the first code fences that will be actually be removed in production builds. As a consequence, this was also the first time we attempted to run ESLint under LavaMoat. Making that work required a lot of manual labor because of ESLint's use of dynamic imports, but the manual changes necessary were ultimately quite minor.
### File Exclusion
For all builds, any file in `app/`, `shared/` or `ui/` in a sub-directory matching `**/${otherBuildType}/**` (where `otherBuildType` is any build type except `main`) will be added to the list of excluded files, regardless of its file extension. For example, if we want to add one or more pages to the UI settings in Flask, we'd create the folder `ui/pages/settings/flask`, add any necessary files or sub-folders there, and fence the import statements for anything in that folder. If we wanted the same thing for Beta, we would name the directory `ui/pages/settings/beta`.
As it happens, we already organize some of our source files in this way, namely the logo JSON for Beta and Flask builds. See `ui/helpers/utils/build-types.js` to see how this works in practice.
Because the list of ignored filed is only passed to `browserify.exclude()`, any files not bundled by `browserify` will be ignored. For our purposes, this is mostly relevant for `.scss`. Since we don't have anything like code fencing for SCSS, we'll have to consider how to handle our styles separately.
On an M1 Mac, when running `yarn start`, CPU can spike to 100% CPU, and
sometimes a bunch of `mdworker` instances will get spawned. This seems
to be caused by the file-watching mechanism used in dev to automatically
regenerate the build when something is changed. More specifically, we
are using an older version of `watchify`, which uses an older version of
`chokidar`, which is the package that actually does the watching. v4.0.0
of `watchify` upgrades `chokidar` to v3.x ([1]), which comes with
"massive CPU & RAM consumption improvements" ([2]). After the upgrade,
CPU usage decreases to 20-40%.
[1]: https://github.com/browserify/watchify/blob/master/CHANGELOG.md#400
[2]: https://github.com/paulmillr/chokidar/releases/tag/3.0.0
`immer` has been updated to v9. This didn't require any changes on our
part; the only breaking changes are to the TypeScript types [1].
The `@reduxjs/toolkit` library has been updated as well, to ensure that
it's using the updated version of Immer internally as well. This update
makes our patch of that package obsolete, as the problematic pattern
that were were patching out is no longer present.
[1]: https://github.com/immerjs/immer/releases/tag/v9.0.0
The warnings about use of the unsafe Buffer constructor have been
addressed by package updates and patches.
The updates were:
* `gulp-sourcemaps` was updated from v2 to v3, and was patched to
replace remaining uses of the `Buffer` constructor
* Upstream PR: https://github.com/gulp-sourcemaps/gulp-sourcemaps/pull/388
* The transitive dependency `yazl` was updated from v2.4.3 to v2.5.1
in the lockfile.
* The abandoned packages `combine-source-map` and `inline-source-map`
were patched.
Chrome logs are now enabled for E2E tests when the 'ENABLE_CHROME_LOGS'
environment variable is set to anything other than `false`.
This was helpful to me in debugging Chrome crashes on CI, the ones with
the error "unknown error: DevToolsActivePort file doesn't exist". This
was the only way to discover the cause of the error. It's also useful
for discovering console errors from the background process or from the
UI.
It's disabled by default because it makes the test output quite noisy
and difficult to read.
* update ses
* build - reference ses directly
* deps - unify regenerator-runtime versions on 0.13.7
* patches - apply regenerator-runtime ses compat patch\nhttps://github.com/facebook/regenerator/pull/411
* patches - patch regenerator-runtime for latest ses fix
* reduc patch, new lockdown severe override taming
* updated redux patch
* update redux patch for production
* ignore lockdown in lint
* deps - bump patch-package just in case
* trailing comma
* remove ses as dep
* fix path for frozen promise
* remove js extension in lockdown require
* Revert "ignore lockdown in lint"
This reverts commit 8cefdc94dd25d7781bb09eed8af36441397676da.
* Revert "build - reference ses directly"
This reverts commit 30371a377dcdd781c1bf9abe55e9c8ae34da26b5.
* deps - update ses
* Revert "fix path for frozen promise"
This reverts commit 966e4c60921a25befe8ca8dea58313cc25852f72.
Co-authored-by: kumavis <aaron@kumavis.me>
