devDeps: storybook@7 (#19092)

* devDeps: pin @babel/core and @babel/runtime in resulotions
    Without this: misses patch, lavamoat error


* storybook 6 to 7 migration
* devDeps: add @storybook/addon-mdx-gfm
* fix lint deps
* devDeps: remove unused require-from-string
* devDeps/resolutions: @types/react@^16.9.53
* devDeps: add @storybook/cli
* storybook: new-frameworks migration
* iyarc: remove resolved dependency advisory
* deps: set globalthis@1.0.1 in resolutions
   This is required since a file is copied over from a set path in the dist
   package subdirectory as of d13aabde23 (#10014).
   A future update should either vendor the shim, or update to
   compatibility with a maintained upstream version.

* mdx2 migration fixes
* chore: bump ljharb packages
* devDeps: @storybook/*@^7.0.10->^7.0.11
* storybook: update preview.js to use v7 addon api
* ci/test/storybook: echo between storybook build&test
* ci/circleci: resources tweak
* info-tab: handle undefined global.platform
* update lavamoat build policy
* update lavamoat browserify policies

.circleci/config.yml

@@ -10,6 +10,12 @@ executors:
     resource_class: medium+
     environment:
       NODE_OPTIONS: --max_old_space_size=2048
+  node-browsers-large:
+    docker:
+      - image: cimg/node:16.20-browsers
+    resource_class: large
+    environment:
+      NODE_OPTIONS: --max_old_space_size=2048
   shellcheck:
     docker:
       - image: koalaman/shellcheck-alpine@sha256:dfaf08fab58c158549d3be64fb101c626abc5f16f341b569092577ae207db199
@@ -500,7 +506,7 @@ jobs:
             - builds-test
 
   prep-build-storybook:
-    executor: node-browsers-medium-plus
+    executor: node-browsers-large
     steps:
       - checkout
       - attach_workspace:
@@ -551,7 +557,7 @@ jobs:
           command: yarn verify-locales --quiet
 
   test-storybook:
-    executor: node-browsers-medium-plus
+    executor: node-browsers-large
     steps:
       - checkout
       - attach_workspace:

.depcheckrc.yml

@@ -48,11 +48,14 @@ ignores:
   - 'improved-yarn-audit'
   - 'nyc'
   # storybook
+  - '@storybook/cli'
   - '@storybook/core'
   - '@storybook/addon-essentials'
   - '@storybook/addon-a11y'
+  - '@storybook/addon-mdx-gfm'
   - '@storybook/builder-webpack5'
   - '@storybook/manager-webpack5'
+  - '@storybook/react-webpack5'
   - 'storybook-dark-mode'
   - '@whitespace/storybook-addon-html'
   - 'react-syntax-highlighter'

.iyarc

@@ -1,11 +1,6 @@
 # improved-yarn-audit advisory exclusions
 GHSA-257v-vj4p-3w2h
 
-# yarn berry's `yarn npm audit` script reports the following vulnerability but
-# it is a false positive. The offending version of 'ws' that is installed is
-# 7.1.1 and is included only via remote-redux-devtools which is a devDependency
-GHSA-6fc8-4gx4-v693
-
 # request library is subject to SSRF.
 # addressed by temporary patch in .yarn/patches/request-npm-2.88.2-f4a57c72c4.patch
 GHSA-p8p7-x288-28g6

.storybook/main.js

@@ -1,49 +1,39 @@
 const path = require('path');
-
+const {
-const { ProvidePlugin } = require('webpack');
+  ProvidePlugin
+} = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-
+const {
-const { generateIconNames } = require('../development/generate-icon-names');
+  generateIconNames
-
+} = require('../development/generate-icon-names');
 module.exports = {
   core: {
-    builder: 'webpack5',
+    disableTelemetry: true
   },
-  features: { buildStoriesJson: true },
+  features: {
-  stories: [
+    buildStoriesJson: true
-    '../ui/**/*.stories.js',
+  },
-    '../ui/**/*.stories.tsx',
+  stories: ['../ui/**/*.stories.js', '../ui/**/*.stories.tsx', '../ui/**/*.stories.mdx', './*.stories.mdx'],
-    '../ui/**/*.stories.mdx',
+  addons: ['@storybook/addon-essentials', '@storybook/addon-actions', '@storybook/addon-a11y', '@storybook/addon-knobs', './i18n-party-addon/register.js', 'storybook-dark-mode', '@whitespace/storybook-addon-html', '@storybook/addon-mdx-gfm'],
-    './*.stories.mdx',
-  ],
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-actions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-knobs',
-    './i18n-party-addon/register.js',
-    'storybook-dark-mode',
-    '@whitespace/storybook-addon-html'
-  ],
   staticDirs: ['../app', './images'],
   // Uses babel.config.js settings and prevents "Missing class properties transform" error
-  babel: async (options) => ({ overrides: options.overrides }),
+  babel: async options => ({
+    overrides: options.overrides
+  }),
   // Sets env variables https://storybook.js.org/docs/react/configure/environment-variables/
-  env: async (config) => {
+  env: async config => {
     return {
       ...config,
       // Creates the icon names environment variable for the component-library/icon/icon.js component
-      ICON_NAMES: generateIconNames(),
+      ICON_NAMES: generateIconNames()
     };
   },
-  webpackFinal: async (config) => {
+  webpackFinal: async config => {
     config.context = process.cwd();
     config.node = {
-      __filename: true,
+      __filename: true
     };
-    config.resolve.alias['webextension-polyfill'] = require.resolve(
+    config.resolve.alias['webextension-polyfill'] = require.resolve('../ui/__mocks__/webextension-polyfill.js');
-      '../ui/__mocks__/webextension-polyfill.js',
-    );
     config.resolve.fallback = {
       child_process: false,
       constants: false,
@@ -54,53 +44,45 @@ module.exports = {
       os: false,
       path: false,
       stream: require.resolve('stream-browserify'),
-      _stream_transform: require.resolve('readable-stream/lib/_stream_transform.js'),
       zlib: false,
+      _stream_transform: require.resolve('readable-stream/lib/_stream_transform.js'),
     };
     config.module.strictExportPresence = true;
     config.module.rules.push({
       test: /\.scss$/,
-      use: [
+      use: ['style-loader', {
-        'style-loader',
+        loader: 'css-loader',
-        {
+        options: {
-          loader: 'css-loader',
+          import: false,
-          options: {
+          url: false
-            import: false,
+        }
-            url: false,
+      }, {
-          },
+        loader: 'sass-loader',
-        },
+        options: {
-        {
+          sourceMap: true,
-          loader: 'sass-loader',
+          implementation: require('sass'),
-          options: {
+          sassOptions: {
-            sourceMap: true,
+            includePaths: ['ui/css/']
-            implementation: require('sass'),
+          }
-            sassOptions: {
+        }
-              includePaths: ['ui/css/'],
+      }]
-            },
-          },
-        },
-      ],
     });
-    config.plugins.push(
+    config.plugins.push(new CopyWebpackPlugin({
-      new CopyWebpackPlugin({
+      patterns: [{
-        patterns: [
+        from: path.join('node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
-          {
+        to: path.join('fonts', 'fontawesome')
-            from: path.join(
+      }]
-              'node_modules',
+    }));
-              '@fortawesome',
+    config.plugins.push(new ProvidePlugin({
-              'fontawesome-free',
+      Buffer: ['buffer', 'Buffer']
-              'webfonts',
+    }));
-            ),
-            to: path.join('fonts', 'fontawesome'),
-          },
-        ],
-      }),
-    );
-    config.plugins.push(
-      new ProvidePlugin({
-        Buffer: ['buffer', 'Buffer'],
-      }),
-    );
     return config;
   },
+  docs: {
+    autodocs: true
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  }
 };

.storybook/preview.js

@@ -1,5 +1,9 @@
+/*
+  * The addParameters and addDecorator APIs to add global decorators and parameters, exported by the various frameworks (e.g. @storybook/react) and @storybook/client were deprecated in 6.0 and have been removed in 7.0.
+
+Instead, use export const parameters = {}; and export const decorators = []; in your .storybook/preview.js. Addon authors similarly should use such an export in a preview entry file (see Preview entries).
+  * */
 import React, { useEffect, useState } from 'react';
-import { addDecorator, addParameters } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Provider } from 'react-redux';
 import configureStore from '../ui/store/store';
@@ -13,9 +17,9 @@ import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { _setBackgroundConnection } from '../ui/store/action-queue';
 import MetaMaskStorybookTheme from './metamask-storybook-theme';
-import addons from '@storybook/addons';
+import { addons } from '@storybook/addons';
 
-addParameters({
+export const parameters = {
   backgrounds: {
     default: 'default',
     values: [
@@ -41,7 +45,7 @@ addParameters({
   controls: {
     expanded: true,
   },
-});
+};
 
 export const globalTypes = {
   locale: {
@@ -117,4 +121,6 @@ const metamaskDecorator = (story, context) => {
   );
 };
 
-addDecorator(metamaskDecorator);
+export const decorators = [
+  metamaskDecorator,
+];

lavamoat/browserify/beta/policy.json

@@ -5,6 +5,11 @@
         "regeneratorRuntime": "write"
       }
     },
+    "@babel/runtime>regenerator-runtime": {
+      "globals": {
+        "regeneratorRuntime": "write"
+      }
+    },
     "@download/blockies": {
       "globals": {
         "document.createElement": true
@@ -1142,8 +1147,8 @@
         "@metamask/eth-token-tracker>deep-equal>is-arguments": true,
         "@metamask/eth-token-tracker>deep-equal>is-date-object": true,
         "@ngraveio/bc-ur>assert>object-is": true,
-        "@storybook/api>telejson>is-regex": true,
         "globalthis>define-properties>object-keys": true,
+        "string.prototype.matchall>es-abstract>is-regex": true,
         "string.prototype.matchall>regexp.prototype.flags": true
       }
     },
@@ -1952,24 +1957,6 @@
         "define": true
       }
     },
-    "@storybook/api>regenerator-runtime": {
-      "globals": {
-        "regeneratorRuntime": "write"
-      }
-    },
-    "@storybook/api>telejson>is-regex": {
-      "packages": {
-        "koa>is-generator-function>has-tostringtag": true,
-        "string.prototype.matchall>call-bind": true
-      }
-    },
-    "@storybook/api>util-deprecate": {
-      "globals": {
-        "console.trace": true,
-        "console.warn": true,
-        "localStorage": true
-      }
-    },
     "@truffle/codec": {
       "packages": {
         "@truffle/codec>@truffle/abi-utils": true,
@@ -2066,16 +2053,10 @@
     },
     "@truffle/codec>@truffle/abi-utils>change-case>pascal-case": {
       "packages": {
-        "@truffle/codec>@truffle/abi-utils>change-case>pascal-case>camel-case": true,
+        "@truffle/codec>@truffle/abi-utils>change-case>camel-case": true,
         "@truffle/codec>@truffle/abi-utils>change-case>upper-case-first": true
       }
     },
-    "@truffle/codec>@truffle/abi-utils>change-case>pascal-case>camel-case": {
-      "packages": {
-        "@truffle/codec>@truffle/abi-utils>change-case>no-case": true,
-        "@truffle/codec>@truffle/abi-utils>change-case>upper-case": true
-      }
-    },
     "@truffle/codec>@truffle/abi-utils>change-case>path-case": {
       "packages": {
         "@truffle/codec>@truffle/abi-utils>change-case>no-case": true
@@ -2182,13 +2163,8 @@
         "console.error": true
       },
       "packages": {
-        "@truffle/codec>semver>lru-cache": true,
+        "browserify>process": true,
-        "browserify>process": true
+        "semver>lru-cache": true
-      }
-    },
-    "@truffle/codec>semver>lru-cache": {
-      "packages": {
-        "semver>lru-cache>yallist": true
       }
     },
     "@truffle/codec>web3-utils": {
@@ -2246,9 +2222,9 @@
         "@truffle/codec": true,
         "@truffle/codec>@truffle/abi-utils": true,
         "@truffle/codec>@truffle/compile-common": true,
+        "@truffle/codec>big.js": true,
         "@truffle/codec>web3-utils": true,
         "@truffle/decoder>@truffle/encoder>@ensdomains/ensjs": true,
-        "@truffle/decoder>@truffle/encoder>big.js": true,
         "@truffle/decoder>@truffle/encoder>bignumber.js": true,
         "lodash": true,
         "nock>debug": true
@@ -2425,11 +2401,6 @@
         "browserify>process": true
       }
     },
-    "@truffle/decoder>@truffle/encoder>big.js": {
-      "globals": {
-        "define": true
-      }
-    },
     "@truffle/decoder>@truffle/encoder>bignumber.js": {
       "globals": {
         "crypto": true,
@@ -2459,7 +2430,7 @@
     },
     "@truffle/decoder>@truffle/source-map-utils>node-interval-tree": {
       "packages": {
-        "@storybook/addon-a11y>react-sizeme>shallowequal": true
+        "@truffle/decoder>@truffle/source-map-utils>node-interval-tree>shallowequal": true
       }
     },
     "@truffle/decoder>bn.js": {
@@ -3292,13 +3263,13 @@
     },
     "ethereumjs-util>create-hash>md5.js>hash-base>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "ethereumjs-util>create-hash>ripemd160": {
@@ -3345,13 +3316,13 @@
     },
     "ethereumjs-util>ethereum-cryptography>keccak>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "ethereumjs-util>ethereum-cryptography>scrypt-js": {
@@ -3526,7 +3497,7 @@
     "ethjs-query>babel-runtime": {
       "packages": {
         "@babel/runtime": true,
-        "@storybook/api>regenerator-runtime": true,
+        "@babel/runtime>regenerator-runtime": true,
         "ethjs-query>babel-runtime>core-js": true
       }
     },
@@ -3949,8 +3920,8 @@
     },
     "react-focus-lock>react-clientside-effect": {
       "packages": {
-        "react": true,
+        "@babel/runtime": true,
-        "react-focus-lock>react-clientside-effect>@babel/runtime": true
+        "react": true
       }
     },
     "react-focus-lock>use-callback-ref": {
@@ -4246,7 +4217,6 @@
     },
     "readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>events": true,
         "browserify>process": true,
@@ -4256,7 +4226,8 @@
         "readable-stream>isarray": true,
         "readable-stream>process-nextick-args": true,
         "readable-stream>safe-buffer": true,
-        "readable-stream>string_decoder": true
+        "readable-stream>string_decoder": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "readable-stream>core-util-is": {
@@ -4279,6 +4250,13 @@
         "readable-stream>safe-buffer": true
       }
     },
+    "readable-stream>util-deprecate": {
+      "globals": {
+        "console.trace": true,
+        "console.warn": true,
+        "localStorage": true
+      }
+    },
     "redux": {
       "globals": {
         "console": true
@@ -4313,6 +4291,12 @@
         "string.prototype.matchall>get-intrinsic": true
       }
     },
+    "string.prototype.matchall>es-abstract>is-regex": {
+      "packages": {
+        "koa>is-generator-function>has-tostringtag": true,
+        "string.prototype.matchall>call-bind": true
+      }
+    },
     "string.prototype.matchall>get-intrinsic": {
       "globals": {
         "AggregateError": true,
@@ -4322,6 +4306,7 @@
       "packages": {
         "browserify>has": true,
         "browserify>has>function-bind": true,
+        "string.prototype.matchall>es-abstract>has-proto": true,
         "string.prototype.matchall>has-symbols": true
       }
     },

lavamoat/browserify/desktop/policy.json

@@ -5,6 +5,11 @@
         "regeneratorRuntime": "write"
       }
     },
+    "@babel/runtime>regenerator-runtime": {
+      "globals": {
+        "regeneratorRuntime": "write"
+      }
+    },
     "@download/blockies": {
       "globals": {
         "document.createElement": true
@@ -1213,8 +1218,8 @@
         "@metamask/eth-token-tracker>deep-equal>is-arguments": true,
         "@metamask/eth-token-tracker>deep-equal>is-date-object": true,
         "@ngraveio/bc-ur>assert>object-is": true,
-        "@storybook/api>telejson>is-regex": true,
         "globalthis>define-properties>object-keys": true,
+        "string.prototype.matchall>es-abstract>is-regex": true,
         "string.prototype.matchall>regexp.prototype.flags": true
       }
     },
@@ -1710,14 +1715,14 @@
         "@metamask/post-message-stream>readable-stream>process-nextick-args": true,
         "@metamask/post-message-stream>readable-stream>safe-buffer": true,
         "@metamask/post-message-stream>readable-stream>string_decoder": true,
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>timers-browserify": true,
         "pumpify>inherits": true,
         "readable-stream>core-util-is": true,
-        "readable-stream>isarray": true
+        "readable-stream>isarray": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "@metamask/post-message-stream>readable-stream>process-nextick-args": {
@@ -1988,13 +1993,13 @@
     },
     "@metamask/snaps-controllers-flask>concat-stream>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "@metamask/snaps-controllers-flask>nanoid": {
@@ -2092,13 +2097,13 @@
     },
     "@metamask/snaps-controllers>readable-web-to-node-stream>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "@metamask/snaps-controllers>tar-stream": {
@@ -2121,13 +2126,13 @@
     },
     "@metamask/snaps-controllers>tar-stream>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "@metamask/snaps-ui-flask": {
@@ -2398,24 +2403,6 @@
         "define": true
       }
     },
-    "@storybook/api>regenerator-runtime": {
-      "globals": {
-        "regeneratorRuntime": "write"
-      }
-    },
-    "@storybook/api>telejson>is-regex": {
-      "packages": {
-        "koa>is-generator-function>has-tostringtag": true,
-        "string.prototype.matchall>call-bind": true
-      }
-    },
-    "@storybook/api>util-deprecate": {
-      "globals": {
-        "console.trace": true,
-        "console.warn": true,
-        "localStorage": true
-      }
-    },
     "@truffle/codec": {
       "packages": {
         "@truffle/codec>@truffle/abi-utils": true,
@@ -2512,16 +2499,10 @@
     },
     "@truffle/codec>@truffle/abi-utils>change-case>pascal-case": {
       "packages": {
-        "@truffle/codec>@truffle/abi-utils>change-case>pascal-case>camel-case": true,
+        "@truffle/codec>@truffle/abi-utils>change-case>camel-case": true,
         "@truffle/codec>@truffle/abi-utils>change-case>upper-case-first": true
       }
     },
-    "@truffle/codec>@truffle/abi-utils>change-case>pascal-case>camel-case": {
-      "packages": {
-        "@truffle/codec>@truffle/abi-utils>change-case>no-case": true,
-        "@truffle/codec>@truffle/abi-utils>change-case>upper-case": true
-      }
-    },
     "@truffle/codec>@truffle/abi-utils>change-case>path-case": {
       "packages": {
         "@truffle/codec>@truffle/abi-utils>change-case>no-case": true
@@ -2628,13 +2609,8 @@
         "console.error": true
       },
       "packages": {
-        "@truffle/codec>semver>lru-cache": true,
+        "browserify>process": true,
-        "browserify>process": true
+        "semver>lru-cache": true
-      }
-    },
-    "@truffle/codec>semver>lru-cache": {
-      "packages": {
-        "semver>lru-cache>yallist": true
       }
     },
     "@truffle/codec>web3-utils": {
@@ -2692,9 +2668,9 @@
         "@truffle/codec": true,
         "@truffle/codec>@truffle/abi-utils": true,
         "@truffle/codec>@truffle/compile-common": true,
+        "@truffle/codec>big.js": true,
         "@truffle/codec>web3-utils": true,
         "@truffle/decoder>@truffle/encoder>@ensdomains/ensjs": true,
-        "@truffle/decoder>@truffle/encoder>big.js": true,
         "@truffle/decoder>@truffle/encoder>bignumber.js": true,
         "lodash": true,
         "nock>debug": true
@@ -2871,11 +2847,6 @@
         "browserify>process": true
       }
     },
-    "@truffle/decoder>@truffle/encoder>big.js": {
-      "globals": {
-        "define": true
-      }
-    },
     "@truffle/decoder>@truffle/encoder>bignumber.js": {
       "globals": {
         "crypto": true,
@@ -2905,7 +2876,7 @@
     },
     "@truffle/decoder>@truffle/source-map-utils>node-interval-tree": {
       "packages": {
-        "@storybook/addon-a11y>react-sizeme>shallowequal": true
+        "@truffle/decoder>@truffle/source-map-utils>node-interval-tree>shallowequal": true
       }
     },
     "@truffle/decoder>bn.js": {
@@ -3738,13 +3709,13 @@
     },
     "ethereumjs-util>create-hash>md5.js>hash-base>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "ethereumjs-util>create-hash>ripemd160": {
@@ -3791,13 +3762,13 @@
     },
     "ethereumjs-util>ethereum-cryptography>keccak>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "ethereumjs-util>ethereum-cryptography>scrypt-js": {
@@ -3972,7 +3943,7 @@
     "ethjs-query>babel-runtime": {
       "packages": {
         "@babel/runtime": true,
-        "@storybook/api>regenerator-runtime": true,
+        "@babel/runtime>regenerator-runtime": true,
         "ethjs-query>babel-runtime>core-js": true
       }
     },
@@ -4195,13 +4166,13 @@
     },
     "madge>ora>bl>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "nanoid": {
@@ -4413,8 +4384,8 @@
     },
     "react-focus-lock>react-clientside-effect": {
       "packages": {
-        "react": true,
+        "@babel/runtime": true,
-        "react-focus-lock>react-clientside-effect>@babel/runtime": true
+        "react": true
       }
     },
     "react-focus-lock>use-callback-ref": {
@@ -4508,7 +4479,7 @@
       "packages": {
         "react-markdown>remark-parse>mdast-util-from-markdown>mdast-util-to-string": true,
         "react-markdown>remark-parse>mdast-util-from-markdown>micromark": true,
-        "react-markdown>vfile>unist-util-stringify-position": true,
+        "react-markdown>remark-parse>mdast-util-from-markdown>unist-util-stringify-position": true,
         "react-syntax-highlighter>refractor>parse-entities": true
       }
     },
@@ -4824,7 +4795,6 @@
     },
     "readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>events": true,
         "browserify>process": true,
@@ -4834,7 +4804,8 @@
         "readable-stream>isarray": true,
         "readable-stream>process-nextick-args": true,
         "readable-stream>safe-buffer": true,
-        "readable-stream>string_decoder": true
+        "readable-stream>string_decoder": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "readable-stream>core-util-is": {
@@ -4857,6 +4828,13 @@
         "readable-stream>safe-buffer": true
       }
     },
+    "readable-stream>util-deprecate": {
+      "globals": {
+        "console.trace": true,
+        "console.warn": true,
+        "localStorage": true
+      }
+    },
     "redux": {
       "globals": {
         "console": true
@@ -4891,6 +4869,12 @@
         "string.prototype.matchall>get-intrinsic": true
       }
     },
+    "string.prototype.matchall>es-abstract>is-regex": {
+      "packages": {
+        "koa>is-generator-function>has-tostringtag": true,
+        "string.prototype.matchall>call-bind": true
+      }
+    },
     "string.prototype.matchall>get-intrinsic": {
       "globals": {
         "AggregateError": true,
@@ -4900,6 +4884,7 @@
       "packages": {
         "browserify>has": true,
         "browserify>has>function-bind": true,
+        "string.prototype.matchall>es-abstract>has-proto": true,
         "string.prototype.matchall>has-symbols": true
       }
     },

lavamoat/browserify/flask/policy.json

@@ -5,6 +5,11 @@
         "regeneratorRuntime": "write"
       }
     },
+    "@babel/runtime>regenerator-runtime": {
+      "globals": {
+        "regeneratorRuntime": "write"
+      }
+    },
     "@download/blockies": {
       "globals": {
         "document.createElement": true
@@ -1213,8 +1218,8 @@
         "@metamask/eth-token-tracker>deep-equal>is-arguments": true,
         "@metamask/eth-token-tracker>deep-equal>is-date-object": true,
         "@ngraveio/bc-ur>assert>object-is": true,
-        "@storybook/api>telejson>is-regex": true,
         "globalthis>define-properties>object-keys": true,
+        "string.prototype.matchall>es-abstract>is-regex": true,
         "string.prototype.matchall>regexp.prototype.flags": true
       }
     },
@@ -1710,14 +1715,14 @@
         "@metamask/post-message-stream>readable-stream>process-nextick-args": true,
         "@metamask/post-message-stream>readable-stream>safe-buffer": true,
         "@metamask/post-message-stream>readable-stream>string_decoder": true,
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>timers-browserify": true,
         "pumpify>inherits": true,
         "readable-stream>core-util-is": true,
-        "readable-stream>isarray": true
+        "readable-stream>isarray": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "@metamask/post-message-stream>readable-stream>process-nextick-args": {
@@ -1988,13 +1993,13 @@
     },
     "@metamask/snaps-controllers-flask>concat-stream>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "@metamask/snaps-controllers-flask>nanoid": {
@@ -2092,13 +2097,13 @@
     },
     "@metamask/snaps-controllers>readable-web-to-node-stream>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "@metamask/snaps-controllers>tar-stream": {
@@ -2121,13 +2126,13 @@
     },
     "@metamask/snaps-controllers>tar-stream>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "@metamask/snaps-ui-flask": {
@@ -2398,24 +2403,6 @@
         "define": true
       }
     },
-    "@storybook/api>regenerator-runtime": {
-      "globals": {
-        "regeneratorRuntime": "write"
-      }
-    },
-    "@storybook/api>telejson>is-regex": {
-      "packages": {
-        "koa>is-generator-function>has-tostringtag": true,
-        "string.prototype.matchall>call-bind": true
-      }
-    },
-    "@storybook/api>util-deprecate": {
-      "globals": {
-        "console.trace": true,
-        "console.warn": true,
-        "localStorage": true
-      }
-    },
     "@truffle/codec": {
       "packages": {
         "@truffle/codec>@truffle/abi-utils": true,
@@ -2512,16 +2499,10 @@
     },
     "@truffle/codec>@truffle/abi-utils>change-case>pascal-case": {
       "packages": {
-        "@truffle/codec>@truffle/abi-utils>change-case>pascal-case>camel-case": true,
+        "@truffle/codec>@truffle/abi-utils>change-case>camel-case": true,
         "@truffle/codec>@truffle/abi-utils>change-case>upper-case-first": true
       }
     },
-    "@truffle/codec>@truffle/abi-utils>change-case>pascal-case>camel-case": {
-      "packages": {
-        "@truffle/codec>@truffle/abi-utils>change-case>no-case": true,
-        "@truffle/codec>@truffle/abi-utils>change-case>upper-case": true
-      }
-    },
     "@truffle/codec>@truffle/abi-utils>change-case>path-case": {
       "packages": {
         "@truffle/codec>@truffle/abi-utils>change-case>no-case": true
@@ -2628,13 +2609,8 @@
         "console.error": true
       },
       "packages": {
-        "@truffle/codec>semver>lru-cache": true,
+        "browserify>process": true,
-        "browserify>process": true
+        "semver>lru-cache": true
-      }
-    },
-    "@truffle/codec>semver>lru-cache": {
-      "packages": {
-        "semver>lru-cache>yallist": true
       }
     },
     "@truffle/codec>web3-utils": {
@@ -2692,9 +2668,9 @@
         "@truffle/codec": true,
         "@truffle/codec>@truffle/abi-utils": true,
         "@truffle/codec>@truffle/compile-common": true,
+        "@truffle/codec>big.js": true,
         "@truffle/codec>web3-utils": true,
         "@truffle/decoder>@truffle/encoder>@ensdomains/ensjs": true,
-        "@truffle/decoder>@truffle/encoder>big.js": true,
         "@truffle/decoder>@truffle/encoder>bignumber.js": true,
         "lodash": true,
         "nock>debug": true
@@ -2871,11 +2847,6 @@
         "browserify>process": true
       }
     },
-    "@truffle/decoder>@truffle/encoder>big.js": {
-      "globals": {
-        "define": true
-      }
-    },
     "@truffle/decoder>@truffle/encoder>bignumber.js": {
       "globals": {
         "crypto": true,
@@ -2905,7 +2876,7 @@
     },
     "@truffle/decoder>@truffle/source-map-utils>node-interval-tree": {
       "packages": {
-        "@storybook/addon-a11y>react-sizeme>shallowequal": true
+        "@truffle/decoder>@truffle/source-map-utils>node-interval-tree>shallowequal": true
       }
     },
     "@truffle/decoder>bn.js": {
@@ -3738,13 +3709,13 @@
     },
     "ethereumjs-util>create-hash>md5.js>hash-base>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "ethereumjs-util>create-hash>ripemd160": {
@@ -3791,13 +3762,13 @@
     },
     "ethereumjs-util>ethereum-cryptography>keccak>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "ethereumjs-util>ethereum-cryptography>scrypt-js": {
@@ -3972,7 +3943,7 @@
     "ethjs-query>babel-runtime": {
       "packages": {
         "@babel/runtime": true,
-        "@storybook/api>regenerator-runtime": true,
+        "@babel/runtime>regenerator-runtime": true,
         "ethjs-query>babel-runtime>core-js": true
       }
     },
@@ -4195,13 +4166,13 @@
     },
     "madge>ora>bl>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "nanoid": {
@@ -4413,8 +4384,8 @@
     },
     "react-focus-lock>react-clientside-effect": {
       "packages": {
-        "react": true,
+        "@babel/runtime": true,
-        "react-focus-lock>react-clientside-effect>@babel/runtime": true
+        "react": true
       }
     },
     "react-focus-lock>use-callback-ref": {
@@ -4508,7 +4479,7 @@
       "packages": {
         "react-markdown>remark-parse>mdast-util-from-markdown>mdast-util-to-string": true,
         "react-markdown>remark-parse>mdast-util-from-markdown>micromark": true,
-        "react-markdown>vfile>unist-util-stringify-position": true,
+        "react-markdown>remark-parse>mdast-util-from-markdown>unist-util-stringify-position": true,
         "react-syntax-highlighter>refractor>parse-entities": true
       }
     },
@@ -4824,7 +4795,6 @@
     },
     "readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>events": true,
         "browserify>process": true,
@@ -4834,7 +4804,8 @@
         "readable-stream>isarray": true,
         "readable-stream>process-nextick-args": true,
         "readable-stream>safe-buffer": true,
-        "readable-stream>string_decoder": true
+        "readable-stream>string_decoder": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "readable-stream>core-util-is": {
@@ -4857,6 +4828,13 @@
         "readable-stream>safe-buffer": true
       }
     },
+    "readable-stream>util-deprecate": {
+      "globals": {
+        "console.trace": true,
+        "console.warn": true,
+        "localStorage": true
+      }
+    },
     "redux": {
       "globals": {
         "console": true
@@ -4891,6 +4869,12 @@
         "string.prototype.matchall>get-intrinsic": true
       }
     },
+    "string.prototype.matchall>es-abstract>is-regex": {
+      "packages": {
+        "koa>is-generator-function>has-tostringtag": true,
+        "string.prototype.matchall>call-bind": true
+      }
+    },
     "string.prototype.matchall>get-intrinsic": {
       "globals": {
         "AggregateError": true,
@@ -4900,6 +4884,7 @@
       "packages": {
         "browserify>has": true,
         "browserify>has>function-bind": true,
+        "string.prototype.matchall>es-abstract>has-proto": true,
         "string.prototype.matchall>has-symbols": true
       }
     },

lavamoat/browserify/main/policy.json

@@ -5,6 +5,11 @@
         "regeneratorRuntime": "write"
       }
     },
+    "@babel/runtime>regenerator-runtime": {
+      "globals": {
+        "regeneratorRuntime": "write"
+      }
+    },
     "@download/blockies": {
       "globals": {
         "document.createElement": true
@@ -1142,8 +1147,8 @@
         "@metamask/eth-token-tracker>deep-equal>is-arguments": true,
         "@metamask/eth-token-tracker>deep-equal>is-date-object": true,
         "@ngraveio/bc-ur>assert>object-is": true,
-        "@storybook/api>telejson>is-regex": true,
         "globalthis>define-properties>object-keys": true,
+        "string.prototype.matchall>es-abstract>is-regex": true,
         "string.prototype.matchall>regexp.prototype.flags": true
       }
     },
@@ -1952,24 +1957,6 @@
         "define": true
       }
     },
-    "@storybook/api>regenerator-runtime": {
-      "globals": {
-        "regeneratorRuntime": "write"
-      }
-    },
-    "@storybook/api>telejson>is-regex": {
-      "packages": {
-        "koa>is-generator-function>has-tostringtag": true,
-        "string.prototype.matchall>call-bind": true
-      }
-    },
-    "@storybook/api>util-deprecate": {
-      "globals": {
-        "console.trace": true,
-        "console.warn": true,
-        "localStorage": true
-      }
-    },
     "@truffle/codec": {
       "packages": {
         "@truffle/codec>@truffle/abi-utils": true,
@@ -2066,16 +2053,10 @@
     },
     "@truffle/codec>@truffle/abi-utils>change-case>pascal-case": {
       "packages": {
-        "@truffle/codec>@truffle/abi-utils>change-case>pascal-case>camel-case": true,
+        "@truffle/codec>@truffle/abi-utils>change-case>camel-case": true,
         "@truffle/codec>@truffle/abi-utils>change-case>upper-case-first": true
       }
     },
-    "@truffle/codec>@truffle/abi-utils>change-case>pascal-case>camel-case": {
-      "packages": {
-        "@truffle/codec>@truffle/abi-utils>change-case>no-case": true,
-        "@truffle/codec>@truffle/abi-utils>change-case>upper-case": true
-      }
-    },
     "@truffle/codec>@truffle/abi-utils>change-case>path-case": {
       "packages": {
         "@truffle/codec>@truffle/abi-utils>change-case>no-case": true
@@ -2182,13 +2163,8 @@
         "console.error": true
       },
       "packages": {
-        "@truffle/codec>semver>lru-cache": true,
+        "browserify>process": true,
-        "browserify>process": true
+        "semver>lru-cache": true
-      }
-    },
-    "@truffle/codec>semver>lru-cache": {
-      "packages": {
-        "semver>lru-cache>yallist": true
       }
     },
     "@truffle/codec>web3-utils": {
@@ -2246,9 +2222,9 @@
         "@truffle/codec": true,
         "@truffle/codec>@truffle/abi-utils": true,
         "@truffle/codec>@truffle/compile-common": true,
+        "@truffle/codec>big.js": true,
         "@truffle/codec>web3-utils": true,
         "@truffle/decoder>@truffle/encoder>@ensdomains/ensjs": true,
-        "@truffle/decoder>@truffle/encoder>big.js": true,
         "@truffle/decoder>@truffle/encoder>bignumber.js": true,
         "lodash": true,
         "nock>debug": true
@@ -2425,11 +2401,6 @@
         "browserify>process": true
       }
     },
-    "@truffle/decoder>@truffle/encoder>big.js": {
-      "globals": {
-        "define": true
-      }
-    },
     "@truffle/decoder>@truffle/encoder>bignumber.js": {
       "globals": {
         "crypto": true,
@@ -2459,7 +2430,7 @@
     },
     "@truffle/decoder>@truffle/source-map-utils>node-interval-tree": {
       "packages": {
-        "@storybook/addon-a11y>react-sizeme>shallowequal": true
+        "@truffle/decoder>@truffle/source-map-utils>node-interval-tree>shallowequal": true
       }
     },
     "@truffle/decoder>bn.js": {
@@ -3292,13 +3263,13 @@
     },
     "ethereumjs-util>create-hash>md5.js>hash-base>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "ethereumjs-util>create-hash>ripemd160": {
@@ -3345,13 +3316,13 @@
     },
     "ethereumjs-util>ethereum-cryptography>keccak>readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>buffer": true,
         "browserify>events": true,
         "browserify>process": true,
         "browserify>string_decoder": true,
-        "pumpify>inherits": true
+        "pumpify>inherits": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "ethereumjs-util>ethereum-cryptography>scrypt-js": {
@@ -3526,7 +3497,7 @@
     "ethjs-query>babel-runtime": {
       "packages": {
         "@babel/runtime": true,
-        "@storybook/api>regenerator-runtime": true,
+        "@babel/runtime>regenerator-runtime": true,
         "ethjs-query>babel-runtime>core-js": true
       }
     },
@@ -3949,8 +3920,8 @@
     },
     "react-focus-lock>react-clientside-effect": {
       "packages": {
-        "react": true,
+        "@babel/runtime": true,
-        "react-focus-lock>react-clientside-effect>@babel/runtime": true
+        "react": true
       }
     },
     "react-focus-lock>use-callback-ref": {
@@ -4246,7 +4217,6 @@
     },
     "readable-stream": {
       "packages": {
-        "@storybook/api>util-deprecate": true,
         "browserify>browser-resolve": true,
         "browserify>events": true,
         "browserify>process": true,
@@ -4256,7 +4226,8 @@
         "readable-stream>isarray": true,
         "readable-stream>process-nextick-args": true,
         "readable-stream>safe-buffer": true,
-        "readable-stream>string_decoder": true
+        "readable-stream>string_decoder": true,
+        "readable-stream>util-deprecate": true
       }
     },
     "readable-stream>core-util-is": {
@@ -4279,6 +4250,13 @@
         "readable-stream>safe-buffer": true
       }
     },
+    "readable-stream>util-deprecate": {
+      "globals": {
+        "console.trace": true,
+        "console.warn": true,
+        "localStorage": true
+      }
+    },
     "redux": {
       "globals": {
         "console": true
@@ -4313,6 +4291,12 @@
         "string.prototype.matchall>get-intrinsic": true
       }
     },
+    "string.prototype.matchall>es-abstract>is-regex": {
+      "packages": {
+        "koa>is-generator-function>has-tostringtag": true,
+        "string.prototype.matchall>call-bind": true
+      }
+    },
     "string.prototype.matchall>get-intrinsic": {
       "globals": {
         "AggregateError": true,
@@ -4322,6 +4306,7 @@
       "packages": {
         "browserify>has": true,
         "browserify>has>function-bind": true,
+        "string.prototype.matchall>es-abstract>has-proto": true,
         "string.prototype.matchall>has-symbols": true
       }
     },

package.json

@@ -73,8 +73,8 @@
     "devtools:redux": "remotedev --hostname=localhost --port=8000",
     "start:dev": "concurrently -k -n build,react,redux yarn:start yarn:devtools:react yarn:devtools:redux",
     "announce": "node development/announcer.js",
-    "storybook": "start-storybook -p 6006 -c .storybook",
+    "storybook": "storybook dev -p 6006 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook -o storybook-build",
+    "storybook:build": "storybook build -c .storybook -o storybook-build",
     "storybook:deploy": "storybook-to-ghpages --existing-output-dir storybook-build --remote storybook --branch master",
     "update-changelog": "auto-changelog update",
     "generate:migration": "./development/generate-migration.sh",
@@ -90,7 +90,7 @@
     "ts-migration:dashboard:watch": "yarn ts-migration:dashboard:build --watch",
     "ts-migration:enumerate": "ts-node development/ts-migration-dashboard/scripts/write-list-of-files-to-convert.ts",
     "test-storybook": "test-storybook -c .storybook",
-    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn storybook:build && npx http-server storybook-build --port 6006 \" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers=2\"",
+    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn storybook:build && npx http-server storybook-build --port 6006 \" \"wait-on tcp:6006 && echo 'Build done. Running storybook tests...' && yarn test-storybook --maxWorkers=2\"",
     "githooks:install": "husky install",
     "fitness-functions": "ts-node development/fitness-functions/index.ts",
     "generate-beta-commit": "node ./development/generate-beta-commit.js",
@@ -98,10 +98,14 @@
     "label-prs": "ts-node ./.github/scripts/label-prs.ts"
   },
   "resolutions": {
+    "@babel/core": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
+    "@babel/runtime": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
+    "@types/react": "^16.9.53",
     "analytics-node/axios": "^0.21.2",
     "ganache-core/lodash": "^4.17.21",
     "git-url-parse@^12.0.0": "^13.1.0",
     "glob-parent": "^6.0.2",
+    "globalthis@^1.0.1": "1.0.1",
     "netmask": "^2.0.1",
     "json-schema": "^0.4.0",
     "ast-types": "^0.14.2",
@@ -161,26 +165,6 @@
     "regenerator-runtime@^0.13.7": "patch:regenerator-runtime@npm%3A0.13.7#./.yarn/patches/regenerator-runtime-npm-0.13.7-41bcbe64ea.patch",
     "regenerator-runtime@^0.11.0": "patch:regenerator-runtime@npm%3A0.13.7#./.yarn/patches/regenerator-runtime-npm-0.13.7-41bcbe64ea.patch",
     "trim": "^0.0.3",
-    "@babel/runtime@^7.5.5": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.7.6": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.9.2": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.5.4": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.10.3": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.1.2": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.4.4": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.10.2": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.4.5": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.15.4": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.17.8": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.8.7": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.0.0": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.4.0": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.3.1": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.8.3": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.7.2": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.12.5": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.5.0": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
-    "@babel/runtime@^7.8.4": "patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch",
     "@eslint/eslintrc@^2.0.1": "patch:@eslint/eslintrc@npm%3A2.0.2#./.yarn/patches/@eslint-eslintrc-npm-2.0.2-d308674d86.patch",
     "@formatjs/intl-utils@^3.3.1": "patch:@formatjs/intl-utils@npm%3A3.3.1#./.yarn/patches/@formatjs-intl-utils-npm-3.3.1-08510c16ad.patch",
     "@fortawesome/fontawesome-free@^5.13.0": "patch:@fortawesome/fontawesome-free@npm%3A5.13.0#./.yarn/patches/@fortawesome-fontawesome-free-npm-5.13.0-f20fc0388d.patch",
@@ -211,23 +195,12 @@
     "request@^2.83.0": "patch:request@npm%3A2.88.2#./.yarn/patches/request-npm-2.88.2-f4a57c72c4.patch",
     "request@^2.88.2": "patch:request@npm%3A2.88.2#./.yarn/patches/request-npm-2.88.2-f4a57c72c4.patch",
     "request@^2.85.0": "patch:request@npm%3A2.88.2#./.yarn/patches/request-npm-2.88.2-f4a57c72c4.patch",
-    "@babel/core@^7.12.1": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@^7.20.12": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@^7.18.6": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@^7.18.13": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@^7.12.10": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@^7.7.5": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@^7.11.6": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@>=7.9.0": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@^7.1.0": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@^7.12.3": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
-    "@babel/core@7.12.9": "patch:@babel/core@npm%3A7.21.5#./.yarn/patches/@babel-core-npm-7.21.5-c72c337956.patch",
     "@metamask/assets-controllers@^6.0.0": "patch:@metamask/assets-controllers@npm%3A6.0.0#./.yarn/patches/@metamask-assets-controllers-npm-6.0.0-0cb763bd07.patch"
   },
   "dependencies": {
     "@actions/core": "^1.10.0",
     "@actions/github": "^5.1.1",
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "^7.18.9",
     "@download/blockies": "^1.0.3",
     "@ensdomains/content-hash": "^2.5.6",
     "@ethereumjs/common": "^3.1.1",
@@ -385,7 +358,7 @@
   },
   "devDependencies": {
     "@babel/code-frame": "^7.12.13",
-    "@babel/core": "^7.12.1",
+    "@babel/core": "^7.21.5",
     "@babel/eslint-parser": "^7.13.14",
     "@babel/eslint-plugin": "^7.12.1",
     "@babel/preset-env": "^7.5.5",
@@ -406,22 +379,21 @@
     "@metamask/phishing-warning": "^2.1.0",
     "@metamask/test-dapp": "^6.0.0",
     "@sentry/cli": "^1.58.0",
-    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-a11y": "^7.0.11",
-    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-actions": "^7.0.11",
-    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addons": "^6.5.16",
+    "@storybook/addon-mdx-gfm": "^7.0.11",
-    "@storybook/api": "^6.5.16",
+    "@storybook/addons": "^7.0.11",
-    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/api": "^7.0.11",
-    "@storybook/client-api": "^6.5.16",
+    "@storybook/client-api": "^7.0.11",
-    "@storybook/components": "^6.5.16",
+    "@storybook/components": "^7.0.11",
-    "@storybook/core": "^6.5.16",
+    "@storybook/core-events": "^7.0.11",
-    "@storybook/core-events": "^6.5.16",
+    "@storybook/react": "^7.0.11",
-    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react-webpack5": "^7.0.11",
-    "@storybook/react": "^6.5.16",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/test-runner": "^0.9.4",
+    "@storybook/test-runner": "^0.10.0",
-    "@storybook/theming": "^6.5.16",
+    "@storybook/theming": "^7.0.11",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^10.4.8",
     "@testing-library/react-hooks": "^8.0.1",
@@ -486,7 +458,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint-plugin-storybook": "^0.6.12",
     "fancy-log": "^1.3.3",
     "fast-glob": "^3.2.2",
     "fs-extra": "^8.1.0",
@@ -543,7 +515,6 @@
     "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.5",
     "sass": "^1.32.4",
     "sass-loader": "^10.1.1",
@@ -554,7 +525,8 @@
     "source-map": "^0.7.2",
     "source-map-explorer": "^2.4.2",
     "squirrelly": "^8.0.8",
-    "storybook-dark-mode": "^2.1.1",
+    "storybook": "^7.0.11",
+    "storybook-dark-mode": "^3.0.0",
     "stream-browserify": "^3.0.0",
     "string.prototype.matchall": "^4.0.2",
     "style-loader": "^0.21.0",
@@ -641,7 +613,10 @@
       "@metamask/eth-trezor-keyring>@trezor/connect-web>@trezor/connect>@trezor/transport>protobufjs": false,
       "@metamask/eth-trezor-keyring>@trezor/connect-web>@trezor/connect>@trezor/utxo-lib>blake-hash": false,
       "@metamask/eth-trezor-keyring>@trezor/connect-web>@trezor/connect>@trezor/utxo-lib>tiny-secp256k1": false,
-      "@metamask/eth-trezor-keyring>hdkey>secp256k1": false
+      "@metamask/eth-trezor-keyring>hdkey>secp256k1": false,
+      "@storybook/addon-knobs>core-js": false,
+      "@storybook/manager-webpack5>core-js": false,
+      "@storybook/react-webpack5>@storybook/preset-react-webpack>@pmmmwh/react-refresh-webpack-plugin>core-js-pure": false
     }
   },
   "packageManager": "yarn@3.2.4"

ui/components/app/metamask-translation/README.mdx

@@ -25,10 +25,10 @@ trees to contain.
 
 ## Props
 
-<!--
+{/*
 ArgsTable doesn't work with SectionShape
 <ArgsTable of={MetaMaskTranslation} />
--->
+*/}
 
 | Name             | Description                                                                                             |
 | ---------------- | ------------------------------------------------------------------------------------------------------- |

ui/pages/import-token/README.mdx

@@ -4,10 +4,8 @@ import ImportToken from './import-token.component';
 
 import testData from '../../../.storybook/test-data';
 import configureStore from '../../store/store';
-const store = configureStore(testData);
-const { metamask } = store.getState();
 
-export const PersonalAddress = () => <code>{metamask.selectedAddress}</code>;
+export const PersonalAddress = () => <code>{configureStore(testData).getState().metamask.selectedAddress}</code>;
 
 # ImportToken
 

ui/pages/settings/info-tab/info-tab.component.js

@@ -24,7 +24,7 @@ import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
 
 export default class InfoTab extends PureComponent {
   state = {
-    version: global.platform.getVersion(),
+    version: global.platform?.getVersion() ?? '<unknown>',
   };
 
   static contextTypes = {

ui/pages/unlock-page/README.mdx

@@ -12,10 +12,10 @@ Portal page for user to auth the access of their account
 
 ## Props
 
-<!--
+{/*
 ArgsTable doesn't work with SectionShape
 <ArgsTable of={MetaMaskTranslation} />
--->
+*/}
 
 | Name                       | Description                                                                |
 | -------------------------- | -------------------------------------------------------------------------- |