Bump dependencies to use Webpack 5

packages/signer/package.json

@@ -37,14 +37,16 @@
     "@fontsource/lato": "4.2.2",
     "@fontsource/roboto-mono": "4.2.2",
     "@hot-loader/react-dom": "17.0.1",
-    "@mycrypto/ui": "1.0.6",
+    "@mycrypto/ui": "1.0.7",
     "@mycrypto/wallets": "1.1.0",
     "@rebass/forms": "4.0.6",
     "@reduxjs/toolkit": "1.5.0",
     "@signer/common": "workspace:packages/common",
     "bignumber.js": "9.0.1",
+    "buffer": "6.0.3",
     "check-password-strength": "2.0.2",
     "connected-react-router": "6.9.1",
+    "crypto-browserify": "3.12.0",
     "date-fns": "2.18.0",
     "eciesjs": "0.3.11",
     "electron-context-menu": "3.1.0",
@@ -76,6 +78,7 @@
     "rebass": "4.0.7",
     "redux": "4.1.0",
     "redux-saga": "1.1.3",
+    "stream-browserify": "3.0.0",
     "styled-components": "5.2.0",
     "styled-system": "5.1.5",
     "superstruct": "0.14.2",
@@ -87,13 +90,13 @@
   },
   "devDependencies": {
     "@babel/core": "7.14.3",
-    "@electron-forge/cli": "6.0.0-beta.53",
-    "@electron-forge/maker-deb": "6.0.0-beta.53",
-    "@electron-forge/maker-rpm": "6.0.0-beta.53",
-    "@electron-forge/maker-squirrel": "6.0.0-beta.53",
-    "@electron-forge/maker-zip": "6.0.0-beta.53",
-    "@electron-forge/plugin-webpack": "6.0.0-beta.53",
-    "@electron-forge/publisher-github": "6.0.0-beta.54",
+    "@electron-forge/cli": "6.0.0-beta.59",
+    "@electron-forge/maker-deb": "6.0.0-beta.59",
+    "@electron-forge/maker-rpm": "6.0.0-beta.59",
+    "@electron-forge/maker-squirrel": "6.0.0-beta.59",
+    "@electron-forge/maker-zip": "6.0.0-beta.59",
+    "@electron-forge/plugin-webpack": "6.0.0-beta.59",
+    "@electron-forge/publisher-github": "6.0.0-beta.59",
     "@marshallofsound/webpack-asset-relocator-loader": "0.5.0",
     "@sindresorhus/is": "3.1.2",
     "@szmarczak/http-timer": "4.0.5",
@@ -119,12 +122,12 @@
     "babel-loader": "8.2.2",
     "babel-plugin-styled-components": "1.12.0",
     "copy-webpack-plugin": "6.1.1",
-    "csp-html-webpack-plugin": "4.0.0",
+    "csp-html-webpack-plugin": "5.1.0",
     "css-loader": "4.2.1",
     "electron": "13.1.8",
     "file-loader": "6.2.0",
     "fork-ts-checker-webpack-plugin": "5.0.14",
-    "html-webpack-plugin": "4.5.0",
+    "html-webpack-plugin": "5.3.2",
     "jest-styled-components": "7.0.3",
     "node-abi": "2.30.0",
     "node-loader": "1.0.1",

packages/signer/src/app/components/index.ts

@@ -3,7 +3,8 @@ export * from './Navigation';
 export * from './Core';
 
 // Re-export as these should be used over the ones imported from rebass!
-export { Box, Flex, Image, Link, ImageProps, BoxProps, FlexProps } from 'rebass/styled-components';
+export { Box, Flex, Image, Link } from 'rebass/styled-components';
+export type { ImageProps, BoxProps, FlexProps } from 'rebass/styled-components';
 export { Input, Label, Textarea, Select } from '@rebass/forms/styled-components';
 
 export * from './TxQueue';

packages/signer/src/app/index.tsx

@@ -10,20 +10,6 @@
  * more about security risks here:
  *
  * https://electronjs.org/docs/tutorial/security
- *
- * To enable Node.js integration in this file, open up `main.js` and enable the `nodeIntegration`
- * flag:
- *
- * ```
- *  // Create the browser window.
- *  mainWindow = new BrowserWindow({
- *    width: 800,
- *    height: 600,
- *    webPreferences: {
- *      nodeIntegration: true
- *    }
- *  });
- * ```
  */
 
 import { ConnectedRouter } from 'connected-react-router';

packages/signer/src/types/index.ts

@@ -1,5 +1,5 @@
-export { Route } from './route';
-export { SignTransactionProps } from './transactionProps';
+export type { Route } from './route';
+export type { SignTransactionProps } from './transactionProps';
 export * from './chain';
 export * from './dpath';
 export * from './passwords';

packages/signer/webpack/renderer.js

@@ -2,6 +2,7 @@ const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const { v4 } = require('uuid');
+const { ProvidePlugin } = require('webpack');
 const { merge } = require('webpack-merge');
 
 const common = require('./common');
@@ -64,6 +65,10 @@ module.exports = merge(common, {
     ]
   },
   plugins: [
+    // @todo This doesn't currently work
+    new ProvidePlugin({
+      Buffer: ['buffer', 'Buffer']
+    }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, '../src/app/index.html'),
       inject: false,
@@ -84,9 +89,13 @@ module.exports = merge(common, {
       'react-dom': '@hot-loader/react-dom'
     },
     extensions: ['.jsx', '.tsx', '.css'],
-    mainFields: ['browser', 'module', 'main']
-  },
-  node: {
-    fs: 'empty'
+    mainFields: ['browser', 'module', 'main'],
+    fallback: {
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      path: false,
+      os: false,
+      fs: false
+    }
   }
 });