Performance imrovements: webpack config(uglify & chunks), code refactor

Author: ioay

package.json

@@ -80,7 +80,9 @@
     "html-webpack-plugin": "^5.5.3",
     "prettier": "^2.8.1",
     "typescript": "^5.0.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
     "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,9 @@ declare module "*.mp4" {
   export = value
 }
 
+declare module "webpack-bundle-analyzer"
+declare module "uglifyjs-webpack-plugin"
+
 declare namespace NodeJS {
   interface ProcessEnv {
     NODE_ENV: "production" | "development" | "test"

src/index.tsx

@@ -1,52 +1,16 @@
 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 App from "./App"
 
 const root = document.getElementById("root")
 
 if (root) {
   if (process.env.SKIP_REACT_STRICT_MODE === "true") {
-    ReactDOM.createRoot(root).render(<DAppProviders />)
+    ReactDOM.createRoot(root).render(<App />)
   } else {
     ReactDOM.createRoot(root).render(
       <React.StrictMode>
-        <DAppProviders />
+        <App />
       </React.StrictMode>
     )
   }

src/public/index.html

@@ -4,6 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Subscape</title>
+    <style>
+      body {
+        background: #142D2B;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
     <!-- Script for sending data to customer.io -->
     <script type="text/javascript">
       var _cio = _cio || [];
@@ -21,13 +29,5 @@
       })();
     </script>
     <!-- Script for sending data to customer.io -->
-    <style>
-      body {
-        background: #142D2B;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
   </body>
 </html>

src/shared/constants/realms.ts

@@ -7,6 +7,7 @@ import frax from "shared/assets/partners/frax.svg"
 import base from "shared/assets/partners/base.svg"
 import zksync from "shared/assets/partners/zksync.svg"
 import { RealmPosition } from "shared/types/realm"
+import CHALLENGES_DATA from "assets/challenges-data.json"
 import {
   realm4,
   realm7,
@@ -17,7 +18,6 @@ import {
   realm22,
   // realm15,
 } from "./realms-data"
-import CHALLENGES_DATA from "../../assets/challenges-data.json"
 
 // TODO: read the correct challenge data for realms
 // The challenge data should be read from a JSON file.

src/shared/context/index.ts

@@ -0,0 +1,2 @@
+export * from "./island"
+export * from "./reflect"

src/shared/context/island.ts

@@ -0,0 +1,11 @@
+/* eslint-disable import/prefer-default-export */
+import { createContext, MutableRefObject } from "react"
+import { IslandContextType } from "shared/types"
+
+export const IslandContext = createContext<MutableRefObject<IslandContextType>>(
+  {
+    current: {
+      onRealmClick: () => {},
+    },
+  }
+)

src/shared/context/reflect.ts

@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+import { createContext } from "react"
+import { ReflectInstance } from "shared/utils"
+
+export const ReflectContext = createContext<ReflectInstance | null>(null)

src/shared/hooks/assistant.ts

@@ -1,14 +1,8 @@
 import { useEffect } from "react"
 import { LOCAL_STORAGE_ASSISTANT } from "shared/constants"
 import { selectStakingRealmId, useDappSelector } from "redux-state"
-import { useLocalStorageChange } from "./helpers"
-
-type AssistantType = "welcome" | "challenges" | "default" | "first-realm"
-
-type Assistant = {
-  type: AssistantType
-  visible: boolean
-}
+import { Assistant, AssistantType } from "shared/types"
+import { useLocalStorageChange } from "./storage"
 
 // eslint-disable-next-line import/prefer-default-export
 export function useAssistant(): {

src/shared/hooks/challenge.ts

@@ -2,7 +2,7 @@
 import { useCallback } from "react"
 import { LOCAL_STORAGE_DISPLAYED_CHALLENGES } from "shared/constants"
 import { getRealmIdFromChallengeInLocalStorage } from "shared/utils"
-import { useLocalStorageChange } from "./helpers"
+import { useLocalStorageChange } from "./storage"
 
 export function useDisplayedChallenges(): {
   isChallengeDisplayed: (id: string) => string | false