Version Packages (#6589)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the layout and functionality of the `Page` component in `apps/playground-web/src/app/connect/pay/backend/page.tsx`. It improves the presentation of the Universal Bridge REST API information and adds a link to view all endpoints.

### Detailed summary
- Wrapped the header and description in a `div` for better layout.
- Added a `Link` component with a button to "View all endpoints".
- Changed the title of the `BlueprintSection` from "Available endpoints" to "Available GET endpoints".
- Updated the filtering of `blueprints` to only include those with defined `get` properties.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/dashboard/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import "@/styles/globals.css";
+import "../src/global.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MoonIcon, SunIcon } from "lucide-react";
 import { ThemeProvider, useTheme } from "next-themes";

apps/dashboard/framer-rewrites.js

@@ -49,12 +49,11 @@ module.exports = [
   "/templates/:template_slug",
   // -- learn --
   "/learn",
-  "/learn/tutorials",
-  "/learn/tutorials/:tutorial_slug",
   "/learn/guides",
   "/learn/guides/:guide_slug",
   "/learn/courses",
   "/learn/glossary",
+  "/learn/glossary/:glossary_slug",
   // -- faucets --
   "/faucets",
 ];

apps/dashboard/redirects.js

@@ -361,6 +361,19 @@ async function redirects() {
         "/team/:team_slug/:project_slug/connect/universal-bridge/:path*",
       permanent: false,
     },
+
+    // all /learn/tutorials (and sub-routes) -> /learn/guides
+    {
+      source: "/learn/tutorials/:path*",
+      destination: "/learn/guides/:path*",
+      permanent: false,
+    },
+    {
+      source: "/learn/tutorials",
+      destination: "/learn/guides",
+      permanent: false,
+    },
+
     ...legacyDashboardToTeamRedirects,
   ];
 }

apps/dashboard/src/@/components/blocks/MobileSidebar.tsx

@@ -19,30 +19,7 @@ export function MobileSidebar(props: {
   triggerClassName?: string;
 }) {
   const [isOpen, setIsOpen] = useState(false);
-  const pathname = usePathname();
-
-  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;
-        }
-      }
-    }
-  }, [props.links, pathname]);
+  const activeLink = useActiveSidebarLink(props.links);
 
   const defaultTrigger = (
     <Button
@@ -75,3 +52,32 @@ export function MobileSidebar(props: {
     </Dialog>
   );
 }
+
+export function useActiveSidebarLink(links: SidebarLink[]) {
+  const pathname = usePathname();
+
+  const activeLink = useMemo(() => {
+    function isActive(link: SidebarBaseLink) {
+      if (link.exactMatch) {
+        return link.href === pathname;
+      }
+      return pathname?.startsWith(link.href);
+    }
+
+    for (const link of links) {
+      if ("group" in link) {
+        for (const subLink of link.links) {
+          if (isActive(subLink)) {
+            return subLink;
+          }
+        }
+      } else if ("href" in link) {
+        if (isActive(link)) {
+          return link;
+        }
+      }
+    }
+  }, [links, pathname]);
+
+  return activeLink;
+}

apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx

@@ -18,17 +18,39 @@ export function MultiNetworkSelector(props: {
   onChange: (chainIds: number[]) => void;
   disableChainId?: boolean;
   className?: string;
+  priorityChains?: number[];
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
   const options = useMemo(() => {
-    return allChains.map((chain) => {
+    let sortedChains = allChains;
+
+    if (props.priorityChains) {
+      const priorityChainsSet = new Set();
+      for (const chainId of props.priorityChains || []) {
+        priorityChainsSet.add(chainId);
+      }
+
+      const priorityChains = (props.priorityChains || [])
+        .map((chainId) => {
+          return idToChain.get(chainId);
+        })
+        .filter((v) => !!v);
+
+      const otherChains = allChains.filter(
+        (chain) => !priorityChainsSet.has(chain.chainId),
+      );
+
+      sortedChains = [...priorityChains, ...otherChains];
+    }
+
+    return sortedChains.map((chain) => {
       return {
         label: cleanChainName(chain.name),
         value: String(chain.chainId),
       };
     });
-  }, [allChains]);
+  }, [allChains, props.priorityChains, idToChain]);
 
   const searchFn = useCallback(
     (option: Option, searchValue: string) => {

apps/dashboard/src/@/components/blocks/Sidebar.tsx

@@ -2,11 +2,13 @@ import { ExternalLinkIcon } from "lucide-react";
 import type React from "react";
 import { cn } from "../../lib/utils";
 import { NavLink } from "../ui/NavLink";
+import { Separator } from "../ui/separator";
 
 export type SidebarBaseLink = {
   href: string;
   label: React.ReactNode;
   exactMatch?: boolean;
+  icon?: React.FC<{ className?: string }>;
   tracking?: {
     category: string;
     action: string;
@@ -19,6 +21,9 @@ export type SidebarLink =
   | {
       group: string;
       links: SidebarBaseLink[];
+    }
+  | {
+      separator: true;
     };
 
 type SidebarContentProps = {
@@ -27,21 +32,18 @@ type SidebarContentProps = {
   className?: string;
 };
 
-export function Sidebar(props: SidebarContentProps) {
+export function CustomSidebar(props: SidebarContentProps) {
   return (
-    <aside
-      className={cn(
-        "sticky top-0 hidden w-[230px] flex-shrink-0 self-start lg:block",
-        props.className,
-      )}
-    >
-      <div className="py-7">
-        {props.header}
-        <div className="flex flex-col gap-1">
-          <RenderSidebarLinks links={props.links} />
+    <div className={cn("hidden w-[230px] shrink-0 lg:block", props.className)}>
+      <aside className="sticky top-0 self-start">
+        <div className="py-7">
+          {props.header}
+          <div className="flex flex-col gap-1">
+            <RenderSidebarLinks links={props.links} />
+          </div>
         </div>
-      </div>
-    </aside>
+      </aside>
+    </div>
   );
 }
 
@@ -61,6 +63,10 @@ export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
           );
         }
 
+        if ("separator" in link) {
+          return <Separator className="my-2" />;
+        }
+
         const isExternal = link.href.startsWith("http");
         return (
           <NavLink
@@ -68,9 +74,10 @@ export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
             key={i}
             href={link.href}
             className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-accent"
-            activeClassName="text-foreground"
+            activeClassName="text-foreground bg-accent"
             exactMatch={link.exactMatch}
           >
+            {link.icon && <link.icon className="size-4" />}
             {link.label}
             {isExternal && <ExternalLinkIcon className="size-3" />}
           </NavLink>

apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

@@ -1,6 +1,22 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
 import { cn } from "../../lib/utils";
-import { MobileSidebar } from "./MobileSidebar";
-import { Sidebar, type SidebarLink } from "./Sidebar";
+import { NavLink } from "../ui/NavLink";
+import { Separator } from "../ui/separator";
+import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
+import { CustomSidebar, type SidebarLink } from "./Sidebar";
 
 export function SidebarLayout(props: {
   sidebarLinks: SidebarLink[];
@@ -17,7 +33,10 @@ export function SidebarLayout(props: {
         props.className,
       )}
     >
-      <Sidebar links={sidebarLinks} className={props.desktopSidebarClassName} />
+      <CustomSidebar
+        links={sidebarLinks}
+        className={props.desktopSidebarClassName}
+      />
       <MobileSidebar
         links={sidebarLinks}
         triggerClassName={props.mobileSidebarClassName}
@@ -29,3 +48,118 @@ export function SidebarLayout(props: {
     </div>
   );
 }
+
+export function FullWidthSidebarLayout(props: {
+  contentSidebarLinks: SidebarLink[];
+  footerSidebarLinks?: SidebarLink[];
+  children: React.ReactNode;
+  className?: string;
+  footer?: React.ReactNode;
+}) {
+  const { contentSidebarLinks, children, footerSidebarLinks } = props;
+  return (
+    <div
+      className={cn(
+        "relative flex w-full flex-1 overflow-y-hidden",
+        props.className,
+      )}
+    >
+      {/* left - sidebar */}
+      <Sidebar collapsible="icon" side="left">
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <RenderSidebarGroup
+                sidebarLinks={contentSidebarLinks}
+                groupName={undefined}
+              />
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+
+        {footerSidebarLinks && (
+          <SidebarFooter className="pb-3">
+            <RenderSidebarGroup
+              sidebarLinks={footerSidebarLinks}
+              groupName={undefined}
+            />
+          </SidebarFooter>
+        )}
+
+        <SidebarRail />
+      </Sidebar>
+
+      {/* right - content */}
+      <div className="flex h-full flex-grow flex-col overflow-y-auto">
+        <MobileSidebarTrigger
+          links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
+        />
+
+        <main className="container z-0 flex min-w-0 max-w-[1280px] grow flex-col pb-20 max-sm:w-full lg:pt-6">
+          {children}
+        </main>
+        {props.footer}
+      </div>
+    </div>
+  );
+}
+
+function RenderSidebarGroup(props: {
+  sidebarLinks: SidebarLink[];
+  groupName: string | undefined;
+}) {
+  const { sidebarLinks } = props;
+  const sidebar = useSidebar();
+
+  return (
+    <SidebarMenu className="gap-1.5">
+      {sidebarLinks.map((link) => {
+        if ("href" in link) {
+          return (
+            <SidebarMenuItem key={link.href}>
+              <SidebarMenuButton asChild>
+                <NavLink
+                  href={link.href}
+                  className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
+                  activeClassName="text-foreground bg-accent"
+                  exactMatch={link.exactMatch}
+                  tracking={link.tracking}
+                  onClick={() => {
+                    sidebar.setOpenMobile(false);
+                  }}
+                >
+                  {link.icon && <link.icon className="size-4" />}
+                  <span>{link.label}</span>
+                </NavLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          );
+        }
+
+        if ("separator" in link) {
+          return <SidebarSeparator className="my-1" />;
+        }
+
+        return (
+          <RenderSidebarGroup
+            sidebarLinks={link.links}
+            groupName={link.group}
+            key={link.group}
+          />
+        );
+      })}
+    </SidebarMenu>
+  );
+}
+
+function MobileSidebarTrigger(props: { links: SidebarLink[] }) {
+  const activeLink = useActiveSidebarLink(props.links);
+
+  return (
+    <div className="mb-4 flex items-center gap-3 border-b px-4 py-4 lg:hidden">
+      <SidebarTrigger className="size-4" />
+      <Separator orientation="vertical" className="h-4" />
+      {activeLink && <span className="text-sm">{activeLink.label}</span>}
+    </div>
+  );
+}

apps/dashboard/src/@/components/ui/NavLink.tsx

@@ -15,6 +15,7 @@ export type NavButtonProps = {
     action: string;
     label: string;
   };
+  onClick?: () => void;
 };
 
 export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
@@ -30,7 +31,9 @@ export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
       href={props.href}
       className={cn(props.className, isActive && props.activeClassName)}
       target={props.href.startsWith("http") ? "_blank" : undefined}
+      prefetch={false}
       onClick={() => {
+        props.onClick?.();
         if (props.tracking) {
           track({
             category: props.tracking.category,

apps/dashboard/src/@/components/ui/breadcrumb.tsx

@@ -96,7 +96,10 @@ const BreadcrumbEllipsis = ({
   <span
     role="presentation"
     aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn(
+      "relative flex h-9 w-9 items-center justify-center",
+      className,
+    )}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />

apps/dashboard/src/@/components/ui/pagination.tsx

@@ -94,7 +94,10 @@ const PaginationEllipsis = ({
 }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn(
+      "relative flex h-9 w-9 items-center justify-center",
+      className,
+    )}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />

apps/dashboard/src/@/components/ui/sidebar.tsx

@@ -0,0 +1,773 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import { PanelLeft } from "lucide-react";
+import * as React from "react";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        // eslint-disable-next-line react-compiler/react-compiler
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open],
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open);
+    }, [isMobile, setOpen]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed";
+
+    const contextValue = React.useMemo<SidebarContextProps>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, toggleSidebar],
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className,
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  },
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>Sidebar</SheetTitle>
+              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer relative hidden flex-shrink-0 text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+          )}
+        />
+        <div
+          className={cn(
+            "absolute inset-y-0 z-10 hidden h-full w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className,
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:-inset-2 after:absolute after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  },
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:-inset-2 after:absolute after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};

apps/dashboard/src/@/hooks/use-mobile.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx

@@ -28,7 +28,7 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
           <div className="h-6" />
 
           <h2 className="px-4 text-center font-semibold text-lg tracking-tight">
-            Buy Funds on {sanitizedChainName} using thirdweb Pay
+            Buy Funds on {sanitizedChainName} using Universal Bridge
           </h2>
 
           <div className="h-2" />
@@ -50,8 +50,9 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
           <Link
             href="https://portal.thirdweb.com/connect/pay/overview"
             className="inline-flex items-center gap-1.5 text-muted-foreground text-sm hover:text-foreground"
+            target="_blank"
           >
-            Learn more about thirdweb Pay
+            Learn more about Universal Bridge
             <ExternalLinkIcon className="size-3" />
           </Link>
         </div>

apps/dashboard/src/app/(dashboard)/(chain)/utils.ts

@@ -47,6 +47,8 @@ import metalBanner from "./temp-assets/metalBanner.png";
 import plumeBanner from "./temp-assets/plumeBanner.png";
 
 import plumeCTA from "./temp-assets/plumeCTA.png";
+import reactiveBanner from "./temp-assets/reactiveBanner.jpg";
+import reactiveCTA from "./temp-assets/reactiveCTA.jpg";
 import rivalzBanner from "./temp-assets/rivalzBanner.png";
 import rivalzCTA from "./temp-assets/rivalzCTA.png";
 import rootStockBanner from "./temp-assets/rootstock-banner.png";
@@ -575,6 +577,18 @@ const chainMetaRecord = {
       buttonText: "Learn More",
     },
   },
+  //Reactive Mainnet
+  1597: {
+    headerImgUrl: reactiveBanner.src,
+    about:
+      "Web3’s first IFTTT infrastructure. Automate multi-chain workflows with event-driven logic – execute actions without compromising decentralization.",
+    cta: {
+      backgroundImageUrl: reactiveCTA.src,
+      title: "Turn Smart Contracts Reactive",
+      buttonLink: "https://dev.reactive.network",
+      buttonText: "Learn More",
+    },
+  },
   //Saakuru Mainnet
   7225878: {
     headerImgUrl: saakuruBanner.src,

apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx

@@ -13,7 +13,7 @@ export function DeployedContractsPageHeader(props: {
   const [importModalOpen, setImportModalOpen] = useState(false);
 
   return (
-    <div className="border-b">
+    <div>
       <ImportModal
         isOpen={importModalOpen}
         onClose={() => {
@@ -23,27 +23,25 @@ export function DeployedContractsPageHeader(props: {
         projectId={props.projectId}
       />
 
-      <div className="container">
-        <div className="flex flex-col gap-3 py-10 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <h1 className="font-semibold text-3xl tracking-tight">Contracts</h1>
-          </div>
-          <div className="flex gap-3 [&>*]:grow">
-            <Button
-              className="gap-2 bg-card"
-              variant="outline"
-              onClick={() => setImportModalOpen(true)}
-            >
-              <DownloadIcon className="size-4" />
-              Import contract
-            </Button>
-            <Button asChild className="gap-2">
-              <Link href="/explore">
-                <PlusIcon className="size-4" />
-                Deploy contract
-              </Link>
-            </Button>
-          </div>
+      <div className="flex flex-col gap-3 pb-6 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h1 className="font-semibold text-3xl tracking-tight">Contracts</h1>
+        </div>
+        <div className="flex gap-3 [&>*]:grow">
+          <Button
+            className="gap-2 bg-card"
+            variant="outline"
+            onClick={() => setImportModalOpen(true)}
+          >
+            <DownloadIcon className="size-4" />
+            Import contract
+          </Button>
+          <Button asChild className="gap-2">
+            <Link href="/explore">
+              <PlusIcon className="size-4" />
+              Deploy contract
+            </Link>
+          </Button>
         </div>
       </div>
     </div>

apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx

@@ -12,13 +12,12 @@ export function DeployedContractsPage(props: {
   authToken: string;
 }) {
   return (
-    <div className="flex grow flex-col pb-20">
+    <div className="flex grow flex-col">
       <DeployedContractsPageHeader
         teamId={props.teamId}
         projectId={props.projectId}
       />
-      <div className="h-10" />
-      <div className="container flex grow flex-col">
+      <div className="flex grow flex-col">
         <Suspense fallback={<Loading />}>
           <DeployedContractsPageAsync {...props} />
         </Suspense>

apps/dashboard/src/app/account/layout.tsx

@@ -4,6 +4,7 @@ import { AppFooter } from "@/components/blocks/app-footer";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type React from "react";
 import { TabPathLinks } from "../../@/components/ui/tabs";
+import { AnnouncementBanner } from "../../components/notices/AnnouncementBanner";
 import { getAuthTokenWalletAddress } from "../api/lib/getAuthToken";
 import { TWAutoConnect } from "../components/autoconnect";
 import { loginRedirect } from "../login/loginRedirect";
@@ -53,6 +54,7 @@ async function HeaderAndNav(props: {
 
   return (
     <div className="bg-card">
+      <AnnouncementBanner />
       <AccountHeader
         teamsAndProjects={teamsAndProjects}
         account={props.twAccount}

apps/dashboard/src/app/components/root-providers.tsx

@@ -1,22 +0,0 @@
-// app/providers.tsx
-"use client";
-import posthog from "posthog-js";
-import { PostHogProvider as PHProvider } from "posthog-js/react";
-
-if (typeof window !== "undefined") {
-  posthog.init(
-    process.env.NEXT_PUBLIC_POSTHOG_API_KEY ||
-      "phc_hKK4bo8cHZrKuAVXfXGpfNSLSJuucUnguAgt2j6dgSV",
-    {
-      api_host: "https://a.thirdweb.com",
-      autocapture: true,
-      debug: false,
-      capture_pageview: true,
-      disable_session_recording: true,
-    },
-  );
-}
-
-export function PostHogProvider({ children }: { children: React.ReactNode }) {
-  return <PHProvider client={posthog}>{children}</PHProvider>;
-}

apps/dashboard/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import "@/styles/globals.css";
+import "../global.css";
 import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import type { Metadata } from "next";
@@ -6,11 +6,12 @@ import PlausibleProvider from "next-plausible";
 import { Inter } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
 import { Suspense } from "react";
-import { OrganizeContractsToProjectsBanner } from "../components/notices/AnnouncementBanner";
 import { OpCreditsGrantedModalWrapperServer } from "../components/onboarding/OpCreditsGrantedModalWrapperServer";
 import { PosthogIdentifierServer } from "../components/wallets/PosthogIdentifierServer";
+import { PHProvider } from "../lib/posthog/Posthog";
+import { PosthogHeadSetup } from "../lib/posthog/PosthogHeadSetup";
+import { PostHogPageView } from "../lib/posthog/PosthogPageView";
 import { EnsureValidConnectedWalletLoginServer } from "./components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
-import { PostHogProvider } from "./components/root-providers";
 import { AppRouterProviders } from "./providers";
 
 const fontSans = Inter({
@@ -64,15 +65,16 @@ export default function RootLayout({
           customDomain="https://pl.thirdweb.com"
           selfHosted
         />
+        <PosthogHeadSetup />
       </head>
-      <PostHogProvider>
+      <PHProvider>
+        <PostHogPageView />
         <body
           className={cn(
             "bg-background font-sans antialiased",
             fontSans.variable,
           )}
         >
-          <OrganizeContractsToProjectsBanner />
           <AppRouterProviders>
             {children}
             <Suspense fallback={null}>
@@ -93,7 +95,7 @@ export default function RootLayout({
             showSpinner={false}
           />
         </body>
-      </PostHogProvider>
+      </PHProvider>
     </html>
   );
 }

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx

@@ -13,7 +13,7 @@ import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import { type NebulaContext, promptNebula } from "../api/chat";
 import { createSession, updateSession } from "../api/session";
 import type { SessionInfo } from "../api/types";
@@ -32,7 +32,6 @@ export function ChatPageContent(props: {
   initialPrompt: string | undefined;
 }) {
   const address = useActiveAccount()?.address;
-  const activeChain = useActiveWalletChain();
   const client = useThirdwebClient(props.authToken);
   const [userHasSubmittedMessage, setUserHasSubmittedMessage] = useState(false);
   const [messages, setMessages] = useState<Array<ChatMessage>>(() => {
@@ -133,14 +132,9 @@ export function ChatPageContent(props: {
         // ignore local storage errors
       }
 
-      // else - use the active chain
-      updatedContextFilters.chainIds = activeChain
-        ? [activeChain.id.toString()]
-        : [];
-
       return updatedContextFilters;
     });
-  }, [address, isNewSession, hasUserUpdatedContextFilters, activeChain]);
+  }, [address, isNewSession, hasUserUpdatedContextFilters]);
 
   const [sessionId, _setSessionId] = useState<string | undefined>(
     props.session?.id,

apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx

@@ -199,6 +199,17 @@ export function ContextFiltersForm(props: {
                     onChange={(values) => {
                       form.setValue("chainIds", values.join(","));
                     }}
+                    priorityChains={[
+                      1, // ethereum
+                      56, // bnb smart chain mainnet (bsc)
+                      42161, // arbitrum one mainnet
+                      8453, // base mainnet
+                      43114, // avalanche mainnet
+                      146, // sonic
+                      137, // polygon
+                      80094, // berachain mainnet
+                      10, // optimism
+                    ]}
                   />
                 </FormControl>
                 <FormMessage />

apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx

@@ -1,7 +1,9 @@
 import { getProjects } from "@/api/projects";
 import { getTeamNebulaWaitList, getTeams } from "@/api/team";
+import { AppFooter } from "@/components/blocks/app-footer";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { redirect } from "next/navigation";
+import { AnnouncementBanner } from "../../../../components/notices/AnnouncementBanner";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import { getAuthTokenWalletAddress } from "../../../api/lib/getAuthToken";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
@@ -42,6 +44,7 @@ export default async function TeamLayout(props: {
 
   return (
     <div className="flex h-full grow flex-col">
+      <AnnouncementBanner />
       <div className="bg-card">
         <TeamHeaderLoggedIn
           currentTeam={team}
@@ -92,6 +95,7 @@ export default async function TeamLayout(props: {
       </div>
 
       <main className="flex grow flex-col">{props.children}</main>
+      <AppFooter />
     </div>
   );
 }

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx

@@ -0,0 +1,97 @@
+"use client";
+import { FullWidthSidebarLayout } from "@/components/blocks/SidebarLayout";
+import { AppFooter } from "@/components/blocks/app-footer";
+import {
+  BookTextIcon,
+  BoxIcon,
+  HomeIcon,
+  SettingsIcon,
+  WalletIcon,
+} from "lucide-react";
+import { ContractIcon } from "../../../../(dashboard)/(chain)/components/server/icons/ContractIcon";
+import { InsightIcon } from "../../../../(dashboard)/(chain)/components/server/icons/InsightIcon";
+import { PayIcon } from "../../../../(dashboard)/(chain)/components/server/icons/PayIcon";
+import { SmartAccountIcon } from "../../../../(dashboard)/(chain)/components/server/icons/SmartAccountIcon";
+
+export function ProjectSidebarLayout(props: {
+  layoutPath: string;
+  children: React.ReactNode;
+}) {
+  const { layoutPath, children } = props;
+
+  const tracking = (label: string) => ({
+    category: "project-sidebar",
+    action: "click",
+    label,
+  });
+
+  return (
+    <FullWidthSidebarLayout
+      footer={<AppFooter />}
+      contentSidebarLinks={[
+        {
+          href: layoutPath,
+          exactMatch: true,
+          label: "Overview",
+          icon: HomeIcon,
+          tracking: tracking("overview"),
+        },
+        {
+          label: "In-App Wallets",
+          href: `${layoutPath}/connect/in-app-wallets`,
+          icon: WalletIcon,
+          tracking: tracking("in-app-wallets"),
+        },
+        {
+          label: "Account Abstraction",
+          href: `${layoutPath}/connect/account-abstraction`,
+          icon: SmartAccountIcon,
+          tracking: tracking("account-abstraction"),
+        },
+        {
+          label: "Universal Bridge",
+          href: `${layoutPath}/connect/universal-bridge`,
+          icon: PayIcon,
+          tracking: tracking("universal-bridge"),
+        },
+        {
+          href: `${layoutPath}/contracts`,
+          label: "Contracts",
+          icon: ContractIcon,
+          tracking: tracking("contracts"),
+        },
+        {
+          href: `${layoutPath}/insight`,
+          label: "Insight",
+          icon: InsightIcon,
+          tracking: tracking("insight"),
+        },
+      ]}
+      footerSidebarLinks={[
+        {
+          href: `${layoutPath}/settings`,
+          label: "Project Settings",
+          icon: SettingsIcon,
+          tracking: tracking("project-settings"),
+        },
+        {
+          separator: true,
+        },
+        {
+          href: "https://portal.thirdweb.com",
+          label: "Documentation",
+          icon: BookTextIcon,
+          tracking: tracking("documentation"),
+        },
+        {
+          href: "https://playground.thirdweb.com/connect/sign-in/button",
+          label: "Playground",
+          icon: BoxIcon,
+          tracking: tracking("playground"),
+        },
+      ]}
+    >
+      {children}
+    </FullWidthSidebarLayout>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/layout.tsx

@@ -1,33 +0,0 @@
-import type { SidebarLink } from "@/components/blocks/Sidebar";
-import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-
-export default async function Layout(props: {
-  params: Promise<{
-    team_slug: string;
-    project_slug: string;
-  }>;
-  children: React.ReactNode;
-}) {
-  const { team_slug, project_slug } = await props.params;
-
-  const links: SidebarLink[] = [
-    {
-      label: "In-App Wallets",
-      href: `/team/${team_slug}/${project_slug}/connect/in-app-wallets`,
-    },
-    {
-      label: "Account Abstraction",
-      href: `/team/${team_slug}/${project_slug}/connect/account-abstraction`,
-    },
-    {
-      label: "Universal Bridge",
-      href: `/team/${team_slug}/${project_slug}/connect/universal-bridge`,
-    },
-    {
-      label: "Playground",
-      href: "https://playground.thirdweb.com/connect/sign-in/button",
-    },
-  ];
-
-  return <SidebarLayout sidebarLinks={links}>{props.children}</SidebarLayout>;
-}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx

@@ -10,15 +10,11 @@ import Link from "next/link";
 export default async function Page() {
   return (
     <div className="flex grow flex-col">
-      <div className="border-border border-b py-10">
-        <div className="container flex max-w-[1000px] flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-          <h1 className="font-semibold text-2xl tracking-tight sm:text-3xl">
-            Insight
-          </h1>
-        </div>
-      </div>
+      <h1 className="mb-6 font-semibold text-2xl tracking-tight sm:text-3xl">
+        Insight
+      </h1>
 
-      <div className="container max-w-[1000px] py-8 pb-20">
+      <div className="pb-20">
         <BlueprintCard />
       </div>
     </div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx

@@ -1,11 +1,13 @@
 import { getProjects } from "@/api/projects";
 import { getTeams } from "@/api/team";
+import { SidebarProvider } from "@/components/ui/sidebar";
 import { redirect } from "next/navigation";
+import { AnnouncementBanner } from "../../../../components/notices/AnnouncementBanner";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import { getAuthTokenWalletAddress } from "../../../api/lib/getAuthToken";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
+import { ProjectSidebarLayout } from "./components/ProjectSidebarLayout";
 import { SaveLastUsedProject } from "./components/SaveLastUsedProject";
-import { ProjectTabs } from "./tabs";
 
 export default async function TeamLayout(props: {
   children: React.ReactNode;
@@ -47,22 +49,26 @@ export default async function TeamLayout(props: {
     redirect(`/team/${params.team_slug}`);
   }
 
+  const layoutPath = `/team/${params.team_slug}/${params.project_slug}`;
+
   return (
-    <div className="flex grow flex-col">
-      <div className="bg-card">
-        <TeamHeaderLoggedIn
-          currentProject={project}
-          currentTeam={team}
-          teamsAndProjects={teamsAndProjects}
-          account={account}
-          accountAddress={accountAddress}
-        />
-        <ProjectTabs
-          layoutPath={`/team/${params.team_slug}/${params.project_slug}`}
-        />
+    <SidebarProvider>
+      <div className="flex h-dvh min-w-0 grow flex-col">
+        <div className="sticky top-0 z-10 border-border border-b bg-card">
+          <AnnouncementBanner />
+          <TeamHeaderLoggedIn
+            currentProject={project}
+            currentTeam={team}
+            teamsAndProjects={teamsAndProjects}
+            account={account}
+            accountAddress={accountAddress}
+          />
+        </div>
+        <ProjectSidebarLayout layoutPath={layoutPath}>
+          {props.children}
+        </ProjectSidebarLayout>
       </div>
-      <div className="flex grow flex-col">{props.children}</div>
       <SaveLastUsedProject projectId={project.id} teamId={team.id} />
-    </div>
+    </SidebarProvider>
   );
 }

apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx

@@ -29,13 +29,14 @@ import {
   getChainMetadata,
 } from "thirdweb/chains";
 import { type WalletId, getWalletInfo } from "thirdweb/wallets";
-import { AnalyticsHeader } from "../../components/Analytics/AnalyticsHeader";
 import { CombinedBarChartCard } from "../../components/Analytics/CombinedBarChartCard";
 import { PieChartCard } from "../../components/Analytics/PieChartCard";
 import { ProjectFTUX } from "./components/ProjectFTUX/ProjectFTUX";
 import { RpcMethodBarChartCard } from "./components/RpcMethodBarChartCard";
 import { TransactionsCharts } from "./components/Transactions";
 
+import { RangeSelector } from "components/analytics/range-selector";
+
 interface PageParams {
   team_slug: string;
   project_slug: string;
@@ -80,8 +81,8 @@ export default async function ProjectOverviewPage(props: PageProps) {
 
   return (
     <div className="flex grow flex-col">
-      <div className="w-full border-border border-b">
-        <AnalyticsHeader
+      <div className="w-full">
+        <Header
           title={project.name}
           interval={interval}
           range={range}
@@ -90,11 +91,11 @@ export default async function ProjectOverviewPage(props: PageProps) {
       </div>
 
       {!isActive ? (
-        <div className="container py-8 pb-20">
+        <div className="pt-6">
           <ProjectFTUX project={project} teamSlug={params.team_slug} />
         </div>
       ) : (
-        <div className="container flex grow flex-col py-6">
+        <div className="flex grow flex-col pt-6">
           <Suspense fallback={<GenericLoadingPage />}>
             <ProjectAnalytics
               project={project}
@@ -189,7 +190,7 @@ async function ProjectAnalytics(props: {
           link="https://portal.thirdweb.com/connect/quickstart"
         />
       )}
-      <div className="grid gap-6 max-md:px-6 md:grid-cols-2">
+      <div className="grid gap-6 md:grid-cols-2">
         {walletConnections.status === "fulfilled" &&
         walletConnections.value.length > 0 ? (
           <WalletDistributionCard data={walletConnections.value} />
@@ -461,3 +462,23 @@ async function TotalSponsoredCard({
     />
   );
 }
+
+export function Header(props: {
+  title: string;
+  interval: "day" | "week";
+  range: Range;
+  showRangeSelector: boolean;
+}) {
+  const { title, interval, range, showRangeSelector } = props;
+
+  return (
+    <div className="flex flex-col items-start gap-3 md:flex-row md:items-center">
+      <div className="flex-1">
+        <h1 className="font-semibold text-2xl tracking-tight md:text-3xl">
+          {title}
+        </h1>
+      </div>
+      {showRangeSelector && <RangeSelector interval={interval} range={range} />}
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/layout.tsx

@@ -7,14 +7,10 @@ export default async function Layout(props: {
 }) {
   return (
     <div className="flex grow flex-col">
-      <div className="border-border border-b py-10">
-        <div className="container max-w-[1000px]">
-          <h1 className="font-semibold text-3xl tracking-tight">
-            Project Settings
-          </h1>
-        </div>
-      </div>
-      <div className="container max-w-[1000px] py-6">{props.children}</div>
+      <h1 className="font-semibold text-3xl tracking-tight">
+        Project Settings
+      </h1>
+      <div className="py-6">{props.children}</div>
     </div>
   );
 }

apps/dashboard/src/app/team/[team_slug]/[project_slug]/tabs.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { TabPathLinks } from "@/components/ui/tabs";
-
-export function ProjectTabs(props: {
-  layoutPath: string;
-}) {
-  const { layoutPath } = props;
-
-  return (
-    <TabPathLinks
-      tabContainerClassName="px-4 lg:px-6"
-      links={[
-        {
-          path: layoutPath,
-          exactMatch: true,
-          name: "Overview",
-        },
-        {
-          // directly link to /in-app-wallets to skip 1 redirect and use `isActive` for checking if the tab is active or not
-          path: `${layoutPath}/connect/in-app-wallets`,
-          name: "Connect",
-          isActive: (path) => path.startsWith(`${layoutPath}/connect`),
-        },
-        {
-          path: `${layoutPath}/contracts`,
-          name: "Contracts",
-        },
-
-        {
-          path: `${layoutPath}/insight`,
-          name: "Insight",
-        },
-        {
-          path: `${layoutPath}/settings`,
-          name: "Settings",
-        },
-      ]}
-    />
-  );
-}

apps/dashboard/src/app/team/[team_slug]/layout.tsx

@@ -1,5 +1,4 @@
 import { getTeamBySlug } from "@/api/team";
-import { AppFooter } from "@/components/blocks/app-footer";
 import { redirect } from "next/navigation";
 import { isTeamOnboardingComplete } from "../../login/onboarding/isOnboardingRequired";
 import { SaveLastVisitedTeamPage } from "../components/last-visited-page/SaveLastVisitedPage";
@@ -37,7 +36,6 @@ export default async function RootTeamLayout(props: {
         {props.children}
       </div>
 
-      <AppFooter />
       <SaveLastVisitedTeamPage />
     </div>
   );

apps/dashboard/src/components/notices/AnnouncementBanner.tsx

@@ -1,27 +1,19 @@
 "use client";
+
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useLocalStorage } from "hooks/useLocalStorage";
-import { CircleAlertIcon, XIcon } from "lucide-react";
-import { useSelectedLayoutSegment } from "next/navigation";
+import { XIcon } from "lucide-react";
 
-export function AnnouncementBanner(props: {
+function AnnouncementBannerUI(props: {
   href: string;
   label: string;
   trackingLabel: string;
 }) {
-  const layoutSegment = useSelectedLayoutSegment();
   const [hasDismissedAnnouncement, setHasDismissedAnnouncement] =
     useLocalStorage(`dismissed-${props.trackingLabel}`, false, true);
 
-  if (
-    layoutSegment === "/_not-found" ||
-    hasDismissedAnnouncement ||
-    layoutSegment === "login" ||
-    layoutSegment === "nebula-app" ||
-    layoutSegment === "join" ||
-    layoutSegment === "get-started"
-  ) {
+  if (hasDismissedAnnouncement) {
     return null;
   }
 
@@ -34,7 +26,6 @@ export function AnnouncementBanner(props: {
         target={props.href.startsWith("http") ? "_blank" : undefined}
         className="ontainer flex cursor-pointer items-center gap-2 lg:justify-center "
       >
-        <CircleAlertIcon className="hidden size-5 shrink-0 lg:block" />
         <span className="inline-block font-medium leading-normal hover:underline">
           {props.label}
         </span>
@@ -53,12 +44,12 @@ export function AnnouncementBanner(props: {
   );
 }
 
-export function OrganizeContractsToProjectsBanner() {
+export function AnnouncementBanner() {
   return (
-    <AnnouncementBanner
-      href="https://blog.thirdweb.com/organize-contracts/"
-      label="Your contracts are now organized into projects. Learn more"
-      trackingLabel="organize-contracts-to-projects"
+    <AnnouncementBannerUI
+      href="https://playground.thirdweb.com/connect/pay"
+      label="Let users pay with whatever they have without leaving your app"
+      trackingLabel="ub-launch"
     />
   );
 }

apps/dashboard/src/components/pay/PayConfig.tsx

@@ -139,9 +139,8 @@ export const PayConfig: React.FC<PayConfigProps> = (props) => {
               Fee Sharing
             </h3>
             <p className="mt-1.5 mb-4 text-foreground text-sm">
-              thirdweb collects a 1% fee per end user transaction through{" "}
-              <strong>Buy With Crypto</strong>. We share 70% of this fee with
-              you.{" "}
+              thirdweb collects a 0.3% protocol fee on swap transactions. You
+              may set your own developer fee in addition to this fee.
               <Link
                 href="https://portal.thirdweb.com/connect/pay/fee-sharing"
                 target="_blank"

apps/dashboard/src/components/settings/Account/Billing/ApplyCouponCard.stories.tsx

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Toaster } from "sonner";
-import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
-import { type ActiveCouponResponse, ApplyCouponCardUI } from "./CouponCard";
-
-const meta = {
-  title: "Billing/Coupons/ApplyCoupon",
-  component: Story,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-} satisfies Meta<typeof Story>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Desktop: Story = {
-  args: {},
-};
-
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
-function statusStub(status: number) {
-  return async () => {
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    const data: ActiveCouponResponse | null =
-      status === 200
-        ? {
-            id: "xyz",
-            start: 1727992716,
-            end: 1759528716,
-            coupon: {
-              id: "XYZTEST",
-              name: "TEST COUPON",
-              duration: "repeating",
-              duration_in_months: 12,
-            },
-          }
-        : null;
-    return {
-      status,
-      data,
-    };
-  };
-}
-
-function Story() {
-  return (
-    <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
-      <BadgeContainer label="Prefill code - XYZ, Success - 200">
-        <ApplyCouponCardUI
-          submit={statusStub(200)}
-          onCouponApplied={undefined}
-          prefillPromoCode="XYZ"
-          isPaymentSetup={true}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="No Valid Payment setup">
-        <ApplyCouponCardUI
-          submit={statusStub(200)}
-          onCouponApplied={undefined}
-          isPaymentSetup={false}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="Success - 200">
-        <ApplyCouponCardUI
-          submit={statusStub(200)}
-          onCouponApplied={undefined}
-          isPaymentSetup={true}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="Invalid - 400">
-        <ApplyCouponCardUI
-          submit={statusStub(400)}
-          onCouponApplied={undefined}
-          isPaymentSetup={true}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="Not Authorized - 401">
-        <ApplyCouponCardUI
-          submit={statusStub(401)}
-          onCouponApplied={undefined}
-          isPaymentSetup={true}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="Already applied - 409">
-        <ApplyCouponCardUI
-          submit={statusStub(409)}
-          onCouponApplied={undefined}
-          isPaymentSetup={true}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="Rate Limited - 429">
-        <ApplyCouponCardUI
-          submit={statusStub(429)}
-          onCouponApplied={undefined}
-          isPaymentSetup={true}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="Other - 500">
-        <ApplyCouponCardUI
-          submit={statusStub(500)}
-          onCouponApplied={undefined}
-          isPaymentSetup={true}
-        />
-      </BadgeContainer>
-      <Toaster richColors />
-    </div>
-  );
-}

apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx

@@ -1,360 +0,0 @@
-"use client";
-
-import { apiServerProxy } from "@/actions/proxies";
-import { DangerSettingCard } from "@/components/blocks/DangerSettingCard";
-import { SettingsCard } from "@/components/blocks/SettingsCard";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { format, fromUnixTime } from "date-fns";
-import { TagIcon } from "lucide-react";
-import { useSearchParams } from "next/navigation";
-import { Suspense, useEffect, useRef, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { useActiveAccount } from "thirdweb/react";
-import { z } from "zod";
-
-export type ActiveCouponResponse = {
-  id: string;
-  start: number;
-  end: number | null;
-  coupon: {
-    id: string;
-    name: string | null;
-    duration: "forever" | "once" | "repeating";
-    duration_in_months: number | null;
-  };
-};
-
-function ApplyCouponCard(props: {
-  teamId: string | undefined;
-  onCouponApplied: (data: ActiveCouponResponse) => void;
-  isPaymentSetup: boolean;
-}) {
-  const searchParams = useSearchParams();
-  const couponCode = searchParams?.get("coupon");
-  return (
-    <ApplyCouponCardUI
-      onCouponApplied={props.onCouponApplied}
-      prefillPromoCode={couponCode || undefined}
-      scrollIntoView={!!couponCode}
-      isPaymentSetup={props.isPaymentSetup}
-      submit={async (promoCode: string) => {
-        const res = await apiServerProxy<{ data: ActiveCouponResponse }>({
-          method: "POST",
-          pathname: "/v1/coupons/redeem",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            promoCode,
-            teamId: props.teamId,
-          }),
-        });
-
-        if (res.ok) {
-          const json = res.data;
-          return {
-            status: 200,
-            data: json.data,
-          };
-        }
-
-        return {
-          status: res.status,
-          data: null,
-        };
-      }}
-    />
-  );
-}
-
-const couponFormSchema = z.object({
-  promoCode: z.string().min(1, "Coupon code is required"),
-});
-
-export function ApplyCouponCardUI(props: {
-  submit: (promoCode: string) => Promise<{
-    status: number;
-    data: null | ActiveCouponResponse;
-  }>;
-  onCouponApplied: ((data: ActiveCouponResponse) => void) | undefined;
-  prefillPromoCode?: string;
-  scrollIntoView?: boolean;
-  isPaymentSetup: boolean;
-}) {
-  const containerRef = useRef<HTMLFormElement | null>(null);
-  const form = useForm<z.infer<typeof couponFormSchema>>({
-    resolver: zodResolver(couponFormSchema),
-    defaultValues: {
-      promoCode: props.prefillPromoCode || "",
-    },
-  });
-
-  const scrolled = useRef(false);
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (props.scrollIntoView && !scrolled.current) {
-      const el = containerRef.current;
-      if (el) {
-        el.scrollIntoView({ behavior: "smooth", block: "start" });
-        el.querySelector("input")?.focus();
-        scrolled.current = true;
-      }
-    }
-  }, [props.scrollIntoView]);
-
-  const applyCoupon = useMutation({
-    mutationFn: (promoCode: string) => props.submit(promoCode),
-  });
-
-  async function onSubmit(values: z.infer<typeof couponFormSchema>) {
-    if (!props.isPaymentSetup) {
-      return;
-    }
-
-    try {
-      const res = await applyCoupon.mutateAsync(values.promoCode);
-      switch (res.status) {
-        case 200: {
-          toast.success("Coupon applied successfully");
-          if (res.data) {
-            props.onCouponApplied?.(res.data);
-          }
-          break;
-        }
-        case 400: {
-          toast.error("Coupon code is invalid");
-          break;
-        }
-        case 401: {
-          toast.error("You are not authorized to apply coupons", {
-            description: "Login to dashboard and try again",
-          });
-          break;
-        }
-        case 409: {
-          toast.error("Coupon already applied");
-          break;
-        }
-        case 429: {
-          toast.error("Too many coupons applied in a short period", {
-            description: "Please try again after some time",
-          });
-          break;
-        }
-        default: {
-          toast.error("Failed to apply coupon");
-        }
-      }
-    } catch {
-      toast.error("Failed to apply coupon");
-    }
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} ref={containerRef}>
-        <SettingsCard
-          header={{
-            title: "Apply Coupon",
-            description:
-              "Enter your coupon code to apply discounts or free trials on thirdweb products",
-          }}
-          bottomText={
-            props.isPaymentSetup
-              ? ""
-              : "A valid payment method must be added to apply a coupon."
-          }
-          saveButton={{
-            variant: "outline",
-            disabled: !props.isPaymentSetup,
-            isPending: applyCoupon.isPending,
-            label: "Apply Coupon",
-            type: "submit",
-          }}
-          noPermissionText={undefined}
-          errorText={
-            form.getFieldState("promoCode", form.formState).error?.message
-          }
-        >
-          <FormField
-            control={form.control}
-            name="promoCode"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Coupon Code</FormLabel>
-                <FormControl>
-                  <Input
-                    {...field}
-                    className="lg:max-w-[450px]"
-                    disabled={!props.isPaymentSetup}
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-        </SettingsCard>
-      </form>
-    </Form>
-  );
-}
-
-export function CouponDetailsCardUI(props: {
-  activeCoupon: ActiveCouponResponse;
-  deleteCoupon: {
-    mutateAsync: () => Promise<void>;
-    isPending: boolean;
-  };
-}) {
-  const { activeCoupon, deleteCoupon } = props;
-  return (
-    <DangerSettingCard
-      className="border-border"
-      footerClassName="!bg-transparent !border-border"
-      title="Coupon Applied"
-      description="To apply another coupon, you must remove this coupon"
-      buttonLabel="Remove Coupon"
-      buttonOnClick={() => {
-        const promise = deleteCoupon.mutateAsync();
-        toast.promise(promise, {
-          success: "Coupon Removed Successfully",
-          error: "Failed To Remove Coupon",
-        });
-      }}
-      confirmationDialog={{
-        title: `Delete Coupon "${activeCoupon.coupon.name}" ?`,
-        description: "Offers added by this coupon will no longer be available.",
-      }}
-      isPending={deleteCoupon.isPending}
-    >
-      <div className="mt-3 flex max-w-[600px] items-center gap-3 rounded-lg border border-border bg-background p-4">
-        <TagIcon className="hidden size-6 text-muted-foreground lg:block" />
-        <div>
-          <h4 className="font-medium text-foreground">
-            {activeCoupon.coupon.name || `Coupon #${activeCoupon.coupon.id}`}
-          </h4>
-          <p className="text-muted-foreground text-sm">
-            Valid from {format(fromUnixTime(activeCoupon.start), "MMM d, yyyy")}{" "}
-            {activeCoupon.end && (
-              <>to {format(fromUnixTime(activeCoupon.end), "MMMM d, yyyy")}</>
-            )}
-          </p>
-        </div>
-      </div>
-    </DangerSettingCard>
-  );
-}
-
-export function CouponSection(props: {
-  teamId: string | undefined;
-  isPaymentSetup: boolean;
-}) {
-  const address = useActiveAccount()?.address;
-  const [optimisticCouponData, setOptimisticCouponData] = useState<
-    | {
-        type: "added";
-        data: ActiveCouponResponse;
-      }
-    | {
-        type: "deleted";
-        data: null;
-      }
-  >();
-
-  const activeCoupon = useQuery({
-    queryKey: ["active-coupon", address, props.teamId],
-    queryFn: async () => {
-      const res = await apiServerProxy<{ data: ActiveCouponResponse }>({
-        method: "GET",
-        pathname: "/v1/active-coupon",
-        searchParams: props.teamId ? { teamId: props.teamId } : undefined,
-      });
-
-      if (!res.ok) {
-        return null;
-      }
-      const json = res.data;
-      return json.data;
-    },
-  });
-
-  const deleteActiveCoupon = useMutation({
-    mutationFn: async () => {
-      const res = await apiServerProxy({
-        method: "DELETE",
-        pathname: "/v1/active-coupon",
-        searchParams: props.teamId ? { teamId: props.teamId } : undefined,
-      });
-
-      if (!res.ok) {
-        throw new Error("Failed to delete coupon");
-      }
-    },
-    onSuccess: () => {
-      setOptimisticCouponData({
-        type: "deleted",
-        data: null,
-      });
-      activeCoupon.refetch().then(() => {
-        setOptimisticCouponData(undefined);
-      });
-    },
-  });
-
-  if (activeCoupon.isPending) {
-    return <LoadingCouponSection />;
-  }
-
-  const couponData = optimisticCouponData
-    ? optimisticCouponData.data
-    : activeCoupon.data;
-
-  return (
-    <>
-      {couponData ? (
-        <CouponDetailsCardUI
-          activeCoupon={couponData}
-          deleteCoupon={{
-            mutateAsync: deleteActiveCoupon.mutateAsync,
-            isPending: deleteActiveCoupon.isPending,
-          }}
-        />
-      ) : (
-        <Suspense fallback={<LoadingCouponSection />}>
-          <ApplyCouponCard
-            teamId={props.teamId}
-            onCouponApplied={(coupon) => {
-              setOptimisticCouponData({
-                type: "added",
-                data: coupon,
-              });
-
-              activeCoupon.refetch().then(() => {
-                setOptimisticCouponData(undefined);
-              });
-            }}
-            isPaymentSetup={props.isPaymentSetup}
-          />
-        </Suspense>
-      )}
-    </>
-  );
-}
-
-function LoadingCouponSection() {
-  return (
-    <div className="flex h-[300px] items-center justify-center rounded-lg border border-border bg-card">
-      <Spinner className="size-6" />
-    </div>
-  );
-}

apps/dashboard/src/components/settings/Account/Billing/CouponDetails.stories.tsx

@@ -1,60 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import { Toaster } from "sonner";
-import { mobileViewport } from "../../../../stories/utils";
-import { CouponDetailsCardUI } from "./CouponCard";
-
-const meta = {
-  title: "Billing/Coupons/CouponDetails",
-  component: Story,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-} satisfies Meta<typeof Story>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Desktop: Story = {
-  args: {},
-};
-
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
-function Story() {
-  const [isPending, setIsPending] = useState(false);
-  return (
-    <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
-      <CouponDetailsCardUI
-        activeCoupon={{
-          id: "xyz",
-          start: 1727992716,
-          end: 1759528716,
-          coupon: {
-            id: "XYZFOOBAR",
-            name: "TEST COUPON",
-            duration: "repeating",
-            duration_in_months: 12,
-          },
-        }}
-        deleteCoupon={{
-          mutateAsync: async () => {
-            setIsPending(true);
-            await new Promise((resolve) => setTimeout(resolve, 2000));
-            setIsPending(false);
-          },
-          isPending: isPending,
-        }}
-      />
-
-      <Toaster richColors />
-    </div>
-  );
-}

apps/dashboard/src/components/settings/Account/Billing/SubscriptionCoupons/Coupons.stories.tsx

@@ -0,0 +1,235 @@
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Switch } from "@/components/ui/switch";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useMemo, useState } from "react";
+import { type CouponData, CouponsUI } from "./CouponsUI";
+
+const meta = {
+  title: "Billing/Coupons",
+  component: Story,
+} satisfies Meta<typeof CouponsUI>;
+
+export default meta;
+type Story = StoryObj<typeof CouponsUI>;
+
+const couponStubs: CouponData[] = [
+  // Forever
+  {
+    id: "di_1QAE7jCQUO4TBFqFQgnS4Qj4",
+    start: 1729011691,
+    end: null,
+    coupon: {
+      id: "forever_active",
+      name: "Example 1",
+      duration: "forever",
+      duration_in_months: null,
+    },
+  },
+
+  // Once
+  {
+    id: "once",
+    start: 1733391052,
+    end: null,
+    coupon: {
+      id: "once_active",
+      name: "Example 2",
+      duration: "once",
+      duration_in_months: null,
+    },
+  },
+
+  // Repeating - 3 months
+  {
+    id: "repeating-3",
+    start: 1733391629,
+    end: 1743391629, // Will end in the future
+    coupon: {
+      id: "repeating_active",
+      name: "Example 3",
+      duration: "repeating",
+      duration_in_months: 3,
+    },
+  },
+
+  // Repeating - 1 month
+  {
+    id: "repeating-1",
+    start: 1733391713,
+    end: 1736391713,
+    coupon: {
+      id: "repeating_single",
+      name: "Example 4",
+      duration: "repeating",
+      duration_in_months: 1,
+    },
+  },
+];
+
+export const Variants: Story = {
+  args: {},
+};
+
+function Story() {
+  const [status, setStatus] = useState<"pending" | "error" | "success">(
+    "success",
+  );
+
+  const [activeCouponsType, setActiveCouponsType] = useState<
+    "multiple" | "zero" | "one"
+  >("multiple");
+
+  const activeCoupons = useMemo(() => {
+    if (activeCouponsType === "multiple") {
+      return couponStubs;
+    }
+
+    if (activeCouponsType === "zero") {
+      return [];
+    }
+
+    if (activeCouponsType === "one") {
+      return couponStubs.slice(0, 1);
+    }
+
+    return [];
+  }, [activeCouponsType]);
+
+  const [hasAccountCoupon, setHasAccountCoupon] = useState(true);
+  const [isPaymentSetup, setIsPaymentSetup] = useState(true);
+  const [applyCouponStatus, setApplyCouponStatus] = useState<
+    200 | 400 | 401 | 409 | 429 | 500
+  >(200);
+
+  return (
+    <div className="container max-w-[1100px] py-10">
+      <div className="mb-8 space-y-6">
+        <div className="flex flex-col gap-6">
+          <div className="space-y-3">
+            <h3 className="font-semibold text-lg">Status</h3>
+            <RadioGroup
+              value={status}
+              onValueChange={(value) =>
+                setStatus(value as "pending" | "error" | "success")
+              }
+              className="flex gap-4"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="pending" id="status-pending" />
+                <Label htmlFor="status-pending">Pending</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="error" id="status-error" />
+                <Label htmlFor="status-error">Error</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="success" id="status-success" />
+                <Label htmlFor="status-success">Success</Label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          <div className="space-y-3">
+            <h3 className="font-semibold text-lg">Active Coupons</h3>
+            <RadioGroup
+              value={activeCouponsType}
+              onValueChange={(value) =>
+                setActiveCouponsType(value as "multiple" | "zero" | "one")
+              }
+              className="flex gap-4"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="multiple" id="coupons-multiple" />
+                <Label htmlFor="coupons-multiple">Multiple</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="zero" id="coupons-zero" />
+                <Label htmlFor="coupons-zero">Zero</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="one" id="coupons-one" />
+                <Label htmlFor="coupons-one">One</Label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          <div className="space-y-3">
+            <h3 className="font-semibold text-lg">Apply Coupon Status</h3>
+            <RadioGroup
+              value={applyCouponStatus.toString()}
+              className="flex gap-4"
+              onValueChange={(value) =>
+                setApplyCouponStatus(
+                  Number.parseInt(value) as 200 | 400 | 401 | 409 | 429 | 500,
+                )
+              }
+            >
+              {[200, 400, 401, 409, 429, 500].map((code) => (
+                <div key={code} className="flex items-center space-x-2">
+                  <RadioGroupItem
+                    value={code.toString()}
+                    id={`status-${code}`}
+                  />
+                  <Label htmlFor={`status-${code}`}>{code}</Label>
+                </div>
+              ))}
+            </RadioGroup>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <h3 className="font-semibold text-lg">Other Settings</h3>
+          <div className="space-y-4">
+            <div className="flex items-center gap-4">
+              <Switch
+                id="has-account-coupon"
+                checked={hasAccountCoupon}
+                onCheckedChange={setHasAccountCoupon}
+              />
+              <Label htmlFor="has-account-coupon">Has Account Coupon</Label>
+            </div>
+            <div className="flex items-center gap-4">
+              <Switch
+                id="payment-setup"
+                checked={isPaymentSetup}
+                onCheckedChange={setIsPaymentSetup}
+              />
+              <Label htmlFor="payment-setup">Payment Setup</Label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <CouponsUI
+        status={status}
+        activeCoupons={activeCoupons}
+        accountCouponId={hasAccountCoupon ? activeCoupons[0]?.id : undefined}
+        isPaymentSetup={isPaymentSetup}
+        applyCoupon={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          return {
+            status: applyCouponStatus,
+            data:
+              applyCouponStatus === 200
+                ? {
+                    id: "xyz",
+                    start: 1727992716,
+                    end: 1759528716,
+                    coupon: {
+                      id: "test",
+                      name: "TEST COUPON",
+                      duration: "repeating",
+                      duration_in_months: 12,
+                    },
+                  }
+                : null,
+          };
+        }}
+        deleteCoupon={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }}
+      />
+    </div>
+  );
+}

apps/dashboard/src/components/settings/Account/Billing/SubscriptionCoupons/Coupons.tsx

@@ -0,0 +1,92 @@
+import { API_SERVER_URL } from "@/constants/env";
+import { Suspense } from "react";
+import { getAuthToken } from "../../../../../app/api/lib/getAuthToken";
+import { CouponsClient } from "./CouponsClient";
+import type { CouponData } from "./CouponsUI";
+
+async function AsyncCoupons(props: {
+  teamId: string;
+  isPaymentSetup: boolean;
+}) {
+  const authToken = await getAuthToken();
+
+  const allCouponsPromise = fetch(
+    `${API_SERVER_URL}/v1/active-coupons?teamId=${props.teamId}`,
+    {
+      headers: {
+        authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+
+  const accountCouponPromise = fetch(
+    `${API_SERVER_URL}/v1/active-coupon?teamId=${props.teamId}`,
+    {
+      headers: {
+        authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+
+  const [allCouponsRes, accountCouponRes] = await Promise.allSettled([
+    allCouponsPromise,
+    accountCouponPromise,
+  ]);
+
+  if (
+    allCouponsRes.status === "rejected" ||
+    accountCouponRes.status === "rejected"
+  ) {
+    return (
+      <CouponsClient
+        status="error"
+        activeCoupons={[]}
+        accountCouponId={undefined}
+        isPaymentSetup={props.isPaymentSetup}
+        teamId={props.teamId}
+      />
+    );
+  }
+
+  const allCouponsData = (await allCouponsRes.value.json()) as {
+    data: CouponData[];
+  };
+
+  const accountCouponData = (await accountCouponRes.value.json()) as {
+    data: CouponData | null;
+  };
+
+  return (
+    <CouponsClient
+      status="success"
+      activeCoupons={allCouponsData.data}
+      accountCouponId={accountCouponData.data?.id}
+      isPaymentSetup={props.isPaymentSetup}
+      teamId={props.teamId}
+    />
+  );
+}
+
+export function Coupons(props: {
+  teamId: string;
+  isPaymentSetup: boolean;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <CouponsClient
+          status="pending"
+          activeCoupons={[]}
+          accountCouponId={undefined}
+          isPaymentSetup={true}
+          teamId={props.teamId}
+        />
+      }
+    >
+      <AsyncCoupons
+        teamId={props.teamId}
+        isPaymentSetup={props.isPaymentSetup}
+      />
+    </Suspense>
+  );
+}

apps/dashboard/src/components/settings/Account/Billing/SubscriptionCoupons/CouponsClient.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { apiServerProxy } from "@/actions/proxies";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { type CouponData, CouponsUI, type CouponsUIProps } from "./CouponsUI";
+
+export function CouponsClient(
+  props: Omit<
+    CouponsUIProps,
+    "applyCoupon" | "onCouponApplied" | "deleteCoupon"
+  > & {
+    teamId: string;
+  },
+) {
+  const router = useDashboardRouter();
+  return (
+    <CouponsUI
+      {...props}
+      deleteCoupon={async () => {
+        const res = await apiServerProxy({
+          method: "DELETE",
+          pathname: "/v1/active-coupon",
+          searchParams: props.teamId ? { teamId: props.teamId } : undefined,
+        });
+
+        if (!res.ok) {
+          throw new Error("Failed to delete coupon");
+        }
+
+        router.refresh();
+      }}
+      applyCoupon={async (promoCode: string) => {
+        const res = await apiServerProxy<{ data: CouponData }>({
+          method: "POST",
+          pathname: "/v1/coupons/redeem",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            promoCode,
+            teamId: props.teamId,
+          }),
+        });
+
+        if (!res.ok) {
+          return {
+            status: res.status,
+            data: null,
+          };
+        }
+
+        const json = res.data;
+
+        router.refresh();
+
+        return {
+          status: 200,
+          data: json.data,
+        };
+      }}
+    />
+  );
+}

apps/dashboard/src/components/settings/Account/Billing/SubscriptionCoupons/CouponsUI.tsx

@@ -0,0 +1,391 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { format, fromUnixTime } from "date-fns";
+import {
+  AlertCircleIcon,
+  CalendarIcon,
+  CalendarX2Icon,
+  ClockIcon,
+  InfinityIcon,
+  PlusIcon,
+  TicketCheckIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+type Coupon = {
+  id: string;
+  name: string;
+  duration: "forever" | "once" | "repeating";
+  duration_in_months: number | null;
+};
+
+export type CouponData = {
+  id: string;
+  start: number;
+  end: number | null;
+  coupon: Coupon;
+};
+
+type ApplyCouponFn = (promoCode: string) => Promise<{
+  status: number;
+  data: null | CouponData;
+}>;
+
+export type CouponsUIProps = {
+  activeCoupons: CouponData[];
+  status: "pending" | "error" | "success";
+  accountCouponId: string | undefined;
+  isPaymentSetup: boolean;
+  applyCoupon: ApplyCouponFn;
+  deleteCoupon: () => Promise<void>;
+};
+
+export function CouponsUI(props: CouponsUIProps) {
+  const formatUnixTime = (timestamp: number) => {
+    const date = fromUnixTime(timestamp);
+    return format(date, "MMM d, yyyy");
+  };
+
+  const renderDuration = (coupon: Coupon) => {
+    if (coupon.duration === "forever") {
+      return (
+        <div className="flex items-center gap-2">
+          <InfinityIcon className="size-4 text-muted-foreground" />
+          <span>Forever</span>
+        </div>
+      );
+    } else if (coupon.duration === "once") {
+      return (
+        <div className="flex items-center gap-2">
+          <ClockIcon className="size-4 text-muted-foreground" />
+          <span>One-time discount</span>
+        </div>
+      );
+    } else if (coupon.duration === "repeating") {
+      return (
+        <div className="flex items-center gap-2">
+          <ClockIcon className="size-4 text-muted-foreground" />
+          <span>
+            Repeats every {coupon.duration_in_months} month
+            {coupon.duration_in_months !== 1 ? "s" : ""}
+          </span>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  const accountCoupon = props.activeCoupons.find(
+    (coupon) => coupon.id === props.accountCouponId,
+  );
+
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      <div className="flex items-center justify-between border-b bg-card px-6 py-4">
+        <h3 className="font-semibold text-xl tracking-tight">Coupons</h3>
+
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2">
+              <PlusIcon className="size-4" />
+              Apply Coupon
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="overflow-hidden p-0">
+            <ApplyCouponModalContent
+              isPaymentSetup={props.isPaymentSetup}
+              applyCoupon={props.applyCoupon}
+              accountCoupon={accountCoupon}
+            />
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {props.status === "success" && props.activeCoupons.length > 0 ? (
+        <TableContainer className="rounded-t-none border-none">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Starts On</TableHead>
+                <TableHead>Ends On</TableHead>
+                <TableHead>Duration </TableHead>
+                {accountCoupon && (
+                  <TableHead className="w-24">Actions</TableHead>
+                )}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {props.activeCoupons.map((item) => (
+                <TableRow key={item.id}>
+                  {/* Name */}
+                  <TableCell className="font-medium">
+                    {item.coupon.name}
+                  </TableCell>
+
+                  {/* Start Date */}
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <CalendarIcon className="size-4 text-muted-foreground" />
+                      {formatUnixTime(item.start)}
+                    </div>
+                  </TableCell>
+
+                  {/* End Date */}
+                  <TableCell>
+                    {item.end !== null ? (
+                      <div className="flex items-center gap-2">
+                        <CalendarIcon className="size-4 text-muted-foreground" />
+                        {formatUnixTime(item.end)}
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <CalendarX2Icon className="size-4 text-muted-foreground" />
+                        <span className="text-foreground">Never </span>
+                      </div>
+                    )}
+                  </TableCell>
+
+                  {/* Duration */}
+                  <TableCell>{renderDuration(item.coupon)}</TableCell>
+
+                  {accountCoupon && (
+                    <TableCell>
+                      <ToolTipLabel
+                        label={
+                          item.id === props.accountCouponId
+                            ? "Remove coupon"
+                            : "This coupon cannot be removed"
+                        }
+                      >
+                        <DeleteCouponButton
+                          deleteCoupon={props.deleteCoupon}
+                          disabled={item.id !== props.accountCouponId}
+                        />
+                      </ToolTipLabel>
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      ) : (
+        <div className="px-6 py-4">
+          <p className="flex min-h-[150px] items-center justify-center text-muted-foreground">
+            {props.status === "pending" ? (
+              <Spinner className="size-8" />
+            ) : props.status === "error" ? (
+              <span className="text-destructive-text">
+                Failed to load coupons
+              </span>
+            ) : (
+              <span>No coupons</span>
+            )}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DeleteCouponButton(props: {
+  deleteCoupon: () => Promise<void>;
+  disabled: boolean;
+}) {
+  const deleteCoupon = useMutation({
+    mutationFn: props.deleteCoupon,
+  });
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      disabled={props.disabled}
+      onClick={() => {
+        const promise = deleteCoupon.mutateAsync();
+        toast.promise(promise, {
+          success: "Coupon removed successfully",
+          error: "Failed to remove coupon",
+        });
+      }}
+      aria-label="Remove coupon"
+    >
+      {deleteCoupon.isPending ? (
+        <Spinner className="size-4" />
+      ) : (
+        <Trash2Icon className="size-4" />
+      )}
+    </Button>
+  );
+}
+
+const applyCouponFormSchema = z.object({
+  promoCode: z.string().min(1, "Coupon code is required"),
+});
+
+function ApplyCouponModalContent(props: {
+  isPaymentSetup: boolean;
+  applyCoupon: ApplyCouponFn;
+  accountCoupon: CouponData | undefined;
+}) {
+  const applyCoupon = useMutation({
+    mutationFn: props.applyCoupon,
+  });
+
+  const form = useForm<z.infer<typeof applyCouponFormSchema>>({
+    resolver: zodResolver(applyCouponFormSchema),
+    defaultValues: {
+      promoCode: "",
+    },
+  });
+
+  async function onSubmit(values: z.infer<typeof applyCouponFormSchema>) {
+    try {
+      const res = await applyCoupon.mutateAsync(values.promoCode);
+      switch (res.status) {
+        case 200: {
+          toast.success("Coupon applied successfully");
+
+          break;
+        }
+        case 400: {
+          toast.error("Coupon code is invalid");
+          break;
+        }
+        case 401: {
+          toast.error("You are not authorized to apply coupons", {
+            description: "Login to dashboard and try again",
+          });
+          break;
+        }
+        case 409: {
+          toast.error("Coupon already applied");
+          break;
+        }
+        case 429: {
+          toast.error("Too many coupons applied in a short period", {
+            description: "Please try again after some time",
+          });
+          break;
+        }
+        default: {
+          toast.error("Failed to apply coupon");
+        }
+      }
+    } catch {
+      toast.error("Failed to apply coupon");
+    }
+  }
+
+  const couponEnabled = props.isPaymentSetup && !props.accountCoupon;
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="p-6">
+          <DialogHeader>
+            <DialogTitle>Apply Coupon</DialogTitle>
+            {couponEnabled && (
+              <DialogDescription>
+                Enter coupon code to apply discounts or free trials
+              </DialogDescription>
+            )}
+          </DialogHeader>
+
+          <div className="h-4" />
+
+          {couponEnabled && (
+            <FormField
+              control={form.control}
+              name="promoCode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Coupon Code</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      className=""
+                      disabled={!props.isPaymentSetup}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          )}
+
+          {!props.isPaymentSetup && (
+            <Alert variant="destructive">
+              <AlertCircleIcon className="size-5" />
+              <AlertTitle>Payment method required</AlertTitle>
+              <AlertDescription>
+                A valid payment method must be added to apply a coupon.
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {props.isPaymentSetup && props.accountCoupon && (
+            <Alert variant="destructive">
+              <AlertCircleIcon className="size-5" />
+              <AlertTitle>Coupon already applied</AlertTitle>
+              <AlertDescription>
+                Remove coupon {`"${props.accountCoupon.coupon.name}"`} to apply
+                a new coupon
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+
+        <div className="mt-4 flex items-center justify-end border-t bg-card p-6">
+          <Button
+            type="submit"
+            disabled={applyCoupon.isPending || !couponEnabled}
+            className="gap-2"
+          >
+            {applyCoupon.isPending ? (
+              <Spinner className="size-4" />
+            ) : (
+              <TicketCheckIcon className="size-4" />
+            )}
+            Redeem
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

apps/dashboard/src/components/settings/Account/Billing/index.tsx

@@ -6,9 +6,9 @@ import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { AlertCircleIcon } from "lucide-react";
 import Link from "next/link";
 import { PlanInfoCard } from "../../../../app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard";
-import { CouponSection } from "./CouponCard";
 import { CreditsInfoCard } from "./PlanCard";
 import { BillingPricing } from "./Pricing";
+import { Coupons } from "./SubscriptionCoupons/Coupons";
 
 // TODO - move this in app router folder in other pr
 
@@ -68,7 +68,7 @@ export const Billing: React.FC<BillingProps> = ({
       />
 
       <CreditsInfoCard twAccount={twAccount} />
-      <CouponSection teamId={team.id} isPaymentSetup={validPayment} />
+      <Coupons teamId={team.id} isPaymentSetup={validPayment} />
     </div>
   );
 };

apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx

@@ -1,81 +1,22 @@
-"use client";
-
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Flex,
-  IconButton,
-} from "@chakra-ui/react";
-import { useLocalStorage } from "hooks/useLocalStorage";
-import { XIcon } from "lucide-react";
-import { Text, TrackedLink } from "tw-components";
-
-export const SmartWalletsBillingAlert = ({
-  dismissible = false,
-}: {
-  dismissible?: boolean;
-}) => {
-  const [dismissed, setDismissed] = useLocalStorage(
-    "dismissed-smart-wallets-billing-alert",
-    false,
-    true,
-  );
-
-  if (dismissible && dismissed) {
-    return true;
-  }
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
+import { CircleAlertIcon } from "lucide-react";
 
+export const SmartWalletsBillingAlert = () => {
   return (
-    <Alert
-      status="warning"
-      borderRadius="md"
-      as={Flex}
-      alignItems="start"
-      justifyContent="space-between"
-      mb={4}
-      variant="left-accent"
-      bg="backgroundCardHighlight"
-    >
-      <div className="flex flex-row">
-        <AlertIcon boxSize={4} mt={1} ml={1} />
-        <Flex flexDir="column" gap={1} pl={1}>
-          <AlertTitle>Account Abstraction on Mainnet</AlertTitle>
-          <AlertDescription>
-            <Text as="span" pr={1}>
-              You&apos;ve enabled Account Abstraction for one of your API keys.
-              <br />
-              To enable AA on mainnet chains,
-            </Text>{" "}
-            <TrackedLink
-              href="/team/~/~/settings/billing"
-              category="api_keys"
-              label="smart_wallets_missing_billing"
-              fontWeight="medium"
-              color="blue.500"
-            >
-              <Text as="span" color="blue.500">
-                subscribe to a billing plan.
-              </Text>
-            </TrackedLink>
-          </AlertDescription>
-        </Flex>
-      </div>
-
-      {dismissible && (
-        <IconButton
-          size="xs"
-          aria-label="Close notice"
-          icon={<XIcon className="size-4" />}
-          colorScheme="blackAlpha"
-          color="white"
-          variant="ghost"
-          opacity={0.6}
-          _hover={{ opacity: 1 }}
-          onClick={() => setDismissed(true)}
-        />
-      )}
+    <Alert variant="warning">
+      <CircleAlertIcon className="size-5" />
+      <AlertTitle>Account Abstraction on Mainnet</AlertTitle>
+      <AlertDescription>
+        To enable AA on mainnet chains,{" "}
+        <TrackedUnderlineLink
+          href="/team/~/~/settings/billing"
+          category="api_keys"
+          label="smart_wallets_missing_billing"
+        >
+          subscribe to a billing plan.
+        </TrackedUnderlineLink>
+      </AlertDescription>
     </Alert>
   );
 };

apps/dashboard/src/components/wallets/PosthogIdentifier.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import { useEffect } from "react";
 import {
   useActiveAccount,
@@ -32,48 +32,49 @@ export const PosthogIdentifierClient: React.FC<{
     client,
   });
   const wallet = useActiveWallet();
+  const posthog = usePostHog();
 
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (wallet) {
+    if (wallet && posthog && posthog.__loaded) {
       const connector = walletIdToPHName[wallet.id] || wallet.id;
       posthog.register({ connector });
       posthog.capture("wallet_connected", { connector });
     }
-  }, [wallet]);
+  }, [wallet, posthog]);
 
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (accountAddress) {
+    if (accountAddress && posthog && posthog.__loaded) {
       posthog.identify(accountAddress);
     }
-  }, [accountAddress]);
+  }, [accountAddress, posthog]);
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (accountId) {
+    if (accountId && posthog && posthog.__loaded) {
       posthog.identify(accountId);
     }
-  }, [accountId]);
+  }, [accountId, posthog]);
 
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (chain?.id) {
+    if (chain?.id && posthog && posthog.__loaded) {
       posthog.unregister("network");
       posthog.register({ chain_id: chain?.id, ecosystem: "evm" });
     }
-  }, [chain?.id]);
+  }, [chain?.id, posthog]);
 
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (balance?.data?.displayValue) {
+    if (balance?.data?.displayValue && posthog && posthog.__loaded) {
       posthog.register({ balance: balance.data.displayValue });
     }
-  }, [balance]);
+  }, [balance, posthog]);
 
   return null;
 };

apps/dashboard/src/global.css

@@ -41,6 +41,16 @@
 
     /* Others */
     --radius: 0.5rem;
+
+    /* Sidebar */
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 0 0% 4%;
+    --sidebar-primary: 221 83% 54%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 93%;
+    --sidebar-accent-foreground: 0 0% 9%;
+    --sidebar-border: 0 0% 85%;
+    --sidebar-ring: 0 0% 80%;
   }
 
   .dark,
@@ -78,6 +88,16 @@
     --active-border: 0 0% 22%;
     --ring: 0 0% 30%;
     --input: 0 0% 15%;
+
+    /* sidebar */
+    --sidebar-background: 0 0% 0%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 221 83% 54%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 11%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 15%;
+    --sidebar-ring: 0 0% 30%;
   }
 }
 

apps/dashboard/src/lib/posthog/Posthog.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { isProd } from "@/constants/env";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { useEffect } from "react";
+
+const NEXT_PUBLIC_POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
+
+export function PHProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (NEXT_PUBLIC_POSTHOG_API_KEY && isProd) {
+      posthog.init(NEXT_PUBLIC_POSTHOG_API_KEY, {
+        api_host: "https://a.thirdweb.com",
+        capture_pageview: false,
+        debug: false,
+        disable_session_recording: true,
+      });
+    }
+  }, []);
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}

apps/dashboard/src/lib/posthog/PosthogHeadSetup.tsx

@@ -0,0 +1,10 @@
+const posthogHost = "https://a.thirdweb.com";
+
+export function PosthogHeadSetup() {
+  return (
+    <>
+      <link rel="preconnect" href={posthogHost} />
+      <link rel="dns-prefetch" href={posthogHost} />
+    </>
+  );
+}

apps/dashboard/src/lib/posthog/PosthogPageView.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { usePostHog } from "posthog-js/react";
+import { Suspense, useEffect } from "react";
+
+function PostHogPageViewInner() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const posthog = usePostHog();
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (pathname && posthog) {
+      let url = window.origin + pathname;
+      if (searchParams.toString()) {
+        url = `${url}?${searchParams.toString()}`;
+      }
+      posthog.capture("$pageview", {
+        $current_url: url,
+      });
+    }
+  }, [pathname, searchParams, posthog]);
+
+  return null;
+}
+
+export function PostHogPageView() {
+  return (
+    <Suspense fallback={null}>
+      <PostHogPageViewInner />
+    </Suspense>
+  );
+}

apps/dashboard/tailwind.config.js

@@ -71,6 +71,16 @@ module.exports = {
         link: {
           foreground: "hsl(var(--link-foreground))",
         },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",

apps/playground-web/next.config.mjs

@@ -6,7 +6,7 @@ const ContentSecurityPolicy = `
   style-src 'self' 'unsafe-inline';
   font-src 'self';
   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.com *.thirdweb-dev.com vercel.live js.stripe.com;
   connect-src * data: blob:;
   worker-src 'self' blob:;
   block-all-mixed-content;

apps/playground-web/package.json

@@ -41,6 +41,7 @@
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
     "openapi-types": "^12.1.3",
+    "posthog-js": "1.67.1",
     "prettier": "3.5.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",

apps/playground-web/src/app/connect/account-abstraction/connect/page.tsx

@@ -28,7 +28,7 @@ export default function Page() {
               full wallet programmability.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview"
+          docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
           heroLink="/account-abstraction.png"
         />
 

apps/playground-web/src/app/connect/account-abstraction/native-aa/page.tsx

@@ -25,7 +25,7 @@ export default function Page() {
               full wallet programmability.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview"
+          docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
           heroLink="/account-abstraction.png"
         />
 

apps/playground-web/src/app/connect/account-abstraction/sponsor/page.tsx

@@ -25,7 +25,7 @@ export default function Page() {
               full wallet programmability.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview"
+          docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
           heroLink="/account-abstraction.png"
         />
 

apps/playground-web/src/app/connect/auth/page.tsx

@@ -28,7 +28,7 @@ export default function Page() {
               them to create an additional account.
             </>
           }
-          docsLink="https://portal.thirdweb.com/typescript/v5/auth"
+          docsLink="https://portal.thirdweb.com/typescript/v5/auth?utm_source=playground"
           heroLink="/auth.png"
         />
 

apps/playground-web/src/app/connect/blockchain-api/page.tsx

@@ -28,7 +28,7 @@ export default function Page() {
               contract on any EVM chain through our RPC Edge endpoints.
             </>
           }
-          docsLink="https://portal.thirdweb.com/typescript/v5"
+          docsLink="https://portal.thirdweb.com/typescript/v5?utm_source=playground"
           heroLink="/blockchain-api.png"
         />
 

apps/playground-web/src/app/connect/in-app-wallet/layout.tsx

@@ -20,7 +20,7 @@ export default function Page(props: { children: React.ReactNode }) {
             and smart account integration.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/in-app-wallet/overview"
+        docsLink="https://portal.thirdweb.com/connect/in-app-wallet/overview?utm_source=playground"
         heroLink="/in-app-wallet.png"
       />
 

apps/playground-web/src/app/connect/pay/backend/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout(props: {
         description={
           <>HTTP API to bridge, swap and onramp to and from any currency</>
         }
-        docsLink="https://portal.thirdweb.com/connect/pay/overview"
+        docsLink="https://portal.thirdweb.com/connect/pay/overview?utm_source=playground"
         heroLink="/ub.png"
       />
 

apps/playground-web/src/app/connect/pay/backend/page.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/button";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import Link from "next/link";
 import { getBridgePaths } from "./utils";
@@ -7,27 +8,39 @@ export default async function Page() {
     const paths = await getBridgePaths();
     return (
       <div className="pb-20">
-        <h2 className="mb-2 font-semibold text-2xl tracking-tight">
-          Universal Bridge REST API
-        </h2>
-        <p className="mb-5 text-muted-foreground">
-          Directly interact with the Universal Bridge API from your backend,
-          using standard REST api.
-        </p>
+        <div className="flex flex-col justify-between py-6 md:flex-row md:gap-8">
+          <div>
+            <h2 className="mb-2 font-semibold text-2xl tracking-tight">
+              Universal Bridge REST API
+            </h2>
+            <p className="mb-5 text-muted-foreground">
+              Directly interact with the Universal Bridge API from your backend,
+              using standard REST APIs.
+            </p>
+          </div>
+
+          <Link href="https://bridge.thirdweb.com/reference" target="_blank">
+            <Button className="max-md:w-full">View all endpoints</Button>
+          </Link>
+        </div>
 
         <div className="flex flex-col gap-8">
           <BlueprintSection
-            title="Available endpoints"
-            blueprints={paths.map(([pathName, pathObj]) => {
-              if (!pathObj) {
-                throw new Error(`Path not found: ${pathName}`);
-              }
-              return {
-                name: pathName,
-                description: pathObj.get?.description || "",
-                link: `/connect/pay/backend/reference?route=${pathName}`,
-              };
-            })}
+            title="Available GET endpoints"
+            blueprints={paths
+              .filter(
+                ([_pathName, pathObj]) => typeof pathObj?.get !== "undefined",
+              )
+              .map(([pathName, pathObj]) => {
+                if (!pathObj) {
+                  throw new Error(`Path not found: ${pathName}`);
+                }
+                return {
+                  name: pathName,
+                  description: pathObj.get?.description || "",
+                  link: `/connect/pay/backend/reference?route=${pathName}`,
+                };
+              })}
           />
         </div>
       </div>

apps/playground-web/src/app/connect/pay/commerce/page.tsx

@@ -24,7 +24,7 @@ export default function Page() {
               chain.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/pay/get-started"
+          docsLink="https://portal.thirdweb.com/connect/pay/get-started?utm_source=playground"
           heroLink="/pay.png"
         />
 

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

@@ -529,7 +529,7 @@ export function LeftSection(props: {
             </p>
 
             <Link
-              href="https://portal.thirdweb.com/connect/account-abstraction/overview"
+              href="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
               target="_blank"
               className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
             >

apps/playground-web/src/app/connect/pay/fund-wallet/page.tsx

@@ -24,7 +24,7 @@ export default function Page() {
               and generate revenue for each user transaction.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/pay/get-started"
+          docsLink="https://portal.thirdweb.com/connect/pay/get-started?utm_source=playground"
           heroLink="/pay.png"
         />
 

apps/playground-web/src/app/connect/pay/page.tsx

@@ -26,7 +26,7 @@ export default function Page(props: {
               and generate revenue for each user transaction.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/pay/get-started"
+          docsLink="https://portal.thirdweb.com/connect/pay/get-started?utm_source=playground"
           heroLink="/pay.png"
         />
 

apps/playground-web/src/app/connect/pay/transactions/page.tsx

@@ -27,7 +27,7 @@ export default function Page() {
               any chain.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/pay/get-started"
+          docsLink="https://portal.thirdweb.com/connect/pay/get-started?utm_source=playground"
           heroLink="/pay.png"
         />
 

apps/playground-web/src/app/connect/sign-in/button/LeftSection.tsx

@@ -219,7 +219,7 @@ export function LeftSection(props: {
               after connecting wallet
             </span>
             <Link
-              href="https://portal.thirdweb.com/connect/auth"
+              href="https://portal.thirdweb.com/connect/auth?utm_source=playground"
               target="_blank"
               className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
             >
@@ -248,7 +248,7 @@ export function LeftSection(props: {
             </p>
 
             <Link
-              href="https://portal.thirdweb.com/connect/account-abstraction/overview"
+              href="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
               target="_blank"
               className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
             >

apps/playground-web/src/app/connect/sign-in/button/page.tsx

@@ -71,7 +71,7 @@ export default function Page(props: {
               Ethereum)
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/sign-in/overview"
+          docsLink="https://portal.thirdweb.com/connect/sign-in/overview?utm_source=playground"
           heroLink="/connectors.png"
         />
 

apps/playground-web/src/app/connect/sign-in/components/InAppWalletFormGroup.tsx

@@ -39,7 +39,7 @@ export function InAppWalletFormGroup(props: {
         <Link
           target="_blank"
           className="group flex items-center gap-2"
-          href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
+          href="https://portal.thirdweb.com/connect/in-app-wallet/overview?utm_source=playground"
         >
           <h2 className="font-semibold tracking-tight">In-App Wallet</h2>
           <ExternalLinkIcon className="mt-[-2px] size-4 text-muted-foreground group-hover:text-foreground" />

apps/playground-web/src/app/connect/sign-in/embed/page.tsx

@@ -25,7 +25,7 @@ export default function Page() {
               that fits your brand.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/sign-in/overview"
+          docsLink="https://portal.thirdweb.com/connect/sign-in/overview?utm_source=playground"
           heroLink="/connectors.png"
         />
 

apps/playground-web/src/app/connect/sign-in/headless/page.tsx

@@ -26,7 +26,7 @@ export default function Page() {
               that fits your brand.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect/sign-in/overview"
+          docsLink="https://portal.thirdweb.com/connect/sign-in/overview?utm_source=playground"
           heroLink="/connectors.png"
         />
         <Modal />

apps/playground-web/src/app/connect/social/page.tsx

@@ -24,7 +24,7 @@ export default function Page() {
               as soon as they sign into your app.
             </>
           }
-          docsLink="https://portal.thirdweb.com/connect" // TODO: update this once we have Social API docs
+          docsLink="https://portal.thirdweb.com/connect?utm_source=playground" // TODO: update this once we have Social API docs
           heroLink="/in-app-wallet.png"
         />
 

apps/playground-web/src/app/connect/ui/chain/page.tsx

@@ -29,7 +29,7 @@ export default function Page() {
               in their user interfaces.
             </>
           }
-          docsLink="https://portal.thirdweb.com/react/v5/components/onchain#chains"
+          docsLink="https://portal.thirdweb.com/react/v5/components/onchain#chains?utm_source=playground"
           heroLink="/headless-ui-header.png"
         />
         <section className="space-y-8">

apps/playground-web/src/app/connect/ui/nft/page.tsx

@@ -32,7 +32,7 @@ export default function Page() {
               their perfect user interface.
             </>
           }
-          docsLink="https://portal.thirdweb.com/react/v5/components/onchain#nfts"
+          docsLink="https://portal.thirdweb.com/react/v5/components/onchain#nfts?utm_source=playground"
           heroLink="/headless-ui-header.png"
         />
         <section className="space-y-8">

apps/playground-web/src/app/connect/ui/page.tsx

@@ -37,7 +37,7 @@ export default function Page() {
               complete control over your dApp's design.
             </>
           }
-          docsLink="https://portal.thirdweb.com/react/v5/components/account"
+          docsLink="https://portal.thirdweb.com/react/v5/components/account?utm_source=playground"
           heroLink="/headless-ui-header.png"
         />
 

apps/playground-web/src/app/connect/ui/token/page.tsx

@@ -33,7 +33,7 @@ export default function Page() {
               other crypto applications.
             </>
           }
-          docsLink="https://portal.thirdweb.com/react/v5/components/onchain#tokens"
+          docsLink="https://portal.thirdweb.com/react/v5/components/onchain#tokens?utm_source=playground"
           heroLink="/headless-ui-header.png"
         />
         <section className="space-y-8">

apps/playground-web/src/app/connect/ui/wallet/page.tsx

@@ -31,7 +31,7 @@ export default function Page() {
               design.
             </>
           }
-          docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
+          docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components?utm_source=playground"
           heroLink="/headless-ui-header.png"
         />
         <section className="space-y-8">

apps/playground-web/src/app/insight/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout(props: {
         description={
           <>Simple & customizable endpoints for querying rich blockchain data</>
         }
-        docsLink="https://portal.thirdweb.com/insight"
+        docsLink="https://portal.thirdweb.com/insight?utm_source=playground"
         heroLink="/insight-hero.avif"
       />
 

apps/playground-web/src/app/insight/page.tsx

@@ -14,7 +14,7 @@ export default async function Page() {
         user-friendly format. <br /> There is no need for ABIs, decoding, RPC,
         or web3 knowledge to fetch blockchain data.{" "}
         <Link
-          href="https://portal.thirdweb.com/insight/blueprints"
+          href="https://portal.thirdweb.com/insight/blueprints?utm_source=playground"
           target="_blank"
           className="underline decoration-muted-foreground/50 decoration-dotted underline-offset-[5px] hover:decoration-solid"
         >

apps/playground-web/src/app/layout.tsx

@@ -7,6 +7,9 @@ import { AppSidebar } from "./AppSidebar";
 import { Providers } from "./providers";
 import "./globals.css";
 import NextTopLoader from "nextjs-toploader";
+import { PHProvider } from "../lib/posthog/Posthog";
+import { PosthogHeadSetup } from "../lib/posthog/PosthogHeadSetup";
+import { PostHogPageView } from "../lib/posthog/PosthogPageView";
 import { MobileHeader } from "./MobileHeader";
 import { getSidebarLinks } from "./navLinks";
 
@@ -43,31 +46,35 @@ export default async function RootLayout({
           data-domain="playground.thirdweb.com"
           data-api="https://pl.thirdweb.com/api/event"
         />
+        <PosthogHeadSetup />
       </head>
 
-      <body
-        className={cn(
-          "bg-background font-sans antialiased ",
-          sansFont.variable,
-          monoFont.variable,
-        )}
-      >
-        <NextTopLoader
-          color="hsl(var(--foreground))"
-          height={2}
-          shadow={false}
-          showSpinner={false}
-        />
-        <MobileHeader links={sidebarLinks} />
-        <div className="flex flex-col lg:h-dvh lg:flex-row">
-          <AppSidebar links={sidebarLinks} />
-          <div className="flex grow flex-col lg:overflow-auto">
-            <div className="container relative grow px-4 md:px-6">
-              <Providers>{children}</Providers>
+      <PHProvider>
+        <PostHogPageView />
+        <body
+          className={cn(
+            "bg-background font-sans antialiased ",
+            sansFont.variable,
+            monoFont.variable,
+          )}
+        >
+          <NextTopLoader
+            color="hsl(var(--foreground))"
+            height={2}
+            shadow={false}
+            showSpinner={false}
+          />
+          <MobileHeader links={sidebarLinks} />
+          <div className="flex flex-col lg:h-dvh lg:flex-row">
+            <AppSidebar links={sidebarLinks} />
+            <div className="flex grow flex-col lg:overflow-auto">
+              <div className="container relative grow px-4 md:px-6">
+                <Providers>{children}</Providers>
+              </div>
             </div>
           </div>
-        </div>
-      </body>
+        </body>
+      </PHProvider>
     </html>
   );
 }

apps/playground-web/src/app/otherLinks.ts

@@ -1,11 +1,11 @@
 export const otherLinks: { name: string; href: string }[] = [
   {
     name: "Dashboard",
-    href: "https://thirdweb.com/team",
+    href: "https://thirdweb.com/team?utm_source=playground",
   },
   {
     name: "Docs",
-    href: "https://portal.thirdweb.com/",
+    href: "https://portal.thirdweb.com?utm_source=playground",
   },
   {
     name: "Github",

apps/playground-web/src/components/auth/gated-content.tsx

@@ -82,7 +82,7 @@ export async function GatedContentPreview() {
         <br />
         Mint a free commemorative NFT{" "}
         <a
-          href="https://thirdweb.com/arbitrum/0xE7d6D628163de95D1c72c343ee852539B51f35Dc/nfts/0"
+          href="https://thirdweb.com/arbitrum/0xE7d6D628163de95D1c72c343ee852539B51f35Dc/nfts/0?utm_source=playground"
           rel="noreferrer"
           target="_blank"
           className="font-bold text-yellow-400 underline"

apps/playground-web/src/components/blocks/APIHeader.tsx

@@ -32,7 +32,10 @@ export function APIHeader(props: {
             </Link>
           </Button>
           <Button asChild variant="outline" size="lg">
-            <Link target="_blank" href="https://thirdweb.com/contact-us">
+            <Link
+              target="_blank"
+              href="https://thirdweb.com/contact-us?utm_source=playground"
+            >
               Book a Demo
             </Link>
           </Button>

apps/playground-web/src/components/engine/minting/erc1155-mint-to.tsx

@@ -248,7 +248,7 @@ export function ERC1155MintTo() {
               <p className="max-w-[600px]">
                 thirdweb Engine Playground{" "}
                 <a
-                  href="https://thirdweb.com/base-sepolia-testnet/0x8CD193648f5D4E8CD9fD0f8d3865052790A680f6/nfts"
+                  href="https://thirdweb.com/base-sepolia-testnet/0x8CD193648f5D4E8CD9fD0f8d3865052790A680f6/nfts?utm_source=playground"
                   target="_blank"
                   className="text-blue-500"
                   rel="noreferrer"

apps/playground-web/src/lib/posthog/Posthog.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { useEffect } from "react";
+import { isProd } from "../env";
+
+const NEXT_PUBLIC_POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
+
+export function PHProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  useEffect(() => {
+    if (NEXT_PUBLIC_POSTHOG_API_KEY && isProd) {
+      posthog.init(NEXT_PUBLIC_POSTHOG_API_KEY, {
+        api_host: "https://a.thirdweb.com",
+        capture_pageview: false,
+        debug: false,
+        disable_session_recording: true,
+      });
+    }
+  }, []);
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}

apps/playground-web/src/lib/posthog/PosthogHeadSetup.tsx

@@ -0,0 +1,10 @@
+const posthogHost = "https://a.thirdweb.com";
+
+export function PosthogHeadSetup() {
+  return (
+    <>
+      <link rel="preconnect" href={posthogHost} />
+      <link rel="dns-prefetch" href={posthogHost} />
+    </>
+  );
+}

apps/playground-web/src/lib/posthog/PosthogPageView.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { usePostHog } from "posthog-js/react";
+import { Suspense, useEffect } from "react";
+
+function PostHogPageViewInner() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (pathname && posthog) {
+      let url = window.origin + pathname;
+      if (searchParams.toString()) {
+        url = `${url}?${searchParams.toString()}`;
+      }
+      posthog.capture("$pageview", {
+        $current_url: url,
+      });
+    }
+  }, [pathname, searchParams, posthog]);
+
+  return null;
+}
+
+export function PostHogPageView() {
+  return (
+    <Suspense fallback={null}>
+      <PostHogPageViewInner />
+    </Suspense>
+  );
+}

apps/portal/next.config.mjs

@@ -10,7 +10,7 @@ const ContentSecurityPolicy = `
   style-src 'self' 'unsafe-inline';
   font-src 'self';
   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.com thirdweb-dev.com *.thirdweb-dev.com vercel.live js.stripe.com;
   connect-src * data: blob:;
   worker-src 'self' blob:;
   block-all-mixed-content;

apps/portal/src/app/connect/pay/faqs/page.mdx

@@ -16,11 +16,7 @@ thirdweb does not charge any fees for buy with fiat. Any fees on onramping are b
 </Details>
 
 <Details summary="What are the fees for Buy With Crypto?"> 
-For buying with crypto, thirdweb charges 0.3% and the application developer may charge up to 0.7% on each transaction
-</Details>
-
-<Details summary="How does fee sharing work for Buy With Crypto?"> 
-thirdweb shares 70% of all fees collected through Buy With Crypto with our developers. Fee sharing is not currently available for Buy With Fiat transactions.
+For buying with crypto or swap fees, thirdweb charges a 0.3% protocol fee. Developers may monetize their application by charging additional fees set through the dashboard.
 </Details>
 
 <Details summary="What does the term “network fees” refer to?"> 

apps/portal/src/app/connect/pay/fee-sharing/page.mdx

@@ -1,23 +0,0 @@
-import { createMetadata, DocImage } from "@doc";
-import paySettingsImage from "../assets/pay-settings.png";
-
-export const metadata = createMetadata({
-	image: {
-		title: "thirdweb Universal Bridge - Fee Sharing",
-		icon: "thirdweb",
-	},
-	title: "thirdweb Universal Bridge - Fee Sharing | thirdweb",
-	description: "How to participate in fee sharing with thirdweb Universal Bridge",
-});
-
-# Fee Sharing
-
-thirdweb collects a 1% fee per end user transaction. We share 70% of this fee with you.
-
-For example, if a user purchases $100 worth of Polygon through your application, thirdweb charges a total of $1.00. thirdweb collects $0.30 and sends $0.70 to you.
-
-Plase note that fee sharing only applies to fees collected through swaps and bridges. Fiat purchases do not currently qualify for fee sharing.
-
-To participate in fee sharing, all you need to do is set a recipient address in your dashboard. Your recipient address can be configured in your dashboard by navigating to your Team > Project > Connect > Universal Bridge in [thirdweb dashboard](https://www.thirdweb.com/team).
-
-<DocImage src={paySettingsImage} />

apps/portal/src/app/connect/pay/guides/build-a-custom-experience/page.mdx

@@ -36,7 +36,7 @@ In this guide, we'll show you how to purchase 0.01 Base ETH from USD in Typescri
 <Step title='Install the Connect SDK'>
 <InstallTabs
 	npm="npm i thirdweb"
-	yarn="yarn install thirdweb"
+	yarn="yarn add thirdweb"
 	pnpm="pnpm i thirdweb"
 />
 <Step title='Get Your Client ID'>

apps/portal/src/app/connect/pay/guides/cross-chain-swapping/page.mdx

@@ -0,0 +1,214 @@
+import {
+	createMetadata,
+	Callout,
+	DocImage,
+	InstallTabs,
+	Steps,
+	Step,
+} from "@doc";
+import OnrampStepOne from "../../assets/avax-to-usd.png";
+
+export const metadata = createMetadata({
+	image: {
+		title: "thirdweb Universal Bridge - Cross-Chain Swapping",
+		icon: "thirdweb",
+	},
+	title: "thirdweb Universal Bridge - Cross-Chain Swapping | thirdweb",
+	description:
+		"Learn how to build a custom cross-chain swapping experience with thirdweb Universal Bridge.",
+});
+
+# Leverage Cross-Chain Swaps with Universal Bridge
+
+Learn how to enable your users to swap from any asset to any other with thirdweb's Universal Bridge.
+
+In this guide, we'll show you how to purchase 10 USDC on Optimism in Typescript.
+
+---
+
+<Steps>
+<Step title='Install the Connect SDK'>
+<InstallTabs
+	npm="npm i thirdweb"
+	yarn="yarn add thirdweb"
+	pnpm="pnpm i thirdweb"
+/>
+<Step title='Get Your Client ID'>
+
+Log in to the [thirdweb dashboard](https://thirdweb.com/team). Click on Create New > Project to get your **Client ID**. You'll need your Client ID to interact with the Connect SDK.
+
+</Step>
+</Step>
+<Step title='Find available routes'>
+Before your user can select which tokens they'd like to swap, they'll need to find available routes.
+
+You can do this using the `routes` function in our `Bridge` namespace. You or your users can filter by origin and destination chains and/or tokens. Pagination is also built-in to the function.
+
+```tsx
+import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+
+// Get all available routes
+const allRoutes = await Bridge.routes({
+  client: thirdwebClient,
+});
+
+// Filter routes for a specific token or chain
+const filteredRoutes = await Bridge.routes({
+  originChainId: 1, // From Ethereum
+  originTokenAddress: NATIVE_TOKEN_ADDRESS,
+  destinationChainId: 10, // To Optimism
+  client: thirdwebClient,
+});
+
+// Paginate through routes
+const paginatedRoutes = await Bridge.routes({
+  limit: 10,
+  offset: 0,
+  client: thirdwebClient,
+});
+```
+
+This will return an array of `Route` objects, which will include information such as `symbol`, `address`, and `chainId` for both the origin and destination tokens.
+
+</Step>
+<Step title='Get a quote'>
+Once you know which routes are available, you can retrieve a quote to show the user how much they can expect to pay for a given swap.
+
+In this example, we'll use the `Buy.quote` function to get a quote for buying 10 USDC on Optimism for Base ETH.
+
+<Callout variant="info">
+  The `Buy` namespace is purpose-built for when you want to obtain a specific amount of the output token.
+  If you have a specific input amount and are flexible on the output amount, you can use the `Sell` namespace.
+  Learn more about sells [here](https://portal.thirdweb.com/references/typescript/v5/sell/prepare).
+</Callout>
+
+Quote allows us to get an expected amount before the user has connected their wallet. This quote won't come with executable transactions, and won't be a guaranteed price.
+
+
+```tsx
+import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+
+const buyQuote = await Bridge.Buy.quote({
+  originChainId: 8453, // Base
+  originTokenAddress: NATIVE_TOKEN_ADDRESS,
+  destinationChainId: 10, // Optimism
+  destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // Optimism USDC
+  buyAmountWei: 10000000n, // 10 USDC
+  client: thirdwebClient,
+});
+
+console.log(
+  `To get ${buyQuote.destinationAmount} wei on destination chain, you need to pay ${buyQuote.originAmount} wei`,
+);
+```
+
+This will return a `Quote` object, which will include the `originAmount` and `destinationAmount` in wei, along with some more useful information about the predicted quote.
+</Step>
+<Step title='Get the prepared transaction'>
+Now that we know how much the user can expect to pay, we can have them connect their wallet and execute the swap.
+
+To get a prepared quote, we'll use the `Buy.prepare` function. The key difference with this function is it requires a `sender` and `receiver` to be specified.
+
+```tsx
+import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+
+const preparedBuy = await Bridge.Buy.prepare({
+  originChainId: 8453, // Base
+  originTokenAddress: NATIVE_TOKEN_ADDRESS,
+  destinationChainId: 10, // Optimism
+  destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // Optimism USDC
+  buyAmountWei: 10000000n, // 10 USDC
+  sender: "0x...", // Your user's wallet address
+  receiver: "0x...", // Recipient address (can be the same as sender)
+  client: thirdwebClient,
+});
+
+// The prepared quote contains the transactions you need to execute
+console.log(`Transactions to execute: ${preparedBuy.transactions.length}`);
+```
+
+This will return a `PreparedQuote` object. It will look very similar to the `Quote` you received in the previous step, but it will include a `transactions` array. This array will contain the transactions you need to execute to complete the swap.
+</Step>
+<Step title='Execute the swap'>
+To execute the swap, we'll need to send all transactions in the `transactions` array one after the other.
+
+<Callout variant="warning">
+  Currently, the `transactions` array does not include approvals. You'll need to execute any necessary approvals prior to executing the swap transactions.
+</Callout>
+
+```tsx
+import { sendTransaction, waitForReceipt } from "thirdweb";
+
+const preparedBuy = await Bridge.Buy.prepare({
+  originChainId: 8453, // Base
+  originTokenAddress: NATIVE_TOKEN_ADDRESS,
+  destinationChainId: 10, // Optimism
+  destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // Optimism USDC
+  buyAmountWei: 10000000n, // 10 USDC
+  sender: "0x...", // Your user's wallet address
+  receiver: "0x...", // Recipient address (can be the same as sender)
+  client: thirdwebClient,
+});
+
+};
+
+for (const transaction of preparedBuy.transactions) {
+  const tx = prepareTransaction({
+    to: transaction.to as string,
+    value: BigInt(transaction.value ?? 0n),
+    data: transaction.data,
+    chain: defineChain(transaction.chainId),
+    client
+  });
+
+  const result = await sendAndConfirmTransaction({ transaction: tx, account });
+  let swapStatus;
+  do {
+    swapStatus = await Bridge.status({
+      transactionHash: result.transactionHash,
+      client,
+    });
+  } while (swapStatus.status !== "COMPLETED");
+};
+```
+
+<Callout variant="info">
+  The returned transactions follow the [Ox](https://oxlib.sh/) standard [TransactionEnvelopeEip1559](https://oxlib.sh/guides/transaction-envelopes)
+  format. This is a simple transaction with `data`, `to`, `value`, and `chainId` properties. **Gas is not included in the transaction, and should
+  be estimated separately if necessary.** Normally, the thirdweb SDK will handle this for you.
+</Callout>
+
+</Step>
+<Step title='Getting the swap status'>
+You'll notice in the previous step we call `Bridge.status` to get the status of the swap. We can get the status of any past swap using just the transaction hash and chain ID of its origin transaction.
+
+When sending the transactions in a prepared quote, you **must** use `Bridge.status` to get the `COMPLETED` status before moving on to the next transaction. This is because `status` waits for both the origin
+and destination transactions to complete. Waiting for the origin transaction receipt is not sufficient since the funds might not have arrived on the destination chain yet.
+
+The `status` will also return all transactions (origin and destination) involved in the swap.
+```tsx
+import { Bridge } from "thirdweb";
+
+// Check the status of a bridge transaction
+const bridgeStatus = await Bridge.status({
+  transactionHash:
+    "0xe199ef82a0b6215221536e18ec512813c1aa10b4f5ed0d4dfdfcd703578da56d",
+  chainId: 8453, // The chain ID where the transaction was initiated
+  client: thirdwebClient,
+});
+
+// The status will be one of: "COMPLETED", "PENDING", "FAILED", or "NOT_FOUND"
+if (bridgeStatus.status === "completed") {
+  console.log(`
+    Bridge completed!
+    Sent: ${bridgeStatus.originAmount} wei on chain ${bridgeStatus.originChainId}
+    Received: ${bridgeStatus.destinationAmount} wei on chain ${bridgeStatus.destinationChainId}
+  `);
+} else if (bridgeStatus.status === "pending") {
+  console.log("Bridge transaction is still pending...");
+} else {
+  console.log("Bridge transaction failed");
+}
+```
+</Step>
+</Steps>

apps/portal/src/app/connect/pay/overview/page.mdx

@@ -1,6 +1,7 @@
 import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc";
 import PayOverviewImage from "../assets/pay-overview.png";
 import SupportedChains from "../../../_images/supported-chains.png";
+import {Rocket, ArrowLeftRight, Wallet, Pencil, ShieldCheck, PiggyBank, Globe, Component} from "lucide-react";
 
 export const metadata = createMetadata({
 	image: {
@@ -14,7 +15,7 @@ export const metadata = createMetadata({
 
 # Overview
 
-Universal Bridge allows your users to bridge, swap, and purchase cryptocurrencies and execute transactions with any fiat options or tokens via cross-chain routing.
+Universal Bridge allows your users to bridge, swap, and purchase cryptocurrencies and execute transactions with any fiat options or tokens via cross-chain routing. It enables users to purchase or complete in-app transactions with any token they hold.
 
 <DocImage src={PayOverviewImage} />
 
@@ -24,46 +25,46 @@ Universal Bridge allows your users to bridge, swap, and purchase cryptocurrencie
 	className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-2 "
 >
 	<FeatureCard
-		title="Earn money"
-		description="Receive 70% of fees on each crypto-to-crypto transaction"
-		iconUrl="/icons/feature-cards/earn-money.svg"
+		title="Avoid chargeback & liability"
+		description="Automatic screening for sanctioned wallets and regions to ensure application safety."
+		iconUrl={<Rocket />}
 	/>
 
     <FeatureCard
-    	title="Onboard users"
-    	description="Fiat on-ramps to enable purchases with traditional payment methods"
-    		iconUrl="/icons/feature-cards/onboard-users.svg"
+    	title="Global Coverage"
+    	description="Bridging support in over 160+ countries to reach a truly global audience."
+    		iconUrl={<Globe/>}
     />
     	    <FeatureCard
-    	title="Enable in-app purchases"
-    	description="Purchase crypto without leaving the application"
-    		iconUrl="/icons/feature-cards/in-app-purchase.svg"
+    	title="Earn revenue"
+    	description="Monetize your application and earn swap fees on each transaction."
+    		iconUrl={<PiggyBank />}
     />
     		<FeatureCard
-    	title="Chain Coverage"
-    	description="Support purchases on over 20+ widely used EVM chains"
-    	iconUrl="/icons/feature-cards/chain-coverage.svg"
+    	title="Transact Securely"
+    	description="Strict one-time approvals ensuring funds are not at risk of exploits."
+    	iconUrl={<ShieldCheck />}
     />
     	<FeatureCard
-    	title="Liquidity Aggregation"
-    	description="Ensure every transaction is possible"
-    	iconUrl="/icons/feature-cards/liquidity-aggregation.svg"
+    	title="Easy-to-integrate Components"
+    	description="Easily integrate components for buying funds, e-commerce checkouts, and more."
+    	iconUrl={<Component />}
     />
 
     <FeatureCard
-    	title="Global Coverage"
-    	description="Support for over 130+ countries"
-    		iconUrl="/icons/feature-cards/global-coverage.svg"
+    	title="Customizable Flows"
+    	description="Create your own customized headless flows using the Universal Bridge SDK or API."
+    		iconUrl={<Pencil/>}
     />
         <FeatureCard
-    	title="Integration Options"
-    	description="Use pre-built modals or customize the transaction experience"
-    		iconUrl="/icons/feature-cards/integration-options.svg"
+    	title="Flexible Wallet Payments"
+    	description="Enable payments with any wallet that has funds not just the one connected."
+    		iconUrl= {<Wallet />}
     />
         <FeatureCard
-    	title="Secure"
-    	description="Strict one-time approvals mean user funds are not at risk of smart contract allowance exploits"
-    		iconUrl="/icons/feature-cards/security.svg"
+    	title="Multi-hop Routing"
+    	description="Handle multiple swaps at once within one session for a seamless swap experience."
+    		iconUrl={<ArrowLeftRight />}
     />
 
 </div>
@@ -74,30 +75,20 @@ Universal Bridge is supported on select EVM compatible chains. To view the full
 
 <DocImage src={SupportedChains} />
 
-## Fee Sharing
-
-Thirdweb collects a 1% fee per end-user transaction and shares 70% of that fee with you. For example, on a $100 Polygon purchase, a $1.00 fee is charged—of which $0.30 is retained by thirdweb and $0.70 is remitted to you.
-
-Note: Fee sharing applies only to fees from swaps and bridges; fiat purchases are excluded.
-
-To enable fee sharing, simply set a recipient address in your dashboard under Team > Project > Connect > Universal Bridge in the thirdweb dashboard.
-
-## Onramp providers
+## Onramp Providers
 
 | Provider | Supported Countries                                                                                     |
 | -------- | ------------------------------------------------------------------------------------------------------- |
 | Transak  | https://transak.notion.site/On-Ramp-Payment-Methods-Fees-Other-Details-b0761634feed4b338a69f4f186d906a5 |
 | Kado     | https://www.kado.money/supported-countries                                                              |
 | Stripe   | https://docs.stripe.com/crypto/onramp                                                                   |
-
-Specify a preferred onramp provider by setting the preferredProvider parameter in ConnectButton, PayEmbed, or Headless Integration. For details, refer to 
-[customization](../pay/customization/connectbutton#preferredProvider) or the [API Reference for preferredProvider](/references/typescript/v5/GetBuyWithFiatQuoteParams).
+| Coinbase | https://docs.cdp.coinbase.com/onramp/docs/payment-methods/ |
 
 ## Integration Options
 
 | OPTION                                                                                              | BEST FOR                                                                                                                                  |
 | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| [ConnectButton](/connect/pay/get-started#option-1-connectbutton)                                    | Developers who want out-of-the-box support complete with wallet and social login.                                                         |
-| [PayEmbed](/connect/pay/get-started#option-2-embed-pay)                                             | Developers who want onramp and crypto purchase experiences directly in their application.                                                 |
-| [Transaction Flow (sendTransaction)](/connect/pay/get-started#option-3-send-a-transaction-with-pay) | Developers who want users to onramp or purchase crypto directly into a transaction. Great for minting and NFT purchase flows.             |
-| [Custom Universal Bridge Experience](/connect/pay/build-a-custom-experience)                                     | Developers who want full customization over every step of the onramp process, from displaying quotes to polling for transaction statuses. |
+| [Buy Crypto](https://playground.thirdweb.com/connect/pay/)                                 | Developers who want onramp and crypto purchase experiences directly in their application.                                                 |
+| [Transactions](https://playground.thirdweb.com/connect/pay/transactions) | Developers who want users to onramp or purchase crypto directly into a transaction. Great for minting and NFT purchase flows.             |
+| [In-App Purchases](https://playground.thirdweb.com/connect/pay/commerce)                        | Developers who want to take payments from Fiat or Crypto directly to a seller wallet |
+| [Headless](https://playground.thirdweb.com/connect/pay/backend)                        | Developers who prefer a headless customized flow using APIs. |

apps/portal/src/app/connect/pay/webhooks/page.mdx

@@ -9,7 +9,7 @@ export const metadata = createMetadata({
 
 # Webhooks
 
-Pay can be configured to send webhook events to notify your application any time an event happens on your transaction. Pay sends a response, via a HTTP request, to any endpoint URLs that you have provided us in your Team > Project > Connect > Pay > Webhooks page in [thirdweb dashboard](https://thirdweb.com/team).
+Universal Bridge can be configured to send webhook events to notify your application any time an event happens on your transaction. Universal Bridge sends a response, via a HTTP request, to any endpoint URLs that you have provided us in your Team > Project > Connect > Universal Bridge > Webhooks page in [thirdweb dashboard](https://thirdweb.com/team).
 
 ## Events
 

apps/portal/src/app/connect/sidebar.tsx

@@ -314,9 +314,13 @@ export const sidebar: SideBar = {
               href: `${paySlug}/guides/accept-direct-payments`,
             },
             {
-              name: "Build a Custom Experience",
+              name: "Build a Custom Onramp Experience",
               href: `${paySlug}/guides/build-a-custom-experience`,
             },
+            {
+              name: "Cross-Chain Swapping",
+              href: `${paySlug}/guides/cross-chain-swapping`,
+            },
           ],
         },
         {

apps/portal/src/app/contracts/modular-contracts/module-contracts/cross-chain/agglayer/page.mdx

@@ -16,6 +16,10 @@ interoperable smart contract for trustless and secure transfers across any chain
 
 Learn how to add the Agglayer module to your modular contract and enable cross-chain transfers.
 
+<Callout variant="warning" title="Beta Module">
+This module is currently in beta while the Agglayer bridge is not live in implementation. This means deployments are limited to Sepolia and Cardona as it requires Ethereum as an L1 and zkEVM as L2.
+</Callout>
+
 ### Prerequisites
 
 - [Deployed ERC-20 Base Contract](/contracts/modular-contracts/tutorials/deploy-erc20-core)

apps/portal/src/app/insight/sidebar.tsx

@@ -9,6 +9,7 @@ import {
   Network,
   Rocket,
   StickyNote,
+  Webhook,
   Wrench,
 } from "lucide-react";
 
@@ -58,6 +59,33 @@ export const sidebar: SideBar = {
         },
       ],
     },
+    {
+      name: "Webhooks",
+      href: `${insightSlug}/webhooks`,
+      icon: <Webhook />,
+      links: [
+        {
+          name: "Getting Started",
+          href: `${insightSlug}/webhooks`,
+        },
+        {
+          name: "Managing Webhooks",
+          href: `${insightSlug}/webhooks/managing-webhooks`,
+        },
+        {
+          name: "Filtering",
+          href: `${insightSlug}/webhooks/filtering`,
+        },
+        {
+          name: "Payload",
+          href: `${insightSlug}/webhooks/payload`,
+        },
+        {
+          name: "API Reference",
+          href: "https://insight-api.thirdweb.com/reference#tag/webhooks",
+        },
+      ],
+    },
     {
       name: "API Reference",
       href: "https://insight-api.thirdweb.com/reference",

apps/portal/src/app/insight/webhooks/filtering/page.mdx

@@ -0,0 +1,112 @@
+import { createMetadata } from "@doc";
+
+export const metadata = createMetadata({
+	title: "Insight Webhooks | thirdweb Infrastructure",
+	description: "Filtering",
+  image: {
+    title: "Insight",
+    icon: "insight",
+  },
+});
+
+# Filtering
+
+## Webhook Topics
+
+### `v1.events`
+
+Subscribes to blockchain log events.
+
+### `v1.transactions`
+
+Subscribes to blockchain transactions.
+
+## Webhook Filters
+
+You can filter webhook notifications based on specific criteria.  
+Each webhook must have either an events filter or a transactions filter (or both).
+
+### Event Filters
+```typescript
+{
+  "v1.events": {
+    chain_ids: string[],          // Filter by specific chains
+    addresses: string[],          // Filter by contract addresses
+    signatures: {                 // Filter by event signatures
+      sig_hash: string,          // Event signature hash
+      abi?: string,             // Optional ABI for data decoding
+      params?: Record<string, any> // Filter on decoded parameters
+    }[]
+  }
+}
+```
+
+### Transaction Filters
+```typescript
+{
+  "v1.transactions": {
+    chain_ids: string[],          // Filter by specific chains
+    from_addresses: string[],     // Filter by sender addresses
+    to_addresses: string[],       // Filter by recipient addresses
+    signatures: {                 // Filter by function signatures
+      sig_hash: string,          // Function signature hash
+      abi?: string,             // Optional ABI for data decoding
+      params?: string[]         // Filter on decoded parameters
+    }[]
+  }
+}
+```
+
+### ABIs
+
+You can specify partial ABIs to have decoded data sent in the webhook payload. For this you also need to give the `sig_hash` of the event or function call.
+
+The following example will filter for `Transfer` events on Ethereum for the contract `0x1f9840a85d5af5bf1d1762f925bdaddc4201f984`
+```typescript
+{
+  ...
+  filters: {
+    "v1.events": {
+      chain_ids: ["1"],
+      addresses: ["0x1f9840a85d5af5bf1d1762f925bdaddc4201f984"],
+      signatures: [
+        {
+          sig_hash:
+            "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef",
+          abi: '{"inputs":[{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":true,"internalType":"address","name":"to","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"Transfer","type":"event"}',
+        },
+      ],
+    },
+  },
+  ...
+}
+```
+
+And this example will filter for `Approve` function calls on Ethereum for the contract `0x1f9840a85d5af5bf1d1762f925bdaddc4201f984`
+```typescript
+{
+  ...
+  filters: {
+    "v1.transactions": {
+      chain_ids: ["1"],
+      addresses: ["0x1f9840a85d5af5bf1d1762f925bdaddc4201f984"],
+      signatures: [
+        {
+          sig_hash: "0x095ea7b3",
+          abi: '{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"rawAmount","type":"uint256"}],"name":"approve","type":"function"}',
+        },
+      ],
+    },
+  },
+  ...
+}
+```
+
+### Params
+
+`params` on the `signatures` object will allow you to filter based on the decoded data. Only strict equality is supported at the moment.
+
+### Notes
+- You can specify ABIs to receive decoded event/transaction data
+- Parameter filtering supports equality matching only
+- At least one filter criteria must be specified

apps/portal/src/app/insight/webhooks/managing-webhooks/page.mdx

@@ -0,0 +1,68 @@
+import { createMetadata } from "@doc";
+
+export const metadata = createMetadata({
+	title: "Insight Webhooks | thirdweb Infrastructure",
+	description: "Managing Insight webhooks",
+  image: {
+    title: "Insight",
+    icon: "insight",
+  },
+});
+
+# Managing Webhooks
+
+For most up to date technical spec refer to https://insight-api.thirdweb.com/reference#tag/webhooks.
+
+## List Webhooks
+`GET /v1/webhooks`
+
+Retrieve all webhooks for your project or get details for a specific webhook by ID.
+
+## Create Webhook
+`POST /v1/webhooks`
+
+Creates a new webhook subscription.  
+It may take up to a minute to start working.
+
+### Verifying the created webhook
+- The webhook starts in a suspended state
+- An OTP (One-Time Password) is sent to your webhook URL for verification
+- You must verify the webhook within 15 minutes using the OTP
+- Once verified, it may take up to a minute for the webhook to become fully active
+- You can request a new OTP if you can't retrieve the initial OTP
+
+## Update Webhook
+`PATCH /v1/webhooks/:webhook_id`
+
+You can modify the URL or filters of a webhook. Additionally you can enable and disable the webhook.  
+Changes may take up to a minute to take effect.
+
+### Updating webhook URL
+- If you update the webhook URL, you'll need to verify it again with a new OTP
+- Other fields can be updated without requiring re-verification
+
+## Delete Webhook
+`DELETE /v1/webhooks/:webhook_id`
+
+Permanently removes a webhook subscription. This action cannot be undone.
+
+## Verify Webhook
+`POST /v1/webhooks/:webhook_id/verify`
+
+Activates a webhook using the OTP code that was sent to your webhook URL. Required for:
+- New webhook creation
+- After updating a webhook URL
+
+## Resend OTP
+`POST /v1/webhooks/:webhook_id/resend-otp`
+
+Request a new OTP code if the original expires or is lost:
+- Invalidates the previous OTP
+- New OTP expires after 15 minutes
+- Only works for webhooks pending verification
+
+## Test Webhook
+`POST /v1/webhooks/test`
+
+Sends a sample payload signed with a test secret ('test123').  
+Useful for testing your receiver endpoint before creating actual webhooks. 

apps/portal/src/app/insight/webhooks/page.mdx

@@ -0,0 +1,33 @@
+import { createMetadata } from "@doc";
+
+export const metadata = createMetadata({
+	title: "Insight Webhooks | thirdweb Infrastructure",
+	description: "Getting started with Insight webhooks",
+  image: {
+    title: "Insight",
+    icon: "insight",
+  },
+});
+
+# Webhooks
+
+Webhooks allow you to receive notifications when specific blockchain events or transactions occur. This enables you to automate workflows and keep your applications in sync with on-chain activity.
+
+## About Webhooks
+
+### Data Delivery
+Webhook events are collected and delivered in batches for optimal performance and reliability. This makes webhooks ideal for:
+- Tracking when specific blockchain events occur
+- Aggregating on-chain data
+- Building analytics and monitoring systems
+- Triggering downstream processes
+
+### Delivery Guarantees
+Events are guaranteed to be delivered *at least once*.  
+Your application should implement idempotency and deduplication logic using the unique event ID in the payload.  
+Events may occasionally be delivered out of order.
+
+### Performance Requirements
+- Your receiving endpoint must respond within 3 seconds
+- If your endpoint consistently fails to respond in time, the webhook will be automatically suspended
+- We recommend implementing a queue system if you need to perform time-consuming operations

apps/portal/src/app/insight/webhooks/payload/page.mdx

@@ -0,0 +1,202 @@
+import { createMetadata } from "@doc";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+
+export const metadata = createMetadata({
+	title: "Insight Webhooks | thirdweb Infrastructure",
+	description: "Payload",
+  image: {
+    title: "Insight",
+    icon: "insight",
+  },
+});
+
+# Webhook Payload
+
+## Payload Format
+```typescript
+{
+  topic: string,                      // topic of the data
+  timestamp: string,                  // timestamp of when the payload was sent in seconds
+  data: [
+    {
+      data: object,                   // data of the event or transaction
+      status: "new" | "reverted",
+      type: "event" | "transaction",
+      id: string                      // unique id of the data
+    }
+  ]
+}
+```
+
+Example Response:
+
+<Tabs defaultValue="events">
+
+<TabsList>
+	<TabsTrigger value="events">Events</TabsTrigger>
+	<TabsTrigger value="transactions">Transactions</TabsTrigger>
+</TabsList>
+
+<TabsContent value='events'>
+```json
+{
+  "timestamp": 1743164112,
+  "topic": "v1.events",
+  "data": [
+    {
+      "data": {
+        "chain_id": "1",
+        "block_number": 22140383,
+        "block_hash": "0x85bd4045d947c34b6b568fc84c7550c0efa741f71c834bbb3d3950e9da27842e",
+        "block_timestamp": 1743104207,
+        "transaction_hash": "0x460ced3718d0e09145eae8b63fd985dc366adfc4523c791116f24dc051e8363a",
+        "transaction_index": 93,
+        "log_index": 230,
+        "address": "0x1f9840a85d5af5bf1d1762f925bdaddc4201f984",
+        "data": "0x000000000000000000000000000000000000000000000000009440c61e928cca",
+        "topics": [
+          "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef",
+          "0x000000000000000000000000d360131b77ead72f1f23fb185b4896fe01dc8cb5",
+          "0x00000000000000000000000085cd07ea01423b1e937929b44e4ad8c40bbb5e71"
+        ],
+        "decoded": {
+          "name": "Transfer",
+          "indexed_params": {
+            "from": "0xd360131b77ead72f1f23fb185b4896fe01dc8cb5",
+            "to": "0x85cd07ea01423b1e937929b44e4ad8c40bbb5e71"
+          },
+          "non_indexed_params": {
+            "amount": "41729516213800138"
+          }
+        }
+      },
+      "status": "new",
+      "type": "event",
+      "id": "76b81da4ec46486f0a6e325596f506cad13ebd629520aded104efcaa37a419d5"
+    }
+  ]
+}
+```
+</TabsContent>
+
+<TabsContent value='transactions'>
+```json
+{
+  "timestamp": 1743165030,
+  "topic": "v1.transactions",
+  "data": [
+    {
+      "data": {
+        "chain_id": "1",
+        "hash": "0xceba210be88785cac0884127cb42d370bcde8248e11e490af0deeb6ded2bb421",
+        "nonce": 5,
+        "block_hash": "0x86cfe1e32fb3e5091bc2533b78d1503a4539936f50ff5a33b09df639f1572fdd",
+        "block_number": 22145183,
+        "block_timestamp": 1743162179,
+        "transaction_index": 62,
+        "from_address": "0xcd1785a6a49748948059d3c27d8f55ad0ef94c8c",
+        "to_address": "0x1f9840a85d5af5bf1d1762f925bdaddc4201f984",
+        "value": "0",
+        "gas": 50000,
+        "gas_price": "2000000000",
+        "data": "0xa9059cbb00000000000000000000000028c6c06298d514db089934071355e5743bf21d60000000000000000000000000000000000000000000000024ac7a2466fe6d4000",
+        "function_selector": "0xa9059cbb",
+        "max_fee_per_gas": "2000000000",
+        "max_priority_fee_per_gas": "2000000000",
+        "transaction_type": 2,
+        "r": "93121701149456501424579980283392650303695688563543540003926043202730906996706",
+        "s": "5712073776861917154895012394334633911928305143620822626852008432451821415527",
+        "v": "1",
+        "access_list_json": "[]",
+        "contract_address": null,
+        "gas_used": 35318,
+        "cumulative_gas_used": 9124496,
+        "effective_gas_price": "2000000000",
+        "blob_gas_used": 0,
+        "blob_gas_price": "0",
+        "logs_bloom": "0x40000000000000000000000000000000000000000020000000000000000000000000000000000000000001000000001000008000000000000000000000000000000000000000000000000008100000000000000000000000000000000000000008000000000000000000000000000000000000000000000002000010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000020000000000000002000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
+        "status": 1,
+        "decoded": {
+          "name": "transfer",
+          "inputs": {
+            "dst": "0x28c6c06298d514db089934071355e5743bf21d60",
+            "rawAmount": "676511072800000000000"
+          }
+        }
+      },
+      "status": "new",
+      "type": "transaction",
+      "id": "e922999aff6625e1e26e6eca478b2c6ece33a5b8cf3a3c8bde96c00da8d2acc0"
+    }
+  ]
+}
+```
+</TabsContent>
+</Tabs>
+
+## Headers
+Each webhook request includes:
+- `x-webhook-id` - ID of the webhook configuration to know which one triggered the send  
+- `x-webhook-signature` - hash of the payload signed with the webhook's secret. Used to validate the payload  
+
+## Signature Verification (highly recommended)
+
+To verify that the request is from thirdweb webhooks it is highly recommended to verify the payload.
+Each webhook has a `webhook_secret` which is used to sign the raw payload and is then attached to the headers.  
+
+To verify the webhook:
+```typescript
+const generateSignature = (
+  rawBody: string,
+  secret: string,
+): string => {
+  return crypto
+    .createHmac("sha256", secret)
+    .update(rawBody)
+    .digest("hex");
+};
+ 
+const isValidSignature = (
+  rawBody: string,
+  signature: string,
+  secret: string,
+): boolean => {
+  const expectedSignature = generateSignature(
+    body,
+    secret,
+  );
+  return crypto.timingSafeEqual(
+    Buffer.from(expectedSignature),
+    Buffer.from(signature),
+  );
+};
+
+// extract the signature from request headers
+const signature = req.headers['x-signature'];
+// get the raw body of the request
+const rawBody = req.rawBody;
+
+const isValid = isValidSignature(rawBody, signature, secret);
+```
+
+**You need to use the raw request body when verifying webhooks, as the cryptographic signature is sensitive to even the slightest changes. You should watch out for frameworks that parse the request as JSON and then stringify it because this too will break the signature verification.**
+
+## Payload Age
+
+You can optionally also verify the age of the payload.  
+After you have verified the signature, you can be sure the timestamp in the payload is correct and apply any time limit you wish.
+
+```typescript
+export const isExpired = (
+  timestamp: string,
+  expirationInSeconds: number,
+): boolean => {
+  const currentTime = Math.floor(Date.now() / 1000);
+  return currentTime - parseInt(timestamp) > expirationInSeconds;
+};
+```
+
+## Reorged Data
+If a blockchain reorganization occurs:
+- You'll receive an event with `status: "reverted"` instead of `status: "new"`
+- You should handle this by reverting any actions taken for the original event

apps/portal/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import "./globals.css";
 import { createMetadata } from "@/components/Document";
-import { PosthogHeadSetup, PosthogPageView } from "@/lib/posthog/Posthog";
+import { PosthogHeadSetup } from "@/lib/posthog/PosthogHeadSetup";
 import { Fira_Code, Inter } from "next/font/google";
 import Script from "next/script";
 import NextTopLoader from "nextjs-toploader";
@@ -8,6 +8,8 @@ import { StickyTopContainer } from "../components/Document/StickyTopContainer";
 import { Banner } from "../components/others/Banner";
 import { EnableSmoothScroll } from "../components/others/SmoothScroll";
 import { SetStoredTheme } from "../components/others/theme/theme";
+import { PHProvider } from "../lib/posthog/Posthog";
+import { PostHogPageView } from "../lib/posthog/PosthogPageView";
 import { cn } from "../lib/utils";
 import { Header } from "./Header";
 
@@ -44,33 +46,36 @@ export default function RootLayout({
           data-api="https://pl.thirdweb.com/api/event"
         />
       </head>
-      <body
-        className={cn(sansFont.variable, monoFont.variable, "font-sans")}
-        suppressHydrationWarning
-      >
-        <SetStoredTheme />
-        <NextTopLoader
-          color="hsl(var(--link-foreground))"
-          height={2}
-          shadow={false}
-          showSpinner={false}
-        />
-        <PosthogPageView />
-        <EnableSmoothScroll />
+      <PHProvider>
+        <PostHogPageView />
+        <body
+          className={cn(sansFont.variable, monoFont.variable, "font-sans")}
+          suppressHydrationWarning
+        >
+          <SetStoredTheme />
+          <NextTopLoader
+            color="hsl(var(--link-foreground))"
+            height={2}
+            shadow={false}
+            showSpinner={false}
+          />
+          <EnableSmoothScroll />
 
-        <div className="relative flex min-h-screen flex-col">
-          <StickyTopContainer>
-            {/* Note: Please change id as well when changing text or href so that new banner is shown to user even if user dismissed the older one  */}
-            <Banner
-              id="nebula-alpha"
-              text="Introducing Nebula - the most powerful AI to interact with the blockchain. Join the waitlist."
-              href="https://thirdweb.com/nebula"
-            />
-            <Header />
-          </StickyTopContainer>
-          {children}
-        </div>
-      </body>
+          <div className="relative flex min-h-screen flex-col">
+            <StickyTopContainer>
+              {/* Note: Please change id as well when changing text or href so that new banner is shown to user even if user dismissed the older one  */}
+              <Banner
+                id="ub-launch"
+                text="Let users pay with whatever they have without leaving your app"
+                href="https://thirdweb.com/connect/universal-bridge"
+              />
+              <Header />
+            </StickyTopContainer>
+
+            {children}
+          </div>
+        </body>
+      </PHProvider>
     </html>
   );
 }