Use Webpack 5 for Storybook (#16678)

* 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>

.depcheckrc.yml

@@ -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'

.storybook/main.js

@@ -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;
   },
 };

lavamoat/browserify/beta/policy.json

@@ -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
+        "enzyme>cheerio>tslib": true
-      }
-    },
-    "@metamask/assets-controllers>async-mutex>tslib": {
-      "globals": {
-        "define": 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": true
-        "@sentry/utils>tslib": 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": true
-        "@sentry/utils>tslib": 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": true
-        "@sentry/utils>tslib": 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
+        "webpack>events": true
-      }
-    },
-    "safe-event-emitter>events": {
-      "globals": {
-        "console": true
       }
     },
     "semver": {
@@ -5373,6 +5388,11 @@
         "console.warn": true,
         "define": true
       }
+    },
+    "webpack>events": {
+      "globals": {
+        "console": true
+      }
     }
   }
 }

lavamoat/browserify/flask/policy.json

@@ -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
+        "enzyme>cheerio>tslib": true
-      }
-    },
-    "@metamask/assets-controllers>async-mutex>tslib": {
-      "globals": {
-        "define": 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": true
-        "@sentry/utils>tslib": 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": true
-        "@sentry/utils>tslib": 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": true
-        "@sentry/utils>tslib": 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
+        "webpack>events": true
-      }
-    },
-    "safe-event-emitter>events": {
-      "globals": {
-        "console": 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
+      }
     }
   }
 }

lavamoat/browserify/main/policy.json

@@ -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
+        "enzyme>cheerio>tslib": true
-      }
-    },
-    "@metamask/assets-controllers>async-mutex>tslib": {
-      "globals": {
-        "define": 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": true
-        "@sentry/utils>tslib": 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": true
-        "@sentry/utils>tslib": 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": true
-        "@sentry/utils>tslib": 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
+        "webpack>events": true
-      }
-    },
-    "safe-event-emitter>events": {
-      "globals": {
-        "console": true
       }
     },
     "semver": {
@@ -5373,6 +5388,11 @@
         "console.warn": true,
         "define": true
       }
+    },
+    "webpack>events": {
+      "globals": {
+        "console": true
+      }
     }
   }
 }

lavamoat/build-system/policy-override.json

@@ -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": {

package.json

@@ -94,8 +94,7 @@
     "netmask": "^2.0.1",
     "pubnub/superagent-proxy": "^3.0.0",
     "json-schema": "^0.4.0",
-    "simple-get": "^4.0.1",
+    "simple-get": "^4.0.1"
-    "@storybook/**/ast-types": "^0.14.2"
   },
   "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-a11y": "^6.5.13",
-    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addons": "^6.5.10",
+    "@storybook/addons": "^6.5.13",
-    "@storybook/api": "^6.5.10",
+    "@storybook/api": "^6.5.13",
-    "@storybook/client-api": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/components": "^6.5.10",
+    "@storybook/client-api": "^6.5.13",
-    "@storybook/core": "^6.5.10",
+    "@storybook/components": "^6.5.13",
-    "@storybook/core-events": "^6.5.10",
+    "@storybook/core": "^6.5.13",
-    "@storybook/react": "^6.5.10",
+    "@storybook/core-events": "^6.5.13",
-    "@storybook/storybook-deployer": "^2.8.12",
+    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/theming": "^6.5.10",
+    "@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
     }
   }
 }

ui/components/app/metamask-template-renderer/index.js

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

ui/components/app/metamask-template-renderer/metamask-template-renderer.js

@@ -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,
 };

ui/components/app/metamask-template-renderer/section-shape.js

@@ -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;

ui/components/app/metamask-translation/metamask-translation.js

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