next15

apps/dashboard/next.config.js

@@ -158,7 +158,6 @@ const moduleExports = {
     serverSourceMaps: false,
   },
   cacheMaxMemorySize: 0,
-  swcMinify: true,
   compiler: {
     emotion: true,
   },

apps/dashboard/package.json

@@ -52,6 +52,7 @@
     "@tanstack/react-query": "5.59.16",
     "@tanstack/react-table": "^8.17.3",
     "@thirdweb-dev/service-utils": "workspace:*",
+    "@vercel/functions": "^1.4.2",
     "@vercel/og": "^0.6.2",
     "abitype": "1.0.6",
     "chakra-react-select": "^4.7.6",
@@ -68,7 +69,7 @@
     "ipaddr.js": "^2.2.0",
     "lottie-react": "^2.4.0",
     "lucide-react": "0.454.0",
-    "next": "14.2.15",
+    "next": "15.0.1",
     "next-plausible": "^3.12.0",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
@@ -79,10 +80,10 @@
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
     "qrcode": "^1.5.3",
-    "react": "18.3.1",
+    "react": "19.0.0-rc-69d4b800-20241021",
     "react-children-utilities": "^2.10.0",
     "react-day-picker": "^8.10.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
     "react-dropzone": "^14.2.9",
     "react-error-boundary": "^4.1.2",
     "react-hook-form": "7.52.0",
@@ -105,8 +106,8 @@
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "2.0.2",
-    "@next/bundle-analyzer": "14.2.15",
-    "@next/eslint-plugin-next": "14.2.15",
+    "@next/bundle-analyzer": "15.0.1",
+    "@next/eslint-plugin-next": "15.0.1",
     "@playwright/test": "1.48.2",
     "@storybook/addon-essentials": "8.3.6",
     "@storybook/addon-interactions": "8.3.6",
@@ -122,8 +123,8 @@
     "@types/papaparse": "^5.3.15",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected].1",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
     "@types/swagger-ui-react": "^4.18.3",
@@ -133,7 +134,7 @@
     "checkly": "^4.8.1",
     "eslint": "8.57.0",
     "eslint-config-biome": "1.9.3",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-fa06e2c-20241014",
+    "eslint-plugin-react-compiler": "19.0.0-beta-8a03594-20241020",
     "eslint-plugin-storybook": "^0.9.0",
     "knip": "5.34.2",
     "next-sitemap": "^4.2.3",

apps/dashboard/src/@/api/projects.ts

@@ -21,7 +21,7 @@ export type Project = {
 };
 
 export async function getProjects(teamSlug: string) {
-  const cookiesManager = cookies();
+  const cookiesManager = await cookies();
   const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
   const token = activeAccount
     ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
@@ -46,7 +46,7 @@ export async function getProjects(teamSlug: string) {
 }
 
 export async function getProject(teamSlug: string, projectSlug: string) {
-  const cookiesManager = cookies();
+  const cookiesManager = await cookies();
   const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
   const token = activeAccount
     ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value

apps/dashboard/src/@/api/team-members.ts

@@ -25,7 +25,7 @@ export type TeamMember = {
 };
 
 export async function getMembers(teamSlug: string) {
-  const token = getAuthToken();
+  const token = await getAuthToken();
 
   if (!token) {
     return undefined;

apps/dashboard/src/@/api/team.ts

@@ -23,7 +23,7 @@ export type Team = {
 };
 
 export async function getTeamBySlug(slug: string) {
-  const cookiesManager = cookies();
+  const cookiesManager = await cookies();
   const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
   const token = activeAccount
     ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
@@ -45,7 +45,7 @@ export async function getTeamBySlug(slug: string) {
 }
 
 export async function getTeams() {
-  const cookiesManager = cookies();
+  const cookiesManager = await cookies();
   const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
   const token = activeAccount
     ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value

apps/dashboard/src/@/constants/cookie.ts

@@ -3,10 +3,10 @@ import { cookies } from "next/headers";
 export const COOKIE_ACTIVE_ACCOUNT = "tw_active_account";
 export const COOKIE_PREFIX_TOKEN = "tw_token_";
 
-export function getActiveAccountCookie() {
-  return cookies().get(COOKIE_ACTIVE_ACCOUNT)?.value;
+export async function getActiveAccountCookie() {
+  return (await cookies()).get(COOKIE_ACTIVE_ACCOUNT)?.value;
 }
 
-export function getJWTCookie(address: string) {
-  return cookies().get(COOKIE_PREFIX_TOKEN + address)?.value;
+export async function getJWTCookie(address: string) {
+  return (await cookies()).get(COOKIE_PREFIX_TOKEN + address)?.value;
 }

apps/dashboard/src/@3rdweb-sdk/react/components/roles/admin-only.tsx

@@ -5,6 +5,8 @@ import {
 import type { ThirdwebContract } from "thirdweb";
 import type { ComponentWithChildren } from "types/component-with-children";
 
+import type { JSX } from "react";
+
 interface AdminOnlyProps {
   contract: ThirdwebContract;
   failOpen?: boolean;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -32,9 +32,10 @@ import { ChainHeader } from "./components/server/chain-header";
 
 // TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
 
-export async function generateMetadata({
-  params,
-}: { params: { chain_id: string } }): Promise<Metadata> {
+export async function generateMetadata(props: {
+  params: Promise<{ chain_id: string }>;
+}): Promise<Metadata> {
+  const params = await props.params;
   const chain = await getChain(params.chain_id);
   const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
   const title = `${sanitizedChainName}: RPC and Chain Settings`;
@@ -54,13 +55,12 @@ export async function generateMetadata({
 }
 
 // this is the dashboard layout file
-export default async function ChainPageLayout({
-  children,
-  params,
-}: {
+export default async function ChainPageLayout(props: {
   children: React.ReactNode;
-  params: { chain_id: string };
+  params: Promise<{ chain_id: string }>;
 }) {
+  const params = await props.params;
+  const { children } = props;
   const chain = await getChain(params.chain_id);
 
   if (params.chain_id !== chain.slug) {

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx

@@ -13,9 +13,10 @@ import { ChainCTA } from "./components/server/cta-card";
 import { ExplorersSection } from "./components/server/explorer-section";
 
 export default async function Page(props: {
-  params: { chain_id: string };
+  params: Promise<{ chain_id: string }>;
 }) {
-  const chain = await getChain(props.params.chain_id);
+  const params = await props.params;
+  const chain = await getChain(params.chain_id);
   const chainMetadata = await getChainMetadata(chain.chainId);
   const isDeprecated = chain.status === "deprecated";
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/popular/page.tsx

@@ -7,14 +7,16 @@ import { getChain } from "../../../utils";
 export const dynamic = "force-dynamic";
 
 export default async function Page(props: {
-  params: { chain_id: string };
-  searchParams: { page?: number; sortBy?: SortBy };
+  params: Promise<{ chain_id: string }>;
+  searchParams: Promise<{ page?: number; sortBy?: SortBy }>;
 }) {
-  const chain = await getChain(props.params.chain_id);
+  const searchParams = await props.searchParams;
+  const params = await props.params;
+  const chain = await getChain(params.chain_id);
   const topContracts = await fetchTopContracts({
     chainId: chain.chainId,
-    page: props.searchParams.page,
-    sortBy: props.searchParams.sortBy,
+    page: searchParams.page,
+    sortBy: searchParams.sortBy,
     perPage: 15,
     timeRange: "month",
   });
@@ -24,22 +26,18 @@ export default async function Page(props: {
       <h2 className="mb-2 font-semibold text-2xl tracking-tighter">
         Popular Contracts
       </h2>
-
       <p className="text-muted-foreground text-sm">
         Explore contracts on Ethereum and sort them by your preferred metrics
       </p>
-
       <div className="h-8" />
-
       {topContracts.length > 0 && (
         <TrendingContractSection
           topContracts={topContracts}
           chainId={chain.chainId}
-          searchParams={props.searchParams}
+          searchParams={searchParams}
           showPagination={true}
         />
       )}
-
       {topContracts.length === 0 && (
         <div className="flex h-[200px] items-center justify-center rounded-lg border border-border text-lg text-muted-foreground">
           <div className="flex items-center gap-2">

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/page.tsx

@@ -6,12 +6,13 @@ import { ContractDirectListingsPage } from "./ContractDirectListingsPage";
 import { ContractDirectListingsPageClient } from "./ContractDirectListingsPage.client";
 
 export default async function Page(props: {
-  params: {
+  params: Promise<{
     contractAddress: string;
     chain_id: string;
-  };
+  }>;
 }) {
-  const info = await getContractPageParamsInfo(props.params);
+  const params = await props.params;
+  const info = await getContractPageParamsInfo(params);
 
   if (!info) {
     notFound();
@@ -26,7 +27,7 @@ export default async function Page(props: {
   );
 
   if (!isDirectListingSupported) {
-    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+    redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return <ContractDirectListingsPage contract={info.contract} />;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/page.tsx

@@ -6,12 +6,13 @@ import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";
 import { ContractEnglishAuctionsPageClient } from "./ContractEnglishAuctionsPage.client";
 
 export default async function Page(props: {
-  params: {
+  params: Promise<{
     contractAddress: string;
     chain_id: string;
-  };
+  }>;
 }) {
-  const info = await getContractPageParamsInfo(props.params);
+  const params = await props.params;
+  const info = await getContractPageParamsInfo(params);
 
   if (!info) {
     notFound();
@@ -26,7 +27,7 @@ export default async function Page(props: {
   );
 
   if (!isEnglishAuctionSupported) {
-    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+    redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return <ContractEnglishAuctionsPage contract={info.contract} />;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx

@@ -416,7 +416,7 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
 
 interface SnapshotTableProps {
   data: SnapshotAddressInput[];
-  portalRef: React.RefObject<HTMLDivElement>;
+  portalRef: React.RefObject<HTMLDivElement | null>;
 }
 
 const SnapshotTableColumns = [

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractFromParams.ts

@@ -20,7 +20,7 @@ export async function getContractPageParamsInfo(params: {
     // move on
   }
 
-  const cookieStore = cookies();
+  const cookieStore = await cookies();
   const localChainStoreValue = cookieStore.get(TW_LOCAL_CHAIN_STORE)?.value;
 
   if (localChainStoreValue) {
@@ -47,7 +47,7 @@ export async function getContractPageParamsInfo(params: {
   }
 
   // attempt to get the auth token
-  const token = getAuthToken();
+  const token = await getAuthToken();
 
   const contract = getContract({
     address: contractAddress,

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/page.tsx

@@ -6,12 +6,13 @@ import { AccountSignersClient } from "./AccountSigners.client";
 import { AccountSigners } from "./components/account-signers";
 
 export default async function Page(props: {
-  params: {
+  params: Promise<{
     contractAddress: string;
     chain_id: string;
-  };
+  }>;
 }) {
-  const info = await getContractPageParamsInfo(props.params);
+  const params = await props.params;
+  const info = await getContractPageParamsInfo(params);
 
   if (!info) {
     notFound();
@@ -27,7 +28,7 @@ export default async function Page(props: {
     await getContractPageMetadata(contract);
 
   if (!isAccountPermissionsSupported) {
-    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+    redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return <AccountSigners contract={contract} />;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/page.tsx

@@ -6,12 +6,13 @@ import { AccountPage } from "./AccountPage";
 import { AccountPageClient } from "./AccountPage.client";
 
 export default async function Page(props: {
-  params: {
+  params: Promise<{
     contractAddress: string;
     chain_id: string;
-  };
+  }>;
 }) {
-  const info = await getContractPageParamsInfo(props.params);
+  const params = await props.params;
+  const info = await getContractPageParamsInfo(params);
 
   if (!info) {
     notFound();
@@ -27,7 +28,7 @@ export default async function Page(props: {
   const { isAccount } = await getContractPageMetadata(contract);
 
   if (!isAccount) {
-    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+    redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return <AccountPage contract={contract} chainMetadata={chainMetadata} />;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/page.tsx

@@ -6,12 +6,13 @@ import { AccountsPage } from "./AccountsPage";
 import { AccountsPageClient } from "./AccountsPage.client";
 
 export default async function Page(props: {
-  params: {
+  params: Promise<{
     contractAddress: string;
     chain_id: string;
-  };
+  }>;
 }) {
-  const info = await getContractPageParamsInfo(props.params);
+  const params = await props.params;
+  const info = await getContractPageParamsInfo(params);
 
   if (!info) {
     notFound();
@@ -26,7 +27,7 @@ export default async function Page(props: {
   const { isAccountFactory } = await getContractPageMetadata(contract);
 
   if (!isAccountFactory) {
-    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+    redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return <AccountsPage contract={contract} />;