Replace react-scripts with Webpack + Node v18 + update Stellar SDK

.eslintignore

@@ -0,0 +1,6 @@
+babel.config.js
+webpack.common.js
+webpack.dev.js
+webpack.prod.js
+.eslintrc.js
+prettier.config.js

.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,8 @@ 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",
+    "jsdoc/newline-after-description": "off",
   },
 };

.nvmrc

@@ -1 +1 @@
-v16
+v18

Dockerfile

@@ -10,7 +10,7 @@ ENV DEBIAN_FRONTEND=noninteractive
 ENV INLINE_RUNTIME_CHUNK=false
 RUN apt-get update && apt-get install --no-install-recommends -y gpg curl git make ca-certificates apt-transport-https && \
     curl -sSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key|gpg --dearmor >/etc/apt/trusted.gpg.d/nodesource-key.gpg && \
-    echo "deb https://deb.nodesource.com/node_16.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && \
+    echo "deb https://deb.nodesource.com/node_18.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && \
     curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg |gpg --dearmor >/etc/apt/trusted.gpg.d/yarnpkg.gpg && \
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
     apt-get update && apt-get install -y nodejs yarn && apt-get clean

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"],
+    },
+  },
+};

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,50 @@
     "@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",
+    "stellar-sdk": "^11.0.1",
+    "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 +98,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-plugin-jsdoc": "^36.0.6",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-jsdoc": "^46.9.0",
     "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"
   }
 }

src/actions/endpointExplorer.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { CallBuilder } from "stellar-sdk/lib/call_builder";
+import { CallBuilder } from "stellar-sdk";
 import URI from "urijs";
 import dispatchInNewStack from "../helpers/dispatchInNewStack";
 

src/actions/xdrViewer.js

@@ -1,7 +1,6 @@
 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";
@@ -38,18 +37,14 @@ export function fetchLatestTx(horizonBaseUrl, networkPassphrase) {
   };
 }
 
-export function fetchSigners(
-  input,
-  horizonBaseUrl,
-  networkPassphrase,
-  isSoroban = false,
-) {
-  const sdk = isSoroban ? SorobanSdk : StellarSdk;
-
+export function fetchSigners(input, horizonBaseUrl, networkPassphrase) {
   return (dispatch) => {
     dispatch({ type: FETCHED_SIGNERS.PENDING });
     try {
-      let tx = new sdk.TransactionBuilder.fromXDR(input, networkPassphrase);
+      let tx = new StellarSdk.TransactionBuilder.fromXDR(
+        input,
+        networkPassphrase,
+      );
 
       // Extract all source accounts from transaction (base transaction, and all operations)
       let sourceAccounts = {};
@@ -58,7 +53,7 @@ export function fetchSigners(
       // inner signatures in a fee bump transaction
       let groupedSignatures = [];
 
-      if (tx instanceof sdk.FeeBumpTransaction) {
+      if (tx instanceof StellarSdk.FeeBumpTransaction) {
         sourceAccounts[
           convertMuxedAccountToEd25519Account(tx.feeSource)
         ] = true;
@@ -117,12 +112,16 @@ export function fetchSigners(
                 // tx hash in signatures array, so we can ignore pre-authorized transactions here.
                 switch (signer.type) {
                   case "sha256_hash":
-                    const hashXSigner = sdk.StrKey.decodeSha256Hash(signer.key);
-                    const hashXSignature = sdk.hash(sigObj.sig);
+                    const hashXSigner = StellarSdk.StrKey.decodeSha256Hash(
+                      signer.key,
+                    );
+                    const hashXSignature = StellarSdk.hash(sigObj.sig);
                     isValid = hashXSigner.equals(hashXSignature);
                     break;
                   case "ed25519_public_key":
-                    const keypair = sdk.Keypair.fromPublicKey(signer.key);
+                    const keypair = StellarSdk.Keypair.fromPublicKey(
+                      signer.key,
+                    );
                     isValid = keypair.verify(txHash, sigObj.sig);
                     break;
                 }

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 {

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;

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;

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)

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;

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;

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;

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",

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> = {};

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;

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

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(

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 = [

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

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

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;