chore: Migrate to turbopack

bump nextjs, react, react-dom

Author: chrstph-dvx

package.json

@@ -46,7 +46,7 @@
     "@arbitrum/sdk": "^4.0.3",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.26.0",
-    "@headlessui/react": "^2.2.2",
+    "@headlessui/react": "^2.2.8",
     "@headlessui/tailwindcss": "^0.2.2",
     "@heroicons/react": "^2.2.0",
     "@next/eslint-plugin-next": "^15.3.2",

packages/app/next.config.js

@@ -3,18 +3,13 @@
 /**
  * @type {import('next').NextConfig}
  **/
-
 module.exports = {
   distDir: 'build',
   productionBrowserSourceMaps: true,
   reactStrictMode: true,
   experimental: {
     externalDir: true,
   },
-  webpack: (config) => {
-    config.externals.push('pino-pretty', 'lokijs', 'encoding');
-    return config;
-  },
   images: {
     remotePatterns: [
       {

packages/app/package.json

@@ -4,9 +4,9 @@
   "license": "UNLICENSED",
   "private": true,
   "dependencies": {
-    "next": "^14.2.32",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "^15.5.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "tippy.js": "^6.3.7"
   },
   "peerDependencies": {
@@ -17,9 +17,9 @@
   },
   "scripts": {
     "predev": "yarn workspace portal fetch:data && yarn workspace arb-token-bridge-ui generateDenylist && yarn css:build:all",
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "prebuild": "yarn workspace portal fetch:data && yarn workspace arb-token-bridge-ui generateDenylist && yarn css:build:all",
-    "build": "next build",
+    "build": "next build --turbopack",
     "start": "next start",
     "css:build": "tailwindcss -c ./tailwind.config.js -i ./src/app.css -o ./src/styles/common.css --minify",
     "css:watch": "tailwindcss -c ./tailwind.config.js -i ./src/app.css -o ./src/styles/common.css --watch",

packages/app/src/app/(embed)/bridge/embed/buy/page.tsx

@@ -1,13 +1,9 @@
+import { SearchParamsProps } from '@/app/src/types';
 import { PathnameEnum } from '@/bridge/constants';
 
 import EmbedPageWrapper from '../EmbedPageWrapper';
 
-export default async function EmbeddedBuyPage({
-  searchParams,
-}: {
-  searchParams: {
-    [key: string]: string | string[] | undefined;
-  };
-}) {
+export default async function EmbeddedBuyPage(props: SearchParamsProps) {
+  const searchParams = await props.searchParams;
   return <EmbedPageWrapper searchParams={searchParams} redirectPath={PathnameEnum.EMBED_BUY} />;
 }

packages/app/src/app/(embed)/bridge/embed/page.tsx

@@ -1,13 +1,9 @@
+import { SearchParamsProps } from '@/app/src/types';
 import { PathnameEnum } from '@/bridge/constants';
 
 import EmbedPageWrapper from './EmbedPageWrapper';
 
-export default async function EmbededPage({
-  searchParams,
-}: {
-  searchParams: {
-    [key: string]: string | string[] | undefined;
-  };
-}) {
+export default async function EmbededPage(props: SearchParamsProps) {
+  const searchParams = await props.searchParams;
   return <EmbedPageWrapper searchParams={searchParams} redirectPath={PathnameEnum.EMBED} />;
 }

packages/app/src/app/(with-sidebar)/(portal)/arcade/page.tsx

@@ -35,10 +35,10 @@ export function generateMetadata(): Metadata {
 }
 
 type OptionalArcadePageParams = {
-  searchParams: {
+  searchParams: Promise<{
     arcadeWeekIndex?: string;
     project?: string;
-  };
+  }>;
 };
 
 // With respect to Arcade, get the current week number, so that we can show the plan accordingly
@@ -87,8 +87,8 @@ const getCurrentWeekIndex = (hardCodedWeekIndex?: number) => {
   return currentWeekIndex;
 };
 
-export default function ArcadePage(params: OptionalArcadePageParams) {
-  const currentWeekIndex = getCurrentWeekIndex(Number(params.searchParams.arcadeWeekIndex));
+export default async function ArcadePage(params: OptionalArcadePageParams) {
+  const currentWeekIndex = getCurrentWeekIndex(Number((await params.searchParams).arcadeWeekIndex));
 
   const isBeforeArcade = currentWeekIndex < 0;
   const isDuringArcade = currentWeekIndex >= 0 && currentWeekIndex < ARCADE_WEEKLY_PLAN.length;

packages/app/src/app/(with-sidebar)/(portal)/bookmarks/page.tsx

@@ -1,11 +1,4 @@
-import dynamic from 'next/dynamic';
-
-const MyProjects = dynamic(
-  () => import('@/portal/components/MyProjects').then((mod) => mod.MyProjects),
-  {
-    ssr: false,
-  },
-);
+import { MyProjects } from '@/portal/components/MyProjects';
 
 export default function Page() {
   return <MyProjects />;

packages/app/src/app/(with-sidebar)/(portal)/chains/ecosystem/page.tsx

@@ -17,8 +17,8 @@ const metadataContent = {
 };
 
 // Generate server-side metadata for this page
-export function generateMetadata(props: ServerSideAppProps): Metadata {
-  const { selectedOrbitChain } = getServerSideAppParams(props);
+export async function generateMetadata(props: ServerSideAppProps): Promise<Metadata> {
+  const { selectedOrbitChain } = await getServerSideAppParams(props);
 
   const entitySlug = selectedOrbitChain || '';
 

packages/app/src/app/(with-sidebar)/(portal)/projects/[categorySlug]/page.tsx

@@ -7,20 +7,20 @@ import { ServerSideAppProps, getServerSideAppParams } from '@/portal/common/getS
 import { CategoryPageBanner } from '@/portal/components/CategoryPageBanner';
 import { CategoryPageDescription } from '@/portal/components/CategoryPageDescription';
 import { Projects } from '@/portal/components/Projects';
-import { useFilteredProjects } from '@/portal/hooks/useFilteredProjects';
+import { getFilteredProjects } from '@/portal/hooks/useFilteredProjects';
 
 // Generate server-side metadata for this page
-export function generateMetadata(props: ServerSideAppProps): Metadata {
+export function generateMetadata(props: ServerSideAppProps): Promise<Metadata> {
   return getMetaData(props);
 }
 
-export default function Page(props: ServerSideAppProps) {
+export default async function Page(props: ServerSideAppProps) {
   const { selectedCategory, selectedSubcategories, selectedChains, selectedSort } =
-    getServerSideAppParams(props);
+    await getServerSideAppParams(props);
 
   const categoryMetaData = getCategoryDetailsById(selectedCategory);
 
-  const projects = useFilteredProjects({
+  const projects = getFilteredProjects({
     selectedCategory,
     selectedSubcategories,
     selectedChains,

packages/app/src/app/(with-sidebar)/(portal)/projects/page.tsx

@@ -1,21 +1,20 @@
 import { Metadata } from 'next';
-import React from 'react';
 
 import { getMetaData } from '@/portal/common/getMetaData';
 import { ServerSideAppProps, getServerSideAppParams } from '@/portal/common/getServerSideAppParams';
 import { Projects } from '@/portal/components/Projects';
-import { useFilteredProjects } from '@/portal/hooks/useFilteredProjects';
+import { getFilteredProjects } from '@/portal/hooks/useFilteredProjects';
 
 // Generate server-side metadata for this page
-export function generateMetadata(props: ServerSideAppProps): Metadata {
+export function generateMetadata(props: ServerSideAppProps): Promise<Metadata> {
   return getMetaData(props);
 }
 
-export default function ProjectsPage(props: ServerSideAppProps) {
+export default async function ProjectsPage(props: ServerSideAppProps) {
   const { selectedCategory, selectedSubcategories, selectedChains, selectedSort } =
-    getServerSideAppParams(props);
+    await getServerSideAppParams(props);
 
-  const projects = useFilteredProjects({
+  const projects = getFilteredProjects({
     selectedCategory,
     selectedSubcategories,
     selectedChains,