Revert "Replace CRA with Webpack + Node 18 (stellar#320)" (stellar#322)

This reverts commit bb6983e.
espresso-cash · Sep 5, 2023 · f4e0d8a · f4e0d8a
1 parent bb6983e
commit f4e0d8a
Show file tree

Hide file tree

Showing 75 changed files with 11,350 additions and 5,959 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.github/workflows/test-build.yml b/.github/workflows/test-build.yml
@@ -12,6 +12,6 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 14
       - run: yarn install
       - run: yarn build
diff --git a/.github/workflows/update-deps.yml b/.github/workflows/update-deps.yml
@@ -22,6 +22,6 @@ jobs:
             ```
             Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.
           pinned: false
-          close-previous: true
+          close-previous: false
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/Dockerfile-client b/Dockerfile-client
@@ -1,4 +1,4 @@
-FROM node:18 as build
+FROM node:16 as build
 
 MAINTAINER SDF Ops Team <[email protected]>
 

diff --git a/Dockerfile-server b/Dockerfile-server
@@ -1,18 +1,16 @@
-FROM node:18 as build
+FROM node:16 as build
 
 MAINTAINER SDF Ops Team <[email protected]>
 
 WORKDIR /app
 
 COPY . /app/
-
 RUN yarn workspace demo-wallet-server install
 RUN yarn build:shared
 RUN yarn build:server
 
 # Copy it all to a clean image to avoid cache artifacts elsewhere in the image
-
-FROM node:18
+FROM node:16
 COPY --from=build /app /app
 WORKDIR /app
 

diff --git a/package.json b/package.json
@@ -16,6 +16,6 @@
   "dependencies": {
     "demo-wallet-shared": "^1.0.0",
     "npm-run-all": "^4.1.5",
-    "stellar-sdk": "^10.4.1"
+    "stellar-sdk": "^10.1.1"
   }
 }
diff --git a/packages/demo-wallet-client/babel.config.js b/packages/demo-wallet-client/babel.config.js
diff --git a/packages/demo-wallet-client/package.json b/packages/demo-wallet-client/package.json
@@ -9,57 +9,51 @@
   },
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=18"
+    "node": ">=14.x"
   },
   "lint-staged": {
     "src/**/*.ts?(x)": [
       "eslint --fix --max-warnings 0"
     ]
   },
   "dependencies": {
-    "@microlink/react-json-view": "^1.22.2",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@stellar/design-system": "^0.8.1",
+    "@reduxjs/toolkit": "^1.7.2",
+    "@stellar/design-system": "^0.8.0",
     "@stellar/frontend-helpers": "^2.1.4",
     "@stellar/prettier-config": "^1.0.1",
-    "@stellar/wallet-sdk": "^0.9.1",
-    "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "assert": "^2.0.0",
-    "bignumber.js": "^9.1.1",
-    "buffer": "^6.0.3",
+    "@stellar/wallet-sdk": "^0.7.0-rc.0",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "bignumber.js": "^9.0.2",
     "crypto": "^1.0.1",
-    "crypto-browserify": "^3.12.0",
-    "dompurify": "^3.0.5",
+    "dompurify": "^2.3.5",
     "env-cmd": "^10.1.0",
     "find-config": "^1.0.0",
-    "html-react-parser": "^4.2.1",
-    "https-browserify": "^1.0.0",
+    "html-react-parser": "^1.4.8",
     "lodash": "^4.17.21",
-    "marked": "^7.0.3",
-    "node-sass": "^9.0.0",
-    "os-browserify": "^0.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.1.2",
-    "react-router-dom": "^6.15.0",
-    "redux": "^4.2.1",
-    "stellar-sdk": "^10.4.1",
-    "stream-browserify": "^3.0.0",
-    "stream-http": "^3.2.0",
-    "styled-components": "^6.0.7",
+    "marked": "^4.0.12",
+    "node-sass": "^6.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-json-view": "^1.21.3",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "4.0.3",
+    "redux": "^4.1.2",
+    "stellar-sdk": "^10.1.1",
+    "styled-components": "^5.3.3",
     "toml": "^3.0.0",
-    "tslib": "^2.6.1",
-    "typescript": "~5.1.6",
-    "url": "^0.11.1",
-    "web-vitals": "^3.4.0"
+    "tslib": "^2.3.1",
+    "typescript": "~4.5.5",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "install-if-package-changed": "git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD | grep --quiet yarn.lock && yarn install || exit 0",
-    "start": "webpack serve --open --config webpack.dev.js",
-    "build": "NODE_ENV=production webpack --config webpack.prod.js",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
     "prepare": "cd ../../ && husky install packages/demo-wallet-client/.husky",
     "pre-commit": "concurrently 'pretty-quick --staged' 'lint-staged' 'tsc --noEmit'"
   },
@@ -82,58 +76,36 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
     "@stellar/eslint-config": "^2.1.2",
     "@stellar/tsconfig": "^1.0.2",
-    "@types/jest": "^29.5.3",
-    "@types/lodash": "^4.14.197",
-    "@types/marked": "^5.0.1",
-    "@types/node": "^20.5.0",
-    "@types/react": "^18.2.20",
-    "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-redux": "^7.1.25",
+    "@types/jest": "^27.4.0",
+    "@types/lodash": "^4.14.178",
+    "@types/marked": "^4.0.2",
+    "@types/node": "^16.10.3",
+    "@types/react": "^17.0.39",
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-redux": "^7.1.22",
     "@types/react-router-dom": "^5.3.3",
     "@types/redux": "^3.6.0",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
-    "@typescript-eslint/parser": "^6.4.0",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "clean-webpack-plugin": "^4.0.0",
-    "concurrently": "^8.2.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.47.0",
-    "eslint-config-prettier": "^9.0.0",
+    "@types/styled-components": "^5.1.22",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "concurrently": "^7.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-react": "^1.1.7",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jsdoc": "^46.4.6",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^6.1.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsdoc": "^36.1.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-react": "^7.33.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-webpack-plugin": "^4.0.1",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "html-webpack-plugin": "^5.5.3",
-    "husky": "^8.0.3",
-    "lint-staged": "^14.0.0",
-    "mini-css-extract-plugin": "^2.7.6",
-    "prettier": "^3.0.2",
-    "pretty-quick": "^3.1.3",
-    "react-hot-loader": "^4.13.1",
-    "sass-loader": "^13.3.2",
-    "style-loader": "^3.3.3",
-    "ts-loader": "^9.4.4",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.3",
+    "prettier": "^2.5.1",
+    "pretty-quick": "^3.1.3"
   }
 }
diff --git a/packages/demo-wallet-client/src/index.html → ...ages/demo-wallet-client/public/index.html b/packages/demo-wallet-client/src/index.html → ...ages/demo-wallet-client/public/index.html
@@ -2,15 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Demo Wallet - Stellar</title>
-    <script src="/settings/env-config.js"></script>
+    <script src="%PUBLIC_URL%/settings/env-config.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/packages/demo-wallet-client/src/App.scss b/packages/demo-wallet-client/src/App.scss
@@ -1,6 +1,3 @@
-// Import global CSS from Stellar Design System
-@import "@stellar/design-system/build/styles.min.css";
-
 #root {
   --layout-window-width-min: 800px;
   --layout-window-width-max: 1296px;

diff --git a/packages/demo-wallet-client/src/App.tsx b/packages/demo-wallet-client/src/App.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes as RouterRoutes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { Provider } from "react-redux";
 import { Layout, TextLink } from "@stellar/design-system";
 import { errorReporting } from "@stellar/frontend-helpers";
@@ -43,7 +43,7 @@ errorReporting.reportErrors({
 
 export const App = () => (
   <Provider store={store}>
-    <BrowserRouter>
+    <Router>
       <SettingsHandler>
         <WarningBanner />
 
@@ -80,7 +80,7 @@ export const App = () => (
                   </p>
                 </Layout.Inset>
 
-                <RouterRoutes>
+                <Routes>
                   <Route path="/" element={<Landing />} />
 
                   <Route
@@ -92,8 +92,8 @@ export const App = () => (
                     }
                   />
 
-                  <Route element={<NotFound />} />
-                </RouterRoutes>
+                  <Route element={NotFound} />
+                </Routes>
               </Layout.Content>
 
               <Footer />
@@ -103,6 +103,6 @@ export const App = () => (
           <Logs />
         </div>
       </SettingsHandler>
-    </BrowserRouter>
+    </Router>
   </Provider>
 );
diff --git a/packages/demo-wallet-client/src/components/AccountInfo.tsx b/packages/demo-wallet-client/src/components/AccountInfo.tsx
@@ -17,14 +17,13 @@ import { fetchClaimableBalancesAction } from "ducks/claimableBalances";
 
 import { shortenStellarKey } from "demo-wallet-shared/build/helpers/shortenStellarKey";
 import { useRedux } from "hooks/useRedux";
-import { AppDispatch } from "config/store";
-import { ActionStatus } from "types/types";
+import { ActionStatus } from "types/types.d";
 
 export const AccountInfo = () => {
   const { account } = useRedux("account");
   const [isAccountDetailsVisible, setIsAccountDetailsVisible] = useState(false);
 
-  const dispatch: AppDispatch = useDispatch();
+  const dispatch = useDispatch();
 
   const handleRefreshAccount = useCallback(() => {
     if (account.data?.id) {

diff --git a/packages/demo-wallet-client/src/components/AddAsset.tsx b/packages/demo-wallet-client/src/components/AddAsset.tsx
@@ -14,7 +14,7 @@ import { getValidatedUntrustedAsset } from "demo-wallet-shared/build/helpers/get
 import { searchParam } from "demo-wallet-shared/build/helpers/searchParam";
 import { log } from "demo-wallet-shared/build/helpers/log";
 import { useRedux } from "hooks/useRedux";
-import { ActionStatus, SearchParams } from "types/types";
+import { ActionStatus, SearchParams } from "types/types.d";
 
 export const AddAsset = ({ onClose }: { onClose: () => void }) => {
   const { account, untrustedAssets } = useRedux("account", "untrustedAssets");

diff --git a/packages/demo-wallet-client/src/components/AddPresetAsset.tsx b/packages/demo-wallet-client/src/components/AddPresetAsset.tsx
@@ -14,7 +14,7 @@ import { getValidatedUntrustedAsset } from "demo-wallet-shared/build/helpers/get
 import { log } from "demo-wallet-shared/build/helpers/log";
 import { searchParam } from "demo-wallet-shared/build/helpers/searchParam";
 import { useRedux } from "hooks/useRedux";
-import { ActionStatus, presetAsset, SearchParams } from "types/types";
+import { ActionStatus, presetAsset, SearchParams } from "types/types.d";
 import { shortenStellarKey } from "demo-wallet-shared/build/helpers/shortenStellarKey";
 
 export const AddPresetAsset = ({ onClose }: { onClose: () => void }) => {

diff --git a/packages/demo-wallet-client/src/components/AnchorQuotesModal.tsx b/packages/demo-wallet-client/src/components/AnchorQuotesModal.tsx
@@ -8,8 +8,7 @@ import {
   fetchSep38QuotesPricesAction,
   postSep38QuoteAction,
 } from "ducks/sep38Quotes";
-import { AppDispatch } from "config/store";
-import { ActionStatus } from "types/types";
+import { ActionStatus } from "types/types.d";
 
 interface AnchorQuotesModalProps {
   token: string;
@@ -42,7 +41,7 @@ export const AnchorQuotesModal = ({
   const [assetCountryCode, setAssetCountryCode] = useState<string>();
   const [assetPrice, setAssetPrice] = useState<string>();
 
-  const dispatch: AppDispatch = useDispatch();
+  const dispatch = useDispatch();
 
   const calculateTotal = (amount: string | number, rate: string | number) => {
     // TODO: Do we need to use precision from asset?

diff --git a/packages/demo-wallet-client/src/components/Assets.tsx b/packages/demo-wallet-client/src/components/Assets.tsx
@@ -47,14 +47,13 @@ import { resetCustodialAction } from "ducks/custodial";
 import { getPresetAssets } from "demo-wallet-shared/build/helpers/getPresetAssets";
 import { searchParam } from "demo-wallet-shared/build/helpers/searchParam";
 import { useRedux } from "hooks/useRedux";
-import { AppDispatch } from "config/store";
 import {
   Asset,
   ActionStatus,
   AssetActionItem,
   SearchParams,
   TransactionStatus,
-} from "types/types";
+} from "types/types.d";
 
 export const Assets = ({
   onSendPayment,
@@ -94,7 +93,7 @@ export const Assets = ({
   const [activeModal, setActiveModal] = useState("");
   const [toastMessage, setToastMessage] = useState<string | React.ReactNode>();
 
-  const dispatch: AppDispatch = useDispatch();
+  const dispatch = useDispatch();
   const navigate = useNavigate();
 
   enum ModalType {