m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 09:23:21 +01:00
Code

Use Webpack 5 for Storybook (#16678)

Browse Source 
* Fix storybook

* Update policies

* Bump all Storybook dependencies to the latest version

* Add Storybook dependencies to depcheck ignore list

* Update policy-override.json

* Fix SectionShape circular dependency

* Change policy override for eslint-scope

* Fix some Webpack build issues

* Add missing dependency

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
This commit is contained in:
Maarten Zuidhoorn 2022-11-29 19:23:36 +01:00 committed by GitHub
parent ba25ad4073
commit c341abaea6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 2291 additions and 1216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.depcheckrc.yml
View File

@ -40,6 +40,8 @@ ignores:
- '@storybook/core'
- '@storybook/addon-essentials'
- '@storybook/addon-a11y'
- '@storybook/builder-webpack5'
- '@storybook/manager-webpack5'
- 'storybook-dark-mode'
- 'style-loader'
- 'css-loader'

23
.storybook/main.js
View File

@ -1,10 +1,14 @@
const path = require('path');
const { ProvidePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { generateIconNames } = require('../development/generate-icon-names');
module.exports = {
core: {
builder: 'webpack5',
},
stories: [
'../ui/**/*.stories.js',
'../ui/**/*.stories.mdx',
@ -37,10 +41,22 @@ module.exports = {
config.resolve.alias['webextension-polyfill'] = require.resolve(
'./__mocks__/webextension-polyfill.js',
);
config.resolve.fallback = {
child_process: false,
constants: false,
crypto: false,
fs: false,
http: false,
https: false,
os: false,
path: false,
stream: require.resolve('stream-browserify'),
_stream_transform: false,
};
config.module.strictExportPresence = true;
config.module.rules.push({
test: /\.scss$/,
loaders: [
use: [
'style-loader',
{
loader: 'css-loader',
@ -76,6 +92,11 @@ module.exports = {
],
}),
);
config.plugins.push(
new ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
)
return config;
},
};

72
lavamoat/browserify/beta/policy.json
View File

@ -244,17 +244,12 @@
"define": true
},
"packages": {
"@keystonehq/bc-ur-registry-eth>@keystonehq/bc-ur-registry>tslib": true,
"@ngraveio/bc-ur": true,
"browserify>buffer": true,
"enzyme>cheerio>tslib": true,
"ethereumjs-wallet>bs58check": true
}
},
"@keystonehq/bc-ur-registry-eth>@keystonehq/bc-ur-registry>tslib": {
"globals": {
"define": true
}
},
"@keystonehq/bc-ur-registry-eth>hdkey": {
"packages": {
"@keystonehq/bc-ur-registry-eth>hdkey>secp256k1": true,
@ -627,12 +622,7 @@
"setTimeout": true
},
"packages": {
"@metamask/assets-controllers>async-mutex>tslib": true
}
},
"@metamask/assets-controllers>async-mutex>tslib": {
"globals": {
"define": true
"enzyme>cheerio>tslib": true
}
},
"@metamask/assets-controllers>multiformats": {
@ -1506,9 +1496,9 @@
},
"packages": {
"@sentry/browser>@sentry/core": true,
"@sentry/browser>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true
"@sentry/utils": true
}
},
"@sentry/browser>@sentry/core": {
@ -1519,9 +1509,9 @@
"packages": {
"@sentry/browser>@sentry/core>@sentry/hub": true,
"@sentry/browser>@sentry/core>@sentry/minimal": true,
"@sentry/browser>@sentry/core>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true
"@sentry/utils": true
}
},
"@sentry/browser>@sentry/core>@sentry/hub": {
@ -1530,15 +1520,35 @@
"setInterval": true
},
"packages": {
"@sentry/browser>@sentry/core>@sentry/hub>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true
"@sentry/utils": true
}
},
"@sentry/browser>@sentry/core>@sentry/hub>tslib": {
"globals": {
"define": true
}
},
"@sentry/browser>@sentry/core>@sentry/minimal": {
"packages": {
"@sentry/browser>@sentry/core>@sentry/hub": true,
"@sentry/utils>tslib": true
"@sentry/browser>@sentry/core>@sentry/minimal>tslib": true
}
},
"@sentry/browser>@sentry/core>@sentry/minimal>tslib": {
"globals": {
"define": true
}
},
"@sentry/browser>@sentry/core>tslib": {
"globals": {
"define": true
}
},
"@sentry/browser>tslib": {
"globals": {
"define": true
}
},
"@sentry/integrations": {
@ -1549,12 +1559,17 @@
"setTimeout": true
},
"packages": {
"@sentry/integrations>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true,
"localforage": true
}
},
"@sentry/integrations>tslib": {
"globals": {
"define": true
}
},
"@sentry/utils": {
"globals": {
"CustomEvent": true,
@ -2343,6 +2358,11 @@
"pump>once": true
}
},
"enzyme>cheerio>tslib": {
"globals": {
"define": true
}
},
"enzyme>has": {
"packages": {
"mocha>object.assign>function-bind": true
@ -5265,12 +5285,7 @@
},
"packages": {
"browserify>util": true,
"safe-event-emitter>events": true
}
},
"safe-event-emitter>events": {
"globals": {
"console": true
"webpack>events": true
}
},
"semver": {
@ -5373,6 +5388,11 @@
"console.warn": true,
"define": true
}
},
"webpack>events": {
"globals": {
"console": true
}
}
}
}

92
lavamoat/browserify/flask/policy.json
View File

@ -76,7 +76,7 @@
"@babel/preset-env>@babel/compat-data": true,
"@babel/preset-env>@babel/helper-validator-option": true,
"browserify>process": true,
"stylelint>autoprefixer>browserslist": true
"webpack>browserslist": true
}
},
"@babel/core>@babel/helper-compilation-targets>semver": {
@ -389,17 +389,12 @@
"define": true
},
"packages": {
"@keystonehq/bc-ur-registry-eth>@keystonehq/bc-ur-registry>tslib": true,
"@ngraveio/bc-ur": true,
"browserify>buffer": true,
"enzyme>cheerio>tslib": true,
"ethereumjs-wallet>bs58check": true
}
},
"@keystonehq/bc-ur-registry-eth>@keystonehq/bc-ur-registry>tslib": {
"globals": {
"define": true
}
},
"@keystonehq/bc-ur-registry-eth>hdkey": {
"packages": {
"@keystonehq/bc-ur-registry-eth>hdkey>secp256k1": true,
@ -772,12 +767,7 @@
"setTimeout": true
},
"packages": {
"@metamask/assets-controllers>async-mutex>tslib": true
}
},
"@metamask/assets-controllers>async-mutex>tslib": {
"globals": {
"define": true
"enzyme>cheerio>tslib": true
}
},
"@metamask/assets-controllers>multiformats": {
@ -2011,9 +2001,9 @@
},
"packages": {
"@sentry/browser>@sentry/core": true,
"@sentry/browser>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true
"@sentry/utils": true
}
},
"@sentry/browser>@sentry/core": {
@ -2024,9 +2014,9 @@
"packages": {
"@sentry/browser>@sentry/core>@sentry/hub": true,
"@sentry/browser>@sentry/core>@sentry/minimal": true,
"@sentry/browser>@sentry/core>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true
"@sentry/utils": true
}
},
"@sentry/browser>@sentry/core>@sentry/hub": {
@ -2035,15 +2025,35 @@
"setInterval": true
},
"packages": {
"@sentry/browser>@sentry/core>@sentry/hub>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true
"@sentry/utils": true
}
},
"@sentry/browser>@sentry/core>@sentry/hub>tslib": {
"globals": {
"define": true
}
},
"@sentry/browser>@sentry/core>@sentry/minimal": {
"packages": {
"@sentry/browser>@sentry/core>@sentry/hub": true,
"@sentry/utils>tslib": true
"@sentry/browser>@sentry/core>@sentry/minimal>tslib": true
}
},
"@sentry/browser>@sentry/core>@sentry/minimal>tslib": {
"globals": {
"define": true
}
},
"@sentry/browser>@sentry/core>tslib": {
"globals": {
"define": true
}
},
"@sentry/browser>tslib": {
"globals": {
"define": true
}
},
"@sentry/integrations": {
@ -2054,12 +2064,17 @@
"setTimeout": true
},
"packages": {
"@sentry/integrations>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true,
"localforage": true
}
},
"@sentry/integrations>tslib": {
"globals": {
"define": true
}
},
"@sentry/utils": {
"globals": {
"CustomEvent": true,
@ -2882,6 +2897,11 @@
"pump>once": true
}
},
"enzyme>cheerio>tslib": {
"globals": {
"define": true
}
},
"enzyme>has": {
"packages": {
"mocha>object.assign>function-bind": true
@ -5854,12 +5874,7 @@
},
"packages": {
"browserify>util": true,
"safe-event-emitter>events": true
}
},
"safe-event-emitter>events": {
"globals": {
"console": true
"webpack>events": true
}
},
"semver": {
@ -5911,15 +5926,6 @@
"string.prototype.matchall>call-bind": true
}
},
"stylelint>autoprefixer>browserslist": {
"packages": {
"browserify>browser-resolve": true,
"browserify>process": true,
"stylelint>autoprefixer>browserslist>electron-to-chromium": true,
"stylelint>autoprefixer>browserslist>node-releases": true,
"stylelint>autoprefixer>caniuse-lite": true
}
},
"terser>@jridgewell/source-map>@jridgewell/gen-mapping": {
"globals": {
"define": true
@ -6019,6 +6025,20 @@
"console.warn": true,
"define": true
}
},
"webpack>browserslist": {
"packages": {
"browserify>browser-resolve": true,
"browserify>process": true,
"webpack>browserslist>caniuse-lite": true,
"webpack>browserslist>electron-to-chromium": true,
"webpack>browserslist>node-releases": true
}
},
"webpack>events": {
"globals": {
"console": true
}
}
}
}

72
lavamoat/browserify/main/policy.json
View File

@ -244,17 +244,12 @@
"define": true
},
"packages": {
"@keystonehq/bc-ur-registry-eth>@keystonehq/bc-ur-registry>tslib": true,
"@ngraveio/bc-ur": true,
"browserify>buffer": true,
"enzyme>cheerio>tslib": true,
"ethereumjs-wallet>bs58check": true
}
},
"@keystonehq/bc-ur-registry-eth>@keystonehq/bc-ur-registry>tslib": {
"globals": {
"define": true
}
},
"@keystonehq/bc-ur-registry-eth>hdkey": {
"packages": {
"@keystonehq/bc-ur-registry-eth>hdkey>secp256k1": true,
@ -627,12 +622,7 @@
"setTimeout": true
},
"packages": {
"@metamask/assets-controllers>async-mutex>tslib": true
}
},
"@metamask/assets-controllers>async-mutex>tslib": {
"globals": {
"define": true
"enzyme>cheerio>tslib": true
}
},
"@metamask/assets-controllers>multiformats": {
@ -1506,9 +1496,9 @@
},
"packages": {
"@sentry/browser>@sentry/core": true,
"@sentry/browser>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true
"@sentry/utils": true
}
},
"@sentry/browser>@sentry/core": {
@ -1519,9 +1509,9 @@
"packages": {
"@sentry/browser>@sentry/core>@sentry/hub": true,
"@sentry/browser>@sentry/core>@sentry/minimal": true,
"@sentry/browser>@sentry/core>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true
"@sentry/utils": true
}
},
"@sentry/browser>@sentry/core>@sentry/hub": {
@ -1530,15 +1520,35 @@
"setInterval": true
},
"packages": {
"@sentry/browser>@sentry/core>@sentry/hub>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true
"@sentry/utils": true
}
},
"@sentry/browser>@sentry/core>@sentry/hub>tslib": {
"globals": {
"define": true
}
},
"@sentry/browser>@sentry/core>@sentry/minimal": {
"packages": {
"@sentry/browser>@sentry/core>@sentry/hub": true,
"@sentry/utils>tslib": true
"@sentry/browser>@sentry/core>@sentry/minimal>tslib": true
}
},
"@sentry/browser>@sentry/core>@sentry/minimal>tslib": {
"globals": {
"define": true
}
},
"@sentry/browser>@sentry/core>tslib": {
"globals": {
"define": true
}
},
"@sentry/browser>tslib": {
"globals": {
"define": true
}
},
"@sentry/integrations": {
@ -1549,12 +1559,17 @@
"setTimeout": true
},
"packages": {
"@sentry/integrations>tslib": true,
"@sentry/types": true,
"@sentry/utils": true,
"@sentry/utils>tslib": true,
"localforage": true
}
},
"@sentry/integrations>tslib": {
"globals": {
"define": true
}
},
"@sentry/utils": {
"globals": {
"CustomEvent": true,
@ -2343,6 +2358,11 @@
"pump>once": true
}
},
"enzyme>cheerio>tslib": {
"globals": {
"define": true
}
},
"enzyme>has": {
"packages": {
"mocha>object.assign>function-bind": true
@ -5265,12 +5285,7 @@
},
"packages": {
"browserify>util": true,
"safe-event-emitter>events": true
}
},
"safe-event-emitter>events": {
"globals": {
"console": true
"webpack>events": true
}
},
"semver": {
@ -5373,6 +5388,11 @@
"console.warn": true,
"define": true
}
},
"webpack>events": {
"globals": {
"console": true
}
}
}
}

12
lavamoat/build-system/policy-override.json
View File

@ -93,12 +93,13 @@
"eslint-plugin-jest>@typescript-eslint/utils>eslint-utils": true,
"eslint-plugin-jest>@typescript-eslint/utils>@typescript-eslint/types": true,
"eslint-plugin-jest>@typescript-eslint/utils>@typescript-eslint/scope-manager": true,
"eslint-plugin-jest>@typescript-eslint/utils>webpack>eslint-scope": true,
"@typescript-eslint/parser>@typescript-eslint/types": true,
"eslint": true,
"@typescript-eslint/parser>@typescript-eslint/scope-manager": true,
"eslint>eslint-scope": true,
"@babel/eslint-parser>eslint-scope": true,
"eslint>eslint-utils": true
"eslint>eslint-utils": true,
"webpack>eslint-scope": true
}
},
"eslint-plugin-jest>@typescript-eslint/utils>@typescript-eslint/scope-manager>@typescript-eslint/visitor-keys": {
@ -118,8 +119,8 @@
"@typescript-eslint/parser>@typescript-eslint/types": true,
"eslint": true,
"@typescript-eslint/parser>@typescript-eslint/scope-manager": true,
"@babel/eslint-parser>eslint-scope": true,
"@typescript-eslint/utils": true
"@typescript-eslint/utils": true,
"webpack>eslint-scope": true
}
},
"eslint-plugin-jest>@typescript-eslint/utils>@typescript-eslint/scope-manager": {
@ -142,7 +143,8 @@
"eslint": true,
"@typescript-eslint/parser>@typescript-eslint/scope-manager": true,
"eslint>eslint-scope": true,
"eslint>eslint-utils": true
"eslint>eslint-utils": true,
"webpack>eslint-scope": true
}
},
"eslint-plugin-jest>@typescript-eslint/experimental-utils>eslint-utils": {

2110
lavamoat/build-system/policy.json
View File

File diff suppressed because it is too large Load Diff

38
package.json
View File

@ -94,8 +94,7 @@
"netmask": "^2.0.1",
"pubnub/superagent-proxy": "^3.0.0",
"json-schema": "^0.4.0",
"simple-get": "^4.0.1",
"@storybook/**/ast-types": "^0.14.2"
"simple-get": "^4.0.1"
},
"dependencies": {
"@babel/runtime": "^7.5.5",
@ -108,6 +107,7 @@
"@fortawesome/fontawesome-free": "^5.13.0",
"@keystonehq/bc-ur-registry-eth": "^0.12.1",
"@keystonehq/metamask-airgapped-keyring": "^0.6.1",
"@lavamoat/snow": "^1.2.1",
"@material-ui/core": "^4.11.0",
"@metamask/address-book-controller": "^1.0.0",
"@metamask/announcement-controller": "^1.0.0",
@ -149,7 +149,6 @@
"@spruceid/siwe-parser": "^1.1.3",
"@truffle/codec": "^0.11.18",
"@truffle/decoder": "^5.1.0",
"@lavamoat/snow": "^1.2.1",
"@zxing/browser": "^0.0.10",
"@zxing/library": "0.8.0",
"await-semaphore": "^0.1.1",
@ -261,19 +260,21 @@
"@metamask/phishing-warning": "^1.2.1",
"@metamask/test-dapp": "^5.2.1",
"@sentry/cli": "^1.58.0",
"@storybook/addon-a11y": "^6.5.10",
"@storybook/addon-actions": "^6.5.10",
"@storybook/addon-essentials": "^6.5.10",
"@storybook/addon-a11y": "^6.5.13",
"@storybook/addon-actions": "^6.5.13",
"@storybook/addon-essentials": "^6.5.13",
"@storybook/addon-knobs": "^6.4.0",
"@storybook/addons": "^6.5.10",
"@storybook/api": "^6.5.10",
"@storybook/client-api": "^6.5.10",
"@storybook/components": "^6.5.10",
"@storybook/core": "^6.5.10",
"@storybook/core-events": "^6.5.10",
"@storybook/react": "^6.5.10",
"@storybook/storybook-deployer": "^2.8.12",
"@storybook/theming": "^6.5.10",
"@storybook/addons": "^6.5.13",
"@storybook/api": "^6.5.13",
"@storybook/builder-webpack5": "^6.5.13",
"@storybook/client-api": "^6.5.13",
"@storybook/components": "^6.5.13",
"@storybook/core": "^6.5.13",
"@storybook/core-events": "^6.5.13",
"@storybook/manager-webpack5": "^6.5.13",
"@storybook/react": "^6.5.13",
"@storybook/storybook-deployer": "^2.8.16",
"@storybook/theming": "^6.5.13",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^10.4.8",
"@testing-library/react-hooks": "^3.2.1",
@ -380,6 +381,7 @@
"read-installed": "^4.0.3",
"redux-mock-store": "^1.5.4",
"remote-redux-devtools": "^0.5.16",
"require-from-string": "^2.0.2",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.4",
"sass-loader": "^10.1.1",
@ -391,6 +393,7 @@
"source-map-explorer": "^2.4.2",
"squirrelly": "^8.0.8",
"storybook-dark-mode": "^1.1.0",
"stream-browserify": "^3.0.0",
"string.prototype.matchall": "^4.0.2",
"style-loader": "^0.21.0",
"stylelint": "^13.6.1",
@ -405,7 +408,7 @@
"vinyl-sourcemaps-apply": "^0.2.1",
"watchify": "^4.0.0",
"webextension-polyfill": "^0.8.0",
"webpack": "^4.41.6",
"webpack": "^5.75.0",
"yargs": "^17.0.1",
"yarn-deduplicate": "^3.1.0"
},
@ -466,7 +469,8 @@
"web3>web3-core>web3-core-requestmanager>web3-providers-ws>websocket>utf-8-validate": false,
"web3>web3-shh": false,
"@keystonehq/metamask-airgapped-keyring>@keystonehq/base-eth-keyring>hdkey>secp256k1": false,
"@metamask/base-controller>simple-git-hooks": false
"@metamask/base-controller>simple-git-hooks": false,
"@storybook/core>@storybook/core-server>webpack>watchpack>watchpack-chokidar2>chokidar>fsevents": false
}
}
}

1
ui/components/app/metamask-template-renderer/index.js
View File

@ -1 +1,2 @@
export { default } from './metamask-template-renderer';
export { SectionShape } from './section-shape';

18
ui/components/app/metamask-template-renderer/metamask-template-renderer.js
View File

@ -1,7 +1,7 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { isEqual } from 'lodash';
import { safeComponentList } from './safe-component-list';
import { ValidChildren } from './section-shape';
function getElement(section) {
const { element } = section;
@ -80,22 +80,6 @@ const MetaMaskTemplateRenderer = ({ sections }) => {
);
};
export const SectionShape = {
props: PropTypes.object,
element: PropTypes.oneOf(Object.keys(safeComponentList)).isRequired,
key: PropTypes.string,
};
const ValidChildren = PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape(SectionShape),
PropTypes.arrayOf(
PropTypes.oneOfType([PropTypes.shape(SectionShape), PropTypes.string]),
),
]);
SectionShape.children = ValidChildren;
MetaMaskTemplateRenderer.propTypes = {
sections: ValidChildren,
};

17
ui/components/app/metamask-template-renderer/section-shape.js Normal file
View File

@ -0,0 +1,17 @@
import PropTypes from 'prop-types';
export const SectionShape = {
props: PropTypes.object,
element: PropTypes.string,
key: PropTypes.string,
};
export const ValidChildren = PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape(SectionShape),
PropTypes.arrayOf(
PropTypes.oneOfType([PropTypes.shape(SectionShape), PropTypes.string]),
),
]);
SectionShape.children = ValidChildren;

5
ui/components/app/metamask-translation/metamask-translation.js
View File

@ -1,9 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../hooks/useI18nContext';
import MetaMaskTemplateRenderer, {
SectionShape,
} from '../metamask-template-renderer/metamask-template-renderer';
import MetaMaskTemplateRenderer from '../metamask-template-renderer';
import { SectionShape } from '../metamask-template-renderer/section-shape';
/**
* MetaMaskTranslation is a simple helper component for adding full translation

1045
yarn.lock
View File

File diff suppressed because it is too large Load Diff