Replace react-scripts with custom webpack config

stellar · Dec 11, 2023 · ee7095d · ee7095d
1 parent 017d583
commit ee7095d
Show file tree

Hide file tree

Showing 55 changed files with 4,447 additions and 8,703 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,6 @@
+babel.config.js
+webpack.common.js
+webpack.dev.js
+webpack.prod.js
+.eslintrc.js
+prettier.config.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ["@stellar/eslint-config"],
+  extends: ["@stellar/eslint-config", "plugin:import/typescript"],
   rules: {
     "no-console": "off",
     "import/no-unresolved": "off",
@@ -68,5 +68,7 @@ module.exports = {
     "no-alert": "off",
     "react/sort-comp": "off",
     "valid-jsdoc": "off",
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/no-unnecessary-type-constraint": "off",
   },
 };
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,22 @@
+module.exports = {
+  presets: [
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          browsers: "last 2 versions",
+        },
+        modules: false,
+        loose: false,
+      },
+    ],
+  ],
+  plugins: ["transform-class-properties", "react-hot-loader/babel"],
+  env: {
+    test: {
+      plugins: ["transform-es2015-modules-commonjs"],
+    },
+  },
+};
diff --git a/package.json b/package.json
@@ -6,9 +6,8 @@
   "author": "Stellar Development Foundation <[email protected]>",
   "license": "Apache-2.0",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
+    "start": "webpack serve --open --config webpack.dev.js",
+    "build": "NODE_ENV=production webpack --config webpack.prod.js",
     "build:netlify": "yarn build; mkdir out; mkdir out/laboratory; mv build/* out/laboratory; cp _redirects out/_redirects",
     "test": "mocha './test/**/*.js'",
     "test:jest": "jest",
@@ -42,39 +41,51 @@
     "@stellar/tsconfig": "^1.0.2",
     "@trezor/connect-plugin-stellar": "^9.0.2",
     "@trezor/connect-web": "^9.1.5",
+    "assert": "^2.0.0",
     "axios": "^0.25.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "browser-sync": "^2.27.7",
+    "buffer": "^6.0.3",
     "chai": "^4.3.6",
     "classnames": "^2.2.0",
+    "crypto-browserify": "^3.12.0",
     "dompurify": "^2.3.5",
     "html-react-parser": "^1.4.8",
+    "https-browserify": "^1.0.0",
     "json-loader": "^0.5.7",
     "lodash": "^4.17.5",
     "mocha": "^9.2.0",
     "msw": "^0.36.8",
+    "os-browserify": "^0.3.0",
     "prettier": "^2.5.1",
     "prop-types": "^15.8.1",
+    "querystring-es3": "^0.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hot-loader": "^4.13.1",
     "react-loadable": "^5.5.0",
     "react-redux": "^7.2.6",
-    "react-scripts": "^4.0.3",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
     "regenerator-runtime": "^0.13.9",
     "route-recognizer": "^0.3.4",
     "solar-stellarorg": "git+https://github.com/stellar/solar-stellarorg#master",
     "soroban-client": "^1.0.0-beta.2",
     "stellar-sdk": "^11.0.0-beta.4",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "typescript": "^4.5.5",
     "uri-templates": "^0.2.0",
-    "urijs": "^1.16.0"
+    "urijs": "^1.16.0",
+    "url": "^0.11.1"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
     "@babel/preset-flow": "^7.16.7",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@stellar/eslint-config": "^2.1.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
@@ -88,14 +99,31 @@
     "@types/react-loadable": "^5.5.6",
     "@types/react-redux": "^7.1.22",
     "@types/uri-templates": "^0.1.31",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "babel-loader": "^9.1.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
     "eslint": "^7.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react": "^1.1.7",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-jsdoc": "^36.0.6",
     "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-webpack-plugin": "^4.0.1",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "html-webpack-plugin": "^5.5.3",
     "jest-fetch-mock": "^3.0.3",
-    "sass": "^1.49.7"
+    "mini-css-extract-plugin": "^2.7.6",
+    "node-sass": "^9.0.0",
+    "sass": "^1.49.7",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.3",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "webpack": "^5.88.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }
diff --git a/src/actions/xdrViewer.js b/src/actions/xdrViewer.js
@@ -1,7 +1,7 @@
 import * as StellarSdk from "stellar-sdk";
 import * as SorobanSdk from "soroban-client";
 import axios from "axios";
-import { FETCH_SEQUENCE_FAIL } from "actions/transactionBuilder";
+import { FETCH_SEQUENCE_FAIL } from "actions/transactionBuilder.js";
 import { SIGNATURE } from "../constants/signature";
 import { FETCHED_SIGNERS } from "../constants/fetched_signers";
 import convertMuxedAccountToEd25519Account from "../helpers/convertMuxedAccountToEd25519Account";

diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
@@ -1,6 +1,6 @@
 import Prism from "helpers/prism.js";
-import jsonLinkHighlighter from "helpers/prism-jsonLinkHighlighter";
-import scrollOnAnchorOpen from "helpers/scrollOnAnchorOpen";
+import jsonLinkHighlighter from "helpers/prism-jsonLinkHighlighter.js";
+import scrollOnAnchorOpen from "helpers/scrollOnAnchorOpen.js";
 import { sanitizeHtml } from "helpers/sanitizeHtml";
 
 interface CodeBlockProps {

diff --git a/src/components/EndpointPicker.tsx b/src/components/EndpointPicker.tsx
@@ -1,6 +1,6 @@
 import { findIndex } from "lodash";
 import { endpointsMap } from "data/endpoints";
-import { EndpointItemProps, EndpointItemEndpoint } from "types/types.d";
+import { EndpointItemProps, EndpointItemEndpoint } from "types/types";
 
 interface EndpointPickerProps {
   onChange: (resource: string, endpoint: string) => void;

diff --git a/src/components/EndpointSetup.tsx b/src/components/EndpointSetup.tsx
@@ -1,10 +1,10 @@
-import HelpMark from "components/HelpMark";
+import HelpMark from "components/HelpMark.js";
 import { EasySelect } from "components/EasySelect";
 import {
   EndpointBuildRequest,
   EndpointItemEndpoint,
   RequestMethod,
-} from "types/types.d";
+} from "types/types";
 
 interface EndpointSetupProps {
   onSubmit: () => void;

diff --git a/src/components/FormComponents/AssetPicker.js b/src/components/FormComponents/AssetPicker.js
@@ -1,10 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import assign from "lodash/assign";
-import RadioButtonPicker from "components/FormComponents/RadioButtonPicker";
+import RadioButtonPicker from "components/FormComponents/RadioButtonPicker.js";
 import PubKeyPicker from "components/FormComponents/PubKeyPicker";
-import PickerError from "components/FormComponents/PickerError";
-import TextPicker from "components/FormComponents/TextPicker";
+import PickerError from "components/FormComponents/PickerError.js";
+import TextPicker from "components/FormComponents/TextPicker.js";
 import { LiquidityPoolAssetPicker } from "components/FormComponents/LiquidityPoolAssetPicker";
 
 // Value is a string containing the currently selected id (or undefined)

diff --git a/src/components/FormComponents/LiquidityPoolAssetPicker.tsx b/src/components/FormComponents/LiquidityPoolAssetPicker.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
-import AssetPicker from "components/FormComponents/AssetPicker";
-import PositiveNumberPicker from "components/FormComponents/PositiveNumberPicker";
-import { AssetWithType, AnyObject } from "types/types.d";
+import AssetPicker from "components/FormComponents/AssetPicker.js";
+import PositiveNumberPicker from "components/FormComponents/PositiveNumberPicker.js";
+import { AssetWithType, AnyObject } from "types/types";
 
 interface LiquidityPoolValue {
   assetA: AssetWithType;

diff --git a/src/components/FormComponents/LiquidityPoolId.tsx b/src/components/FormComponents/LiquidityPoolId.tsx
@@ -1,4 +1,4 @@
-import TextPicker from "components/FormComponents/TextPicker";
+import TextPicker from "components/FormComponents/TextPicker.js";
 
 interface LiquidityPoolIdProps {
   value: string;

diff --git a/src/components/FormComponents/MuxedKeyPicker.tsx b/src/components/FormComponents/MuxedKeyPicker.tsx
@@ -1,8 +1,8 @@
 import { StrKey } from "stellar-sdk";
 
-import TextPicker from "components/FormComponents/TextPicker";
-import { ImportMark } from "components/ImportMark";
-import { useFreighter, freighterGetPublicKey } from "helpers/useFreighter";
+import TextPicker from "components/FormComponents/TextPicker.js";
+import { ImportMark } from "components/ImportMark.js";
+import { useFreighter, freighterGetPublicKey } from "helpers/useFreighter.js";
 
 interface MuxedKeyPickerProps {
   [key: string]: any;

diff --git a/src/components/FormComponents/NumberFractionPicker.tsx b/src/components/FormComponents/NumberFractionPicker.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import RadioButtonPicker from "components/FormComponents/RadioButtonPicker";
-import AmountPicker from "components/FormComponents/AmountPicker";
-import { NumberFractionValue } from "types/types.d";
+import RadioButtonPicker from "components/FormComponents/RadioButtonPicker.js";
+import AmountPicker from "components/FormComponents/AmountPicker.js";
+import { NumberFractionValue } from "types/types";
 
 enum NumberType {
   NUMBER = "NUMBER",

diff --git a/src/components/FormComponents/OperationTypePicker.tsx b/src/components/FormComponents/OperationTypePicker.tsx
@@ -1,5 +1,5 @@
 import each from "lodash/each";
-import { operationsMap } from "../../data/operations.js";
+import { operationsMap } from "../../data/operations";
 import { SelectPicker } from "./SelectPicker";
 
 let operationItemMap: Record<string, string> = {};

diff --git a/src/components/FormComponents/PubKeyPicker.tsx b/src/components/FormComponents/PubKeyPicker.tsx
@@ -1,8 +1,8 @@
 import { StrKey } from "stellar-sdk";
 
-import TextPicker from "components/FormComponents/TextPicker";
-import { ImportMark } from "components/ImportMark";
-import { useFreighter, freighterGetPublicKey } from "helpers/useFreighter";
+import TextPicker from "components/FormComponents/TextPicker.js";
+import { ImportMark } from "components/ImportMark.js";
+import { useFreighter, freighterGetPublicKey } from "helpers/useFreighter.js";
 
 interface PubKeyPickerProps {
   [key: string]: any;

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import NetworkPicker from "views/NetworkPicker";
+import NetworkPicker from "views/NetworkPicker.js";
 
 export const Header = () => (
   <div className="so-back" data-testid="page-header">

diff --git a/src/components/MaintenanceBanner.tsx b/src/components/MaintenanceBanner.tsx
@@ -3,7 +3,7 @@ import { fetchMaintenanceData } from "helpers/fetchMaintenanceData";
 import { isMaintenanceRelevant } from "helpers/isMaintenanceRelevant";
 import { sanitizeHtml } from "helpers/sanitizeHtml";
 import { useRedux } from "hooks/useRedux";
-import { Network, StatusPageScheduled } from "types/types.d";
+import { Network, StatusPageScheduled } from "types/types";
 
 const sortMaintenanceSchedule = (schedule: StatusPageScheduled[]) =>
   schedule.sort(

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -1,4 +1,4 @@
-import SLUG from "constants/slug";
+import SLUG from "constants/slug.js";
 import { useRedux } from "hooks/useRedux";
 
 const navItems = [

diff --git a/src/components/OperationPanes/LiquidityPoolDeposit.tsx b/src/components/OperationPanes/LiquidityPoolDeposit.tsx
@@ -1,8 +1,8 @@
-import OptionsTablePair from "components/OptionsTable/Pair";
-import TextPicker from "components/FormComponents/TextPicker";
-import AmountPicker from "components/FormComponents/AmountPicker";
+import OptionsTablePair from "components/OptionsTable/Pair.js";
+import TextPicker from "components/FormComponents/TextPicker.js";
+import AmountPicker from "components/FormComponents/AmountPicker.js";
 import { NumberFractionPicker } from "components/FormComponents/NumberFractionPicker";
-import { NumberFractionValue } from "types/types.d";
+import { NumberFractionValue } from "types/types";
 
 interface LiquidityPoolDepositProps {
   values: {

diff --git a/src/components/SetupPanes/AllLiquidityPools.tsx b/src/components/SetupPanes/AllLiquidityPools.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from "react";
-import All from "components/SetupPanes/All";
-import OptionsTablePair from "components/OptionsTable/Pair";
-import AssetPicker from "components/FormComponents/AssetPicker";
-import ManualMultiPicker from "components/FormComponents/ManualMultiPicker";
-import { AssetWithType } from "types/types.d";
+import All from "components/SetupPanes/All.js";
+import OptionsTablePair from "components/OptionsTable/Pair.js";
+import AssetPicker from "components/FormComponents/AssetPicker.js";
+import ManualMultiPicker from "components/FormComponents/ManualMultiPicker.js";
+import { AssetWithType } from "types/types";
 
 const NATIVE_TYPE = "native";
 

diff --git a/src/components/SetupPanes/ForLiquidityPool.tsx b/src/components/SetupPanes/ForLiquidityPool.tsx
@@ -1,6 +1,6 @@
-import For from "components/SetupPanes/For";
+import For from "components/SetupPanes/For.js";
 import { LiquidityPoolId } from "components/FormComponents/LiquidityPoolId";
-import { AnyObject } from "types/types.d";
+import { AnyObject } from "types/types";
 
 interface ForLiquidityPoolProps {
   values: AnyObject;

diff --git a/src/components/SetupPanes/ForLiquidityPoolWithFailed.tsx b/src/components/SetupPanes/ForLiquidityPoolWithFailed.tsx
@@ -1,7 +1,7 @@
-import OptionsTablePair from "components/OptionsTable/Pair";
+import OptionsTablePair from "components/OptionsTable/Pair.js";
 import { ForLiquidityPool } from "components/SetupPanes/ForLiquidityPool";
-import BooleanPicker from "components/FormComponents/BooleanPicker";
-import { AnyObject } from "types/types.d";
+import BooleanPicker from "components/FormComponents/BooleanPicker.js";
+import { AnyObject } from "types/types";
 
 interface ForLiquidityPoolWithFailedProps {
   values: AnyObject;

diff --git a/src/components/SetupPanes/SingleLiquidityPool.tsx b/src/components/SetupPanes/SingleLiquidityPool.tsx
@@ -1,6 +1,6 @@
-import OptionsTablePair from "components/OptionsTable/Pair";
+import OptionsTablePair from "components/OptionsTable/Pair.js";
 import { LiquidityPoolId } from "components/FormComponents/LiquidityPoolId";
-import { AnyObject } from "types/types.d";
+import { AnyObject } from "types/types";
 
 interface SingleLiquidityPoolProps {
   values: AnyObject;

diff --git a/src/components/SorobanBanner.tsx b/src/components/SorobanBanner.tsx
@@ -1,27 +1,21 @@
-import React from "react";
-import { useRedux } from "hooks/useRedux";
 import { useIsSoroban } from "hooks/useIsSoroban";
 
 export const SorobanBanner = () => {
-  const { routing } = useRedux("routing");
-
   let isSoroban = useIsSoroban();
 
-  return (
-    isSoroban && (
-      <div className="LaboratoryChrome__soroban_alert s-alert">
-        <div className="so-chunk">
-          You are connected to the{" "}
-          <a
-            href="https://soroban.stellar.org/docs/"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Soroban
-          </a>{" "}
-          test network
-        </div>
+  return isSoroban ? (
+    <div className="LaboratoryChrome__soroban_alert s-alert">
+      <div className="so-chunk">
+        You are connected to the{" "}
+        <a
+          href="https://soroban.stellar.org/docs/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Soroban
+        </a>{" "}
+        test network
       </div>
-    )
-  );
+    </div>
+  ) : null;
 };