Repository: thirdweb-dev/js
Pull request #6627: [TOOL-3909] Dashboard: Add footer links to project pages & header style adjustments
Author: login: MananTank
Labels: name: Dashboard
description: Involves changes to the Dashboard.
name: Portal
description: Involves changes to the Portal (docs) codebase.
Created: 2025-04-02T20:07:35Z | Merged: 2025-04-03T12:01:19Z

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the layout and structure of various components in the application, improving responsiveness, and introducing new footer sections for better navigation and documentation access.

### Detailed summary
- Removed `SupportedPlatformLink.tsx`.
- Updated links in `page.mdx` files.
- Enhanced layout in `DeployedContractsPage` and `ProjectSidebarLayout`.
- Introduced `FooterLinksSection` in multiple components for better documentation access.
- Improved spacing and container usage across various components.
- Refactored `AccountAbstractionPage` and `InAppWalletsFooter` for better structure and consistency.

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

<!-- end pr-codex -->


Diff:
diff --git a/apps/dashboard/src/@/components/blocks/SidebarLayout.tsx b/apps/dashboard/src/@/components/blocks/SidebarLayout.tsx
index 6294dcf04be..cc5bba9f020 100644
--- a/apps/dashboard/src/@/components/blocks/SidebarLayout.tsx
+++ b/apps/dashboard/src/@/components/blocks/SidebarLayout.tsx
@@ -17,6 +17,7 @@ import { NavLink } from "../ui/NavLink";
 import { Separator } from "../ui/separator";
 import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
 import { CustomSidebar, type SidebarLink } from "./Sidebar";
+import { AppFooter } from "./app-footer";
 
 export function SidebarLayout(props: {
   sidebarLinks: SidebarLink[];
@@ -54,7 +55,6 @@ export function FullWidthSidebarLayout(props: {
   footerSidebarLinks?: SidebarLink[];
   children: React.ReactNode;
   className?: string;
-  footer?: React.ReactNode;
 }) {
   const { contentSidebarLinks, children, footerSidebarLinks } = props;
   return (
@@ -65,7 +65,7 @@ export function FullWidthSidebarLayout(props: {
       )}
     >
       {/* left - sidebar */}
-      <Sidebar collapsible="icon" side="left">
+      <Sidebar collapsible="icon" side="left" className="pt-2">
         <SidebarContent>
           <SidebarGroup>
             <SidebarGroupContent>
@@ -95,10 +95,10 @@ export function FullWidthSidebarLayout(props: {
           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">
+        <main className="z-0 flex min-w-0 grow flex-col max-sm:w-full">
           {children}
         </main>
-        {props.footer}
+        <AppFooter containerClassName="max-w-7xl" />
       </div>
     </div>
   );
@@ -156,7 +156,7 @@ 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">
+    <div className="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>}
diff --git a/apps/dashboard/src/@/components/blocks/app-footer.tsx b/apps/dashboard/src/@/components/blocks/app-footer.tsx
index 39cf386ede9..5f104b6d774 100644
--- a/apps/dashboard/src/@/components/blocks/app-footer.tsx
+++ b/apps/dashboard/src/@/components/blocks/app-footer.tsx
@@ -12,17 +12,23 @@ import Link from "next/link";
 
 type AppFooterProps = {
   className?: string;
+  containerClassName?: string;
 };
 
 export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "w-full border-border border-t bg-card py-6 md:py-8",
+        "w-full border-border border-t py-6 md:py-8",
         props.className,
       )}
     >
-      <div className="container flex flex-col gap-4 md:gap-6">
+      <div
+        className={cn(
+          "container flex flex-col gap-4 md:gap-6",
+          props.containerClassName,
+        )}
+      >
         {/* top row */}
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-row items-center gap-3">
diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index ffdd1e036ee..7bf4ab362b3 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -20,6 +20,7 @@ export function TabLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLAnchorElement>();
@@ -30,7 +31,7 @@ export function TabLinks(props: {
       <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
 
       <ScrollShadow
-        scrollableClassName="pb-[8px] relative"
+        scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
         shadowColor={props.shadowColor}
       >
         <div
@@ -159,9 +160,11 @@ function useUnderline<El extends HTMLElement>() {
         const containerRect = containerRef.current.getBoundingClientRect();
         const lineEl = lineRef.current;
         const rect = activeTabEl.getBoundingClientRect();
+        const containerPaddingLeft =
+          containerRect.left - containerRef.current.offsetLeft;
         lineEl.style.width = `${rect.width}px`;
         lineEl.style.transform = `translateX(${
-          rect.left - containerRect.left
+          rect.left - containerPaddingLeft
         }px)`;
         setTimeout(() => {
           lineEl.style.transition = "transform 0.3s, width 0.3s";
@@ -205,6 +208,7 @@ export function TabPathLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const pathname = usePathname() || "";
   const { links, ...restProps } = props;
diff --git a/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx b/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
index 5f39132cb32..51ee799b99a 100644
--- a/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
+++ b/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
@@ -13,7 +13,7 @@ export function DeployedContractsPageHeader(props: {
   const [importModalOpen, setImportModalOpen] = useState(false);
 
   return (
-    <div>
+    <div className="border-b">
       <ImportModal
         isOpen={importModalOpen}
         onClose={() => {
@@ -23,9 +23,11 @@ export function DeployedContractsPageHeader(props: {
         projectId={props.projectId}
       />
 
-      <div className="flex flex-col gap-3 pt-2 pb-8 lg:flex-row lg:items-center lg:justify-between">
+      <div className="container flex max-w-7xl 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>
+          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
+            Contracts
+          </h1>
         </div>
         <div className="flex gap-3 [&>*]:grow">
           <Button
diff --git a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx b/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
index 2f64bd51f62..7d77a87d04b 100644
--- a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
+++ b/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
@@ -17,7 +17,8 @@ export function DeployedContractsPage(props: {
         teamId={props.teamId}
         projectId={props.projectId}
       />
-      <div className="flex grow flex-col">
+      <div className="h-6" />
+      <div className="container flex max-w-7xl grow flex-col">
         <Suspense fallback={<Loading />}>
           <DeployedContractsPageAsync {...props} />
         </Suspense>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
index d9c7be639ee..42e28684de2 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { FullWidthSidebarLayout } from "@/components/blocks/SidebarLayout";
-import { AppFooter } from "@/components/blocks/app-footer";
 import {
   BookTextIcon,
   BoxIcon,
@@ -29,7 +28,6 @@ export function ProjectSidebarLayout(props: {
 
   return (
     <FullWidthSidebarLayout
-      footer={<AppFooter />}
       contentSidebarLinks={[
         {
           href: layoutPath,
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/footer/FooterLinksSection.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/footer/FooterLinksSection.tsx
new file mode 100644
index 00000000000..14691da1407
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/footer/FooterLinksSection.tsx
@@ -0,0 +1,89 @@
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { LinkIcon } from "lucide-react";
+
+type FooterSectionProps = {
+  title: string;
+  links: {
+    href: string;
+    label: string;
+  }[];
+};
+
+type FooterCardProps = {
+  left: FooterSectionProps;
+  center: FooterSectionProps;
+  right: FooterSectionProps;
+  trackingCategory: string;
+};
+
+export function FooterLinksSection(props: FooterCardProps) {
+  return (
+    <div className="py-6">
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:gap-0 xl:divide-x xl:divide-border">
+        <div className="xl:pr-6">
+          <FooterSection
+            {...props.left}
+            trackingCategory={props.trackingCategory}
+          />
+        </div>
+
+        <div className="xl:px-6">
+          <FooterSection
+            {...props.center}
+            trackingCategory={props.trackingCategory}
+          />
+        </div>
+
+        <div className="xl:pl-6">
+          <FooterSection
+            {...props.right}
+            trackingCategory={props.trackingCategory}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FooterSection(
+  props: FooterSectionProps & { trackingCategory: string },
+) {
+  return (
+    <div>
+      <h3 className="mb-2.5 font-medium">{props.title}</h3>
+      <div className="flex flex-col gap-2.5">
+        {props.links.map((link) => (
+          <FooterLink
+            key={link.label}
+            href={link.href}
+            trackingCategory={props.trackingCategory}
+            label={link.label}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FooterLink({
+  href,
+  label,
+  trackingCategory,
+}: {
+  href: string;
+  label: string;
+  trackingCategory: string;
+}) {
+  return (
+    <TrackedLinkTW
+      href={href}
+      category={trackingCategory}
+      label={label.replace(/ /g, "-").toLowerCase()}
+      target="_blank"
+      className="flex items-start gap-2 text-balance text-muted-foreground text-sm hover:text-foreground"
+    >
+      <LinkIcon className="mt-1 size-3 shrink-0 opacity-70" />
+      {label}
+    </TrackedLinkTW>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
index e598ab027cc..b693307f30b 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
@@ -1,108 +1,76 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { FooterLinksSection } from "../../components/footer/FooterLinksSection";
 
-type LinkInfo = { label: string; href: string; trackingLabel: string };
-
-export function AAFooterSection(props: {
-  trackingCategory: string;
-}) {
+export function AAFooter() {
   return (
-    <section className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-      <FooterCard
-        title="Docs"
-        links={docLinks}
-        trackingCategory={props.trackingCategory}
-      />
-
-      <FooterCard
-        title="Guides"
-        links={guideLinks}
-        trackingCategory={props.trackingCategory}
-      />
-
-      <FooterCard
-        title="Templates"
-        links={templateLinks}
-        trackingCategory={props.trackingCategory}
-      />
-    </section>
+    <FooterLinksSection
+      trackingCategory="account-abstraction"
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            href: "https://portal.thirdweb.com/connect/account-abstraction/overview",
+            label: "Overview",
+          },
+          {
+            href: "https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started",
+            label: "Typescript",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/account-abstraction/get-started",
+            label: "React",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/account-abstraction/get-started",
+            label: "React Native",
+          },
+          {
+            href: "https://portal.thirdweb.com/dotnet/wallets/providers/account-abstraction",
+            label: ".NET",
+          },
+          {
+            href: "https://portal.thirdweb.com/unity/v5/wallets/account-abstraction",
+            label: "Unity",
+          },
+          {
+            href: "https://portal.thirdweb.com/unreal-engine/blueprints/smart-wallet",
+            label: "Unreal Engine",
+          },
+        ],
+      }}
+      right={{
+        title: "Tutorials",
+        links: [
+          {
+            label: "Web3 onboarding with in-app wallets and AA",
+            href: "https://www.youtube.com/watch?v=HP8wSH7gnQA",
+          },
+          {
+            label: "Multi-chain experience with account abstraction",
+            href: "https://www.youtube.com/watch?v=2wUtq-drxAk",
+          },
+          {
+            label: "Add AA to a web3 unity game",
+            href: "https://www.youtube.com/watch?v=04G4DLhqwgI",
+          },
+        ],
+      }}
+      center={{
+        title: "Demos",
+        links: [
+          {
+            label: "Connect Smart Accounts",
+            href: "https://playground.thirdweb.com/connect/account-abstraction/connect",
+          },
+          {
+            label: "Sponsor Gas Fees",
+            href: "https://playground.thirdweb.com/connect/account-abstraction/sponsor",
+          },
+          {
+            label: "Native Account Abstraction",
+            href: "https://playground.thirdweb.com/connect/account-abstraction/native-aa",
+          },
+        ],
+      }}
+    />
   );
 }
-
-function FooterCard(props: {
-  title: string;
-  links: LinkInfo[];
-  trackingCategory: string;
-}) {
-  return (
-    <div className="rounded-lg border border-border bg-card p-4">
-      <h3 className="mb-4 border-border border-b pt-1 pb-4 font-semibold text-lg leading-none tracking-tight">
-        {props.title}
-      </h3>
-
-      <div className="flex flex-col gap-2.5">
-        {props.links.map((link) => (
-          <TrackedLinkTW
-            key={link.href}
-            href={link.href}
-            category={props.trackingCategory}
-            label={link.trackingLabel}
-            target="_blank"
-            className="text-muted-foreground text-sm hover:text-foreground"
-          >
-            {link.label}
-          </TrackedLinkTW>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-const docLinks: LinkInfo[] = [
-  {
-    label: "Full Docs",
-    href: "https://portal.thirdweb.com/wallets/smart-wallet",
-    trackingLabel: "full-docs",
-  },
-  {
-    label: "Account Abstraction with React SDK",
-    href: "https://portal.thirdweb.com/wallets/smart-wallet/guides/react",
-    trackingLabel: "smart-wallet-react",
-  },
-  {
-    label: "Account Abstraction with TypeScript SDK",
-    href: "https://portal.thirdweb.com/wallets/smart-wallet/guides/typescript",
-    trackingLabel: "smart-wallet-typescript",
-  },
-];
-
-const guideLinks: LinkInfo[] = [
-  {
-    label: "Deploy a Smart Account (ERC-4337)",
-    href: "https://blog.thirdweb.com/guides/how-to-use-erc4337-smart-wallets/",
-    trackingLabel: "deploy-smart-wallet",
-  },
-  {
-    label:
-      "How to Extend the Base Account Abstraction Contracts Using the Solidity SDK",
-    href: "https://blog.thirdweb.com/guides/custom-smart-wallet-contracts/",
-    trackingLabel: "extend-base-smart-wallet",
-  },
-  {
-    label: "Batch Transactions with Account Abstraction",
-    href: "https://blog.thirdweb.com/guides/how-to-batch-transactions-with-the-thirdweb-sdk/",
-    trackingLabel: "batch-txns",
-  },
-];
-
-const templateLinks: LinkInfo[] = [
-  {
-    label: "Node.js template",
-    trackingLabel: "node-template",
-    href: "https://github.com/thirdweb-example/smart-wallet-script",
-  },
-  {
-    label: "React template",
-    trackingLabel: "react-template",
-    href: "https://github.com/thirdweb-example/smart-wallet-react",
-  },
-];
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx
index 92ff527d7b9..bde20aebb28 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx
@@ -10,7 +10,7 @@ import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { ArrowRightIcon } from "lucide-react";
 import { XIcon } from "lucide-react";
-import { AAFooterSection } from "./AAFooterSection";
+import { AAFooter } from "./AAFooterSection";
 
 const TRACKING_CATEGORY = "smart-wallet";
 
@@ -25,57 +25,71 @@ export function AccountAbstractionLayout(props: {
   const smartWalletsLayoutSlug = `/team/${props.teamSlug}/${props.projectSlug}/connect/account-abstraction`;
 
   return (
-    <div>
-      <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
-        Account Abstraction
-      </h1>
-      <p className="text-muted-foreground text-sm">
-        Integrate ERC-4337 compliant smart accounts for gasless sponsorships and
-        more. <br className="lg:hidden" />
-        <TrackedUnderlineLink
-          target="_blank"
-          label="docs-wallets"
-          category={TRACKING_CATEGORY}
-          href="https://portal.thirdweb.com/wallets/smart-wallet"
-        >
-          Learn more about Account Abstraction
-        </TrackedUnderlineLink>
-      </p>
-
-      <div className="h-6" />
-
-      <div className="flex flex-col gap-6">
-        {props.hasSmartWalletsWithoutBilling && <SmartWalletsBillingAlert />}
-        <GasCreditAlert teamSlug={props.teamSlug} projectId={props.projectId} />
-
-        <div>
-          <TabPathLinks
-            links={[
-              {
-                name: "Analytics",
-                path: `${smartWalletsLayoutSlug}`,
-                exactMatch: true,
-              },
-              {
-                name: "Account Factories",
-                path: `${smartWalletsLayoutSlug}/factories`,
-              },
-              {
-                name: "Sponsorship Rules",
-                path: `${smartWalletsLayoutSlug}/settings`,
-              },
-            ]}
+    <div className="flex grow flex-col">
+      {/* top */}
+      <div className="pt-4 lg:pt-6">
+        {/* header */}
+        <div className="container flex max-w-7xl flex-col gap-4">
+          <div>
+            <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
+              Account Abstraction
+            </h1>
+            <p className="text-muted-foreground text-sm">
+              Integrate ERC-4337 compliant smart accounts for gasless
+              sponsorships and more. <br className="lg:hidden" />
+              <TrackedUnderlineLink
+                target="_blank"
+                label="docs-wallets"
+                category={TRACKING_CATEGORY}
+                href="https://portal.thirdweb.com/wallets/smart-wallet"
+              >
+                Learn more about Account Abstraction
+              </TrackedUnderlineLink>
+            </p>
+          </div>
+          {props.hasSmartWalletsWithoutBilling && <SmartWalletsBillingAlert />}
+          <GasCreditAlert
+            teamSlug={props.teamSlug}
+            projectId={props.projectId}
           />
+        </div>
 
-          <div className="h-6" />
+        <div className="h-4" />
 
-          {props.children}
-        </div>
+        {/* Nav */}
+        <TabPathLinks
+          scrollableClassName="container max-w-7xl"
+          links={[
+            {
+              name: "Analytics",
+              path: `${smartWalletsLayoutSlug}`,
+              exactMatch: true,
+            },
+            {
+              name: "Account Factories",
+              path: `${smartWalletsLayoutSlug}/factories`,
+            },
+            {
+              name: "Sponsorship Rules",
+              path: `${smartWalletsLayoutSlug}/settings`,
+            },
+          ]}
+        />
       </div>
 
-      <div className="h-14" />
+      {/* content */}
+      <div className="h-6" />
+      <div className="container flex max-w-7xl grow flex-col gap-6">
+        <div>{props.children}</div>
+      </div>
+      <div className="h-20" />
 
-      <AAFooterSection trackingCategory={TRACKING_CATEGORY} />
+      {/* footer */}
+      <div className="border-border border-t">
+        <div className="container max-w-7xl">
+          <AAFooter />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx
index 0b3bb4a5d68..e0b7b181efc 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx
@@ -1,176 +1,80 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { ArrowRightIcon } from "lucide-react";
-import { SupportedPlatformLink } from "../../../../../../../components/wallets/SupportedPlatformLink";
+import { FooterLinksSection } from "../../../components/footer/FooterLinksSection";
 
-export function InAppWalletFooterSection(props: {
-  trackingCategory: string;
-}) {
+export function InAppWalletsFooter() {
   return (
-    <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
-      <ViewDocs trackingCategory={props.trackingCategory} />
-      <Templates trackingCategory={props.trackingCategory} />
-    </div>
-  );
-}
-
-function ViewDocs(props: {
-  trackingCategory: string;
-}) {
-  const TRACKING_CATEGORY = props.trackingCategory;
-  return (
-    <div className="rounded-lg border border-border bg-card p-4 lg:p-6">
-      <div className="flex items-center gap-2">
-        <h3 className="font-semibold">View Docs</h3>
-        <ArrowRightIcon className="size-4" />
-      </div>
-
-      <div className="h-4" />
-
-      <div className="grid grid-cols-2 gap-4">
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          platform="React"
-          href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
-        />
-
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          platform="Unity"
-          href="https://portal.thirdweb.com/unity/wallets/providers/embedded-wallet"
-        />
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          platform="React Native"
-          href="https://portal.thirdweb.com/react/v5/in-app-wallet/get-started"
-        />
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          platform="TypeScript"
-          href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
-        />
-      </div>
-
-      <div className="h-6" />
-
-      <div className="flex items-center gap-2">
-        <h3 className="font-semibold">Relevant Guides</h3>
-        <ArrowRightIcon className="size-4" />
-      </div>
-
-      <div className="h-4" />
-
-      <div className="flex flex-col gap-3">
-        <GuideLink
-          href="https://blog.thirdweb.com/what-are-embedded-wallets/"
-          label="what-is-an-embedded-wallet"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          What is an in-app wallet?
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/connect/in-app-wallet/get-started"
-          label="sdks-get-started"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          Get started with In-App Wallets
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/connect/in-app-wallet/how-to/connect-users"
-          label="how-to-connect-your-users"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          Using In-App Wallets with Connect
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/connect/in-app-wallet/how-to/build-your-own-ui"
-          label="how-to-build-your-own-ui"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          How to Build Your Own UI
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/connect/in-app-wallet/custom-auth/custom-auth-server"
-          label="how-to-custom-auth-server"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          Create a custom auth server
-        </GuideLink>
-      </div>
-    </div>
-  );
-}
-
-function GuideLink(props: {
-  label: string;
-  children: React.ReactNode;
-  href: string;
-  trackingCategory: string;
-}) {
-  return (
-    <TrackedLinkTW
-      category={props.trackingCategory}
-      label="guide"
-      trackingProps={{
-        guide: props.label,
+    <FooterLinksSection
+      trackingCategory="in-app-wallets"
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            href: "https://portal.thirdweb.com/connect/wallet/overview",
+            label: "Overview",
+          },
+          {
+            href: "https://portal.thirdweb.com/typescript/v5/in-app-wallet",
+            label: "Typescript",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/in-app-wallet/get-started",
+            label: "React",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/in-app-wallet/get-started",
+            label: "React Native",
+          },
+          {
+            href: "https://portal.thirdweb.com/dotnet/wallets/providers/in-app-wallet",
+            label: ".NET",
+          },
+          {
+            href: "https://portal.thirdweb.com/unity/v5/wallets/in-app-wallet",
+            label: "Unity",
+          },
+          {
+            href: "https://portal.thirdweb.com/unreal-engine/blueprints/in-app-wallet",
+            label: "Unreal Engine",
+          },
+        ],
       }}
-      href={props.href}
-      className="!text-muted-foreground hover:!text-foreground text-sm"
-      target="_blank"
-    >
-      {props.children}
-    </TrackedLinkTW>
-  );
-}
-
-function Templates(props: {
-  trackingCategory: string;
-}) {
-  return (
-    <div className="rounded-lg border border-border bg-card p-4 lg:p-6">
-      <div className="flex items-center gap-2">
-        <h3 className="font-semibold">Relevant Templates</h3>
-        <ArrowRightIcon className="size-4" />
-      </div>
-
-      <div className="h-6" />
-
-      <div className="flex flex-col gap-3">
-        <GuideLink
-          href="https://github.com/thirdweb-example/embedded-smart-wallet"
-          label="embedded-smart-wallet"
-          trackingCategory={props.trackingCategory}
-        >
-          In-App Wallet + Account Abstraction Starter Kit
-        </GuideLink>
-
-        <GuideLink
-          href="https://github.com/thirdweb-example/catattacknft"
-          label="embedded-cat-attack"
-          trackingCategory={props.trackingCategory}
-        >
-          Cat Attack [Demo Web Game]
-        </GuideLink>
-
-        <GuideLink
-          href="https://github.com/thirdweb-example/embedded-wallet-custom-ui"
-          label="embedded-wallet-with-custom-ui-react"
-          trackingCategory={props.trackingCategory}
-        >
-          In-App Wallet With Custom UI [React]
-        </GuideLink>
-
-        <GuideLink
-          href="https://github.com/thirdweb-example/embedded-wallet-custom-ui-react-native"
-          label="embedded-wallet-with-custom-ui-react-native"
-          trackingCategory={props.trackingCategory}
-        >
-          In-App Wallet With Custom UI [ReactNative]
-        </GuideLink>
-      </div>
-    </div>
+      center={{
+        title: "Tutorials",
+        links: [
+          {
+            href: "https://www.youtube.com/watch?v=9s3Z-MvPv2I",
+            label: "Build your own custom connect component",
+          },
+          {
+            label: "Learn to create wallets inside a Unity game",
+            href: "https://www.youtube.com/watch?v=oUouNueoVFU",
+          },
+          {
+            href: "https://www.youtube.com/watch?v=xEp-fKba_cI",
+            label: "Pre-generate wallets for users",
+          },
+          {
+            label: "Sign-in with guest mode",
+            href: "https://portal.thirdweb.com/connect/wallet/sign-in-methods/guest",
+          },
+        ],
+      }}
+      right={{
+        title: "Demos",
+        links: [
+          {
+            href: "https://playground.thirdweb.com/connect/in-app-wallet/ecosystem",
+            label: "Ecosystems",
+          },
+          {
+            href: "https://playground.thirdweb.com/connect/in-app-wallet/sponsor",
+            label: "Signless Sponsored Transactions",
+          },
+          {
+            href: "https://playground.thirdweb.com/connect/in-app-wallet",
+            label: "Customized UI",
+          },
+        ],
+      }}
+    />
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx
index 4630e251eb4..14a1d6e7237 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx
@@ -3,14 +3,14 @@ import { TRACKING_CATEGORY } from "../_constants";
 
 export async function InAppWalletsHeader() {
   return (
-    <div>
-      <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:mb-2 lg:text-3xl">
+    <div className="">
+      <h1 className="mb-2 font-semibold text-2xl tracking-tighter lg:text-3xl">
         In-App Wallets
       </h1>
-      <p className="mb-7 max-w-[700px] text-muted-foreground text-sm leading-relaxed">
+      <p className="max-w-2xl text-muted-foreground text-sm leading-relaxed">
         A wallet infrastructure that enables apps to create, manage, and control
-        their users wallets. Email login, social login, and bring-your-own auth
-        supported.{" "}
+        their users wallets. <br /> Email login, social login, and
+        bring-your-own auth supported.{" "}
         <TrackedUnderlineLink
           target="_blank"
           href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx
index 4c1cdce9a3b..ea7cb0d9449 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx
@@ -1,9 +1,8 @@
 import { getProject } from "@/api/projects";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { redirect } from "next/navigation";
-import { InAppWalletFooterSection } from "./_components/footer";
+import { InAppWalletsFooter } from "./_components/footer";
 import { InAppWalletsHeader } from "./_components/header";
-import { TRACKING_CATEGORY } from "./_constants";
 
 export default async function Layout(props: {
   params: Promise<{
@@ -22,32 +21,48 @@ export default async function Layout(props: {
   const { team_slug, project_slug } = params;
 
   return (
-    <div>
-      <InAppWalletsHeader />
-      <TabPathLinks
-        links={[
-          {
-            name: "Analytics",
-            path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets`,
-            exactMatch: true,
-          },
-          {
-            name: "Users",
-            path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/users`,
-            exactMatch: true,
-          },
-          {
-            name: "Settings",
-            path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/settings`,
-            exactMatch: true,
-          },
-        ]}
-      />
+    <div className="flex grow flex-col">
+      {/* header */}
+      <div className="pt-4 lg:pt-6">
+        <div className="container max-w-7xl">
+          <InAppWalletsHeader />
+        </div>
+        <div className="h-3" />
+        <TabPathLinks
+          scrollableClassName="container max-w-7xl"
+          links={[
+            {
+              name: "Analytics",
+              path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets`,
+              exactMatch: true,
+            },
+            {
+              name: "Users",
+              path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/users`,
+              exactMatch: true,
+            },
+            {
+              name: "Settings",
+              path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/settings`,
+              exactMatch: true,
+            },
+          ]}
+        />
+      </div>
 
-      <div className="h-8" />
-      {props.children}
-      <div className="h-8" />
-      <InAppWalletFooterSection trackingCategory={TRACKING_CATEGORY} />
+      {/* content */}
+      <div className="container flex max-w-7xl grow flex-col">
+        <div className="h-6" />
+        {props.children}
+        <div className="h-20" />
+      </div>
+
+      {/* footer */}
+      <div className="border-t">
+        <div className="container max-w-7xl">
+          <InAppWalletsFooter />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx
deleted file mode 100644
index 1b134327574..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default async function Page(props: {
-  params: Promise<{
-    team_slug: string;
-    project_slug: string;
-  }>;
-}) {
-  const params = await props.params;
-
-  redirect(
-    `/team/${params.team_slug}/${params.project_slug}/connect/in-app-wallets`,
-  );
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/layout.tsx
index abf03ae42af..217d3d474e5 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/layout.tsx
@@ -1,7 +1,8 @@
 import { getProject } from "@/api/projects";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { redirect } from "next/navigation";
-import { UnderlineLink } from "../../../../../../@/components/ui/UnderlineLink";
+import { FooterLinksSection } from "../../components/footer/FooterLinksSection";
 
 export default async function Layout(props: {
   params: Promise<{
@@ -20,13 +21,13 @@ export default async function Layout(props: {
   const payLayoutPath = `/team/${params.team_slug}/${params.project_slug}/connect/universal-bridge`;
 
   return (
-    <div className="flex w-full flex-col gap-6">
-      <div className="flex flex-col items-start justify-between gap-6 lg:flex-row">
-        <div className="max-w-[700px]">
+    <div className="flex grow flex-col">
+      <div className="pt-4 lg:pt-6">
+        <div className="container max-w-7xl">
           <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:mb-2 lg:text-3xl">
             Universal Bridge
           </h1>
-          <p className="text-muted-foreground text-sm leading-relaxed">
+          <p className="max-w-3xl text-muted-foreground text-sm leading-relaxed">
             Universal Bridge allows your users to bridge, swap, and purchase
             cryptocurrencies and execute transactions with any fiat options or
             tokens via cross-chain routing.{" "}
@@ -38,28 +39,99 @@ export default async function Layout(props: {
             </UnderlineLink>
           </p>
         </div>
+
+        <div className="h-4" />
+        <TabPathLinks
+          scrollableClassName="container max-w-7xl"
+          className="w-full"
+          links={[
+            {
+              name: "Analytics",
+              path: payLayoutPath,
+              exactMatch: true,
+            },
+            {
+              name: "Webhooks",
+              path: `${payLayoutPath}/webhooks`,
+            },
+            {
+              name: "Settings",
+              path: `${payLayoutPath}/settings`,
+            },
+          ]}
+        />
+      </div>
+
+      <div className="h-6" />
+      <div className="container flex max-w-7xl grow flex-col">
+        {props.children}
+      </div>
+
+      <div className="h-20" />
+      <div className="border-border border-t">
+        <div className="container max-w-7xl">
+          <UBFooter />
+        </div>
       </div>
+    </div>
+  );
+}
 
-      <TabPathLinks
-        className="w-full"
-        links={[
+function UBFooter() {
+  return (
+    <FooterLinksSection
+      trackingCategory="universal-bridge"
+      left={{
+        title: "Documentation",
+        links: [
           {
-            name: "Analytics",
-            path: payLayoutPath,
-            exactMatch: true,
+            href: "https://portal.thirdweb.com/connect/pay/overview",
+            label: "Overview",
           },
           {
-            name: "Webhooks",
-            path: `${payLayoutPath}/webhooks`,
+            href: "https://portal.thirdweb.com/typescript/v5/convertCryptoToFiat",
+            label: "TypeScript",
           },
           {
-            name: "Settings",
-            path: `${payLayoutPath}/settings`,
+            href: "https://portal.thirdweb.com/react/v5/pay/fund-wallets",
+            label: "React",
           },
-        ]}
-      />
-
-      {props.children}
-    </div>
+          {
+            href: "https://portal.thirdweb.com/dotnet/universal-bridge/quickstart",
+            label: ".NET",
+          },
+        ],
+      }}
+      right={{
+        title: "Tutorials",
+        links: [
+          {
+            label: "Implement cross-chain payments in any app",
+            href: "https://www.youtube.com/watch?v=aBu175-VsNY",
+          },
+        ],
+      }}
+      center={{
+        title: "Demos",
+        links: [
+          {
+            label: "UI Component",
+            href: "https://playground.thirdweb.com/connect/pay",
+          },
+          {
+            label: "Buy Crypto",
+            href: "https://playground.thirdweb.com/connect/pay/fund-wallet",
+          },
+          {
+            label: "Commerce",
+            href: "https://playground.thirdweb.com/connect/pay/commerce",
+          },
+          {
+            label: "Transactions",
+            href: "https://playground.thirdweb.com/connect/pay/transactions",
+          },
+        ],
+      }}
+    />
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx
index b6f1c60c24c..aa287ba5597 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx
@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import { DeployedContractsPage } from "../../../../account/contracts/_components/DeployedContractsPage";
 import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../../login/loginRedirect";
+import { FooterLinksSection } from "../components/footer/FooterLinksSection";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -29,10 +30,71 @@ export default async function Page(props: {
   }
 
   return (
-    <DeployedContractsPage
-      teamId={team.id}
-      projectId={project.id}
-      authToken={authToken}
-    />
+    <div className="flex grow flex-col">
+      <DeployedContractsPage
+        teamId={team.id}
+        projectId={project.id}
+        authToken={authToken}
+      />
+      <div className="h-20" />
+      <ContractsFooter />
+    </div>
+  );
+}
+
+function ContractsFooter() {
+  return (
+    <div className="border-t">
+      <div className="container max-w-7xl">
+        <FooterLinksSection
+          trackingCategory="contracts"
+          left={{
+            title: "Documentation",
+            links: [
+              {
+                label: "Deployment Tools",
+                href: "https://portal.thirdweb.com/contracts/deploy/overview",
+              },
+              {
+                label: "Modular Contracts",
+                href: "https://portal.thirdweb.com/contracts/modular-contracts/overview",
+              },
+              {
+                label: "Pre-built Contracts",
+                href: "https://portal.thirdweb.com/contracts/explore/overview",
+              },
+            ],
+          }}
+          center={{
+            title: "Templates",
+            links: [
+              {
+                label: "Hardhat Starter",
+                href: "https://thirdweb.com/templates/hardhat-starter",
+              },
+              {
+                href: "https://thirdweb.com/templates/forge-starter",
+                label: "Forge Starter",
+              },
+            ],
+          }}
+          right={{
+            title: "Tutorials",
+            links: [
+              {
+                label:
+                  "Everything you need to know about upgradeable smart contracts",
+                href: "https://www.youtube.com/watch?v=cZt-CkzxrNM",
+              },
+              {
+                label:
+                  "Modular Contracts SDK: Build Core & Modules from Scratch (Advanced Guide)",
+                href: "https://www.youtube.com/watch?v=ZoOk41y4f_k",
+              },
+            ],
+          }}
+        />
+      </div>
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx
index e410796b5fd..b5143024cfc 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx
@@ -2,6 +2,7 @@ import { isProjectActive } from "@/api/analytics";
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import { notFound } from "next/navigation";
+import { FooterLinksSection } from "../components/footer/FooterLinksSection";
 import { BlueprintCard } from "./blueprint-card";
 import { InsightFTUX } from "./insight-ftux";
 
@@ -32,23 +33,78 @@ export default async function Page(props: {
   return (
     <div className="flex grow flex-col">
       {/* header */}
-      <div>
-        <h1 className="mb-0.5 font-semibold text-3xl tracking-tight">
-          Insight
-        </h1>
-        <p className="text-muted-foreground">
-          APIs to retrieve blockchain data from any EVM chain, enrich it with
-          metadata, and transform it using custom logic
-        </p>
+      <div className="border-b py-10">
+        <div className="container max-w-7xl">
+          <h1 className="mb-1 font-semibold text-3xl tracking-tight">
+            Insight
+          </h1>
+          <p className="text-muted-foreground text-sm">
+            APIs to retrieve blockchain data from any EVM chain, enrich it with
+            metadata, and transform it using custom logic
+          </p>
+        </div>
       </div>
 
       <div className="h-6" />
 
-      {showFTUX ? (
-        <InsightFTUX clientId={project.publishableKey} />
-      ) : (
-        <BlueprintCard />
-      )}
+      <div className="container flex max-w-7xl grow flex-col">
+        {showFTUX ? (
+          <InsightFTUX clientId={project.publishableKey} />
+        ) : (
+          <BlueprintCard />
+        )}
+      </div>
+
+      <div className="h-20" />
+      <div className="border-t">
+        <div className="container max-w-7xl">
+          <InsightFooter />
+        </div>
+      </div>
     </div>
   );
 }
+
+function InsightFooter() {
+  return (
+    <FooterLinksSection
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            label: "Overview",
+            href: "https://portal.thirdweb.com/insight",
+          },
+          {
+            label: "API Reference",
+            href: "https://insight-api.thirdweb.com/reference",
+          },
+        ],
+      }}
+      center={{
+        title: "Tutorials",
+        links: [
+          {
+            label:
+              "Blockchain Data on Any EVM - Quick and Easy REST APIs for Onchain Data",
+            href: "https://www.youtube.com/watch?v=U2aW7YIUJVw",
+          },
+          {
+            label: "Build a Whale Alerts Telegram Bot with Insight",
+            href: "https://www.youtube.com/watch?v=HvqewXLVRig",
+          },
+        ],
+      }}
+      right={{
+        title: "Demos",
+        links: [
+          {
+            label: "API Playground",
+            href: "https://playground.thirdweb.com/insight",
+          },
+        ],
+      }}
+      trackingCategory="insight"
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx
index 0759a1a4a52..f15523d8d38 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx
@@ -24,7 +24,7 @@ export function NebulaAnalyticsPage(props: {
   return (
     <ResponsiveSearchParamsProvider value={props.searchParams}>
       <header className="border-b">
-        <div className="flex flex-col items-start gap-4 pt-2 pb-6 md:flex-row md:items-center md:justify-between lg:pt-4 lg:pb-10">
+        <div className="container flex max-w-7xl flex-col items-start gap-4 py-10 md:flex-row md:items-center md:justify-between">
           <h1 className="font-semibold text-3xl tracking-tight">Nebula</h1>
 
           <div className="flex gap-3">
@@ -45,7 +45,7 @@ export function NebulaAnalyticsPage(props: {
         </div>
       </header>
 
-      <div className="pt-8">
+      <div className="container max-w-7xl pt-8">
         <div className="mb-4 flex flex-col justify-between gap-3 md:flex-row md:items-end">
           <h2 className="font-semibold text-2xl tracking-tight">Analytics</h2>
           <NebulaAnalyticsFilter />
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
index d9903649a79..9c28e36478e 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
@@ -13,8 +13,8 @@ export function NebulaWaitListPageUI(props: {
     <div className={cn("flex grow flex-col", props.className)}>
       {/* Header */}
       {!props.hideHeader && (
-        <div className="border-b pt-4 pb-10">
-          <div className="flex items-center justify-between">
+        <div className="border-b py-10">
+          <div className="container flex max-w-7xl items-center justify-between">
             <h1 className="font-semibold text-3xl tracking-tight"> Nebula </h1>
             <Button asChild variant="outline">
               <Link href="/contact-us" target="_blank">
@@ -25,7 +25,7 @@ export function NebulaWaitListPageUI(props: {
         </div>
       )}
 
-      <div className="flex grow flex-col overflow-hidden py-32">
+      <div className="container flex max-w-7xl grow flex-col overflow-hidden py-32">
         <CenteredCard
           title="You're on the waitlist"
           description="You should receive access to Nebula soon!"
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/layout.tsx
new file mode 100644
index 00000000000..c8df508369e
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/layout.tsx
@@ -0,0 +1,72 @@
+import { FooterLinksSection } from "../components/footer/FooterLinksSection";
+
+export default function Layout(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex grow flex-col">
+      <div className="flex grow flex-col">{props.children}</div>
+      <div className="h-20" />
+      <div className="border-t">
+        <div className="container max-w-7xl">
+          <NebulaFooter />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function NebulaFooter() {
+  return (
+    <FooterLinksSection
+      trackingCategory="nebula"
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            label: "API Reference",
+            href: "https://portal.thirdweb.com/nebula/get-started",
+          },
+          {
+            label: "Python SDK",
+            href: "https://portal.thirdweb.com/nebula/tools/python-sdk/installation",
+          },
+          {
+            label: "MCP Server",
+            href: "https://portal.thirdweb.com/nebula/mcp-server/get-started",
+          },
+        ],
+      }}
+      center={{
+        title: "Tutorials",
+        links: [
+          {
+            href: "https://www.youtube.com/watch?v=xrm0emiRGMk",
+            label: "Build a Telegram Mini App ERC20 deployer, powered by AI",
+          },
+          {
+            label: "Build an AI Powered Blockchain Explorer",
+            href: "https://www.youtube.com/watch?v=vBooJytkXa4",
+          },
+        ],
+      }}
+      right={{
+        title: "Templates",
+        links: [
+          {
+            label: "Bouncer Eliza Agent",
+            href: "https://github.com/thirdweb-example/bouncer-eliza-agent",
+          },
+          {
+            label: "Block Explorer",
+            href: "https://github.com/thirdweb-example/nebula-block-explorer",
+          },
+          {
+            label: "ERC20 Telegram Mini-app Token Deployer",
+            href: "https://github.com/thirdweb-example/erc20-token-deployer",
+          },
+        ],
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx
index f7854db2ab4..059430bccc7 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx
@@ -54,12 +54,19 @@ export default async function Page(props: {
   if (hasNebulaAccess) {
     if (showFTUX) {
       return (
-        <div>
-          <h1 className="mb-5 font-semibold text-3xl tracking-tight">Nebula</h1>
-          <NebulaFTUX
-            secretKeyMasked={project.secretKeys[0]?.masked || ""}
-            projectId={project.id}
-          />
+        <div className="flex grow flex-col">
+          <div className="border-b py-10">
+            <div className="container max-w-7xl">
+              <h1 className="font-semibold text-3xl tracking-tight">Nebula</h1>
+            </div>
+          </div>
+
+          <div className="container mt-6 max-w-7xl">
+            <NebulaFTUX
+              secretKeyMasked={project.secretKeys[0]?.masked || ""}
+              projectId={project.id}
+            />
+          </div>
         </div>
       );
     }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
index b62b254b309..78dc7d4be97 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
@@ -76,26 +76,29 @@ export default async function ProjectOverviewPage(props: PageProps) {
     projectId: project.id,
   });
 
-  // is any analytics data active?
   const isActive = Object.values(activeStatus).some((v) => !!v);
 
   return (
     <div className="flex grow flex-col">
-      <div className="w-full">
-        <Header
-          title={project.name}
-          interval={interval}
-          range={range}
-          showRangeSelector={isActive}
-        />
+      <div className="w-full border-b py-10">
+        <div className="container max-w-7xl">
+          <Header
+            title={project.name}
+            interval={interval}
+            range={range}
+            showRangeSelector={isActive}
+          />
+        </div>
       </div>
 
+      <div className="h-6" />
+
       {!isActive ? (
-        <div className="pt-6">
+        <div className="container max-w-7xl">
           <ProjectFTUX project={project} teamSlug={params.team_slug} />
         </div>
       ) : (
-        <div className="flex grow flex-col pt-6">
+        <div className="container flex max-w-7xl grow flex-col">
           <Suspense fallback={<GenericLoadingPage />}>
             <ProjectAnalytics
               project={project}
@@ -106,6 +109,8 @@ export default async function ProjectOverviewPage(props: PageProps) {
           </Suspense>
         </div>
       )}
+
+      <div className="h-20" />
     </div>
   );
 }
diff --git a/apps/dashboard/src/components/wallets/SupportedPlatformLink.tsx b/apps/dashboard/src/components/wallets/SupportedPlatformLink.tsx
deleted file mode 100644
index b1dc235a58c..00000000000
--- a/apps/dashboard/src/components/wallets/SupportedPlatformLink.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { cn } from "@/lib/utils";
-import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
-import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
-import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
-
-export function SupportedPlatformLink(props: {
-  platform: "React" | "React Native" | "Unity" | "TypeScript";
-  href: string;
-  trackingCategory: string;
-  className?: string;
-}) {
-  let icon = ReactIcon;
-  if (props.platform === "Unity") {
-    icon = UnityIcon;
-  } else if (props.platform === "TypeScript") {
-    icon = TypeScriptIcon;
-  }
-
-  return (
-    <TrackedLinkTW
-      category={props.trackingCategory}
-      label={`platform-${props.platform.replace(" ", "-").toLowerCase()}`}
-      href={props.href}
-      target="_blank"
-      className={cn(
-        "flex items-center gap-2 text-muted-foreground text-sm hover:text-foreground",
-        props.className,
-      )}
-    >
-      {icon({ className: "size-4" })}
-      {props.platform}
-    </TrackedLinkTW>
-  );
-}
diff --git a/apps/portal/src/app/nebula/tools/python-sdk/installation/page.mdx b/apps/portal/src/app/nebula/tools/python-sdk/installation/page.mdx
index f8151ce12ab..c4448a8e40c 100644
--- a/apps/portal/src/app/nebula/tools/python-sdk/installation/page.mdx
+++ b/apps/portal/src/app/nebula/tools/python-sdk/installation/page.mdx
@@ -1,4 +1,4 @@
-### Python SDK
+# Python SDK
 
 #### Installation
 
diff --git a/apps/portal/src/app/react-native/v5/page.mdx b/apps/portal/src/app/react-native/v5/page.mdx
index 757d8f4e907..30a535d9c6d 100644
--- a/apps/portal/src/app/react-native/v5/page.mdx
+++ b/apps/portal/src/app/react-native/v5/page.mdx
@@ -28,7 +28,7 @@ Many of the components and hooks in the React Native SDK use a [`client`](/types
 <ArticleIconCard
 	title="Getting started"
 	icon={ZapIcon}
-	href="/react-native/v5/installation"
+	href="/react-native/v5/getting-started"
 	description="Get started with the React Native SDK"
 />
 


Reviews:
user: login: graphite-app[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T20:08:45Z
user: login: MananTank
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T20:10:42Z
user: login: joaquim-verges
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-03T01:22:57Z

Review comments:
diff_hunk: @@ -1,108 +1,76 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import FooterCard from "../../components/FooterCard/FooterCard";
 
-type LinkInfo = { label: string; href: string; trackingLabel: string };
-
-export function AAFooterSection(props: {
-  trackingCategory: string;
-}) {
+export function AAFooter() {
   return (
-    <section className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-      <FooterCard
-        title="Docs"
-        links={docLinks}
-        trackingCategory={props.trackingCategory}
-      />
-
-      <FooterCard
-        title="Guides"
-        links={guideLinks}
-        trackingCategory={props.trackingCategory}
-      />
-
-      <FooterCard
-        title="Templates"
-        links={templateLinks}
-        trackingCategory={props.trackingCategory}
-      />
-    </section>
+    <FooterCard
+      trackingCategory="account-abstraction"
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            href: "https://portal.thirdweb.com/connect/account-abstraction/overview",
+            label: "Overview",
+          },
+          {
+            href: "https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started",
+            label: "Typescript",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/account-abstraction/get-started",
+            label: "React",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/account-abstraction/get-started",
+            label: "React Native",
path: apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
user: login: graphite-app[bot]
body: The React Native documentation link appears to be using the same URL as the React link (`https://portal.thirdweb.com/react/v5/account-abstraction/get-started`). This should be updated to point to the React Native specific documentation page to ensure users are directed to the appropriate implementation details for that platform.
```suggestion
          {
            href: "https://portal.thirdweb.com/react-native/v5/account-abstraction/get-started",
            label: "React Native",
```
  

*Spotted by [Diamond](https://app.graphite.dev/diamond/?org=thirdweb-dev&ref=ai-review-comment)*<i class='graphite__hidden'><br /><br />Is this helpful? React 👍 or 👎 to let us know.</i>
created_at: 2025-04-02T20:08:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,108 +1,76 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import FooterCard from "../../components/FooterCard/FooterCard";
 
-type LinkInfo = { label: string; href: string; trackingLabel: string };
-
-export function AAFooterSection(props: {
-  trackingCategory: string;
-}) {
+export function AAFooter() {
   return (
-    <section className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-      <FooterCard
-        title="Docs"
-        links={docLinks}
-        trackingCategory={props.trackingCategory}
-      />
-
-      <FooterCard
-        title="Guides"
-        links={guideLinks}
-        trackingCategory={props.trackingCategory}
-      />
-
-      <FooterCard
-        title="Templates"
-        links={templateLinks}
-        trackingCategory={props.trackingCategory}
-      />
-    </section>
+    <FooterCard
+      trackingCategory="account-abstraction"
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            href: "https://portal.thirdweb.com/connect/account-abstraction/overview",
+            label: "Overview",
+          },
+          {
+            href: "https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started",
+            label: "Typescript",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/account-abstraction/get-started",
+            label: "React",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/account-abstraction/get-started",
+            label: "React Native",
path: apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
user: login: MananTank
body: Its intentional 
created_at: 2025-04-02T20:10:42Z
author_association: CONTRIBUTOR

PR comments:
user: login: linear[bot]
created_at: 2025-04-02T20:07:38Z
body: <p><a href="https://linear.app/thirdweb/issue/TOOL-3909/add-footer-links-to-project-pages">TOOL-3909 Add footer links to project pages</a></p>
author_association: NONE
user: login: vercel[bot]
created_at: 2025-04-02T20:07:38Z
body: [vc]: #K7J7rXDn81LOinRLW3NN4i/npTZ8tp9ZlxhZ/+k35lA=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0aGlyZHdlYl9wbGF5Z3JvdW5kIiwicm9vdERpcmVjdG9yeSI6ImFwcHMvcGxheWdyb3VuZC13ZWIiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS90aGlyZHdlYi90aGlyZHdlYl9wbGF5Z3JvdW5kL0VSMkdwYTdpWktaWjF0VjU1M0NiS0tER1htdVkiLCJwcmV2aWV3VXJsIjoiIiwibmV4dENvbW1pdFN0YXR1cyI6IlNLSVBQRUQifSx7Im5hbWUiOiJ3YWxsZXQtdWkiLCJyb290RGlyZWN0b3J5IjoiYXBwcy93YWxsZXQtdWkiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS90aGlyZHdlYi93YWxsZXQtdWkvQnRRWUNMQ284Q1VxRTRKdHNMMXdacDJCRkZSbSIsInByZXZpZXdVcmwiOiIiLCJuZXh0Q29tbWl0U3RhdHVzIjoiU0tJUFBFRCJ9LHsibmFtZSI6ImRvY3MtdjIiLCJyb290RGlyZWN0b3J5IjoiYXBwcy9wb3J0YWwiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vdGhpcmR3ZWIvZG9jcy12Mi82NWVjbUdEVldDZEpNUjFQenRLdldNdWg0bjdMIiwicHJldmlld1VybCI6ImRvY3MtdjItZ2l0LXRvb2wtMzkwOS50aGlyZHdlYi1wcmV2aWV3LmNvbSIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJkb2NzLXYyLWdpdC10b29sLTM5MDkudGhpcmR3ZWItcHJldmlldy5jb20ifX0seyJuYW1lIjoibG9naW4iLCJyb290RGlyZWN0b3J5IjoiYXBwcy9sb2dpbiIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiIifSwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3RoaXJkd2ViL2xvZ2luL0NUVGdvU1FtTGRSb1ZqNEgzQVpyNjdTTDRTbmIiLCJwcmV2aWV3VXJsIjoiIiwibmV4dENvbW1pdFN0YXR1cyI6IlNLSVBQRUQifSx7Im5hbWUiOiJ0aGlyZHdlYi13d3ciLCJyb290RGlyZWN0b3J5IjoiYXBwcy9kYXNoYm9hcmQiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vdGhpcmR3ZWIvdGhpcmR3ZWItd3d3LzhCYXdTZGk3TEpka1k3RFc2R2g1OHdTWmdRd3YiLCJwcmV2aWV3VXJsIjoidGhpcmR3ZWItd3d3LWdpdC10b29sLTM5MDkudGhpcmR3ZWItcHJldmlldy5jb20iLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoidGhpcmR3ZWItd3d3LWdpdC10b29sLTM5MDkudGhpcmR3ZWItcHJldmlldy5jb20ifX1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **docs-v2** | ✅ Ready ([Inspect](https://vercel.com/thirdweb/docs-v2/65ecmGDVWCdJMR1PztKvWMuh4n7L)) | [Visit Preview](https://docs-v2-git-tool-3909.thirdweb-preview.com) | 💬 [**Add feedback**](https://vercel.live/open-feedback/docs-v2-git-tool-3909.thirdweb-preview.com?via=pr-comment-feedback-link) | Apr 3, 2025 0:00am |
| **thirdweb-www** | ✅ Ready ([Inspect](https://vercel.com/thirdweb/thirdweb-www/8BawSdi7LJdkY7DW6Gh58wSZgQwv)) | [Visit Preview](https://thirdweb-www-git-tool-3909.thirdweb-preview.com) | 💬 [**Add feedback**](https://vercel.live/open-feedback/thirdweb-www-git-tool-3909.thirdweb-preview.com?via=pr-comment-feedback-link) | Apr 3, 2025 0:00am |

<details><summary>3 Skipped Deployments</summary>

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **login** | ⬜️ Skipped ([Inspect](https://vercel.com/thirdweb/login/CTTgoSQmLdRoVj4H3AZr67SL4Snb)) |  |  | Apr 3, 2025 0:00am |
| **thirdweb_playground** | ⬜️ Skipped ([Inspect](https://vercel.com/thirdweb/thirdweb_playground/ER2Gpa7iZKZZ1tV553CbKKDGXmuY)) |  |  | Apr 3, 2025 0:00am |
| **wallet-ui** | ⬜️ Skipped ([Inspect](https://vercel.com/thirdweb/wallet-ui/BtQYCLCo8CUqE4JtsL1wZp2BFFRm)) |  |  | Apr 3, 2025 0:00am |
</details>






author_association: NONE
user: login: changeset-bot[bot]
created_at: 2025-04-02T20:07:39Z
body: ###  ⚠️  No Changeset found

Latest commit: 6001f2487ee746f69366718196f7a0d53831bcb0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/thirdweb-dev/js/new/tool-3909?filename=.changeset/many-radios-agree.md&value=---%0A%22thirdweb-dashboard%22%3A%20patch%0A%22portal%22%3A%20patch%0A---%0A%0A%5BTOOL-3909%5D%20Dashboard%3A%20Add%20footer%20links%20to%20project%20pages%20%26%20header%20style%20adjustments%0A)


author_association: NONE
user: login: MananTank
created_at: 2025-04-02T20:07:53Z
body: * **#6627** <a href="https://app.graphite.dev/github/pr/thirdweb-dev/js/6627?utm_source=stack-comment-icon" target="_blank"><img src="https://static.graphite.dev/graphite-32x32-black.png" alt="Graphite" width="10px" height="10px"/></a> 👈 <a href="https://app.graphite.dev/github/pr/thirdweb-dev/js/6627?utm_source=stack-comment-view-in-graphite" target="_blank">(View in Graphite)</a>
* `main`
<hr />

## How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:
- <kbd>merge-queue</kbd> - adds this PR to the back of the merge queue
- <kbd>hotfix</kbd> - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using [this link](https://app.graphite.dev/invite/github/thirdweb-dev?ref=merge-queue-instructions-in-stack-comment&prId=6627).

<h2></h2>
<sub>

An organization admin has enabled the [Graphite Merge Queue](https://graphite.dev/docs/graphite-merge-queue) in this repository.

</sub>

<sub>

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

</sub>

<h2></h2>

This stack of pull requests is managed by <a href="https://graphite.dev?utm-source=stack-comment"><b>Graphite</b></a>. Learn more about <a href="https://stacking.dev/?utm_source=stack-comment">stacking</a>.
<!-- Current dependencies on/for this PR: -->
author_association: CONTRIBUTOR
user: login: codecov[bot]
created_at: 2025-04-02T20:10:45Z
body: ## [Codecov](https://app.codecov.io/gh/thirdweb-dev/js/pull/6627?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 54.98%. Comparing base [(`3f21445`)](https://app.codecov.io/gh/thirdweb-dev/js/commit/3f2144536992f97ad79fc8a13cac0a57a1c6d246?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) to head [(`6001f24`)](https://app.codecov.io/gh/thirdweb-dev/js/commit/6001f2487ee746f69366718196f7a0d53831bcb0?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev).
> Report is 1 commits behind head on main.

<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##             main    #6627   +/-   ##
=======================================
  Coverage   54.98%   54.98%           
=======================================
  Files         888      888           
  Lines       55753    55753           
  Branches     3816     3816           
=======================================
  Hits        30653    30653           
  Misses      25005    25005           
  Partials       95       95           
```

| [Flag](https://app.codecov.io/gh/thirdweb-dev/js/pull/6627/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) | Coverage Δ | |
|---|---|---|
| [packages](https://app.codecov.io/gh/thirdweb-dev/js/pull/6627/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) | `54.98% <ø> (ø)` | |

</details>
<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-02T20:12:37Z
body: ## size-limit report 📦 
| Path                                    | Size           | Loading time (3g) | Running time (snapdragon) | Total time |
| --------------------------------------- | -------------- | ----------------- | ------------------------- | ---------- |
| thirdweb (esm)                          | 47.49 KB (0%)  | 950 ms (0%)       | 146 ms (+97.27% 🔺)       | 1.1 s      |
| thirdweb (cjs)                          | 129.89 KB (0%) | 2.6 s (0%)        | 232 ms (+34.74% 🔺)       | 2.9 s      |
| thirdweb (minimal + tree-shaking)       | 5.62 KB (0%)   | 113 ms (0%)       | 92 ms (+1626.71% 🔺)      | 204 ms     |
| thirdweb/chains (tree-shaking)          | 514 B (0%)     | 11 ms (0%)        | 53 ms (+1131.36% 🔺)      | 63 ms      |
| thirdweb/react (minimal + tree-shaking) | 19.33 KB (0%)  | 387 ms (0%)       | 93 ms (+754.25% 🔺)       | 480 ms     |
author_association: CONTRIBUTOR
user: login: graphite-app[bot]
created_at: 2025-04-03T01:25:27Z
body: ### Merge activity

* **Apr 2, 9:25 PM EDT**: `MananTank` added this pull request to the [Graphite merge queue](https://app.graphite.dev/merges?org=thirdweb-dev&repo=js).
* **Apr 3, 1:34 AM UTC**: The [Graphite merge queue](https://app.graphite.dev/merges?org=thirdweb-dev&repo=js) couldn't merge this PR because **it was not satisfying all requirements** (Failed CI: 'Vercel – thirdweb-www').
* **Apr 3, 8:00 AM EDT**: `MananTank` added this pull request to the [Graphite merge queue](https://app.graphite.dev/merges?org=thirdweb-dev&repo=js).
* **Apr 3, 8:01 AM EDT**: Merged by the [Graphite merge queue](https://app.graphite.dev/merges?org=thirdweb-dev&repo=js).

author_association: CONTRIBUTOR