Merge branch 'main' into saminacodes-patch-1

Author: saminacodes

.changeset/thin-lines-cover.md

@@ -0,0 +1,6 @@
+---
+"@thirdweb-dev/service-utils": patch
+"thirdweb": patch
+---
+
+update dependencies

apps/dashboard/.env.example

@@ -102,3 +102,6 @@ ANALYTICS_SERVICE_URL=""
 
 # Required for Nebula Chat
 NEXT_PUBLIC_NEBULA_URL=""
+
+# required for billing parts of the dashboard (team -> settings -> billing / invoices)
+STRIPE_SECRET_KEY=""

apps/dashboard/.storybook/main.ts

@@ -27,5 +27,8 @@ const config: StorybookConfig = {
     },
   },
   staticDirs: ["../public"],
+  features: {
+    experimentalRSC: true,
+  },
 };
 export default config;

apps/dashboard/package.json

@@ -45,9 +45,9 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tooltip": "1.1.8",
-    "@sentry/nextjs": "9.3.0",
+    "@sentry/nextjs": "9.5.0",
     "@shazow/whatsabi": "0.20.0",
-    "@tanstack/react-query": "5.67.1",
+    "@tanstack/react-query": "5.67.3",
     "@tanstack/react-table": "^8.21.2",
     "@thirdweb-dev/service-utils": "workspace:*",
     "@vercel/functions": "2.0.0",
@@ -61,18 +61,18 @@
     "date-fns": "4.1.0",
     "fetch-event-stream": "0.1.5",
     "flat": "^6.0.1",
-    "framer-motion": "12.4.10",
+    "framer-motion": "12.5.0",
     "fuse.js": "7.1.0",
     "idb-keyval": "^6.2.1",
     "input-otp": "^1.4.1",
-    "ioredis": "^5.5.0",
+    "ioredis": "^5.6.0",
     "ipaddr.js": "^2.2.0",
-    "lucide-react": "0.477.0",
-    "next": "15.2.0",
+    "lucide-react": "0.479.0",
+    "next": "15.2.2",
     "next-plausible": "^3.12.4",
-    "next-themes": "^0.4.4",
+    "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
-    "nuqs": "^2.4.0",
+    "nuqs": "^2.4.1",
     "p-limit": "^6.2.0",
     "papaparse": "^5.5.2",
     "pluralize": "^8.0.0",
@@ -94,7 +94,8 @@
     "shiki": "1.27.0",
     "sonner": "2.0.1",
     "spdx-correct": "^3.2.0",
-    "swagger-ui-react": "^5.20.0",
+    "stripe": "17.7.0",
+    "swagger-ui-react": "^5.20.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "thirdweb": "workspace:*",
@@ -105,20 +106,20 @@
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "3.2.5",
-    "@next/bundle-analyzer": "15.2.0",
-    "@next/eslint-plugin-next": "15.2.0",
-    "@playwright/test": "1.50.1",
-    "@storybook/addon-essentials": "8.6.3",
-    "@storybook/addon-interactions": "8.6.3",
-    "@storybook/addon-links": "8.6.3",
-    "@storybook/addon-onboarding": "8.6.3",
-    "@storybook/addon-viewport": "8.6.3",
-    "@storybook/blocks": "8.6.3",
-    "@storybook/nextjs": "8.6.3",
-    "@storybook/react": "8.6.3",
-    "@storybook/test": "8.6.3",
+    "@next/bundle-analyzer": "15.2.2",
+    "@next/eslint-plugin-next": "15.2.2",
+    "@playwright/test": "1.51.0",
+    "@storybook/addon-essentials": "8.6.4",
+    "@storybook/addon-interactions": "8.6.4",
+    "@storybook/addon-links": "8.6.4",
+    "@storybook/addon-onboarding": "8.6.4",
+    "@storybook/addon-viewport": "8.6.4",
+    "@storybook/blocks": "8.6.4",
+    "@storybook/nextjs": "8.6.4",
+    "@storybook/react": "8.6.4",
+    "@storybook/test": "8.6.4",
     "@types/color": "4.2.0",
-    "@types/node": "22.13.9",
+    "@types/node": "22.13.10",
     "@types/papaparse": "^5.3.15",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
@@ -129,16 +130,16 @@
     "@types/swagger-ui-react": "^4.19.0",
     "@typescript-eslint/eslint-plugin": "7.14.1",
     "@typescript-eslint/parser": "7.14.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.21",
     "checkly": "5.0.1",
     "eslint": "8.57.0",
     "eslint-config-biome": "1.9.4",
     "eslint-plugin-react-compiler": "19.0.0-beta-40c6c23-20250301",
-    "eslint-plugin-storybook": "0.11.3",
-    "knip": "5.45.0",
+    "eslint-plugin-storybook": "0.11.4",
+    "knip": "5.46.0",
     "next-sitemap": "^4.2.3",
     "postcss": "8.5.3",
-    "storybook": "8.6.3",
+    "storybook": "8.6.4",
     "tailwindcss": "3.4.17",
     "typescript": "5.8.2"
   }

apps/dashboard/src/@/actions/billing.ts

@@ -1,6 +1,6 @@
 "use server";
-
 import "server-only";
+
 import { API_SERVER_URL } from "@/constants/env";
 import { getAuthToken } from "../../app/api/lib/getAuthToken";
 import type { ProductSKU } from "../lib/billing";

apps/dashboard/src/@/actions/stripe-actions.ts

@@ -0,0 +1,60 @@
+import "server-only";
+
+import Stripe from "stripe";
+import type { Team } from "../api/team";
+
+let existingStripe: Stripe | undefined;
+
+function getStripe() {
+  if (!existingStripe) {
+    const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
+    if (!STRIPE_SECRET_KEY) {
+      throw new Error("STRIPE_SECRET_KEY is not set");
+    }
+
+    existingStripe = new Stripe(STRIPE_SECRET_KEY, {
+      apiVersion: "2025-02-24.acacia",
+    });
+  }
+
+  return existingStripe;
+}
+
+export async function getTeamInvoices(
+  team: Team,
+  options?: { cursor?: string },
+) {
+  try {
+    const customerId = team.stripeCustomerId;
+
+    if (!customerId) {
+      throw new Error("No customer ID found");
+    }
+
+    // Get the list of invoices for the customer
+    const invoices = await getStripe().invoices.list({
+      customer: customerId,
+      limit: 10,
+      starting_after: options?.cursor,
+    });
+
+    return invoices;
+  } catch (error) {
+    console.error("Error fetching billing history:", error);
+
+    // If the error is that the customer doesn't exist, return an empty array
+    // instead of throwing an error
+    if (
+      error instanceof Stripe.errors.StripeError &&
+      error.message.includes("No such customer")
+    ) {
+      return {
+        data: [],
+        has_more: false,
+      };
+    }
+
+    throw new Error("Failed to fetch billing history");
+  }
+}

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

@@ -3,7 +3,8 @@ import { API_SERVER_URL, THIRDWEB_API_SECRET } from "@/constants/env";
 import type { TeamResponse } from "@thirdweb-dev/service-utils";
 import { getAuthToken } from "../../app/api/lib/getAuthToken";
 
-export type Team = TeamResponse;
+export type Team = TeamResponse & { stripeCustomerId: string | null };
+
 export async function getTeamBySlug(slug: string) {
   const token = await getAuthToken();
 

apps/dashboard/src/@/components/blocks/code-segment.client.tsx

@@ -96,7 +96,6 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
             onClick: () => setEnvironment(env.environment),
             isActive: activeEnvironment === env.environment,
             name: env.title,
-            isEnabled: true,
           }))}
           tabClassName="text-sm gap-2 !text-sm"
           tabIconClassName="size-4"

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

@@ -91,13 +91,11 @@ export function DatePickerWithRange(props: {
                     name: "From",
                     onClick: () => setScreen("from"),
                     isActive: screen === "from",
-                    isEnabled: true,
                   },
                   {
                     name: "To",
                     onClick: () => setScreen("to"),
                     isActive: screen === "to",
-                    isEnabled: true,
                   },
                 ]}
               />

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

@@ -79,7 +79,7 @@ export function TabButtons(props: {
     name: React.ReactNode;
     onClick: () => void;
     isActive: boolean;
-    isEnabled?: boolean;
+    isDisabled?: boolean;
     icon?: React.FC<{ className?: string }>;
   }[];
   tabClassName?: string;
@@ -119,11 +119,11 @@ export function TabButtons(props: {
                   "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
                   !tab.isActive &&
                     "text-muted-foreground hover:text-foreground",
-                  !tab.isEnabled && "cursor-not-allowed opacity-50",
+                  tab.isDisabled && "cursor-not-allowed opacity-50",
                   props.tabClassName,
                   tab.isActive && props.activeTabClassName,
                 )}
-                onClick={tab.isEnabled ? tab.onClick : undefined}
+                onClick={!tab.isDisabled ? tab.onClick : undefined}
               >
                 {tab.icon && (
                   <tab.icon className={cn("size-6", props.tabIconClassName)} />