Skip to content

Commit 5dd936e

Browse files
ioayioay
committed
Performance imrovements: webpack config(uglify & chunks), code refactor
1 parent 2d9982a commit 5dd936e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+2979
-2441
lines changed

‎.babelrc.cjs

+18-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,20 @@
11
module.exports = {
2-
plugins: ["styled-jsx/babel"],
2+
compact: true,
3+
plugins: [
4+
"styled-jsx/babel",
5+
"@babel/plugin-syntax-dynamic-import",
6+
[
7+
"babel-plugin-styled-components",
8+
{
9+
minify: true,
10+
transpileTemplateLiterals: false,
11+
},
12+
],
13+
],
314
presets: ["@babel/preset-typescript", "@babel/react"],
4-
};
15+
env: {
16+
production: {
17+
plugins: ["transform-remove-console"],
18+
},
19+
},
20+
}

‎.env.defaults

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,5 @@ XP_HOSTING_BASE_URL="" # TBD
3030
SEASON_LENGTH_IN_WEEKS=8
3131
CONTRACT_DEPLOYMENT_BLOCK_NUMBER=553443
3232
SEASON_START_DATE="2023-10-26"
33-
SKIP_REACT_STRICT_MODE="false"
34-
SHOW_WAITLIST="true"
33+
REACT_STRICT_MODE="true"
34+
SHOW_WAITLIST="true"

‎.eslintrc.cjs

+11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module.exports = {
22
root: true,
33
extends: ["@thesis-co"],
4+
plugins: ["unused-imports"],
45
settings: {
56
"import/core-modules": ["styled-jsx/css"],
67
"import/resolver": {
@@ -25,6 +26,16 @@ module.exports = {
2526
ignore: ["jsx", "global"],
2627
},
2728
],
29+
"unused-imports/no-unused-imports": "error",
30+
"unused-imports/no-unused-vars": [
31+
"warn",
32+
{
33+
vars: "all",
34+
varsIgnorePattern: "^_",
35+
args: "after-used",
36+
argsIgnorePattern: "^_",
37+
},
38+
],
2839
},
2940
ignorePatterns: ["dist", "typechain"],
3041
}

‎package.json

+18-17
Original file line numberDiff line numberDiff line change
@@ -21,66 +21,67 @@
2121
"@reduxjs/toolkit": "^1.9.5",
2222
"@rocicorp/rails": "^0.8.0",
2323
"@rocicorp/reflect": "^0.38.202311200859",
24-
"@web3-onboard/core": "^2.21.0",
2524
"@web3-onboard/metamask": "^2.0.1",
2625
"@web3-onboard/react": "^2.8.11",
2726
"@web3-onboard/taho": "^2.0.5",
2827
"@web3-onboard/trezor": "^2.4.2",
2928
"@web3-onboard/walletconnect": "^2.4.4",
30-
"assert": "^2.0.0",
31-
"buffer": "^6.0.3",
3229
"classnames": "^2.3.2",
33-
"crypto-browserify": "^3.12.0",
3430
"emittery": "^1.0.1",
3531
"ethers": "^5",
3632
"gifler": "^0.1.0",
37-
"https-browserify": "^1.0.0",
3833
"konva": "^9.2.0",
39-
"lodash": "4.17.21",
40-
"os-browserify": "^0.3.0",
41-
"patch-package": "^8.0.0",
42-
"path-browserify": "^1.0.1",
34+
"lodash.debounce": "^4.0.8",
4335
"posthog-js": "^1.88.2",
44-
"process": "^0.11.10",
45-
"raf-schd": "^4.0.3",
4636
"react": "^18.2.0",
4737
"react-dom": "^18.2.0",
4838
"react-konva": "^18.2.10",
4939
"react-markdown": "^9.0.0",
5040
"react-redux": "^8.1.2",
5141
"react-router-dom": "^5",
5242
"rehype-external-links": "^3.0.0",
53-
"stream": "^0.0.2",
54-
"stream-browserify": "^3.0.0",
55-
"stream-http": "^3.2.0",
56-
"styled-jsx": "^5.1.2",
5743
"use-image": "^1.1.1",
58-
"util": "^0.12.5",
5944
"zod": "^3.22.4"
6045
},
6146
"devDependencies": {
6247
"@babel/core": "^7.22.9",
48+
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
6349
"@babel/preset-env": "^7.23.3",
6450
"@babel/preset-react": "^7.22.5",
6551
"@babel/preset-typescript": "^7.22.5",
6652
"@babel/register": "^7.22.15",
6753
"@thesis-co/eslint-config": "^0.5.0",
6854
"@thesis/prettier-config": "github:thesis/prettier-config",
6955
"@types/dotenv-webpack": "^7.0.4",
70-
"@types/raf-schd": "^4.0.1",
7156
"@types/react": "^18.2.14",
7257
"@types/react-dom": "^18.2.6",
7358
"@types/react-router-dom": "^5",
59+
"assert": "^2.0.0",
7460
"babel-loader": "^9.1.3",
61+
"babel-plugin-styled-components": "^2.1.4",
62+
"babel-plugin-transform-remove-console": "^6.9.4",
63+
"buffer": "^6.0.3",
7564
"copy-webpack-plugin": "^11.0.0",
65+
"crypto-browserify": "^3.12.0",
7666
"dotenv-defaults": "^5.0.2",
7767
"dotenv-webpack": "^8.0.1",
7868
"eslint": "^8.44.0",
69+
"eslint-plugin-unused-imports": "^3.0.0",
7970
"fork-ts-checker-webpack-plugin": "^8.0.0",
8071
"html-webpack-plugin": "^5.5.3",
72+
"https-browserify": "^1.0.0",
73+
"os-browserify": "^0.3.0",
74+
"patch-package": "^8.0.0",
75+
"path-browserify": "^1.0.1",
8176
"prettier": "^2.8.1",
77+
"process": "^0.11.10",
78+
"stream-browserify": "^3.0.0",
79+
"stream-http": "^3.2.0",
80+
"styled-jsx": "^5.1.2",
8281
"typescript": "^5.0.2",
82+
"util": "^0.12.5",
8383
"webpack": "^5.88.1",
84+
"webpack-bundle-analyzer": "^4.10.1",
8485
"webpack-cli": "^5.1.4",
8586
"webpack-dev-server": "^4.15.1",
8687
"webpack-merge": "^5.7.3"

‎src/App.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from "react"
2+
import { Web3OnboardProvider } from "@web3-onboard/react"
3+
import { Provider } from "react-redux"
4+
import web3Onboard from "shared/utils/web3Onboard"
5+
import { PostHogProvider } from "posthog-js/react"
6+
import { BrowserRouter as Router } from "react-router-dom"
7+
import GlobalStyles from "ui/GlobalStyles"
8+
import { POSTHOG_API_KEY, POSTHOG_API_OPTIONS } from "config/posthog"
9+
import Dapp from "ui/DApp/Dapp"
10+
import reduxStore from "./redux-state"
11+
12+
export default function App() {
13+
return (
14+
<>
15+
<GlobalStyles />
16+
<PostHogProvider apiKey={POSTHOG_API_KEY} options={POSTHOG_API_OPTIONS}>
17+
<Provider store={reduxStore}>
18+
<Web3OnboardProvider web3Onboard={web3Onboard}>
19+
<Router>
20+
<Dapp />
21+
</Router>
22+
</Web3OnboardProvider>
23+
</Provider>
24+
</PostHogProvider>
25+
</>
26+
)
27+
}

‎src/config/posthog.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { PostHogConfig } from "posthog-js"
2+
3+
export const { POSTHOG_API_KEY } = process.env
4+
5+
export const POSTHOG_API_OPTIONS: Partial<PostHogConfig> = {
6+
persistence: "localStorage",
7+
autocapture: false,
8+
capture_pageview: false,
9+
disable_session_recording: true,
10+
sanitize_properties(properties) {
11+
return {
12+
...properties,
13+
// The extension has set an expectation that the lib is set to
14+
// the analytics env.
15+
$lib: process.env.ANALYTICS_ENV,
16+
}
17+
},
18+
}

‎src/env.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,13 @@ declare module "*.mp4" {
3030
export = value
3131
}
3232

33+
declare module "*.webm" {
34+
const value: string
35+
export = value
36+
}
37+
38+
declare module "webpack-bundle-analyzer"
39+
3340
declare namespace NodeJS {
3441
interface ProcessEnv {
3542
NODE_ENV: "production" | "development" | "test"

‎src/index.tsx

+7-43
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,17 @@
11
import React from "react"
2-
import ReactDOM from "react-dom/client"
3-
import { Web3OnboardProvider } from "@web3-onboard/react"
4-
import { Provider } from "react-redux"
5-
import web3Onboard from "shared/utils/web3Onboard"
6-
import { PostHogProvider } from "posthog-js/react"
7-
import { BrowserRouter as Router } from "react-router-dom"
8-
import DApp from "ui/DApps"
9-
import reduxStore from "./redux-state"
10-
11-
function DAppProviders() {
12-
return (
13-
<Provider store={reduxStore}>
14-
<Web3OnboardProvider web3Onboard={web3Onboard}>
15-
<PostHogProvider
16-
apiKey={process.env.POSTHOG_API_KEY}
17-
options={{
18-
persistence: "localStorage",
19-
autocapture: false,
20-
capture_pageview: false,
21-
disable_session_recording: true,
22-
sanitize_properties(properties) {
23-
return {
24-
...properties,
25-
// The extension has set an expectation that the lib is set to
26-
// the analytics env.
27-
$lib: process.env.ANALYTICS_ENV,
28-
}
29-
},
30-
}}
31-
>
32-
<Router>
33-
<DApp />
34-
</Router>
35-
</PostHogProvider>
36-
</Web3OnboardProvider>
37-
</Provider>
38-
)
39-
}
2+
import { createRoot } from "react-dom/client"
3+
import App from "./App"
404

415
const root = document.getElementById("root")
426

437
if (root) {
44-
if (process.env.SKIP_REACT_STRICT_MODE === "true") {
45-
ReactDOM.createRoot(root).render(<DAppProviders />)
46-
} else {
47-
ReactDOM.createRoot(root).render(
8+
if (process.env.REACT_STRICT_MODE === "true") {
9+
createRoot(root).render(
4810
<React.StrictMode>
49-
<DAppProviders />
11+
<App />
5012
</React.StrictMode>
5113
)
14+
} else {
15+
createRoot(root).render(<App />)
5216
}
5317
}

‎src/public/index.html

+13-8
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,20 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="Enter the Subscape!">
67
<title>Subscape</title>
8+
<style>
9+
body {
10+
background: #142D2B;
11+
}
12+
</style>
13+
<link rel="preconnect" href="https://networkcheck.reflect-server.net" />
14+
<link rel="preconnect" href="https://rpc.tenderly.co" />
15+
<link rel="preconnect" href="https://track.customer.io" />
16+
<link rel="preconnect" href="https://featureflags.netlify.com" />
17+
</head>
18+
<body>
19+
<div id="root"></div>
720
<!-- Script for sending data to customer.io -->
821
<script type="text/javascript">
922
var _cio = _cio || [];
@@ -21,13 +34,5 @@
2134
})();
2235
</script>
2336
<!-- Script for sending data to customer.io -->
24-
<style>
25-
body {
26-
background: #142D2B;
27-
}
28-
</style>
29-
</head>
30-
<body>
31-
<div id="root"></div>
3237
</body>
3338
</html>

‎src/redux-state/slices/wallet.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createSlice } from "@reduxjs/toolkit"
2-
import portrait from "shared/assets/portrait.png"
2+
import portrait from "shared/assets/portrait.webp"
33
import { ETH_ADDRESS, TAHO_ADDRESS } from "shared/constants"
44
import { TokenBalances, TransactionProgressStatus } from "shared/types"
55
import { getAllowanceTransactionID } from "shared/utils"

‎src/shared/assets/assistant.webp

1.33 KB
Binary file not shown.

‎src/shared/assets/clouds/cloud-bottom-right.webp

154 KB
Binary file not shown.

‎src/shared/assets/clouds/cloud-top-left.webp

45.8 KB
Binary file not shown.

‎src/shared/assets/clouds/cloud-top-right.webp

19.9 KB
Binary file not shown.

‎src/shared/assets/new-challenge-label.webp

10.8 KB
Binary file not shown.

‎src/shared/assets/placeholder-leaderboard.webp

57.7 KB
Binary file not shown.

‎src/shared/assets/portal-background.webm

1.82 MB
Binary file not shown.

‎src/shared/assets/portal-background.webp

143 KB
Binary file not shown.

‎src/shared/assets/portrait.webp

1.35 KB
Binary file not shown.

‎src/shared/components/Dialogs/Panel.tsx

+21-26
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { ReactNode, CSSProperties } from "react"
22
import classNames from "classnames"
33
import { animated } from "@react-spring/web"
44
import { usePanelRealmClose, useRealmPanelTransition } from "shared/hooks"
5-
import Portal from "../Interface/Portal"
65

76
type PortalSectionProps = {
87
children: ReactNode
@@ -39,7 +38,7 @@ function Container({
3938
const closePanel = usePanelRealmClose()
4039

4140
return (
42-
<Portal>
41+
<>
4342
<animated.div
4443
style={{ ...style, ...containerTransitionStyles }}
4544
className="no_scrollbar"
@@ -60,31 +59,27 @@ function Container({
6059
.panel {
6160
gap: 4px;
6261
}
63-
`}</style>
64-
<style jsx global>
65-
{`
66-
.panel.left .panel_section {
67-
border-radius: 0 4px 4px 0;
68-
}
69-
.panel.left .panel_section:first-child {
70-
border-top-right-radius: 16px;
71-
}
72-
.panel.left .panel_section:last-child {
73-
border-bottom-right-radius: 16px;
74-
}
62+
.panel.left .panel_section {
63+
border-radius: 0 4px 4px 0;
64+
}
65+
.panel.left .panel_section:first-child {
66+
border-top-right-radius: 16px;
67+
}
68+
.panel.left .panel_section:last-child {
69+
border-bottom-right-radius: 16px;
70+
}
7571
76-
.panel.right .panel_section:first-child {
77-
border-radius: 4px 0 0 4px;
78-
}
79-
.panel.right .panel_section:first-child {
80-
border-top-left-radius: 16px;
81-
}
82-
.panel.right .panel_section:last-child {
83-
border-bottom-left-radius: 16px;
84-
}
85-
`}
86-
</style>
87-
</Portal>
72+
.panel.right .panel_section:first-child {
73+
border-radius: 4px 0 0 4px;
74+
}
75+
.panel.right .panel_section:first-child {
76+
border-top-left-radius: 16px;
77+
}
78+
.panel.right .panel_section:last-child {
79+
border-bottom-left-radius: 16px;
80+
}
81+
`}</style>
82+
</>
8883
)
8984
}
9085

‎src/shared/components/Interface/Input.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export default function SharedInput({
8181
value={value}
8282
placeholder={placeholder}
8383
disabled={disabled}
84+
aria-label="Input value"
8485
onChange={handleInputChange}
8586
/>
8687
<span className="input_label">{label}</span>

‎src/shared/components/Media/Icon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function Icon({
2121
src,
2222
color = "var(--off-white)",
2323
style,
24-
ariaLabel,
24+
ariaLabel = "Icon",
2525
onClick,
2626
}: IconProps) {
2727
const isButton = !!onClick

0 commit comments

Comments
 (0)