Skip to content

Commit

Permalink
Performance imrovements: webpack config(uglify & chunks), code refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
ioay committed Dec 18, 2023
1 parent 2d9982a commit 5dd936e
Show file tree
Hide file tree
Showing 84 changed files with 2,979 additions and 2,441 deletions.
20 changes: 18 additions & 2 deletions .babelrc.cjs
Original file line number Diff line number Diff line change
@@ -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"],
},
},
}
4 changes: 2 additions & 2 deletions .env.defaults
Original file line number Diff line number Diff line change
Expand Up @@ -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"
11 changes: 11 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
module.exports = {
root: true,
extends: ["@thesis-co"],
plugins: ["unused-imports"],
settings: {
"import/core-modules": ["styled-jsx/css"],
"import/resolver": {
Expand All @@ -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"],
}
35 changes: 18 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
27 changes: 27 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
)
}
18 changes: 18 additions & 0 deletions src/config/posthog.ts
Original file line number Diff line number Diff line change
@@ -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,
}
},
}
7 changes: 7 additions & 0 deletions src/env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
50 changes: 7 additions & 43 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -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 />)
}
}
21 changes: 13 additions & 8 deletions src/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 || [];
Expand All @@ -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>
2 changes: 1 addition & 1 deletion src/redux-state/slices/wallet.ts
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Binary file added src/shared/assets/assistant.webp
Binary file not shown.
Binary file added src/shared/assets/clouds/cloud-bottom-right.webp
Binary file not shown.
Binary file added src/shared/assets/clouds/cloud-top-left.webp
Binary file not shown.
Binary file added src/shared/assets/clouds/cloud-top-right.webp
Binary file not shown.
Binary file added src/shared/assets/new-challenge-label.webp
Binary file not shown.
Binary file added src/shared/assets/placeholder-leaderboard.webp
Binary file not shown.
Binary file added src/shared/assets/portal-background.webm
Binary file not shown.
Binary file added src/shared/assets/portal-background.webp
Binary file not shown.
Binary file added src/shared/assets/portrait.webp
Binary file not shown.
47 changes: 21 additions & 26 deletions src/shared/components/Dialogs/Panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -39,7 +38,7 @@ function Container({
const closePanel = usePanelRealmClose()

return (
<Portal>
<>
<animated.div
style={{ ...style, ...containerTransitionStyles }}
className="no_scrollbar"
Expand All @@ -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>
</>
)
}

Expand Down
1 change: 1 addition & 0 deletions src/shared/components/Interface/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/shared/components/Media/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function Icon({
src,
color = "var(--off-white)",
style,
ariaLabel,
ariaLabel = "Icon",
onClick,
}: IconProps) {
const isButton = !!onClick
Expand Down
Loading

0 comments on commit 5dd936e

Please sign in to comment.