* Updating design tokens v1.8 and shadows
* Adding missing stories
* Some fixes and updates to css and stories
* removing unneeded story
* Fixing story order
* Updating account menu icon color
* Updating design-tokens and making appropriate updates to extension styles
* Adding more deprecated tags to colors
* Adding spinner and removing todo comment
* Remove comment
* Updates
* Updating snapshots
* More color and ui updates
* reverting transition change
We currently store the JSON-RPC request and response objects in the permission activity log. The utility of doing this was always rather dubious, but never problematic. Until now.
In Flask, as the restricted methods have expanded in number, user secrets may be included on JSON-RPC message objects. This PR removes these properties from the permission activity log, and adds a migration which does the same to existing log objects. We don't interact with the log objects anywhere in our codebase, but we don't want unexpected properties to cause errors in the future should any log objects be retained.
This PR also updates relevant tests and test data. It makes a minor functional change to how a request is designated as a success or failure, but this should not change any behavior in practice.
* Add design-tokens and apply colors to button
* swap more colors
* tweak button and add dark theme switch to storybook
* tweak buttons
* fix typo
* remove comments
* add dep to ignored list
* fix linting issue
* fix linting issues
* Updating some styles and removing some deprecated buttons (#13742)
* Updating some styles and removing some deprecated buttons
* Warning button fixes
* Fixing warning text for darkmode
* bump design tokens and update storybook theme strategy
Co-authored-by: George Marshall <george.marshall@consensys.net>
* Installing design tokens and writing docs in storybook
* Adding design-tokens to dep check ignore
* Link updates, Sentence casing, better css code formatting, other grammer fixes
This PR adds `snaps` under Flask build flags to the extension. This branch is mostly equivalent to the current production version of Flask, excepting some bug fixes and tweaks.
Closes#11626
# Permission System 2.0
## Background
This PR migrates the extension permission system to [the new `PermissionController`](https://github.com/MetaMask/snaps-skunkworks/tree/main/packages/controllers/src/permissions).
The original permission system, based on [`rpc-cap`](https://github.com/MetaMask/rpc-cap), introduced [`ZCAP-LD`](https://w3c-ccg.github.io/zcap-ld/)-like permissions to our JSON-RPC stack.
We used it to [implement](https://github.com/MetaMask/metamask-extension/pull/7004) what we called "LoginPerSite" in [version 7.7.0](https://github.com/MetaMask/metamask-extension/releases/tag/v7.7.0) of the extension, which enabled the user to choose which accounts, if any, should be exposed to each dapp.
While that was a worthwhile feature in and of itself, we wanted a permission _system_ in order to enable everything we are going to with Snaps.
Unfortunately, the original permission system was difficult to use, and necessitated the creation of the original `PermissionsController` (note the "s"), which was more or less a wrapper for `rpc-cap`.
With this PR, we shake off the yoke of the original permission system, in favor of the modular, self-contained, ergonomic, and more mature permission system 2.0.
Note that [the `PermissionController` readme](https://github.com/MetaMask/snaps-skunkworks/tree/main/packages/controllers/src/permissions/README.md) explains how the new permission system works.
The `PermissionController` and `SubjectMetadataController` are currently shipped via `@metamask/snap-controllers`. This is a temporary state of affairs, and we'll move them to `@metamask/controllers` once they've landed in prod.
## Changes in Detail
First, the changes in this PR are not as big as they seem. Roughly half of the additions in this PR are fixtures in the test for the new migration (number 68), and a significant portion of the remaining ~2500 lines are due to find-and-replace changes in other test fixtures and UI files.
- The extension `PermissionsController` has been deleted, and completely replaced with the new `PermissionController` from [`@metamask/snap-controllers`](https://www.npmjs.com/package/@metamask/snap-controllers).
- The original `PermissionsController` "domain metadata" functionality is now managed by the new `SubjectMetadataController`, also from [`@metamask/snap-controllers`](https://www.npmjs.com/package/@metamask/snap-controllers).
- The permission activity and history log controller has been renamed `PermissionLogController` and has its own top-level state key, but is otherwise functionally equivalent to the existing implementation.
- Migration number 68 has been added to account for the new state changes.
- The tests in `app/scripts/controllers/permissions` have been migrated from `mocha` to `jest`.
Reviewers should focus their attention on the following files:
- `app/scripts/`
- `metamask-controller.js`
- This is where most of the integration work for the new `PermissionController` occurs.
Some functions that were internal to the original controller were moved here.
- `controllers/permissions/`
- `selectors.js`
- These selectors are for `ControllerMessenger` selector subscriptions. The actual subscriptions occur in `metamask-controller.js`. See the `ControllerMessenger` implementation for details.
- `specifications.js`
- The caveat and permission specifications are required by the new `PermissionController`, and are used to specify the `eth_accounts` permission and its JSON-RPC method implementation.
See the `PermissionController` readme for details.
- `migrations/068.js`
- The new state should be cross-referenced with the controllers that manage it.
The accompanying tests should also be thoroughly reviewed.
Some files may appear new but have just moved and/or been renamed:
- `app/scripts/lib/rpc-method-middleware/handlers/request-accounts.js`
- This was previously implemented in `controllers/permissions/permissionsMethodMiddleware.js`.
- `test/mocks/permissions.js`
- A truncated version of `test/mocks/permission-controller.js`.
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* add metametrics wrapper
* add history dep
* provide test data and mock react router
* add first confirmaion screen
* figure out a way to mock match.params
* render token approval with data
* fix lockfile
* fix lint
* remove use effect
* lintfix
* add . for src paths
* litfix
* Add knobs to change redux store for confirm-approve component (Storybook) (#11135)
* add knob for domain
* knobify
* remove logs
* remove comment
* lintfix
* fix comments
* add background calls + metriccs event to storybook acctions
* lintfixxxx
Our Storybook dependencies have been updated to v6.1.9, from v5. This
was done to address a security vulnerability in a transitive dependency
of these packages (`highlight.js`).
The primary changes required by this Storybook update were the change
in import path for the `withKnobs` hook, the change in background
config format, and the webpack configuration. Storybook seems to work
correctly.
The migration was guided by the Storybook changelog[1] and the
Storybook v6 migration guide[2].
There is one Storybook error remaining; it fails to load the Euclid
font. This is a pre-existing error though, so we can fix it in a later
PR.
The `yarn.lock` file was deduplicated in this PR as well, as it was
required to fix various install warnings that were introduced with this
update.
[1]: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md
[2]: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md
This updates the `copy-webpack-plugin` to the latest published version, 6.0.3,
resolving [a high-severity security advisory][1] with its `serialize-javascript`
dependency.
[1]: https://www.npmjs.com/advisories/1548
See https://www.npmjs.com/advisories/1548 for more information.
The `yarn audit` output:
```
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high │ Remote Code Execution │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ serialize-javascript │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=3.1.0 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ copy-webpack-plugin │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ copy-webpack-plugin > serialize-javascript │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://www.npmjs.com/advisories/1548 │
└───────────────┴──────────────────────────────────────────────────────────────┘
```
The relevant [`v6.0.0`][2] breaking changes:
- minimum supported Node.js version is 10.13
- ✅ We use 10.18.1 locally and on CI
- the plugin now accepts an object, you should change `new CopyPlugin(patterns, options)` to `new CopyPlugin({ patterns, options })`
- ✅ Updated `.storybook/webpack.config.js`
[2]:https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.0.0
A `Menu` component has been extracted from the
`ConnectedAccountsListOptions` component. The menu and the menu items
are now the `Menu` and `MenuItem` components respectively.
A custom body was added to the Storybook preview to ensure that the
`popover-content` element was present in the DOM before the Menu was
constructed.
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.
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 "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.
* 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
* 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
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.
* Minimum changes to get storybook working
Undo path changes
* Add build:storybook scripts to package.json
* Add storybook deployer
* Add storybook:deploy to package.json
* Update circle ci config
* Update yarn.lock
* Remove addon-info
* Update yarn.lock file to reflect removing of addon-info
Co-authored-by: Dan J Miller <danjm.com@gmail.com>
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.
