Version Packages (#8240 )

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Engine SDK updates (#8238 )
2025-10-11 19:31:58 +07:00 · 2025-10-11 19:24:30 +07:00 · 2025-10-11 07:42:22 +07:00 · 2025-10-11 07:37:27 +07:00 · 2025-10-09 22:14:06 +00:00 · 2025-10-09 14:19:19 -07:00
3529 changed files with 177678 additions and 99284 deletions
@@ -63,7 +63,7 @@ jobs:
      - name: Setup Biome
        uses: biomejs/setup-biome@a9763ed3d2388f5746f9dc3e1a55df7f4609bc89 # v2.5.1
        with:
-          version: 2.0.4 
+          version: 2.0.6

      - run: pnpm lint

@@ -2,7 +2,7 @@ name: Auto Author Assign

 on:
  pull_request:
-    types: [opened, reopened, ready_for_review, draft]
+    types: [opened, reopened, ready_for_review]

 permissions:
  pull-requests: write
@@ -15,37 +15,150 @@

 <p align="center"><strong>All-in-one web3 SDK for Browser, Node and Mobile apps</strong></p>

-## Features
+## Core Package

- Support for React & React-Native
- First party support for [Embedded Wallets](https://portal.thirdweb.com/connect/embedded-wallet/overview) (social/email login)
- First party support for [Account Abstraction](https://portal.thirdweb.com/connect/account-abstraction/overview)
- Instant connection to any chain with RPC Edge integration
- Integrated IPFS upload/download
- UI Components for connection, transactions, nft rendering
- High level contract extensions for interacting with common standards
+#### [`thirdweb`](./packages/thirdweb/README.md)
+
+The main SDK package providing all-in-one web3 functionality for Browser, Node, and Mobile applications.
+
+```bash
+npm install thirdweb
+```
+
+**Features:**
+
+- Type-safe contract and transaction APIs
+- In-app wallets with social/email login
+- Account abstraction (ERC4337/EIP7702) support
+- 500+ external wallets supported
+- Built in infra (RPC, bundler, paymaster, indexer)
+- React hooks and UI components
 - Automatic ABI resolution
+- IPFS upload/download
+- Cross-platform support (Web, React Native)

-## Library Comparison
+### Documentation

-|                                           | thirdweb | Wagmi + Viem       | Ethers@6 |
-| ----------------------------------------- | -------- | ------------------ | -------- |
-| Type safe contract API                    | ✅       | ✅                 | ✅       |
-| Type safe wallet API                      | ✅       | ✅                 | ✅       |
-| EVM utils                                 | ✅       | ✅                 | ✅       |
-| RPC for any EVM                           | ✅       | ⚠️ public RPC only | ❌       |
-| Automatic ABI Resolution                  | ✅       | ❌                 | ❌       |
-| IPFS Upload/Download                      | ✅       | ❌                 | ❌       |
-| Embedded wallet (email/ social login)     | ✅       | ⚠️ via 3rd party   | ❌       |
-| Account abstraction (ERC4337) support     | ✅       | ⚠️ via 3rd party   | ❌       |
-| Web3 wallet connectors                    | ✅       | ✅                 | ❌       |
-| Local wallet creation                     | ✅       | ✅                 | ✅       |
-| Auth (SIWE)                               | ✅       | ✅                 | ❌       |
-| Extensions functions for common standards | ✅       | ✅                 | ❌       |
-| React Hooks                               | ✅       | ✅                 | ❌       |
-| React UI components                       | ✅       | ❌                 | ❌       |
-| React Native Hooks                        | ✅       | ✅                 | ❌       |
-| React Native UI Components                | ✅       | ❌                 | ❌       |
+Visit the [developer portal](https://portal.thirdweb.com) for full documentation.
+
+### 🚀 Quick Start
+
+#### For React Applications
+
+```bash
+npm install thirdweb
+```
+
+```typescript
+import { createThirdwebClient } from "thirdweb";
+import { ConnectButton, useActiveAccount } from "thirdweb/react";
+
+const client = createThirdwebClient({
+  clientId: "YOUR_CLIENT_ID",
+});
+
+function App() {
+  const account = useActiveAccount();
+  console.log("Connected as", account?.address);
+
+  return <ConnectButton client={client} />;
+}
+```
+
+For React Native Applications, you'll also need to install the `@thirdweb-dev/react-native-adapter` package and import it at app startup for polyfills.
+
+#### For Backend Applications
+
+```bash
+npm install thirdweb
+```
+
+```typescript
+import { createThirdwebClient, Engine } from "thirdweb";
+
+const client = createThirdwebClient({
+  secretKey: "YOUR_SECRET_KEY",
+});
+
+const wallet = Engine.serverWallet({
+  client,
+  address: "0x...",
+});
+
+const transaction = transfer({
+  contract: getContract({
+    client,
+    address: "0x...", // token contract
+    chain: defineChain(1),
+  }),
+  to: "0x...", // recipient
+  amount: "0.01", // amount in tokens
+});
+
+await wallet.enqueueTransaction({
+  transaction,
+});
+```
+
+## Adapters
+
+#### [`@thirdweb-dev/react-native-adapter`](./packages/react-native-adapter/README.md)
+
+Required polyfills and configuration for running the thirdweb SDK in React Native applications.
+
+```bash
+npm install @thirdweb-dev/react-native-adapter
+```
+
+#### [`@thirdweb-dev/wagmi-adapter`](./packages/wagmi-adapter/README.md)
+
+Integration layer for using thirdweb's in-app wallets with wagmi.
+
+```bash
+npm install @thirdweb-dev/wagmi-adapter
+```
+
+## Type safe API wrappers
+
+#### [`@thirdweb-dev/api`](./packages/api/README.md)
+
+TypeScript SDK for thirdweb's API, combining all of thirdweb products.
+
+```bash
+npm install @thirdweb-dev/api
+```
+
+#### [`@thirdweb-dev/engine`](./packages/engine/README.md)
+
+TypeScript SDK for Engine, thirdweb's backend onchain executor service.
+
+```bash
+npm install @thirdweb-dev/engine
+```
+
+#### [`@thirdweb-dev/insight`](./packages/insight/README.md)
+
+TypeScript SDK for Insight, thirdweb's multichain indexer service.
+
+```bash
+npm install @thirdweb-dev/insight
+```
+
+#### [`@thirdweb-dev/vault-sdk`](./packages/vault-sdk/README.md)
+
+SDK for interacting with Vault, thirdweb's secure key management service.
+
+```bash
+npm install @thirdweb-dev/vault-sdk
+```
+
+#### [`@thirdweb-dev/nebula`](./packages/nebula/README.md)
+
+TypeScript SDK for Nebula, thirdweb's AI agent service.
+
+```bash
+npm install @thirdweb-dev/nebula
+```

 ## Contributing

@@ -55,9 +168,12 @@ See our [open source page](https://thirdweb.com/open-source) for more informatio

 ## Additional Resources

- [Documentation](https://portal.thirdweb.com/typescript/v5)
+- [Dashboard](https://thirdweb.com/login)
+- [Documentation](https://portal.thirdweb.com/)
 - [Templates](https://thirdweb.com/templates)
 - [YouTube](https://www.youtube.com/c/thirdweb)
+- [X/Twitter](https://x.com/thirdweb)
+- [Telegram](https://t.me/officialthirdweb)

 ## Support

@@ -1,29 +1,22 @@
-#
 # Public (client)
-#
-
-# API authorized domain
-# not required to build, defaults to prod
-NEXT_PUBLIC_THIRDWEB_DOMAIN="localhost:3000"
+# ------------------------------------------------------------------------

 # API host. For local development, please use "https://api.thirdweb-dev.com"
 # otherwise: "https://api.thirdweb.com"
+# local host - http://127.0.0.1:3005
 NEXT_PUBLIC_THIRDWEB_API_HOST="https://api.thirdweb-dev.com"

 # Bridge API. For local development, please use "https://bridge.thirdweb-dev.com"
 # otherwise: "https://bridge.thirdweb.com"
 NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST="https://bridge.thirdweb-dev.com"

-# Paper API host
+# in-app wallet host
 NEXT_PUBLIC_THIRDWEB_EWS_API_HOST="https://ews.thirdweb-dev.com"

-# thirdweb local api host
-# NEXT_PUBLIC_THIRDWEB_API_HOST="http://127.0.0.1:3005"
-
-# Client ID
-# Get the client id from https://thirdweb.com/create-api-key and set it here,
+# Client ID - Required
+# Get the client id from https://thirdweb.com/create-api-key and set it here, and also set DASHBOARD_SECRET_KEY below
 # make sure to allow localhost:3000 in the allowed origins
-NEXT_PUBLIC_DASHBOARD_CLIENT_ID="<replace_me_with_your_client_id>"
+NEXT_PUBLIC_DASHBOARD_CLIENT_ID=""

 # IPFS gateway url
 NEXT_PUBLIC_IPFS_GATEWAY_URL="https://{clientId}.thirdwebstorage-dev.com/ipfs/{cid}/{path}"
@@ -37,64 +30,39 @@ NEXT_PUBLIC_TYPESENSE_CONTRACT_API_KEY=

 # posthog API key
 # - not required for prod/staging
-NEXT_PUBLIC_POSTHOG_API_KEY="ignored"
+NEXT_PUBLIC_POSTHOG_KEY=""

-# Stripe Customer portal
-NEXT_PUBLIC_STRIPE_KEY=
+# required for server wallet management
+NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
+NEXT_PUBLIC_ENGINE_CLOUD_URL=""
+
+
+# Demo Engine - required for showing demo engine page
+NEXT_PUBLIC_DEMO_ENGINE_URL=""

-NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID=

-#
 # Private (server)
-#
-# Get the secret key from https://thirdweb.com/create-api-key and set it here, Make sure to allow localhost:3000 in the allowed origins
+# ------------------------------------------------------------------------
+
+# Get the secret key from https://thirdweb.com/create-api-key and set it here and also set NEXT_PUBLIC_DASHBOARD_CLIENT_ID above,
+# Make sure to allow localhost:3000 in the allowed origins
 DASHBOARD_SECRET_KEY="<replace_me_with_your_secret_key>"

-# Client id for api routes
+# Client id for api routes - required for contract OG image generation
 API_ROUTES_CLIENT_ID=

-# <moralis.io API key (used for api routes for token balances and wallet NFTs)
-# - not required to build (unless using wallet NFTs and token balances)>
-MORALIS_API_KEY=
-
-# alchemy.com API key (used for wallet NFTS)
-# - cannot be restricted to IP/domain because vercel has no stable IPs and it happens during build & runtime api route call
-# - not required to build (unless testing wallet NFTs)>
-SSR_ALCHEMY_KEY=
-
-
-# Hubspot Access Token (used for contact us form)
-# - not required to build (unless testing contact us form)>
-HUBSPOT_ACCESS_TOKEN=
-
-# Upload server url
-NEXT_PUBLIC_DASHBOARD_UPLOAD_SERVER="https://storage.thirdweb-preview.com"
-
-# Unthread variables - only required for submitting the support form in /support
-UNTHREAD_API_KEY=""
-UNTHREAD_TRIAGE_CHANNEL_ID=""
-UNTHREAD_EMAIL_INBOX_ID=""
-UNTHREAD_FREE_TIER_ID=""
-UNTHREAD_GROWTH_TIER_ID=""
-UNTHREAD_PRO_TIER_ID=""
-
-# Demo Engine
-NEXT_PUBLIC_DEMO_ENGINE_URL=""
-
 # API server secret (required for thirdweb.com SIWE login). Copy from Vercel.
 API_SERVER_SECRET=""

-# Used for the Faucet page (/<chain_id>)
+# Used in faucet on chain page (/<chain-id>) and login page (/login) - turnstile is disabled in localhost development
 NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
 TURNSTILE_SECRET_KEY=""
+
 REDIS_URL=""

 ANALYTICS_SERVICE_URL=""

-
 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
 STRIPE_SECRET_KEY=""
-
-# required for server wallet management
-NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
-NEXT_PUBLIC_ENGINE_CLOUD_URL=""
+GROWTH_PLAN_SKU=""
+PAYMENT_METHOD_CONFIGURATION=""
@@ -10,13 +10,6 @@ module.exports = {
    "plugin:storybook/recommended",
  ],
  overrides: [
-    // disable restricted imports in chakra
-    {
-      files: "src/chakra/**/*",
-      rules: {
-        "no-restricted-imports": ["off"],
-      },
-    },
    // allow direct PostHog imports inside analytics helpers
    {
      files: "src/@/analytics/**/*",
@@ -91,60 +84,6 @@ module.exports = {
      "error",
      {
        paths: [
-          {
-            // these are provided by chakra folder, so we don't want to import them from chakra directly
-            importNames: [
-              "Card",
-              "Button",
-              "Checkbox",
-              "Badge",
-              "Drawer",
-              "Heading",
-              "Text",
-              "FormLabel",
-              "FormHelperText",
-              "FormErrorMessage",
-              "MenuGroup",
-              "VStack",
-              "HStack",
-              "AspectRatio",
-              "useToast",
-              "useClipboard",
-              "Badge",
-              "Stack",
-              // also the types
-              "ButtonProps",
-              "BadgeProps",
-              "DrawerProps",
-              "HeadingProps",
-              "TextProps",
-              "FormLabelProps",
-              "HelpTextProps",
-              "MenuGroupProps",
-              "MenuItemProps",
-              "AspectRatioProps",
-              "BadgeProps",
-              "StackProps",
-            ],
-            message:
-              'import component from "chakra" folder instead if you have to use chakra component, But use shadcn component otherwise',
-            name: "@chakra-ui/react",
-          },
-          {
-            message:
-              "Import from `@chakra-ui/react` instead of `@chakra-ui/layout`.",
-            name: "@chakra-ui/layout",
-          },
-          {
-            message:
-              "Import from `@chakra-ui/react` instead of `@chakra-ui/button`.",
-            name: "@chakra-ui/button",
-          },
-          {
-            message:
-              "Import from `@chakra-ui/react` instead of `@chakra-ui/menu`.",
-            name: "@chakra-ui/menu",
-          },
          {
            importNames: ["useRouter"],
            message:
@@ -156,6 +95,36 @@ module.exports = {
              'Import "posthog-js" directly only within the analytics helpers ("src/@/analytics/*"). Use the exported helpers from "@/analytics/track" elsewhere.',
            name: "posthog-js",
          },
+          {
+            importNames: ["useSendTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead',
+            name: "thirdweb/react",
+          },
+          {
+            importNames: ["useSendAndConfirmTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead',
+            name: "thirdweb/react",
+          },
+          {
+            importNames: ["sendTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead if used in react component',
+            name: "thirdweb",
+          },
+          {
+            importNames: ["sendAndConfirmTransaction"],
+            message:
+              'Use `import { useSendAndConfirmTx } from "@/hooks/useSendTx";` instead if used in react component',
+            name: "thirdweb",
+          },
+        ],
+        patterns: [
+          {
+            group: ["**/../@/**"],
+            message: "Use absolute imports instead. Example: '@/foo/bar..'",
+          },
        ],
      },
    ],
@@ -20,11 +20,6 @@ const config: StorybookConfig = {
    name: getAbsolutePath("@storybook/nextjs"),
    options: {},
  },
-  refs: {
-    "@chakra-ui/react": {
-      disable: true,
-    },
-  },
  staticDirs: ["../public"],
  features: {
    experimentalRSC: true,
@@ -1,14 +1,13 @@
 import type { Preview } from "@storybook/nextjs";
-import "../src/global.css";
+import "@workspace/ui/global.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Button } from "@workspace/ui/components/button";
 import { MoonIcon, SunIcon } from "lucide-react";
-import { ThemeProvider, useTheme } from "next-themes";
 import { Inter as interFont } from "next/font/google";
-// biome-ignore lint/style/useImportType: <explanation>
-import React from "react";
-import { useEffect } from "react";
+import { ThemeProvider, useTheme } from "next-themes";
+// biome-ignore lint/style/useImportType: ok
+import React, { useEffect } from "react";
 import { Toaster } from "sonner";
-import { Button } from "../src/@/components/ui/button";

 const queryClient = new QueryClient();

@@ -69,9 +68,7 @@ const preview: Preview = {

 export default preview;

-function StoryLayout(props: {
-  children: React.ReactNode;
-}) {
+function StoryLayout(props: { children: React.ReactNode }) {
  const { setTheme, theme } = useTheme();

  useEffect(() => {
@@ -1,4 +1,4 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
  "extends": "//"
 }
@@ -9,17 +9,21 @@ module.exports = [
  // -- build category
  "/wallets",
  "/account-abstraction",
-  "/universal-bridge",
+  "/payments",
+  "/payments/x402",
  "/auth",
  "/in-app-wallets",
  "/transactions",
  // -- end build category
-  // -- storage
-  "/storage",
-  // -- nebula
-  "/nebula",
-  // --insight
+
+  // -- scale category
+  "/rpc",
  "/insight",
+  "/storage",
+  // -- end scale category
+
+  // -- ai
+  "/ai",
  // -- contracts
  "/contracts",
  "/contracts/modular-contracts",
@@ -59,4 +63,7 @@ module.exports = [
  // -- universal bridge landing pages --
  "/universal-bridge-regions/:region_slug",
  "/enterprise",
+  "/token",
+  "/vault",
+  "/monetize/bridge",
 ];
@@ -8,10 +8,19 @@
  ],
  "ignoreBinaries": ["only-allow"],
  "ignoreDependencies": [
+    "@thirdweb-dev/api",
    "@thirdweb-dev/service-utils",
    "@thirdweb-dev/vault-sdk",
+    "thirdweb",
    "@types/color",
-    "fast-xml-parser"
+    "fast-xml-parser",
+    "@workspace/ui",
+    "tailwindcss-animate",
+    "@radix-ui/react-tooltip",
+    "shiki",
+    "react-children-utilities",
+    "react-markdown",
+    "remark-gfm"
  ],
  "next": true,
  "project": ["src/**"]
@@ -9,10 +9,10 @@ const ContentSecurityPolicy = `
  img-src * data: blob:;
  media-src * data: blob:;
  object-src 'none';
-  style-src 'self' 'unsafe-inline' vercel.live;
+  style-src 'self' 'unsafe-inline' vercel.live us.posthog.com;
  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 googletagmanager.com us-assets.i.posthog.com edit.framer.com;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com challenges.cloudflare.com googletagmanager.com us-assets.i.posthog.com edit.framer.com framer.com googletagmanager.com;
  connect-src * data: blob:;
  worker-src 'self' blob:;
  block-all-mixed-content;
@@ -115,9 +115,7 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
 const FRAMER_ADDITIONAL_LANGUAGES = ["es"];

 const baseNextConfig: NextConfig = {
-  compiler: {
-    emotion: true,
-  },
+  transpilePackages: ["@workspace/ui"],
  eslint: {
    ignoreDuringBuilds: true,
  },
@@ -199,7 +197,6 @@ const baseNextConfig: NextConfig = {
      ]),
    ];
  },
-  serverExternalPackages: ["pino-pretty"],
 };

 function getConfig(): NextConfig {
@@ -208,35 +205,29 @@ function getConfig(): NextConfig {
    const withBundleAnalyzer = require("@next/bundle-analyzer")({
      enabled: process.env.ANALYZE === "true",
    });
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { withPlausibleProxy } = require("next-plausible");
+
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    const { withSentryConfig } = require("@sentry/nextjs");
    return withBundleAnalyzer(
-      withPlausibleProxy({
-        customDomain: "https://pl.thirdweb.com",
-        scriptName: "pl",
-      })(
-        withSentryConfig(
-          {
-            ...baseNextConfig,
-            // @ts-expect-error - this is a valid option
-            webpack: (config) => {
-              if (config.cache) {
-                config.cache = Object.freeze({
-                  type: "memory",
-                });
-              }
-              config.module = {
-                ...config.module,
-                exprContextCritical: false,
-              };
-              // Important: return the modified config
-              return config;
-            },
+      withSentryConfig(
+        {
+          ...baseNextConfig,
+          // @ts-expect-error - this is a valid option
+          webpack: (config) => {
+            if (config.cache) {
+              config.cache = Object.freeze({
+                type: "memory",
+              });
+            }
+            config.module = {
+              ...config.module,
+              exprContextCritical: false,
+            };
+            // Important: return the modified config
+            return config;
          },
-          SENTRY_OPTIONS,
-        ),
+        },
+        SENTRY_OPTIONS,
      ),
    );
  }
@@ -1,16 +1,12 @@
 {
  "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
-    "@chakra-ui/styled-system": "^2.9.2",
-    "@chakra-ui/theme-tools": "^2.1.2",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
    "@hookform/resolvers": "^3.9.1",
    "@marsidev/react-turnstile": "^1.1.0",
    "@radix-ui/react-accordion": "^1.2.11",
    "@radix-ui/react-alert-dialog": "^1.1.14",
    "@radix-ui/react-avatar": "^1.1.10",
    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
    "@radix-ui/react-dialog": "1.1.14",
    "@radix-ui/react-dropdown-menu": "^2.1.15",
    "@radix-ui/react-hover-card": "^1.1.14",
@@ -23,46 +19,45 @@
    "@radix-ui/react-slot": "^1.2.3",
    "@radix-ui/react-switch": "^1.2.5",
    "@radix-ui/react-tooltip": "1.2.7",
-    "@scalar/api-reference-react": "^0.6.19",
-    "@sentry/nextjs": "9.29.0",
+    "@sentry/nextjs": "9.34.0",
    "@shazow/whatsabi": "0.22.2",
-    "@tanstack/react-query": "5.80.7",
+    "@stripe/react-stripe-js": "4.0.2",
+    "@stripe/stripe-js": "7.9.0",
+    "@tanstack/react-query": "5.81.5",
    "@tanstack/react-table": "^8.21.3",
+    "@thirdweb-dev/api": "workspace:*",
    "@thirdweb-dev/service-utils": "workspace:*",
    "@thirdweb-dev/vault-sdk": "workspace:*",
-    "@vercel/functions": "2.1.0",
+    "@vercel/functions": "2.2.2",
    "@vercel/og": "^0.6.8",
+    "@workspace/ui": "workspace:*",
    "abitype": "1.0.8",
-    "chakra-react-select": "^4.7.6",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "color": "5.0.0",
    "compare-versions": "^6.1.0",
    "date-fns": "4.1.0",
    "fast-xml-parser": "^5.2.5",
-    "framer-motion": "12.17.0",
+    "fetch-event-stream": "0.1.5",
    "fuse.js": "7.1.0",
    "input-otp": "^1.4.1",
    "ioredis": "^5.6.1",
    "ipaddr.js": "^2.2.0",
-    "lucide-react": "0.514.0",
-    "next": "15.3.3",
-    "next-plausible": "^3.12.4",
+    "lucide-react": "0.525.0",
+    "next": "15.3.5",
    "next-themes": "^0.4.6",
    "nextjs-toploader": "^1.6.12",
    "nuqs": "^2.4.3",
-    "p-limit": "^6.2.0",
+    "ogl": "^1.0.11",
    "papaparse": "^5.5.3",
    "pluralize": "^8.0.0",
-    "posthog-js": "1.252.0",
-    "prettier": "3.5.3",
-    "qrcode": "^1.5.3",
+    "posthog-js": "1.256.1",
+    "prettier": "3.6.2",
    "react": "19.1.0",
    "react-children-utilities": "^2.10.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "19.1.0",
    "react-dropzone": "^14.3.8",
-    "react-error-boundary": "^5.0.0",
+    "react-error-boundary": "6.0.0",
    "react-hook-form": "7.55.0",
    "react-markdown": "10.1.0",
    "react-table": "^7.8.0",
@@ -70,8 +65,8 @@
    "remark-gfm": "4.0.1",
    "responsive-rsc": "0.0.7",
    "server-only": "^0.0.1",
-    "shiki": "1.27.0",
-    "sonner": "2.0.5",
+    "shiki": "3.12.0",
+    "sonner": "2.0.6",
    "spdx-correct": "^3.2.0",
    "stripe": "17.7.0",
    "swagger-ui-react": "^5.24.1",
@@ -81,24 +76,22 @@
    "tiny-invariant": "^1.3.3",
    "use-debounce": "^10.0.5",
    "vaul": "^1.1.2",
-    "zod": "3.25.62"
+    "zod": "3.25.75"
  },
  "devDependencies": {
-    "@biomejs/biome": "2.0.4",
-    "@chakra-ui/cli": "^2.4.1",
-    "@chromatic-com/storybook": "4.0.0",
-    "@next/bundle-analyzer": "15.3.3",
-    "@next/eslint-plugin-next": "15.3.3",
-    "@playwright/test": "1.53.0",
-    "@storybook/addon-docs": "9.0.8",
-    "@storybook/addon-links": "9.0.8",
-    "@storybook/addon-onboarding": "9.0.8",
-    "@storybook/nextjs": "9.0.8",
+    "@biomejs/biome": "2.0.6",
+    "@chromatic-com/storybook": "4.0.1",
+    "@next/bundle-analyzer": "15.3.5",
+    "@next/eslint-plugin-next": "15.3.5",
+    "@playwright/test": "1.53.2",
+    "@storybook/addon-docs": "9.0.15",
+    "@storybook/addon-links": "9.0.15",
+    "@storybook/addon-onboarding": "9.0.15",
+    "@storybook/nextjs": "9.0.15",
    "@types/color": "4.2.0",
    "@types/node": "22.14.1",
    "@types/papaparse": "^5.3.16",
    "@types/pluralize": "^0.0.33",
-    "@types/qrcode": "^1.5.5",
    "@types/react": "19.1.8",
    "@types/react-dom": "19.1.6",
    "@types/react-table": "^7.7.20",
@@ -107,15 +100,15 @@
    "@typescript-eslint/eslint-plugin": "7.14.1",
    "@typescript-eslint/parser": "7.14.1",
    "autoprefixer": "^10.4.21",
-    "checkly": "5.6.0",
+    "checkly": "6.0.1",
    "eslint": "8.57.0",
    "eslint-config-biome": "1.9.4",
    "eslint-plugin-react-compiler": "19.1.0-rc.2",
-    "eslint-plugin-storybook": "9.0.8",
+    "eslint-plugin-storybook": "9.0.15",
    "knip": "5.60.2",
    "next-sitemap": "^4.2.3",
-    "postcss": "8.5.5",
-    "storybook": "9.0.8",
+    "postcss": "8.5.6",
+    "storybook": "9.0.15",
    "tailwindcss": "3.4.17",
    "typescript": "5.8.3"
  },
@@ -128,12 +121,10 @@
    "dev": "next dev --turbopack",
    "fix": "biome check ./src --fix && eslint ./src --fix",
    "format": "biome format ./src --write",
-    "gen:theme-typings": "chakra-cli tokens src/chakra/theme/index.ts",
    "knip": "knip",
    "lint": "biome check ./src && knip && eslint ./src",
    "playwright": "playwright test",
    "postbuild": "next-sitemap",
-    "postinstall": "pnpm run gen:theme-typings",
    "preinstall": "npx only-allow pnpm",
    "start": "next start",
    "storybook": "storybook dev -p 6006",
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {},
-    tailwindcss: {},
-  },
-};
@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";
@@ -1,2 +0,0 @@
-name,description,image,animation_url,external_url,background_color,youtube_url,additional,properties,can be,added
-Token 0 Name,Token 0 Description,ipfs://ipfsHash/0,ipfs://ipfsHash/0,https://thirdweb.com,#0098EE,,every,row,is a ,property
@@ -1,4 +0,0 @@
-name,description,image,animation_url,external_url,background_color,youtube_url,additional,properties,can be,added
-Token 0 Name,Token 0 Description,0.png,0.mp4,https://thirdweb.com,#0098EE,,every,row,is a ,property
-Token 1 Name,Token 1 Description,0.png,0.mp4,https://thirdweb.com,#0098EE,,every,row,is a ,property
-Token 2 Name,Token 2 Description,0.png,0.mp4,https://thirdweb.com,#0098EE,,every,row,is a ,property
@@ -1,2 +0,0 @@
-name,description,external_url,background_color,youtube_url,additional,properties,can be,added
-Token 0 Name,Token 0 Description,https://thirdweb.com,#0098EE,,every,row,is a ,property
@@ -1,3 +0,0 @@
-address,maxClaimable
-0x0000000000000000000000000000000000000000,2
-0x000000000000000000000000000000000000dEaD,5
@@ -1,3 +0,0 @@
-address,maxClaimable,price,currencyAddress
-0x0000000000000000000000000000000000000000,2,0.1,0x0000000000000000000000000000000000000000
-0x000000000000000000000000000000000000dEaD,5,2.5,0x0000000000000000000000000000000000000000
@@ -1,3 +0,0 @@
-address
-0x0000000000000000000000000000000000000000
-0x000000000000000000000000000000000000dEaD
@@ -66,15 +66,20 @@ const projectRoute = "/team/:team_slug/:project_slug";

 const projectPageRedirects = [
  {
-    destination: `${projectRoute}/universal-bridge/:path*`,
+    destination: `${projectRoute}/payments/:path*`,
    permanent: false,
    source: `${projectRoute}/connect/pay/:path*`,
  },
  {
-    destination: `${projectRoute}/universal-bridge/:path*`,
+    destination: `${projectRoute}/payments/:path*`,
    permanent: false,
    source: `${projectRoute}/connect/universal-bridge/:path*`,
  },
+  {
+    destination: `${projectRoute}/payments/:path*`,
+    permanent: false,
+    source: `${projectRoute}/universal-bridge/:path*`,
+  },
  {
    destination: `${projectRoute}/account-abstraction/:path*`,
    permanent: false,
@@ -106,9 +111,27 @@ const projectPageRedirects = [
    source: `${projectRoute}/nebula/:path*`,
  },
  {
-    source: `${projectRoute}/connect/analytics`,
    destination: `${projectRoute}`,
    permanent: false,
+    source: `${projectRoute}/connect/analytics`,
+  },
+];
+
+const teamPageRedirects = [
+  {
+    destination: "/team/:team_slug/~/billing/:path*",
+    permanent: false,
+    source: "/team/:team_slug/~/settings/billing/:path*",
+  },
+  {
+    destination: "/team/:team_slug/~/billing/invoices/:path*",
+    permanent: false,
+    source: "/team/:team_slug/~/settings/invoices/:path*",
+  },
+  {
+    destination: "/team/:team_slug/~/billing",
+    permanent: false,
+    source: "/team/:team_slug/~/settings/credits",
  },
 ];

@@ -309,13 +332,6 @@ async function redirects() {
      permanent: false,
      source: "/solutions/chains",
    },
-    // redirect /rpc to portal
-    {
-      destination:
-        "https://portal.thirdweb.com/infrastructure/rpc-edge/overview",
-      permanent: false,
-      source: "/rpc-edge",
-    },
    // redirect /sdk to portal
    {
      destination: "https://portal.thirdweb.com/connect/blockchain-api",
@@ -364,12 +380,22 @@ async function redirects() {
      permanent: false,
      source: "/template/:slug",
    },
-    // redirect /connect/pay to /universal-bridge
+    // redirect /connect/pay to /payments
    {
-      destination: "/universal-bridge",
-      permanent: false,
+      destination: "/payments",
+      permanent: true,
      source: "/connect/pay",
    },
+    {
+      destination: "/payments",
+      permanent: true,
+      source: "/universal-bridge",
+    },
+    {
+      destination: "/payments/:slug",
+      permanent: true,
+      source: "/universal-bridge/:slug",
+    },
    // PREVIOUS CAMPAIGNS
    {
      destination: "/",
@@ -405,7 +431,7 @@ async function redirects() {
      source: "/connect/account-abstraction",
    },
    {
-      destination: "/universal-bridge",
+      destination: "/payments",
      permanent: false,
      source: "/connect/universal-bridge",
    },
@@ -424,8 +450,35 @@ async function redirects() {
      permanent: false,
      source: "/engine",
    },
+    {
+      destination: "/rpc",
+      permanent: false,
+      source: "/rpc-edge",
+    },
+    {
+      destination: "/payments",
+      permanent: false,
+      source: "/universal-bridge",
+    },
+    // redirect /nebula to /ai
+    {
+      destination: "/ai",
+      permanent: false,
+      source: "/nebula",
+    },
    ...legacyDashboardToTeamRedirects,
    ...projectPageRedirects,
+    ...teamPageRedirects,
+    {
+      source: "/support/:path*",
+      destination: "/team/~/~/support",
+      permanent: false,
+    },
+    {
+      source: "/routes",
+      destination: "/tokens",
+      permanent: false,
+    },
  ];
 }

@@ -1,6 +1,6 @@
 "use server";

-import { getRawAccount } from "../../app/(app)/account/settings/getAccount";
+import { getRawAccount } from "@/api/account/get-account";

 export async function getRawAccountAction() {
  return getRawAccount();
@@ -12,7 +12,7 @@ import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import { API_SERVER_SECRET } from "@/constants/server-envs";
 import { isVercel } from "@/utils/vercel";
-import { verifyTurnstileToken } from "./verifyTurnstileToken";
+import { verifyTurnstileToken } from "../../app/login/verifyTurnstileToken";

 export async function getLoginPayload(
  params: GenerateLoginPayloadParams,
@@ -1,7 +1,10 @@
 "use server";
+import "server-only";

 import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import type { ChainInfraSKU } from "@/types/billing";
+import { getAbsoluteUrl } from "@/utils/vercel";

 export async function reSubscribePlan(options: {
  teamId: string;
@@ -14,7 +17,10 @@ export async function reSubscribePlan(options: {
  }

  const res = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${options.teamId}/checkout/resubscribe-plan`,
+    new URL(
+      `/v1/teams/${options.teamId}/checkout/resubscribe-plan`,
+      NEXT_PUBLIC_THIRDWEB_API_HOST,
+    ),
    {
      body: JSON.stringify({}),
      headers: {
@@ -35,3 +41,83 @@ export async function reSubscribePlan(options: {
    status: 200,
  };
 }
+
+export async function getChainInfraCheckoutURL(options: {
+  teamSlug: string;
+  skus: ChainInfraSKU[];
+  chainId: number;
+  annual: boolean;
+}) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      error: "You are not logged in",
+      status: "error",
+    } as const;
+  }
+
+  const res = await fetch(
+    new URL(
+      `/v1/teams/${options.teamSlug}/checkout/create-link`,
+      NEXT_PUBLIC_THIRDWEB_API_HOST,
+    ),
+    {
+      body: JSON.stringify({
+        annual: options.annual,
+        baseUrl: getAbsoluteUrl(),
+        chainId: options.chainId,
+        skus: options.skus,
+      }),
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    },
+  );
+  if (!res.ok) {
+    const text = await res.text();
+    console.error("Failed to create checkout link", text, res.status);
+    switch (res.status) {
+      case 402: {
+        return {
+          error:
+            "You have outstanding invoices, please pay these first before re-subscribing.",
+          status: "error",
+        } as const;
+      }
+      case 429: {
+        return {
+          error: "Too many requests, please try again later.",
+          status: "error",
+        } as const;
+      }
+      case 403: {
+        return {
+          error: "You are not authorized to deploy infrastructure.",
+          status: "error",
+        } as const;
+      }
+      default: {
+        return {
+          error: "An unknown error occurred, please try again later.",
+          status: "error",
+        } as const;
+      }
+    }
+  }
+
+  const json = await res.json();
+  if (!json.result) {
+    return {
+      error: "An unknown error occurred, please try again later.",
+      status: "error",
+    } as const;
+  }
+
+  return {
+    data: json.result as string,
+    status: "success",
+  } as const;
+}
@@ -1,89 +0,0 @@
-"use server";
-import { isAddress, toTokens, ZERO_ADDRESS } from "thirdweb";
-import { getWalletBalance } from "thirdweb/wallets";
-import { MORALIS_API_KEY } from "@/constants/server-envs";
-import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { defineDashboardChain } from "@/lib/defineDashboardChain";
-
-type BalanceQueryResponse = Array<{
-  balance: string;
-  decimals: number;
-  name?: string;
-  symbol: string;
-  token_address: string;
-  display_balance: string;
-}>;
-
-export async function getTokenBalancesFromMoralis(params: {
-  contractAddress: string;
-  chainId: number;
-}): Promise<
-  | { data: BalanceQueryResponse; error: undefined }
-  | {
-      data: undefined;
-      error: string;
-    }
-> {
-  const { contractAddress, chainId } = params;
-
-  if (!isAddress(contractAddress)) {
-    return {
-      data: undefined,
-      error: "invalid address",
-    };
-  }
-
-  const getNativeBalance = async (): Promise<BalanceQueryResponse> => {
-    // eslint-disable-next-line no-restricted-syntax
-    const chain = defineDashboardChain(chainId, undefined);
-    const balance = await getWalletBalance({
-      address: contractAddress,
-      chain,
-      client: serverThirdwebClient,
-    });
-    return [
-      {
-        balance: balance.value.toString(),
-        decimals: balance.decimals,
-        display_balance: toTokens(balance.value, balance.decimals),
-        name: "Native Token",
-        symbol: balance.symbol,
-        token_address: ZERO_ADDRESS,
-      },
-    ];
-  };
-
-  const getTokenBalances = async (): Promise<BalanceQueryResponse> => {
-    const _chain = encodeURIComponent(`0x${chainId?.toString(16)}`);
-    const _address = encodeURIComponent(contractAddress);
-    const tokenBalanceEndpoint = `https://deep-index.moralis.io/api/v2/${_address}/erc20?chain=${_chain}`;
-
-    const resp = await fetch(tokenBalanceEndpoint, {
-      headers: {
-        "x-api-key": MORALIS_API_KEY,
-      },
-      method: "GET",
-    });
-
-    if (!resp.ok) {
-      resp.body?.cancel();
-      return [];
-    }
-    const json = await resp.json();
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    return json.map((balance: any) => ({
-      ...balance,
-      display_balance: toTokens(BigInt(balance.balance), balance.decimals),
-    }));
-  };
-
-  const [nativeBalance, tokenBalances] = await Promise.all([
-    getNativeBalance(),
-    getTokenBalances(),
-  ]);
-
-  return {
-    data: [...nativeBalance, ...tokenBalances],
-    error: undefined,
-  };
-}
@@ -1,210 +0,0 @@
-"use server";
-
-import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
-import { MORALIS_API_KEY } from "@/constants/server-envs";
-import {
-  generateAlchemyUrl,
-  transformAlchemyResponseToNFT,
-} from "@/lib/wallet/nfts/alchemy";
-import {
-  generateMoralisUrl,
-  transformMoralisResponseToNFT,
-} from "@/lib/wallet/nfts/moralis";
-import type { WalletNFT } from "@/lib/wallet/nfts/types";
-import { getVercelEnv } from "@/utils/vercel";
-import { isAlchemySupported } from "../lib/wallet/nfts/isAlchemySupported";
-import { isMoralisSupported } from "../lib/wallet/nfts/isMoralisSupported";
-
-type WalletNFTApiReturn =
-  | { result: WalletNFT[]; error?: undefined }
-  | { result?: undefined; error: string };
-
-export async function getWalletNFTs(params: {
-  chainId: number;
-  owner: string;
-  isInsightSupported: boolean;
-}): Promise<WalletNFTApiReturn> {
-  const { chainId, owner } = params;
-
-  if (params.isInsightSupported) {
-    const response = await getWalletNFTsFromInsight({ chainId, owner });
-
-    if (!response.ok) {
-      return {
-        error: response.error,
-      };
-    }
-
-    return { result: response.data };
-  }
-
-  if (isAlchemySupported(chainId)) {
-    const url = generateAlchemyUrl({ chainId, owner });
-
-    const response = await fetch(url, {
-      next: {
-        revalidate: 10, // cache for 10 seconds
-      },
-    });
-    if (response.status >= 400) {
-      return { error: response.statusText };
-    }
-    try {
-      const parsedResponse = await response.json();
-      const result = await transformAlchemyResponseToNFT(parsedResponse, owner);
-
-      return { error: undefined, result };
-    } catch (err) {
-      console.error("Error fetching NFTs", err);
-      return { error: "error parsing response" };
-    }
-  }
-
-  if (isMoralisSupported(chainId) && MORALIS_API_KEY) {
-    const url = generateMoralisUrl({ chainId, owner });
-
-    const response = await fetch(url, {
-      headers: {
-        "X-API-Key": MORALIS_API_KEY,
-      },
-      method: "GET",
-      next: {
-        revalidate: 10, // cache for 10 seconds
-      },
-    });
-
-    if (response.status >= 400) {
-      return { error: response.statusText };
-    }
-
-    try {
-      const parsedResponse = await response.json();
-      const result = await transformMoralisResponseToNFT(
-        await parsedResponse,
-        owner,
-        chainId,
-      );
-
-      return { result };
-    } catch (err) {
-      console.error("Error fetching NFTs", err);
-      return { error: "error parsing response" };
-    }
-  }
-
-  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": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
-    },
-  });
-
-  if (!response.ok) {
-    const errorMessage = await response.text();
-    return {
-      error: errorMessage,
-      ok: false,
-    };
-  }
-
-  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 = {
-      chainId: nft.contract.chain_id,
-      contractAddress: nft.contract.address,
-      id: nft.token_id,
-      metadata: {
-        animation_url: isDev
-          ? nft.extra_metadata.animation_original_url?.replace(
-              "ipfscdn.io/",
-              "thirdwebstorage-dev.com/",
-            )
-          : nft.extra_metadata.animation_original_url,
-        background_color: nft.background_color,
-        description: nft.description,
-        external_url: nft.external_url,
-        image: isDev
-          ? nft.image_url.replace("ipfscdn.io/", "thirdwebstorage-dev.com/")
-          : nft.image_url,
-        name: nft.name,
-        uri: isDev
-          ? nft.metadata_url.replace("ipfscdn.io/", "thirdwebstorage-dev.com/")
-          : nft.metadata_url,
-      },
-      owner: params.owner,
-      supply: nft.balance,
-      tokenAddress: nft.contract.address,
-      tokenURI: nft.metadata_url,
-      type: nft.token_type === "erc721" ? "ERC721" : "ERC1155",
-    };
-
-    return walletNFT;
-  });
-
-  return {
-    data: walletNFTs,
-    ok: true,
-  };
-}
@@ -0,0 +1,70 @@
+"use server";
+
+import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
+import type { ProjectWalletSummary } from "@/lib/server/project-wallet";
+
+interface VaultWalletListItem {
+  id: string;
+  address: string;
+  metadata?: {
+    label?: string;
+    projectId?: string;
+    teamId?: string;
+    type?: string;
+  } | null;
+}
+
+export async function listProjectServerWallets(params: {
+  managementAccessToken: string;
+  projectId: string;
+  pageSize?: number;
+}): Promise<ProjectWalletSummary[]> {
+  const { managementAccessToken, projectId, pageSize = 100 } = params;
+
+  if (!managementAccessToken || !NEXT_PUBLIC_THIRDWEB_VAULT_URL) {
+    return [];
+  }
+
+  try {
+    const vaultClient = await createVaultClient({
+      baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
+    });
+
+    const response = await listEoas({
+      client: vaultClient,
+      request: {
+        auth: {
+          accessToken: managementAccessToken,
+        },
+        options: {
+          page: 0,
+          // @ts-expect-error - Vault SDK expects snake_case pagination fields
+          page_size: pageSize,
+        },
+      },
+    });
+
+    if (!response.success || !response.data?.items) {
+      return [];
+    }
+
+    const items = response.data.items as VaultWalletListItem[];
+
+    return items
+      .filter((item) => {
+        return (
+          item.metadata?.projectId === projectId &&
+          (!item.metadata?.type || item.metadata.type === "server-wallet")
+        );
+      })
+      .map<ProjectWalletSummary>((item) => ({
+        id: item.id,
+        address: item.address,
+        label: item.metadata?.label ?? undefined,
+      }));
+  } catch (error) {
+    console.error("Failed to list project server wallets", error);
+    return [];
+  }
+}
@@ -0,0 +1,74 @@
+"use server";
+
+import { configure, sendTokens } from "@thirdweb-dev/api";
+import { THIRDWEB_API_HOST } from "@/constants/urls";
+
+configure({
+  override: {
+    baseUrl: THIRDWEB_API_HOST,
+  },
+});
+
+export async function sendProjectWalletTokens(options: {
+  walletAddress: string;
+  recipientAddress: string;
+  chainId: number;
+  quantityWei: string;
+  publishableKey: string;
+  teamId: string;
+  tokenAddress?: string;
+  secretKey: string;
+  vaultAccessToken?: string;
+}) {
+  const {
+    walletAddress,
+    recipientAddress,
+    chainId,
+    quantityWei,
+    publishableKey,
+    teamId,
+    tokenAddress,
+    secretKey,
+    vaultAccessToken,
+  } = options;
+
+  if (!secretKey) {
+    return {
+      error: "A project secret key is required to send funds.",
+      ok: false,
+    } as const;
+  }
+
+  const response = await sendTokens({
+    body: {
+      chainId,
+      from: walletAddress,
+      recipients: [
+        {
+          address: recipientAddress,
+          quantity: quantityWei,
+        },
+      ],
+      ...(tokenAddress ? { tokenAddress } : {}),
+    },
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": publishableKey,
+      "x-secret-key": secretKey,
+      "x-team-id": teamId,
+      ...(vaultAccessToken ? { "x-vault-access-token": vaultAccessToken } : {}),
+    },
+  });
+
+  if (response.error || !response.data) {
+    return {
+      error: response.error || "Failed to submit transfer request.",
+      ok: false,
+    } as const;
+  }
+
+  return {
+    ok: true,
+    transactionIds: response.data.result?.transactionIds ?? [],
+  } as const;
+}
@@ -14,6 +14,7 @@ type ProxyActionParams = {
  body?: string;
  headers?: Record<string, string>;
  parseAsText?: boolean;
+  signal?: AbortSignal;
 };

 type ProxyActionResult<T> =
@@ -1,8 +1,13 @@
 import "server-only";

+import { cookies, headers } from "next/headers";
 import Stripe from "stripe";
-import type { Team } from "@/api/team";
-import { STRIPE_SECRET_KEY } from "@/constants/server-envs";
+import type { Team } from "@/api/team/get-team";
+import {
+  GROWTH_PLAN_SKU,
+  PAYMENT_METHOD_CONFIGURATION,
+  STRIPE_SECRET_KEY,
+} from "@/constants/server-envs";

 let existingStripe: Stripe | undefined;

@@ -72,3 +77,64 @@ export async function getStripeBalance(customerId: string) {
  // Stripe returns a positive balance for credits, so we need to divide by -100 to get the actual balance (as long as the balance is not 0)
  return customer.balance === 0 ? 0 : customer.balance / -100;
 }
+
+export async function fetchClientSecret(team: Team) {
+  "use server";
+  const origin = (await headers()).get("origin");
+  const stripe = getStripe();
+  const customerId = team.stripeCustomerId;
+
+  if (!customerId) {
+    throw new Error("No customer ID found");
+  }
+
+  // try to get the gclid cookie
+  const gclid = (await cookies()).get("gclid")?.value;
+
+  // Create Checkout Sessions from body params.
+  const session = await stripe.checkout.sessions.create({
+    ui_mode: "embedded",
+    line_items: [
+      {
+        // Provide the exact Price ID (for example, price_1234) of
+        // the product you want to sell
+        price: GROWTH_PLAN_SKU,
+        quantity: 1,
+      },
+    ],
+    mode: "subscription",
+
+    return_url: `${origin}/get-started/team/${team.slug}/select-plan?session_id={CHECKOUT_SESSION_ID}`,
+    automatic_tax: { enabled: true },
+    allow_promotion_codes: true,
+    customer: customerId,
+    customer_update: {
+      address: "auto",
+    },
+    payment_method_collection: "always",
+    payment_method_configuration: PAYMENT_METHOD_CONFIGURATION,
+    subscription_data: {
+      trial_period_days: 14,
+      trial_settings: {
+        end_behavior: {
+          missing_payment_method: "cancel",
+        },
+      },
+      // if gclid exists, set it as a metadata field so we can attribute the conversion later
+      metadata: gclid ? { gclid } : undefined,
+    },
+  });
+
+  if (!session.client_secret) {
+    throw new Error("No client secret found");
+  }
+
+  return session.client_secret;
+}
+
+export async function getStripeSessionById(sessionId: string) {
+  const session = await getStripe().checkout.sessions.retrieve(sessionId, {
+    expand: ["line_items", "payment_intent"],
+  });
+  return session;
+}
@@ -5,7 +5,7 @@ import "server-only";
 import { randomBytes } from "crypto";
 import { format } from "date-fns";
 import { getAuthToken } from "@/api/auth-token";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";

 export async function createTeam(options?: { name?: string; slug?: string }) {
@@ -1,6 +1,8 @@
+"use client";
 import posthog from "posthog-js";

-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
+import type { ProductSKU } from "../types/billing";

 // ----------------------------
 // CONTRACTS
@@ -22,6 +24,7 @@ export function reportContractDeployed(properties: {
  publisher: string | undefined;
  contractName: string | undefined;
  deploymentType?: "asset";
+  is_testnet: boolean | undefined;
 }) {
  posthog.capture("contract deployed", properties);
 }
@@ -38,6 +41,7 @@ export function reportContractDeployed(properties: {
 export function reportContractDeployFailed(properties: {
  errorMessage: string;
  chainId: number;
+  is_testnet: boolean | undefined;
  publisher: string | undefined;
  contractName: string | undefined;
 }) {
@@ -79,33 +83,6 @@ export function reportOnboardingStarted() {
  posthog.capture("onboarding started");
 }

-/**
- * ### Why do we need to report this event?
- * - To track the number of teams that select a paid plan during onboarding
- * - To know **which** plan was selected
- *
- * ### Who is responsible for this event?
- * @jnsdls
- *
- */
-export function reportOnboardingPlanSelected(properties: {
-  plan: Team["billingPlan"];
-}) {
-  posthog.capture("onboarding plan selected", properties);
-}
-
-/**
- * ### Why do we need to report this event?
- * - To track the number of teams that skip the plan-selection step during onboarding
- *
- * ### Who is responsible for this event?
- * @jnsdls
- *
- */
-export function reportOnboardingPlanSelectionSkipped() {
-  posthog.capture("onboarding plan selection skipped");
-}
-
 /**
 * ### Why do we need to report this event?
 * - To track the number of teams that invite members during onboarding
@@ -159,6 +136,18 @@ export function reportOnboardingMembersUpsellPlanSelected(properties: {
  posthog.capture("onboarding members upsell plan selected", properties);
 }

+/**
+ * ### Why do we need to report this event?
+ * - To track the number of teams that completed the team member step during onboarding
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ *
+ */
+export function reportTeamMemberStepCompleted() {
+  posthog.capture("onboarding members completed");
+}
+
 /**
 * ### Why do we need to report this event?
 * - To track the number of teams that completed onboarding
@@ -184,9 +173,7 @@ export function reportOnboardingCompleted() {
 *
 */
 export function reportFaucetUsed(properties: { chainId: number }) {
-  posthog.capture("faucet used", {
-    chainId: properties.chainId,
-  });
+  posthog.capture("faucet used", properties);
 }

 // ----------------------------
@@ -210,19 +197,18 @@ export function reportChainConfigurationAdded(properties: {
    decimals: number;
  };
 }) {
-  posthog.capture("chain configuration added", {
-    chainId: properties.chainId,
-    chainName: properties.chainName,
-    nativeCurrency: properties.nativeCurrency,
-    rpcURLs: properties.rpcURLs,
-  });
+  posthog.capture("chain configuration added", properties);
 }

 // ----------------------------
 // ASSETS
 // ----------------------------

-type AssetContractType = "DropERC20" | "DropERC1155" | "DropERC721";
+type AssetContractType =
+  | "DropERC20"
+  | "DropERC1155"
+  | "DropERC721"
+  | "ERC20Asset";

 /**
 * ### Why do we need to report this event?
@@ -234,19 +220,120 @@ type AssetContractType = "DropERC20" | "DropERC1155" | "DropERC721";
 */
 export function reportAssetBuySuccessful(properties: {
  chainId: number;
-  contractType: AssetContractType;
+  contractType: AssetContractType | undefined;
  assetType: "nft" | "coin";
+  is_testnet: boolean | undefined;
 }) {
-  posthog.capture("asset buy successful", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-  });
+  posthog.capture("asset buy successful", properties);
+}
+
+type TokenSwapParams = {
+  buyTokenChainId: number;
+  buyTokenAddress: string;
+  sellTokenChainId: number;
+  sellTokenAddress: string;
+  pageType: "asset" | "bridge" | "chain";
+};
+
+type TokenBuyParams = {
+  buyTokenChainId: number | undefined;
+  buyTokenAddress: string | undefined;
+  pageType: "asset" | "bridge" | "chain";
+};
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of successful token buys
+ * - To track which tokens are being bought the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuySuccessful(properties: TokenBuyParams) {
+  posthog.capture("token buy successful", properties);
 }

 /**
 * ### Why do we need to report this event?
- * - To track number of failed asset purchases from the token page
+ * - To track number of failed token buys
+ * - To track which token buys are failing
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuyFailed(properties: TokenBuyParams) {
+  posthog.capture("token buy failed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of cancelled token buys
+ * - To track which token buys are being cancelled
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuyCancelled(properties: TokenBuyParams) {
+  posthog.capture("token buy cancelled", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of successful token swaps
+ * - To track which tokens are being swapped the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenSwapSuccessful(properties: TokenSwapParams) {
+  posthog.capture("token swap successful", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track impressions of the swap widget
+ * - To create a funnel "swap widget shown" -> "swap widget successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportSwapWidgetShown(properties: {
+  pageType: "asset" | "bridge" | "chain";
+}) {
+  posthog.capture("swap widget shown", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of failed token swaps
+ * - To track which tokens are being swapped the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenSwapFailed(
+  properties: TokenSwapParams & {
+    errorMessage: string;
+  },
+) {
+  posthog.capture("token swap failed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of cancelled token swaps
+ * - To track which tokens are being swapped the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenSwapCancelled(properties: TokenSwapParams) {
+  posthog.capture("token swap cancelled", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of failed asset purchases
 * - To track the errors that users encounter when trying to purchase an asset
 *
 * ### Who is responsible for this event?
@@ -254,36 +341,33 @@ export function reportAssetBuySuccessful(properties: {
 */
 export function reportAssetBuyFailed(properties: {
  chainId: number;
-  contractType: AssetContractType;
+  is_testnet: boolean | undefined;
+  contractType: AssetContractType | undefined;
  assetType: "nft" | "coin";
  error: string;
 }) {
-  posthog.capture("asset buy failed", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-    error: properties.error,
-  });
+  posthog.capture("asset buy failed", properties);
 }

-// Assets Landing Page ----------------------------
-
 /**
 * ### Why do we need to report this event?
- * - To track number of asset creation started from the assets page
- * - To track which asset types are being created the most
+ * - To track number of cancelled asset purchases from the token page
+ * - To track the errors that users encounter when trying to purchase an asset
 *
 * ### Who is responsible for this event?
 * @MananTank
 */
-export function reportAssetCreationStarted(properties: {
+export function reportAssetBuyCancelled(properties: {
+  chainId: number;
+  is_testnet: boolean | undefined;
+  contractType: AssetContractType | undefined;
  assetType: "nft" | "coin";
 }) {
-  posthog.capture("asset creation started", {
-    assetType: properties.assetType,
-  });
+  posthog.capture("asset buy cancelled", properties);
 }

+// Assets Landing Page ----------------------------
+
 /**
 * ### Why do we need to report this event?
 * - To track number of assets imported successfully from the assets page
@@ -324,10 +408,7 @@ export function reportAssetCreationStepConfigured(
        step: "coin-info" | "token-distribution" | "launch-coin";
      },
 ) {
-  posthog.capture("asset creation step configured", {
-    assetType: properties.assetType,
-    step: properties.step,
-  });
+  posthog.capture("asset creation step configured", properties);
 }

 /**
@@ -341,13 +422,21 @@ export function reportAssetCreationStepConfigured(
 export function reportAssetCreationSuccessful(properties: {
  assetType: "nft" | "coin";
  contractType: AssetContractType;
+  chainId: number;
+  is_testnet: boolean | undefined;
 }) {
-  posthog.capture("asset creation successful", {
-    assetType: properties.assetType,
-    contractType: properties.contractType,
-  });
+  posthog.capture("asset creation successful", properties);
 }

+type CoinCreationStep =
+  | "erc20-asset:deploy-contract"
+  | "erc20-asset:airdrop-tokens"
+  | "erc20-asset:approve-airdrop-tokens"
+  | "drop-erc20:deploy-contract"
+  | "drop-erc20:set-claim-conditions"
+  | "drop-erc20:mint-tokens"
+  | "drop-erc20:airdrop-tokens";
+
 /**
 * ### Why do we need to report this event?
 * - To track number of failed asset creations
@@ -358,25 +447,243 @@ export function reportAssetCreationSuccessful(properties: {
 * @MananTank
 */
 export function reportAssetCreationFailed(
-  properties: { contractType: AssetContractType; error: string } & (
+  properties: {
+    contractType: AssetContractType;
+    error: string;
+    is_testnet: boolean | undefined;
+    chainId: number;
+  } & (
    | {
        assetType: "nft";
-        step: "deploy-contract" | "mint-nfts" | "set-claim-conditions";
+        step:
+          | "deploy-contract"
+          | "mint-nfts"
+          | "set-claim-conditions"
+          | "set-admins";
      }
    | {
        assetType: "coin";
-        step:
-          | "deploy-contract"
-          | "set-claim-conditions"
-          | "mint-tokens"
-          | "airdrop-tokens";
+        step: CoinCreationStep;
      }
  ),
 ) {
-  posthog.capture("asset creation failed", {
-    assetType: properties.assetType,
-    contractType: properties.contractType,
-    error: properties.error,
-    step: properties.step,
-  });
+  posthog.capture("asset creation failed", properties);
+}
+
+type UpsellParams = {
+  content: "storage-limit";
+  campaign: "create-coin" | "create-nft";
+  sku: Exclude<ProductSKU, null>;
+};
+
+/**
+ * ### Why do we need to report this event?
+ * - To track how effective the upsells are in driving users to upgrade
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportUpsellShown(properties: UpsellParams) {
+  posthog.capture("upsell shown", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track how effective the upsells are in driving users to upgrade
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportUpsellClicked(properties: UpsellParams) {
+  posthog.capture("upsell clicked", properties);
+}
+
+// ----------------------------
+// PAYMENTS
+// ----------------------------
+
+/**
+ * ### Why do we need to report this event?
+ * - To track conversions on payment overview page
+ *
+ * ### Who is responsible for this event?
+ * @samina
+ */
+export function reportPaymentCardClick(properties: { id: string }) {
+  posthog.capture("payment card clicked", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To create a funnel "create payment link pageview" -> "payment link created" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @greg
+ */
+export function reportPaymentLinkCreated(properties: {
+  linkId: string;
+  clientId: string;
+}) {
+  posthog.capture("payment link created", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track funnel "payment link pageview" -> "payment link buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @greg
+ */
+export function reportPaymentLinkBuySuccessful() {
+  posthog.capture("payment link buy successful");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of failed payment link buys
+ * - To track what errors users encounter when trying to buy from a payment link
+ *
+ * ### Who is responsible for this event?
+ * @greg
+ */
+export function reportPaymentLinkBuyFailed(properties: {
+  errorMessage: string;
+}) {
+  posthog.capture("payment link buy failed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To create a funnel for "asset pageview" -> "asset purchase successful" to understand the conversion rate
+ * - To understand which asset types are being viewed the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportAssetPageview(properties: {
+  assetType: "nft" | "coin";
+  chainId: number;
+  is_testnet: boolean | undefined;
+}) {
+  posthog.capture("asset pageview", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To understand which chains are being viewed the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportChainPageview(properties: {
+  chainId: number;
+  is_testnet: boolean | undefined;
+}) {
+  posthog.capture("chain pageview", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the usage of fund wallet modal
+ * - To create a funnel "fund wallet modal opened" -> "fund wallet buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletOpened() {
+  posthog.capture("fund wallet opened");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of successful fund wallet buys
+ * - To create a funnel "fund wallet modal opened" -> "fund wallet buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletSuccessful() {
+  posthog.capture("fund wallet successful");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of failed fund wallet buys
+ * - To track the errors that users encounter when trying to buy from a fund wallet modal
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletFailed(params: { errorMessage: string }) {
+  posthog.capture("fund wallet failed", params);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the conversion rate of the users choosing to create a token from new flow instead of the old flow
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenUpsellClicked(params: {
+  assetType: "nft" | "coin";
+  pageType: "explore" | "deploy-contract";
+}) {
+  posthog.capture("token upsell clicked", params);
+}
+
+// ----------------------------
+// CHAIN INFRASTRUCTURE CHECKOUT
+// ----------------------------
+/**
+ * ### Why do we need to report this event?
+ * - To record explicit user acknowledgement when proceeding to checkout without RPC
+ * - To measure how often customers choose to omit RPC while purchasing Insight and/or Account Abstraction
+ * - To correlate potential support issues arising from missing RPC
+ *
+ * ### Who is responsible for this event?
+ * @jnsdls
+ */
+export function reportChainInfraRpcOmissionAgreed(properties: {
+  chainId: number;
+  frequency: "monthly" | "annual";
+  includeInsight: boolean;
+  includeAccountAbstraction: boolean;
+}) {
+  posthog.capture("chain infra checkout rpc omission agreed", properties);
+}
+
+// ----------------------------
+// FEEDBACK
+// ----------------------------
+
+/**
+ * ### Why do we need to report this event?
+ * - To track user feedback and sentiment about the product
+ * - To identify common issues or feature requests
+ * - To measure user satisfaction and engagement
+ * - To prioritize product improvements based on user input
+ *
+ * ### Who is responsible for this event?
+ * @gisellechacon
+ */
+export function reportProductFeedback(properties: {
+  feedback: string;
+  source: "desktop" | "mobile";
+}) {
+  posthog.capture("product feedback submitted", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track conversions for the bridge page links
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportBridgePageLinkClick(params: {
+  linkType: "integrate-bridge" | "trending-tokens";
+}) {
+  posthog.capture("bridge page link clicked", params);
 }
@@ -1,8 +1,8 @@
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import type { Account } from "@/hooks/useApi";
-import { getAuthToken } from "../../../../@/api/auth-token";
-import { loginRedirect } from "../../login/loginRedirect";
-import { isAccountOnboardingComplete } from "../../login/onboarding/isOnboardingRequired";
+import { isAccountOnboardingComplete } from "@/utils/account-onboarding";
+import { loginRedirect } from "@/utils/redirects";

 /**
 * Just get the account object without enforcing onboarding.
@@ -1,5 +1,5 @@
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";

 export type LinkedWallet = {
  createdAt: string;
@@ -1,6 +1,9 @@
 import { cookies } from "next/headers";
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
-import { LAST_USED_TEAM_ID } from "@/constants/cookies";
+import {
+  COOKIE_ACTIVE_ACCOUNT,
+  COOKIE_PREFIX_TOKEN,
+  LAST_USED_TEAM_ID,
+} from "@/constants/cookie";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";

 export async function getAuthToken() {
@@ -1,44 +1,8 @@
 import "server-only";
 import type { ChainMetadata } from "thirdweb/chains";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { API_SERVER_SECRET } from "@/constants/server-envs";
 import type { ChainService } from "@/types/chain";

-export async function getGasSponsoredChains() {
-  if (!API_SERVER_SECRET) {
-    throw new Error("API_SERVER_SECRET is not set");
-  }
-  const res = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/chains/gas-sponsored`,
-    {
-      headers: {
-        "Content-Type": "application/json",
-        "x-service-api-key": API_SERVER_SECRET,
-      },
-      next: {
-        revalidate: 15 * 60, //15 minutes
-      },
-    },
-  );
-
-  if (!res.ok) {
-    console.error(
-      "Failed to fetch gas sponsored chains",
-      res.status,
-      res.statusText,
-    );
-    res.body?.cancel();
-    return [];
-  }
-
-  try {
-    return (await res.json()).data as number[];
-  } catch (e) {
-    console.error("Failed to parse gas sponsored chains", e);
-    return [];
-  }
-}
-
 export function getChains() {
  return fetch(
    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/chains`,
@@ -1,7 +1,7 @@
 import type { ThirdwebClient } from "thirdweb";
 import { fetchDeployMetadata as sdkFetchDeployMetadata } from "thirdweb/contract";
 import { removeUndefinedFromObjectDeep } from "@/utils/object";
-import type { ContractId } from "./types";
+import type { ContractId } from "../../components/contract-components/types";

 // metadata PRE publish, only has the compiler output info (from CLI)

@@ -0,0 +1,27 @@
+import type { ThirdwebContract } from "thirdweb";
+
+export async function verifyContract(contract: ThirdwebContract) {
+  try {
+    const response = await fetch(
+      "https://contract.thirdweb.com/verify/contract",
+      {
+        body: JSON.stringify({
+          chainId: contract.chain.id,
+          contractAddress: contract.address,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      },
+    );
+
+    if (!response.ok) {
+      console.error(`Error verifying contract: ${response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error(`Error verifying contract: ${error}`);
+  }
+}
@@ -58,6 +58,7 @@ interface WebhookSingleResponse {
 }

 interface TestWebhookPayload {
+  webhook_id?: string;
  webhook_url: string;
  type?: "event" | "transaction";
 }
@@ -1,8 +1,8 @@
 import {
  getProjectContracts,
  type ProjectContract,
-} from "../../../../../@/api/getProjectContracts";
-import { fetchChainWithLocalOverrides } from "../../../../../@/utils/fetchChainWithLocalOverrides";
+} from "@/api/project/getProjectContracts";
+import { fetchChainWithLocalOverrides } from "@/utils/fetchChainWithLocalOverrides";

 export async function getSortedDeployedContracts(params: {
  onlyMainnet?: boolean;
@@ -1,7 +1,7 @@
 import "server-only";
 import type { ProjectResponse } from "@thirdweb-dev/service-utils";
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";

 export type Project = ProjectResponse;

@@ -1,62 +0,0 @@
-import { getAuthToken } from "@/api/auth-token";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import type { ProductSKU } from "@/types/billing";
-
-type InvoiceLine = {
-  // amount for this line item
-  amount: number;
-  // statement descriptor
-  description: string | null;
-  // the thirdweb product sku or null if it is not recognized
-  thirdwebSku: ProductSKU | null;
-};
-
-type Invoice = {
-  // total amount excluding tax
-  amount: number | null;
-  // the ISO currency code (e.g. USD)
-  currency: string;
-  // the line items on the invoice
-  lines: InvoiceLine[];
-};
-
-export type TeamSubscription = {
-  id: string;
-  type: "PLAN" | "USAGE" | "PLAN_ADD_ON" | "PRODUCT";
-  status:
-    | "incomplete"
-    | "incomplete_expired"
-    | "trialing"
-    | "active"
-    | "past_due"
-    | "canceled"
-    | "unpaid"
-    | "paused";
-  currentPeriodStart: string;
-  currentPeriodEnd: string;
-  trialStart: string | null;
-  trialEnd: string | null;
-  upcomingInvoice: Invoice;
-};
-
-export async function getTeamSubscriptions(slug: string) {
-  const token = await getAuthToken();
-
-  if (!token) {
-    return null;
-  }
-
-  const teamRes = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${slug}/subscriptions`,
-    {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
-
-  if (teamRes.ok) {
-    return (await teamRes.json())?.result as TeamSubscription[];
-  }
-  return null;
-}
@@ -1,8 +1,8 @@
 "use server";

 import "server-only";
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";

 export type AuditLogEntry = {
  who: {
@@ -1,8 +1,8 @@
 "use server";
 import "server-only";

+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";

 export async function createDedicatedSupportChannel(
  teamIdOrSlug: string,
@@ -1,22 +1,27 @@
-export const authOptions = [
-  "email",
-  "phone",
-  "passkey",
-  "siwe",
-  "guest",
-  "google",
-  "facebook",
-  "x",
-  "discord",
-  "farcaster",
-  "telegram",
-  "github",
-  "twitch",
-  "steam",
-  "apple",
-  "coinbase",
-  "line",
-] as const;
+import "server-only";
+
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+
+export type AuthOption =
+  | "email"
+  | "phone"
+  | "passkey"
+  | "siwe"
+  | "guest"
+  | "google"
+  | "facebook"
+  | "x"
+  | "tiktok"
+  | "discord"
+  | "farcaster"
+  | "telegram"
+  | "github"
+  | "twitch"
+  | "steam"
+  | "apple"
+  | "coinbase"
+  | "line";

 export type Ecosystem = {
  name: string;
@@ -24,7 +29,7 @@ export type Ecosystem = {
  id: string;
  slug: string;
  permission: "PARTNER_WHITELIST" | "ANYONE";
-  authOptions: (typeof authOptions)[number][];
+  authOptions: AuthOption[];
  customAuthOptions?: {
    authEndpoint?: {
      url: string;
@@ -47,6 +52,54 @@ export type Ecosystem = {
  updatedAt: string;
 };

+export async function fetchEcosystemList(teamIdOrSlug: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return [];
+  }
+
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamIdOrSlug}/ecosystem-wallet`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    return [];
+  }
+
+  return (await res.json()).result as Ecosystem[];
+}
+
+export async function fetchEcosystem(slug: string, teamIdOrSlug: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamIdOrSlug}/ecosystem-wallet/${slug}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (!res.ok) {
+    const data = await res.json();
+    console.error(data);
+    return null;
+  }
+
+  const data = (await res.json()) as { result: Ecosystem };
+  return data.result;
+}
+
 type PartnerPermission = "PROMPT_USER_V1" | "FULL_CONTROL_V1";
 export type Partner = {
  id: string;
@@ -1,11 +1,11 @@
 import "server-only";
 import type { TeamResponse } from "@thirdweb-dev/service-utils";
 import { cookies } from "next/headers";
-import { LAST_USED_TEAM_ID } from "@/constants/cookies";
+import { getValidAccount } from "@/api/account/get-account";
+import { getAuthToken } from "@/api/auth-token";
+import { LAST_USED_TEAM_ID } from "@/constants/cookie";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import { API_SERVER_SECRET } from "@/constants/server-envs";
-import { getValidAccount } from "../../app/(app)/account/settings/getAccount";
-import { getAuthToken } from "./auth-token";
 import { getMemberByAccountId } from "./team-members";

 export type Team = TeamResponse & { stripeCustomerId: string | null };
@@ -48,7 +48,7 @@ export async function service_getTeamBySlug(slug: string) {
  return null;
 }

-export function getTeamById(id: string) {
+function getTeamById(id: string) {
  return getTeamBySlug(id);
 }

@@ -1,5 +1,5 @@
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";

 export type TeamInvite = {
  id: string;
@@ -1,6 +1,6 @@
 import "server-only";
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";

 const TeamAccountRole = {
  MEMBER: "MEMBER",
@@ -0,0 +1,127 @@
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import type { ChainInfraSKU, ProductSKU } from "@/types/billing";
+
+type InvoiceLine = {
+  // amount for this line item
+  amount: number;
+  // statement descriptor
+  description: string | null;
+  // the thirdweb product sku or null if it is not recognized
+  thirdwebSku: ProductSKU | null;
+};
+
+type Invoice = {
+  // total amount excluding tax
+  amount: number | null;
+  // the ISO currency code (e.g. USD)
+  currency: string;
+  // the line items on the invoice
+  lines: InvoiceLine[];
+};
+
+export type TeamSubscription = {
+  id: string;
+  type: "PLAN" | "USAGE" | "PLAN_ADD_ON" | "PRODUCT" | "CHAIN";
+  status:
+    | "incomplete"
+    | "incomplete_expired"
+    | "trialing"
+    | "active"
+    | "past_due"
+    | "canceled"
+    | "unpaid"
+    | "paused";
+  currentPeriodStart: string;
+  currentPeriodEnd: string;
+  trialStart: string | null;
+  trialEnd: string | null;
+  upcomingInvoice: Invoice;
+  skus: (ProductSKU | ChainInfraSKU)[];
+};
+
+type ChainTeamSubscription = Omit<TeamSubscription, "skus"> & {
+  chainId: string;
+  skus: ChainInfraSKU[];
+  isLegacy: boolean;
+};
+
+export async function getTeamSubscriptions(slug: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const teamRes = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${slug}/subscriptions`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (teamRes.ok) {
+    return (await teamRes.json())?.result as TeamSubscription[];
+  }
+  return null;
+}
+
+const CHAIN_PLAN_TO_INFRA = {
+  "chain:plan:gold": ["chain:infra:rpc", "chain:infra:account_abstraction"],
+  "chain:plan:platinum": [
+    "chain:infra:rpc",
+    "chain:infra:insight",
+    "chain:infra:account_abstraction",
+  ],
+  "chain:plan:ultimate": [
+    "chain:infra:rpc",
+    "chain:infra:insight",
+    "chain:infra:account_abstraction",
+  ],
+};
+
+export async function getChainSubscriptions(slug: string) {
+  const allSubscriptions = await getTeamSubscriptions(slug);
+  if (!allSubscriptions) {
+    return null;
+  }
+
+  // first replace any sku that MIGHT match a chain plan
+  const updatedSubscriptions = allSubscriptions
+    .filter((s) => s.type === "CHAIN")
+    .map((s) => {
+      const skus = s.skus;
+      const updatedSkus = skus.flatMap((sku) => {
+        const plan =
+          CHAIN_PLAN_TO_INFRA[sku as keyof typeof CHAIN_PLAN_TO_INFRA];
+        return plan ? plan : sku;
+      });
+      return {
+        ...s,
+        isLegacy: updatedSkus.length !== skus.length,
+        skus: updatedSkus,
+      };
+    });
+
+  return updatedSubscriptions.filter(
+    (s): s is ChainTeamSubscription =>
+      "chainId" in s && typeof s.chainId === "string",
+  );
+}
+
+export async function getChainSubscriptionForChain(
+  slug: string,
+  chainId: number,
+) {
+  const chainSubscriptions = await getChainSubscriptions(slug);
+
+  if (!chainSubscriptions) {
+    return null;
+  }
+
+  return (
+    chainSubscriptions.find((s) => s.chainId === chainId.toString()) ?? null
+  );
+}
@@ -1,8 +1,8 @@
 "use server";
 import "server-only";

+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "./auth-token";

 export type VerifiedDomainResponse =
  | {
@@ -1,4 +1,5 @@
 "use server";
+import type { Address } from "thirdweb";
 import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "@/constants/public-envs";

@@ -96,6 +97,143 @@ export async function deleteWebhook(props: {
  return;
 }

+type PaymentLink = {
+  id: string;
+  link: string;
+  title: string;
+  imageUrl: string;
+  createdAt: string;
+  updatedAt: string;
+  destinationToken: {
+    chainId: number;
+    address: Address;
+    symbol: string;
+    name: string;
+    decimals: number;
+    iconUri: string;
+  };
+  receiver: Address;
+  amount: bigint;
+};
+
+export async function getPaymentLinks(props: {
+  clientId: string;
+  teamId: string;
+}): Promise<Array<PaymentLink>> {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/links`, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
+    },
+    method: "GET",
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = (await res.json()) as {
+    data: Array<PaymentLink & { amount: string }>;
+  };
+  return json.data.map((link) => ({
+    id: link.id,
+    link: link.link,
+    title: link.title,
+    imageUrl: link.imageUrl,
+    createdAt: link.createdAt,
+    updatedAt: link.updatedAt,
+    destinationToken: {
+      chainId: link.destinationToken.chainId,
+      address: link.destinationToken.address,
+      symbol: link.destinationToken.symbol,
+      name: link.destinationToken.name,
+      decimals: link.destinationToken.decimals,
+      iconUri: link.destinationToken.iconUri,
+    },
+    receiver: link.receiver,
+    amount: BigInt(link.amount),
+  }));
+}
+
+export async function createPaymentLink(props: {
+  clientId: string;
+  teamId: string;
+  title: string;
+  imageUrl?: string;
+  intent: {
+    destinationChainId: number;
+    destinationTokenAddress: Address;
+    receiver: Address;
+    amount: bigint;
+    purchaseData?: unknown;
+  };
+}) {
+  const authToken = await getAuthToken();
+
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/links`, {
+    body: JSON.stringify({
+      title: props.title,
+      imageUrl: props.imageUrl,
+      intent: {
+        destinationChainId: props.intent.destinationChainId,
+        destinationTokenAddress: props.intent.destinationTokenAddress,
+        receiver: props.intent.receiver,
+        amount: props.intent.amount.toString(),
+        purchaseData: props.intent.purchaseData,
+      },
+    }),
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
+    },
+    method: "POST",
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const response = (await res.json()) as {
+    data: PaymentLink;
+  };
+
+  return response.data;
+}
+
+export async function deletePaymentLink(props: {
+  clientId: string;
+  teamId: string;
+  paymentLinkId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(
+    `${UB_BASE_URL}/v1/developer/links/${props.paymentLinkId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+        "x-client-id": props.clientId,
+        "x-team-id": props.teamId,
+      },
+      method: "DELETE",
+    },
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
 export type Fee = {
  feeRecipient: string;
  feeBps: number;
@@ -159,66 +297,79 @@ export type PaymentsResponse = {
    totalCount: number;
  };
 };
+
+type BridgePaymentType = "buy" | "sell" | "transfer";
+type OnrampPaymentType = "onramp";
+
 export type Payment = {
+  // common
  id: string;
-  blockNumber?: bigint;
-  transactionId: string;
+  createdAt: string;
  clientId: string;
-  sender: string;
  receiver: string;
-  developerFeeRecipient: string;
-  developerFeeBps: number;
  transactions: Array<{
    chainId: number;
    transactionHash: string;
  }>;
  status: "PENDING" | "COMPLETED" | "FAILED" | "NOT_FOUND";
-  type: "buy" | "sell" | "transfer";
-  originAmount: bigint;
-  destinationAmount: bigint;
-  purchaseData: unknown;
-  originToken: {
-    address: string;
-    symbol: string;
-    decimals: number;
-    chainId: number;
-  };
+
+  destinationAmount: string;
  destinationToken: {
    address: string;
    symbol: string;
    decimals: number;
    chainId: number;
  };
-  createdAt: string;
-};
+  purchaseData: unknown;
+} & (
+  | {
+      type: BridgePaymentType;
+      transactionId: string;
+      blockNumber?: string;
+      sender: string;
+      developerFeeRecipient: string;
+      developerFeeBps: number;
+      originAmount: string;
+      originToken: {
+        address: string;
+        symbol: string;
+        decimals: number;
+        chainId: number;
+      };
+    }
+  | {
+      onrampId: string;
+      type: OnrampPaymentType;
+    }
+);
+
+export type BridgePayment = Extract<Payment, { type: BridgePaymentType }>;

 export async function getPayments(props: {
  clientId: string;
  teamId: string;
+  paymentLinkId?: string;
  limit?: number;
  offset?: number;
 }) {
  const authToken = await getAuthToken();

  // Build URL with query parameters if provided
-  let url = `${UB_BASE_URL}/v1/developer/payments`;
-  const queryParams = new URLSearchParams();
+  const url = new URL(`${UB_BASE_URL}/v1/developer/payments`);

  if (props.limit) {
-    queryParams.append("limit", props.limit.toString());
+    url.searchParams.append("limit", props.limit.toString());
  }

  if (props.offset) {
-    queryParams.append("offset", props.offset.toString());
+    url.searchParams.append("offset", props.offset.toString());
  }

-  // Append query params to URL if any exist
-  const queryString = queryParams.toString();
-  if (queryString) {
-    url = `${url}?${queryString}`;
+  if (props.paymentLinkId) {
+    url.searchParams.append("paymentLinkId", props.paymentLinkId);
  }

-  const res = await fetch(url, {
+  const res = await fetch(url.toString(), {
    headers: {
      Authorization: `Bearer ${authToken}`,
      "Content-Type": "application/json",
@@ -0,0 +1,35 @@
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
+import { UB_BASE_URL } from "./constants";
+import type { TokenMetadata } from "./types";
+
+export async function getUniversalBridgeTokens(props: {
+  chainId?: number;
+  address?: string;
+}) {
+  const url = new URL(`${UB_BASE_URL}/v1/tokens`);
+
+  if (props.chainId) {
+    url.searchParams.append("chainId", String(props.chainId));
+  }
+  if (props.address) {
+    url.searchParams.append("tokenAddress", props.address);
+  }
+  url.searchParams.append("limit", "1000");
+  url.searchParams.append("includePrices", "false");
+
+  const res = await fetch(url.toString(), {
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
+    } as Record<string, string>,
+    method: "GET",
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Array<TokenMetadata>;
+}
@@ -1,42 +1,8 @@
 "use server";
 import type { ProjectResponse } from "@thirdweb-dev/service-utils";
 import { getAuthToken } from "@/api/auth-token";
-import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { UB_BASE_URL } from "./constants";
-
-export type TokenMetadata = {
-  name: string;
-  symbol: string;
-  address: string;
-  decimals: number;
-  chainId: number;
-  iconUri?: string;
-};
-
-export async function getUniversalBridgeTokens(props: { chainId?: number }) {
-  const url = new URL(`${UB_BASE_URL}/v1/tokens`);
-
-  if (props.chainId) {
-    url.searchParams.append("chainId", String(props.chainId));
-  }
-  url.searchParams.append("limit", "1000");
-
-  const res = await fetch(url.toString(), {
-    headers: {
-      "Content-Type": "application/json",
-      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
-    } as Record<string, string>,
-    method: "GET",
-  });
-
-  if (!res.ok) {
-    const text = await res.text();
-    throw new Error(text);
-  }
-
-  const json = await res.json();
-  return json.data as Array<TokenMetadata>;
-}
+import type { TokenMetadata } from "./types";

 export async function addUniversalBridgeTokenRoute(props: {
  chainId: number;
@@ -0,0 +1,8 @@
+export type TokenMetadata = {
+  name: string;
+  symbol: string;
+  address: string;
+  decimals: number;
+  chainId: number;
+  iconUri?: string;
+};
@@ -0,0 +1,192 @@
+"use client";
+/* eslint-disable no-restricted-syntax */
+import { Mesh, Program, Renderer, Triangle, Vec2 } from "ogl";
+import { useEffect, useRef } from "react";
+
+const vertex = `
+attribute vec2 position;
+void main(){gl_Position=vec4(position,0.0,1.0);}
+`;
+
+const fragment = `
+#ifdef GL_ES
+precision lowp float;
+#endif
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uHueShift;
+uniform float uNoise;
+uniform float uScan;
+uniform float uScanFreq;
+uniform float uWarp;
+uniform vec3 uBackgroundColor;
+uniform float uBackgroundOpacity;
+uniform float uPatternLightness;
+#define iTime uTime
+#define iResolution uResolution
+
+vec4 buf[8];
+float rand(vec2 c){return fract(sin(dot(c,vec2(12.9898,78.233)))*43758.5453);}
+
+mat3 rgb2yiq=mat3(0.299,0.587,0.114,0.596,-0.274,-0.322,0.211,-0.523,0.312);
+mat3 yiq2rgb=mat3(1.0,0.956,0.621,1.0,-0.272,-0.647,1.0,-1.106,1.703);
+
+vec3 hueShiftRGB(vec3 col,float deg){
+    vec3 yiq=rgb2yiq*col;
+    float rad=radians(deg);
+    float cosh=cos(rad),sinh=sin(rad);
+    vec3 yiqShift=vec3(yiq.x,yiq.y*cosh-yiq.z*sinh,yiq.y*sinh+yiq.z*cosh);
+    return clamp(yiq2rgb*yiqShift,0.0,1.0);
+}
+
+vec4 sigmoid(vec4 x){return 1./(1.+exp(-x));}
+
+vec4 cppn_fn(vec2 coordinate,float in0,float in1,float in2){
+    buf[6]=vec4(coordinate.x,coordinate.y,0.3948333106474662+in0,0.36+in1);
+    buf[7]=vec4(0.14+in2,sqrt(coordinate.x*coordinate.x+coordinate.y*coordinate.y),0.,0.);
+    buf[0]=mat4(vec4(6.5404263,-3.6126034,0.7590882,-1.13613),vec4(2.4582713,3.1660357,1.2219609,0.06276096),vec4(-5.478085,-6.159632,1.8701609,-4.7742867),vec4(6.039214,-5.542865,-0.90925294,3.251348))*buf[6]+mat4(vec4(0.8473259,-5.722911,3.975766,1.6522468),vec4(-0.24321538,0.5839259,-1.7661959,-5.350116),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(0.21808943,1.1243913,-1.7969975,5.0294676);
+    buf[1]=mat4(vec4(-3.3522482,-6.0612736,0.55641043,-4.4719114),vec4(0.8631464,1.7432913,5.643898,1.6106541),vec4(2.4941394,-3.5012043,1.7184316,6.357333),vec4(3.310376,8.209261,1.1355612,-1.165539))*buf[6]+mat4(vec4(5.24046,-13.034365,0.009859298,15.870829),vec4(2.987511,3.129433,-0.89023495,-1.6822904),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-5.9457836,-6.573602,-0.8812491,1.5436668);
+    buf[0]=sigmoid(buf[0]);buf[1]=sigmoid(buf[1]);
+    buf[2]=mat4(vec4(-15.219568,8.095543,-2.429353,-1.9381982),vec4(-5.951362,4.3115187,2.6393783,1.274315),vec4(-7.3145227,6.7297835,5.2473326,5.9411426),vec4(5.0796127,8.979051,-1.7278991,-1.158976))*buf[6]+mat4(vec4(-11.967154,-11.608155,6.1486754,11.237008),vec4(2.124141,-6.263192,-1.7050359,-0.7021966),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-4.17164,-3.2281182,-4.576417,-3.6401186);
+    buf[3]=mat4(vec4(3.1832156,-13.738922,1.879223,3.233465),vec4(0.64300746,12.768129,1.9141049,0.50990224),vec4(-0.049295485,4.4807224,1.4733979,1.801449),vec4(5.0039253,13.000481,3.3991797,-4.5561905))*buf[6]+mat4(vec4(-0.1285731,7.720628,-3.1425676,4.742367),vec4(0.6393625,3.714393,-0.8108378,-0.39174938),vec4(0.,0.,0.,0.),vec4(0.,0.,0.,0.))*buf[7]+vec4(-1.1811101,-21.621881,0.7851888,1.2329718);
+    buf[2]=sigmoid(buf[2]);buf[3]=sigmoid(buf[3]);
+    buf[4]=mat4(vec4(5.214916,-7.183024,2.7228765,2.6592617),vec4(-5.601878,-25.3591,4.067988,0.4602802),vec4(-10.57759,24.286327,21.102104,37.546658),vec4(4.3024497,-1.9625226,2.3458803,-1.372816))*buf[0]+mat4(vec4(-17.6526,-10.507558,2.2587414,12.462782),vec4(6.265566,-502.75443,-12.642513,0.9112289),vec4(-10.983244,20.741234,-9.701768,-0.7635988),vec4(5.383626,1.4819539,-4.1911616,-4.8444734))*buf[1]+mat4(vec4(12.785233,-16.345072,-0.39901125,1.7955981),vec4(-30.48365,-1.8345358,1.4542528,-1.1118771),vec4(19.872723,-7.337935,-42.941723,-98.52709),vec4(8.337645,-2.7312303,-2.2927687,-36.142323))*buf[2]+mat4(vec4(-16.298317,3.5471997,-0.44300047,-9.444417),vec4(57.5077,-35.609753,16.163465,-4.1534753),vec4(-0.07470326,-3.8656476,-7.0901804,3.1523974),vec4(-12.559385,-7.077619,1.490437,-0.8211543))*buf[3]+vec4(-7.67914,15.927437,1.3207729,-1.6686112);
+    buf[5]=mat4(vec4(-1.4109162,-0.372762,-3.770383,-21.367174),vec4(-6.2103205,-9.35908,0.92529047,8.82561),vec4(11.460242,-22.348068,13.625772,-18.693201),vec4(-0.3429052,-3.9905605,-2.4626114,-0.45033523))*buf[0]+mat4(vec4(7.3481627,-4.3661838,-6.3037653,-3.868115),vec4(1.5462853,6.5488915,1.9701879,-0.58291394),vec4(6.5858274,-2.2180402,3.7127688,-1.3730392),vec4(-5.7973905,10.134961,-2.3395722,-5.965605))*buf[1]+mat4(vec4(-2.5132585,-6.6685553,-1.4029363,-0.16285264),vec4(-0.37908727,0.53738135,4.389061,-1.3024765),vec4(-0.70647055,2.0111287,-5.1659346,-3.728635),vec4(-13.562562,10.487719,-0.9173751,-2.6487076))*buf[2]+mat4(vec4(-8.645013,6.5546675,-6.3944063,-5.5933375),vec4(-0.57783127,-1.077275,36.91025,5.736769),vec4(14.283112,3.7146652,7.1452246,-4.5958776),vec4(2.7192075,3.6021907,-4.366337,-2.3653464))*buf[3]+vec4(-5.9000807,-4.329569,1.2427121,8.59503);
+    buf[4]=sigmoid(buf[4]);buf[5]=sigmoid(buf[5]);
+    buf[6]=mat4(vec4(-1.61102,0.7970257,1.4675229,0.20917463),vec4(-28.793737,-7.1390953,1.5025433,4.656581),vec4(-10.94861,39.66238,0.74318546,-10.095605),vec4(-0.7229728,-1.5483948,0.7301322,2.1687684))*buf[0]+mat4(vec4(3.2547753,21.489103,-1.0194173,-3.3100595),vec4(-3.7316632,-3.3792162,-7.223193,-0.23685838),vec4(13.1804495,0.7916005,5.338587,5.687114),vec4(-4.167605,-17.798311,-6.815736,-1.6451967))*buf[1]+mat4(vec4(0.604885,-7.800309,-7.213122,-2.741014),vec4(-3.522382,-0.12359311,-0.5258442,0.43852118),vec4(9.6752825,-22.853785,2.062431,0.099892326),vec4(-4.3196306,-17.730087,2.5184598,5.30267))*buf[2]+mat4(vec4(-6.545563,-15.790176,-6.0438633,-5.415399),vec4(-43.591583,28.551912,-16.00161,18.84728),vec4(4.212382,8.394307,3.0958717,8.657522),vec4(-5.0237565,-4.450633,-4.4768,-5.5010443))*buf[3]+mat4(vec4(1.6985557,-67.05806,6.897715,1.9004834),vec4(1.8680354,2.3915145,2.5231109,4.081538),vec4(11.158006,1.7294737,2.0738268,7.386411),vec4(-4.256034,-306.24686,8.258898,-17.132736))*buf[4]+mat4(vec4(1.6889864,-4.5852966,3.8534803,-6.3482175),vec4(1.3543309,-1.2640043,9.932754,2.9079645),vec4(-5.2770967,0.07150358,-0.13962056,3.3269649),vec4(28.34703,-4.918278,6.1044083,4.085355))*buf[5]+vec4(6.6818056,12.522166,-3.7075126,-4.104386);
+    buf[7]=mat4(vec4(-8.265602,-4.7027016,5.098234,0.7509808),vec4(8.6507845,-17.15949,16.51939,-8.884479),vec4(-4.036479,-2.3946867,-2.6055532,-1.9866527),vec4(-2.2167742,-1.8135649,-5.9759874,4.8846445))*buf[0]+mat4(vec4(6.7790847,3.5076547,-2.8191125,-2.7028968),vec4(-5.743024,-0.27844876,1.4958696,-5.0517144),vec4(13.122226,15.735168,-2.9397483,-4.101023),vec4(-14.375265,-5.030483,-6.2599335,2.9848232))*buf[1]+mat4(vec4(4.0950394,-0.94011575,-5.674733,4.755022),vec4(4.3809423,4.8310084,1.7425908,-3.437416),vec4(2.117492,0.16342592,-104.56341,16.949184),vec4(-5.22543,-2.994248,3.8350096,-1.9364246))*buf[2]+mat4(vec4(-5.900337,1.7946124,-13.604192,-3.8060522),vec4(6.6583457,31.911177,25.164474,91.81147),vec4(11.840538,4.1503043,-0.7314397,6.768467),vec4(-6.3967767,4.034772,6.1714606,-0.32874924))*buf[3]+mat4(vec4(3.4992442,-196.91893,-8.923708,2.8142626),vec4(3.4806502,-3.1846354,5.1725626,5.1804223),vec4(-2.4009497,15.585794,1.2863957,2.0252278),vec4(-71.25271,-62.441242,-8.138444,0.50670296))*buf[4]+mat4(vec4(-12.291733,-11.176166,-7.3474145,4.390294),vec4(10.805477,5.6337385,-0.9385842,-4.7348723),vec4(-12.869276,-7.039391,5.3029537,7.5436664),vec4(1.4593618,8.91898,3.5101583,5.840625))*buf[5]+vec4(2.2415268,-6.705987,-0.98861027,-2.117676);
+    buf[6]=sigmoid(buf[6]);buf[7]=sigmoid(buf[7]);
+    buf[0]=mat4(vec4(1.6794263,1.3817469,2.9625452,0.),vec4(-1.8834411,-1.4806935,-3.5924516,0.),vec4(-1.3279216,-1.0918057,-2.3124623,0.),vec4(0.2662234,0.23235129,0.44178495,0.))*buf[0]+mat4(vec4(-0.6299101,-0.5945583,-0.9125601,0.),vec4(0.17828953,0.18300213,0.18182953,0.),vec4(-2.96544,-2.5819945,-4.9001055,0.),vec4(1.4195864,1.1868085,2.5176322,0.))*buf[1]+mat4(vec4(-1.2584374,-1.0552157,-2.1688404,0.),vec4(-0.7200217,-0.52666044,-1.438251,0.),vec4(0.15345335,0.15196142,0.272854,0.),vec4(0.945728,0.8861938,1.2766753,0.))*buf[2]+mat4(vec4(-2.4218085,-1.968602,-4.35166,0.),vec4(-22.683098,-18.0544,-41.954372,0.),vec4(0.63792,0.5470648,1.1078634,0.),vec4(-1.5489894,-1.3075932,-2.6444845,0.))*buf[3]+mat4(vec4(-0.49252132,-0.39877754,-0.91366625,0.),vec4(0.95609266,0.7923952,1.640221,0.),vec4(0.30616966,0.15693925,0.8639857,0.),vec4(1.1825981,0.94504964,2.176963,0.))*buf[4]+mat4(vec4(0.35446745,0.3293795,0.59547555,0.),vec4(-0.58784515,-0.48177817,-1.0614829,0.),vec4(2.5271258,1.9991658,4.6846647,0.),vec4(0.13042648,0.08864098,0.30187556,0.))*buf[5]+mat4(vec4(-1.7718065,-1.4033192,-3.3355875,0.),vec4(3.1664357,2.638297,5.378702,0.),vec4(-3.1724713,-2.6107926,-5.549295,0.),vec4(-2.851368,-2.249092,-5.3013067,0.))*buf[6]+mat4(vec4(1.5203838,1.2212278,2.8404984,0.),vec4(1.5210563,1.2651345,2.683903,0.),vec4(2.9789467,2.4364579,5.2347264,0.),vec4(2.2270417,1.8825914,3.8028636,0.))*buf[7]+vec4(-1.5468478,-3.6171484,0.24762098,0.);
+    buf[0]=sigmoid(buf[0]);
+    return vec4(buf[0].x,buf[0].y,buf[0].z,1.);
+}
+
+void mainImage(out vec4 fragColor,in vec2 fragCoord){
+    vec2 uv=fragCoord/uResolution.xy*2.-1.;
+    uv.y*=-1.;
+    uv+=uWarp*vec2(sin(uv.y*6.283+uTime*0.5),cos(uv.x*6.283+uTime*0.5))*0.05;
+    fragColor=cppn_fn(uv,0.1*sin(0.3*uTime),0.1*sin(0.69*uTime),0.1*sin(0.44*uTime));
+}
+
+void main(){
+    vec4 col;mainImage(col,gl_FragCoord.xy);
+    col.rgb=hueShiftRGB(col.rgb,uHueShift);
+    float scanline_val=sin(gl_FragCoord.y*uScanFreq)*0.5+0.5;
+    col.rgb*=1.-(scanline_val*scanline_val)*uScan;
+    col.rgb+=(rand(gl_FragCoord.xy+uTime)-0.5)*uNoise;
+
+    // Apply lightness control to pattern
+    col.rgb = col.rgb * uPatternLightness;
+
+    // Use background color as base, then add pattern on top
+    vec3 finalColor = uBackgroundColor + col.rgb * uBackgroundOpacity;
+
+    gl_FragColor=vec4(clamp(finalColor,0.0,1.0),1.0);
+}
+`;
+
+type Props = {
+  hueShift?: number;
+  noiseIntensity?: number;
+  scanlineIntensity?: number;
+  speed?: number;
+  scanlineFrequency?: number;
+  warpAmount?: number;
+  resolutionScale?: number;
+  backgroundColor?: [number, number, number];
+  backgroundOpacity?: number;
+  patternLightness?: number;
+};
+
+export function DarkVeil({
+  hueShift = 0,
+  noiseIntensity = 0,
+  scanlineIntensity = 0,
+  speed = 0.5,
+  scanlineFrequency = 0,
+  warpAmount = 0,
+  resolutionScale = 1,
+  backgroundColor = [0, 0, 0],
+  backgroundOpacity = 1,
+  patternLightness = 1.0,
+}: Props) {
+  const ref = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    const canvas = ref.current as HTMLCanvasElement;
+    const parent = canvas.parentElement as HTMLElement;
+
+    const renderer = new Renderer({
+      dpr: Math.min(window.devicePixelRatio, 2),
+      canvas,
+    });
+
+    const gl = renderer.gl;
+    const geometry = new Triangle(gl);
+
+    const program = new Program(gl, {
+      vertex,
+      fragment,
+      uniforms: {
+        uTime: { value: 0 },
+        uResolution: { value: new Vec2() },
+        uHueShift: { value: hueShift },
+        uNoise: { value: noiseIntensity },
+        uScan: { value: scanlineIntensity },
+        uScanFreq: { value: scanlineFrequency },
+        uWarp: { value: warpAmount },
+        uBackgroundColor: { value: backgroundColor },
+        uBackgroundOpacity: { value: backgroundOpacity },
+        uPatternLightness: { value: patternLightness },
+      },
+    });
+
+    const mesh = new Mesh(gl, { geometry, program });
+
+    const resize = () => {
+      const w = parent.clientWidth,
+        h = parent.clientHeight;
+      renderer.setSize(w * resolutionScale, h * resolutionScale);
+      program.uniforms.uResolution.value.set(w, h);
+    };
+
+    window.addEventListener("resize", resize);
+    resize();
+
+    const start = performance.now();
+    let frame = 0;
+
+    const loop = () => {
+      program.uniforms.uTime.value =
+        ((performance.now() - start) / 1000) * speed;
+      program.uniforms.uHueShift.value = hueShift;
+      program.uniforms.uNoise.value = noiseIntensity;
+      program.uniforms.uScan.value = scanlineIntensity;
+      program.uniforms.uScanFreq.value = scanlineFrequency;
+      program.uniforms.uWarp.value = warpAmount;
+      program.uniforms.uBackgroundColor.value = backgroundColor;
+      program.uniforms.uBackgroundOpacity.value = backgroundOpacity;
+      program.uniforms.uPatternLightness.value = patternLightness;
+      renderer.render({ scene: mesh });
+      frame = requestAnimationFrame(loop);
+    };
+
+    loop();
+
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", resize);
+    };
+  }, [
+    hueShift,
+    noiseIntensity,
+    scanlineIntensity,
+    speed,
+    scanlineFrequency,
+    warpAmount,
+    resolutionScale,
+    backgroundColor,
+    backgroundOpacity,
+    patternLightness,
+  ]);
+  return <canvas ref={ref} className="w-full h-full block bg-background" />;
+}
@@ -8,14 +8,17 @@ import {
  SelectValue,
 } from "@/components/ui/select";
 import { normalizeTime } from "@/lib/time";
+import { cn } from "@/lib/utils";

 export function DateRangeSelector(props: {
  range: Range;
  setRange: (range: Range) => void;
  popoverAlign?: "start" | "end" | "center";
+  className?: string;
 }) {
  const { range, setRange } = props;
  const daysDiff = differenceInCalendarDays(range.to, range.from);
+
  const matchingRange =
    normalizeTime(range.to).getTime() === normalizeTime(new Date()).getTime()
      ? durationPresets.find((preset) => preset.days === daysDiff)
@@ -26,7 +29,7 @@ export function DateRangeSelector(props: {

  return (
    <DatePickerWithRange
-      className="w-auto bg-card"
+      className={cn("w-auto bg-card", props.className)}
      from={range.from}
      header={
        <div className="mb-2 border-border border-b p-4">
@@ -83,7 +86,9 @@ export function getLastNDaysRange(id: DurationId) {
    throw new Error(`Invalid duration id: ${id}`);
  }

-  const todayDate = new Date(Date.now() + 1000 * 60 * 60 * 24); // add 1 day to avoid timezone issues
+  const todayDate = new Date();
+  todayDate.setDate(todayDate.getDate() + 1); // Move to next day
+  todayDate.setHours(0, 0, 0, 0); // Set to start of next day (00:00)

  const value: Range = {
    from: subDays(todayDate, durationInfo.days),
@@ -1,103 +0,0 @@
-"use client";
-import { useQuery } from "@tanstack/react-query";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useState } from "react";
-import type {
-  DurationId,
-  Range,
-} from "@/components/analytics/date-range-selector";
-import {
-  DateRangeSelector,
-  getLastNDaysRange,
-} from "@/components/analytics/date-range-selector";
-import { IntervalSelector } from "@/components/analytics/interval-selector";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-export function RangeSelector({
-  range,
-  interval,
-}: {
-  range?: Range;
-  interval: "day" | "week";
-}) {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const router = useDashboardRouter();
-  const [localRange, setRange] = useState<Range>(
-    range || getLastNDaysRange("last-120"),
-  );
-  const [localInterval, setInterval] = useState<"day" | "week">(interval);
-
-  useQuery({
-    queryFn: async () => {
-      if (range) {
-        setRange(range);
-        return range;
-      }
-      if (searchParams) {
-        const fromStringified = searchParams.get("from");
-        const from = fromStringified
-          ? new Date(fromStringified)
-          : getLastNDaysRange("last-120").from;
-        const toStringified = searchParams.get("to");
-        const to = toStringified ? new Date(toStringified) : new Date();
-        const type = (searchParams.get("type") as DurationId) || "last-120";
-        setRange({ from, to, type });
-        setInterval(interval);
-        return { from, to, type } satisfies Range;
-      }
-      return getLastNDaysRange("last-120");
-    },
-    queryKey: ["analytics-range", searchParams?.toString(), range],
-  });
-
-  // prefetch for each interval and default range
-  useQuery({
-    queryFn: async () => {
-      const newSearchParams = new URLSearchParams(searchParams || {});
-      for (const interval of ["day", "week"] as const) {
-        newSearchParams.set("interval", interval);
-        for (const type of [
-          "last-120",
-          "last-60",
-          "last-30",
-          "last-7",
-        ] as const) {
-          const newRange = getLastNDaysRange(type);
-          newSearchParams.set("from", newRange.from.toISOString());
-          newSearchParams.set("to", newRange.to.toISOString());
-          newSearchParams.set("type", newRange.type);
-          router.prefetch(`${pathname}?${newSearchParams.toString()}`);
-        }
-      }
-      return true;
-    },
-    queryKey: ["analytics-range", searchParams?.toString()],
-  });
-
-  return (
-    <div className="flex justify-end gap-4">
-      <DateRangeSelector
-        range={localRange}
-        setRange={(newRange) => {
-          setRange(newRange);
-          const newSearchParams = new URLSearchParams(searchParams || {});
-          newSearchParams.set("from", newRange.from.toISOString());
-          newSearchParams.set("to", newRange.to.toISOString());
-          newSearchParams.set("type", newRange.type);
-          router.push(`${pathname}?${newSearchParams.toString()}`);
-        }}
-      />
-      <IntervalSelector
-        className="bg-card"
-        intervalType={localInterval}
-        setIntervalType={(newInterval) => {
-          setInterval(newInterval);
-          const newSearchParams = new URLSearchParams(searchParams || {});
-          newSearchParams.set("interval", newInterval);
-          router.push(`${pathname}?${newSearchParams.toString()}`);
-        }}
-      />
-    </div>
-  );
-}
@@ -0,0 +1,55 @@
+"use client";
+
+import {
+  useResponsiveSearchParams,
+  useSetResponsiveSearchParams,
+} from "responsive-rsc";
+import {
+  DateRangeSelector,
+  type DurationId,
+} from "@/components/analytics/date-range-selector";
+import { IntervalSelector } from "@/components/analytics/interval-selector";
+import { getFiltersFromSearchParams, normalizeTimeISOString } from "@/lib/time";
+
+export function ResponsiveTimeFilters(props: { defaultRange: DurationId }) {
+  const responsiveSearchParams = useResponsiveSearchParams();
+  const setResponsiveSearchParams = useSetResponsiveSearchParams();
+  const { range, interval } = getFiltersFromSearchParams({
+    defaultRange: props.defaultRange,
+    from: responsiveSearchParams.from,
+    interval: responsiveSearchParams.interval,
+    to: responsiveSearchParams.to,
+  });
+
+  return (
+    <div className="flex gap-3 flex-row">
+      <DateRangeSelector
+        className="rounded-full"
+        range={range}
+        setRange={(newRange) => {
+          setResponsiveSearchParams((v) => {
+            const newParams = {
+              ...v,
+              from: normalizeTimeISOString(newRange.from),
+              to: normalizeTimeISOString(newRange.to),
+            };
+            return newParams;
+          });
+        }}
+      />
+      <IntervalSelector
+        className="bg-card rounded-full"
+        intervalType={interval}
+        setIntervalType={(newInterval) => {
+          setResponsiveSearchParams((v) => {
+            const newParams = {
+              ...v,
+              interval: newInterval,
+            };
+            return newParams;
+          });
+        }}
+      />
+    </div>
+  );
+}
@@ -1,478 +0,0 @@
-"use client";
-
-import {
-  Alert,
-  AlertIcon,
-  Flex,
-  FormControl,
-  Input,
-  InputGroup,
-  InputRightElement,
-  Textarea,
-} from "@chakra-ui/react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "chakra/button";
-import { FormErrorMessage, FormHelperText, FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
-import { ChevronLeftIcon, EyeIcon, EyeOffIcon } from "lucide-react";
-import { useRef, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { useForm } from "react-hook-form";
-import type { ThirdwebClient } from "thirdweb";
-import type { CreateDelayedRevealBatchParams } from "thirdweb/extensions/erc721";
-import type { NFTInput } from "thirdweb/utils";
-import { z } from "zod";
-import { FileInput } from "@/components/blocks/FileInput";
-import { TransactionButton } from "@/components/tx-button";
-import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import type { ComponentWithChildren } from "@/types/component-with-children";
-import { processInputData, shuffleData } from "@/utils/batch";
-import { BatchTable } from "./batch-table";
-import { SelectOption } from "./lazy-mint-form/select-option";
-import { UploadStep } from "./upload-step";
-
-type DelayedSubmit = {
-  revealType: "delayed";
-  data: CreateDelayedRevealBatchParams;
-};
-type InstantSubmit = {
-  revealType: "instant";
-  data: { metadatas: NFTInput[] };
-};
-
-type SubmitType = DelayedSubmit | InstantSubmit;
-
-interface BatchLazyMintEVMProps {
-  nextTokenIdToMint: bigint;
-  canCreateDelayedRevealBatch: boolean;
-  onSubmit: (formData: SubmitType) => Promise<unknown>;
-  chainId: number;
-  client: ThirdwebClient;
-}
-
-type BatchLazyMintProps = BatchLazyMintEVMProps;
-
-const BatchLazyMintFormSchema = z
-  .object({
-    confirmPassword: z
-      .string()
-      .min(1, "Please confirm your password.")
-      .optional(),
-
-    // metadata
-    metadatas: z.array(z.any()),
-    // delayed reveal password logic
-    password: z.string().min(1, "A password is required.").optional(),
-    // delayed reveal placeholder
-    placeHolder: z
-      .object({
-        description: z.string().or(z.string().length(0)).optional(),
-        image: z.any().optional(),
-        name: z.string().min(1, "A name is required"),
-      })
-      .optional(),
-    revealType: z.literal("instant").or(z.literal("delayed")).optional(),
-
-    // shared logic
-    shuffle: z.boolean().default(false),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: "Passwords don't match",
-    path: ["confirmPassword"],
-  });
-
-type BatchLazyMintFormType = z.output<typeof BatchLazyMintFormSchema> & {
-  metadatas: NFTInput[];
-};
-
-function useBatchLazyMintForm() {
-  return useForm<BatchLazyMintFormType>({
-    defaultValues: {
-      metadatas: [],
-      revealType: undefined,
-      shuffle: false,
-    },
-    resolver: zodResolver(BatchLazyMintFormSchema),
-  });
-}
-
-export const BatchLazyMint: ComponentWithChildren<
-  BatchLazyMintProps & {
-    isLoggedIn: boolean;
-  }
-> = (props) => {
-  const [step, setStep] = useState(0);
-
-  const form = useBatchLazyMintForm();
-
-  const nftMetadatas = form.watch("metadatas");
-  const hasError = !!form.getFieldState("metadatas", form.formState).error;
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: async (acceptedFiles) => {
-      try {
-        await processInputData(acceptedFiles, (data) =>
-          form.setValue("metadatas", data),
-        );
-      } catch {
-        form.setError("metadatas", {
-          message: "Invalid metadata files",
-          type: "validate",
-        });
-      }
-
-      if (nftMetadatas.length === 0) {
-        form.setError("metadatas", {
-          message: "Invalid metadata files",
-          type: "validate",
-        });
-      }
-    },
-  });
-
-  const paginationPortalRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <form
-      className="mt-4 flex w-full flex-col"
-      onSubmit={form.handleSubmit((data) => {
-        // first shuffle
-        const shuffledMetadatas = data.shuffle
-          ? shuffleData(data.metadatas)
-          : data.metadatas;
-
-        // check submit is instant
-        if (data.revealType === "instant") {
-          return props.onSubmit({
-            data: { metadatas: shuffledMetadatas },
-            revealType: "instant",
-          });
-        }
-        // validate password
-        if (!data.password) {
-          form.setError("password", {
-            message: "A password is required for delayed reveal.",
-            type: "validate",
-          });
-          return;
-        }
-        // validate placeholder
-        if (!data.placeHolder?.name) {
-          form.setError("placeHolder.name", {
-            message: "A name is required for delayed reveal.",
-            type: "validate",
-          });
-        }
-        // submit
-        return props.onSubmit({
-          data: {
-            metadata: shuffledMetadatas,
-            password: data.password,
-            placeholderMetadata: {
-              description: data.placeHolder?.description,
-              image: data.placeHolder?.image,
-              name: data.placeHolder?.name,
-            },
-          },
-          revealType: "delayed",
-        });
-      })}
-    >
-      {step === 0 ? (
-        <div className="flex flex-col gap-6">
-          {nftMetadatas.length > 0 ? (
-            <>
-              <BatchTable
-                client={props.client}
-                data={nftMetadatas}
-                nextTokenIdToMint={props.nextTokenIdToMint}
-                portalRef={paginationPortalRef}
-              />
-              <div className="border-border border-t">
-                <div className="flex flex-col items-center justify-between p-0 md:flex-row md:p-4">
-                  <div ref={paginationPortalRef} />
-                  <div className="mt-4 flex w-full flex-row items-center gap-2 md:mt-0 md:w-auto">
-                    <Button
-                      borderRadius="md"
-                      isDisabled={!hasError}
-                      onClick={() => {
-                        form.reset();
-                      }}
-                      w={{ base: "100%", md: "auto" }}
-                    >
-                      Reset
-                    </Button>
-                    <Button
-                      borderRadius="md"
-                      colorScheme="primary"
-                      onClick={() => setStep(1)}
-                      w={{ base: "100%", md: "auto" }}
-                    >
-                      Next
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </>
-          ) : (
-            <UploadStep
-              getInputProps={getInputProps}
-              getRootProps={getRootProps}
-              hasFailed={hasError}
-              isDragActive={isDragActive}
-            />
-          )}
-        </div>
-      ) : (
-        <>
-          <Flex align="center" justify="space-between" mb={2} py={4} w="100%">
-            <div className="flex flex-row items-center gap-2">
-              <Button
-                className="text-muted-foreground"
-                onClick={() => setStep(0)}
-                variant="ghost"
-              >
-                <ChevronLeftIcon className="size-5 cursor-pointer" />
-              </Button>
-              <Heading className="my-auto" size="title.md">
-                When will you reveal your NFTs?
-              </Heading>
-            </div>
-          </Flex>
-          <SelectReveal
-            canCreateDelayedRevealBatch={props.canCreateDelayedRevealBatch}
-            client={props.client}
-            form={form}
-          />
-          {form.watch("revealType") && (
-            <>
-              <CheckboxWithLabel>
-                <Checkbox
-                  checked={form.watch("shuffle")}
-                  className="mt-3"
-                  onCheckedChange={(val) => form.setValue("shuffle", !!val)}
-                />
-                <div className="flex flex-col items-center gap-1 md:flex-row">
-                  <p>Shuffle the order of the NFTs before uploading.</p>
-                  <em>This is an off-chain operation and is not provable.</em>
-                </div>
-              </CheckboxWithLabel>
-              <div className="w-full md:w-[61%]">
-                <TransactionButton
-                  className="mt-4 w-full"
-                  client={props.client}
-                  disabled={!nftMetadatas.length}
-                  isLoggedIn={props.isLoggedIn}
-                  isPending={form.formState.isSubmitting}
-                  transactionCount={1}
-                  txChainID={props.chainId}
-                  type="submit"
-                >
-                  {form.formState.isSubmitting
-                    ? `Uploading ${nftMetadatas.length} NFTs`
-                    : `Upload ${nftMetadatas.length} NFTs`}
-                </TransactionButton>
-                {props.children}
-              </div>
-              <Text mt={2} size="body.sm">
-                <UnderlineLink
-                  className="text-primary-500"
-                  href="https://support.thirdweb.com/dashboard/n5evQ4EfEjEifczEQaZ1hL/batch-upload-troubleshooting/5WMQFqfaUTU1C8NM8FtJ2X"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Experiencing issues uploading your files?
-                </UnderlineLink>
-              </Text>
-            </>
-          )}
-        </>
-      )}
-    </form>
-  );
-};
-
-interface SelectRevealProps {
-  form: ReturnType<typeof useBatchLazyMintForm>;
-  canCreateDelayedRevealBatch: boolean;
-  client: ThirdwebClient;
-}
-
-const SelectReveal: React.FC<SelectRevealProps> = ({
-  form,
-  client,
-  canCreateDelayedRevealBatch,
-}) => {
-  const [show, setShow] = useState(false);
-
-  const imageUrl = form.watch("placeHolder.image");
-
-  return (
-    <Flex flexDir="column">
-      <Flex
-        flexDir={{ base: "column", md: "row" }}
-        gap={{ base: 3, md: 6 }}
-        mb={6}
-      >
-        <SelectOption
-          description="Collectors will immediately see the final NFT when they complete the minting"
-          isActive={form.watch("revealType") === "instant"}
-          name="Reveal upon mint"
-          onClick={() => form.setValue("revealType", "instant")}
-        />
-        <SelectOption
-          description="Collectors will mint your placeholder image, then you reveal at a later time"
-          disabled={!canCreateDelayedRevealBatch}
-          disabledText="This contract doesn't implement Delayed Reveal"
-          isActive={form.watch("revealType") === "delayed"}
-          name="Delayed Reveal"
-          onClick={() => form.setValue("revealType", "delayed")}
-        />
-      </Flex>
-      <div className="flex flex-col gap-3">
-        {form.watch("revealType") === "delayed" && (
-          <>
-            <Heading size="title.sm">Let&apos;s set a password</Heading>
-            <Alert borderRadius="lg" status="warning">
-              <AlertIcon />
-              You&apos;ll need this password to reveal your NFTs. Please save it
-              somewhere safe.
-            </Alert>
-
-            <Flex
-              flexDir={{ base: "column", md: "row" }}
-              gap={{ base: 4, md: 0 }}
-            >
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("password", form.formState).error
-                }
-                isRequired
-                mr={4}
-              >
-                <FormLabel>Password</FormLabel>
-                <InputGroup>
-                  <Input
-                    {...form.register("password")}
-                    placeholder="Choose password"
-                    type={show ? "text" : "password"}
-                  />
-                  <InputRightElement cursor="pointer">
-                    {show ? (
-                      <EyeIcon
-                        className="size-3"
-                        onClick={() => setShow(!show)}
-                      />
-                    ) : (
-                      <EyeOffIcon
-                        className="size-3"
-                        onClick={() => setShow(!show)}
-                      />
-                    )}
-                  </InputRightElement>
-                </InputGroup>
-
-                <FormErrorMessage>
-                  {
-                    form.getFieldState("password", form.formState).error
-                      ?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("confirmPassword", form.formState).error
-                }
-                isRequired
-              >
-                <FormLabel>Confirm password</FormLabel>
-                <Input
-                  {...form.register("confirmPassword")}
-                  placeholder="Confirm password"
-                  type="password"
-                />
-                <FormErrorMessage>
-                  {
-                    form.getFieldState("confirmPassword", form.formState).error
-                      ?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-            </Flex>
-            <div className="flex flex-col gap-5">
-              <Heading size="title.sm">Placeholder</Heading>
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("placeHolder.image", form.formState)
-                    .error
-                }
-              >
-                <FormLabel>Image</FormLabel>
-                <div className="w-auto md:w-[350px]">
-                  <FileInput
-                    accept={{ "image/*": [] }}
-                    className="rounded border border-border transition-all duration-200"
-                    client={client}
-                    setValue={(file) =>
-                      form.setValue("placeHolder.image", file)
-                    }
-                    showUploadButton
-                    value={imageUrl}
-                  />
-                </div>
-                <FormHelperText>
-                  You can optionally upload an image as the placeholder.
-                </FormHelperText>
-                <FormErrorMessage>
-                  {
-                    form.getFieldState("placeHolder.image", form.formState)
-                      .error?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("placeHolder.name", form.formState).error
-                }
-                isRequired
-              >
-                <FormLabel>Name</FormLabel>
-                <Input
-                  {...form.register("placeHolder.name")}
-                  placeholder="eg. My NFT (Coming soon)"
-                />
-                <FormErrorMessage>
-                  {
-                    form.getFieldState("placeHolder.name", form.formState).error
-                      ?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-              <FormControl
-                isInvalid={
-                  !!form.getFieldState("placeHolder.name", form.formState).error
-                }
-              >
-                <FormLabel>Description</FormLabel>
-                <Textarea
-                  {...form.register("placeHolder.description")}
-                  placeholder="eg. Reveal on July 15th!"
-                />
-                <FormErrorMessage>
-                  {
-                    form.getFieldState(
-                      "placeHolder.description",
-                      form.formState,
-                    ).error?.message
-                  }
-                </FormErrorMessage>
-              </FormControl>
-            </div>
-          </>
-        )}
-      </div>
-    </Flex>
-  );
-};
@@ -1,237 +0,0 @@
-/** biome-ignore-all lint/nursery/noNestedComponentDefinitions: FIXME */
-
-import { FilePreview } from "@app/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/file-preview";
-import {
-  Flex,
-  IconButton,
-  Portal,
-  Select,
-  Table,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@chakra-ui/react";
-import {
-  ChevronFirstIcon,
-  ChevronLastIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react";
-import { useMemo } from "react";
-import { type Column, usePagination, useTable } from "react-table";
-import type { ThirdwebClient } from "thirdweb";
-import type { NFTInput } from "thirdweb/utils";
-import { CodeClient } from "@/components/ui/code/code.client";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-
-interface BatchTableProps {
-  data: NFTInput[];
-  portalRef: React.RefObject<HTMLDivElement | null>;
-  nextTokenIdToMint?: bigint;
-  client: ThirdwebClient;
-}
-
-export const BatchTable: React.FC<BatchTableProps> = ({
-  data,
-  portalRef,
-  nextTokenIdToMint,
-  client,
-}) => {
-  const columns = useMemo(() => {
-    let cols: Column<NFTInput>[] = [];
-    if (nextTokenIdToMint !== undefined) {
-      cols = cols.concat({
-        accessor: (_row, index) => String(nextTokenIdToMint + BigInt(index)),
-        Header: "Token ID",
-      });
-    }
-
-    cols = cols.concat([
-      {
-        accessor: (row) => row.image,
-        Cell: ({ cell: { value } }: { cell: { value?: string } }) => (
-          <FilePreview
-            className="size-24 shrink-0 rounded-lg object-contain"
-            client={client}
-            srcOrFile={value}
-          />
-        ),
-        Header: "Image",
-      },
-      {
-        accessor: (row) => row.animation_url,
-        Cell: ({ cell: { value } }: { cell: { value?: string } }) => (
-          <FilePreview
-            className="size-24 shrink-0 rounded-lg"
-            client={client}
-            srcOrFile={value}
-          />
-        ),
-        Header: "Animation Url",
-      },
-      { accessor: (row) => row.name, Header: "Name" },
-      {
-        accessor: (row) => (
-          <ToolTipLabel label={row.description}>
-            <p className="line-clamp-6 whitespace-pre-wrap">
-              {row.description}
-            </p>
-          </ToolTipLabel>
-        ),
-        Header: "Description",
-      },
-      {
-        accessor: (row) => row.attributes || row.properties,
-        // biome-ignore lint/suspicious/noExplicitAny: FIXME
-        Cell: ({ cell }: { cell: any }) =>
-          cell.value ? (
-            <CodeClient
-              code={JSON.stringify(cell.value || {}, null, 2)}
-              lang="json"
-              scrollableClassName="max-w-[300px]"
-            />
-          ) : null,
-        Header: "Attributes",
-      },
-      { accessor: (row) => row.external_url, Header: "External URL" },
-      { accessor: (row) => row.background_color, Header: "Background Color" },
-    ]);
-    return cols;
-  }, [nextTokenIdToMint, client]);
-
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    // Instead of using 'rows', we'll use page,
-    page,
-    // which has only the rows for the active page
-
-    // The rest of these things are super handy, too ;)
-    canPreviousPage,
-    canNextPage,
-    pageOptions,
-    pageCount,
-    gotoPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-    state: { pageIndex, pageSize },
-  } = useTable(
-    {
-      columns,
-      data,
-      initialState: {
-        pageIndex: 0,
-        pageSize: 50,
-      },
-    },
-    // will be fixed with @tanstack/react-table v8
-    // eslint-disable-next-line react-compiler/react-compiler
-    usePagination,
-  );
-
-  // Render the UI for your table
-  return (
-    <Flex flexGrow={1} overflow="auto">
-      <TableContainer className="w-full" maxW="100%">
-        <Table {...getTableProps()}>
-          <Thead>
-            {headerGroups.map((headerGroup, index) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-              <Tr {...headerGroup.getHeaderGroupProps()} key={index}>
-                {headerGroup.headers.map((column, i) => (
-                  // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                  <Th {...column.getHeaderProps()} border="none" key={i}>
-                    <p className="text-muted-foreground">
-                      {column.render("Header")}
-                    </p>
-                  </Th>
-                ))}
-              </Tr>
-            ))}
-          </Thead>
-          <Tbody {...getTableBodyProps()}>
-            {page.map((row, rowIndex) => {
-              prepareRow(row);
-              return (
-                <Tr
-                  {...row.getRowProps()}
-                  _last={{ borderBottomWidth: 0 }}
-                  borderBottomWidth={1}
-                  // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                  key={rowIndex}
-                >
-                  {row.cells.map((cell, cellIndex) => {
-                    return (
-                      <Td
-                        {...cell.getCellProps()}
-                        borderBottomWidth="inherit"
-                        borderColor="borderColor"
-                        // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                        key={cellIndex}
-                      >
-                        {cell.render("Cell")}
-                      </Td>
-                    );
-                  })}
-                </Tr>
-              );
-            })}
-          </Tbody>
-        </Table>
-      </TableContainer>
-      <Portal containerRef={portalRef}>
-        <div className="flex w-full items-center justify-center">
-          <div className="flex flex-row items-center gap-2">
-            <IconButton
-              aria-label="first page"
-              icon={<ChevronFirstIcon className="size-4" />}
-              isDisabled={!canPreviousPage}
-              onClick={() => gotoPage(0)}
-            />
-            <IconButton
-              aria-label="previous page"
-              icon={<ChevronLeftIcon className="size-4" />}
-              isDisabled={!canPreviousPage}
-              onClick={() => previousPage()}
-            />
-            <p className="whitespace-nowrap">
-              Page <strong>{pageIndex + 1}</strong> of{" "}
-              <strong>{pageOptions.length}</strong>
-            </p>
-            <IconButton
-              aria-label="next page"
-              icon={<ChevronRightIcon className="size-4" />}
-              isDisabled={!canNextPage}
-              onClick={() => nextPage()}
-            />
-            <IconButton
-              aria-label="last page"
-              icon={<ChevronLastIcon className="size-4" />}
-              isDisabled={!canNextPage}
-              onClick={() => gotoPage(pageCount - 1)}
-            />
-
-            <Select
-              onChange={(e) => {
-                setPageSize(Number.parseInt(e.target.value as string, 10));
-              }}
-              value={pageSize}
-            >
-              <option value="25">25</option>
-              <option value="50">50</option>
-              <option value="100">100</option>
-              <option value="250">250</option>
-              <option value="500">500</option>
-            </Select>
-          </div>
-        </div>
-      </Portal>
-    </Flex>
-  );
-};
@@ -1,137 +0,0 @@
-import { UploadIcon } from "lucide-react";
-import { InlineCode } from "@/components/ui/inline-code";
-import { UnorderedList } from "@/components/ui/List/List";
-import { cn } from "@/lib/utils";
-
-interface UploadStepProps {
-  // biome-ignore lint/suspicious/noExplicitAny: FIXME
-  getRootProps: any;
-  // biome-ignore lint/suspicious/noExplicitAny: FIXME
-  getInputProps: any;
-  hasFailed: boolean;
-  isDragActive: boolean;
-}
-
-export const UploadStep: React.FC<UploadStepProps> = ({
-  getRootProps,
-  hasFailed,
-  isDragActive,
-  getInputProps,
-}) => {
-  return (
-    <div className="flex flex-col items-center gap-8 md:flex-row">
-      <div className="relative aspect-square w-full md:w-1/2">
-        <div
-          className={cn(
-            "flex h-full cursor-pointer rounded-md border border-border hover:border-blue-500",
-            hasFailed ? "bg-red-200" : "bg-background",
-          )}
-          {...getRootProps()}
-        >
-          <input {...getInputProps()} />
-          <div className="m-auto flex flex-col p-6">
-            <UploadIcon
-              className={cn(
-                "mx-auto mb-2 size-8",
-                hasFailed ? "text-red-500" : "text-gray-600",
-              )}
-            />
-            {isDragActive ? (
-              <p className="text-center text-muted-foreground">
-                Drop the files here
-              </p>
-            ) : (
-              <p
-                className={cn(
-                  "text-center leading-[1.2]",
-                  hasFailed ? "text-red-500" : "text-muted-foreground",
-                )}
-              >
-                {hasFailed
-                  ? `No valid CSV or JSON file found. Please make sure your NFT metadata includes at least a "name" field and try again.`
-                  : "Drag & Drop files or folders here, or click to select files"}
-              </p>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="flex w-full flex-col gap-2 md:w-1/2">
-        <p className="text-lg">Requirements</p>
-        <UnorderedList>
-          <li>
-            Files <em>must</em> contain one .csv or .json file with metadata. -{" "}
-            <a
-              className="text-link-foreground hover:text-foreground"
-              download
-              href="/assets/examples/example.csv"
-            >
-              Download example.csv
-            </a>
-            .{" "}
-            <a
-              className="text-link-foreground hover:text-foreground"
-              download
-              href="/assets/examples/example.json"
-            >
-              Download example.json
-            </a>
-            .
-          </li>
-          <li>
-            The csv <em>must</em> have a <InlineCode code="name" /> column,
-            which defines the name of the NFT.
-          </li>
-          <li>
-            Asset names <em>must</em> be sequential 0,1,2,3...n.[extension]. It
-            doesn&apos;t matter at what number you begin. (Example:{" "}
-            <InlineCode code="131.png" />, <InlineCode code="132.png" />
-            ).
-          </li>
-          <li>
-            Make sure to drag and drop the CSV/JSON and the images{" "}
-            <strong>at the same time</strong>.
-          </li>
-        </UnorderedList>
-        <p className="mt-4 text-lg">Options</p>
-        <UnorderedList>
-          <li>
-            Images and other file types can be used in combination.
-            <br />
-            <small>
-              They both have to follow the asset naming convention above.
-              (Example: <InlineCode code="0.png" /> and{" "}
-              <InlineCode code="0.mp4" />,<InlineCode code="1.png" /> and{" "}
-              <InlineCode code="1.glb" />, etc.)
-            </small>
-          </li>
-          <li>
-            When uploading files, we will upload them and pin them to IPFS
-            automatically for you. If you already have the files uploaded, you
-            can add an <InlineCode code="image" /> and/or
-            <InlineCode code="animation_url" /> column and add the IPFS hashes
-            there.{" "}
-            <a
-              className="text-link-foreground hover:text-foreground"
-              download
-              href="/assets/examples/example-with-ipfs.csv"
-            >
-              Download example.csv
-            </a>
-          </li>
-          <li>
-            If you want to make your media files map to your NFTs, you can add
-            the name of your files to the <InlineCode code="image" /> and
-            <InlineCode code="animation_url" /> column.{" "}
-            <a
-              className="text-link-foreground hover:text-foreground"
-              download
-              href="/assets/examples/example-with-maps.csv"
-            >
-              Download example.csv
-            </a>
-          </li>
-        </UnorderedList>
-      </div>
-    </div>
-  );
-};
@@ -1,146 +0,0 @@
-import { formatDistance } from "date-fns";
-import { CircleAlertIcon } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-import type { ThirdwebClient } from "thirdweb";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import type { Account, BillingCredit } from "@/hooks/useApi";
-import { useLocalStorage } from "@/hooks/useLocalStorage";
-import { ChainIconClient } from "@/icons/ChainIcon";
-import { formatToDollars } from "./formatToDollars";
-
-interface CreditsItemProps {
-  credit?: BillingCredit;
-  isOpCreditDefault?: boolean;
-  onClickApply?: () => void;
-  twAccount: Account;
-  client: ThirdwebClient;
-  teamSlug: string;
-}
-
-export const CreditsItem: React.FC<CreditsItemProps> = ({
-  credit,
-  isOpCreditDefault,
-  onClickApply,
-  twAccount,
-  client,
-  teamSlug,
-}) => {
-  const [hasAppliedForOpGrant] = useLocalStorage(
-    `appliedForOpGrant-${twAccount.id}`,
-    false,
-  );
-
-  const isOpCredit = credit?.name.startsWith("OP -") || isOpCreditDefault;
-  const isTwCredit = credit?.name.startsWith("TW -");
-  const isStartupCredit = credit?.name.startsWith("SU -");
-
-  let creditTitle = credit?.name ?? "thirdweb credits";
-  if (isOpCredit) {
-    creditTitle = "Optimism sponsorship credits";
-  } else if (isTwCredit) {
-    creditTitle = "thirdweb credits";
-  } else if (isStartupCredit) {
-    creditTitle = "Startup grant credits";
-  }
-
-  return (
-    <div className="rounded-lg border border-border bg-card">
-      <div className="flex flex-col gap-3 p-4 lg:p-6">
-        <div className="relative">
-          <div className="absolute top-0 right-0">
-            {isOpCredit ? (
-              <ChainIconClient
-                className="size-6"
-                client={client}
-                src="ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/optimism/512.png"
-              />
-            ) : isTwCredit ? (
-              <Image
-                alt="tw-credit"
-                className="size-6"
-                objectFit="contain"
-                src={require("../../../../public/brand/thirdweb-icon.svg")}
-              />
-            ) : isStartupCredit ? (
-              <Image
-                alt="tw-credit"
-                className="size-6"
-                objectFit="contain"
-                src={require("../../../../public/brand/thirdweb-icon.svg")}
-              />
-            ) : null}
-          </div>
-
-          <h3 className="font-semibold text-foreground text-xl tracking-tight">
-            {creditTitle}
-          </h3>
-        </div>
-
-        <div className="flex gap-6">
-          <div>
-            <h4 className="mb-0.5 text-muted-foreground text-sm">
-              Remaining Credits
-            </h4>
-            <p className="text-foreground">
-              {formatToDollars(credit?.remainingValueUsdCents || 0)}
-            </p>
-          </div>
-
-          {!isTwCredit && (
-            <div>
-              <h4 className="mb-0.5 text-muted-foreground text-sm">
-                Claimed Credits (All-Time)
-              </h4>
-              <p className="text-foreground">
-                {formatToDollars(credit?.originalGrantUsdCents || 0)}
-              </p>
-            </div>
-          )}
-
-          {credit?.expiresAt && (
-            <div>
-              <h4 className="mb-0.5 text-muted-foreground text-sm">Expires</h4>
-              <p className="text-foreground">
-                {credit?.expiresAt
-                  ? formatDistance(new Date(credit.expiresAt), Date.now(), {
-                      addSuffix: true,
-                    })
-                  : "N/A"}
-              </p>
-            </div>
-          )}
-        </div>
-
-        {hasAppliedForOpGrant && !credit && isOpCredit && (
-          <Alert variant="info">
-            <CircleAlertIcon className="size-5" />
-            <AlertTitle>Grant application pending approval</AlertTitle>
-            <AlertDescription>
-              You will receive an email once your application&apos;s status
-              changes.
-            </AlertDescription>
-          </Alert>
-        )}
-      </div>
-
-      {!hasAppliedForOpGrant && isOpCredit && (
-        <div className="mt-2 flex justify-end border-t px-4 py-4 lg:px-6">
-          <Button asChild size="sm" variant="outline">
-            <Link
-              href={`/team/${teamSlug}/~/settings/credits`}
-              onClick={() => {
-                if (onClickApply) {
-                  onClickApply();
-                }
-              }}
-            >
-              Apply Now
-            </Link>
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
@@ -1,43 +0,0 @@
-"use client";
-
-// TODO - convert to RSC
-
-import type { ThirdwebClient } from "thirdweb";
-import { type Account, useAccountCredits } from "@/hooks/useApi";
-import { CreditsItem } from "./CreditsItem";
-
-export const CreditsInfoCard = (props: {
-  twAccount: Account;
-  client: ThirdwebClient;
-  teamSlug: string;
-}) => {
-  const { data: credits } = useAccountCredits();
-
-  if (!credits) {
-    return null;
-  }
-
-  const opCredit = credits.find((crd) => crd.name.startsWith("OP -"));
-  const restCredits = credits.filter((crd) => !crd.name.startsWith("OP -"));
-
-  return (
-    <section className="flex flex-col gap-4">
-      <CreditsItem
-        client={props.client}
-        credit={opCredit}
-        isOpCreditDefault={true}
-        teamSlug={props.teamSlug}
-        twAccount={props.twAccount}
-      />
-      {restCredits?.map((credit) => (
-        <CreditsItem
-          client={props.client}
-          credit={credit}
-          key={credit.couponId}
-          teamSlug={props.teamSlug}
-          twAccount={props.twAccount}
-        />
-      ))}
-    </section>
-  );
-};
@@ -1,7 +1,7 @@
 "use client";
 import { AlertTriangleIcon } from "lucide-react";
 import Link from "next/link";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { ProductSKU } from "@/types/billing";
@@ -60,7 +60,7 @@ function BillingWarning({ teamSlug }: { teamSlug: string }) {
        You have outstanding invoices. Please{" "}
        <Link
          className="font-medium text-amber-700 underline transition-colors hover:text-amber-900 dark:text-amber-400 dark:hover:text-amber-300"
-          href={`/team/${teamSlug}/~/settings/invoices?status=open`}
+          href={`/team/${teamSlug}/~/billing/invoices?status=open`}
        >
          pay them
        </Link>{" "}
@@ -2,9 +2,9 @@
 import { CheckIcon, DollarSignIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { CheckoutButton } from "@/components/billing/billing";
-import { RenewSubscriptionButton } from "@/components/billing/renew-subscription/renew-subscription-button";
+import { RenewSubscriptionButton } from "@/components/billing/renew-subscription-button";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
@@ -5,12 +5,12 @@ import { RefreshCwIcon } from "lucide-react";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
 import { reSubscribePlan } from "@/actions/billing";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { pollWithTimeout } from "../../../utils/pollWithTimeout";
-import { tryCatch } from "../../../utils/try-catch";
+import { pollWithTimeout } from "@/utils/pollWithTimeout";
+import { tryCatch } from "@/utils/try-catch";

 export function RenewSubscriptionButton(props: {
  teamId: string;
@@ -0,0 +1,252 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { Chain } from "thirdweb";
+import { BuyWidget, SwapWidget } from "thirdweb/react";
+import {
+  reportAssetBuyCancelled,
+  reportAssetBuyFailed,
+  reportAssetBuySuccessful,
+  reportSwapWidgetShown,
+  reportTokenBuyCancelled,
+  reportTokenBuyFailed,
+  reportTokenBuySuccessful,
+  reportTokenSwapCancelled,
+  reportTokenSwapFailed,
+  reportTokenSwapSuccessful,
+} from "@/analytics/report";
+import { Button } from "@/components/ui/button";
+import {
+  NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID,
+} from "@/constants/public-envs";
+import { cn } from "@/lib/utils";
+import { parseError } from "@/utils/errorParser";
+import { getSDKTheme } from "@/utils/sdk-component-theme";
+import { getConfiguredThirdwebClient } from "../../constants/thirdweb.server";
+
+type PageType = "asset" | "bridge" | "chain";
+
+export function BuyAndSwapEmbed(props: {
+  chain: Chain;
+  tokenAddress: string | undefined;
+  buyAmount: string | undefined;
+  pageType: PageType;
+  isTestnet: boolean | undefined;
+}) {
+  const { theme } = useTheme();
+  const [tab, setTab] = useState<"buy" | "swap">("swap");
+  const themeObj = getSDKTheme(theme === "light" ? "light" : "dark");
+  const isMounted = useRef(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (isMounted.current) {
+      return;
+    }
+    isMounted.current = true;
+    reportSwapWidgetShown({
+      pageType: props.pageType,
+    });
+  }, [props.pageType]);
+
+  const client = useMemo(() => {
+    return getConfiguredThirdwebClient({
+      clientId:
+        props.pageType === "asset"
+          ? NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID
+          : props.pageType === "bridge"
+            ? NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID
+            : props.pageType === "chain"
+              ? NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID
+              : undefined,
+      secretKey: undefined,
+      teamId: undefined,
+    });
+  }, [props.pageType]);
+
+  return (
+    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10 shadow-xl min-w-0">
+      <div className="flex gap-2.5 p-4 border-b border-dashed">
+        <TabButton
+          label="Swap"
+          onClick={() => setTab("swap")}
+          isActive={tab === "swap"}
+        />
+        <TabButton
+          label="Buy"
+          onClick={() => setTab("buy")}
+          isActive={tab === "buy"}
+        />
+      </div>
+
+      {tab === "buy" && (
+        <BuyWidget
+          amount={props.buyAmount || "1"}
+          chain={props.chain}
+          className="!rounded-2xl !border-none"
+          title=""
+          client={client}
+          connectOptions={{
+            autoConnect: false,
+          }}
+          onError={(e, quote) => {
+            const errorMessage = parseError(e);
+
+            reportTokenBuyFailed({
+              buyTokenChainId:
+                quote?.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote?.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote?.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote?.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
+            if (props.pageType === "asset") {
+              reportAssetBuyFailed({
+                assetType: "coin",
+                chainId: props.chain.id,
+                error: errorMessage,
+                contractType: undefined,
+                is_testnet: props.isTestnet,
+              });
+            }
+          }}
+          onCancel={(quote) => {
+            reportTokenBuyCancelled({
+              buyTokenChainId:
+                quote?.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote?.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote?.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote?.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
+            if (props.pageType === "asset") {
+              reportAssetBuyCancelled({
+                assetType: "coin",
+                chainId: props.chain.id,
+                contractType: undefined,
+                is_testnet: props.isTestnet,
+              });
+            }
+          }}
+          onSuccess={(quote) => {
+            reportTokenBuySuccessful({
+              buyTokenChainId:
+                quote.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
+            if (props.pageType === "asset") {
+              reportAssetBuySuccessful({
+                assetType: "coin",
+                chainId: props.chain.id,
+                contractType: undefined,
+                is_testnet: props.isTestnet,
+              });
+            }
+          }}
+          theme={themeObj}
+          tokenAddress={props.tokenAddress as `0x${string}`}
+          paymentMethods={["card"]}
+        />
+      )}
+
+      {tab === "swap" && (
+        <SwapWidget
+          client={client}
+          theme={themeObj}
+          className="!rounded-2xl !border-none"
+          prefill={{
+            // buy this token by default
+            buyToken: {
+              chainId: props.chain.id,
+              tokenAddress: props.tokenAddress,
+            },
+            // sell the native token by default (but if buytoken is a native token, don't set)
+            sellToken: props.tokenAddress
+              ? {
+                  chainId: props.chain.id,
+                }
+              : undefined,
+          }}
+          onError={(error, quote) => {
+            const errorMessage = parseError(error);
+            reportTokenSwapFailed({
+              errorMessage: errorMessage,
+              buyTokenChainId: quote.intent.destinationChainId,
+              buyTokenAddress: quote.intent.destinationTokenAddress,
+              sellTokenChainId: quote.intent.originChainId,
+              sellTokenAddress: quote.intent.originTokenAddress,
+              pageType: props.pageType,
+            });
+          }}
+          onSuccess={(quote) => {
+            reportTokenSwapSuccessful({
+              buyTokenChainId: quote.intent.destinationChainId,
+              buyTokenAddress: quote.intent.destinationTokenAddress,
+              sellTokenChainId: quote.intent.originChainId,
+              sellTokenAddress: quote.intent.originTokenAddress,
+              pageType: props.pageType,
+            });
+          }}
+          onCancel={(quote) => {
+            reportTokenSwapCancelled({
+              buyTokenChainId: quote.intent.destinationChainId,
+              buyTokenAddress: quote.intent.destinationTokenAddress,
+              sellTokenChainId: quote.intent.originChainId,
+              sellTokenAddress: quote.intent.originTokenAddress,
+              pageType: props.pageType,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function TabButton(props: {
+  label: string;
+  onClick: () => void;
+  isActive: boolean;
+}) {
+  return (
+    <Button
+      onClick={props.onClick}
+      className={cn(
+        "rounded-full text-muted-foreground px-5 text-base bg-accent",
+        props.isActive && "text-foreground border-foreground",
+      )}
+      variant="outline"
+    >
+      {props.label}
+    </Button>
+  );
+}
@@ -1,3 +1,4 @@
+import { ArrowLeftIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { isAddress, NATIVE_TOKEN_ADDRESS, ZERO_ADDRESS } from "thirdweb";
 import { Button } from "@/components/ui/button";
@@ -109,10 +110,10 @@ export function CurrencySelector({
          className="rounded-r-none rounded-l-md"
          onClick={() => setIsAddingCurrency(false)}
        >
-          &lt;-
+          <ArrowLeftIcon className="size-4" />
        </Button>
        <Input
-          className="w-full rounded-none"
+          className={cn("w-full rounded-none", className)}
          onChange={(e) => setEditCustomCurrency(e.target.value)}
          placeholder="ERC20 Address"
          required
@@ -156,7 +157,7 @@ export function CurrencySelector({
              : value?.toLowerCase()
        }
      >
-        <SelectTrigger>
+        <SelectTrigger className={className}>
          <SelectValue placeholder="Select Currency" />
        </SelectTrigger>
        <SelectContent>
@@ -10,7 +10,7 @@ import {
  DialogTitle,
  DialogTrigger,
 } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "../../lib/utils";
 import { DynamicHeight } from "../ui/DynamicHeight";

@@ -3,7 +3,7 @@ import { DownloadIcon } from "lucide-react";
 import Papa from "papaparse";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "../../lib/utils";

 export function ExportToCSVButton(props: {
@@ -1,4 +1,3 @@
-import { FilePreview } from "@app/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/file-preview";
 import { FilePlusIcon, UploadIcon } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 import {
@@ -8,6 +7,7 @@ import {
  useDropzone,
 } from "react-dropzone";
 import type { ThirdwebClient } from "thirdweb";
+import { FilePreview } from "@/components/blocks/file-preview";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";

@@ -2,6 +2,7 @@ import { AsteriskIcon, InfoIcon } from "lucide-react";
 import type React from "react";
 import { Label } from "@/components/ui/label";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { cn } from "../../lib/utils";

 export function FormFieldSetup(props: {
  htmlFor?: string;
@@ -10,13 +11,22 @@ export function FormFieldSetup(props: {
  children: React.ReactNode;
  tooltip?: React.ReactNode;
  isRequired: boolean;
+  labelClassName?: string;
+  labelContainerClassName?: string;
  helperText?: React.ReactNode;
  className?: string;
 }) {
  return (
    <div className={props.className}>
-      <div className="mb-2 inline-flex items-center gap-1">
-        <Label htmlFor={props.htmlFor}>{props.label}</Label>
+      <div
+        className={cn(
+          "mb-2 inline-flex items-center gap-1",
+          props.labelContainerClassName,
+        )}
+      >
+        <Label htmlFor={props.htmlFor} className={props.labelClassName}>
+          {props.label}
+        </Label>

        {props.isRequired && (
          <AsteriskIcon className="size-3.5 text-destructive-text" />
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Label } from "@/components/ui/label";
 import {
  Select,
@@ -1,6 +1,6 @@
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { ToolTipLabel } from "@/components/ui/tooltip";
@@ -44,7 +44,7 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
            <div className="flex w-full flex-col gap-2">
              <Button asChild className="justify-start gap-2" size="sm">
                <Link
-                  href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true&highlight=${props.requiredPlan}`}
+                  href={`/team/${props.teamSlug}/~/billing?showPlans=true&highlight=${props.requiredPlan}`}
                  rel="noopener noreferrer"
                  target="_blank"
                >
@@ -1,87 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 "use client";
-import { useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";

-type imgElementProps = React.DetailedHTMLProps<
-  React.ImgHTMLAttributes<HTMLImageElement>,
-  HTMLImageElement
-> & {
-  skeleton?: React.ReactNode;
-  fallback?: React.ReactNode;
-  src: string | undefined;
-  containerClassName?: string;
-};
-
-export function Img(props: imgElementProps) {
-  const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
-    "pending",
-  );
-  const status =
-    props.src === undefined
-      ? "pending"
-      : props.src === ""
-        ? "fallback"
-        : _status;
-  const { className, fallback, skeleton, containerClassName, ...restProps } =
-    props;
-  const defaultSkeleton = <div className="animate-pulse bg-accent" />;
-  const defaultFallback = <div className="bg-accent" />;
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  useIsomorphicLayoutEffect(() => {
-    const imgEl = imgRef.current;
-    if (!imgEl) {
-      return;
-    }
-    if (imgEl.complete) {
-      setStatus("loaded");
-    } else {
-      function handleLoad() {
-        setStatus("loaded");
-      }
-      imgEl.addEventListener("load", handleLoad);
-      return () => {
-        imgEl.removeEventListener("load", handleLoad);
-      };
-    }
-  }, []);
-
-  return (
-    <div className={cn("relative shrink-0", containerClassName)}>
-      <img
-        {...restProps}
-        // avoid setting empty src string to prevent request to the entire page
-        alt={restProps.alt || ""}
-        className={cn(
-          "fade-in-0 object-cover transition-opacity duration-300",
-          className,
-        )}
-        decoding="async"
-        onError={() => {
-          setStatus("fallback");
-        }}
-        ref={imgRef}
-        src={restProps.src || undefined}
-        style={{
-          opacity: status === "loaded" ? 1 : 0,
-          ...restProps.style,
-        }}
-      />
-
-      {status !== "loaded" && (
-        <div
-          className={cn(
-            "fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
-            className,
-          )}
-          style={restProps.style}
-        >
-          {status === "pending" && (skeleton || defaultSkeleton)}
-          {status === "fallback" && (fallback || defaultFallback)}
-        </div>
-      )}
-    </div>
-  );
-}
+export { Img } from "@workspace/ui/components/img";
@@ -53,7 +53,7 @@ export function MobileSidebar(props: {
  );
 }

-export function useActiveSidebarLink(links: SidebarLink[]) {
+function useActiveSidebarLink(links: SidebarLink[]) {
  const pathname = usePathname();

  const activeLink = useMemo(() => {
@@ -1,7 +1,7 @@
 "use client";

 import { useCallback, useMemo } from "react";
-import type { ThirdwebClient } from "thirdweb";
+import type { Bridge, ThirdwebClient } from "thirdweb";
 import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
@@ -29,16 +29,18 @@ export function MultiNetworkSelector(props: {
  client: ThirdwebClient;
  chainIds?: number[];
 }) {
-  let { allChains, idToChain } = useAllChainsData();
-
-  if (props.chainIds && props.chainIds.length > 0) {
-    allChains = allChains.filter((chain) =>
-      props.chainIds?.includes(chain.chainId),
-    );
-  }
+  const { allChains, idToChain } = useAllChainsData();

  const options = useMemo(() => {
-    let sortedChains = allChains;
+    let chains = allChains.filter((chain) => chain.status !== "deprecated");
+
+    if (props.chainIds && props.chainIds.length > 0) {
+      chains = allChains.filter((chain) =>
+        props.chainIds?.includes(chain.chainId),
+      );
+    }
+
+    let sortedChains = chains;

    if (props.priorityChains) {
      const priorityChainsSet = new Set();
@@ -69,7 +71,13 @@ export function MultiNetworkSelector(props: {
        value: String(chain.chainId),
      };
    });
-  }, [allChains, props.priorityChains, idToChain, props.hideTestnets]);
+  }, [
+    allChains,
+    props.priorityChains,
+    idToChain,
+    props.hideTestnets,
+    props.chainIds,
+  ]);

  const searchFn = useCallback(
    (option: Option, searchValue: string) => {
@@ -152,25 +160,59 @@ export function SingleNetworkSelector(props: {
  disableChainId?: boolean;
  align?: "center" | "start" | "end";
  disableTestnets?: boolean;
+  disableDeprecated?: boolean;
  placeholder?: string;
  client: ThirdwebClient;
+  priorityChains?: number[];
 }) {
  const { allChains, idToChain } = useAllChainsData();

  const chainsToShow = useMemo(() => {
    let chains = allChains;

+    chains = chains.filter((chain) => chain.status !== "deprecated");
+
    if (props.disableTestnets) {
      chains = chains.filter((chain) => !chain.testnet);
    }

+    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),
+      );
+
+      chains = [...priorityChains, ...otherChains];
+    }
+
    if (props.chainIds) {
      const chainIdSet = new Set(props.chainIds);
      chains = chains.filter((chain) => chainIdSet.has(chain.chainId));
    }

+    if (props.disableDeprecated) {
+      chains = chains.filter((chain) => chain.status !== "deprecated");
+    }
+
    return chains;
-  }, [allChains, props.chainIds, props.disableTestnets]);
+  }, [
+    allChains,
+    props.chainIds,
+    props.disableTestnets,
+    props.disableDeprecated,
+    props.priorityChains,
+    idToChain,
+  ]);

  const options = useMemo(() => {
    return chainsToShow.map((chain) => {
@@ -254,3 +296,89 @@ export function SingleNetworkSelector(props: {
    />
  );
 }
+
+type BridgeNetworkSelectorProps = {
+  chainId: number | undefined;
+  onChange: (chainId: number) => void;
+  className?: string;
+  popoverContentClassName?: string;
+  side?: "left" | "right" | "top" | "bottom";
+  align?: "center" | "start" | "end";
+  placeholder?: string;
+  client: ThirdwebClient;
+  chains: Bridge.chains.Result;
+};
+
+export function BridgeNetworkSelector(props: BridgeNetworkSelectorProps) {
+  const options = useMemo(() => {
+    return props.chains.map((chain) => {
+      return {
+        label: cleanChainName(chain.name),
+        value: String(chain.chainId),
+      };
+    });
+  }, [props.chains]);
+
+  const searchFn = useCallback(
+    (option: Option, searchValue: string) => {
+      const chain = props.chains.find(
+        (chain) => chain.chainId === Number(option.value),
+      );
+      if (!chain) {
+        return false;
+      }
+
+      if (Number.isInteger(Number.parseInt(searchValue))) {
+        return String(chain.chainId).startsWith(searchValue);
+      }
+      return chain.name.toLowerCase().includes(searchValue.toLowerCase());
+    },
+    [props.chains],
+  );
+
+  const renderOption = useCallback(
+    (option: Option) => {
+      const chain = props.chains.find(
+        (chain) => chain.chainId === Number(option.value),
+      );
+      if (!chain) {
+        return option.label;
+      }
+
+      return (
+        <div className="flex justify-between gap-4">
+          <span className="flex grow gap-2 truncate text-left">
+            <ChainIconClient
+              className="size-5"
+              client={props.client}
+              src={chain.icon}
+              loading="lazy"
+            />
+            {cleanChainName(chain.name)}
+          </span>
+        </div>
+      );
+    },
+    [props.chains, props.client],
+  );
+
+  return (
+    <SelectWithSearch
+      align={props.align}
+      className={props.className}
+      closeOnSelect={true}
+      onValueChange={(chainId) => {
+        props.onChange(Number(chainId));
+      }}
+      options={options}
+      overrideSearchFn={searchFn}
+      placeholder={props.placeholder || "Select Chain"}
+      popoverContentClassName={props.popoverContentClassName}
+      renderOption={renderOption}
+      searchPlaceholder="Search by Name or Chain ID"
+      showCheck={false}
+      side={props.side}
+      value={props.chainId?.toString()}
+    />
+  );
+}
@@ -1,6 +1,6 @@
 import type React from "react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { cn } from "@/lib/utils";

 export function SettingsCard(
@@ -1,24 +1,7 @@
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSubItem,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-} from "@/components/ui/sidebar";
+"use client";
+
 import { cn } from "../../lib/utils";
-import { AppFooter } from "../footers/app-footer";
-import { NavLink } from "../ui/NavLink";
-import { Separator } from "../ui/separator";
-import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
+import { MobileSidebar } from "./MobileSidebar";
 import { CustomSidebar, type SidebarLink } from "./Sidebar";

 export function SidebarLayout(props: {
@@ -51,129 +34,3 @@ 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 className="pt-2" collapsible="icon" side="left">
-        <SidebarContent className="p-2">
-          <RenderSidebarMenu links={contentSidebarLinks} />
-        </SidebarContent>
-
-        {footerSidebarLinks && (
-          <SidebarFooter className="pb-3">
-            <RenderSidebarMenu links={footerSidebarLinks} />
-          </SidebarFooter>
-        )}
-
-        <SidebarRail />
-      </Sidebar>
-
-      {/* right - content */}
-      <div className="flex h-full flex-grow flex-col overflow-y-auto">
-        <MobileSidebarTrigger
-          links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
-        />
-
-        <main className="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;
-}) {
-  return (
-    <SidebarGroup className="p-0">
-      <SidebarMenuItem>
-        <SidebarGroupLabel> {props.groupName}</SidebarGroupLabel>
-        <SidebarGroupContent>
-          <RenderSidebarMenu links={props.sidebarLinks} />
-        </SidebarGroupContent>
-      </SidebarMenuItem>
-    </SidebarGroup>
-  );
-}
-
-function RenderSidebarMenu(props: { links: SidebarLink[] }) {
-  const sidebar = useSidebar();
-  return (
-    <SidebarMenu className="gap-1.5">
-      {props.links.map((link, idx) => {
-        // link
-        if ("href" in link) {
-          return (
-            <SidebarMenuSubItem key={link.href}>
-              <SidebarMenuButton asChild>
-                <NavLink
-                  activeClassName="text-foreground bg-accent"
-                  className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
-                  exactMatch={link.exactMatch}
-                  href={link.href}
-                  isActive={link.isActive}
-                  onClick={() => {
-                    sidebar.setOpenMobile(false);
-                  }}
-                >
-                  {link.icon && <link.icon className="size-4" />}
-                  <span>{link.label}</span>
-                </NavLink>
-              </SidebarMenuButton>
-            </SidebarMenuSubItem>
-          );
-        }
-
-        // separator
-        if ("separator" in link) {
-          return (
-            <SidebarSeparator
-              className="my-1"
-              key={`separator-${
-                // biome-ignore lint/suspicious/noArrayIndexKey: index is fine here
-                idx
-              }`}
-            />
-          );
-        }
-
-        // group
-        return (
-          <RenderSidebarGroup
-            groupName={link.group}
-            key={link.group}
-            sidebarLinks={link.links}
-          />
-        );
-      })}
-    </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 className="h-4" orientation="vertical" />
-      {activeLink && <span className="text-sm">{activeLink.label}</span>}
-    </div>
-  );
-}
@@ -10,13 +10,14 @@ interface SignatureOption {

 interface SignatureSelectorProps {
  options: SignatureOption[];
-  value: string;
-  onChange: (val: string) => void;
+  value: string | string[];
+  onChange: (val: string | string[]) => void;
  setAbi?: (abi: string) => void;
  placeholder?: string;
  disabled?: boolean;
  secondaryTextFormatter?: (sig: SignatureOption) => string;
  className?: string;
+  multiSelect?: boolean;
 }

 export function SignatureSelector({
@@ -28,6 +29,7 @@ export function SignatureSelector({
  disabled,
  secondaryTextFormatter,
  className,
+  multiSelect = false,
 }: SignatureSelectorProps) {
  const [searchValue, setSearchValue] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);
@@ -42,38 +44,96 @@ export function SignatureSelector({
    }));
  }, [options, secondaryTextFormatter]);

-  // Check if the current value is a custom value (not in options)
-  const isCustomValue = value && !options.some((opt) => opt.value === value);
-
-  // Add the custom value as an option if needed
-  const allOptions = useMemo(() => {
-    if (isCustomValue && value) {
-      return [...formattedOptions, { label: value, value }];
+  // Handle both single and multi-select values
+  const currentValues = useMemo((): string[] => {
+    if (multiSelect) {
+      if (Array.isArray(value)) {
+        return value.filter(
+          (val): val is string =>
+            val !== undefined && val !== null && val !== "",
+        );
+      } else {
+        return value ? [value] : [];
+      }
+    } else {
+      if (Array.isArray(value)) {
+        return value.length > 0 && value[0] ? [value[0]] : [];
+      } else {
+        return value ? [value] : [];
+      }
    }
-    return formattedOptions;
-  }, [formattedOptions, isCustomValue, value]);
+  }, [value, multiSelect]);

-  // Single-select MultiSelect wrapper
+  // Check if the current values include custom values (not in options)
+  const customValues = useMemo((): string[] => {
+    return currentValues.filter(
+      (val): val is string =>
+        val !== undefined &&
+        val !== null &&
+        val !== "" &&
+        !options.some((opt) => opt.value === val),
+    );
+  }, [currentValues, options]);
+
+  // Add the custom values as options if needed
+  const allOptions = useMemo(() => {
+    const customOptions = customValues.map((val) => ({
+      label: val,
+      value: val,
+    }));
+    return [...formattedOptions, ...customOptions];
+  }, [formattedOptions, customValues]);
+
+  // Multi-select or single-select MultiSelect wrapper
  const handleSelectedValuesChange = useCallback(
    (selected: string[]) => {
-      // Always use the last selected value for single-select behavior
-      const selectedValue =
-        selected.length > 0 ? (selected[selected.length - 1] ?? "") : "";
-      onChange(selectedValue);
-      const found = options.find((opt) => opt.value === selectedValue);
-      if (setAbi) {
-        setAbi(found?.abi || "");
+      if (multiSelect) {
+        // Multi-select behavior
+        onChange(selected);
+        // For multi-select, we'll use the ABI from the first selected option that has one
+        const firstOptionWithAbi = selected.find((selectedValue) => {
+          const found = options.find((opt) => opt.value === selectedValue);
+          return found?.abi;
+        });
+        if (setAbi && firstOptionWithAbi) {
+          const found = options.find((opt) => opt.value === firstOptionWithAbi);
+          setAbi(found?.abi || "");
+        }
+      } else {
+        // Single-select behavior (maintain backward compatibility)
+        const selectedValue =
+          selected.length > 0 ? (selected[selected.length - 1] ?? "") : "";
+        onChange(selectedValue);
+        const found = options.find((opt) => opt.value === selectedValue);
+        if (setAbi) {
+          setAbi(found?.abi || "");
+        }
      }
      setSearchValue("");
    },
-    [onChange, setAbi, options],
+    [onChange, setAbi, options, multiSelect],
  );

  // Handle custom value entry
  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Enter" && searchValue.trim()) {
      if (!options.some((opt) => opt.value === searchValue.trim())) {
-        onChange(searchValue.trim());
+        if (multiSelect) {
+          // Add to existing values for multi-select
+          const currentArray = Array.isArray(value)
+            ? value
+            : value
+              ? [value]
+              : [];
+          const filteredArray = currentArray.filter(
+            (val): val is string => val !== undefined && val !== null,
+          );
+          const newValues = [...filteredArray, searchValue.trim()];
+          onChange(newValues);
+        } else {
+          // Replace value for single-select
+          onChange(searchValue.trim());
+        }
        if (setAbi) setAbi("");
        setSearchValue("");
        // Optionally blur input
@@ -106,7 +166,7 @@ export function SignatureSelector({
        customSearchInput={customSearchInput}
        customTrigger={null}
        disabled={disabled}
-        maxCount={1}
+        maxCount={multiSelect ? 100 : 1}
        onSelectedValuesChange={handleSelectedValuesChange}
        options={allOptions}
        overrideSearchFn={(option, searchTerm) =>
@@ -116,11 +176,13 @@ export function SignatureSelector({
        placeholder={placeholder}
        renderOption={(option) => <span>{option.label}</span>}
        searchPlaceholder={placeholder}
-        selectedValues={value ? [value] : []}
+        selectedValues={currentValues}
      />
-      {isCustomValue && (
+      {customValues.length > 0 && (
        <div className="mt-2 rounded border border-warning-200 bg-warning-50 px-2 py-1 text-warning-700 text-xs">
-          You entered a custom signature. Please provide the ABI below.
+          {multiSelect
+            ? `You entered ${customValues.length} custom signature${customValues.length > 1 ? "s" : ""}. Please provide the ABI below.`
+            : "You entered a custom signature. Please provide the ABI below."}
        </div>
      )}
    </div>
@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/a11y/useSemanticElements: FIXME */
 "use client";

 import {
@@ -18,7 +19,7 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Spinner } from "@/components/ui/Spinner";
 import { Separator } from "@/components/ui/separator";
 import {
  Table,
@@ -164,7 +165,6 @@ export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
            return (
              <TableRow
                key={row.id}
-                // biome-ignore lint/a11y/useSemanticElements: FIXME
                role="group"
                {...(tableProps.onRowClick
                  ? {
@@ -1,6 +1,6 @@
 "use client";

-import type { Team } from "@/api/team";
+import type { Team } from "@/api/team/get-team";
 import { Badge, type BadgeProps } from "@/components/ui/badge";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
@@ -45,7 +45,7 @@ export function TeamPlanBadge(props: {
    }
    e.stopPropagation();
    e.preventDefault();
-    router.push(`/team/${props.teamSlug}/~/settings/billing?showPlans=true`);
+    router.push(`/team/${props.teamSlug}/~/billing?showPlans=true`);
  }

  return (
@@ -5,15 +5,16 @@ import {
  type ThirdwebClient,
 } from "thirdweb";
 import { shortenAddress } from "thirdweb/utils";
-import type { TokenMetadata } from "@/api/universal-bridge/tokens";
+import type { TokenMetadata } from "@/api/universal-bridge/types";
 import { Img } from "@/components/blocks/Img";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/Spinner";
+import { fallbackChainIcon } from "@/constants/chain";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useTokensData } from "@/hooks/tokens";
-import { replaceIpfsUrl } from "@/lib/sdk";
 import { cn } from "@/lib/utils";
-import { fallbackChainIcon } from "@/utils/chain-icons";
+import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";

 type Option = { label: string; value: string };

@@ -121,7 +122,10 @@ export function TokenSelector(props: {
        return option.label;
      }
      const resolvedSrc = token.iconUri
-        ? replaceIpfsUrl(token.iconUri, props.client)
+        ? resolveSchemeWithErrorHandler({
+            client: props.client,
+            uri: token.iconUri,
+          })
        : fallbackChainIcon;

      return (
@@ -186,16 +190,21 @@ export function TokenSelector(props: {
      options={options}
      overrideSearchFn={searchFn}
      placeholder={
-        tokensQuery.isPending
-          ? "Loading Tokens"
-          : props.placeholder || "Select Token"
+        tokensQuery.isPending ? (
+          <div className="flex items-center gap-2">
+            <Spinner className="size-4" />
+            <span>Loading tokens</span>
+          </div>
+        ) : (
+          props.placeholder || "Select Token"
+        )
      }
      popoverContentClassName={props.popoverContentClassName}
      renderOption={renderOption}
      searchPlaceholder="Search by name or symbol"
      showCheck={props.showCheck}
      side={props.side}
-      value={selectedValue}
+      value={tokensQuery.isPending ? undefined : selectedValue}
    />
  );
 }
@@ -38,12 +38,18 @@ const ACCENT = {
 type UpsellBannerCardProps = {
  title: React.ReactNode;
  description: React.ReactNode;
-  cta: {
-    text: React.ReactNode;
-    icon?: React.ReactNode;
-    target?: "_blank";
-    link: string;
-  };
+  cta?:
+    | {
+        text: React.ReactNode;
+        icon?: React.ReactNode;
+        target?: "_blank";
+        link: string;
+      }
+    | {
+        text: React.ReactNode;
+        icon?: React.ReactNode;
+        onClick: () => void;
+      };
  accentColor?: keyof typeof ACCENT;
  icon?: React.ReactNode;
 };
@@ -93,25 +99,41 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
          </div>
        </div>

-        <Button
-          asChild
-          className={cn(
-            "mt-2 gap-2 hover:translate-y-0 hover:shadow-inner sm:mt-0",
-            color.btn,
-          )}
-          size="sm"
-        >
-          <Link
-            href={props.cta.link}
-            rel={
-              props.cta.target === "_blank" ? "noopener noreferrer" : undefined
-            }
-            target={props.cta.target}
+        {props.cta && "target" in props.cta ? (
+          <Button
+            asChild
+            className={cn(
+              "mt-2 gap-2 hover:translate-y-0 hover:shadow-inner sm:mt-0",
+              color.btn,
+            )}
+            size="sm"
+          >
+            <Link
+              href={props.cta.link}
+              rel={
+                props.cta.target === "_blank"
+                  ? "noopener noreferrer"
+                  : undefined
+              }
+              target={props.cta.target}
+            >
+              {props.cta.text}
+              {props.cta.icon && <span className="ml-2">{props.cta.icon}</span>}
+            </Link>
+          </Button>
+        ) : props.cta && "onClick" in props.cta ? (
+          <Button
+            className={cn(
+              "mt-2 gap-2 hover:translate-y-0 hover:shadow-inner sm:mt-0",
+              color.btn,
+            )}
+            onClick={props.cta.onClick}
+            size="sm"
          >
            {props.cta.text}
            {props.cta.icon && <span className="ml-2">{props.cta.icon}</span>}
-          </Link>
-        </Button>
+          </Button>
+        ) : null}
      </div>
    </div>
  );
@@ -29,6 +29,8 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
    title: string;
    description?: string;
    titleClassName?: string;
+    headerClassName?: string;
+    icon?: React.ReactNode;
  };
  customHeader?: React.ReactNode;
  // chart config
@@ -52,6 +54,12 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
  toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
  toolTipValueFormatter?: (value: unknown) => React.ReactNode;
  emptyChartState?: React.ReactElement;
+  margin?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
 };

 export function ThirdwebAreaChart<TConfig extends ChartConfig>(
@@ -62,7 +70,8 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
  return (
    <Card className={props.className}>
      {props.header && (
-        <CardHeader>
+        <CardHeader className={props.header.headerClassName}>
+          {props.header.icon}
          <CardTitle className={cn("mb-2", props.header.titleClassName)}>
            {props.header.title}
          </CardTitle>
@@ -85,7 +94,16 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
              {props.emptyChartState}
            </EmptyChartState>
          ) : (
-            <AreaChart accessibilityLayer data={props.data}>
+            <AreaChart
+              accessibilityLayer
+              data={props.data}
+              margin={{
+                right: props.margin?.right ?? 0,
+                left: props.margin?.left ?? 0,
+                bottom: props.margin?.bottom ?? 10,
+                top: props.margin?.top ?? 0,
+              }}
+            >
              <CartesianGrid vertical={false} />
              {props.yAxis && <YAxis axisLine={false} tickLine={false} />}
              <XAxis
@@ -1,15 +1,20 @@
 "use client";
+
 import type React from "react";
 import { type Dispatch, type SetStateAction, useMemo } from "react";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { TabButtons } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";

 export type CodeEnvironment =
+  | "api"
  | "javascript"
  | "typescript"
  | "react"
  | "react-native"
-  | "unity";
+  | "dotnet"
+  | "unity"
+  | "curl";

 type SupportedEnvironment = {
  environment: CodeEnvironment;
@@ -19,6 +24,10 @@ type SupportedEnvironment = {
 type CodeSnippet = Partial<Record<CodeEnvironment, string>>;

 const Environments: SupportedEnvironment[] = [
+  {
+    environment: "api",
+    title: "API",
+  },
  {
    environment: "javascript",
    title: "JavaScript",
@@ -35,10 +44,18 @@ const Environments: SupportedEnvironment[] = [
    environment: "react-native",
    title: "React Native",
  },
+  {
+    environment: "dotnet",
+    title: ".NET",
+  },
  {
    environment: "unity",
    title: "Unity",
  },
+  {
+    environment: "curl",
+    title: "cURL",
+  },
 ];

 interface CodeSegmentProps {
@@ -50,6 +67,7 @@ interface CodeSegmentProps {
  isInstallCommand?: boolean;
  hideTabs?: boolean;
  onlyTabs?: boolean;
+  codeContainerClassName?: string;
 }

 export const CodeSegment: React.FC<CodeSegmentProps> = ({
@@ -59,6 +77,7 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
  isInstallCommand,
  hideTabs,
  onlyTabs,
+  codeContainerClassName,
 }) => {
  const activeEnvironment: CodeEnvironment = useMemo(() => {
    return (
@@ -86,13 +105,12 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
  return (
    <div
      className={
-        "flex flex-col overflow-hidden rounded-lg border border-border"
+        "flex flex-col overflow-hidden rounded-lg border border-border grow"
      }
    >
      {!hideTabs && (
        <TabButtons
          hideBottomLine={!!onlyTabs}
-          tabClassName="text-sm gap-2 !text-sm"
          tabContainerClassName="px-3 pt-1.5 gap-0.5"
          tabIconClassName="size-4"
          tabs={environments.map((env) => ({
@@ -106,7 +124,11 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({

      {onlyTabs ? null : (
        <CodeClient
-          className="rounded-none border-none"
+          className={cn(
+            "rounded-none border-none grow",
+            codeContainerClassName,
+          )}
+          scrollableContainerClassName="h-full"
          code={code}
          lang={
            isInstallCommand
@@ -116,9 +138,14 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
              : activeEnvironment === "react" ||
                  activeEnvironment === "react-native"
                ? "tsx"
-                : activeEnvironment === "unity"
+                : activeEnvironment === "unity" ||
+                    activeEnvironment === "dotnet"
                  ? "cpp"
-                  : activeEnvironment
+                  : activeEnvironment === "api"
+                    ? "javascript"
+                    : activeEnvironment === "curl"
+                      ? "bash"
+                      : activeEnvironment
          }
        />
      )}
@@ -0,0 +1,45 @@
+"use client";
+import { ArrowDownToLineIcon, FileTextIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { CodeClient } from "@/components/ui/code/code.client";
+import { handleDownload } from "../download-file-button";
+
+export function DownloadableCode(props: {
+  code: string;
+  lang: "csv" | "json";
+  fileNameWithExtension: string;
+}) {
+  return (
+    <div className="!my-5 bg-card">
+      <p className="text-sm text-muted-foreground border border-b-0 px-4 py-3 pr-3.5 rounded-lg rounded-b-none flex items-center justify-between">
+        <span className="flex items-center gap-1.5">
+          <FileTextIcon className="size-3.5" />
+          {props.fileNameWithExtension}
+        </span>
+        <Button
+          className="h-auto bg-background p-2"
+          onClick={() => {
+            handleDownload({
+              fileContent: props.code,
+              fileFormat:
+                props.lang === "csv" ? "text/csv" : "application/json",
+              fileNameWithExtension: props.fileNameWithExtension,
+            });
+          }}
+          size="sm"
+          variant="outline"
+        >
+          <ArrowDownToLineIcon className="size-3" />
+        </Button>
+      </p>
+      <div className="relative">
+        <CodeClient
+          code={props.code}
+          lang={props.lang}
+          scrollableClassName="max-h-[300px] bg-background bg-card"
+          className="rounded-t-none"
+        />
+      </div>
+    </div>
+  );
+}
@@ -4,9 +4,10 @@ import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { ClientOnly } from "@/components/blocks/client-only";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { Skeleton } from "../ui/skeleton";

-export function ToggleThemeButton() {
+export function ToggleThemeButton(props: { className?: string }) {
  const { setTheme, theme } = useTheme();

  return (
@@ -15,7 +16,10 @@ export function ToggleThemeButton() {
    >
      <Button
        aria-label="Toggle theme"
-        className="h-auto w-auto rounded-full border border-border bg-background p-2"
+        className={cn(
+          "h-auto w-auto rounded-full border border-border bg-background p-2",
+          props.className,
+        )}
        onClick={() => {
          setTheme(theme === "dark" ? "light" : "dark");
        }}
@@ -1,12 +1,39 @@
 "use client";

 import { XIcon } from "lucide-react";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { useLocalStorage } from "@/hooks/useLocalStorage";

-export function DismissibleAlert(props: {
+export function DismissibleAlert(
+  props: {
+    title: React.ReactNode;
+    header?: React.ReactNode;
+    className?: string;
+    description: React.ReactNode;
+    children?: React.ReactNode;
+  } & (
+    | {
+        preserveState: true;
+        localStorageId: string;
+      }
+    | {
+        preserveState: false;
+      }
+  ),
+) {
+  if (props.preserveState) {
+    return <DismissibleAlertWithLocalStorage {...props} />;
+  }
+
+  return <DismissibleAlertWithoutLocalStorage {...props} />;
+}
+
+function DismissibleAlertWithLocalStorage(props: {
  title: React.ReactNode;
+  header?: React.ReactNode;
  description: React.ReactNode;
+  children?: React.ReactNode;
  localStorageId: string;
 }) {
  const [isVisible, setIsVisible] = useLocalStorage(
@@ -17,19 +44,48 @@ export function DismissibleAlert(props: {

  if (!isVisible) return null;

+  return <AlertUI {...props} onClose={() => setIsVisible(false)} />;
+}
+
+function DismissibleAlertWithoutLocalStorage(props: {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return <AlertUI {...props} onClose={() => setIsVisible(false)} />;
+}
+
+function AlertUI(props: {
+  title: React.ReactNode;
+  header?: React.ReactNode;
+  description: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  onClose: () => void;
+}) {
  return (
-    <div className="relative rounded-lg border border-border bg-card p-4">
-      <Button
-        aria-label="Close alert"
-        className="absolute top-4 right-4 h-auto w-auto p-1 text-muted-foreground"
-        onClick={() => setIsVisible(false)}
-        variant="ghost"
-      >
-        <XIcon className="size-5" />
-      </Button>
-      <div>
-        <h2 className="mb-0.5 font-semibold">{props.title} </h2>
-        <div className="text-muted-foreground text-sm">{props.description}</div>
+    <div className={props.className}>
+      <div className="relative rounded-lg border border-border bg-card p-4 lg:p-6 overflow-hidden">
+        <Button
+          aria-label="Close alert"
+          className="absolute top-4 right-4 h-auto w-auto p-1 text-muted-foreground"
+          onClick={props.onClose}
+          variant="ghost"
+        >
+          <XIcon className="size-5" />
+        </Button>
+        <div>
+          {props.header}
+          <h2 className="mb-0.5 font-semibold">{props.title} </h2>
+          <div className="text-muted-foreground text-sm">
+            {props.description}
+          </div>
+          {props.children}
+        </div>
      </div>
    </div>
  );
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default } from "@workspace/ui/postcss.config";`