Performance imrovements: webpack config(added chunks), code refactor

.babelrc.cjs

@@ -1,4 +1,20 @@
 module.exports = {
-  plugins: ["styled-jsx/babel"],
+  compact: true,
+  plugins: [
+    "styled-jsx/babel",
+    "@babel/plugin-syntax-dynamic-import",
+    [
+      "babel-plugin-styled-components",
+      {
+        minify: true,
+        transpileTemplateLiterals: false,
+      },
+    ],
+  ],
   presets: ["@babel/preset-typescript", "@babel/react"],
-};
+  env: {
+    production: {
+      plugins: ["transform-remove-console"],
+    },
+  },
+}

.env.defaults

@@ -30,5 +30,5 @@ XP_HOSTING_BASE_URL="" # TBD
 SEASON_LENGTH_IN_WEEKS=8
 CONTRACT_DEPLOYMENT_BLOCK_NUMBER=553443
 SEASON_START_DATE="2023-10-26"
-SKIP_REACT_STRICT_MODE="false"
-SHOW_WAITLIST="true"
+REACT_STRICT_MODE="true"
+SHOW_WAITLIST="true"

.eslintrc.cjs

@@ -1,6 +1,7 @@
 module.exports = {
   root: true,
   extends: ["@thesis-co"],
+  plugins: ["unused-imports"],
   settings: {
     "import/core-modules": ["styled-jsx/css"],
     "import/resolver": {
@@ -25,6 +26,16 @@ module.exports = {
         ignore: ["jsx", "global"],
       },
     ],
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        vars: "all",
+        varsIgnorePattern: "^_",
+        args: "after-used",
+        argsIgnorePattern: "^_",
+      },
+    ],
   },
   ignorePatterns: ["dist", "typechain"],
 }

package.json

@@ -21,66 +21,67 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@rocicorp/rails": "^0.8.0",
     "@rocicorp/reflect": "^0.38.202311200859",
-    "@web3-onboard/core": "^2.21.0",
     "@web3-onboard/metamask": "^2.0.1",
     "@web3-onboard/react": "^2.8.11",
     "@web3-onboard/taho": "^2.0.5",
     "@web3-onboard/trezor": "^2.4.2",
     "@web3-onboard/walletconnect": "^2.4.4",
-    "assert": "^2.0.0",
-    "buffer": "^6.0.3",
     "classnames": "^2.3.2",
-    "crypto-browserify": "^3.12.0",
     "emittery": "^1.0.1",
     "ethers": "^5",
     "gifler": "^0.1.0",
-    "https-browserify": "^1.0.0",
     "konva": "^9.2.0",
-    "lodash": "4.17.21",
-    "os-browserify": "^0.3.0",
-    "patch-package": "^8.0.0",
-    "path-browserify": "^1.0.1",
+    "lodash.debounce": "^4.0.8",
     "posthog-js": "^1.88.2",
-    "process": "^0.11.10",
-    "raf-schd": "^4.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-konva": "^18.2.10",
     "react-markdown": "^9.0.0",
     "react-redux": "^8.1.2",
     "react-router-dom": "^5",
     "rehype-external-links": "^3.0.0",
-    "stream": "^0.0.2",
-    "stream-browserify": "^3.0.0",
-    "stream-http": "^3.2.0",
-    "styled-jsx": "^5.1.2",
     "use-image": "^1.1.1",
-    "util": "^0.12.5",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@babel/register": "^7.22.15",
     "@thesis-co/eslint-config": "^0.5.0",
     "@thesis/prettier-config": "github:thesis/prettier-config",
     "@types/dotenv-webpack": "^7.0.4",
-    "@types/raf-schd": "^4.0.1",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-router-dom": "^5",
+    "assert": "^2.0.0",
     "babel-loader": "^9.1.3",
+    "babel-plugin-styled-components": "^2.1.4",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "buffer": "^6.0.3",
     "copy-webpack-plugin": "^11.0.0",
+    "crypto-browserify": "^3.12.0",
     "dotenv-defaults": "^5.0.2",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.44.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
+    "https-browserify": "^1.0.0",
+    "os-browserify": "^0.3.0",
+    "patch-package": "^8.0.0",
+    "path-browserify": "^1.0.1",
     "prettier": "^2.8.1",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "styled-jsx": "^5.1.2",
     "typescript": "^5.0.2",
+    "util": "^0.12.5",
     "webpack": "^5.88.1",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.7.3"

src/App.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { Web3OnboardProvider } from "@web3-onboard/react"
+import { Provider } from "react-redux"
+import web3Onboard from "shared/utils/web3Onboard"
+import { PostHogProvider } from "posthog-js/react"
+import { BrowserRouter as Router } from "react-router-dom"
+import GlobalStyles from "ui/GlobalStyles"
+import { POSTHOG_API_KEY, POSTHOG_API_OPTIONS } from "config/posthog"
+import Dapp from "ui/DApp/Dapp"
+import reduxStore from "./redux-state"
+
+export default function App() {
+  return (
+    <>
+      <GlobalStyles />
+      <PostHogProvider apiKey={POSTHOG_API_KEY} options={POSTHOG_API_OPTIONS}>
+        <Provider store={reduxStore}>
+          <Web3OnboardProvider web3Onboard={web3Onboard}>
+            <Router>
+              <Dapp />
+            </Router>
+          </Web3OnboardProvider>
+        </Provider>
+      </PostHogProvider>
+    </>
+  )
+}

src/config/posthog.ts

@@ -0,0 +1,18 @@
+import { PostHogConfig } from "posthog-js"
+
+export const { POSTHOG_API_KEY } = process.env
+
+export const POSTHOG_API_OPTIONS: Partial<PostHogConfig> = {
+  persistence: "localStorage",
+  autocapture: false,
+  capture_pageview: false,
+  disable_session_recording: true,
+  sanitize_properties(properties) {
+    return {
+      ...properties,
+      // The extension has set an expectation that the lib is set to
+      // the analytics env.
+      $lib: process.env.ANALYTICS_ENV,
+    }
+  },
+}

src/env.d.ts

@@ -30,6 +30,13 @@ declare module "*.mp4" {
   export = value
 }
 
+declare module "*.webm" {
+  const value: string
+  export = value
+}
+
+declare module "webpack-bundle-analyzer"
+
 declare namespace NodeJS {
   interface ProcessEnv {
     NODE_ENV: "production" | "development" | "test"

src/index.tsx

@@ -1,53 +1,17 @@
 import React from "react"
-import ReactDOM from "react-dom/client"
-import { Web3OnboardProvider } from "@web3-onboard/react"
-import { Provider } from "react-redux"
-import web3Onboard from "shared/utils/web3Onboard"
-import { PostHogProvider } from "posthog-js/react"
-import { BrowserRouter as Router } from "react-router-dom"
-import DApp from "ui/DApps"
-import reduxStore from "./redux-state"
-
-function DAppProviders() {
-  return (
-    <Provider store={reduxStore}>
-      <Web3OnboardProvider web3Onboard={web3Onboard}>
-        <PostHogProvider
-          apiKey={process.env.POSTHOG_API_KEY}
-          options={{
-            persistence: "localStorage",
-            autocapture: false,
-            capture_pageview: false,
-            disable_session_recording: true,
-            sanitize_properties(properties) {
-              return {
-                ...properties,
-                // The extension has set an expectation that the lib is set to
-                // the analytics env.
-                $lib: process.env.ANALYTICS_ENV,
-              }
-            },
-          }}
-        >
-          <Router>
-            <DApp />
-          </Router>
-        </PostHogProvider>
-      </Web3OnboardProvider>
-    </Provider>
-  )
-}
+import { createRoot } from "react-dom/client"
+import App from "./App"
 
 const root = document.getElementById("root")
 
 if (root) {
-  if (process.env.SKIP_REACT_STRICT_MODE === "true") {
-    ReactDOM.createRoot(root).render(<DAppProviders />)
-  } else {
-    ReactDOM.createRoot(root).render(
+  if (process.env.REACT_STRICT_MODE === "true") {
+    createRoot(root).render(
       <React.StrictMode>
-        <DAppProviders />
+        <App />
       </React.StrictMode>
     )
+  } else {
+    createRoot(root).render(<App />)
   }
 }

src/public/index.html

@@ -3,7 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Enter the Subscape!">
     <title>Subscape</title>
+    <style>
+      body {
+        background: #142D2B;
+      }
+    </style>
+    <link rel="preconnect" href="https://networkcheck.reflect-server.net" />
+    <link rel="preconnect" href="https://rpc.tenderly.co" />
+    <link rel="preconnect" href="https://track.customer.io" />
+    <link rel="preconnect" href="https://featureflags.netlify.com" />
+  </head>
+  <body>
+    <div id="root"></div>
     <!-- Script for sending data to customer.io -->
     <script type="text/javascript">
       var _cio = _cio || [];
@@ -21,13 +34,5 @@
       })();
     </script>
     <!-- Script for sending data to customer.io -->
-    <style>
-      body {
-        background: #142D2B;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
   </body>
 </html>

src/redux-state/slices/wallet.ts

@@ -1,5 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit"
-import portrait from "shared/assets/portrait.png"
+import portrait from "shared/assets/portrait.webp"
 import { ETH_ADDRESS, TAHO_ADDRESS } from "shared/constants"
 import { TokenBalances, TransactionProgressStatus } from "shared/types"
 import { getAllowanceTransactionID } from "shared/utils"

src/shared/components/Dialogs/Panel.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode, CSSProperties } from "react"
 import classNames from "classnames"
 import { animated } from "@react-spring/web"
 import { usePanelRealmClose, useRealmPanelTransition } from "shared/hooks"
-import Portal from "../Interface/Portal"
 
 type PortalSectionProps = {
   children: ReactNode
@@ -39,7 +38,7 @@ function Container({
   const closePanel = usePanelRealmClose()
 
   return (
-    <Portal>
+    <>
       <animated.div
         style={{ ...style, ...containerTransitionStyles }}
         className="no_scrollbar"
@@ -60,31 +59,27 @@ function Container({
         .panel {
           gap: 4px;
         }
-      `}</style>
-      <style jsx global>
-        {`
-          .panel.left .panel_section {
-            border-radius: 0 4px 4px 0;
-          }
-          .panel.left .panel_section:first-child {
-            border-top-right-radius: 16px;
-          }
-          .panel.left .panel_section:last-child {
-            border-bottom-right-radius: 16px;
-          }
+        .panel.left .panel_section {
+          border-radius: 0 4px 4px 0;
+        }
+        .panel.left .panel_section:first-child {
+          border-top-right-radius: 16px;
+        }
+        .panel.left .panel_section:last-child {
+          border-bottom-right-radius: 16px;
+        }
 
-          .panel.right .panel_section:first-child {
-            border-radius: 4px 0 0 4px;
-          }
-          .panel.right .panel_section:first-child {
-            border-top-left-radius: 16px;
-          }
-          .panel.right .panel_section:last-child {
-            border-bottom-left-radius: 16px;
-          }
-        `}
-      </style>
-    </Portal>
+        .panel.right .panel_section:first-child {
+          border-radius: 4px 0 0 4px;
+        }
+        .panel.right .panel_section:first-child {
+          border-top-left-radius: 16px;
+        }
+        .panel.right .panel_section:last-child {
+          border-bottom-left-radius: 16px;
+        }
+      `}</style>
+    </>
   )
 }
 

src/shared/components/Interface/Input.tsx

@@ -81,6 +81,7 @@ export default function SharedInput({
           value={value}
           placeholder={placeholder}
           disabled={disabled}
+          aria-label="Input value"
           onChange={handleInputChange}
         />
         <span className="input_label">{label}</span>

src/shared/components/Media/Icon.tsx

@@ -21,7 +21,7 @@ export default function Icon({
   src,
   color = "var(--off-white)",
   style,
-  ariaLabel,
+  ariaLabel = "Icon",
   onClick,
 }: IconProps) {
   const isButton = !!onClick