feat: remove redux devtools from final bundle

Dockerfile

@@ -3,7 +3,7 @@ LABEL maintainer="ux@blockstack.com"
 
 ARG NODE_VERSION=12
 ENV MINIFY_PRODUCTION_BUILD=true
-ENV EXT_ENV="prod"
+ENV WALLET_ENVIRONMENT="production"
 ENV NODE_VERSION=${NODE_VERSION}
 WORKDIR /src
 

package.json

@@ -5,17 +5,17 @@
   "version": "6.1.0",
   "author": "Hiro Systems PBC",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development concurrently --raw \"node webpack/dev-server.js\" \"redux-devtools --hostname=localhost --port=8000\"",
+    "dev": "cross-env WALLET_ENVIRONMENT=development concurrently --raw \"node webpack/dev-server.js\" \"redux-devtools --hostname=localhost --port=8000\"",
     "dev:test-app": "webpack serve --config test-app/webpack/webpack.config.dev.js",
-    "build": "cross-env NODE_ENV=production EXT_ENV=prod webpack --config webpack/webpack.config.prod.js",
-    "build:analyze": "cross-env ANALYZE=true NODE_ENV=production EXT_ENV=prod webpack --config webpack/webpack.config.prod.js",
-    "build:dev": "cross-env NODE_ENV=development EXT_ENV=development webpack --config webpack/webpack.config.dev.js",
-    "build:ext:test": "cross-env NODE_ENV=production TEST_ENV=true EXT_ENV=prod webpack --config webpack/webpack.config.prod.js",
-    "build:ext:test:watch": "cross-env NODE_ENV=production TEST_ENV=true EXT_ENV=prod webpack --config webpack/webpack.config.prod.js --watch",
-    "build:test-app": "cross-env NODE_ENV=production EXT_ENV=prod webpack --config ./test-app/webpack/webpack.config.prod.js",
+    "build": "cross-env WALLET_ENVIRONMENT=production webpack --config webpack/webpack.config.prod.js",
+    "build:analyze": "cross-env ANALYZE=true WALLET_ENVIRONMENT=production webpack --config webpack/webpack.config.prod.js",
+    "build:dev": "cross-env WALLET_ENVIRONMENT=development webpack --config webpack/webpack.config.dev.js",
+    "build:ext:test": "cross-env WALLET_ENVIRONMENT=production TEST_ENV=true webpack --config webpack/webpack.config.prod.js",
+    "build:ext:test:watch": "cross-env WALLET_ENVIRONMENT=production TEST_ENV=true webpack --config webpack/webpack.config.prod.js --watch",
+    "build:test-app": "cross-env WALLET_ENVIRONMENT=production webpack --config ./test-app/webpack/webpack.config.prod.js",
     "build:test": "concurrently 'yarn build:ext:test' 'yarn build:test-app'",
     "build:test-api": "concurrently 'yarn build:ext:test' 'yarn build:test-app'",
-    "build:test:watch": "cross-env NODE_ENV=test EXT_ENV=watch webpack --config webpack/webpack.config.prod.js",
+    "build:test:watch": "cross-env WALLET_ENVIRONMENT=testing webpack --config webpack/webpack.config.prod.js",
     "clean": "rm -rf ./dist",
     "clean:all": "rm -rf ./dist && rm -rf ./coverage && rm -rf ./node_modules",
     "lint": "concurrently -g 'yarn lint:prettier' 'yarn lint:unused-exports' 'yarn lint:deps' 'yarn lint:remote-wallet-config' 'yarn lint:eslint' 'yarn lint:filename'",
@@ -28,15 +28,15 @@
     "lint:remote-wallet-config": "npx ajv-cli validate -s config/wallet-config.schema.json -d config/wallet-config.json",
     "lint:deps": "dependency-cruise  --config .dependency-cruiser.js \"src/**/*.{ts,tsx}\"",
     "prod:ext": "yarn build",
-    "prod:analyze": "cross-env NODE_ENV=production ANALYZE=true webpack -p",
+    "prod:analyze": "cross-env WALLET_ENVIRONMENT=production ANALYZE=true webpack -p",
     "test:integration": "jest --config=./jest.integration.config.js --verbose=true --runInBand --testPathPattern=./tests-legacy/integration/*",
     "test:integration:ci": "jest --config=./jest.integration.config.js --testPathPattern=./tests-legacy/integration/*",
     "test:integration-api": "jest --config=./jest.integration.config.js --verbose=true --runInBand --testPathPattern=./tests-legacy/test-api/*",
     "test:integration-api:ci": "jest --config=./jest.integration.config.js --testPathPattern=./tests-legacy/test-api/*",
     "test:unit": "vitest run",
-    "test": "NODE_ENV=test jest --verbose=true",
-    "test:coverage": "NODE_ENV=test jest --collect-coverage",
-    "test:watch": "NODE_ENV=test jest --watch",
+    "test": "WALLET_ENVIRONMENT=testing jest --verbose=true",
+    "test:coverage": "WALLET_ENVIRONMENT=testing jest --collect-coverage",
+    "test:watch": "WALLET_ENVIRONMENT=testing jest --watch",
     "typecheck": "tsc --noEmit"
   },
   "license": "MIT",

scripts/generate-manifest.js

@@ -3,9 +3,9 @@
  */
 const deepMerge = require('deepmerge');
 
-const IS_DEV = process.env.NODE_ENV === 'development';
+const IS_DEV = process.env.WALLET_ENVIRONMENT === 'development';
 
-const NODE_ENV = process.env.NODE_ENV ?? 'development';
+const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT ?? 'development';
 
 const PREVIEW_RELEASE = process.env.PREVIEW_RELEASE;
 
@@ -78,13 +78,13 @@ const manifest = {
   },
   host_permissions: ['*://*/*'],
   content_security_policy: {
-    extension_pages: contentSecurityPolicyEnvironment[NODE_ENV],
+    extension_pages: contentSecurityPolicyEnvironment[WALLET_ENVIRONMENT],
   },
   web_accessible_resources: [{ resources: ['inpage.js'], matches: ['*://*/*'] }],
   action: {
     default_title: 'Stacks',
     default_popup: 'popup.html',
-    default_icon: defaultIconEnvironment[NODE_ENV],
+    default_icon: defaultIconEnvironment[WALLET_ENVIRONMENT],
   },
   options_ui: {
     page: 'index.html',
@@ -128,7 +128,7 @@ function generateManifest(packageVersion) {
     manifest,
     releaseEnvironmentConfig,
     browserConfig,
-    environmentIcons[NODE_ENV],
+    environmentIcons[WALLET_ENVIRONMENT],
   ]);
 }
 

src/app/store/index.ts

@@ -15,7 +15,6 @@ import {
 } from 'redux-persist';
 import { PersistPartial } from 'redux-persist/es/persistReducer';
 
-import { IS_DEV_ENV } from '@shared/environment';
 import { persistConfig } from '@shared/storage/redux-pesist';
 
 import { analyticsSlice } from './analytics/analytics.slice';
@@ -84,16 +83,17 @@ export const store = configureStore({
     }),
     broadcastActionTypeToOtherFramesMiddleware,
   ],
-  enhancers: IS_DEV_ENV
-    ? [
-        devToolsEnhancer({
-          hostname: 'localhost',
-          port: 8000,
-          realtime: true,
-          suppressConnectErrors: false,
-        }),
-      ]
-    : undefined,
+  enhancers:
+    process.env.WALLET_ENVIRONMENT === 'development'
+      ? [
+          devToolsEnhancer({
+            hostname: 'localhost',
+            port: 8000,
+            realtime: true,
+            suppressConnectErrors: false,
+          }),
+        ]
+      : undefined,
 });
 
 export const persistor = persistStore(store);

src/shared/models/global-types.ts

@@ -6,7 +6,6 @@ declare module '*.svg' {
   export default src;
 }
 
-declare const EXT_ENV: string;
 declare const VERSION: string;
 
 interface QrOptions {

test-app/webpack/webpack.config.base.js

@@ -37,13 +37,12 @@ const BRANCH = getBranch();
 
 const SRC_ROOT_PATH = path.join(__dirname, '../', 'src');
 const DIST_ROOT_PATH = path.join(__dirname, '../', 'dist');
-const NODE_ENV = process.env.NODE_ENV || 'development';
+const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT || 'development';
 const WEB_BROWSER = process.env.WEB_BROWSER ? process.env.WEB_BROWSER : 'chrome';
-const IS_DEV = NODE_ENV === 'development';
+const IS_DEV = WALLET_ENVIRONMENT === 'development';
 const IS_PROD = !IS_DEV;
 
 const ANALYZE_BUNDLE = process.env.ANALYZE === 'true';
-const EXT_ENV = process.env.EXT_ENV || 'web';
 
 const speedMeasurePlugin = new SpeedMeasurePlugin({
   disable: !ANALYZE_BUNDLE,
@@ -90,7 +89,7 @@ const config = {
     path: DIST_ROOT_PATH,
     chunkFilename: !IS_DEV ? '[name].[contenthash:8].chunk.js' : IS_DEV && '[name].chunk.js',
     filename: () => {
-      if (EXT_ENV === 'prod' || IS_DEV) {
+      if (WALLET_ENVIRONMENT === 'production' || IS_DEV) {
         return '[name].js';
       }
       return '[name].[contenthash:8].js';
@@ -172,7 +171,7 @@ const config = {
       ],
     }),
     new webpack.DefinePlugin({
-      NODE_ENV: JSON.stringify(NODE_ENV),
+      WALLET_ENVIRONMENT: JSON.stringify(WALLET_ENVIRONMENT),
       WEB_BROWSER: JSON.stringify(WEB_BROWSER),
       VERSION: JSON.stringify(VERSION),
       COMMIT_SHA: JSON.stringify(COMMIT_SHA),

test-app/webpack/webpack.config.prod.js

@@ -7,7 +7,7 @@ config.optimization = {
   ...config.optimization,
   flagIncludedChunks: false,
   concatenateModules: false,
-  minimize: process.env.NODE_ENV !== 'test',
+  minimize: process.env.WALLET_ENVIRONMENT !== 'testing',
   moduleIds: 'deterministic',
   splitChunks: {
     hidePathInfo: false,

webpack/dev-server.js

@@ -3,7 +3,7 @@ const WebpackDevServer = require('webpack-dev-server');
 const webpack = require('webpack');
 const path = require('path');
 
-const NODE_ENV = process.env.NODE_ENV;
+const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT;
 
 const HOST = 'localhost';
 const PORT = process.env.PORT || '8080';
@@ -53,7 +53,7 @@ const server = new WebpackDevServer(
   compiler
 );
 
-if (NODE_ENV === 'development' && module.hot) {
+if (WALLET_ENVIRONMENT === 'development' && module.hot) {
   module.hot.accept();
 }
 

webpack/webpack.config.base.js

@@ -17,12 +17,12 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const SRC_ROOT_PATH = path.join(__dirname, '../', 'src');
 const DIST_ROOT_PATH = path.join(__dirname, '../', 'dist');
 
-const NODE_ENV = process.env.NODE_ENV || 'development';
+const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT || 'development';
 const ANALYZE_BUNDLE = process.env.ANALYZE === 'true';
 const IS_PUBLISHING = !!process.env.IS_PUBLISHING;
 const BRANCH = process.env.GITHUB_REF;
 
-const IS_DEV = NODE_ENV === 'development';
+const IS_DEV = WALLET_ENVIRONMENT === 'development';
 const IS_PROD = !IS_DEV;
 const MAIN_BRANCH = 'refs/heads/main';