Version Packages (#6772)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/composite-actions/install/action.yml

@@ -6,15 +6,15 @@ runs:
   steps:
     # we use bun for some test suites
     - name: Setup bun
-      uses: oven-sh/setup-bun@v1
+      uses: oven-sh/setup-bun@4bc047ad259df6fc24a6c9b0f9a0cb08cf17fbe5 # v2.0.1
       with:
         bun-version: 1.0.35
     # pnpm for our dependencies
-    - uses: pnpm/action-setup@v3
+    - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
       with:
-        version: 9
+        version: 9.11.0
     - name: Setup Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
       with:
         node-version: 20
         check-latest: true

.github/workflows/CI.yml

@@ -16,6 +16,7 @@ env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
   TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
+  TW_CLIENT_ID: ${{ secrets.TW_CLIENT_ID }}
   CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
 jobs:
@@ -26,7 +27,7 @@ jobs:
     steps:
       - name: Optimize CI
         id: check_skip
-        uses: withgraphite/graphite-ci-action@main
+        uses: withgraphite/graphite-ci-action@9cb601a55e114099561b6d755505de377d45db40 # v0.0.9 ("main")
         with:
           graphite_token: ${{ secrets.GRAPHITE_OMTIMIZE_TOKEN }}
   
@@ -38,7 +39,7 @@ jobs:
     name: Build Packages
     steps:
       - name: Check out the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Setup & Install
         uses: ./.github/composite-actions/install
@@ -54,13 +55,13 @@ jobs:
     runs-on: ubuntu-latest-8
     steps:
       - name: Check out the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Setup & Install
         uses: ./.github/composite-actions/install
 
       - name: Setup Biome
-        uses: biomejs/setup-biome@v2
+        uses: biomejs/setup-biome@f382a98e582959e6aaac8e5f8b17b31749018780 # v2.5.0
         with:
           version: latest  
 
@@ -74,13 +75,13 @@ jobs:
     runs-on: ubuntu-latest-8
     steps:
       - name: Check out the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Setup & Install
         uses: ./.github/composite-actions/install
 
       - name: Set up foundry
-        uses: foundry-rs/foundry-toolchain@v1
+        uses: foundry-rs/foundry-toolchain@de808b1eea699e761c404bda44ba8f21aba30b2c # v1.3.1
         with:
           cache: false
           version: nightly-c4a984fbf2c48b793c8cd53af84f56009dd1070c
@@ -88,7 +89,7 @@ jobs:
       - run: pnpm test
 
       - name: Code Coverage
-        uses: codecov/codecov-action@v5
+        uses: codecov/codecov-action@0565863a31f2c772f9f0395002a31e3f06189574 # v5.4.0
         with:
           directory: packages/
           flags: packages
@@ -102,11 +103,11 @@ jobs:
     runs-on: ubuntu-latest-8
     strategy:
       matrix:
-        package_manager: [npm, yarn, pnpm, bun]
+        package_manager: [pnpm] # TODO, reenable [npm, yarn, pnpm, bun]
         bundler: [vite, webpack, esbuild]
     steps:
       - name: Check out the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Setup & Install
         uses: ./.github/composite-actions/install
@@ -123,7 +124,14 @@ jobs:
           mkdir test-project
           cd test-project
           npm init -y
-          ${{ matrix.package_manager }} add react react-dom ../packages/thirdweb
+          
+          # Handle different package managers
+          if [ "${{ matrix.package_manager }}" = "pnpm" ]; then
+            # Create pnpm workspace
+            echo '{"name": "test-project", "private": true, "workspaces": ["."]}' > package.json
+            echo '{"packages": ["../packages/*"]}' > pnpm-workspace.yaml
+            pnpm add react react-dom ../packages/thirdweb -w
+          fi
       - name: Create test file
         run: |
           cd test-project
@@ -133,7 +141,7 @@ jobs:
         if: matrix.bundler == 'vite'
         run: |
           cd test-project
-          ${{matrix.package_manager}} add vite
+          ${{matrix.package_manager}} add vite -w
           echo 'import { defineConfig } from "vite"; import {resolve} from "path"; export default defineConfig({ build: { lib: { entry: resolve(__dirname, "index.js"), name: "e2e_test" }, outDir: "dist" }});' > vite.config.js
           npx vite build
     
@@ -141,7 +149,7 @@ jobs:
         if: matrix.bundler == 'webpack'
         run: |
           cd test-project
-          ${{matrix.package_manager}} add webpack webpack-cli
+          ${{matrix.package_manager}} add webpack webpack-cli -w
           echo 'const path = require("path"); module.exports = { mode: "production", entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" }};' > webpack.config.js
           npx webpack
     
@@ -149,7 +157,7 @@ jobs:
         if: matrix.bundler == 'esbuild'
         run: |
           cd test-project
-          ${{matrix.package_manager}} add esbuild
+          ${{matrix.package_manager}} add esbuild -w
           npx esbuild index.js --bundle --outdir=dist
     
       - name: Verify bundle
@@ -172,13 +180,16 @@ jobs:
     runs-on: ubuntu-latest-8
     steps:
       - name: Check out the code
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Setup & Install
         uses: ./.github/composite-actions/install
 
+      - name: Build Packages
+        run: pnpm build
+
       - name: Report bundle size
-        uses: andresz1/size-limit-action@master
+        uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d # v1.8.0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           package_manager: pnpm

.github/workflows/auto-assign.yml

@@ -16,4 +16,4 @@ jobs:
       github.event.pull_request.author_association == 'COLLABORATOR' ||
       github.event.pull_request.author_association == 'CONTRIBUTOR'
     steps:
-      - uses: toshimaru/[email protected]
+      - uses: toshimaru/auto-author-assign@16f0022cf3d7970c106d8d1105f75a1165edb516 # v2.1.1

.github/workflows/codeql-analysis.yml

@@ -42,11 +42,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -59,7 +59,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -72,4 +72,4 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11

.github/workflows/label.yml

@@ -17,6 +17,6 @@ jobs:
       pull-requests: write
 
     steps:
-    - uses: actions/labeler@v5
+    - uses: actions/labeler@8558fd74291d67161a8a78ce36a881fa63b766a9 # v5.0.0
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/release-nightly.yml

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           fetch-depth: 0
           # Do not use the GITHUB_TOKEN by default

.github/workflows/release.yml

@@ -25,7 +25,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           fetch-depth: 0
           # Do not use the GITHUB_TOKEN by default
@@ -36,7 +36,7 @@ jobs:
 
       - name: Create release Pull Request or publish to NPM
         id: changesets
-        uses: changesets/action@v1
+        uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc #v1.4.0
         with:
           publish: pnpm release
           version: pnpm version-packages

.github/workflows/stale.yml

@@ -7,7 +7,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v.9.1.0
         with:
           stale-issue-message: 'This issue has been inactive for 7 days. It is now marked as stale and will be closed in 2 days if no further activity occurs.'
           stale-pr-message: 'This PR has been inactive for 7 days. It is now marked as stale and will be closed in 2 days if no further activity occurs.'

.github/workflows/typedoc.yml

@@ -21,30 +21,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         
       - name: Install
         uses: ./.github/composite-actions/install
 
       - name: Run TypeDoc
         run: pnpm typedoc
-
-      - name: Update Gist
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GIST_TOKEN }}
-          script: |
-            const fs = require('fs');
-            const content = fs.readFileSync('./packages/thirdweb/typedoc/parsed.json', 'utf8');
-            const gistId = '678fe1f331a01270bb002fee660f285d';
-            
-            await github.rest.gists.update({
-              gist_id: gistId,
-              files: {
-                'data.json': {
-                  content: content
-                }
-              }
-            });
-          
-            console.log(`Permalink: https://gist.githubusercontent.com/raw/${gistId}/data.json`);

.npmrc

@@ -0,0 +1,3 @@
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
+public-hoist-pattern[]=*pino-pretty*

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/.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";
@@ -7,6 +7,7 @@ import { Inter as interFont } from "next/font/google";
 // biome-ignore lint/style/useImportType: <explanation>
 import React from "react";
 import { useEffect } from "react";
+import { Toaster } from "sonner";
 import { Button } from "../src/@/components/ui/button";
 
 const queryClient = new QueryClient();
@@ -16,8 +17,30 @@ const fontSans = interFont({
   variable: "--font-sans",
 });
 
+const customViewports = {
+  xs: {
+    // Regular sized phones (iphone 15 / 15 pro)
+    name: "iPhone",
+    styles: {
+      width: "390px",
+      height: "844px",
+    },
+  },
+  sm: {
+    // Larger phones (iphone 15 plus / 15 pro max)
+    name: "iPhone Plus",
+    styles: {
+      width: "430px",
+      height: "932px",
+    },
+  },
+};
+
 const preview: Preview = {
   parameters: {
+    viewport: {
+      viewports: customViewports,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -57,29 +80,30 @@ function StoryLayout(props: {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="flex min-h-screen min-w-0 flex-col bg-background text-foreground">
-        <div className="flex justify-end gap-2 border-b p-4">
+      <div className="flex min-h-dvh min-w-0 flex-col bg-background text-foreground">
+        <div className="fixed right-0 bottom-0 z-50 flex justify-end gap-2 p-4">
           <Button
-            onClick={() => setTheme("dark")}
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
             size="sm"
-            variant={theme === "dark" ? "default" : "outline"}
-            className="h-auto w-auto rounded-full p-2"
+            variant="outline"
+            className="h-auto w-auto shrink-0 rounded-full p-2"
           >
-            <MoonIcon className="size-4" />
-          </Button>
-
-          <Button
-            onClick={() => setTheme("light")}
-            size="sm"
-            variant={theme === "light" ? "default" : "outline"}
-            className="h-auto w-auto rounded-full p-2"
-          >
-            <SunIcon className="size-4" />
+            {theme === "dark" ? (
+              <MoonIcon className="size-4" />
+            ) : (
+              <SunIcon className="size-4" />
+            )}
           </Button>
         </div>
 
         <div className="flex min-w-0 grow flex-col">{props.children}</div>
+        <ToasterSetup />
       </div>
     </QueryClientProvider>
   );
 }
+
+function ToasterSetup() {
+  const { theme } = useTheme();
+  return <Toaster richColors theme={theme === "light" ? "light" : "dark"} />;
+}

apps/dashboard/framer-rewrites.js

@@ -49,12 +49,16 @@ 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",
+  // -- brand kit --
+  "/brand-kit",
+  // -- universal bridge landing pages --
+  "/universal-bridge-regions/:region_slug",
+  "/enterprise",
 ];

apps/dashboard/knip.json

@@ -12,6 +12,7 @@
   "ignoreDependencies": [
     "@storybook/blocks",
     "@thirdweb-dev/service-utils",
-    "@types/color"
+    "@types/color",
+    "fast-xml-parser"
   ]
 }

apps/dashboard/next-sitemap.config.js

@@ -1,7 +1,9 @@
 // @ts-check
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { XMLParser } = require("fast-xml-parser");
 
 /**
- *
+ * @returns {Promise<Array<{chainId: number, name: string, slug: string}>>}
  */
 async function fetchChainsFromApi() {
   const res = await fetch("https://api.thirdweb.com/v1/chains", {
@@ -82,16 +84,20 @@ module.exports = {
     };
   },
   additionalPaths: async (config) => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const FRAMER_PATHS = require("./framer-rewrites");
-    const allChains = await fetchChainsFromApi();
+    const [framerUrls, allChains] = await Promise.all([
+      getFramerXML(),
+      fetchChainsFromApi(),
+    ]);
+
     return [
-      ...FRAMER_PATHS.map((path) => ({
-        loc: path,
-        changefreq: config.changefreq,
-        priority: config.priority,
-        lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
-      })),
+      ...framerUrls.map((url) => {
+        return {
+          loc: url.loc,
+          changefreq: config.changefreq,
+          priority: config.priority,
+          lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
+        };
+      }),
       ...allChains.map((chain) => {
         return {
           loc: `/${chain.slug}`,
@@ -136,3 +142,19 @@ async function createSearchRecordSitemaps(config) {
   // filter out any failed requests
   return chainsForLines.filter(Boolean);
 }
+
+async function getFramerXML() {
+  const framerSiteMapText = await fetch(
+    "https://landing.thirdweb.com/sitemap.xml",
+  ).then((res) => res.text());
+
+  const parser = new XMLParser();
+  const xmlObject = parser.parse(framerSiteMapText);
+
+  /**
+   * @type {Array<{loc: string}>}
+   */
+  const urls = xmlObject.urlset.url;
+
+  return urls;
+}

apps/dashboard/next.config.ts

@@ -12,7 +12,7 @@ const ContentSecurityPolicy = `
   style-src 'self' 'unsafe-inline' vercel.live;
   font-src 'self' vercel.live assets.vercel.com framerusercontent.com fonts.gstatic.com;
   frame-src * data:;
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com challenges.cloudflare.com static.reo.dev;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com challenges.cloudflare.com;
   connect-src * data: blob:;
   worker-src 'self' blob:;
   block-all-mixed-content;
@@ -203,7 +203,6 @@ function getConfig(): NextConfig {
                   type: "memory",
                 });
               }
-              config.externals.push("pino-pretty");
               config.module = {
                 ...config.module,
                 exprContextCritical: false,

apps/dashboard/package.json

@@ -29,29 +29,29 @@
     "@emotion/styled": "11.14.0",
     "@hookform/resolvers": "^3.9.1",
     "@marsidev/react-turnstile": "^1.1.0",
-    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-alert-dialog": "^1.1.6",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-dialog": "1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-hover-card": "^1.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-progress": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@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",
-    "@shazow/whatsabi": "0.20.0",
-    "@tanstack/react-query": "5.67.1",
+    "@radix-ui/react-accordion": "^1.2.4",
+    "@radix-ui/react-alert-dialog": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.4",
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-dialog": "1.1.7",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-hover-card": "^1.1.7",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.4",
+    "@radix-ui/react-select": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.3",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tooltip": "1.2.0",
+    "@sentry/nextjs": "9.12.0",
+    "@shazow/whatsabi": "0.21.0",
+    "@tanstack/react-query": "5.72.1",
     "@tanstack/react-table": "^8.21.2",
     "@thirdweb-dev/service-utils": "workspace:*",
     "@vercel/functions": "2.0.0",
-    "@vercel/og": "^0.6.5",
+    "@vercel/og": "^0.6.8",
     "abitype": "1.0.8",
     "chakra-react-select": "^4.7.6",
     "class-variance-authority": "^0.7.1",
@@ -59,42 +59,45 @@
     "color": "5.0.0",
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
+    "fast-xml-parser": "^5.2.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.487.0",
+    "next": "15.2.4",
     "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",
     "posthog-js": "1.67.1",
+    "prettier": "3.5.3",
     "qrcode": "^1.5.3",
-    "react": "19.0.0",
+    "react": "19.1.0",
     "react-children-utilities": "^2.10.0",
     "react-day-picker": "^8.10.1",
-    "react-dom": "19.0.0",
+    "react-dom": "19.1.0",
     "react-dropzone": "^14.3.8",
     "react-error-boundary": "^5.0.0",
-    "react-hook-form": "7.54.2",
+    "react-hook-form": "7.55.0",
     "react-markdown": "^9.0.1",
     "react-table": "^7.8.0",
-    "recharts": "2.15.1",
+    "recharts": "2.15.2",
     "remark-gfm": "4.0.1",
     "responsive-rsc": "0.0.7",
     "server-only": "^0.0.1",
     "shiki": "1.27.0",
-    "sonner": "2.0.1",
+    "sonner": "2.0.3",
     "spdx-correct": "^3.2.0",
-    "swagger-ui-react": "^5.20.0",
+    "stripe": "17.7.0",
+    "swagger-ui-react": "^5.20.7",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "thirdweb": "workspace:*",
@@ -104,42 +107,42 @@
   },
   "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",
+    "@chromatic-com/storybook": "3.2.6",
+    "@next/bundle-analyzer": "15.2.4",
+    "@next/eslint-plugin-next": "15.2.4",
+    "@playwright/test": "1.51.1",
+    "@storybook/addon-essentials": "8.6.12",
+    "@storybook/addon-interactions": "8.6.12",
+    "@storybook/addon-links": "8.6.12",
+    "@storybook/addon-onboarding": "8.6.12",
+    "@storybook/addon-viewport": "8.6.12",
+    "@storybook/blocks": "8.6.12",
+    "@storybook/nextjs": "8.6.12",
+    "@storybook/react": "8.6.12",
+    "@storybook/test": "8.6.12",
     "@types/color": "4.2.0",
-    "@types/node": "22.13.9",
+    "@types/node": "22.14.0",
     "@types/papaparse": "^5.3.15",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.2",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
     "@types/swagger-ui-react": "^4.19.0",
     "@typescript-eslint/eslint-plugin": "7.14.1",
     "@typescript-eslint/parser": "7.14.1",
-    "autoprefixer": "^10.4.19",
-    "checkly": "5.0.1",
+    "autoprefixer": "^10.4.21",
+    "checkly": "5.2.0",
     "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-react-compiler": "19.0.0-beta-e993439-20250405",
+    "eslint-plugin-storybook": "0.12.0",
+    "knip": "5.47.0",
     "next-sitemap": "^4.2.3",
     "postcss": "8.5.3",
-    "storybook": "8.6.3",
+    "storybook": "8.6.12",
     "tailwindcss": "3.4.17",
-    "typescript": "5.8.2"
+    "typescript": "5.8.3"
   }
 }

apps/dashboard/redirects.js

@@ -354,6 +354,26 @@ async function redirects() {
       destination: "/",
       permanent: false,
     },
+    // pay > universal-bridge redirect
+    {
+      source: "/team/:team_slug/:project_slug/connect/pay/:path*",
+      destination:
+        "/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/@/actions/billing.ts

@@ -1,21 +1,20 @@
 "use server";
-
 import "server-only";
+
 import { API_SERVER_URL } from "@/constants/env";
-import { redirect } from "next/navigation";
 import { getAuthToken } from "../../app/api/lib/getAuthToken";
 import type { ProductSKU } from "../lib/billing";
 
-export type RedirectCheckoutOptions = {
+export type GetBillingCheckoutUrlOptions = {
   teamSlug: string;
   sku: ProductSKU;
   redirectUrl: string;
   metadata?: Record<string, string>;
 };
 
-export async function redirectToCheckout(
-  options: RedirectCheckoutOptions,
-): Promise<{ status: number }> {
+export async function getBillingCheckoutUrl(
+  options: GetBillingCheckoutUrlOptions,
+): Promise<{ status: number; url?: string }> {
   if (!options.teamSlug) {
     return {
       status: 400,
@@ -49,6 +48,7 @@ export async function redirectToCheckout(
       status: res.status,
     };
   }
+
   const json = await res.json();
   if (!json.result) {
     return {
@@ -56,20 +56,22 @@ export async function redirectToCheckout(
     };
   }
 
-  // redirect to the stripe checkout session
-  redirect(json.result);
+  return {
+    status: 200,
+    url: json.result as string,
+  };
 }
 
-export type RedirectBillingCheckoutAction = typeof redirectToCheckout;
+export type GetBillingCheckoutUrlAction = typeof getBillingCheckoutUrl;
 
-export type BillingPortalOptions = {
+export type GetBillingPortalUrlOptions = {
   teamSlug: string | undefined;
   redirectUrl: string;
 };
 
-export async function redirectToBillingPortal(
-  options: BillingPortalOptions,
-): Promise<{ status: number }> {
+export async function getBillingPortalUrl(
+  options: GetBillingPortalUrlOptions,
+): Promise<{ status: number; url?: string }> {
   if (!options.teamSlug) {
     return {
       status: 400,
@@ -110,8 +112,10 @@ export async function redirectToBillingPortal(
     };
   }
 
-  // redirect to the stripe billing portal
-  redirect(json.result);
+  return {
+    status: 200,
+    url: json.result as string,
+  };
 }
 
-export type BillingBillingPortalAction = typeof redirectToBillingPortal;
+export type GetBillingPortalUrlAction = typeof getBillingPortalUrl;

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

@@ -10,12 +10,9 @@ import {
   isMoralisSupported,
   transformMoralisResponseToNFT,
 } from "lib/wallet/nfts/moralis";
-import {
-  generateSimpleHashUrl,
-  isSimpleHashSupported,
-  transformSimpleHashResponseToNFT,
-} from "lib/wallet/nfts/simpleHash";
 import type { WalletNFT } from "lib/wallet/nfts/types";
+import { getVercelEnv } from "../../lib/vercel-utils";
+import { DASHBOARD_THIRDWEB_CLIENT_ID } from "../constants/env";
 
 type WalletNFTApiReturn =
   | { result: WalletNFT[]; error?: undefined }
@@ -24,40 +21,20 @@ type WalletNFTApiReturn =
 export async function getWalletNFTs(params: {
   chainId: number;
   owner: string;
+  isInsightSupported: boolean;
 }): Promise<WalletNFTApiReturn> {
   const { chainId, owner } = params;
-  const supportedChainSlug = await isSimpleHashSupported(chainId);
 
-  if (supportedChainSlug && process.env.SIMPLEHASH_API_KEY) {
-    const url = generateSimpleHashUrl({ chainSlug: supportedChainSlug, owner });
+  if (params.isInsightSupported) {
+    const response = await getWalletNFTsFromInsight({ chainId, owner });
 
-    const response = await fetch(url, {
-      method: "GET",
-      headers: {
-        "X-API-KEY": process.env.SIMPLEHASH_API_KEY,
-      },
-      next: {
-        revalidate: 10, // cache for 10 seconds
-      },
-    });
-
-    if (response.status >= 400) {
+    if (!response.ok) {
       return {
-        error: response.statusText,
+        error: response.error,
       };
     }
 
-    try {
-      const parsedResponse = await response.json();
-      const result = await transformSimpleHashResponseToNFT(
-        parsedResponse,
-        owner,
-      );
-
-      return { result };
-    } catch {
-      return { error: "error parsing response" };
-    }
+    return { result: response.data };
   }
 
   if (isAlchemySupported(chainId)) {
@@ -104,6 +81,7 @@ export async function getWalletNFTs(params: {
       const result = await transformMoralisResponseToNFT(
         await parsedResponse,
         owner,
+        chainId,
       );
 
       return { result };
@@ -115,3 +93,117 @@ export async function getWalletNFTs(params: {
 
   return { error: "unsupported chain" };
 }
+
+type OwnedNFTInsightResponse = {
+  name: string;
+  description: string;
+  image_url: string;
+  background_color: string;
+  external_url: string;
+  metadata_url: string;
+  extra_metadata: {
+    customImage?: string;
+    customAnimationUrl?: string;
+    animation_original_url?: string;
+    image_original_url?: string;
+  };
+  collection: {
+    name: string;
+    description: string;
+    extra_metadata: Record<string, string>;
+  };
+  contract: {
+    chain_id: number;
+    address: string;
+    type: "erc1155" | "erc721";
+    name: string;
+  };
+  owner_addresses: string[];
+  token_id: string;
+  balance: string;
+  token_type: "erc1155" | "erc721";
+};
+
+async function getWalletNFTsFromInsight(params: {
+  chainId: number;
+  owner: string;
+}): Promise<
+  | {
+      data: WalletNFT[];
+      ok: true;
+    }
+  | {
+      ok: false;
+      error: string;
+    }
+> {
+  const { chainId, owner } = params;
+
+  const thirdwebDomain =
+    getVercelEnv() === "production" ? "thirdweb" : "thirdweb-dev";
+  const url = new URL(`https://insight.${thirdwebDomain}.com/v1/nfts`);
+  url.searchParams.append("chain", chainId.toString());
+  url.searchParams.append("limit", "10");
+  url.searchParams.append("owner_address", owner);
+
+  const response = await fetch(url, {
+    headers: {
+      "x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID,
+    },
+  });
+
+  if (!response.ok) {
+    const errorMessage = await response.text();
+    return {
+      ok: false,
+      error: errorMessage,
+    };
+  }
+
+  const nftsResponse = (await response.json()) as {
+    data: OwnedNFTInsightResponse[];
+  };
+
+  const isDev = getVercelEnv() !== "production";
+
+  // NOTE: ipfscdn.io/ to thirdwebstorage-dev.com/ replacement is temporary
+  // This should be fixed in the insight dev endpoint
+
+  const walletNFTs = nftsResponse.data.map((nft) => {
+    const walletNFT: WalletNFT = {
+      id: nft.token_id,
+      contractAddress: nft.contract.address,
+      metadata: {
+        uri: isDev
+          ? nft.metadata_url.replace("ipfscdn.io/", "thirdwebstorage-dev.com/")
+          : nft.metadata_url,
+        name: nft.name,
+        description: nft.description,
+        image: isDev
+          ? nft.image_url.replace("ipfscdn.io/", "thirdwebstorage-dev.com/")
+          : nft.image_url,
+        animation_url: isDev
+          ? nft.extra_metadata.animation_original_url?.replace(
+              "ipfscdn.io/",
+              "thirdwebstorage-dev.com/",
+            )
+          : nft.extra_metadata.animation_original_url,
+        external_url: nft.external_url,
+        background_color: nft.background_color,
+      },
+      owner: params.owner,
+      tokenURI: nft.metadata_url,
+      type: nft.token_type === "erc721" ? "ERC721" : "ERC1155",
+      supply: nft.balance,
+      tokenAddress: nft.contract.address,
+      chainId: nft.contract.chain_id,
+    };
+
+    return walletNFT;
+  });
+
+  return {
+    data: walletNFTs,
+    ok: true,
+  };
+}

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

@@ -1,40 +0,0 @@
-"use server";
-
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
-
-export async function joinTeamWaitlist(options: {
-  teamSlug: string;
-  // currently only 'nebula' is supported
-  scope: "nebula";
-}) {
-  const { teamSlug, scope } = options;
-  const token = await getAuthToken();
-
-  if (!token) {
-    return {
-      errorMessage: "You are not authorized to perform this action",
-    };
-  }
-
-  const res = await fetch(`${API_SERVER_URL}/v1/teams/${teamSlug}/waitlist`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
-    },
-    body: JSON.stringify({
-      scope,
-    }),
-  });
-
-  if (!res.ok) {
-    return {
-      errorMessage: "Failed to join waitlist",
-    };
-  }
-
-  return {
-    success: true,
-  };
-}

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

@@ -5,13 +5,14 @@ import { API_SERVER_URL } from "../constants/env";
 
 type ProxyActionParams = {
   pathname: string;
-  searchParams?: Record<string, string>;
+  searchParams?: Record<string, string | undefined>;
   method: "GET" | "POST" | "PUT" | "DELETE";
   body?: string;
   headers?: Record<string, string>;
+  parseAsText?: boolean;
 };
 
-type ProxyActionResult<T extends object> =
+type ProxyActionResult<T> =
   | {
       status: number;
       ok: true;
@@ -23,7 +24,7 @@ type ProxyActionResult<T extends object> =
       error: string;
     };
 
-async function proxy<T extends object>(
+async function proxy<T>(
   baseUrl: string,
   params: ProxyActionParams,
 ): Promise<ProxyActionResult<T>> {
@@ -34,7 +35,10 @@ async function proxy<T extends object>(
   url.pathname = params.pathname;
   if (params.searchParams) {
     for (const key in params.searchParams) {
-      url.searchParams.append(key, params.searchParams[key] as string);
+      const value = params.searchParams[key];
+      if (value) {
+        url.searchParams.append(key, value);
+      }
     }
   }
 
@@ -67,19 +71,15 @@ async function proxy<T extends object>(
   return {
     status: res.status,
     ok: true,
-    data: await res.json(),
+    data: params.parseAsText ? await res.text() : await res.json(),
   };
 }
 
-export async function apiServerProxy<T extends object = object>(
-  params: ProxyActionParams,
-) {
+export async function apiServerProxy<T>(params: ProxyActionParams) {
   return proxy<T>(API_SERVER_URL, params);
 }
 
-export async function payServerProxy<T extends object = object>(
-  params: ProxyActionParams,
-) {
+export async function payServerProxy<T>(params: ProxyActionParams) {
   return proxy<T>(
     process.env.NEXT_PUBLIC_PAY_URL
       ? `https://${process.env.NEXT_PUBLIC_PAY_URL}`
@@ -87,3 +87,7 @@ export async function payServerProxy<T extends object = object>(
     params,
   );
 }
+
+export async function analyticsServerProxy<T>(params: ProxyActionParams) {
+  return proxy<T>(process.env.ANALYTICS_SERVICE_URL || "", params);
+}

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

@@ -0,0 +1,62 @@
+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; status?: "open" },
+) {
+  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,
+      // Only return open invoices if the status is open
+      status: options?.status,
+    });
+
+    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/analytics.ts

@@ -270,9 +270,10 @@ type ActiveStatus = {
   ecosystemWallet: boolean;
 };
 
-export async function isProjectActive(
-  params: AnalyticsQueryParams,
-): Promise<ActiveStatus> {
+export async function isProjectActive(params: {
+  teamId: string;
+  projectId: string;
+}): Promise<ActiveStatus> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
     `v2/active-usage?${searchParams.toString()}`,
@@ -345,7 +346,7 @@ export async function getEcosystemWalletUsage(args: {
     searchParams.append("period", period);
   }
   const res = await fetchAnalytics(
-    `v2/wallets/connects/${ecosystemSlug}?${searchParams.toString()}`,
+    `v2/wallet/connects?${searchParams.toString()}`,
     {
       method: "GET",
       headers: {
@@ -355,7 +356,10 @@ export async function getEcosystemWalletUsage(args: {
   );
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch ecosystem wallet stats");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch ecosystem wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
     return null;
   }
 

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

@@ -0,0 +1,53 @@
+import { API_SERVER_URL, THIRDWEB_API_SECRET } from "../constants/env";
+
+export type SMSCountryTiers = {
+  tier1: string[];
+  tier2: string[];
+  tier3: string[];
+  tier4: string[];
+  tier5: string[];
+};
+
+export async function getSMSCountryTiers() {
+  if (!THIRDWEB_API_SECRET) {
+    throw new Error("API_SERVER_SECRET is not set");
+  }
+  const res = await fetch(`${API_SERVER_URL}/v1/sms/list-country-tiers`, {
+    headers: {
+      "Content-Type": "application/json",
+      "x-service-api-key": THIRDWEB_API_SECRET,
+    },
+    next: {
+      revalidate: 15 * 60, //15 minutes
+    },
+  });
+
+  if (!res.ok) {
+    console.error(
+      "Failed to fetch sms country tiers",
+      res.status,
+      res.statusText,
+    );
+    res.body?.cancel();
+    return {
+      tier1: [],
+      tier2: [],
+      tier3: [],
+      tier4: [],
+      tier5: [],
+    };
+  }
+
+  try {
+    return (await res.json()).data as SMSCountryTiers;
+  } catch (e) {
+    console.error("Failed to parse sms country tiers", e);
+    return {
+      tier1: [],
+      tier2: [],
+      tier3: [],
+      tier4: [],
+      tier5: [],
+    };
+  }
+}

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();
 
@@ -73,31 +74,3 @@ export async function getDefaultTeam() {
   }
   return null;
 }
-
-type TeamNebulaWaitList = {
-  onWaitlist: boolean;
-  createdAt: null | string;
-};
-
-export async function getTeamNebulaWaitList(teamSlug: string) {
-  const token = await getAuthToken();
-
-  if (!token) {
-    return null;
-  }
-
-  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${teamSlug}/waitlist?scope=nebula`,
-    {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
-
-  if (res.ok) {
-    return (await res.json()).result as TeamNebulaWaitList;
-  }
-
-  return null;
-}

apps/dashboard/src/@/api/usage/rpc.ts

@@ -0,0 +1,114 @@
+import "server-only";
+import { unstable_cache } from "next/cache";
+
+export type RPCUsageDataItem = {
+  date: string;
+  usageType: "included" | "overage" | "rate-limit";
+  count: string;
+};
+
+export const fetchRPCUsage = unstable_cache(
+  async (params: {
+    teamId: string;
+    projectId?: string;
+    authToken: string;
+    from: string;
+    to: string;
+    period: "day" | "week" | "month" | "year" | "all";
+  }) => {
+    const analyticsEndpoint = process.env.ANALYTICS_SERVICE_URL as string;
+    const url = new URL(`${analyticsEndpoint}/v2/rpc/usage-types`);
+    url.searchParams.set("teamId", params.teamId);
+    if (params.projectId) {
+      url.searchParams.set("projectId", params.projectId);
+    }
+    url.searchParams.set("from", params.from);
+    url.searchParams.set("to", params.to);
+    url.searchParams.set("period", params.period);
+
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.text();
+      return {
+        ok: false as const,
+        error: error,
+      };
+    }
+
+    const resData = await res.json();
+
+    return {
+      ok: true as const,
+      data: resData.data as RPCUsageDataItem[],
+    };
+  },
+  ["rpc-usage"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+type Last24HoursRPCUsageApiResponse = {
+  peakRate: {
+    date: string;
+    peakRPS: string;
+  };
+  averageRate: {
+    date: string;
+    averageRate: string;
+    peakRPS: string;
+    includedCount: string;
+    rateLimitedCount: string;
+    overageCount: string;
+  }[];
+  totalCounts: {
+    includedCount: string;
+    rateLimitedCount: string;
+    overageCount: string;
+  };
+};
+
+export const getLast24HoursRPCUsage = unstable_cache(
+  async (params: {
+    teamId: string;
+    projectId?: string;
+    authToken: string;
+  }) => {
+    const analyticsEndpoint = process.env.ANALYTICS_SERVICE_URL as string;
+    const url = new URL(`${analyticsEndpoint}/v2/rpc/24-hours`);
+    url.searchParams.set("teamId", params.teamId);
+    if (params.projectId) {
+      url.searchParams.set("projectId", params.projectId);
+    }
+
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.text();
+      return {
+        ok: false as const,
+        error: error,
+      };
+    }
+
+    const resData = await res.json();
+
+    return {
+      ok: true as const,
+      data: resData.data as Last24HoursRPCUsageApiResponse,
+    };
+  },
+  ["rpc-usage-last-24-hours:v2"],
+  {
+    revalidate: 60, // 1 minute
+  },
+);

apps/dashboard/src/@/components/TextDivider.tsx

@@ -1,19 +0,0 @@
-import { cn } from "@/lib/utils";
-
-export function TextDivider(props: {
-  text: string;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex items-center text-muted-foreground text-sm",
-        props.className,
-      )}
-    >
-      <span className="h-[1px] flex-1 bg-border" />
-      <span className="mx-4">{props.text}</span>
-      <span className="h-[1px] flex-1 bg-border" />
-    </div>
-  );
-}

apps/dashboard/src/@/components/billing.tsx

@@ -1,78 +1,171 @@
 "use client";
 
+import { useMutation } from "@tanstack/react-query";
+import { AlertTriangleIcon } from "lucide-react";
+import Link from "next/link";
+import { toast } from "sonner";
 import type {
-  BillingBillingPortalAction,
-  BillingPortalOptions,
-  RedirectBillingCheckoutAction,
-  RedirectCheckoutOptions,
+  GetBillingCheckoutUrlAction,
+  GetBillingCheckoutUrlOptions,
+  GetBillingPortalUrlAction,
+  GetBillingPortalUrlOptions,
 } from "../actions/billing";
+import type { Team } from "../api/team";
+import { cn } from "../lib/utils";
+import { Spinner } from "./ui/Spinner/Spinner";
 import { Button, type ButtonProps } from "./ui/button";
 
-type CheckoutButtonProps = Omit<RedirectCheckoutOptions, "redirectUrl"> &
-  ButtonProps & {
-    redirectPath: string;
-    redirectToCheckout: RedirectBillingCheckoutAction;
-  };
+type CheckoutButtonProps = Omit<GetBillingCheckoutUrlOptions, "redirectUrl"> & {
+  getBillingCheckoutUrl: GetBillingCheckoutUrlAction;
+  buttonProps?: Omit<ButtonProps, "children">;
+  children: React.ReactNode;
+  billingStatus: Team["billingStatus"];
+};
 
 export function CheckoutButton({
-  onClick,
   teamSlug,
   sku,
   metadata,
-  redirectPath,
+  getBillingCheckoutUrl,
   children,
-  redirectToCheckout,
-  ...restProps
+  buttonProps,
+  billingStatus,
 }: CheckoutButtonProps) {
+  const getUrlMutation = useMutation({
+    mutationFn: async () => {
+      return getBillingCheckoutUrl({
+        teamSlug,
+        sku,
+        metadata,
+        redirectUrl: getAbsoluteUrl("/stripe-redirect"),
+      });
+    },
+  });
+
+  const errorMessage = "Failed to open checkout page";
+
   return (
-    <Button
-      {...restProps}
-      onClick={async (e) => {
-        onClick?.(e);
-        await redirectToCheckout({
-          teamSlug,
-          sku,
-          metadata,
-          redirectUrl: getRedirectUrl(redirectPath),
-        });
-      }}
-    >
-      {children}
-    </Button>
+    <div className="flex w-full flex-col items-center gap-2">
+      {/* show warning if the team has an invalid payment method */}
+      {billingStatus === "invalidPayment" && (
+        <BillingWarning teamSlug={teamSlug} />
+      )}
+      <Button
+        {...buttonProps}
+        className={cn(buttonProps?.className, "w-full gap-2")}
+        disabled={
+          // disable button if the team has an invalid payment method
+          // api will return 402 error if the team has an invalid payment method
+          billingStatus === "invalidPayment" ||
+          getUrlMutation.isPending ||
+          buttonProps?.disabled
+        }
+        onClick={async (e) => {
+          buttonProps?.onClick?.(e);
+          getUrlMutation.mutate(undefined, {
+            onSuccess: (res) => {
+              if (!res.url) {
+                toast.error(errorMessage);
+                return;
+              }
+
+              const tab = window.open(res.url, "_blank");
+
+              if (!tab) {
+                toast.error(errorMessage);
+                return;
+              }
+            },
+            onError: () => {
+              toast.error(errorMessage);
+            },
+          });
+        }}
+      >
+        {getUrlMutation.isPending && <Spinner className="size-4" />}
+        {children}
+      </Button>
+    </div>
   );
 }
 
-type BillingPortalButtonProps = Omit<BillingPortalOptions, "redirectUrl"> &
-  ButtonProps & {
-    redirectPath: string;
-    redirectToBillingPortal: BillingBillingPortalAction;
-  };
+function BillingWarning({ teamSlug }: { teamSlug: string }) {
+  return (
+    <div className="flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/30 dark:text-amber-400">
+      <AlertTriangleIcon className="h-5 w-5 flex-shrink-0" />
+      <p className="text-sm">
+        You have outstanding invoices. Please{" "}
+        <Link
+          href={`/team/${teamSlug}/~/settings/invoices?status=open`}
+          className="font-medium text-amber-700 underline transition-colors hover:text-amber-900 dark:text-amber-400 dark:hover:text-amber-300"
+        >
+          pay them
+        </Link>{" "}
+        to continue.
+      </p>
+    </div>
+  );
+}
+
+type BillingPortalButtonProps = Omit<
+  GetBillingPortalUrlOptions,
+  "redirectUrl"
+> & {
+  getBillingPortalUrl: GetBillingPortalUrlAction;
+  buttonProps?: Omit<ButtonProps, "children">;
+  children: React.ReactNode;
+};
 
 export function BillingPortalButton({
-  onClick,
   teamSlug,
-  redirectPath,
   children,
-  redirectToBillingPortal,
-  ...restProps
+  getBillingPortalUrl,
+  buttonProps,
 }: BillingPortalButtonProps) {
+  const getUrlMutation = useMutation({
+    mutationFn: async () => {
+      return getBillingPortalUrl({
+        teamSlug,
+        redirectUrl: getAbsoluteUrl("/stripe-redirect"),
+      });
+    },
+  });
+
+  const errorMessage = "Failed to open billing portal";
+
   return (
     <Button
-      {...restProps}
+      {...buttonProps}
+      className={cn(buttonProps?.className, "gap-2")}
+      disabled={getUrlMutation.isPending || buttonProps?.disabled}
       onClick={async (e) => {
-        onClick?.(e);
-        await redirectToBillingPortal({
-          teamSlug,
-          redirectUrl: getRedirectUrl(redirectPath),
+        buttonProps?.onClick?.(e);
+        getUrlMutation.mutate(undefined, {
+          onSuccess(res) {
+            if (!res.url) {
+              toast.error(errorMessage);
+              return;
+            }
+
+            const tab = window.open(res.url, "_blank");
+            if (!tab) {
+              toast.error(errorMessage);
+              return;
+            }
+          },
+          onError: () => {
+            toast.error(errorMessage);
+          },
         });
       }}
     >
+      {getUrlMutation.isPending && <Spinner className="size-4" />}
       {children}
     </Button>
   );
 }
 
-function getRedirectUrl(path: string) {
+function getAbsoluteUrl(path: string) {
   const url = new URL(window.location.origin);
   url.pathname = path;
   return url.toString();

apps/dashboard/src/@/components/blocks/Avatars/GradientAvatar.stories.tsx

@@ -8,13 +8,12 @@ import { GradientAvatar } from "./GradientAvatar";
 const meta = {
   title: "blocks/Avatars/GradientAvatar",
   component: Story,
-  parameters: {},
 } satisfies Meta<typeof Story>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
@@ -22,14 +21,14 @@ const client = getThirdwebClient();
 
 function Story() {
   return (
-    <div className="flex flex-col gap-10 p-10">
-      <p> All images below are set with size-6 className </p>
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
+      <p> All images below are set with size-20 className </p>
 
       <BadgeContainer label="No Src, No id - Skeleton">
         <GradientAvatar
           id={undefined}
           src={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -38,7 +37,7 @@ function Story() {
         <GradientAvatar
           id={"foo"}
           src={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -47,7 +46,7 @@ function Story() {
         <GradientAvatar
           id={"foo"}
           src={""}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -56,7 +55,7 @@ function Story() {
         <GradientAvatar
           id={"bar"}
           src={""}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -65,7 +64,7 @@ function Story() {
         <GradientAvatar
           src="invalid-src"
           id={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -74,7 +73,7 @@ function Story() {
         <GradientAvatar
           src="https://picsum.photos/200/300"
           id={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -83,7 +82,7 @@ function Story() {
         <GradientAvatar
           src="ipfs://QmZbeJYEs7kCJHyQxjxU2SJUtjSAr4m87wzJFJUyWomKdj/Smily.svg"
           id={undefined}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
@@ -123,14 +122,14 @@ function ToggleTest() {
         <GradientAvatar
           src={data?.src}
           id={data?.id}
-          className="size-6"
+          className="size-20"
           client={client}
         />
       </BadgeContainer>
 
       <BadgeContainer label="invalid Src">
         <GradientAvatar
-          className="size-6"
+          className="size-20"
           src={data ? "invalid-src" : undefined}
           id={undefined}
           client={client}

apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
@@ -22,7 +22,7 @@ const client = getThirdwebClient();
 
 function Story() {
   return (
-    <div className="flex flex-col gap-10 p-10">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
       <p> All images below are set with size-6 className </p>
 
       <BadgeContainer label="No Src - Skeleton">

apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { DangerSettingCard } from "./DangerSettingCard";
 
 const meta = {
@@ -15,17 +15,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
     <div className="container flex max-w-[1000px] flex-col gap-8 py-10">

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

@@ -2,11 +2,12 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { useMutation } from "@tanstack/react-query";
 import { DownloadIcon } from "lucide-react";
+import Papa from "papaparse";
 import { toast } from "sonner";
 import { cn } from "../../lib/utils";
 
 export function ExportToCSVButton(props: {
-  getData: () => Promise<{ header: string[]; rows: string[][] }>;
+  getData: () => Promise<{ header: string[]; rows: string[][] } | string>;
   fileName: string;
   disabled?: boolean;
   className?: string;
@@ -14,7 +15,12 @@ export function ExportToCSVButton(props: {
   const exportMutation = useMutation({
     mutationFn: async () => {
       const data = await props.getData();
-      exportToCSV(props.fileName, data);
+      if (typeof data === "string") {
+        exportToCSV(props.fileName, data);
+      } else {
+        const fileContent = convertToCSVFormat(data);
+        exportToCSV(props.fileName, fileContent);
+      }
     },
     onError: () => {
       toast.error("Failed to download CSV");
@@ -29,7 +35,7 @@ export function ExportToCSVButton(props: {
   return (
     <Button
       variant="outline"
-      disabled={props.disabled}
+      disabled={props.disabled || exportMutation.isPending}
       className={cn("flex items-center gap-2 border text-xs", props.className)}
       onClick={async () => {
         exportMutation.mutate();
@@ -50,15 +56,15 @@ export function ExportToCSVButton(props: {
   );
 }
 
-function exportToCSV(
-  fileName: string,
-  data: { header: string[]; rows: string[][] },
-) {
-  const { header, rows } = data;
-  const csvContent = `data:text/csv;charset=utf-8,${header.join(",")}\n${rows
-    .map((e) => e.join(","))
-    .join("\n")}`;
+function convertToCSVFormat(data: { header: string[]; rows: string[][] }) {
+  return Papa.unparse({
+    fields: data.header,
+    data: data.rows,
+  });
+}
 
+function exportToCSV(fileName: string, fileContent: string) {
+  const csvContent = `data:text/csv;charset=utf-8,${fileContent}`;
   const encodedUri = encodeURI(csvContent);
   const link = document.createElement("a");
   link.setAttribute("href", encodedUri);

apps/dashboard/src/@/components/blocks/Img.stories.tsx

@@ -9,13 +9,12 @@ import { Img } from "./Img";
 const meta = {
   title: "blocks/Img",
   component: Story,
-  parameters: {},
 } satisfies Meta<typeof Story>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 

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

@@ -47,7 +47,7 @@ export function Img(props: imgElementProps) {
   }, []);
 
   return (
-    <div className="relative">
+    <div className="relative shrink-0">
       <img
         {...restProps}
         // avoid setting empty src string to prevent request to the entire page

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/MultiNetworkSelector.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { MultiNetworkSelector } from "./NetworkSelectors";
 
 const meta = {
@@ -16,20 +16,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
-    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+    <div className="container flex max-w-6xl flex-col gap-8 py-10">
       <Variant label="No Chains selected by default" selectedChainIds={[]} />
       <Variant
         label="Polygon, Ethereum selected by default"

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

@@ -4,7 +4,7 @@ import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
 import { useCallback, useMemo } from "react";
-import { ChainIcon } from "../../../components/icons/ChainIcon";
+import { ChainIconClient } from "../../../components/icons/ChainIcon";
 import { useAllChainsData } from "../../../hooks/chains/allChains";
 
 function cleanChainName(chainName: string) {
@@ -18,17 +18,44 @@ export function MultiNetworkSelector(props: {
   onChange: (chainIds: number[]) => void;
   disableChainId?: boolean;
   className?: string;
+  priorityChains?: number[];
+  hideTestnets?: boolean;
 }) {
   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];
+    }
+
+    if (props.hideTestnets) {
+      sortedChains = sortedChains.filter((chain) => !chain.testnet);
+    }
+
+    return sortedChains.map((chain) => {
       return {
         label: cleanChainName(chain.name),
         value: String(chain.chainId),
       };
     });
-  }, [allChains]);
+  }, [allChains, props.priorityChains, idToChain, props.hideTestnets]);
 
   const searchFn = useCallback(
     (option: Option, searchValue: string) => {
@@ -55,7 +82,7 @@ export function MultiNetworkSelector(props: {
       return (
         <div className="flex justify-between gap-4">
           <span className="flex grow gap-2 truncate text-left">
-            <ChainIcon
+            <ChainIconClient
               className="size-5"
               ipfsSrc={chain.icon?.url}
               loading="lazy"
@@ -104,6 +131,7 @@ export function SingleNetworkSelector(props: {
   side?: "left" | "right" | "top" | "bottom";
   disableChainId?: boolean;
   align?: "center" | "start" | "end";
+  placeholder?: string;
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
@@ -149,7 +177,7 @@ export function SingleNetworkSelector(props: {
       return (
         <div className="flex justify-between gap-4">
           <span className="flex grow gap-2 truncate text-left">
-            <ChainIcon
+            <ChainIconClient
               className="size-5"
               ipfsSrc={chain.icon?.url}
               loading="lazy"
@@ -180,7 +208,11 @@ export function SingleNetworkSelector(props: {
         props.onChange(Number(chainId));
       }}
       closeOnSelect={true}
-      placeholder={isLoadingChains ? "Loading Chains..." : "Select Chain"}
+      placeholder={
+        isLoadingChains
+          ? "Loading Chains..."
+          : props.placeholder || "Select Chain"
+      }
       overrideSearchFn={searchFn}
       renderOption={renderOption}
       className={props.className}

apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { SettingsCard } from "./SettingsCard";
 
 const meta = {
@@ -15,139 +15,130 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
-    <div className="min-h-dvh bg-background py-6 text-foreground">
-      <div className="container flex max-w-[1100px] flex-col gap-10 lg:p-10">
-        <BadgeContainer label="No Header">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={undefined}
-            errorText={undefined}
-            noPermissionText={undefined}
-            saveButton={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
+      <BadgeContainer label="No Header">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={undefined}
+          errorText={undefined}
+          noPermissionText={undefined}
+          saveButton={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Header">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            errorText={undefined}
-            noPermissionText={undefined}
-            saveButton={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Header">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          errorText={undefined}
+          noPermissionText={undefined}
+          saveButton={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Error">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            errorText="This is error text"
-            noPermissionText={undefined}
-            saveButton={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Error">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          errorText="This is error text"
+          noPermissionText={undefined}
+          saveButton={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="No Permission">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: false,
-              isPending: false,
-              onClick: () => {},
-            }}
-            noPermissionText="You do not have permission to edit this"
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="No Permission">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: false,
+            isPending: false,
+            onClick: () => {},
+          }}
+          noPermissionText="You do not have permission to edit this"
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Save">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: false,
-              isPending: false,
-              onClick: () => {},
-            }}
-            noPermissionText={undefined}
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Save">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: false,
+            isPending: false,
+            onClick: () => {},
+          }}
+          noPermissionText={undefined}
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Save Disabled">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: true,
-              isPending: false,
-              onClick: () => {},
-            }}
-            noPermissionText={undefined}
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Save Disabled">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: true,
+            isPending: false,
+            onClick: () => {},
+          }}
+          noPermissionText={undefined}
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
 
-        <BadgeContainer label="Save Loading">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: false,
-              isPending: true,
-              onClick: () => {},
-            }}
-            noPermissionText={undefined}
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
-      </div>
+      <BadgeContainer label="Save Loading">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: false,
+            isPending: true,
+            onClick: () => {},
+          }}
+          noPermissionText={undefined}
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
     </div>
   );
 }

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.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { mobileViewport } from "../../../stories/utils";
 import { SidebarLayout } from "./SidebarLayout";
 
 const meta = {
@@ -15,17 +14,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
     <SidebarLayout

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

@@ -1,6 +1,23 @@
+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";
+import { AppFooter } from "./app-footer";
 
 export function SidebarLayout(props: {
   sidebarLinks: SidebarLink[];
@@ -17,7 +34,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 +49,117 @@ export function SidebarLayout(props: {
     </div>
   );
 }
+
+export function FullWidthSidebarLayout(props: {
+  contentSidebarLinks: SidebarLink[];
+  footerSidebarLinks?: SidebarLink[];
+  children: React.ReactNode;
+  className?: string;
+}) {
+  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" className="pt-2">
+        <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="z-0 flex min-w-0 grow flex-col max-sm:w-full">
+          {children}
+        </main>
+        <AppFooter containerClassName="max-w-7xl" />
+      </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="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/blocks/SingleNetworkSelector.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { SingleNetworkSelector } from "./NetworkSelectors";
 
 const meta = {
@@ -16,20 +16,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
-    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+    <div className="container flex max-w-6xl flex-col gap-8 py-10">
       <Variant label="No Chain ID selected by default" chainId={undefined} />
       <Variant label="Polygon selected by default" chainId={137} />
       <Variant

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -12,17 +12,54 @@ import Link from "next/link";
 
 type AppFooterProps = {
   className?: string;
+  containerClassName?: string;
 };
 
+const footerLinks = [
+  {
+    href: "/home",
+    label: "Home",
+  },
+  {
+    href: "https://blog.thirdweb.com",
+    label: "Blog",
+  },
+  {
+    href: "https://portal.thirdweb.com/changelog",
+    label: "Changelog",
+  },
+  {
+    href: "https://feedback.thirdweb.com/",
+    label: "Feedback",
+  },
+  {
+    href: "https://thirdweb.com/privacy-policy",
+    label: "Privacy Policy",
+  },
+  {
+    href: "https://thirdweb.com/terms",
+    label: "Terms of Service",
+  },
+  {
+    href: "https://thirdweb.com/chainlist",
+    label: "Chainlist",
+  },
+];
+
 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">
@@ -74,57 +111,28 @@ export function AppFooter(props: AppFooterProps) {
         </div>
         {/* bottom row */}
         <div className="grid grid-flow-col grid-cols-2 grid-rows-5 gap-2 md:flex md:flex-row md:justify-between">
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="/home"
-          >
-            Home
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://blog.thirdweb.com"
-            target="_blank"
-          >
-            Blog
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://portal.thirdweb.com/changelog"
-            target="_blank"
-          >
-            Changelog
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://feedback.thirdweb.com/"
-            target="_blank"
-          >
-            Feedback
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://thirdweb.com/privacy-policy"
-            target="_blank"
-          >
-            Privacy Policy
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://thirdweb.com/terms"
-            target="_blank"
-          >
-            Terms of Service
-          </Link>
-
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://thirdweb.com/chainlist"
-            target="_blank"
-          >
-            Chain List
-          </Link>
+          {footerLinks.map((link) => (
+            <FooterLink key={link.href} {...link} />
+          ))}
         </div>
       </div>
     </footer>
   );
 }
+
+function FooterLink(props: {
+  href: string;
+  label: string;
+  prefetch?: boolean;
+}) {
+  return (
+    <Link
+      href={props.href}
+      prefetch={false}
+      className="px-0 py-[6px] text-muted-foreground text-sm hover:underline"
+      target="_blank"
+    >
+      {props.label}
+    </Link>
+  );
+}

apps/dashboard/src/@/components/blocks/charts/area-chart.tsx

@@ -17,7 +17,7 @@ import {
 } from "@/components/ui/chart";
 import { formatDate } from "date-fns";
 import { useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
   EmptyChartState,
   LoadingChartState,
@@ -30,11 +30,19 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
     description?: string;
     titleClassName?: string;
   };
+  customHeader?: React.ReactNode;
   // chart config
   config: TConfig;
   data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
   showLegend?: boolean;
 
+  yAxis?: boolean;
+  xAxis?: {
+    sameDay?: boolean;
+  };
+
+  variant?: "stacked" | "individual";
+
   // chart className
   chartClassName?: string;
   isPending: boolean;
@@ -60,6 +68,8 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
         </CardHeader>
       )}
 
+      {props.customHeader && props.customHeader}
+
       <CardContent className={cn(!props.header && "pt-6")}>
         <ChartContainer config={props.config} className={props.chartClassName}>
           {props.isPending ? (
@@ -69,15 +79,21 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
           ) : (
             <AreaChart accessibilityLayer data={props.data}>
               <CartesianGrid vertical={false} />
+              {props.yAxis && <YAxis tickLine={false} axisLine={false} />}
               <XAxis
                 dataKey="time"
                 tickLine={false}
                 axisLine={false}
                 tickMargin={20}
-                tickFormatter={(value) => formatDate(new Date(value), "MMM dd")}
+                tickFormatter={(value) =>
+                  formatDate(
+                    new Date(value),
+                    props.xAxis?.sameDay ? "MMM dd, HH:mm" : "MMM dd",
+                  )
+                }
               />
               <ChartTooltip
-                cursor={false}
+                cursor={true}
                 content={
                   <ChartTooltipContent
                     hideLabel={
@@ -110,17 +126,29 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
                   </linearGradient>
                 ))}
               </defs>
-              {configKeys.map((key) => (
-                <Area
-                  key={key}
-                  dataKey={key}
-                  type="natural"
-                  fill={`url(#fill_${key})`}
-                  fillOpacity={0.4}
-                  stroke={`var(--color-${key})`}
-                  stackId="a"
-                />
-              ))}
+              {configKeys.map((key) =>
+                key === "maxLine" ? (
+                  <Area
+                    key={key}
+                    type="monotone"
+                    dataKey="maxLine"
+                    stroke="#ef4444"
+                    strokeWidth={2}
+                    strokeDasharray="5 5"
+                    fill="none"
+                  />
+                ) : (
+                  <Area
+                    key={key}
+                    dataKey={key}
+                    type="natural"
+                    fill={`url(#fill_${key})`}
+                    fillOpacity={0.4}
+                    stroke={`var(--color-${key})`}
+                    stackId={props.variant !== "stacked" ? undefined : "a"}
+                  />
+                ),
+              )}
 
               {props.showLegend && (
                 <ChartLegend

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -32,6 +32,7 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
     description?: string;
     titleClassName?: string;
   };
+  customHeader?: React.ReactNode;
   // chart config
   config: TConfig;
   data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
@@ -41,7 +42,9 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   chartClassName?: string;
   isPending: boolean;
   toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
+  toolTipValueFormatter?: (value: unknown) => React.ReactNode;
   hideLabel?: boolean;
+  emptyChartState?: React.ReactElement;
 };
 
 export function ThirdwebBarChart<TConfig extends ChartConfig>(
@@ -65,12 +68,14 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
         </CardHeader>
       )}
 
+      {props.customHeader && props.customHeader}
+
       <CardContent className={cn(!props.header && "pt-6")}>
         <ChartContainer config={props.config} className={props.chartClassName}>
           {props.isPending ? (
             <LoadingChartState />
           ) : props.data.length === 0 ? (
-            <EmptyChartState />
+            <EmptyChartState>{props.emptyChartState}</EmptyChartState>
           ) : (
             <BarChart accessibilityLayer data={props.data}>
               <CartesianGrid vertical={false} />
@@ -88,6 +93,7 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
                       props.hideLabel !== undefined ? props.hideLabel : true
                     }
                     labelFormatter={props.toolTipLabelFormatter}
+                    valueFormatter={props.toolTipValueFormatter}
                   />
                 }
               />
@@ -96,25 +102,15 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
                   content={<ChartLegendContent className="pt-5" />}
                 />
               )}
-              {configKeys.map((key, idx) => (
+              {configKeys.map((key) => (
                 <Bar
                   key={key}
                   dataKey={key}
                   // if stacked then they should all be the same stackId
                   // if grouped then they should all be unique stackId (so the key works great)
                   stackId={variant === "stacked" ? "a" : key}
-                  fill={`var(--color-${key})`}
-                  // if stacked then we need to figure out the radius based on the index in the array
-                  // if grouped then we can just use the same radius for all
-                  radius={
-                    variant === "stacked"
-                      ? idx === 0
-                        ? [0, 0, 4, 4]
-                        : idx === configKeys.length - 1
-                          ? [4, 4, 0, 0]
-                          : [0, 0, 0, 0]
-                      : [4, 4, 4, 4]
-                  }
+                  fill={props.config[key]?.color}
+                  radius={[4, 4, 4, 4]}
                   strokeWidth={1}
                   className="stroke-background"
                 />

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/blocks/code-segment.stories.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/select";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { type CodeEnvironment, CodeSegment } from "./code-segment.client";
 
 const meta = {
@@ -24,17 +24,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 type Mode = "default" | "no-tabs" | "only-tabs";
 
 function Story() {

apps/dashboard/src/@/components/blocks/multi-select.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMemo, useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { MultiSelect } from "./multi-select";
 
 const meta = {
@@ -16,17 +16,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function createList(len: number) {
   return Array.from({ length: len }, (_, i) => ({
     value: `${i}`,
@@ -36,7 +29,7 @@ function createList(len: number) {
 
 function Story() {
   return (
-    <div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
+    <div className="container flex max-w-6xl flex-col gap-6 py-10">
       <VariantTest defaultValues={[]} storyLabel="5 items" listLen={5} />
       <VariantTest defaultValues={[]} storyLabel="5000 items" listLen={5000} />
       <VariantTest

apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -1,63 +1,75 @@
+"use client";
 import type { Team } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { cn } from "@/lib/utils";
-import { CheckIcon, CircleAlertIcon, CircleDollarSignIcon } from "lucide-react";
+import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
+import Link from "next/link";
 import type React from "react";
 import { TEAM_PLANS } from "utils/pricing";
+import { useTrack } from "../../../hooks/analytics/useTrack";
 import { remainingDays } from "../../../utils/date-utils";
-import type { RedirectBillingCheckoutAction } from "../../actions/billing";
+import type { GetBillingCheckoutUrlAction } from "../../actions/billing";
+import type { ProductSKU } from "../../lib/billing";
 import { CheckoutButton } from "../billing";
 
-type ButtonProps = React.ComponentProps<typeof Button>;
-
-const PRO_CONTACT_US_URL =
-  "https://meetings.hubspot.com/sales-thirdweb/thirdweb-pro";
+type PricingCardCta = {
+  hint?: string;
+  title: string;
+  onClick?: () => void;
+} & (
+  | {
+      type: "link";
+      href: string;
+    }
+  | {
+      type: "checkout";
+    }
+);
 
 type PricingCardProps = {
   teamSlug: string;
-  billingPlan: Exclude<Team["billingPlan"], "free">;
-  cta?: {
-    hint?: string;
-    title: string;
-    tracking: {
-      category: string;
-      label?: string;
-    };
-    variant?: ButtonProps["variant"];
-  };
+  billingStatus: Team["billingStatus"];
+  billingPlan: keyof typeof TEAM_PLANS;
+  cta?: PricingCardCta;
   ctaHint?: string;
   highlighted?: boolean;
   current?: boolean;
-  canTrialGrowth?: boolean;
   activeTrialEndsAt?: string;
-  redirectPath: string;
-  redirectToCheckout: RedirectBillingCheckoutAction;
+  getBillingCheckoutUrl: GetBillingCheckoutUrlAction;
 };
 
 export const PricingCard: React.FC<PricingCardProps> = ({
   teamSlug,
+  billingStatus,
   billingPlan,
   cta,
   highlighted = false,
   current = false,
-  canTrialGrowth = false,
   activeTrialEndsAt,
-  redirectPath,
-  redirectToCheckout,
+  getBillingCheckoutUrl,
 }) => {
   const plan = TEAM_PLANS[billingPlan];
   const isCustomPrice = typeof plan.price === "string";
 
+  const trackEvent = useTrack();
   const remainingTrialDays =
     (activeTrialEndsAt ? remainingDays(activeTrialEndsAt) : 0) || 0;
 
+  const handleCTAClick = () => {
+    cta?.onClick?.();
+    trackEvent({
+      category: "account",
+      label: `${billingPlan}Plan`,
+      action: "click",
+    });
+  };
+
   return (
     <div
       className={cn(
-        "z-10 flex w-full flex-col gap-6 rounded-xl border border-border bg-card p-4 md:p-6",
+        "z-10 flex w-full flex-col gap-4 rounded-xl border border-border bg-card p-4",
         current && "border-blue-500",
         highlighted && "border-active-border",
       )}
@@ -73,13 +85,13 @@ export const PricingCard: React.FC<PricingCardProps> = ({
       <div className="flex flex-col gap-5">
         {/* Title + Desc */}
         <div>
-          <div className="mb-2 flex flex-row items-center gap-2">
+          <div className="mb-1 flex flex-row items-center gap-3">
             <h3 className="font-semibold text-2xl capitalize tracking-tight">
               {plan.title}
             </h3>
             {current && <Badge className="capitalize">Current plan</Badge>}
           </div>
-          <p className="max-w-[320px] text-muted-foreground">
+          <p className="max-w-[320px] text-muted-foreground text-sm">
             {plan.description}
           </p>
         </div>
@@ -87,41 +99,13 @@ export const PricingCard: React.FC<PricingCardProps> = ({
         {/* Price */}
         <div className="flex flex-col gap-0.5">
           <div className="flex items-center gap-2">
-            <span className="font-semibold text-3xl text-foreground tracking-tight">
-              {isCustomPrice ? (
-                plan.price
-              ) : canTrialGrowth ? (
-                <>
-                  <span className="text-muted-foreground line-through">
-                    ${plan.price}
-                  </span>{" "}
-                  $0
-                </>
-              ) : (
-                `$${plan.price}`
-              )}
+            <span className="font-semibold text-2xl text-foreground tracking-tight">
+              ${plan.price}
             </span>
 
             {!isCustomPrice && (
               <span className="text-muted-foreground">/ month</span>
             )}
-
-            {billingPlan === "starter" && (
-              <ToolTipLabel
-                contentClassName="max-w-[320px]"
-                label="We will place a temporary hold of $25 to verify your card, this will be immediately released back to you after verification."
-              >
-                <Button
-                  asChild
-                  variant="ghost"
-                  className="h-auto w-auto p-1 text-muted-foreground hover:text-foreground"
-                >
-                  <div>
-                    <CircleAlertIcon className="size-5 shrink-0" />
-                  </div>
-                </Button>
-              </ToolTipLabel>
-            )}
           </div>
 
           {remainingTrialDays > 0 && (
@@ -135,9 +119,9 @@ export const PricingCard: React.FC<PricingCardProps> = ({
         </div>
       </div>
 
-      <div className="flex grow flex-col items-start gap-2.5 text-foreground">
+      <div className="flex grow flex-col items-start gap-2 text-foreground">
         {plan.subTitle && (
-          <p className="font-medium text-foreground">{plan.subTitle}</p>
+          <p className="font-medium text-foreground text-sm">{plan.subTitle}</p>
         )}
 
         {plan.features.map((f) => (
@@ -147,26 +131,31 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
       {cta && (
         <div className="flex flex-col gap-3">
-          {billingPlan !== "pro" ? (
+          {billingPlanToSkuMap[billingPlan] && cta.type === "checkout" && (
             <CheckoutButton
-              variant={cta.variant || "outline"}
+              billingStatus={billingStatus}
+              buttonProps={{
+                variant: highlighted ? "default" : "outline",
+                className: highlighted ? undefined : "bg-background",
+                onClick: handleCTAClick,
+              }}
               teamSlug={teamSlug}
-              sku={billingPlan === "starter" ? "plan:starter" : "plan:growth"}
-              redirectPath={redirectPath}
-              redirectToCheckout={redirectToCheckout}
+              sku={billingPlanToSkuMap[billingPlan]}
+              getBillingCheckoutUrl={getBillingCheckoutUrl}
             >
               {cta.title}
             </CheckoutButton>
-          ) : (
-            <Button variant={cta.variant || "outline"} asChild>
-              <TrackedLinkTW
-                href={PRO_CONTACT_US_URL}
-                label={cta.tracking?.label}
-                category={cta.tracking?.category}
-                target="_blank"
-              >
+          )}
+
+          {cta.type === "link" && (
+            <Button
+              variant={highlighted ? "default" : "outline"}
+              className={highlighted ? undefined : "bg-background"}
+              asChild
+            >
+              <Link href={cta.href} target="_blank" onClick={handleCTAClick}>
                 {cta.title}
-              </TrackedLinkTW>
+              </Link>
             </Button>
           )}
 
@@ -181,6 +170,19 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   );
 };
 
+const billingPlanToSkuMap: Record<Team["billingPlan"], ProductSKU | undefined> =
+  {
+    starter: "plan:starter",
+    growth: "plan:growth",
+    accelerate: "plan:accelerate",
+    scale: "plan:scale",
+    // we can't render checkout buttons for these plans:
+    pro: undefined,
+    free: undefined,
+    growth_legacy: undefined,
+    starter_legacy: undefined,
+  };
+
 type FeatureItemProps = {
   text: string | string[];
 };
@@ -189,7 +191,7 @@ function FeatureItem({ text }: FeatureItemProps) {
   const titleStr = Array.isArray(text) ? text[0] : text;
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2 text-sm">
       <CheckIcon className="size-4 shrink-0 text-green-500" />
       {Array.isArray(text) ? (
         <div className="flex items-center gap-2">

apps/dashboard/src/@/components/blocks/select-with-search.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMemo, useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { SelectWithSearch } from "./select-with-search";
 
 const meta = {
@@ -16,17 +16,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function createList(len: number) {
   return Array.from({ length: len }, (_, i) => ({
     value: `${i}`,
@@ -36,7 +29,7 @@ function createList(len: number) {
 
 function Story() {
   return (
-    <div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
+    <div className="container flex max-w-6xl flex-col gap-6 py-10">
       <VariantTest storyLabel="5 items" listLen={5} />
       <VariantTest storyLabel="5000 items" listLen={5000} />
       <VariantTest

apps/dashboard/src/@/components/blocks/wallet-address.tsx

@@ -8,7 +8,7 @@ import {
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useClipboard } from "hooks/useClipboard";
-import { Check, Copy } from "lucide-react";
+import { Check, Copy, XIcon } from "lucide-react";
 import { useMemo } from "react";
 import { type ThirdwebClient, isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
@@ -16,12 +16,14 @@ import { Blobbie, type SocialProfile, useSocialProfiles } from "thirdweb/react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
+import { ToolTipLabel } from "../ui/tooltip";
 import { Img } from "./Img";
 
 export function WalletAddress(props: {
   address: string | undefined;
   shortenAddress?: boolean;
   className?: string;
+  iconClassName?: string;
 }) {
   const thirdwebClient = useThirdwebClient();
   // default back to zero address if no address provided
@@ -44,7 +46,16 @@ export function WalletAddress(props: {
   const { onCopy, hasCopied } = useClipboard(address, 2000);
 
   if (!isAddress(address)) {
-    return <span>Invalid Address ({address})</span>;
+    return (
+      <ToolTipLabel label={address} hoverable>
+        <span className="flex items-center gap-2 underline-offset-4 hover:underline">
+          <div className="flex size-6 items-center justify-center rounded-full border bg-background">
+            <XIcon className="size-4 text-muted-foreground" />
+          </div>
+          Invalid Address
+        </span>
+      </ToolTipLabel>
+    );
   }
 
   // special case for zero address
@@ -68,6 +79,7 @@ export function WalletAddress(props: {
               address={address}
               profiles={profiles.data || []}
               thirdwebClient={thirdwebClient}
+              iconClassName={props.iconClassName}
             />
           )}
           <span className="cursor-pointer font-mono">
@@ -158,6 +170,7 @@ function WalletAvatar(props: {
   address: string;
   profiles: SocialProfile[];
   thirdwebClient: ThirdwebClient;
+  iconClassName?: string;
 }) {
   const avatar = useMemo(() => {
     return props.profiles.find(
@@ -176,11 +189,20 @@ function WalletAvatar(props: {
     : undefined;
 
   return (
-    <div className="size-6 overflow-hidden rounded-full">
+    <div
+      className={cn("size-6 overflow-hidden rounded-full", props.iconClassName)}
+    >
       {resolvedAvatarSrc ? (
-        <Img src={resolvedAvatarSrc} className="size-6 object-cover" />
+        <Img
+          src={resolvedAvatarSrc}
+          className={cn("size-6 object-cover", props.iconClassName)}
+        />
       ) : (
-        <Blobbie address={props.address} size={24} />
+        <Blobbie
+          address={props.address}
+          size={24}
+          className={props.iconClassName}
+        />
       )}
     </div>
   );

apps/dashboard/src/@/components/pagination-buttons.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../stories/utils";
+import { BadgeContainer } from "../../stories/utils";
 import { PaginationButtons } from "./pagination-buttons";
 
 const meta = {
@@ -16,17 +16,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
     <div className="container flex max-w-[1000px] flex-col gap-8 py-10">

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/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/button.stories.tsx

@@ -6,9 +6,6 @@ import { BadgeContainer } from "../../../stories/utils";
 const meta = {
   title: "Shadcn/Buttons",
   component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;
 
 export default meta;

apps/dashboard/src/@/components/ui/code/code.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { BadgeContainer } from "stories/utils";
 import { CodeClient } from "./code.client";
 
 const meta = {
@@ -11,17 +11,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const tsCode = `\
 type User = {
   name: string;
@@ -86,7 +79,7 @@ const bashCode = "pnpm i thirdweb";
 
 function Component() {
   return (
-    <div className="container flex max-w-[600px] flex-col gap-10 py-10">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
       <BadgeContainer label="ts">
         <CodeClient code={tsCode} lang="ts" />
       </BadgeContainer>

apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx

@@ -1,5 +1,4 @@
 import * as parserBabel from "prettier/plugins/babel";
-import * as estree from "prettier/plugins/estree";
 import { format } from "prettier/standalone";
 import { type BundledLanguage, codeToHtml } from "shiki";
 
@@ -21,10 +20,11 @@ export async function getCodeHtml(
     ignoreFormattingErrors?: boolean;
   },
 ) {
+  const estreePlugin = await import("prettier/plugins/estree");
   const formattedCode = isPrettierSupportedLang(lang)
     ? await format(code, {
         parser: "babel-ts",
-        plugins: [parserBabel, estree],
+        plugins: [parserBabel, estreePlugin.default],
         printWidth: 60,
       }).catch((e) => {
         if (!options?.ignoreFormattingErrors) {

apps/dashboard/src/@/components/ui/code/plaintext-code.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { BadgeContainer } from "stories/utils";
 import { PlainTextCodeBlock } from "./plaintext-code";
 
 const meta = {
@@ -11,17 +11,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const jsCode = `\
 import { getContract } from "thirdweb";
 import { sepolia } from "thirdweb/chains";
@@ -39,7 +32,7 @@ const overflowText =
 
 function Component() {
   return (
-    <div className="container flex max-w-[600px] flex-col gap-10 py-10">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
       <BadgeContainer label="large chunk of code">
         <PlainTextCodeBlock code={jsCode} />
       </BadgeContainer>

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

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-foreground/10 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-foreground/10 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:selection:bg-foreground/20",
           className,
         )}
         ref={ref}

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/select.stories.tsx

@@ -13,9 +13,6 @@ import { BadgeContainer } from "../../../stories/utils";
 const meta = {
   title: "Shadcn/Select",
   component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;
 
 export default meta;

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/@/components/ui/table.stories.tsx

@@ -10,35 +10,25 @@ import {
 } from "@/components/ui/table";
 import type { Meta, StoryObj } from "@storybook/react";
 import Link from "next/link";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { cn } from "../../lib/utils";
 import { Badge } from "./badge";
 
 const meta = {
   title: "Shadcn/Table",
   component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
+export const Variants: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Component() {
   return (
-    <div className="flex min-w-0 flex-col gap-6 px-4 py-6 lg:mx-auto lg:max-w-[1000px]">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
       <BadgeContainer label="Normal">
         <TableDemo />
       </BadgeContainer>

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

@@ -7,6 +7,7 @@ import { usePathname } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
 import { Button } from "./button";
+import { ToolTipLabel } from "./tooltip";
 
 export type TabLink = {
   name: string;
@@ -20,6 +21,7 @@ export function TabLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLAnchorElement>();
@@ -30,7 +32,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
@@ -79,8 +81,9 @@ export function TabButtons(props: {
     name: React.ReactNode;
     onClick: () => void;
     isActive: boolean;
-    isEnabled?: boolean;
+    isDisabled?: boolean;
     icon?: React.FC<{ className?: string }>;
+    toolTip?: string;
   }[];
   tabClassName?: string;
   activeTabClassName?: string;
@@ -110,26 +113,31 @@ export function TabButtons(props: {
         >
           {props.tabs.map((tab, index) => {
             return (
-              <Button
-                // biome-ignore lint/suspicious/noArrayIndexKey: tabs don't change order, so index is stable
-                key={index}
-                variant="ghost"
-                ref={tab.isActive ? activeTabRef : undefined}
-                className={cn(
-                  "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",
-                  props.tabClassName,
-                  tab.isActive && props.activeTabClassName,
-                )}
-                onClick={tab.isEnabled ? tab.onClick : undefined}
+              <ToolTipLabel
+                key={typeof tab.name === "string" ? tab.name : index}
+                label={tab.toolTip}
               >
-                {tab.icon && (
-                  <tab.icon className={cn("size-6", props.tabIconClassName)} />
-                )}
-                {tab.name}
-              </Button>
+                <Button
+                  variant="ghost"
+                  ref={tab.isActive ? activeTabRef : undefined}
+                  className={cn(
+                    "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.isDisabled && "cursor-not-allowed opacity-50",
+                    props.tabClassName,
+                    tab.isActive && props.activeTabClassName,
+                  )}
+                  onClick={!tab.isDisabled ? tab.onClick : undefined}
+                >
+                  {tab.icon && (
+                    <tab.icon
+                      className={cn("size-6", props.tabIconClassName)}
+                    />
+                  )}
+                  {tab.name}
+                </Button>
+              </ToolTipLabel>
             );
           })}
         </div>
@@ -159,9 +167,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 +215,7 @@ export function TabPathLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const pathname = usePathname() || "";
   const { links, ...restProps } = props;

apps/dashboard/src/@/constants/thirdweb.server.ts

@@ -6,6 +6,7 @@ import {
 import {
   THIRDWEB_BUNDLER_DOMAIN,
   THIRDWEB_INAPP_WALLET_DOMAIN,
+  THIRDWEB_INSIGHT_API_DOMAIN,
   THIRDWEB_PAY_DOMAIN,
   THIRDWEB_RPC_DOMAIN,
   THIRDWEB_SOCIAL_API_DOMAIN,
@@ -32,6 +33,7 @@ export function getThirdwebClient(jwt?: string) {
       storage: THIRDWEB_STORAGE_DOMAIN,
       social: THIRDWEB_SOCIAL_API_DOMAIN,
       bundler: THIRDWEB_BUNDLER_DOMAIN,
+      insight: THIRDWEB_INSIGHT_API_DOMAIN,
     });
   }
 

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/@/lib/DashboardRouter.tsx

@@ -1,75 +1,64 @@
 "use client";
 
 // eslint-disable-next-line no-restricted-imports
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import {
-  Suspense,
+  type TransitionStartFunction,
   useEffect,
   useMemo,
   useRef,
   useState,
   useSyncExternalStore,
+  useTransition,
 } from "react";
 import { createStore } from "./reactive";
 
 // Using useDashboardRouter instead of useRouter gives us a nice progress bar on top of the page when navigating using router.push or router.replace
 
-// using a store instead of context to avoid triggering re-renders on root component
-const LoadingRouteHref = createStore<string | undefined>(undefined);
+const RouteStartTransitionFn = createStore<TransitionStartFunction>((fn) =>
+  fn(),
+);
 
 export function useDashboardRouter() {
+  const startTransition = useSyncExternalStore(
+    RouteStartTransitionFn.subscribe,
+    RouteStartTransitionFn.getValue,
+    RouteStartTransitionFn.getValue,
+  );
+
   const router = useRouter();
   return useMemo(() => {
     return {
       ...router,
       replace(href: string, options?: { scroll?: boolean }) {
-        LoadingRouteHref.setValue(href);
-        router.replace(href, options);
+        startTransition(() => {
+          router.replace(href, options);
+        });
       },
       push(href: string, options?: { scroll?: boolean }) {
-        LoadingRouteHref.setValue(href);
-        router.push(href, options);
+        startTransition(() => {
+          router.push(href, options);
+        });
       },
     };
-  }, [router]);
-}
-
-function useRouterLoadingStatus() {
-  const loadingHref = useSyncExternalStore(
-    LoadingRouteHref.subscribe,
-    LoadingRouteHref.getValue,
-    LoadingRouteHref.getValue,
-  );
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const searchParamsStr = searchParams?.toString();
-
-  const routerHref = pathname + (searchParamsStr ? `?${searchParamsStr}` : "");
-  const isLoading = loadingHref && loadingHref !== routerHref;
-
-  // reset loading on route load
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (!isLoading) {
-      LoadingRouteHref.setValue(undefined);
-    }
-  }, [isLoading]);
-
-  return isLoading;
+  }, [router, startTransition]);
 }
 
 const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-// Render this on root
-function DashboardRouterTopProgressBarInner() {
-  const isLoading = useRouterLoadingStatus();
-  const [progress, setProgress] = useState(0);
+export function DashboardRouterTopProgressBar() {
+  const [isRouteLoading, startTransition] = useTransition();
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    RouteStartTransitionFn.setValue(startTransition);
+  }, []);
 
+  const [progress, setProgress] = useState(0);
   const progressStartedRef = useRef(false);
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (!isLoading) {
+    if (!isRouteLoading) {
       setProgress(0);
       progressStartedRef.current = false;
       return;
@@ -85,7 +74,7 @@ function DashboardRouterTopProgressBarInner() {
 
     async function updateProgressBar(progress: number, delay: number) {
       if (!isMounted) {
-        if (!isLoading) {
+        if (!isRouteLoading) {
           setProgress(100);
         }
         return;
@@ -112,14 +101,14 @@ function DashboardRouterTopProgressBarInner() {
     return () => {
       isMounted = false;
     };
-  }, [isLoading]);
+  }, [isRouteLoading]);
 
-  const width = isLoading ? progress : 100;
+  const width = isRouteLoading ? progress : 100;
   return (
     <span
       className="fixed top-0 block h-[3px] bg-foreground"
       style={{
-        opacity: isLoading ? "100" : "0",
+        opacity: isRouteLoading ? "100" : "0",
         width: `${width}%`,
         transition: width === 0 ? "none" : "width 0.2s ease, opacity 0.3s ease",
         zIndex: "100000000",
@@ -128,12 +117,3 @@ function DashboardRouterTopProgressBarInner() {
     />
   );
 }
-
-// need to wrap with suspense because of useSearchParams usage
-export function DashboardRouterTopProgressBar() {
-  return (
-    <Suspense fallback={null}>
-      <DashboardRouterTopProgressBarInner />
-    </Suspense>
-  );
-}

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

@@ -3,6 +3,8 @@ export type ProductSKU =
   | "plan:starter"
   | "plan:growth"
   | "plan:custom"
+  | "plan:accelerate"
+  | "plan:scale"
   | "product:ecosystem_wallets"
   | "product:engine_standard"
   | "product:engine_premium"

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -44,14 +44,6 @@ export type Account = {
   // TODO - add image URL
 };
 
-interface UpdateAccountInput {
-  name?: string;
-  email?: string;
-  linkWallet?: boolean;
-  subscribeToUpdates?: boolean;
-  onboardSkipped?: boolean;
-}
-
 interface UpdateAccountNotificationsInput {
   billing: "email" | "none";
   updates: "email" | "none";
@@ -140,45 +132,40 @@ export function useAccountCredits() {
   });
 }
 
-export function useUpdateAccount() {
-  const queryClient = useQueryClient();
-  const address = useActiveAccount()?.address;
+type UpdateAccountParams = {
+  name?: string;
+  email?: string;
+  linkWallet?: boolean;
+  subscribeToUpdates?: boolean;
+  onboardSkipped?: boolean;
+};
 
-  return useMutation({
-    mutationFn: async (input: UpdateAccountInput) => {
-      type Result = {
-        data: object;
-        error?: { message: string };
-      };
+export async function updateAccountClient(input: UpdateAccountParams) {
+  type Result = {
+    data: object;
+    error?: { message: string };
+  };
 
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/account",
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(input),
-      });
-
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
-
-      const json = res.data;
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      return json.data;
-    },
-
-    onSuccess: () => {
-      return queryClient.invalidateQueries({
-        queryKey: accountKeys.me(address || ""),
-      });
+  const res = await apiServerProxy<Result>({
+    pathname: "/v1/account",
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
     },
+    body: JSON.stringify(input),
   });
+
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
+
+  const json = res.data;
+
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
+
+  return json.data;
 }
 
 export function useUpdateNotifications() {
@@ -221,77 +208,61 @@ export function useUpdateNotifications() {
   });
 }
 
-export function useConfirmEmail() {
-  return useMutation({
-    mutationFn: async (input: ConfirmEmailInput) => {
-      type Result = {
-        error?: { message: string };
-        data: { team: Team; account: Account };
-      };
+export const verifyEmailClient = async (input: ConfirmEmailInput) => {
+  type Result = {
+    error?: { message: string };
+    data: { team: Team; account: Account };
+  };
 
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/account/confirmEmail",
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(input),
-      });
-
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
-
-      const json = res.data;
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      return json.data;
+  const res = await apiServerProxy<Result>({
+    pathname: "/v1/account/confirmEmail",
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
     },
+    body: JSON.stringify(input),
   });
-}
 
-export function useResendEmailConfirmation() {
-  const address = useActiveAccount()?.address;
-  const queryClient = useQueryClient();
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
 
-  return useMutation({
-    mutationFn: async () => {
-      type Result = {
-        error?: { message: string };
-        data: object;
-      };
+  const json = res.data;
 
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/account/resendEmailConfirmation",
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({}),
-      });
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
 
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
+  return json.data;
+};
 
-      const json = res.data;
+export const resendEmailClient = async () => {
+  type Result = {
+    error?: { message: string };
+    data: object;
+  };
 
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      return json.data;
-    },
-    onSuccess: () => {
-      return queryClient.invalidateQueries({
-        queryKey: accountKeys.me(address || ""),
-      });
+  const res = await apiServerProxy<Result>({
+    pathname: "/v1/account/resendEmailConfirmation",
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
     },
+    body: JSON.stringify({}),
   });
-}
+
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
+
+  const json = res.data;
+
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
+
+  return json.data;
+};
 
 export async function createProjectClient(
   teamId: string,

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -15,8 +15,6 @@ import invariant from "tiny-invariant";
 import type { EngineStatus } from "../../../app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table";
 import { engineKeys } from "../cache-keys";
 
-export type EngineTier = "STARTER" | "PREMIUM" | "ENTERPRISE";
-
 // Engine instances
 export type EngineInstance = {
   id: string;
@@ -24,6 +22,8 @@ export type EngineInstance = {
   name: string;
   url: string;
   lastAccessedAt: string;
+  isCloudHosted: boolean;
+  isPlanEngine: boolean;
   status:
     | "active"
     | "pending"

apps/dashboard/src/@3rdweb-sdk/react/hooks/useWalletNFTs.ts

@@ -5,6 +5,7 @@ import invariant from "tiny-invariant";
 export function useWalletNFTs(params: {
   chainId: number;
   walletAddress?: string;
+  isInsightSupported: boolean;
 }) {
   return useQuery({
     queryKey: ["walletNfts", params.chainId, params.walletAddress],
@@ -13,6 +14,7 @@ export function useWalletNFTs(params: {
       return getWalletNFTs({
         chainId: params.chainId,
         owner: params.walletAddress,
+        isInsightSupported: params.isInsightSupported,
       });
     },
     enabled: !!params.walletAddress,

apps/dashboard/src/app/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { getSDKTheme } from "app/components/sdk-component-theme";
+import { useV5DashboardChain } from "lib/v5-adapter";
+import { useTheme } from "next-themes";
+import { PayEmbed } from "thirdweb/react";
+
+export function UniversalBridgeEmbed({ chainId }: { chainId?: number }) {
+  const { theme } = useTheme();
+  const chain = useV5DashboardChain(chainId || 1);
+
+  return (
+    <PayEmbed
+      client={getThirdwebClient()}
+      payOptions={{
+        mode: "fund_wallet",
+        prefillBuy: {
+          chain,
+          amount: "0.01",
+        },
+      }}
+      theme={getSDKTheme(theme === "light" ? "light" : "dark")}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/(bridge)/bridge/page.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
+
+const title = "Universal Bridge: Swap, Bridge, and On-Ramp";
+const description =
+  "Swap, bridge, and on-ramp to any EVM chain with thirdweb's Universal Bridge.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+  },
+};
+
+export default async function RoutesPage({
+  searchParams,
+}: { searchParams: Record<string, string | string[]> }) {
+  const { chainId } = searchParams;
+  return (
+    <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center overflow-hidden border py-10">
+      <main className="container z-10 flex justify-center">
+        <UniversalBridgeEmbed chainId={chainId ? Number(chainId) : undefined} />
+      </main>
+
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        alt=""
+        src="/assets/login/background.svg"
+        className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
+      />
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/client/search.tsx

@@ -47,7 +47,7 @@ export const SearchInput: React.FC = () => {
     <div className="group relative w-full">
       <SearchIcon className="-translate-y-1/2 absolute top-[50%] left-3 size-4 text-muted-foreground" />
       <Input
-        placeholder="Search by token address or chain ID"
+        placeholder="Search with anything!"
         className="h-10 rounded-lg bg-card py-2 pl-9 lg:min-w-[300px]"
         defaultValue={searchParams?.get("query") || ""}
         onChange={(e) => handleSearch(e.target.value)}

apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/server/routelist-card.tsx

@@ -1,59 +1,42 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
-import { NATIVE_TOKEN_ADDRESS, defineChain, getContract } from "thirdweb";
+import { defineChain } from "thirdweb";
 import { getChainMetadata } from "thirdweb/chains";
-import { name } from "thirdweb/extensions/common";
 
 type RouteListCardProps = {
   originChainId: number;
   originTokenAddress: string;
-  originTokenIconUri: string | null;
+  originTokenIconUri?: string | null;
+  originTokenSymbol: string;
+  originTokenName: string;
   destinationChainId: number;
   destinationTokenAddress: string;
-  destinationTokenIconUri: string | null;
+  destinationTokenIconUri?: string | null;
+  destinationTokenSymbol: string;
+  destinationTokenName: string;
 };
 
 export async function RouteListCard({
   originChainId,
   originTokenAddress,
   originTokenIconUri,
+  originTokenName,
   destinationChainId,
   destinationTokenAddress,
   destinationTokenIconUri,
+  destinationTokenName,
 }: RouteListCardProps) {
   const [
     originChain,
-    originTokenName,
     destinationChain,
-    destinationTokenName,
     resolvedOriginTokenIconUri,
     resolvedDestinationTokenIconUri,
   ] = await Promise.all([
     // eslint-disable-next-line no-restricted-syntax
     getChainMetadata(defineChain(originChainId)),
-    originTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
-      ? "ETH"
-      : name({
-          contract: getContract({
-            address: originTokenAddress,
-            // eslint-disable-next-line no-restricted-syntax
-            chain: defineChain(originChainId),
-            client: getThirdwebClient(),
-          }),
-        }).catch(() => undefined),
     // eslint-disable-next-line no-restricted-syntax
     getChainMetadata(defineChain(destinationChainId)),
-    destinationTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
-      ? "ETH"
-      : name({
-          contract: getContract({
-            address: destinationTokenAddress,
-            // eslint-disable-next-line no-restricted-syntax
-            chain: defineChain(destinationChainId),
-            client: getThirdwebClient(),
-          }),
-        }).catch(() => undefined),
     originTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: originTokenIconUri,
@@ -78,17 +61,17 @@ export async function RouteListCard({
               <img
                 src={resolvedOriginTokenIconUri}
                 alt={originTokenAddress}
-                className="size-8 rounded-full bg-white"
+                className="size-8 rounded-full border border-muted-foreground"
               />
             ) : (
-              <div className="size-8 rounded-full bg-white/10" />
+              <div className="size-8 rounded-full bg-muted-foreground" />
             )}
             {resolvedDestinationTokenIconUri ? (
               // eslint-disable-next-line @next/next/no-img-element
               <img
                 src={resolvedDestinationTokenIconUri}
                 alt={destinationTokenAddress}
-                className="-translate-x-4 size-8 rounded-full bg-white ring-2 ring-card"
+                className="-translate-x-4 size-8 rounded-full border border-muted-foreground ring-2 ring-card"
               />
             ) : (
               <div className="-translate-x-4 size-8 rounded-full bg-muted-foreground ring-2 ring-card" />

apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/server/routelist-row.tsx

@@ -2,59 +2,41 @@ import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { TableCell, TableRow } from "@/components/ui/table";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
-import { NATIVE_TOKEN_ADDRESS, getContract } from "thirdweb";
 import { defineChain, getChainMetadata } from "thirdweb/chains";
-import { symbol } from "thirdweb/extensions/common";
 
 type RouteListRowProps = {
   originChainId: number;
   originTokenAddress: string;
-  originTokenIconUri: string | null;
+  originTokenIconUri?: string | null;
+  originTokenSymbol?: string;
+  originTokenName?: string;
   destinationChainId: number;
   destinationTokenAddress: string;
-  destinationTokenIconUri: string | null;
+  destinationTokenIconUri?: string | null;
+  destinationTokenSymbol?: string;
+  destinationTokenName?: string;
 };
 
 export async function RouteListRow({
   originChainId,
   originTokenAddress,
   originTokenIconUri,
+  originTokenSymbol,
   destinationChainId,
   destinationTokenAddress,
   destinationTokenIconUri,
+  destinationTokenSymbol,
 }: RouteListRowProps) {
   const [
     originChain,
-    originTokenSymbol,
     destinationChain,
-    destinationTokenSymbol,
     resolvedOriginTokenIconUri,
     resolvedDestinationTokenIconUri,
   ] = await Promise.all([
     // eslint-disable-next-line no-restricted-syntax
     getChainMetadata(defineChain(originChainId)),
-    originTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
-      ? "ETH"
-      : symbol({
-          contract: getContract({
-            address: originTokenAddress,
-            // eslint-disable-next-line no-restricted-syntax
-            chain: defineChain(originChainId),
-            client: getThirdwebClient(),
-          }),
-        }).catch(() => undefined),
     // eslint-disable-next-line no-restricted-syntax
     getChainMetadata(defineChain(destinationChainId)),
-    destinationTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
-      ? "ETH"
-      : symbol({
-          contract: getContract({
-            address: destinationTokenAddress,
-            // eslint-disable-next-line no-restricted-syntax
-            chain: defineChain(destinationChainId),
-            client: getThirdwebClient(),
-          }),
-        }).catch(() => undefined),
     originTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: originTokenIconUri,
@@ -80,7 +62,7 @@ export async function RouteListRow({
               <img
                 src={resolvedOriginTokenIconUri}
                 alt={originTokenAddress}
-                className="size-6 rounded-full bg-muted-foreground"
+                className="size-6 rounded-full border border-muted-foreground"
               />
             ) : (
               <div className="size-6 rounded-full bg-muted-foreground" />
@@ -115,7 +97,7 @@ export async function RouteListRow({
               <img
                 src={resolvedDestinationTokenIconUri}
                 alt={destinationTokenAddress}
-                className="size-6 rounded-full bg-muted-foreground"
+                className="size-6 rounded-full border border-muted-foreground"
               />
             ) : (
               <div className="size-6 rounded-full bg-muted-foreground" />

apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/server/routes-table.tsx

@@ -7,6 +7,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import type { Address } from "thirdweb";
+import { checksumAddress } from "thirdweb/utils";
 import { getRoutes } from "../../../utils";
 import { ChainlistPagination } from "../client/pagination";
 import { RouteListCard } from "../server/routelist-card";
@@ -34,28 +35,83 @@ async function getRoutesToRender(params: SearchParams) {
     originTokenAddress?: Address;
     destinationChainId?: number;
     destinationTokenAddress?: Address;
+    originTextQuery?: string;
+    destinationTextQuery?: string;
   }> = {};
 
   if (params.type === "origin" || typeof params.type === "undefined") {
     if (params.query?.startsWith("0x")) {
       filters.originTokenAddress = params.query as Address;
-    } else if (params.query) {
+    } else if (Number.isInteger(Number(params.query))) {
       filters.originChainId = Number(params.query);
+    } else if (params.query) {
+      filters.originTextQuery = params.query;
     }
   } else if (params.type === "destination") {
     if (params.query?.startsWith("0x")) {
       filters.destinationTokenAddress = params.query as Address;
-    } else if (params.query) {
+    } else if (Number.isInteger(Number(params.query))) {
       filters.destinationChainId = Number(params.query);
+    } else if (params.query) {
+      filters.destinationTextQuery = params.query;
     }
   }
   // Temporary, will update this after the /routes endpoint
-  filters.limit = 10_000;
-
-  const routes = await getRoutes(filters);
+  let routes = await getRoutes({ limit: 100_000 });
 
   const totalCount = routes.length;
 
+  if (filters.originChainId) {
+    routes = routes.filter(
+      (route) => route.originToken.chainId === filters.originChainId,
+    );
+  }
+  if (filters.originTokenAddress) {
+    const originTokenAddress = filters.originTokenAddress;
+    routes = routes.filter(
+      (route) =>
+        checksumAddress(route.originToken.address) ===
+        checksumAddress(originTokenAddress),
+    );
+  }
+  if (filters.destinationChainId) {
+    routes = routes.filter(
+      (route) => route.destinationToken.chainId === filters.destinationChainId,
+    );
+  }
+  if (filters.destinationTokenAddress) {
+    const destinationTokenAddress = filters.destinationTokenAddress;
+    routes = routes.filter(
+      (route) =>
+        checksumAddress(route.destinationToken.address) ===
+        checksumAddress(destinationTokenAddress),
+    );
+  }
+
+  if (filters.originTextQuery) {
+    const originTextQuery = filters.originTextQuery.toLowerCase();
+    routes = routes.filter((route) => {
+      return (
+        route.originToken.name.toLowerCase().includes(originTextQuery) ||
+        route.originToken.symbol.toLowerCase().includes(originTextQuery)
+      );
+    });
+  }
+
+  if (filters.destinationTextQuery) {
+    const destinationTextQuery = filters.destinationTextQuery.toLowerCase();
+    routes = routes.filter((route) => {
+      return (
+        route.destinationToken.name
+          .toLowerCase()
+          .includes(destinationTextQuery) ||
+        route.destinationToken.symbol
+          .toLowerCase()
+          .includes(destinationTextQuery)
+      );
+    });
+  }
+
   return {
     routesToRender: routes,
     totalCount,
@@ -107,9 +163,13 @@ export async function RoutesData(props: {
                     originChainId={route.originToken.chainId}
                     originTokenAddress={route.originToken.address}
                     originTokenIconUri={route.originToken.iconUri}
+                    originTokenSymbol={route.originToken.symbol}
+                    originTokenName={route.originToken.name}
                     destinationChainId={route.destinationToken.chainId}
                     destinationTokenAddress={route.destinationToken.address}
                     destinationTokenIconUri={route.destinationToken.iconUri}
+                    destinationTokenSymbol={route.destinationToken.symbol}
+                    destinationTokenName={route.destinationToken.name}
                   />
                 ))}
               </TableBody>
@@ -126,9 +186,13 @@ export async function RoutesData(props: {
                   originChainId={route.originToken.chainId}
                   originTokenAddress={route.originToken.address}
                   originTokenIconUri={route.originToken.iconUri}
+                  originTokenSymbol={route.originToken.symbol}
+                  originTokenName={route.originToken.name}
                   destinationChainId={route.destinationToken.chainId}
                   destinationTokenAddress={route.destinationToken.address}
                   destinationTokenIconUri={route.destinationToken.iconUri}
+                  destinationTokenSymbol={route.destinationToken.symbol}
+                  destinationTokenName={route.destinationToken.name}
                 />
               </li>
             ))}
@@ -146,13 +210,21 @@ export async function RoutesData(props: {
         out of{" "}
         {filteredCount !== totalCount ? (
           <>
-            <span className="text-accent-foreground">{filteredCount}</span>{" "}
+            <span className="text-accent-foreground">
+              {filteredCount.toLocaleString()}
+            </span>{" "}
             routes that match filters. (Total:{" "}
-            <span className="text-accent-foreground">{totalCount}</span>)
+            <span className="text-accent-foreground">
+              {totalCount.toLocaleString()}
+            </span>
+            )
           </>
         ) : (
           <>
-            <span className="text-accent-foreground">{totalCount}</span> routes.
+            <span className="text-accent-foreground">
+              {totalCount.toLocaleString()}
+            </span>{" "}
+            routes.
           </>
         )}
       </p>

apps/dashboard/src/app/(dashboard)/(bridge)/routes/page.tsx

@@ -22,7 +22,7 @@ export const metadata: Metadata = {
   },
 };
 
-export default async function ChainListPage(props: {
+export default async function RoutesPage(props: {
   searchParams: Promise<SearchParams>;
 }) {
   const authToken = await getAuthToken();

apps/dashboard/src/app/(dashboard)/(bridge)/types/route.ts

@@ -4,11 +4,15 @@ export type Route = {
   originToken: {
     address: Address;
     chainId: number;
-    iconUri: string;
+    iconUri?: string;
+    name: string;
+    symbol: string;
   };
   destinationToken: {
     address: Address;
     chainId: number;
-    iconUri: string;
+    iconUri?: string;
+    name: string;
+    symbol: string;
   };
 };

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

@@ -2,43 +2,18 @@ import "server-only";
 
 import { BRIDGE_URL, DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/env";
 import { getAuthToken } from "app/api/lib/getAuthToken";
-import type { Address } from "thirdweb";
 import type { Route } from "./types/route";
 
 export async function getRoutes({
   limit,
-  offset,
-  originChainId,
-  originTokenAddress,
-  destinationChainId,
-  destinationTokenAddress,
 }: {
   limit?: number;
-  offset?: number;
-  originChainId?: number;
-  originTokenAddress?: Address;
-  destinationChainId?: number;
-  destinationTokenAddress?: Address;
 } = {}) {
   const url = new URL(`${BRIDGE_URL}/v1/routes`);
   if (limit) {
     url.searchParams.set("limit", limit.toString());
   }
-  if (offset) {
-    url.searchParams.set("offset", offset.toString());
-  }
-  if (originChainId) {
-    url.searchParams.set("originChainId", originChainId.toString());
-  }
-  if (originTokenAddress) {
-    url.searchParams.set("originTokenAddress", originTokenAddress);
-  }
-  if (destinationChainId) {
-    url.searchParams.set("destinationChainId", destinationChainId.toString());
-  }
-  if (destinationTokenAddress) {
-    url.searchParams.set("destinationTokenAddress", destinationTokenAddress);
-  }
+  // It's faster to filter client side, doesn't seem to be a big performance boost to paginate/filter server side
   const token = await getAuthToken();
   const routesResponse = await fetch(url, {
     headers: token

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -52,7 +52,7 @@ import {
   useWalletBalance,
 } from "thirdweb/react";
 import { z } from "zod";
-import { isOnboardingComplete } from "../../../../../../login/onboarding/isOnboardingRequired";
+import { isAccountOnboardingComplete } from "../../../../../../login/onboarding/isOnboardingRequired";
 
 function formatTime(seconds: number) {
   const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
@@ -210,7 +210,7 @@ export function FaucetButton({
     );
   }
 
-  if (!isOnboardingComplete(twAccount)) {
+  if (!isAccountOnboardingComplete(twAccount)) {
     return (
       <Button asChild className="w-full">
         <Link

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/NextSteps.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { useTrack } from "hooks/analytics/useTrack";
+import { FileText } from "lucide-react";
+import Link from "next/link";
+import type { ChainMetadata } from "thirdweb/chains";
+import { SectionTitle } from "../server/SectionTitle";
+
+export default function NextSteps(props: { chain: ChainMetadata }) {
+  const { chain } = props;
+  const trackEvent = useTrack();
+
+  return (
+    <section>
+      <SectionTitle title="Next Steps" />
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+        <div className="relative flex gap-3 rounded-lg border bg-card p-4 pr-8 transition-colors hover:border-active-border">
+          <FileText className="mt-0.5 size-5 shrink-0" />
+          <div>
+            <h3 className="mb-1.5 font-medium">
+              <Link
+                href={
+                  "https://blog.thirdweb.com/supercharge-user-adoption-integrate-embedded-wallets-in-minutes/"
+                }
+                className="before:absolute before:inset-0"
+                target="_blank"
+                onClick={() =>
+                  trackEvent({
+                    category: "nextSteps",
+                    action: "click-inapp",
+                    label: "success",
+                    chain_id: chain.chainId,
+                  })
+                }
+              >
+                Create a login for {chain.name}
+              </Link>
+            </h3>
+            <p className="text-muted-foreground text-sm">
+              Supercharge User Adoption—Integrate In-App Wallets in Minutes
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -11,7 +11,7 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
 
   return (
     <section>
-      <SectionTitle title="Buy Funds" />
+      <SectionTitle title="Bridge" />
       <div className="flex justify-center rounded-lg border border-border bg-card px-4 py-10">
         <div className="flex max-w-[520px] flex-col items-center ">
           <div className="flex items-center">
@@ -28,21 +28,21 @@ 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
+            Bridge Funds to {sanitizedChainName}
           </h2>
 
           <div className="h-2" />
 
           <p className="max-w-[520px] px-4 text-center text-muted-foreground text-sm">
-            Instantly onramp, bridge & swap into {sanitizedChainName} with any
-            token.
+            Get {props.chain.nativeCurrency.symbol} on {sanitizedChainName} with
+            fiat or any token on another chain.
           </p>
 
           <div className="h-8" />
 
           <PayModalButton
             chainId={props.chain.chainId}
-            label={`Buy Funds on ${sanitizedChainName}`}
+            label={`Bridge to ${sanitizedChainName}`}
           />
 
           <div className="h-4" />
@@ -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)/[chain_id]/(chainPage)/layout.tsx

@@ -13,12 +13,18 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { ChevronDownIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { mapV4ChainToV5Chain } from "../../../../../contexts/map-chains";
-import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { getRawAccount } from "../../../../account/settings/getAccount";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "../../../../api/lib/getAuthToken";
+import { NebulaFloatingChatButton } from "../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";
 import { AddChainToWallet } from "./components/client/add-chain-to-wallet";
@@ -55,17 +61,58 @@ export default async function ChainPageLayout(props: {
 }) {
   const params = await props.params;
   const { children } = props;
-  const chain = await getChain(params.chain_id);
-  const authToken = await getAuthToken();
+  const [chain, authToken, account, accountAddress] = await Promise.all([
+    getChain(params.chain_id),
+    getAuthToken(),
+    getRawAccount(),
+    getAuthTokenWalletAddress(),
+  ]);
 
   if (params.chain_id !== chain.slug) {
     redirect(chain.slug);
   }
 
   const chainMetadata = await getChainMetadata(chain.chainId);
+  const client = getThirdwebClient(authToken ?? undefined);
+
+  const chainPromptPrefix = `\
+You are assisting users exploring the chain ${chain.name} (Chain ID: ${chain.chainId}). Provide concise insights into the types of applications and activities prevalent on this chain, such as DeFi protocols, NFT marketplaces, or gaming platforms. Highlight notable projects or trends without delving into technical details like consensus mechanisms or gas fees.
+Users may seek comparisons between ${chain.name} and other chains. Provide objective, succinct comparisons focusing on performance, fees, and ecosystem support. Refrain from transaction-specific advice unless requested.
+Provide users with an understanding of the unique use cases and functionalities that ${chain.name} supports. Discuss how developers leverage this chain for specific applications, such as scalable dApps, low-cost transactions, or specialized token standards, focusing on practical implementations.
+Users may be interested in utilizing thirdweb tools on ${chain.name}. Offer clear guidance on how thirdweb's SDKs, smart contract templates, and deployment tools integrate with this chain. Emphasize the functionalities enabled by thirdweb without discussing transaction execution unless prompted.
+Avoid transaction-related actions to be executed by the user unless inquired about.
+
+The following is the user's message:
+  `;
+
+  const examplePrompts: string[] = [
+    "What are users doing on this chain?",
+    "What are the most active contracts?",
+    "Why would I use this chain over others?",
+    "Can I deploy thirdweb contracts to this chain?",
+  ];
+
+  if (chain.chainId !== 1) {
+    examplePrompts.push("Can I bridge assets from Ethereum to this chain?");
+  }
 
   return (
     <>
+      <NebulaFloatingChatButton
+        authToken={authToken ?? undefined}
+        account={account}
+        label="Ask AI about this chain"
+        client={client}
+        nebulaParams={{
+          messagePrefix: chainPromptPrefix,
+          chainIds: [chain.chainId],
+          wallet: accountAddress ?? undefined,
+        }}
+        examplePrompts={examplePrompts.map((prompt) => ({
+          title: prompt,
+          message: prompt,
+        }))}
+      />
       <div className="flex h-14 border-border border-b pl-7">
         <Breadcrumb className="my-auto">
           <BreadcrumbList>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx

@@ -1,6 +1,7 @@
 import { CircleAlertIcon } from "lucide-react";
 import { getRawAccount } from "../../../../account/settings/getAccount";
 import { getChain, getChainMetadata } from "../../utils";
+import NextSteps from "./components/client/NextSteps";
 import { BuyFundsSection } from "./components/server/BuyFundsSection";
 import { ChainOverviewSection } from "./components/server/ChainOverviewSection";
 import { ClaimChainSection } from "./components/server/ClaimChainSection";
@@ -57,6 +58,8 @@ export default async function Page(props: {
       {chain.services.filter((s) => s.enabled).length > 0 && (
         <SupportedProductsSection services={chain.services} />
       )}
+      {/*Next Steps */}
+      <NextSteps chain={chain} />
 
       {/* Claim Chain */}
       {!chainMetadata && <ClaimChainSection />}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx

@@ -13,7 +13,6 @@ import { ListerOnly } from "@3rdweb-sdk/react/components/roles/lister-only";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
 import { isMoralisSupported } from "lib/wallet/nfts/moralis";
-import { useSimplehashSupport } from "lib/wallet/nfts/simpleHash";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
@@ -25,6 +24,7 @@ interface CreateListingButtonProps {
   createText?: string;
   type?: "direct-listings" | "english-auctions";
   twAccount: Account | undefined;
+  isInsightSupported: boolean;
 }
 
 const LISTING_MODES = ["Select NFT", "Manual"] as const;
@@ -34,6 +34,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
   type,
   contract,
   twAccount,
+  isInsightSupported,
   ...restButtonProps
 }) => {
   const address = useActiveAccount()?.address;
@@ -41,13 +42,12 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
   const [listingMode, setListingMode] =
     useState<(typeof LISTING_MODES)[number]>("Select NFT");
 
-  const simplehashQuery = useSimplehashSupport(contract.chain.id);
-
   const isSupportedChain =
     contract.chain.id &&
-    (simplehashQuery.data ||
+    (isInsightSupported ||
       isAlchemySupported(contract.chain.id) ||
       isMoralisSupported(contract.chain.id));
+
   return (
     <ListerOnly contract={contract}>
       <Sheet open={open} onOpenChange={setOpen}>
@@ -71,7 +71,6 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
                   name: mode,
                   isActive: mode === listingMode,
                   onClick: () => setListingMode(mode),
-                  isEnabled: true,
                 }))}
                 tabClassName="text-sm gap-2 !text-sm"
                 tabContainerClassName="gap-0.5"
@@ -84,6 +83,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
                   actionText={createText}
                   setOpen={setOpen}
                   mode={listingMode === "Select NFT" ? "automatic" : "manual"}
+                  isInsightSupported={isInsightSupported}
                 />
               </div>
             </>
@@ -96,6 +96,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
                 actionText={createText}
                 setOpen={setOpen}
                 mode="manual"
+                isInsightSupported={isInsightSupported}
               />
             </div>
           )}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

@@ -21,7 +21,6 @@ import { useAllChainsData } from "hooks/chains/allChains";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
 import { isMoralisSupported } from "lib/wallet/nfts/moralis";
-import { useSimplehashSupport } from "lib/wallet/nfts/simpleHash";
 import type { WalletNFT } from "lib/wallet/nfts/types";
 import { CircleAlertIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
@@ -87,6 +86,7 @@ type CreateListingsFormProps = {
   mode: "automatic" | "manual";
   type?: "direct-listings" | "english-auctions";
   twAccount: Account | undefined;
+  isInsightSupported: boolean;
 };
 
 const auctionTimes = [
@@ -106,16 +106,17 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
   setOpen,
   twAccount,
   mode,
+  isInsightSupported,
 }) => {
   const trackEvent = useTrack();
   const chainId = contract.chain.id;
   const { idToChain } = useAllChainsData();
   const network = idToChain.get(chainId);
   const [isFormLoading, setIsFormLoading] = useState(false);
-  const simplehashQuery = useSimplehashSupport(contract.chain.id);
+
   const isSupportedChain =
     chainId &&
-    (!!simplehashQuery.data ||
+    (isInsightSupported ||
       isAlchemySupported(chainId) ||
       isMoralisSupported(chainId));
 
@@ -124,7 +125,9 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
   const { data: walletNFTs, isPending: isWalletNFTsLoading } = useWalletNFTs({
     chainId,
     walletAddress: account?.address,
+    isInsightSupported,
   });
+
   const sendAndConfirmTx = useSendAndConfirmTransaction();
   const listingNotifications = useTxNotifications(
     "NFT listed Successfully",
@@ -202,6 +205,8 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
           owner: nft.owner,
           type: "ERC721",
           tokenURI: nft.tokenURI,
+          chainId: nft.chainId,
+          tokenAddress: nft.tokenAddress,
         };
       }
       return {
@@ -213,6 +218,8 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
         owner: nft.owner,
         type: "ERC1155",
         tokenURI: nft.tokenURI,
+        chainId: nft.chainId,
+        tokenAddress: nft.tokenAddress,
       };
     }) as WalletNFT[];
   }, [ownedNFTs, form]);

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx

@@ -10,10 +10,11 @@ import type {
   DirectListing,
   EnglishAuction,
 } from "thirdweb/extensions/marketplace";
-import { useActiveAccount } from "thirdweb/react";
+import { BuyDirectListingButton, useActiveAccount } from "thirdweb/react";
 
 import { CodeClient } from "@/components/ui/code/code.client";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { toast } from "sonner";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { CancelTab } from "./cancel-tab";
 import { LISTING_STATUS } from "./types";
@@ -141,11 +142,6 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
                   </GridItem>
                 </>
               )}
-
-              {/*
-                  Todo: Add a Buy button somewhere in this section once the Dashboard is fully migrated to v5 (?)
-                  Kien already shipped a prebuilt component for the Marketplace Buy Button in SDK v5
-                */}
             </SimpleGrid>
           </Card>
           {data?.asset.metadata.properties ? (
@@ -168,6 +164,27 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
             twAccount={twAccount}
           />
         )}
+
+        {!isOwner && renderData.status === "ACTIVE" && (
+          <BuyDirectListingButton
+            listingId={renderData.id}
+            contractAddress={renderData.assetContractAddress}
+            chain={contract.chain}
+            client={contract.client}
+            className="w-full"
+            quantity={1n}
+            onError={(error) => {
+              toast.error("Failed to buy listing", {
+                description: error.message,
+              });
+            }}
+            onTransactionConfirmed={() => {
+              toast.success("Listing bought successfully");
+            }}
+          >
+            Buy Listing
+          </BuyDirectListingButton>
+        )}
       </SheetContent>
     </Sheet>
   );

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.client.tsx

@@ -29,6 +29,7 @@ export function ContractDirectListingsPageClient(props: {
     <ContractDirectListingsPage
       contract={props.contract}
       twAccount={props.twAccount}
+      isInsightSupported={metadataQuery.data.isInsightSupported}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.tsx

@@ -8,17 +8,21 @@ import { DirectListingsTable } from "./components/table";
 interface ContractDirectListingsPageProps {
   contract: ThirdwebContract;
   twAccount: Account | undefined;
+  isInsightSupported: boolean;
 }
 
 export const ContractDirectListingsPage: React.FC<
   ContractDirectListingsPageProps
-> = ({ contract, twAccount }) => {
+> = ({ contract, twAccount, isInsightSupported }) => {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-row items-center justify-between">
-        <p className="text-lg">Contract Listings</p>
+        <h2 className="font-semibold text-2xl tracking-tight">
+          Direct Listings
+        </h2>
         <div className="flex flex-row gap-4">
           <CreateListingButton
+            isInsightSupported={isInsightSupported}
             contract={contract}
             type="direct-listings"
             createText="Create Direct Listing"

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/page.tsx

@@ -29,15 +29,18 @@ export default async function Page(props: {
     );
   }
 
-  const { isDirectListingSupported } = await getContractPageMetadata(
-    info.contract,
-  );
+  const { isDirectListingSupported, isInsightSupported } =
+    await getContractPageMetadata(info.contract);
 
   if (!isDirectListingSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return (
-    <ContractDirectListingsPage contract={info.contract} twAccount={account} />
+    <ContractDirectListingsPage
+      contract={info.contract}
+      twAccount={account}
+      isInsightSupported={isInsightSupported}
+    />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.client.tsx

@@ -29,6 +29,7 @@ export function ContractEnglishAuctionsPageClient(props: {
     <ContractEnglishAuctionsPage
       contract={props.contract}
       twAccount={props.twAccount}
+      isInsightSupported={metadataQuery.data.isInsightSupported}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.tsx

@@ -8,21 +8,25 @@ import { EnglishAuctionsTable } from "./components/table";
 interface ContractEnglishAuctionsProps {
   contract: ThirdwebContract;
   twAccount: Account | undefined;
+  isInsightSupported: boolean;
 }
 
 export const ContractEnglishAuctionsPage: React.FC<
   ContractEnglishAuctionsProps
-> = ({ contract, twAccount }) => {
+> = ({ contract, twAccount, isInsightSupported }) => {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-row items-center justify-between">
-        <p className="text-lg">Contract Auctions</p>
+        <h2 className="font-semibold text-2xl tracking-tight">
+          English Auctions
+        </h2>
         <div className="flex flex-row gap-4">
           <CreateListingButton
             contract={contract}
             type="english-auctions"
             createText="Create English Auction"
             twAccount={twAccount}
+            isInsightSupported={isInsightSupported}
           />
         </div>
       </div>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/page.tsx

@@ -30,9 +30,8 @@ export default async function Page(props: {
     );
   }
 
-  const { isEnglishAuctionSupported } = await getContractPageMetadata(
-    info.contract,
-  );
+  const { isEnglishAuctionSupported, isInsightSupported } =
+    await getContractPageMetadata(info.contract);
 
   if (!isEnglishAuctionSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
@@ -42,6 +41,7 @@ export default async function Page(props: {
     <ContractEnglishAuctionsPage
       contract={info.contract}
       twAccount={twAccount}
+      isInsightSupported={isInsightSupported}
     />
   );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx

@@ -1,14 +1,7 @@
-import {
-  Flex,
-  GridItem,
-  SimpleGrid,
-  Skeleton,
-  SkeletonText,
-  useBreakpointValue,
-} from "@chakra-ui/react";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useMemo } from "react";
 import { type NFT, ZERO_ADDRESS } from "thirdweb";
-import { Card, TrackedLink, type TrackedLinkProps } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 
 type NFTWithContract = NFT & { contractAddress: string; chainId: number };
@@ -20,18 +13,20 @@ const dummyMetadata: (idx: number) => NFTWithContract = (idx) => ({
   tokenURI: `1-0x123-${idx}`,
   metadata: {
     name: "Loading...",
-    description: "lorem ipsum loading sit amet",
+    description:
+      "lorem ipsum loading sit amet consectetur adipisicing elit. Quisquam, quos.",
     id: BigInt(idx || 0),
     uri: `1-0x123-${idx}`,
   },
   owner: `0x_fake_${idx}`,
   type: "ERC721",
   supply: 1n,
+  tokenAddress: ZERO_ADDRESS,
 });
 
 interface NFTCardsProps {
   nfts: Array<NFTWithContract>;
-  trackingCategory: TrackedLinkProps["category"];
+  trackingCategory: string;
   isPending: boolean;
   allNfts?: boolean;
 }
@@ -42,61 +37,82 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
   isPending,
   allNfts,
 }) => {
-  const isMobile = useBreakpointValue({ base: true, md: false });
-
   const dummyData = useMemo(() => {
     return Array.from({
-      length: allNfts ? nfts.length : isMobile ? 2 : 3,
+      length: allNfts ? nfts.length : 3,
     }).map((_, idx) => dummyMetadata(idx));
-  }, [nfts.length, isMobile, allNfts]);
+  }, [nfts.length, allNfts]);
 
   return (
-    <SimpleGrid
-      gap={{ base: 3, md: 6 }}
-      columns={allNfts ? { base: 2, md: 4 } : { base: 2, md: 3 }}
-    >
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
       {(isPending ? dummyData : nfts).map((token) => {
         const tokenId = token.id.toString();
 
         return (
-          <GridItem
+          <div
             key={`${token.chainId}_${token.contractAddress}_${tokenId}`}
-            as={TrackedLink}
-            category={trackingCategory}
-            href={`/${token.chainId}/${token.contractAddress}/nfts/${tokenId}`}
-            _hover={{ opacity: 0.75, textDecoration: "none" }}
+            className="hover:-translate-y-0.5 relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg bg-background duration-200 hover:scale-[1.01]"
           >
-            <Card p={0} h="full">
-              <div className="relative aspect-square w-full overflow-hidden rounded-xl">
-                <Skeleton isLoaded={!isPending}>
-                  <NFTMediaWithEmptyState
-                    metadata={token.metadata}
-                    requireInteraction
-                    width="100%"
-                    height="100%"
-                  />
-                </Skeleton>
-              </div>
-              <Flex p={4} pb={3} gap={1} direction="column">
-                <Skeleton w={!isPending ? "100%" : "50%"} isLoaded={!isPending}>
-                  <h2 className="font-semibold tracking-tight">
-                    {token.metadata.name}
-                  </h2>
-                </Skeleton>
-                <SkeletonText isLoaded={!isPending}>
-                  <p className="line-clamp-3 text-muted-foreground text-sm">
-                    {token.metadata.description ? (
-                      token.metadata.description
-                    ) : (
-                      <i>No description</i>
-                    )}
-                  </p>
-                </SkeletonText>
-              </Flex>
-            </Card>
-          </GridItem>
+            {/* border */}
+            <div className="absolute inset-0 rounded-lg border border-border" />
+
+            {/* image */}
+            <div className="relative aspect-square w-full overflow-hidden">
+              <SkeletonContainer
+                skeletonData={token.metadata}
+                loadedData={isPending ? undefined : token.metadata}
+                className="h-full w-full rounded-lg"
+                render={(v) => {
+                  return (
+                    <NFTMediaWithEmptyState
+                      metadata={v}
+                      requireInteraction
+                      width="100%"
+                      height="100%"
+                    />
+                  );
+                }}
+              />
+            </div>
+
+            <div className="p-4">
+              {/* title */}
+              <SkeletonContainer
+                skeletonData={token.metadata}
+                loadedData={isPending ? undefined : token.metadata}
+                className="mb-2"
+                render={(v) => {
+                  return (
+                    <h2 className="font-semibold tracking-tight">
+                      <TrackedLinkTW
+                        category={trackingCategory}
+                        label="view_nft"
+                        href={`/${token.chainId}/${token.contractAddress}/nfts/${tokenId}`}
+                        className="before:absolute before:inset-0"
+                      >
+                        {v.name}
+                      </TrackedLinkTW>
+                    </h2>
+                  );
+                }}
+              />
+
+              {/* Description */}
+              <SkeletonContainer
+                skeletonData={token.metadata}
+                loadedData={isPending ? undefined : token.metadata}
+                render={(v) => {
+                  return (
+                    <p className="line-clamp-3 text-muted-foreground text-sm">
+                      {v.description ? v.description : <i>No description</i>}
+                    </p>
+                  );
+                }}
+              />
+            </div>
+          </div>
         );
       })}
-    </SimpleGrid>
+    </div>
   );
 };

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/hooks.ts

@@ -55,7 +55,7 @@ type Options =
     };
 
 export async function getClaimPhasesInLegacyFormat(
-  options: BaseTransactionOptions<Options>,
+  options: BaseTransactionOptions<Options> & { isMultiPhase: boolean },
 ): Promise<CombinedClaimCondition[]> {
   const conditions = await (async () => {
     switch (options.type) {
@@ -64,7 +64,10 @@ export async function getClaimPhasesInLegacyFormat(
       case "erc721":
         return ERC721Ext.getClaimConditions(options);
       case "erc1155":
-        return ERC1155Ext.getClaimConditions(options);
+        return ERC1155Ext.getClaimConditions({
+          ...options,
+          singlePhaseDrop: !options.isMultiPhase,
+        });
     }
   })();
 
@@ -126,7 +129,7 @@ export async function getClaimPhasesInLegacyFormat(
 type PhaseInput = z.input<typeof LegacyClaimConditionInputSchema>;
 
 export function setClaimPhasesTx(
-  baseOptions: BaseTransactionOptions<Options>,
+  baseOptions: BaseTransactionOptions<Options> & { isSinglePhase?: boolean },
   rawPhases: PhaseInput[],
 ) {
   const phases = rawPhases.map((phase) => {
@@ -172,6 +175,7 @@ export function setClaimPhasesTx(
         contract: baseOptions.contract,
         phases,
         tokenId: baseOptions.tokenId,
+        singlePhaseDrop: baseOptions.isSinglePhase,
       });
   }
 }