Merge branch 'main' into ph/engineVersionUpgrade

Author: arcoraven

.changeset/cold-dolphins-know.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Auto resolve zksync bytecode

.changeset/green-books-drop.md

@@ -0,0 +1,6 @@
+---
+"@thirdweb-dev/react-native-adapter": patch
+"thirdweb": patch
+---
+
+update dependencies

.changeset/pink-starfishes-flash.md

@@ -27,4 +27,5 @@ sitemap*.xml
 packages/*/typedoc/*
 
 *storybook.log
-storybook-static
+storybook-static
+.aider*

.changeset/tidy-radios-play.md

@@ -61,6 +61,7 @@ module.exports = {
               "useToast",
               "useClipboard",
               "Badge",
+              "Stack",
               // also the types
               "ButtonProps",
               "BadgeProps",
@@ -73,6 +74,7 @@ module.exports = {
               "MenuItemProps",
               "AspectRatioProps",
               "BadgeProps",
+              "StackProps",
             ],
             message:
               'Use the equivalent component from "tw-components" instead.',

.gitignore

@@ -5,10 +5,10 @@ const ContentSecurityPolicy = `
   img-src * data: blob:;
   media-src * data: blob:;
   object-src 'none';
-  style-src 'self' 'unsafe-inline' https://vercel.live;
-  font-src 'self' https://vercel.live https://assets.vercel.com;
+  style-src 'self' 'unsafe-inline' vercel.live;
+  font-src 'self' vercel.live assets.vercel.com framerusercontent.com;
   frame-src * data:;
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com;
   connect-src * data: blob:;
   worker-src 'self' blob:;
   block-all-mixed-content;
@@ -39,6 +39,9 @@ const securityHeaders = [
 
 const redirects = require("./redirects");
 
+// add framer paths here
+const FRAMER_PATHS = ["/connect/sign-in", "/contracts/modular-contracts"];
+
 /**
  * @returns {import('next').RemotePattern[]}
  */
@@ -128,6 +131,10 @@ const moduleExports = {
         source: "/thirdweb.eth/:path*",
         destination: "/deployer.thirdweb.eth/:path*",
       },
+      ...FRAMER_PATHS.map((path) => ({
+        source: path,
+        destination: `https://landing.thirdweb.com${path}`,
+      })),
     ];
   },
   images: {

apps/dashboard/.eslintrc.js

@@ -45,7 +45,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
-    "@sentry/nextjs": "8.30.0",
+    "@sentry/nextjs": "8.32.0",
     "@shazow/whatsabi": "^0.14.1",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^3.5.0",
@@ -61,7 +61,7 @@
     "compare-versions": "^6.1.0",
     "date-fns": "^3.6.0",
     "flat": "^6.0.1",
-    "framer-motion": "11.5.6",
+    "framer-motion": "11.9.0",
     "fuse.js": "7.0.0",
     "ioredis": "^5.4.1",
     "ipaddr.js": "^2.2.0",
@@ -109,21 +109,21 @@
     "@next/bundle-analyzer": "14.2.13",
     "@next/eslint-plugin-next": "14.2.13",
     "@playwright/test": "1.47.2",
-    "@storybook/addon-essentials": "8.3.2",
-    "@storybook/addon-interactions": "8.3.2",
-    "@storybook/addon-links": "8.3.2",
-    "@storybook/addon-onboarding": "8.3.2",
-    "@storybook/addon-viewport": "8.3.2",
-    "@storybook/blocks": "8.3.2",
-    "@storybook/nextjs": "8.3.2",
-    "@storybook/react": "8.3.2",
-    "@storybook/test": "8.3.2",
+    "@storybook/addon-essentials": "8.3.4",
+    "@storybook/addon-interactions": "8.3.4",
+    "@storybook/addon-links": "8.3.4",
+    "@storybook/addon-onboarding": "8.3.4",
+    "@storybook/addon-viewport": "8.3.4",
+    "@storybook/blocks": "8.3.4",
+    "@storybook/nextjs": "8.3.4",
+    "@storybook/react": "8.3.4",
+    "@storybook/test": "8.3.4",
     "@types/color": "^3.0.6",
     "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.8",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
@@ -135,12 +135,12 @@
     "eslint": "8.57.0",
     "eslint-config-biome": "1.8.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
-    "eslint-plugin-storybook": "^0.8.0",
-    "knip": "^5.30.5",
+    "eslint-plugin-storybook": "^0.9.0",
+    "knip": "^5.30.6",
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.47",
-    "storybook": "8.3.2",
-    "tailwindcss": "3.4.12",
+    "storybook": "8.3.4",
+    "tailwindcss": "3.4.13",
     "typescript": "5.6.2"
   }
 }

apps/dashboard/next.config.js

@@ -4,25 +4,45 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { ChevronDownIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { cn } from "../../lib/utils";
-import { NavLink } from "../ui/NavLink";
-import type { SidebarLink } from "./Sidebar";
+import {
+  RenderSidebarLinks,
+  type SidebarBaseLink,
+  type SidebarLink,
+} from "./Sidebar";
 
 export function MobileSidebar(props: {
-  links?: SidebarLink[];
+  links: SidebarLink[];
   footer?: React.ReactNode;
   trigger?: React.ReactNode;
   triggerClassName?: string;
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const pathname = usePathname();
-  const activeLink = props.links?.find((link) => {
-    if (link.exactMatch) {
-      return link.href === pathname;
+
+  const activeLink = useMemo(() => {
+    function isActive(link: SidebarBaseLink) {
+      if (link.exactMatch) {
+        return link.href === pathname;
+      }
+      return pathname?.startsWith(link.href);
+    }
+
+    for (const link of props.links) {
+      if ("group" in link) {
+        for (const subLink of link.links) {
+          if (isActive(subLink)) {
+            return subLink;
+          }
+        }
+      } else {
+        if (isActive(link)) {
+          return link;
+        }
+      }
     }
-    return pathname?.startsWith(link.href);
-  });
+  }, [props.links, pathname]);
 
   const defaultTrigger = (
     <Button
@@ -41,31 +61,15 @@ export function MobileSidebar(props: {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>{props.trigger || defaultTrigger}</DialogTrigger>
       <DialogContent
-        className="rounded-t-xl rounded-b-none p-4"
+        className="no-scrollbar max-h-[80vh] overflow-auto rounded-t-xl rounded-b-none p-4"
         dialogCloseClassName="hidden"
         onClick={(e) => {
           if (e.target instanceof HTMLAnchorElement) {
             setIsOpen(false);
           }
         }}
       >
-        <div className="flex flex-col gap-2">
-          {props.links?.map((link) => {
-            return (
-              <Button size="sm" variant="ghost" asChild key={link.href}>
-                <NavLink
-                  href={link.href}
-                  className="!text-left flex h-auto justify-start gap-2 py-3"
-                  activeClassName="bg-accent"
-                  exactMatch={link.exactMatch}
-                  tracking={link.tracking}
-                >
-                  {link.label}
-                </NavLink>
-              </Button>
-            );
-          })}
-        </div>
+        <RenderSidebarLinks links={props.links} />
         {props.footer}
       </DialogContent>
     </Dialog>

apps/dashboard/package.json

@@ -3,7 +3,7 @@ import type React from "react";
 import { cn } from "../../lib/utils";
 import { NavLink } from "../ui/NavLink";
 
-export type SidebarLink = {
+export type SidebarBaseLink = {
   href: string;
   label: React.ReactNode;
   exactMatch?: boolean;
@@ -14,6 +14,13 @@ export type SidebarLink = {
   };
 };
 
+export type SidebarLink =
+  | SidebarBaseLink
+  | {
+      group: string;
+      links: SidebarBaseLink[];
+    };
+
 type SidebarContentProps = {
   header?: React.ReactNode;
   links: SidebarLink[];
@@ -31,23 +38,42 @@ export function Sidebar(props: SidebarContentProps) {
       <div className="pt-7">
         {props.header}
         <div className="flex flex-col gap-1">
-          {props.links?.map((link) => {
-            const isExternal = link.href.startsWith("http");
-            return (
-              <NavLink
-                key={link.href}
-                href={link.href}
-                className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
-                activeClassName="text-foreground"
-                exactMatch={link.exactMatch}
-              >
-                {link.label}
-                {isExternal && <ExternalLinkIcon className="size-3" />}
-              </NavLink>
-            );
-          })}
+          <RenderSidebarLinks links={props.links} />
         </div>
       </div>
     </aside>
   );
 }
+
+export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
+  return (
+    <div className="flex flex-col gap-1">
+      {props.links.map((link, i) => {
+        if ("group" in link) {
+          return (
+            <div className={cn({ "mt-6": i !== 0 })}>
+              <p className={cn("px-3 py-2 font-medium text-foreground")}>
+                {link.group}
+              </p>
+              <RenderSidebarLinks links={link.links} />
+            </div>
+          );
+        }
+
+        const isExternal = link.href.startsWith("http");
+        return (
+          <NavLink
+            key={link.href}
+            href={link.href}
+            className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
+            activeClassName="text-foreground"
+            exactMatch={link.exactMatch}
+          >
+            {link.label}
+            {isExternal && <ExternalLinkIcon className="size-3" />}
+          </NavLink>
+        );
+      })}
+    </div>
+  );
+}