diff --git a/.babelrc.cjs b/.babelrc.cjs index 760d9bf30..3e0135b82 100644 --- a/.babelrc.cjs +++ b/.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"], + }, + }, +} diff --git a/.env.defaults b/.env.defaults index 70e56de9a..5856b2859 100644 --- a/.env.defaults +++ b/.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" \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 21d8e4c1e..e82f150b5 100644 --- a/.eslintrc.cjs +++ b/.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"], } diff --git a/package.json b/package.json index 3c2e7af6a..d28a36897 100644 --- a/package.json +++ b/package.json @@ -21,28 +21,18 @@ "@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", @@ -50,16 +40,12 @@ "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", @@ -67,20 +53,35 @@ "@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" diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 000000000..8f2f228c1 --- /dev/null +++ b/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 ( + <> + + + + + + + + + + + + ) +} diff --git a/src/config/posthog.ts b/src/config/posthog.ts new file mode 100644 index 000000000..15961dd61 --- /dev/null +++ b/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 = { + 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, + } + }, +} diff --git a/src/env.d.ts b/src/env.d.ts index 44ba2fe88..186fa7e30 100644 --- a/src/env.d.ts +++ b/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" diff --git a/src/index.tsx b/src/index.tsx index da7313411..9f7a2a41c 100644 --- a/src/index.tsx +++ b/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 ( - - - - - - - - - - ) -} +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() - } else { - ReactDOM.createRoot(root).render( + if (process.env.REACT_STRICT_MODE === "true") { + createRoot(root).render( - + ) + } else { + createRoot(root).render() } } diff --git a/src/public/index.html b/src/public/index.html index a3e183d07..1da77713f 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -3,7 +3,20 @@ + Subscape + + + + + + + +
- - - -
diff --git a/src/redux-state/slices/wallet.ts b/src/redux-state/slices/wallet.ts index f6e98cb90..3294b100e 100644 --- a/src/redux-state/slices/wallet.ts +++ b/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" diff --git a/src/shared/assets/assistant.webp b/src/shared/assets/assistant.webp new file mode 100644 index 000000000..f5af57eb0 Binary files /dev/null and b/src/shared/assets/assistant.webp differ diff --git a/src/shared/assets/clouds/cloud-bottom-right.webp b/src/shared/assets/clouds/cloud-bottom-right.webp new file mode 100644 index 000000000..74fed4eab Binary files /dev/null and b/src/shared/assets/clouds/cloud-bottom-right.webp differ diff --git a/src/shared/assets/clouds/cloud-top-left.webp b/src/shared/assets/clouds/cloud-top-left.webp new file mode 100644 index 000000000..ab9d0864f Binary files /dev/null and b/src/shared/assets/clouds/cloud-top-left.webp differ diff --git a/src/shared/assets/clouds/cloud-top-right.webp b/src/shared/assets/clouds/cloud-top-right.webp new file mode 100644 index 000000000..4d0b4fabc Binary files /dev/null and b/src/shared/assets/clouds/cloud-top-right.webp differ diff --git a/src/shared/assets/new-challenge-label.webp b/src/shared/assets/new-challenge-label.webp new file mode 100644 index 000000000..0f91709e5 Binary files /dev/null and b/src/shared/assets/new-challenge-label.webp differ diff --git a/src/shared/assets/placeholder-leaderboard.webp b/src/shared/assets/placeholder-leaderboard.webp new file mode 100644 index 000000000..0bf5905b7 Binary files /dev/null and b/src/shared/assets/placeholder-leaderboard.webp differ diff --git a/src/shared/assets/portal-background.webm b/src/shared/assets/portal-background.webm new file mode 100644 index 000000000..3079b8675 Binary files /dev/null and b/src/shared/assets/portal-background.webm differ diff --git a/src/shared/assets/portal-background.webp b/src/shared/assets/portal-background.webp new file mode 100644 index 000000000..df5aa9a57 Binary files /dev/null and b/src/shared/assets/portal-background.webp differ diff --git a/src/shared/assets/portrait.webp b/src/shared/assets/portrait.webp new file mode 100644 index 000000000..f9a5076db Binary files /dev/null and b/src/shared/assets/portrait.webp differ diff --git a/src/shared/components/Dialogs/Panel.tsx b/src/shared/components/Dialogs/Panel.tsx index edac72ef8..bebe323c2 100644 --- a/src/shared/components/Dialogs/Panel.tsx +++ b/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 ( - + <> - - + .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; + } + `} + ) } diff --git a/src/shared/components/Interface/Input.tsx b/src/shared/components/Interface/Input.tsx index a5c22e152..a57fa3d95 100644 --- a/src/shared/components/Interface/Input.tsx +++ b/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} /> {label} diff --git a/src/shared/components/Media/Icon.tsx b/src/shared/components/Media/Icon.tsx index 67d61833d..8a21dbb1d 100644 --- a/src/shared/components/Media/Icon.tsx +++ b/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 diff --git a/src/shared/components/Media/IconLink.tsx b/src/shared/components/Media/IconLink.tsx index 3af276c5b..120fd8204 100644 --- a/src/shared/components/Media/IconLink.tsx +++ b/src/shared/components/Media/IconLink.tsx @@ -5,15 +5,23 @@ export default function IconLink({ iconWidth, iconHeight, iconSrc, + label, }: { href: string iconWidth: string iconHeight: string iconSrc: string + label?: string }) { return ( <> - +
+
+ ) +} diff --git a/src/ui/Onboarding/index.tsx b/src/ui/Onboarding/index.tsx deleted file mode 100644 index 4df3cdc02..000000000 --- a/src/ui/Onboarding/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from "react" -import { useAssets, useConnect } from "shared/hooks" -import { - useDappSelector, - selectHasRelevantTokens, - selectHasLoadedBalances, -} from "redux-state" -import FullPageLoader from "shared/components/Loaders/FullPageLoader" -import Nav from "ui/Nav" -import portalBackground from "shared/assets/portal-background.mp4" -import Version from "shared/components/Misc/Version" -import OnboardingFooter from "ui/Footer/OnboardingFooter" -import BetaEndModal from "ui/Island/Modals/BetaEndModal" -import ConnectWallet from "./ConnectWallet" -import JoinWaitlist from "./JoinWaitlist" -import EnterPortal from "./EnterPortal" -import OnboardingModalLoader from "./Loader" - -function OnboardingModal() { - const { isConnected } = useConnect() - const hasBalances = useDappSelector(selectHasLoadedBalances) - const hasRelevantTokens = useDappSelector(selectHasRelevantTokens) - - if (process.env.IS_COMING_SOON === "true") { - return ( - - Portal opens -
- soon -
- ) - } - - if (!isConnected) { - return - } - - if (!hasBalances) { - return - } - - if (hasRelevantTokens) { - return - } - - return ( - - The Portal -
is Open -
- ) -} - -export default function Onboarding() { - const assetsLoaded = useAssets([portalBackground]) - - return ( - <> - -
- {process.env.IS_PORTAL_CLOSED === "true" ? ( - - Thanks for participating in our Beta, we hope you had fun -
and see you in Season 1. -
- ) : ( - - )} - -
- -
-
-