Merge pull request #440 from BootNodeDev/chore/update-high-risk-deps

gabitoesmiapodo · web-flow · commit 21a61562b879 · 2026-04-06T14:11:52.000-03:00
chore: update high-risk dependencies
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@vercel/analytics": "^2.0.1",
     "@web3icons/core": "^4.0.13",
     "@web3icons/react": "^4.0.13",
+    "buffer": "^6.0.3",
     "connectkit": "^1.9.2",
     "graphql": "^16.13.2",
     "graphql-request": "^7.1.2",
@@ -53,25 +54,25 @@
     "use-debounce": "^10.1.1",
     "viem": "^2.47.6",
     "wagmi": "^2.17.5",
-    "zod": "^3.24.4"
+    "zod": "^4"
   },
   "devDependencies": {
     "@biomejs/biome": "2.4.10",
     "@commitlint/cli": "^20.5.0",
     "@commitlint/config-conventional": "^20.5.0",
-    "@graphql-codegen/cli": "^5.0.6",
+    "@graphql-codegen/cli": "^6",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@parcel/watcher": "^2.5.1",
     "@tanstack/react-query-devtools": "^5.96.1",
+    "@tanstack/react-router-devtools": "^1.166.11",
     "@tanstack/router-cli": "^1.166.25",
-    "@tanstack/router-devtools": "^1.166.11",
     "@tanstack/router-plugin": "^1.167.12",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
-    "@vitejs/plugin-react-swc": "^4.3.0",
+    "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.2",
     "@wagmi/cli": "^2.3.1",
     "change-case": "^5.4.4",
@@ -84,12 +85,16 @@
     "typedoc-plugin-inline-sources": "^1.3.0",
     "typedoc-plugin-missing-exports": "^4.0.0",
     "typedoc-plugin-rename-defaults": "^0.7.3",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "typescript": "^6",
+    "vite": "^8",
     "vite-plugin-sitemap": "^0.8.2",
-    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.2",
     "vocs": "1.4.1"
   },
-  "packageManager": "pnpm@10.33.0"
+  "packageManager": "pnpm@10.33.0",
+  "pnpm": {
+    "overrides": {
+      "@graphql-codegen/cli": "^6"
+    }
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/pageComponents/home/Examples/demos/TransactionButton/index.tsx b/src/components/pageComponents/home/Examples/demos/TransactionButton/index.tsx
@@ -18,6 +18,7 @@ const TransactionButton = () => {
 
   return (
     <WalletStatusVerifier chainId={sepolia.id}>
+      {/* biome-ignore lint/complexity/noUselessFragments: WalletStatusVerifier expects a single ReactElement child */}
       <>
         <OptionsDropdown items={items} />
         <Flex
diff --git a/src/components/sharedComponents/Avatar.tsx b/src/components/sharedComponents/Avatar.tsx
@@ -1,6 +1,18 @@
 import { Box } from '@chakra-ui/react'
 import type { ComponentProps, FC } from 'react'
-import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
+// react-jazzicon is CJS with __esModule. Vite 8's pre-bundler wraps it as
+// `export default module.exports`, so the default import is the module.exports
+// object, not the component. Node.js/Vitest gives the component directly.
+import _Jazzicon, { jsNumberForAddress as _jsNFA } from 'react-jazzicon'
+
+// Vite 8 pre-bundler wraps CJS __esModule packages as `export default module.exports`,
+// so the default import may be the module.exports object instead of exports.default.
+type CJSModule = Record<string, unknown>
+const _mod = _Jazzicon as unknown as CJSModule
+const Jazzicon: typeof _Jazzicon =
+  typeof _Jazzicon === 'function' ? _Jazzicon : (_mod.default as typeof _Jazzicon)
+const jsNumberForAddress: typeof _jsNFA =
+  typeof _jsNFA === 'function' ? _jsNFA : (_mod.jsNumberForAddress as typeof _jsNFA)
 
 interface AvatarProps extends ComponentProps<'div'> {
   address: string
diff --git a/src/components/sharedComponents/TokenSelect/TopTokens/index.tsx b/src/components/sharedComponents/TokenSelect/TopTokens/index.tsx
@@ -44,7 +44,7 @@ const TopTokens: FC<TopTokensProps> = ({ onTokenSelect, tokens, ...restProps })
           <Item
             key={`token_${token?.address}`}
             onClick={() => onTokenSelect(token)}
-            // biome-ignore lint/style/noNonNullAssertion: <explanation>
+            // biome-ignore lint/style/noNonNullAssertion: token is defined when rendered via filter above
             token={token!}
           />
         ))}
diff --git a/src/components/sharedComponents/dev/TanStackRouterDevtools.tsx b/src/components/sharedComponents/dev/TanStackRouterDevtools.tsx
@@ -3,7 +3,7 @@ import { lazy, Suspense } from 'react'
 const RouterDevtoolsBase = import.meta.env.PROD
   ? () => null
   : lazy(() =>
-      import('@tanstack/router-devtools').then((res) => ({
+      import('@tanstack/react-router-devtools').then((res) => ({
         default: res.TanStackRouterDevtools,
       })),
     )
diff --git a/src/env.ts b/src/env.ts
@@ -6,7 +6,7 @@ const zBoolean = z
   .enum(['true', 'false'])
   .transform((value) => value === 'true')
   .optional()
-  .default('true')
+  .default(true)
 
 /**
  * Represents the environment configuration object.
diff --git a/src/hooks/useTokens.ts b/src/hooks/useTokens.ts
@@ -94,7 +94,7 @@ export const useTokens = (
 
   const dAppChainsId = chainId
     ? [chainId]
-    : Object.keys(tokensData.tokensByChainId).map((id) => Number.parseInt(id))
+    : Object.keys(tokensData.tokensByChainId).map((id) => Number.parseInt(id, 10))
   const lifiChainsId = chains?.map((chain) => chain.id) ?? []
   const chainsToFetch = dAppChainsId.filter((id) => lifiChainsId.includes(id))
 
@@ -111,11 +111,11 @@ export const useTokens = (
     queryKey: ['lifi', 'tokens', 'balances', account, chainsToFetch],
     queryFn: () =>
       getTokenBalances(
-        // biome-ignore lint/style/noNonNullAssertion: <explanation>
+        // biome-ignore lint/style/noNonNullAssertion: guarded by enabled: canFetchBalance && !!tokensPricesByChain
         account!,
-        // biome-ignore lint/style/noNonNullAssertion: <explanation>
+        // biome-ignore lint/style/noNonNullAssertion: guarded by enabled: canFetchBalance && !!tokensPricesByChain
         Object.entries(tokensPricesByChain!.tokens)
-          .filter(([chainId]) => chainsToFetch.includes(Number.parseInt(chainId)))
+          .filter(([chainId]) => chainsToFetch.includes(Number.parseInt(chainId, 10)))
           .flatMap(([, tokens]) => tokens),
       ),
     staleTime: BALANCE_EXPIRATION_TIME,
@@ -167,7 +167,6 @@ function udpateTokensBalances(tokens: Tokens, results: [Array<TokenAmount>, Toke
     (acc, [chainId, tokens]) => {
       acc[chainId] = {}
 
-      // biome-ignore lint/complexity/noForEach: <explanation>
       tokens.forEach((token) => {
         acc[chainId][token.address] = token.priceUSD ?? '0'
       })
diff --git a/src/lib/wagmi/plugins/reactSuspenseRead.ts b/src/lib/wagmi/plugins/reactSuspenseRead.ts
@@ -12,7 +12,7 @@ const walletConfigImport = `import { config } from '@/src/lib/wallets/connectkit
 type ActionsResult = {
   name: string
 
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  // biome-ignore lint/suspicious/noExplicitAny: wagmi plugin API does not expose typed ABI item types
   run: ({ contracts }: { contracts: any[] }) => Promise<{
     imports: string
     content: string
@@ -29,7 +29,7 @@ export function reactSuspenseRead(config: ActionsConfig = {}): ActionsResult {
 
       const actionNames = new Set<string>()
 
-      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      // biome-ignore lint/suspicious/noExplicitAny: wagmi plugin API does not expose typed ABI item types
       const isReadFunction = (item: any) =>
         item.type === 'function' &&
         (item.stateMutability === 'view' || item.stateMutability === 'pure')
diff --git a/src/lib/wallets/connectkit.config.tsx b/src/lib/wallets/connectkit.config.tsx
@@ -91,7 +91,7 @@ const defaultConfig = {
 
   // Optional App Info
   appDescription: env.PUBLIC_APP_DESCRIPTION,
-  appUrl: env.PUBLIC_APP_URL,
+  appUrl: typeof window !== 'undefined' ? window.location.origin : env.PUBLIC_APP_URL,
   appIcon: env.PUBLIC_APP_LOGO,
 } as const
 
diff --git a/src/lib/wallets/portoInit.ts b/src/lib/wallets/portoInit.ts
@@ -1,7 +1,7 @@
 import { Porto } from 'porto'
 import { env } from '@/src/env'
 
-if (env.PUBLIC_ENABLE_PORTO) {
+if (env.PUBLIC_ENABLE_PORTO && globalThis.location?.protocol === 'https:') {
   try {
     Porto.create()
   } catch (error) {
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client'
 
 import NotFound404 from '@/src/components/pageComponents/NotFound404'
 import { routeTree } from '@/src/routeTree.gen'
+import { printAppInfo } from '@/src/utils/printAppInfo'
 
 const router = createRouter({
   routeTree,
@@ -16,7 +17,9 @@ declare module '@tanstack/react-router' {
   }
 }
 
-// biome-ignore lint/style/noNonNullAssertion: <explanation>
+printAppInfo()
+
+// biome-ignore lint/style/noNonNullAssertion: root element is guaranteed by index.html
 const rootElement = document.getElementById('root')!
 
 if (!rootElement.innerHTML) {
diff --git a/src/providers/TransactionNotificationProvider.tsx b/src/providers/TransactionNotificationProvider.tsx
@@ -122,8 +122,9 @@ export const TransactionNotificationProvider: FC<PropsWithChildren> = ({ childre
       let replacedTx = null as ReplacementReturnType | null
       const receipt = await readOnlyClient.waitForTransactionReceipt({
         hash,
-        // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
-        onReplaced: (replacedTxData) => (replacedTx = replacedTxData),
+        onReplaced: (replacedTxData) => {
+          replacedTx = replacedTxData
+        },
       })
 
       if (replacedTx !== null) {
@@ -201,8 +202,9 @@ export const TransactionNotificationProvider: FC<PropsWithChildren> = ({ childre
       message: `Signature requested: ${transactionMessage}`,
       signaturePromise: txPromise,
       showSuccessToast: false,
-      // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
-      onToastId: (id) => (toastId = id),
+      onToastId: (id) => {
+        toastId = id
+      },
     })
 
     const hash = await txPromise
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -1,7 +1,6 @@
 import { chakra, Flex } from '@chakra-ui/react'
 import { createRootRoute, Outlet } from '@tanstack/react-router'
 import { Analytics } from '@vercel/analytics/react'
-import { useEffect } from 'react'
 import { TanStackReactQueryDevtools } from '@/src/components/sharedComponents/dev/TanStackReactQueryDevtools'
 import { TanStackRouterDevtools } from '@/src/components/sharedComponents/dev/TanStackRouterDevtools'
 import { Footer } from '@/src/components/sharedComponents/ui/Footer'
@@ -10,17 +9,11 @@ import { Provider } from '@/src/components/ui/provider'
 import { Toaster } from '@/src/components/ui/toaster'
 import { TransactionNotificationProvider } from '@/src/providers/TransactionNotificationProvider'
 import { Web3Provider } from '@/src/providers/Web3Provider'
-import { printAppInfo } from '@/src/utils/printAppInfo'
-
 export const Route = createRootRoute({
   component: Root,
 })
 
 function Root() {
-  useEffect(() => {
-    printAppInfo()
-  }, [])
-
   return (
     <Provider>
       <Web3Provider>
diff --git a/src/utils/suspenseWrapper.tsx b/src/utils/suspenseWrapper.tsx
@@ -41,10 +41,7 @@ const DefaultFallback = ({
  * A generic wrapper for all the components that use suspense
  *
  * @param WrappedComponent - a component that will be wrapped inside ErrorBoundary and Suspense
- * @param {ReactNode} [errorFallback] - a custom fallback for ErrorBoundary
- * @param {ReactNode} [suspenseFallback] - a custom fallback for Suspense
- * @param {DefaultFallbackFormat} [defaultFallbackFormat] - Optional. Can be a dialog or just text or custom component (default).
- * @returns {ComponentType}
+ * @returns {ComponentType} component accepting {@link WithSuspenseProps}
  */
 export const withSuspense = <WrappedProps extends object>(
   WrappedComponent: ComponentType<WrappedProps>,
@@ -163,11 +160,7 @@ export type WithSuspenseAndRetryProps = {
  * A wrapper for a component that uses suspense, with the capacity to retry if a useSuspenseQuery fails
  *
  * @param WrappedComponent - a component wrapped inside a tanstack's QueryErrorResetBoundary, ErrorBoundary, and a Suspense
- * @param {ReactNode} [fallbackRender] - a custom fallback render for ErrorBoundary
- * @param {DefaultFallbackFormat} [defaultFallbackFormat] - Optional. Can be a dialog or just text (default). Has no effect if `fallbackRender` is provided
- * @param {ReactNode} [suspenseFallback] - a custom fallback for Suspense
- *  @param {'xs' | 'sm' | 'md' | 'lg' | 'xl'} [spinnerSize] - Optional. Sets the size of the default spinner shown during suspense loading. Default is 'lg'.
- * @returns {ComponentType}
+ * @returns {ComponentType} component accepting {@link WithSuspenseAndRetryProps}
  */
 export const withSuspenseAndRetry = <WrappedProps extends object>(
   WrappedComponent: ComponentType<WrappedProps>,
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
     "allowJs": false,
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": "./",
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
     "jsx": "react-jsx",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "ESNext",
@@ -19,7 +16,6 @@
     "strict": true,
     "target": "ESNext",
     "types": ["vitest/globals", "@testing-library/jest-dom/vitest"],
-    "useDefineForClassFields": true,
     "paths": {
       "@/src/*": ["./src/*"],
       "@packageJSON": ["./package.json"]
diff --git a/typedoc.json b/typedoc.json
@@ -25,7 +25,7 @@
     "./src/{vite-env.d.ts,main.tsx,routeTree.gen.ts}",
     "./src/lib/{wagmi,wallets}/**/*",
     "./src/routes/**/*",
-    "./src/utils/{logger,tokenListsCache}.ts",
+    "./src/utils/logger.ts",
     "./src/constants/contracts/**/*",
     "./src/hooks/generated.ts",
     "./src/subgraphs/**/*",
diff --git a/vercel.json b/vercel.json
@@ -5,7 +5,7 @@
       "headers": [
         {
           "key": "Content-Security-Policy-Report-Only",
-          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https: wss:; frame-src 'self' https://app.family.co https://id.porto.sh; frame-ancestors 'none'"
+          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https: wss:; frame-src 'self' https://app.family.co https://id.porto.sh https://verify.walletconnect.org; frame-ancestors 'none'"
         },
         {
           "key": "X-Content-Type-Options",
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,10 +1,9 @@
 /// <reference types="vitest/config" />
 import { resolve } from 'node:path'
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
-import react from '@vitejs/plugin-react-swc'
+import react from '@vitejs/plugin-react'
 import { defineConfig, loadEnv } from 'vite'
 import Sitemap from 'vite-plugin-sitemap'
-import tsconfigPaths from 'vite-tsconfig-paths'
 
 // https://vitejs.dev/config/
 /** @type {import('vite').UserConfig} */
@@ -14,30 +13,43 @@ export default defineConfig(({ mode }) => {
     plugins: [
       TanStackRouterVite({ target: 'react', autoCodeSplitting: true }),
       react(),
-      tsconfigPaths(),
       Sitemap({
         hostname: env.PUBLIC_APP_URL || 'https://demo.dappbooster.dev',
       }),
     ],
     build: {
       sourcemap: mode === 'development' ? 'hidden' : false,
-      rollupOptions: {
+      rolldownOptions: {
         output: {
-          manualChunks: {
-            'vendor-react': ['react', 'react-dom', 'react-dom/client'],
-            'vendor-wagmi': ['wagmi', 'viem'],
-            'vendor-tanstack': ['@tanstack/react-query', '@tanstack/react-router'],
-            'vendor-chakra': ['@chakra-ui/react'],
-            'vendor-web3': ['@reown/appkit', '@reown/appkit-adapter-wagmi'],
+          manualChunks(id) {
+            if (id.includes('node_modules/react-dom') || id.includes('node_modules/react/'))
+              return 'vendor-react'
+            if (
+              id.includes('node_modules/wagmi') ||
+              id.includes('node_modules/@wagmi/') ||
+              id.includes('node_modules/viem')
+            )
+              return 'vendor-wagmi'
+            if (
+              id.includes('node_modules/@tanstack/react-query') ||
+              id.includes('node_modules/@tanstack/react-router') ||
+              id.includes('node_modules/@tanstack/router-core') ||
+              id.includes('node_modules/@tanstack/query-core')
+            )
+              return 'vendor-tanstack'
+            if (id.includes('node_modules/@chakra-ui/')) return 'vendor-chakra'
+            if (id.includes('node_modules/@reown/appkit')) return 'vendor-web3'
           },
         },
       },
     },
     envPrefix: 'PUBLIC_',
     resolve: {
+      tsconfigPaths: true,
       alias: {
         '@/src': resolve(__dirname, './src'),
         '@packageJSON': resolve(__dirname, 'package.json'),
+        buffer: 'buffer/',
       },
     },
     test: {

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { lazy, Suspense } from 'react'`
`3`	`3`	`const RouterDevtoolsBase = import.meta.env.PROD`
`4`	`4`	`? () => null`
`5`	`5`	`: lazy(() =>`
`6`		`- import('@tanstack/router-devtools').then((res) => ({`
	`6`	`+ import('@tanstack/react-router-devtools').then((res) => ({`
`7`	`7`	`default: res.TanStackRouterDevtools,`
`8`	`8`	`})),`
`9`	`9`	`)`