simplify build tooling and remove redundant dependencies (thirdweb-de…

…v#4664)

<!-- start pr-codex -->

## PR-Codex overview
This PR updates dependencies, TypeScript configurations, and package versions across multiple packages. It also refactors code in the `dashboard` app for improved functionality and type safety.

### Detailed summary
- Updated `next` version to `14.2.12` in `wallet-ui`, `playground-web`, and `portal`.
- Updated `@types/react` to `^18.3.7` in `wallet-ui`, `playground-web`, and `portal`.
- Updated `eslint` and related plugins in `dashboard` and `portal`.
- Refactored code in `dashboard` app for improved functionality and type safety.
- Updated `@walletconnect` packages to version `2.16.2` in `thirdweb`.
- Modified TypeScript configurations in `typedoc-gen` and `service-utils`.
- Updated `react-native-svg` to version `15.7.1` in `portal`.
- Updated `posthog-js` to version `1.161.6` in `wallet-ui` and `portal`.
- Updated `happy-dom` to version `^15.7.4` in `portal`.
- Updated `typescript` to version `5.6.2` in `typedoc-gen` and `dashboard`.

> The following files were skipped due to too many changes: `apps/dashboard/package.json`, `apps/dashboard/src/core-ui/sidebar/tunnel.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useLoggedInUser.ts`, `packages/typedoc-gen/tsconfig.base.json`, `packages/service-utils/tsconfig.base.json`, `packages/service-utils/package.json`, `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/dashboard/.eslintrc.js

@@ -2,9 +2,7 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:import/typescript",
     "plugin:@next/next/recommended",
-    "plugin:promise/recommended",
     "plugin:storybook/recommended",
   ],
   rules: {
@@ -98,7 +96,7 @@ module.exports = {
     ],
   },
   parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "import", "react-compiler"],
+  plugins: ["@typescript-eslint", "react-compiler"],
   parserOptions: {
     ecmaVersion: 2019,
     ecmaFeatures: {

apps/dashboard/package.json

@@ -68,14 +68,14 @@
     "ipaddr.js": "^2.2.0",
     "lottie-react": "^2.4.0",
     "lucide-react": "0.441.0",
-    "next": "14.2.11",
+    "next": "14.2.12",
     "next-plausible": "^3.12.0",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.12",
     "papaparse": "^5.4.1",
     "pluralize": "^8.0.0",
-    "posthog-js": "1.161.5",
+    "posthog-js": "1.161.6",
     "posthog-js-opensource": "npm:[email protected]",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
@@ -108,8 +108,8 @@
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "2.0.2",
-    "@next/bundle-analyzer": "14.2.11",
-    "@next/eslint-plugin-next": "14.2.11",
+    "@next/bundle-analyzer": "14.2.12",
+    "@next/eslint-plugin-next": "14.2.12",
     "@playwright/test": "1.47.1",
     "@storybook/addon-essentials": "8.3.1",
     "@storybook/addon-interactions": "8.3.1",
@@ -125,7 +125,7 @@
     "@types/papaparse": "^5.3.14",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.6",
+    "@types/react": "^18.3.7",
     "@types/react-dom": "^18",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
@@ -136,9 +136,7 @@
     "checkly": "^4.8.1",
     "eslint": "8.57.0",
     "eslint-config-biome": "1.8.3",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
     "eslint-plugin-storybook": "^0.8.0",
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.47",

apps/dashboard/src/@3rdweb-sdk/react/hooks/useLoggedInUser.ts

@@ -3,7 +3,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useQuery } from "@tanstack/react-query";
 import type { EnsureLoginResponse } from "app/api/auth/ensure-login/route";
 import { usePathname } from "next/navigation";
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 import {
   useActiveAccount,
   useActiveWalletConnectionStatus,
@@ -27,10 +27,16 @@ export function useLoggedInUser(): {
   const connectionStatus = useActiveWalletConnectionStatus();
   // this is to work around the fact that `connectionStatus` ends up as "disconnected"
   // which we *do* care about, but only after we have been "connecting" at least once
-  const statusWasEverConnecting = useRef(false);
-  if (connectionStatus === "connecting" || connectionStatus === "connected") {
-    statusWasEverConnecting.current = true;
-  }
+  const [statusWasEverConnecting, setStatusWasEverConnecting] = useState(
+    connectionStatus === "connecting" || connectionStatus === "connected",
+  );
+  // needs to be a useEffect for now
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (connectionStatus === "connecting" || connectionStatus === "connected") {
+      setStatusWasEverConnecting(true);
+    }
+  }, [connectionStatus]);
 
   const query = useQuery({
     // enabled if:
@@ -40,7 +46,7 @@ export function useLoggedInUser(): {
     enabled:
       !!pathname &&
       connectionStatus !== "connecting" &&
-      statusWasEverConnecting.current &&
+      statusWasEverConnecting &&
       isLoginRequired(pathname),
     // the last "persist", part of the queryKey, is to make sure that we do not cache this query in indexDB
     // convention in v4 of the SDK that we are (ab)using here

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/search.tsx

@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { SearchIcon, XCircleIcon } from "lucide-react";
 import { usePathname, useSearchParams } from "next/navigation";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
 function cleanUrl(url: string) {
@@ -22,10 +22,13 @@ export const SearchInput: React.FC = () => {
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // hah, no need for useEffect here this just works!
-  if (inputRef.current?.value && !searchParams?.get("query")) {
-    inputRef.current.value = "";
-  }
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    // reset the input if the query param is removed
+    if (inputRef.current?.value && !searchParams?.get("query")) {
+      inputRef.current.value = "";
+    }
+  }, [searchParams]);
 
   const handleSearch = useDebouncedCallback((term: string) => {
     const params = new URLSearchParams(searchParams ?? undefined);

apps/dashboard/src/core-ui/sidebar/tunnel.tsx

@@ -1,33 +1,30 @@
 "use client";
 
-import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
-import { useRef, useState } from "react";
+import { useMemo } from "react";
 import { createPortal } from "react-dom";
 import type { ComponentWithChildren } from "types/component-with-children";
+import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 
 export const SIDEBAR_WIDTH = 240;
 
 export const SIDEBAR_TUNNEL_ID = "sidebar-tunnel";
 
 export const SideBarTunnel: ComponentWithChildren = ({ children }) => {
   return (
-    <ClientOnlyPortal selector={SIDEBAR_TUNNEL_ID}>{children}</ClientOnlyPortal>
+    <ClientOnly ssr={null}>
+      <Portal selector={SIDEBAR_TUNNEL_ID}>{children}</Portal>
+    </ClientOnly>
   );
 };
 
-type ClientOnlyPortalProps = { selector: string };
+type PortalProps = { selector: string };
 
-const ClientOnlyPortal: ComponentWithChildren<ClientOnlyPortalProps> = ({
-  children,
-  selector,
-}) => {
-  const ref = useRef<Element | null>(null);
-  const [mounted, setMounted] = useState(false);
-
-  useIsomorphicLayoutEffect(() => {
-    ref.current = document.getElementById(selector);
-    setMounted(true);
-  }, [selector]);
-
-  return mounted && ref.current ? createPortal(children, ref.current) : null;
+const Portal: ComponentWithChildren<PortalProps> = ({ children, selector }) => {
+  return useMemo(() => {
+    const elem = document.getElementById(selector);
+    if (elem) {
+      return createPortal(children, elem);
+    }
+    return null;
+  }, [children, selector]);
 };

apps/playground-web/package.json

@@ -30,7 +30,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "0.441.0",
-    "next": "14.2.11",
+    "next": "14.2.12",
     "next-themes": "^0.3.0",
     "prettier": "^3.3.2",
     "react": "18.3.1",
@@ -43,12 +43,11 @@
   },
   "devDependencies": {
     "@types/node": "20.14.9",
-    "@types/react": "^18.3.6",
+    "@types/react": "^18.3.7",
     "@types/react-dom": "^18",
-    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.11",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
     "postcss": "8.4.47",
     "tailwindcss": "3.4.11",
     "tailwindcss-animate": "^1.0.7",

apps/portal/.eslintrc.json

@@ -1,16 +1,16 @@
 {
-	"parser": "@typescript-eslint/parser",
-	"plugins": ["@typescript-eslint", "svg-jsx"],
-	"extends": [
-		"next/core-web-vitals",
-		"plugin:tailwindcss/recommended",
-		"plugin:mdx/recommended",
-		"plugin:@typescript-eslint/recommended"
-	],
-	"rules": {
-		"no-unused-vars": "off",
-		"@typescript-eslint/no-unused-vars": ["error"],
-		"@typescript-eslint/no-explicit-any": "off",
-		"svg-jsx/camel-case-dash": "error"
-	}
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "svg-jsx"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:tailwindcss/recommended",
+    "plugin:mdx/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "svg-jsx/camel-case-dash": "error"
+  }
 }

apps/portal/package.json

@@ -33,10 +33,10 @@
     "flexsearch": "^0.7.43",
     "github-slugger": "^2.0.0",
     "lucide-react": "0.441.0",
-    "next": "14.2.11",
+    "next": "14.2.12",
     "nextjs-toploader": "^1.6.12",
     "node-html-parser": "^6.1.13",
-    "posthog-js": "1.161.5",
+    "posthog-js": "1.161.6",
     "prettier": "^3.3.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -56,7 +56,7 @@
     "@types/flexsearch": "^0.7.6",
     "@types/mdx": "^2.0.13",
     "@types/node": "20.14.9",
-    "@types/react": "^18.3.6",
+    "@types/react": "^18.3.7",
     "@types/react-dom": "^18",
     "@types/react-html-parser": "^2.0.6",
     "@types/tryghost__content-api": "^1.3.16",
@@ -65,7 +65,7 @@
     "autoprefixer": "^10.4.19",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.11",
-    "eslint-plugin-mdx": "^2.3.4",
+    "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-svg-jsx": "^1.2.4",
     "eslint-plugin-tailwindcss": "^3.15.1",
     "next-sitemap": "^4.2.3",

apps/wallet-ui/package.json

@@ -22,7 +22,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "lucide-react": "0.441.0",
-    "next": "14.2.11",
+    "next": "14.2.12",
     "next-themes": "^0.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@types/node": "20.14.9",
-    "@types/react": "^18.3.6",
+    "@types/react": "^18.3.7",
     "@types/react-dom": "^18",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.11",

package.json

@@ -41,28 +41,19 @@
     "hotlink-revert": "node ./scripts/hotlink/hotlink-revert.mjs"
   },
   "devDependencies": {
-    "@babel/plugin-transform-flow-strip-types": "^7.25.2",
-    "@babel/plugin-transform-private-methods": "^7.25.4",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-typescript": "^7.24.7",
     "@biomejs/biome": "1.9.1",
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.8",
     "@manypkg/cli": "0.21.4",
     "@manypkg/get-packages": "2.2.2",
     "@playwright/test": "1.47.1",
     "@size-limit/preset-big-lib": "11.1.5",
-    "@types/bun": "1.1.8",
+    "@types/bun": "1.1.9",
     "@types/node": "20.14.9",
-    "@types/react": "^18.3.6",
+    "@types/react": "^18.3.7",
     "@viem/anvil": "0.0.10",
     "@vitest/coverage-v8": "2.1.1",
     "dotenv-mono": "^1.3.14",
-    "eslint-plugin-i18next": "^6.1.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-inclusive-language": "^2.2.1",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-tsdoc": "^0.3.0",
     "knip": "^5.30.2",
     "mitata": "0.1.14",
     "react": "18.3.1",
@@ -104,5 +95,5 @@
       "@typescript-eslint/typescript-estree": "^7.14.1"
     }
   },
-  "packageManager": "pnpm@9.4.0"
+  "packageManager": "pnpm@9.10.0"
 }