cartridge-gg · tarrencev · Jan 17, 2025 · Jan 14, 2025 · Jan 14, 2025 · Jan 16, 2025
diff --git a/examples/get-starknet/package.json b/examples/get-starknet/package.json
@@ -10,7 +10,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
-    "starknet": "^6.6.0"
+    "starknet": "^6.21.0"
   },
   "devDependencies": {
     "@cartridge/tsconfig": "workspace:*"

diff --git a/examples/next/next.config.js b/examples/next/next.config.js
@@ -6,17 +6,45 @@ const nextConfig = {
     externalDir: true,
   },
   webpack: (config, { isServer, dev }) => {
-    // Use the client static directory in the server bundle and prod mode
-    // Fixes `Error occurred prerendering page "/"`
-    config.output.webassemblyModuleFilename =
-      isServer && !dev
-        ? "../static/wasm/[modulehash].wasm"
-        : "static/wasm/[modulehash].wasm";
+    config.output.environment = {
+      ...config.output.environment,
+      asyncFunction: true,
+    };
 
     // Since Webpack 5 doesn't enable WebAssembly by default, we should do it manually
-    config.experiments = { ...config.experiments, asyncWebAssembly: true };
+    config.experiments = {
+      ...config.experiments,
+      asyncWebAssembly: true,
+      topLevelAwait: true,
+    };
+
+    // https://github.com/vercel/next.js/issues/29362#issuecomment-971377869
+    if (!dev && isServer) {
+      config.output.webassemblyModuleFilename = "chunks/[id].wasm";
+      config.plugins.push(new WasmChunksFixPlugin());
+    }
+
     return config;
   },
 };
 
+class WasmChunksFixPlugin {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap("WasmChunksFixPlugin", (compilation) => {
+      compilation.hooks.processAssets.tap(
+        { name: "WasmChunksFixPlugin" },
+        (assets) =>
+          Object.entries(assets).forEach(([pathname, source]) => {
+            if (!pathname.match(/\.wasm$/)) return;
+            compilation.deleteAsset(pathname);
+
+            const name = pathname.split("/")[1];
+            const info = compilation.assetsInfo.get(pathname);
+            compilation.emitAsset(name, source, info);
+          }),
+      );
+    });
+  }
+}
+
 module.exports = nextConfig;
diff --git a/examples/next/package.json b/examples/next/package.json
@@ -16,27 +16,27 @@
     "@cartridge/connector": "workspace:*",
     "@cartridge/controller": "workspace:*",
     "@cartridge/ui-next": "workspace:*",
-    "@starknet-react/chains": "^0.1.3",
-    "@starknet-react/core": "^3.0.2",
-    "next": "^14.2.5",
+    "@starknet-react/chains": "^3.1",
+    "@starknet-react/core": "^3.7",
+    "next": "^14.0.0",
     "next-themes": "^0.3.0",
     "prettier": "^2.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "starknet": "^6.11.0"
+    "starknet": "^6.21.0"
   },
   "devDependencies": {
     "@cartridge/tsconfig": "workspace:*",
     "@playwright/test": "^1.46.0",
     "@types/node": "^20.6.0",
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.18",
     "eslint": "^8.23.0",
-    "eslint-config-next": "^12.2.5",
+    "eslint-config-next": "^14.2.15",
     "postcss": "^8.4.35",
     "postcss-import": "^16.1.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   }
-}
+}
diff --git a/examples/next/src/app/layout.tsx b/examples/next/src/app/layout.tsx
@@ -1,22 +1,20 @@
-import { Providers } from "components/providers";
+import { ReactNode } from "react";
 import { Metadata } from "next";
-import { PropsWithChildren } from "react";
 
 import "./globals.css";
+import { Providers } from "components/providers";
+
+export const metadata: Metadata = {
+  title: "Cartridge Controller",
+  description: "Cartridge Controller Example",
+};
 
-export default function RootLayout({ children }: PropsWithChildren) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="bg-background text-foreground">
+      <body>
         <Providers>{children}</Providers>
       </body>
     </html>
   );
 }
-
-export const metadata: Metadata = {
-  title: "Cartridge Controller - Example (Next.js)",
-  icons: {
-    icon: "favicon.ico",
-  },
-};
diff --git a/examples/next/src/app/not-found.tsx b/examples/next/src/app/not-found.tsx
@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+const NotFound: FC = () => {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <h1>404 - Page Not Found</h1>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
@@ -1,16 +1,20 @@
-import { Transfer } from "components/Transfer";
-import { ManualTransferEth } from "components/ManualTransferEth";
-import { InvalidTxn } from "components/InvalidTxn";
-import { SignMessage } from "components/SignMessage";
-import { DelegateAccount } from "components/DelegateAccount";
+"use client";
+
+import { FC } from "react";
+
 import { ColorModeToggle } from "components/ColorModeToggle";
-import { Profile } from "components/Profile";
-import { LookupControllers } from "components/LookupControllers";
 import Header from "components/Header";
+import { DelegateAccount } from "components/DelegateAccount";
+import { InvalidTxn } from "components/InvalidTxn";
+import { LookupControllers } from "components/LookupControllers";
+import { ManualTransferEth } from "components/ManualTransferEth";
+import { Profile } from "components/Profile";
+import { SignMessage } from "components/SignMessage";
+import { Transfer } from "components/Transfer";
 
-export default function Home() {
+const Home: FC = () => {
   return (
-    <div className="flex flex-col p-4 gap-4">
+    <main className="flex flex-col p-4 gap-4">
       <div className="flex justify-between">
         <h2 className="text-3xl font-bold underline text-primary">
           Controller Example (Next.js)
@@ -25,6 +29,8 @@ export default function Home() {
       <InvalidTxn />
       <SignMessage />
       <LookupControllers />
-    </div>
+    </main>
   );
-}
+};
+
+export default Home;
diff --git a/examples/next/src/app/token/page.tsx b/examples/next/src/app/token/page.tsx