Version Packages (#8114)

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

apps/dashboard/redirects.js

@@ -474,6 +474,11 @@ async function redirects() {
       destination: "/team/~/~/support",
       permanent: false,
     },
+    {
+      source: "/routes",
+      destination: "/tokens",
+      permanent: false,
+    },
   ];
 }
 

apps/dashboard/src/@/analytics/report.ts

@@ -225,7 +225,7 @@ type AssetContractType =
  */
 export function reportAssetBuySuccessful(properties: {
   chainId: number;
-  contractType: AssetContractType;
+  contractType: AssetContractType | undefined;
   assetType: "nft" | "coin";
 }) {
   posthog.capture("asset buy successful", {
@@ -243,9 +243,51 @@ type TokenSwapParams = {
   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 swaps from the token page
+ * - 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 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?
@@ -271,7 +313,7 @@ export function reportSwapWidgetShown(properties: {
 
 /**
  * ### Why do we need to report this event?
- * - To track number of failed token swaps from the token page
+ * - To track number of failed token swaps
  * - To track which tokens are being swapped the most
  *
  * ### Who is responsible for this event?
@@ -287,7 +329,7 @@ export function reportTokenSwapFailed(
 
 /**
  * ### Why do we need to report this event?
- * - To track number of cancelled token swaps from the token page
+ * - To track number of cancelled token swaps
  * - To track which tokens are being swapped the most
  *
  * ### Who is responsible for this event?
@@ -299,7 +341,7 @@ export function reportTokenSwapCancelled(properties: TokenSwapParams) {
 
 /**
  * ### Why do we need to report this event?
- * - To track number of failed asset purchases from the token page
+ * - 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?
@@ -307,7 +349,7 @@ export function reportTokenSwapCancelled(properties: TokenSwapParams) {
  */
 export function reportAssetBuyFailed(properties: {
   chainId: number;
-  contractType: AssetContractType;
+  contractType: AssetContractType | undefined;
   assetType: "nft" | "coin";
   error: string;
 }) {
@@ -329,7 +371,7 @@ export function reportAssetBuyFailed(properties: {
  */
 export function reportAssetBuyCancelled(properties: {
   chainId: number;
-  contractType: AssetContractType;
+  contractType: AssetContractType | undefined;
   assetType: "nft" | "coin";
 }) {
   posthog.capture("asset buy cancelled", {

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

@@ -592,7 +592,7 @@ const cached_getUniversalBridgeUsage = unstable_cache(
     if (res?.status !== 200) {
       const reason = await res?.text();
       console.error(
-        `Failed to fetch universal bridge stats: ${res?.status} - ${res.statusText} - ${reason}`,
+        `Failed to fetch bridge stats: ${res?.status} - ${res.statusText} - ${reason}`,
       );
       return [];
     }
@@ -636,7 +636,7 @@ const cached_getUniversalBridgeWalletUsage = unstable_cache(
     if (res?.status !== 200) {
       const reason = await res?.text();
       console.error(
-        `Failed to fetch universal bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
+        `Failed to fetch bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
       );
       return [];
     }

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

@@ -1,29 +1,39 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { useEffect, useRef, useState } from "react";
-import type { Chain, ThirdwebClient } from "thirdweb";
+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: {
-  client: ThirdwebClient;
   chain: Chain;
   tokenAddress: string | undefined;
   buyAmount: string | undefined;
-  pageType: "asset" | "bridge" | "chain";
+  pageType: PageType;
 }) {
   const { theme } = useTheme();
   const [tab, setTab] = useState<"buy" | "swap">("swap");
@@ -41,8 +51,23 @@ export function BuyAndSwapEmbed(props: {
     });
   }, [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">
+    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10 shadow-xl">
       <div className="flex gap-2.5 p-4 border-b border-dashed">
         <TabButton
           label="Swap"
@@ -62,36 +87,85 @@ export function BuyAndSwapEmbed(props: {
           chain={props.chain}
           className="!rounded-2xl !w-full !border-none"
           title=""
-          client={props.client}
+          client={client}
           connectOptions={{
             autoConnect: false,
           }}
-          onError={(e) => {
+          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,
-                contractType: "DropERC20",
                 error: errorMessage,
+                contractType: undefined,
               });
             }
           }}
-          onCancel={() => {
+          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: "DropERC20",
+                contractType: undefined,
               });
             }
           }}
-          onSuccess={() => {
+          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: "DropERC20",
+                contractType: undefined,
               });
             }
           }}
@@ -103,16 +177,17 @@ export function BuyAndSwapEmbed(props: {
 
       {tab === "swap" && (
         <SwapWidget
-          client={props.client}
+          client={client}
           theme={themeObj}
           className="!rounded-2xl !border-none !w-full"
           prefill={{
-            sellToken: {
+            // buy this token by default
+            buyToken: {
               chainId: props.chain.id,
               tokenAddress: props.tokenAddress,
             },
-            // only set `buyToken` as "Native token" if `sellToken` is not a "native token" already
-            buyToken: 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,
                 }

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

@@ -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";
@@ -296,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()}
+    />
+  );
+}

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

@@ -30,6 +30,7 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
     description?: string;
     titleClassName?: string;
     headerClassName?: string;
+    icon?: React.ReactNode;
   };
   customHeader?: React.ReactNode;
   // chart config
@@ -70,6 +71,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
     <Card className={props.className}>
       {props.header && (
         <CardHeader className={props.header.headerClassName}>
+          {props.header.icon}
           <CardTitle className={cn("mb-2", props.header.titleClassName)}>
             {props.header.title}
           </CardTitle>

apps/dashboard/src/@/components/blocks/grid-pattern-embed-container.tsx

@@ -4,7 +4,7 @@ export function GridPatternEmbedContainer(props: {
   children: React.ReactNode;
 }) {
   return (
-    <div className=" sm:flex sm:justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 rounded-lg overflow-hidden relative">
+    <div className="sm:flex sm:justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 rounded-xl overflow-hidden relative">
       <GridPattern
         width={30}
         height={30}

apps/dashboard/src/@/components/chat/CustomChatButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { MessageCircleIcon, XIcon } from "lucide-react";
+import { CircleQuestionMarkIcon, XIcon } from "lucide-react";
 import { useSelectedLayoutSegments } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { createThirdwebClient } from "thirdweb";
@@ -16,7 +16,6 @@ const client = createThirdwebClient({
 });
 
 export function CustomChatButton(props: {
-  label: string;
   examplePrompts: string[];
   authToken: string;
   team: Team;
@@ -39,21 +38,25 @@ export function CustomChatButton(props: {
     <>
       {/* Inline Button (not floating) */}
       <Button
-        className="gap-2 rounded-full shadow-lg"
+        className={cn(
+          "gap-2 rounded-full shadow-lg fixed right-6 bottom-6 z-50 bg-card",
+          isOpen && "opacity-0",
+        )}
+        size="sm"
         onClick={() => {
           setIsOpen(true);
           setHasBeenOpened(true);
         }}
-        variant="default"
+        variant="outline"
       >
-        <MessageCircleIcon className="size-4" />
-        {props.label}
+        <CircleQuestionMarkIcon className="size-3.5 text-muted-foreground" />
+        Need help?
       </Button>
 
       {/* Popup/Modal */}
       <div
         className={cn(
-          "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-xl",
+          "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-2xl",
           !isOpen && "hidden",
         )}
         ref={ref}
@@ -61,8 +64,7 @@ export function CustomChatButton(props: {
         {/* Header with close button */}
         <div className="flex items-center justify-between border-b px-4 py-4">
           <div className="flex items-center gap-2 font-semibold text-lg">
-            <MessageCircleIcon className="size-5 text-muted-foreground" />
-            {props.label}
+            Need help?
           </div>
           <Button
             aria-label="Close chat"

apps/dashboard/src/@/components/misc/AnnouncementBanner.tsx

@@ -44,11 +44,12 @@ function AnnouncementBannerUI(props: {
 }
 
 export function AnnouncementBanner() {
-  return (
-    <AnnouncementBannerUI
-      href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
-      label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
-      trackingLabel="product-rebrand"
-    />
-  );
+  // return (
+  //   <AnnouncementBannerUI
+  //     href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
+  //     label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
+  //     trackingLabel="product-rebrand"
+  //   />
+  // );
+  return null;
 }

apps/dashboard/src/@/constants/public-envs.ts

@@ -32,3 +32,12 @@ export const NEXT_PUBLIC_DEMO_ENGINE_URL =
 
 export const NEXT_PUBLIC_THIRDWEB_AI_HOST =
   process.env.NEXT_PUBLIC_THIRDWEB_AI_HOST || "https://nebula-api.thirdweb.com";
+
+export const NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID =
+  process.env.NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID;
+
+export const NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID =
+  process.env.NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID;
+
+export const NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID =
+  process.env.NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID;

apps/dashboard/src/@/constants/server-envs.ts

@@ -92,23 +92,7 @@ if (REDIS_URL) {
   );
 }
 
+// DO NOT TAINT THESE VALUES (for now)
 export const GROWTH_PLAN_SKU = process.env.GROWTH_PLAN_SKU || "";
-
-if (GROWTH_PLAN_SKU) {
-  experimental_taintUniqueValue(
-    "Do not pass GROWTH_PLAN_SKU to the client",
-    process,
-    GROWTH_PLAN_SKU,
-  );
-}
-
 export const PAYMENT_METHOD_CONFIGURATION =
   process.env.PAYMENT_METHOD_CONFIGURATION || "";
-
-if (PAYMENT_METHOD_CONFIGURATION) {
-  experimental_taintUniqueValue(
-    "Do not pass PAYMENT_METHOD_CONFIGURATION to the client",
-    process,
-    PAYMENT_METHOD_CONFIGURATION,
-  );
-}

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

@@ -25,6 +25,7 @@ import { getVercelEnv } from "@/utils/vercel";
 export function getConfiguredThirdwebClient(options: {
   secretKey: string | undefined;
   teamId: string | undefined;
+  clientId?: string;
 }): ThirdwebClient {
   if (getVercelEnv() !== "production") {
     // if not on production: run this when creating a client to set the domains
@@ -77,7 +78,8 @@ export function getConfiguredThirdwebClient(options: {
   }
 
   // During build time, provide fallbacks if credentials are missing
-  const clientId = NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "dummy-build-client";
+  const clientId =
+    options.clientId || NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "dummy-build-client";
   const secretKey = options.secretKey || undefined;
 
   return createThirdwebClient({

apps/dashboard/src/@/utils/sdk-component-theme.ts

@@ -31,9 +31,9 @@ export function getSDKTheme(theme: "light" | "dark"): Theme {
       selectedTextBg: "hsl(var(--inverted))",
       selectedTextColor: "hsl(var(--inverted-foreground))",
       separatorLine: "hsl(var(--border))",
-      skeletonBg: "hsl(var(--muted))",
+      skeletonBg: "hsl(var(--secondary-foreground)/15%)",
       success: "hsl(var(--success-text))",
-      tertiaryBg: "hsl(var(--muted)/50%)",
+      tertiaryBg: "hsl(var(--muted)/30%)",
       tooltipBg: "hsl(var(--popover))",
       tooltipText: "hsl(var(--popover-foreground))",
     },

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

@@ -1,12 +0,0 @@
-import { TeamHeader } from "../../team/components/TeamHeader/team-header";
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex grow flex-col">
-      <div className="border-border border-b bg-card">
-        <TeamHeader />
-      </div>
-      {children}
-    </div>
-  );
-}

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

@@ -1,37 +0,0 @@
-"use client";
-
-import { usePathname, useSearchParams } from "next/navigation";
-import { useCallback } from "react";
-import { PaginationButtons } from "@/components/blocks/pagination-buttons";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-type ChainlistPaginationProps = {
-  totalPages: number;
-  activePage: number;
-};
-
-export const ChainlistPagination: React.FC<ChainlistPaginationProps> = ({
-  activePage,
-  totalPages,
-}) => {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const router = useDashboardRouter();
-
-  const createPageURL = useCallback(
-    (pageNumber: number) => {
-      const params = new URLSearchParams(searchParams || undefined);
-      params.set("page", pageNumber.toString());
-      return `${pathname}?${params.toString()}`;
-    },
-    [pathname, searchParams],
-  );
-
-  return (
-    <PaginationButtons
-      activePage={activePage}
-      onPageClick={(page) => router.push(createPageURL(page))}
-      totalPages={totalPages}
-    />
-  );
-};

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

@@ -1,74 +0,0 @@
-"use client";
-
-import { SearchIcon, XCircleIcon } from "lucide-react";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect, useRef } from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-function cleanUrl(url: string) {
-  if (url.endsWith("?")) {
-    return url.slice(0, -1);
-  }
-  return url;
-}
-
-export const SearchInput: React.FC = () => {
-  const router = useDashboardRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    // reset the input if the query param is removed
-    if (inputRef.current?.value && !searchParams?.get("query")) {
-      inputRef.current.value = "";
-    }
-  }, [searchParams]);
-
-  const handleSearch = useDebouncedCallback((term: string) => {
-    const params = new URLSearchParams(searchParams ?? undefined);
-    if (term) {
-      params.set("query", term);
-    } else {
-      params.delete("query");
-    }
-    // always delete the page number when searching
-    params.delete("page");
-    const url = cleanUrl(`${pathname}?${params.toString()}`);
-    router.replace(url);
-  }, 300);
-
-  return (
-    <div className="group relative w-full">
-      <SearchIcon className="-translate-y-1/2 absolute top-[50%] left-3 size-4 text-muted-foreground" />
-      <Input
-        className="h-10 rounded-lg bg-card py-2 pl-9 lg:min-w-[300px]"
-        defaultValue={searchParams?.get("query") || ""}
-        onChange={(e) => handleSearch(e.target.value)}
-        placeholder="Search by token name or symbol"
-        ref={inputRef}
-      />
-      {searchParams?.has("query") && (
-        <Button
-          className="-translate-y-1/2 absolute top-[50%] right-0 bg-background text-muted-foreground opacity-0 transition duration-300 ease-in-out group-hover:opacity-100"
-          onClick={() => {
-            const params = new URLSearchParams(searchParams ?? undefined);
-            params.delete("query");
-            params.delete("page");
-            const url = cleanUrl(`${pathname}?${params.toString()}`);
-            router.replace(url);
-          }}
-          size="icon"
-          variant="outline"
-        >
-          <XCircleIcon className="size-5" />
-        </Button>
-      )}
-    </div>
-  );
-};

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

@@ -1,55 +0,0 @@
-"use client";
-
-import { ArrowDownLeftIcon, ArrowUpRightIcon } from "lucide-react";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useCallback } from "react";
-import { Button } from "@/components/ui/button";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-type QueryTypeProps = {
-  activeType: "origin" | "destination";
-};
-
-export const QueryType: React.FC<QueryTypeProps> = ({ activeType }) => {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const router = useDashboardRouter();
-
-  const createPageURL = useCallback(
-    (type: "origin" | "destination") => {
-      const params = new URLSearchParams(searchParams || undefined);
-      params.set("type", type);
-      return `${pathname}?${params.toString()}`;
-    },
-    [pathname, searchParams],
-  );
-  return (
-    <div className="flex flex-row">
-      <ToolTipLabel contentClassName="w-full" label="Origin">
-        <Button
-          className="rounded-r-none"
-          onClick={() => {
-            router.replace(createPageURL("origin"));
-          }}
-          size="icon"
-          variant={activeType === "origin" ? "default" : "outline"}
-        >
-          <ArrowUpRightIcon strokeWidth={1} />
-        </Button>
-      </ToolTipLabel>
-      <ToolTipLabel contentClassName="w-full" label="Destination">
-        <Button
-          className="rounded-l-none"
-          onClick={() => {
-            router.replace(createPageURL("destination"));
-          }}
-          size="icon"
-          variant={activeType === "destination" ? "default" : "outline"}
-        >
-          <ArrowDownLeftIcon strokeWidth={1} />
-        </Button>
-      </ToolTipLabel>
-    </div>
-  );
-};

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

@@ -1,50 +0,0 @@
-"use client";
-
-import { Grid2X2Icon, ListIcon } from "lucide-react";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useCallback } from "react";
-import { Button } from "@/components/ui/button";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-type RouteListViewProps = {
-  activeView: "grid" | "table";
-};
-
-export const RouteListView: React.FC<RouteListViewProps> = ({ activeView }) => {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const router = useDashboardRouter();
-
-  const createPageURL = useCallback(
-    (view: "grid" | "table") => {
-      const params = new URLSearchParams(searchParams || undefined);
-      params.set("view", view);
-      return `${pathname}?${params.toString()}`;
-    },
-    [pathname, searchParams],
-  );
-  return (
-    <div className="flex flex-row">
-      <Button
-        className="rounded-r-none"
-        onClick={() => {
-          router.replace(createPageURL("table"));
-        }}
-        size="icon"
-        variant={activeView === "table" ? "default" : "outline"}
-      >
-        <ListIcon strokeWidth={1} />
-      </Button>
-      <Button
-        className="rounded-l-none"
-        onClick={() => {
-          router.replace(createPageURL("grid"));
-        }}
-        size="icon"
-        variant={activeView === "grid" ? "default" : "outline"}
-      >
-        <Grid2X2Icon strokeWidth={1} />
-      </Button>
-    </div>
-  );
-};

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

@@ -1,141 +0,0 @@
-import { ExternalLinkIcon } from "lucide-react";
-import Link from "next/link";
-import { defineChain, getAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
-import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
-
-type RouteListCardProps = {
-  originChainId: number;
-  originTokenAddress: string;
-  originTokenIconUri?: string | null;
-  originTokenSymbol: string;
-  originTokenName: string;
-  destinationChainId: number;
-  destinationTokenAddress: string;
-  destinationTokenIconUri?: string | null;
-  destinationTokenSymbol: string;
-  destinationTokenName: string;
-};
-
-export async function RouteListCard({
-  originChainId,
-  originTokenAddress,
-  originTokenIconUri,
-  originTokenName,
-  destinationChainId,
-  destinationTokenAddress,
-  destinationTokenIconUri,
-  destinationTokenName,
-}: RouteListCardProps) {
-  const [
-    originChain,
-    destinationChain,
-    resolvedOriginTokenIconUri,
-    resolvedDestinationTokenIconUri,
-  ] = await Promise.all([
-    // eslint-disable-next-line no-restricted-syntax
-    getChainMetadata(defineChain(originChainId)),
-    // eslint-disable-next-line no-restricted-syntax
-    getChainMetadata(defineChain(destinationChainId)),
-    originTokenIconUri
-      ? resolveSchemeWithErrorHandler({
-          client: serverThirdwebClient,
-          uri: originTokenIconUri,
-        })
-      : undefined,
-    destinationTokenIconUri
-      ? resolveSchemeWithErrorHandler({
-          client: serverThirdwebClient,
-          uri: destinationTokenIconUri,
-        })
-      : undefined,
-  ]);
-
-  return (
-    <div className="relative h-full">
-      <Card className="h-full w-full">
-        <CardHeader className="flex flex-row items-center justify-between p-4">
-          <div className="flex flex-row items-center gap-2">
-            {resolvedOriginTokenIconUri ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                alt={originTokenAddress}
-                className="size-8 rounded-full border border-muted-foreground"
-                src={resolvedOriginTokenIconUri}
-              />
-            ) : (
-              <div className="size-8 rounded-full bg-muted-foreground" />
-            )}
-            {resolvedDestinationTokenIconUri ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                alt={destinationTokenAddress}
-                className="-translate-x-4 size-8 rounded-full border border-muted-foreground ring-2 ring-card"
-                src={resolvedDestinationTokenIconUri}
-              />
-            ) : (
-              <div className="-translate-x-4 size-8 rounded-full bg-muted-foreground ring-2 ring-card" />
-            )}
-          </div>
-        </CardHeader>
-
-        <CardContent className="px-4 pt-0 pb-4">
-          <div className="flex flex-col gap-1">
-            <div className="flex justify-between gap-2">
-              <TokenName
-                chainMetadata={originChain}
-                tokenAddress={originTokenAddress}
-                tokenName={originTokenName}
-              />
-              <div className="text-right text-base text-muted-foreground">
-                {originChain.name}
-              </div>
-            </div>
-
-            <div className="flex justify-between gap-2">
-              <TokenName
-                chainMetadata={destinationChain}
-                tokenAddress={destinationTokenAddress}
-                tokenName={destinationTokenName}
-              />
-              <div className="text-right text-base text-muted-foreground">
-                {destinationChain.name}
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-const nativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS);
-
-function TokenName(props: {
-  tokenAddress: string;
-  tokenName: string;
-  chainMetadata: ChainMetadata;
-}) {
-  const isERC20 = getAddress(props.tokenAddress) !== nativeTokenAddress;
-
-  if (isERC20) {
-    return (
-      <Link
-        className="flex items-center gap-1.5 font-normal text-base group/link hover:underline underline-offset-4 decoration-muted-foreground/50 decoration-dotted"
-        href={`https://thirdweb.com/${props.chainMetadata.slug}/${props.tokenAddress}`}
-        target="_blank"
-      >
-        {props.tokenName}
-        <ExternalLinkIcon className="size-3.5 text-muted-foreground group-hover/link:text-foreground" />
-      </Link>
-    );
-  }
-
-  return (
-    <div className="text-left font-normal text-base">
-      {props.chainMetadata.nativeCurrency.name}
-    </div>
-  );
-}

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

@@ -1,136 +0,0 @@
-import { ExternalLinkIcon } from "lucide-react";
-import Link from "next/link";
-import { getAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
-import {
-  type ChainMetadata,
-  defineChain,
-  getChainMetadata,
-} from "thirdweb/chains";
-import { shortenAddress } from "thirdweb/utils";
-import { Img } from "@/components/blocks/Img";
-import { Button } from "@/components/ui/button";
-import { TableCell, TableRow } from "@/components/ui/table";
-import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
-
-type RouteListRowProps = {
-  originChainId: number;
-  originTokenAddress: string;
-  originTokenIconUri?: string | null;
-  originTokenSymbol?: string;
-  originTokenName?: string;
-  destinationChainId: number;
-  destinationTokenAddress: string;
-  destinationTokenIconUri?: string | null;
-  destinationTokenSymbol?: string;
-  destinationTokenName?: string;
-};
-
-export async function RouteListRow({
-  originChainId,
-  originTokenAddress,
-  originTokenIconUri,
-  originTokenSymbol,
-  destinationChainId,
-  destinationTokenAddress,
-  destinationTokenIconUri,
-  destinationTokenSymbol,
-}: RouteListRowProps) {
-  const [
-    originChain,
-    destinationChain,
-    resolvedOriginTokenIconUri,
-    resolvedDestinationTokenIconUri,
-  ] = await Promise.all([
-    // eslint-disable-next-line no-restricted-syntax
-    getChainMetadata(defineChain(originChainId)),
-    // eslint-disable-next-line no-restricted-syntax
-    getChainMetadata(defineChain(destinationChainId)),
-    originTokenIconUri
-      ? resolveSchemeWithErrorHandler({
-          client: serverThirdwebClient,
-          uri: originTokenIconUri,
-        })
-      : undefined,
-    destinationTokenIconUri
-      ? resolveSchemeWithErrorHandler({
-          client: serverThirdwebClient,
-          uri: destinationTokenIconUri,
-        })
-      : undefined,
-  ]);
-
-  return (
-    <TableRow className="group">
-      <TableCell>
-        <TokenInfo
-          chainMetadata={originChain}
-          tokenAddress={originTokenAddress}
-          tokenIconUri={resolvedOriginTokenIconUri}
-          tokenSymbol={originTokenSymbol}
-        />
-      </TableCell>
-
-      <TableCell className="text-muted-foreground/90">
-        <span className="font-medium">{originChain.name}</span>
-      </TableCell>
-
-      <TableCell>
-        <TokenInfo
-          chainMetadata={destinationChain}
-          tokenAddress={destinationTokenAddress}
-          tokenIconUri={resolvedDestinationTokenIconUri}
-          tokenSymbol={destinationTokenSymbol}
-        />
-      </TableCell>
-
-      <TableCell className="text-muted-foreground/90">
-        <span className="font-medium">{destinationChain.name}</span>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-const nativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS);
-
-function TokenInfo(props: {
-  tokenAddress: string;
-  tokenSymbol: string | undefined;
-  chainMetadata: ChainMetadata;
-  tokenIconUri: string | undefined;
-}) {
-  const isERC20 = getAddress(props.tokenAddress) !== nativeTokenAddress;
-
-  return (
-    <div className="flex items-center gap-1.5">
-      {props.tokenIconUri ? (
-        <Img
-          alt={props.tokenAddress}
-          className="size-7 rounded-full border border-border/50"
-          src={props.tokenIconUri}
-        />
-      ) : (
-        <div className="size-7 rounded-full bg-muted-foreground/20" />
-      )}
-      {isERC20 ? (
-        <Button
-          asChild
-          className="h-auto w-auto py-1 px-1.5 gap-2"
-          variant="ghost"
-        >
-          <Link
-            href={`https://thirdweb.com/${props.chainMetadata.slug}/${props.tokenAddress}`}
-            target="_blank"
-          >
-            {props.tokenSymbol || shortenAddress(props.tokenAddress)}
-            <ExternalLinkIcon className="size-3.5 text-muted-foreground" />
-          </Link>
-        </Button>
-      ) : (
-        <span className="font-medium text-sm px-1.5 py-1">
-          {props.chainMetadata.nativeCurrency.symbol}
-        </span>
-      )}
-    </div>
-  );
-}

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

@@ -1,176 +0,0 @@
-import type { Address } from "thirdweb";
-import {
-  Table,
-  TableBody,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { getRoutes } from "../../../utils";
-import { ChainlistPagination } from "../client/pagination";
-import { RouteListCard } from "./routelist-card";
-import { RouteListRow } from "./routelist-row";
-
-export type SearchParams = Partial<{
-  includeDeprecated: boolean;
-  query: string;
-  page: number;
-  type: "origin" | "destination";
-  // maybe later we'll have a page size param?
-  // pageSize: number;
-  view: "table" | "grid";
-}>;
-
-// 120 is divisible by 2, 3, and 4 so card layout looks nice
-const DEFAULT_PAGE_SIZE = 120;
-
-async function getRoutesToRender(params: SearchParams) {
-  const filters: Partial<{
-    originQuery?: string;
-    destinationQuery?: string;
-    originChainId?: number;
-    originTokenAddress?: Address;
-    destinationChainId?: number;
-    destinationTokenAddress?: Address;
-  }> = {};
-
-  if (params.type === "origin" || typeof params.type === "undefined") {
-    if (params.query?.startsWith("0x")) {
-      filters.originTokenAddress = params.query as Address;
-    } else if (Number.isInteger(Number(params.query))) {
-      filters.originChainId = Number(params.query);
-    } else if (params.query) {
-      filters.originQuery = params.query;
-    }
-  } else if (params.type === "destination") {
-    if (params.query?.startsWith("0x")) {
-      filters.destinationTokenAddress = params.query as Address;
-    } else if (Number.isInteger(Number(params.query))) {
-      filters.destinationChainId = Number(params.query);
-    } else if (params.query) {
-      filters.destinationQuery = params.query;
-    }
-  }
-  const routes = await getRoutes({
-    destinationQuery: filters.destinationQuery,
-    limit: DEFAULT_PAGE_SIZE,
-    offset: DEFAULT_PAGE_SIZE * ((params.page || 1) - 1),
-    originQuery: filters.originQuery,
-  });
-
-  return {
-    filteredCount: routes.meta.filteredCount,
-    routesToRender: routes.data,
-    totalCount: routes.meta.totalCount,
-  };
-}
-
-export async function RoutesData(props: {
-  searchParams: SearchParams;
-  activeView: "table" | "grid";
-  isLoggedIn: boolean;
-}) {
-  const { routesToRender, totalCount, filteredCount } = await getRoutesToRender(
-    props.searchParams,
-  );
-
-  const totalPages = Math.ceil(filteredCount / DEFAULT_PAGE_SIZE);
-
-  return (
-    <>
-      <main>
-        {/* empty state */}
-        {routesToRender.length === 0 ? (
-          <div className="flex h-[300px] items-center justify-center rounded-lg border p-8 lg:h-[500px]">
-            <p className="text-2xl">No Results found</p>
-          </div>
-        ) : props.activeView === "table" ? (
-          <TableContainer>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Origin Token</TableHead>
-                  <TableHead>Origin Chain</TableHead>
-                  <TableHead>Destination Token</TableHead>
-                  <TableHead>Destination Chain</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {routesToRender.map((route) => (
-                  <RouteListRow
-                    destinationChainId={route.destinationToken.chainId}
-                    destinationTokenAddress={route.destinationToken.address}
-                    destinationTokenIconUri={route.destinationToken.iconUri}
-                    destinationTokenName={route.destinationToken.name}
-                    destinationTokenSymbol={route.destinationToken.symbol}
-                    key={`${route.originToken.chainId}:${route.originToken.address}-${route.destinationToken.chainId}:${route.destinationToken.address}`}
-                    originChainId={route.originToken.chainId}
-                    originTokenAddress={route.originToken.address}
-                    originTokenIconUri={route.originToken.iconUri}
-                    originTokenName={route.originToken.name}
-                    originTokenSymbol={route.originToken.symbol}
-                  />
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        ) : (
-          <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {routesToRender.map((route) => (
-              <li
-                className="h-full"
-                key={`${route.originToken.chainId}:${route.originToken.address}-${route.destinationToken.chainId}:${route.destinationToken.address}`}
-              >
-                <RouteListCard
-                  destinationChainId={route.destinationToken.chainId}
-                  destinationTokenAddress={route.destinationToken.address}
-                  destinationTokenIconUri={route.destinationToken.iconUri}
-                  destinationTokenName={route.destinationToken.name}
-                  destinationTokenSymbol={route.destinationToken.symbol}
-                  originChainId={route.originToken.chainId}
-                  originTokenAddress={route.originToken.address}
-                  originTokenIconUri={route.originToken.iconUri}
-                  originTokenName={route.originToken.name}
-                  originTokenSymbol={route.originToken.symbol}
-                />
-              </li>
-            ))}
-          </ul>
-        )}
-      </main>
-      <div className="h-10" />
-      {totalPages > 1 && (
-        <ChainlistPagination
-          activePage={Number(props.searchParams.page) || 1}
-          totalPages={totalPages}
-        />
-      )}
-      <div className="h-4" />
-      <p className="text-balance text-center text-muted-foreground text-sm">
-        Showing{" "}
-        <span className="text-accent-foreground">{routesToRender.length}</span>{" "}
-        out of{" "}
-        {filteredCount !== totalCount ? (
-          <>
-            <span className="text-accent-foreground">
-              {filteredCount.toLocaleString()}
-            </span>{" "}
-            routes that match filters. (Total:{" "}
-            <span className="text-accent-foreground">
-              {totalCount.toLocaleString()}
-            </span>
-            )
-          </>
-        ) : (
-          <>
-            <span className="text-accent-foreground">
-              {totalCount.toLocaleString()}
-            </span>{" "}
-            routes.
-          </>
-        )}
-      </p>
-    </>
-  );
-}

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

@@ -1,94 +0,0 @@
-import { ArrowUpRightIcon } from "lucide-react";
-import type { Metadata } from "next";
-import { headers } from "next/headers";
-import { getAuthToken } from "@/api/auth-token";
-import { SearchInput } from "./components/client/search";
-import { QueryType } from "./components/client/type";
-import { RouteListView } from "./components/client/view";
-import {
-  RoutesData,
-  type SearchParams,
-} from "./components/server/routes-table";
-
-const title = "Payments Routes: Swap, Bridge, and Onramp";
-const description =
-  "A list of token routes for swapping, bridging, and on-ramping between EVM chains with thirdweb.";
-
-export const metadata: Metadata = {
-  description,
-  openGraph: {
-    description,
-    title,
-  },
-  title,
-};
-
-export default async function RoutesPage(props: {
-  searchParams: Promise<SearchParams>;
-}) {
-  const authToken = await getAuthToken();
-  const headersList = await headers();
-  const viewportWithHint = Number(
-    headersList.get("Sec-Ch-Viewport-Width") || 0,
-  );
-  const searchParams = await props.searchParams;
-
-  const activeType = searchParams.type ?? "origin";
-
-  // default is driven by viewport hint
-  const activeView = searchParams.view
-    ? searchParams.view
-    : viewportWithHint > 1000
-      ? "table"
-      : "grid";
-
-  return (
-    <section className="container mx-auto flex h-full flex-col px-4 py-10">
-      <header className="flex flex-col gap-6">
-        <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
-          <div className="flex flex-col gap-2">
-            <h1 className="font-semibold text-4xl tracking-tighter lg:text-5xl">
-              Routes
-            </h1>
-          </div>
-          <div className="flex flex-row items-end gap-4 lg:flex-col">
-            <div className="flex w-full flex-row items-center gap-4">
-              <SearchInput />
-              <QueryType activeType={activeType} />
-              <RouteListView activeView={activeView} />
-            </div>
-          </div>
-        </div>
-      </header>
-      <div className="h-10" />
-      <div className="relative overflow-hidden rounded-lg border-2 border-green-500/20 bg-gradient-to-br from-card/80 to-card/50 p-4 shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.02)]">
-        <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
-        <div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-col gap-1">
-            <h3 className="font-medium text-lg">
-              Get Started with thirdweb Payments
-            </h3>
-            <p className="text-muted-foreground text-sm">
-              Simple, instant, and secure payments across any token and chain.
-            </p>
-          </div>
-          <a
-            className="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 font-medium text-sm text-white transition-all hover:bg-green-600/90 hover:shadow-sm"
-            href="https://portal.thirdweb.com/payments"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Learn More
-            <ArrowUpRightIcon className="size-4" />
-          </a>
-        </div>
-      </div>
-      <div className="h-10" />
-      <RoutesData
-        activeView={activeView}
-        isLoggedIn={!!authToken}
-        searchParams={searchParams}
-      />
-    </section>
-  );
-}

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

@@ -1,18 +0,0 @@
-import type { Address } from "thirdweb";
-
-export type Route = {
-  originToken: {
-    address: Address;
-    chainId: number;
-    iconUri?: string;
-    name: string;
-    symbol: string;
-  };
-  destinationToken: {
-    address: Address;
-    chainId: number;
-    iconUri?: string;
-    name: string;
-    symbol: string;
-  };
-};

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

@@ -1,48 +0,0 @@
-import "server-only";
-
-import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "@/constants/public-envs";
-import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
-import type { Route } from "./types/route";
-
-export async function getRoutes({
-  limit,
-  offset,
-  originQuery,
-  destinationQuery,
-}: {
-  limit?: number;
-  offset?: number;
-  originQuery?: string;
-  destinationQuery?: string;
-} = {}) {
-  const url = new URL(`${NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST}/v1/routes/search`);
-  if (limit) {
-    url.searchParams.set("limit", limit.toString());
-  }
-  if (offset) {
-    url.searchParams.set("offset", offset.toString());
-  }
-  if (originQuery) {
-    url.searchParams.set("originQuery", originQuery);
-  }
-  if (destinationQuery) {
-    url.searchParams.set("destinationQuery", destinationQuery);
-  }
-  url.searchParams.set("sortBy", "popularity");
-  const routesResponse = await fetch(url, {
-    headers: {
-      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
-    },
-    next: { revalidate: 60 * 60 },
-  });
-
-  if (!routesResponse.ok) {
-    throw new Error("Failed to fetch routes");
-  }
-  const routes: {
-    data: Route[];
-    meta: { totalCount: number; filteredCount: number };
-  } = await routesResponse.json();
-
-  return routes;
-}

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

@@ -1,18 +1,13 @@
 "use client";
-import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { BuyAndSwapEmbed } from "@/components/blocks/BuyAndSwapEmbed";
 import { GridPatternEmbedContainer } from "@/components/blocks/grid-pattern-embed-container";
 import { defineDashboardChain } from "@/lib/defineDashboardChain";
 
-export function BuyFundsSection(props: {
-  chain: ChainMetadata;
-  client: ThirdwebClient;
-}) {
+export function BuyFundsSection(props: { chain: ChainMetadata }) {
   return (
     <GridPatternEmbedContainer>
       <BuyAndSwapEmbed
-        client={props.client}
         // eslint-disable-next-line no-restricted-syntax
         chain={defineDashboardChain(props.chain.chainId, props.chain)}
         buyAmount={undefined}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/opengraph-image.tsx

@@ -1,5 +1,4 @@
 import { ImageResponse } from "next/og";
-import { useId } from "react";
 import { download } from "thirdweb/storage";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
@@ -18,8 +17,8 @@ export const size = {
 export const contentType = "image/png";
 
 const TWLogo: React.FC = () => {
-  const clipPathId = useId();
-  const linearGradientId = useId();
+  const clipPathId = "og-tw-logo-clip-path";
+  const linearGradientId = "og-tw-logo-linear-gradient";
   return (
     // biome-ignore lint/a11y/noSvgWithoutTitle: not needed
     <svg

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

@@ -44,7 +44,7 @@ export default async function Page(props: {
       {chain.testnet ? (
         <FaucetSection chain={chain} client={client} isLoggedIn={!!account} />
       ) : chain.services.find((c) => c.service === "pay" && c.enabled) ? (
-        <BuyFundsSection chain={chain} client={client} />
+        <BuyFundsSection chain={chain} />
       ) : null}
 
       {/* Chain Overview */}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/utils/contract-wallet-analytics.ts

@@ -67,7 +67,6 @@ export async function getContractUniqueWalletAnalytics(params: {
   }
 
   const json = (await res.json()) as InsightResponse;
-  console.log("wallet analytics json", json);
   const aggregations = Object.values(json.aggregations[0]);
 
   const returnValue: TransactionAnalyticsEntry[] = [];

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx

@@ -58,6 +58,7 @@ export function NFTGetAllTable({
       includeOwners: true,
       start: currentPage * pageSize,
       tokenByIndex,
+      useIndexer: false, // TEMPORARY, TODO: Remove when this is fixed in insight
     },
   );
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/opengraph-image.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from "@vercel/og";
-import { useId } from "react";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { isProd } from "@/constants/env-utils";
 import { API_ROUTES_CLIENT_ID } from "@/constants/server-envs";
@@ -62,8 +61,9 @@ function shortenString(str: string) {
   return `${str.substring(0, 7)}...${str.substring(str.length - 5)}`;
 }
 
+const gradientId = "og-brand-icon-gradient";
+
 const OgBrandIcon: React.FC = () => {
-  const gradientId = useId();
   return (
     // biome-ignore lint/a11y/noSvgWithoutTitle: not needed
     <svg

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx

@@ -6,7 +6,7 @@ import { PublicPageConnectButton } from "./PublicPageConnectButton";
 
 export function PageHeader(props: { containerClassName?: string }) {
   return (
-    <div className="border-b bg-card">
+    <div className="border-b">
       <header
         className={cn(
           "container flex max-w-8xl justify-between py-3",

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton.tsx

@@ -28,6 +28,9 @@ export function PublicPageConnectButton(props: {
       connectButton={{
         className: props.connectButtonClassName,
       }}
+      detailsButton={{
+        className: props.connectButtonClassName,
+      }}
       connectModal={{
         privacyPolicyUrl: "/privacy-policy",
         showThirdwebBranding: false,

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx

@@ -76,7 +76,7 @@ export function ContractHeaderUI(props: {
   return (
     <div
       className={cn(
-        "flex flex-col lg:flex-row lg:items-center gap-5 py-6 relative",
+        "flex flex-col lg:flex-row lg:items-center gap-5 py-8 relative",
         props.className,
       )}
     >

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { formatDistanceToNow } from "date-fns";
 import {
+  ArrowLeftRightIcon,
   ArrowRightIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -73,8 +74,13 @@ function RecentTransfersUI(props: {
 
   return (
     <div>
-      <div className="p-4 lg:p-6 bg-card border rounded-b-none border-b-0 rounded-lg">
-        <h2 className="font-semibold text-2xl tracking-tight mb-0.5">
+      <div className="p-4 lg:p-6 bg-card border rounded-b-none border-b-0 rounded-xl">
+        <div className="flex mb-3">
+          <div className="rounded-full border p-2 bg-background">
+            <ArrowLeftRightIcon className="size-4 text-muted-foreground" />
+          </div>
+        </div>
+        <h2 className="font-semibold text-2xl tracking-tight mb-1">
           Recent Transfers
         </h2>
         <p className="text-muted-foreground text-sm">
@@ -194,7 +200,7 @@ function RecentTransfersUI(props: {
         )}
       </TableContainer>
 
-      <div className="flex items-center justify-end gap-3 rounded-b-lg border-x border-b bg-card px-6 py-5">
+      <div className="flex items-center justify-end gap-3 rounded-b-xl border-x border-b bg-card px-6 py-5">
         <Button
           className="gap-1.5 bg-background rounded-full"
           disabled={props.page === 0 || props.isPending}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/contract-analytics/contract-analytics.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { BarChart3Icon } from "lucide-react";
 import { useState } from "react";
 import { ThirdwebAreaChart } from "@/components/blocks/charts/area-chart";
 import {
@@ -35,10 +36,18 @@ export function ContractAnalyticsOverview(props: {
       margin={{
         bottom: 20,
       }}
+      className="rounded-xl"
       header={{
         headerClassName: "p-4 lg:p-6",
         title: "Analytics",
         titleClassName: "font-semibold text-2xl mb-0.5 tracking-tight",
+        icon: (
+          <div className="flex mb-3">
+            <div className="rounded-full border p-2 bg-background">
+              <BarChart3Icon className="size-4 text-muted-foreground" />
+            </div>
+          </div>
+        ),
         description:
           "View trends of transactions, events and unique wallets interacting with this contract over time",
       }}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/dex-screener-chains.ts

@@ -1,77 +0,0 @@
-export const mapChainIdToDexScreenerChainSlug = {
-  8453: "base",
-  1: "ethereum",
-  56: "bsc",
-  369: "pulsechain",
-  137: "polygon",
-  2741: "abstract",
-  43114: "avalanche",
-  999: "hyperliquid",
-  480: "worldchain",
-  42161: "arbitrum",
-  388: "cronos",
-  59144: "linea",
-  1514: "story",
-  397: "near",
-  295: "hedera",
-  146: "sonic",
-  10: "optimism",
-  80094: "berachain",
-  57073: "ink",
-  130: "unichain",
-  5000: "mantle",
-  324: "zksync",
-  466: "apechain",
-  1116: "core",
-  250: "fantom",
-  1868: "soneium",
-  81457: "blast",
-  2000: "dogechain",
-  14: "flare",
-  2040: "vana",
-  4337: "beam",
-  109: "shibarium",
-  747: "flowevm",
-  1088: "metis",
-  1030: "conflux",
-  43113: "avalanchedfk",
-  534352: "scroll",
-  747474: "katana",
-  42220: "celo",
-  1284: "moonbeam",
-  4200: "merlinchain",
-  2222: "kava",
-  39797: "energi",
-  34443: "mode",
-  252: "fraxtal",
-  48900: "zircuit",
-  20: "elastos",
-  100: "gnosischain",
-  204: "opbnb",
-  169: "manta",
-  1313161554: "aurora",
-  3073: "movement",
-  4689: "iotex",
-  23294: "oasissapphire",
-  6001: "bouncebit",
-  42170: "arbitrumnova",
-  1101: "polygonzkevm",
-  40: "telos",
-  592: "astar",
-  42262: "oasisemerald",
-  1285: "moonriver",
-  245022934: "neonevm",
-  7777777: "zora",
-  122: "fuse",
-  321: "kcc",
-  1234: "stepnetwork",
-  106: "velas",
-  167000: "taiko",
-  288: "boba",
-  42766: "zkfair",
-  32520: "bitgert",
-  82: "meter",
-} as const;
-
-export type DexScreenerChainSlug =
-  (typeof mapChainIdToDexScreenerChainSlug)[keyof typeof mapChainIdToDexScreenerChainSlug];

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/dex-screener.tsx

@@ -1,58 +0,0 @@
-"use client";
-import { Spinner } from "@workspace/ui/components/spinner";
-import { useTheme } from "next-themes";
-import { useMemo } from "react";
-import { ClientOnly } from "@/components/blocks/client-only";
-import type { DexScreenerChainSlug } from "./dex-screener-chains";
-
-function DexScreenerIframe(props: {
-  chain: DexScreenerChainSlug;
-  contractAddress: string;
-}) {
-  const { theme } = useTheme();
-
-  const iframeUrl = useMemo(() => {
-    const resolvedTheme = theme === "light" ? "light" : "dark";
-    const url = new URL("https://dexscreener.com");
-    url.pathname = `${props.chain}/${props.contractAddress}`;
-    url.searchParams.set("embed", "1");
-    url.searchParams.set("loadChartSettings", "0");
-    url.searchParams.set("chartTheme", resolvedTheme);
-    url.searchParams.set("theme", resolvedTheme);
-    url.searchParams.set("trades", "1");
-    url.searchParams.set("chartStyle", "1");
-    url.searchParams.set("chartLeftToolbar", "0");
-    url.searchParams.set("chartType", "usd");
-    url.searchParams.set("interval", "15");
-    url.searchParams.set("chartDefaultOnMobile", "1");
-    return url.toString();
-  }, [theme, props.chain, props.contractAddress]);
-
-  return (
-    <iframe
-      className="w-full h-[500px] lg:h-[1000px] rounded-lg overflow-hidden border bg-card"
-      src={iframeUrl}
-      title="DexScreener"
-    ></iframe>
-  );
-}
-
-export function DexScreener(props: {
-  chain: DexScreenerChainSlug;
-  contractAddress: string;
-}) {
-  return (
-    <ClientOnly
-      ssr={
-        <div className="w-full h-[500px] lg:h-[1000px] rounded-lg border bg-card items-center justify-center flex">
-          <Spinner className="size-10" />
-        </div>
-      }
-    >
-      <DexScreenerIframe
-        chain={props.chain}
-        contractAddress={props.contractAddress}
-      />
-    </ClientOnly>
-  );
-}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/fetch-coin-info.ts

@@ -1,42 +1,21 @@
 import "server-only";
-import { isProd } from "@/constants/env-utils";
-import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
+import { Bridge, type ThirdwebClient } from "thirdweb";
 
 export async function fetchTokenInfoFromBridge(params: {
   chainId: number;
   tokenAddress: string;
-  clientId: string;
+  client: ThirdwebClient;
 }) {
   try {
-    const res = await fetch(
-      `https://bridge.${isProd ? "thirdweb.com" : "thirdweb-dev.com"}/v1/tokens?chainId=${params.chainId}&tokenAddress=${params.tokenAddress}`,
-      {
-        headers: {
-          "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
-        },
-      },
-    );
-
-    if (!res.ok) {
-      console.error(
-        `Failed to fetch token info from bridge: ${await res.text()}`,
-      );
-      return null;
-    }
-
-    const data = (await res.json()) as {
-      data: Array<{
-        iconUri: string;
-        address: string;
-        decimals: number;
-        name: string;
-        symbol: string;
-        priceUsd: number;
-      }>;
-    };
-
-    return data.data[0];
+    const res = await Bridge.tokens({
+      client: params.client,
+      chainId: params.chainId,
+      tokenAddress: params.tokenAddress,
+      includePrices: true,
+      limit: 1,
+    });
+    return res[0];
   } catch {
-    return null;
+    return undefined;
   }
 }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx

@@ -1,3 +1,4 @@
+import { BarChart3Icon, DollarSignIcon, TrendingUpIcon } from "lucide-react";
 import { cookies } from "next/headers";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
@@ -13,8 +14,6 @@ import { PageHeader } from "../_components/PageHeader";
 import { ContractHeaderUI } from "./_components/ContractHeader";
 import { TokenDropClaim } from "./_components/claim-tokens/claim-tokens-ui";
 import { ContractAnalyticsOverview } from "./_components/contract-analytics/contract-analytics";
-import { DexScreener } from "./_components/dex-screener";
-import { mapChainIdToDexScreenerChainSlug } from "./_components/dex-screener-chains";
 import { RecentTransfers } from "./_components/RecentTransfers";
 import { fetchTokenInfoFromBridge } from "./_utils/fetch-coin-info";
 import { getCurrencyMeta } from "./_utils/getCurrencyMeta";
@@ -40,7 +39,7 @@ export async function ERC20PublicPage(props: {
     }),
     fetchTokenInfoFromBridge({
       chainId: props.serverContract.chain.id,
-      clientId: props.clientContract.client.clientId,
+      client: props.serverContract.client,
       tokenAddress: props.serverContract.address,
     }),
     resolveFunctionSelectors(props.serverContract),
@@ -80,7 +79,7 @@ export async function ERC20PublicPage(props: {
       <AssetPageView assetType="coin" chainId={props.chainMetadata.chainId} />
       <PageHeader containerClassName="max-w-7xl" />
 
-      <div className="border-b">
+      <div className="border-b border-dashed">
         <div className="container max-w-7xl">
           <ContractHeaderUI
             chainMetadata={props.chainMetadata}
@@ -102,6 +101,44 @@ export async function ERC20PublicPage(props: {
 
       <div className="h-8" />
 
+      {tokenInfoFromUB && (
+        <div className="container max-w-7xl mb-8">
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3 p-6 border rounded-xl bg-card relative">
+            <TokenInfoSection
+              icon={DollarSignIcon}
+              label="Price"
+              value={
+                tokenInfoFromUB.prices.USD
+                  ? formatPrice(tokenInfoFromUB.prices.USD)
+                  : "N/A"
+              }
+            />
+
+            <TokenInfoSection
+              className="border-t pt-6 lg:border-l lg:border-t-0 border-dashed lg:pl-8 lg:pt-0"
+              icon={TrendingUpIcon}
+              label="Market Cap"
+              value={
+                tokenInfoFromUB.marketCapUsd
+                  ? formatCompactUSD(tokenInfoFromUB.marketCapUsd)
+                  : "N/A"
+              }
+            />
+
+            <TokenInfoSection
+              className="border-t pt-6 lg:border-l lg:border-t-0 border-dashed lg:pl-8 lg:pt-0"
+              icon={BarChart3Icon}
+              label="Volume (24h)"
+              value={
+                tokenInfoFromUB.volume24hUsd
+                  ? formatCompactUSD(tokenInfoFromUB.volume24hUsd)
+                  : "N/A"
+              }
+            />
+          </div>
+        </div>
+      )}
+
       {showBuyEmbed && (
         <div className="container max-w-7xl pb-10">
           <GridPatternEmbedContainer>
@@ -118,20 +155,6 @@ export async function ERC20PublicPage(props: {
         </div>
       )}
 
-      {props.chainMetadata.chainId in mapChainIdToDexScreenerChainSlug && (
-        <div className="container max-w-7xl pb-10">
-          <DexScreener
-            chain={
-              mapChainIdToDexScreenerChainSlug[
-                props.chainMetadata
-                  .chainId as keyof typeof mapChainIdToDexScreenerChainSlug
-              ]
-            }
-            contractAddress={props.clientContract.address}
-          />
-        </div>
-      )}
-
       <div className="container flex max-w-7xl grow flex-col pb-10">
         <div className="flex grow flex-col gap-8">
           <ContractAnalyticsOverview
@@ -173,7 +196,6 @@ function BuyEmbed(props: {
     return (
       <BuyAndSwapEmbed
         chain={props.clientContract.chain}
-        client={props.clientContract.client}
         tokenAddress={props.clientContract.address}
         buyAmount={undefined}
         pageType="asset"
@@ -206,3 +228,61 @@ async function getActiveClaimConditionWithErrorHandler(
 }
 
 type ActiveClaimCondition = Awaited<ReturnType<typeof getActiveClaimCondition>>;
+
+function TokenInfoSection(props: {
+  label: string;
+  value: string;
+  icon: React.FC<{ className?: string }>;
+  className?: string;
+}) {
+  return (
+    <div className={props.className}>
+      <div className="flex mb-5">
+        <div className="border rounded-full bg-background p-2">
+          <props.icon className="size-4 text-muted-foreground" />
+        </div>
+      </div>
+      <dl className="space-y-1.5">
+        <dt className="text-xs font-medium text-muted-foreground tracking-wider uppercase">
+          {props.label}
+        </dt>
+        <dd className="text-3xl font-bold text-foreground tracking-tight">
+          {props.value}
+        </dd>
+      </dl>
+    </div>
+  );
+}
+
+function formatPrice(value: number): string {
+  if (value < 100) {
+    return smallValueUSDFormatter.format(value);
+  }
+  return largeValueUSDFormatter.format(value);
+}
+
+const smallValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 6,
+  roundingMode: "halfEven",
+});
+
+const largeValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 2,
+  roundingMode: "halfEven",
+});
+
+const compactValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  notation: "compact",
+  maximumFractionDigits: 2,
+  roundingMode: "halfEven",
+});
+
+function formatCompactUSD(value: number): string {
+  return compactValueUSDFormatter.format(value);
+}

apps/dashboard/src/app/(app)/(dashboard)/tokens/components/header.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
+import { cn } from "@/lib/utils";
+import { ThirdwebMiniLogo } from "../../../components/ThirdwebMiniLogo";
+import { PublicPageConnectButton } from "../../(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
+
+export function PageHeader(props: { containerClassName?: string }) {
+  return (
+    <div className="border-b">
+      <header
+        className={cn(
+          "container flex max-w-7xl justify-between py-3",
+          props.containerClassName,
+        )}
+      >
+        <div className="flex items-center gap-4">
+          <Link className="flex items-center gap-2" href="/team">
+            <ThirdwebMiniLogo className="h-5" />
+            <span className="hidden font-bold text-2xl tracking-tight lg:block">
+              thirdweb
+            </span>
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-5">
+          <Link
+            href="https://portal.thirdweb.com/bridge"
+            target="_blank"
+            className="text-sm text-muted-foreground hover:text-foreground"
+          >
+            Docs
+          </Link>
+          <ToggleThemeButton />
+          <PublicPageConnectButton connectButtonClassName="!rounded-full" />
+        </div>
+      </header>
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/tokens/components/token-page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { Input } from "@workspace/ui/components/input";
+import { cn } from "@workspace/ui/lib/utils";
+import { ActivityIcon, SearchIcon, TrendingUpIcon } from "lucide-react";
+import { useState } from "react";
+import { Bridge } from "thirdweb";
+import { BridgeNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Button } from "@/components/ui/button";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { TokensTable } from "./tokens-table";
+
+const client = getClientThirdwebClient();
+
+const pageSize = 20;
+
+export function TokenPage(props: { chains: Bridge.chains.Result }) {
+  const [page, setPage] = useState(1);
+  const [chainId, setChainId] = useState(1);
+  const [search, setSearch] = useState("");
+  const [sortBy, setSortBy] = useState<"volume" | "market_cap">("volume");
+
+  const tokensQuery = useQuery({
+    queryKey: [
+      "tokens",
+      {
+        page,
+        chainId,
+        sortBy,
+        search,
+      },
+    ],
+    queryFn: () => {
+      return Bridge.tokens({
+        client: client,
+        chainId: chainId,
+        limit: pageSize,
+        offset: (page - 1) * pageSize,
+        sortBy: search ? undefined : sortBy,
+        query: search ? search : undefined,
+      });
+    },
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
+
+  return (
+    <div className="pb-20 pt-8">
+      <div className="container max-w-7xl">
+        <div className="mb-4 flex gap-4 lg:gap-3 flex-col lg:flex-row">
+          <BridgeNetworkSelector
+            client={client}
+            chainId={chainId}
+            onChange={setChainId}
+            className="rounded-xl bg-card lg:w-fit min-w-[280px]"
+            popoverContentClassName="!w-[300px] rounded-xl overflow-hidden"
+            chains={props.chains}
+          />
+
+          <div className="flex gap-3">
+            <SortButton
+              label="Popular"
+              onClick={() => {
+                setSortBy("market_cap");
+                setSearch("");
+              }}
+              isSelected={sortBy === "market_cap" && !search}
+              icon={ActivityIcon}
+            />
+            <SortButton
+              label="Trending"
+              onClick={() => {
+                setSortBy("volume");
+                setSearch("");
+              }}
+              isSelected={sortBy === "volume" && !search}
+              icon={TrendingUpIcon}
+            />
+          </div>
+
+          <div className="relative w-full lg:w-[420px] ml-auto">
+            <SearchIcon className="size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Search Tokens"
+              value={search}
+              className="rounded-xl bg-card flex-1 pl-9"
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <TokensTable
+          pageSize={pageSize}
+          tokens={tokensQuery.data ?? []}
+          isFetching={tokensQuery.isFetching}
+          pagination={{
+            onNext: () => setPage(page + 1),
+            onPrevious: () => setPage(page - 1),
+            nextDisabled: !!(
+              tokensQuery.data && tokensQuery.data.length < pageSize
+            ),
+            previousDisabled: page === 1,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function SortButton(props: {
+  label: string;
+  onClick: () => void;
+  isSelected: boolean;
+  icon: React.FC<{ className?: string }>;
+}) {
+  return (
+    <Button
+      variant="outline"
+      onClick={props.onClick}
+      className={cn(
+        "rounded-xl gap-2 bg-card",
+        props.isSelected && "bg-accent border-active-border",
+      )}
+    >
+      <props.icon className="size-3.5" />
+      {props.label}
+    </Button>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/tokens/components/tokens-table.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
+import { type Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export function TokensTable(props: {
+  tokens: Bridge.TokenWithPrices[];
+  pageSize: number;
+  isFetching: boolean;
+  pagination: {
+    onNext: () => void;
+    onPrevious: () => void;
+    nextDisabled: boolean;
+    previousDisabled: boolean;
+  };
+}) {
+  const { tokens, isFetching } = props;
+
+  return (
+    <div className="border rounded-xl overflow-hidden">
+      <TableContainer className="border-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Token</TableHead>
+              <TableHead>Price</TableHead>
+              <TableHead>Market cap</TableHead>
+              <TableHead>Volume (24h)</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isFetching
+              ? new Array(props.pageSize).fill(0).map((_, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: ok
+                  <TableRow key={i}>
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <Skeleton className="size-10 rounded-full" />
+                        <div className="flex flex-col gap-1.5">
+                          <Skeleton className="h-4 w-16" />
+                          <Skeleton className="h-3 w-36" />
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto h-4 w-16" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto h-4 w-20" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto h-4 w-20" />
+                    </TableCell>
+                  </TableRow>
+                ))
+              : tokens.length > 0
+                ? tokens.map((token) => {
+                    const price = token.prices.USD;
+                    return (
+                      <TableRow
+                        key={`${token.chainId}-${token.address}`}
+                        className="hover:bg-accent/50"
+                        linkBox
+                      >
+                        <TableCell>
+                          <div className="flex items-center gap-3">
+                            <Avatar className="size-10">
+                              <AvatarImage
+                                src={token.iconUri ?? undefined}
+                                alt={token.symbol}
+                              />
+                              <AvatarFallback>
+                                {token.symbol?.slice(0, 2)?.toUpperCase()}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="flex flex-col gap-1.5">
+                              <span className="font-medium leading-none text-base">
+                                {token.symbol}
+                              </span>
+                              <Link
+                                href={
+                                  token.address.toLowerCase() ===
+                                  NATIVE_TOKEN_ADDRESS.toLowerCase()
+                                    ? `/${token.chainId}`
+                                    : `/${token.chainId}/${token.address}`
+                                }
+                                prefetch={false}
+                                className="before:absolute before:inset-0"
+                              >
+                                <span className="text-sm text-muted-foreground leading-none">
+                                  {token.name}
+                                </span>
+                              </Link>
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          {price ? formatPrice(price) : "N/A"}
+                        </TableCell>
+                        <TableCell>
+                          {token.marketCapUsd
+                            ? formatUsdCompact(token.marketCapUsd)
+                            : "N/A"}
+                        </TableCell>
+                        <TableCell>
+                          {token.volume24hUsd
+                            ? formatUsdCompact(token.volume24hUsd)
+                            : "N/A"}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+                : null}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {tokens.length === 0 && !isFetching && (
+        <div className="flex items-center justify-center py-20 text-muted-foreground w-full text-sm ">
+          No tokens found
+        </div>
+      )}
+
+      <div className="flex justify-end p-4 gap-3 border-t bg-card">
+        <Button
+          variant="outline"
+          className="gap-2 rounded-full"
+          size="sm"
+          onClick={() => props.pagination.onPrevious()}
+          disabled={props.pagination.previousDisabled || isFetching}
+        >
+          <ArrowLeftIcon className="size-4" />
+          Previous
+        </Button>
+
+        <Button
+          variant="outline"
+          className="gap-2 rounded-full"
+          size="sm"
+          onClick={() => props.pagination.onNext()}
+          disabled={props.pagination.nextDisabled || isFetching}
+        >
+          Next
+          <ArrowRightIcon className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function formatPrice(value: number): string {
+  if (value < 100) {
+    return smallValueUSDFormatter.format(value);
+  }
+  return largeValueUSDFormatter.format(value);
+}
+
+const smallValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 6,
+  roundingMode: "halfEven",
+});
+
+const largeValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 2,
+  roundingMode: "halfEven",
+});
+
+const compactValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  notation: "compact",
+  maximumFractionDigits: 2,
+  roundingMode: "halfEven",
+});
+
+function formatUsdCompact(value: number): string {
+  return compactValueUSDFormatter.format(value);
+}

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

@@ -0,0 +1,61 @@
+import { BringToFrontIcon } from "lucide-react";
+import type { Metadata } from "next";
+import { unstable_cache } from "next/cache";
+import Link from "next/link";
+import { Bridge } from "thirdweb";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
+import { PageHeader } from "./components/header";
+import { TokenPage } from "./components/token-page";
+
+const title = "Tokens | thirdweb";
+const description = "Discover and swap any tokens on any chain, instantly";
+
+export const metadata: Metadata = {
+  description,
+  openGraph: {
+    description,
+    title,
+  },
+  title,
+};
+
+export default async function Page() {
+  const chains = await getBridgeSupportedChains();
+
+  return (
+    <div>
+      <PageHeader />
+      <div className="border-b py-10 ">
+        <div className="container max-w-7xl">
+          <div className="flex mb-4">
+            <div className="rounded-full bg-card p-2.5 border">
+              <BringToFrontIcon className="size-6 text-muted-foreground" />
+            </div>
+          </div>
+          <h1 className="text-4xl font-bold tracking-tighter mb-1">
+            Discover and swap any tokens on any chain, instantly
+          </h1>
+          <Link
+            className="text-muted-foreground hover:text-foreground"
+            href="https://thirdweb.com/monetize/bridge"
+            target="_blank"
+          >
+            Powered by thirdweb bridge
+          </Link>
+        </div>
+      </div>
+      <TokenPage chains={chains} />
+    </div>
+  );
+}
+
+const getBridgeSupportedChains = unstable_cache(
+  async () => {
+    const chains = await Bridge.chains({ client: serverThirdwebClient });
+    return chains;
+  },
+  ["bridge-supported-chains"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);

apps/dashboard/src/app/(app)/drops/[slug]/opengraph-image.tsx

@@ -1,5 +1,4 @@
 import { ImageResponse } from "next/og";
-import { useId } from "react";
 import { download } from "thirdweb/storage";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
@@ -19,8 +18,8 @@ export const size = {
 export const contentType = "image/png";
 
 const TWLogo: React.FC = () => {
-  const cipId = useId();
-  const linearGradientId = useId();
+  const cipId = "og-tw-logo-clip-path";
+  const linearGradientId = "og-tw-logo-linear-gradient";
 
   return (
     // biome-ignore lint/a11y/noSvgWithoutTitle: not needed

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

@@ -103,15 +103,12 @@ export default async function TeamLayout(props: {
         >
           {props.children}
         </TeamSidebarLayout>
-        <div className="fixed right-4 bottom-4 z-50">
-          <CustomChatButton
-            authToken={authToken}
-            clientId={undefined}
-            examplePrompts={siwaExamplePrompts}
-            label="Get Help"
-            team={team}
-          />
-        </div>
+        <CustomChatButton
+          authToken={authToken}
+          clientId={undefined}
+          examplePrompts={siwaExamplePrompts}
+          team={team}
+        />
       </div>
     </SidebarProvider>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/EmptyStateChatPageContent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowUpRightIcon } from "lucide-react";
+import { ArrowUpRightIcon, InfoIcon } from "lucide-react";
 import type { ThirdwebClient } from "thirdweb";
 import { Button } from "@/components/ui/button";
 import { NebulaIcon } from "@/icons/NebulaIcon";
@@ -24,6 +24,7 @@ export function EmptyStateChatPageContent(props: {
 }) {
   return (
     <div className="overflow-hidden py-10 lg:py-16">
+      <AIUsageBanner />
       {props.showAurora && (
         <Aurora className="top-0 left-1/2 h-[800px] w-[1000px] text-[hsl(var(--primary-foreground)/8%)] lg:w-[150%] dark:text-[hsl(var(--primary-foreground)/10%)]" />
       )}
@@ -165,3 +166,35 @@ const Aurora: React.FC<AuroraProps> = ({ className }) => {
     />
   );
 };
+
+function AIUsageBanner() {
+  return (
+    <div className="absolute top-0 left-0 right-0 z-10 flex justify-center px-4 pt-4">
+      <div className="max-w-4xl">
+        <div className="relative overflow-hidden rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 shadow-sm dark:border-blue-800 dark:from-blue-950/50 dark:to-blue-950/20">
+          <div className="relative flex items-center gap-3 px-2">
+            <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+              <InfoIcon className="size-3.5 text-blue-600 dark:text-blue-400" />
+            </div>
+
+            <div className="flex-1 text-sm">
+              <p className="text-blue-800 dark:text-blue-200">
+                thirdweb AI usage is billed based on number of tokens used. See
+                the{" "}
+                <a
+                  href="https://thirdweb.com/pricing"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-medium text-blue-700 underline decoration-blue-300 underline-offset-2 transition-colors hover:text-blue-800 hover:decoration-blue-500 dark:text-blue-300 dark:decoration-blue-600 dark:hover:text-blue-200 dark:hover:decoration-blue-400"
+                >
+                  pricing page
+                </a>
+                .
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -77,15 +77,12 @@ export default async function ProjectLayout(props: {
           {props.children}
         </ProjectSidebarLayout>
       </div>
-      <div className="fixed right-4 bottom-4 z-50">
-        <CustomChatButton
-          authToken={authToken}
-          clientId={project.publishableKey}
-          examplePrompts={siwaExamplePrompts}
-          label="Ask AI Assistant"
-          team={team}
-        />
-      </div>
+      <CustomChatButton
+        authToken={authToken}
+        clientId={project.publishableKey}
+        examplePrompts={siwaExamplePrompts}
+        team={team}
+      />
       <SaveLastUsedProject projectId={project.id} teamId={team.id} />
     </SidebarProvider>
   );

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

@@ -3,7 +3,6 @@
 import type { TokenInfo } from "thirdweb/react";
 import { BuyAndSwapEmbed } from "@/components/blocks/BuyAndSwapEmbed";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
-import { bridgeAppThirdwebClient } from "../../constants";
 
 export function UniversalBridgeEmbed({
   chainId,
@@ -17,9 +16,8 @@ export function UniversalBridgeEmbed({
   const chain = useV5DashboardChain(chainId || 1);
 
   return (
-    <div className="lg:w-[400px]">
+    <div className="w-full lg:w-[400px]">
       <BuyAndSwapEmbed
-        client={bridgeAppThirdwebClient}
         chain={chain}
         buyAmount={amount}
         tokenAddress={token?.address}

apps/dashboard/src/app/bridge/components/header.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
+import { cn } from "@/lib/utils";
+import { PublicPageConnectButton } from "../../(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
+import { ThirdwebMiniLogo } from "../../(app)/components/ThirdwebMiniLogo";
+
+export function PageHeader(props: { containerClassName?: string }) {
+  return (
+    <div className="border-b border-dashed">
+      <header
+        className={cn(
+          "container flex max-w-7xl justify-between py-3",
+          props.containerClassName,
+        )}
+      >
+        <div className="flex items-center gap-4">
+          <Link className="flex items-center gap-2" href="/team">
+            <ThirdwebMiniLogo className="h-5" />
+            <span className="hidden font-bold text-2xl tracking-tight lg:block">
+              thirdweb
+            </span>
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-5">
+          <Link
+            href="https://portal.thirdweb.com/bridge"
+            target="_blank"
+            className="text-sm text-muted-foreground hover:text-foreground"
+          >
+            Docs
+          </Link>
+          <ToggleThemeButton />
+          <PublicPageConnectButton connectButtonClassName="!rounded-full" />
+        </div>
+      </header>
+    </div>
+  );
+}

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

@@ -18,7 +18,7 @@ export default function BridgeLayout({
     <html lang="en" suppressHydrationWarning>
       <body
         className={cn(
-          "h-screen w-screen bg-background font-sans antialiased",
+          "min-h-dvh bg-background font-sans antialiased flex flex-col",
           fontSans.variable,
         )}
       >

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

@@ -1,10 +1,12 @@
-import { ArrowUpRightIcon } from "lucide-react";
+import { cn } from "@workspace/ui/lib/utils";
 import type { Metadata } from "next";
 import type { Address } from "thirdweb";
 import { defineChain } from "thirdweb/chains";
 import { getContract } from "thirdweb/contract";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
+import { AppFooter } from "@/components/footers/app-footer";
 import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
+import { PageHeader } from "./components/header";
 import { bridgeAppThirdwebClient } from "./constants";
 
 const title = "thirdweb Payments: Swap, Bridge, and Onramp";
@@ -49,8 +51,11 @@ export default async function BridgePage({
   }
 
   return (
-    <div className="relative mx-auto flex h-dvh w-full flex-col items-center justify-center overflow-hidden border py-10">
-      <main className="container z-10 flex justify-center">
+    <div className="grow flex flex-col relative overflow-hidden">
+      <PageHeader />
+
+      <div className="flex grow flex-col items-center justify-center py-36 px-4 min-h-dvh relative overflow-hidden">
+        <DotsBackgroundPattern />
         <UniversalBridgeEmbed
           amount={amount as string}
           chainId={chainId ? Number(chainId) : undefined}
@@ -64,42 +69,28 @@ export default async function BridgePage({
               : undefined
           }
         />
-      </main>
+      </div>
 
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        alt=""
-        className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0 opacity-20"
-        src="/assets/login/background.svg"
-      />
-
-      <div className="absolute inset-x-0 bottom-8 z-20">
-        <div className="container mx-auto px-4">
-          <div className="relative overflow-hidden rounded-lg border-2 border-green-500/20 bg-gradient-to-br from-card/80 to-card/50 p-4 shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.02)]">
-            <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
-            <div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-              <div className="flex flex-col gap-1">
-                <h3 className="font-semibold text-base tracking-tight">
-                  Get Started with thirdweb Bridge
-                </h3>
-                <p className="text-muted-foreground text-sm">
-                  thirdweb Bridge allows developers to easily bridge and swap
-                  tokens between chains and wallets.
-                </p>
-              </div>
-              <a
-                className="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 font-medium text-sm text-white transition-all hover:bg-green-600/90 hover:shadow-sm"
-                href="https://portal.thirdweb.com/bridge"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Learn More
-                <ArrowUpRightIcon className="size-4" />
-              </a>
-            </div>
-          </div>
-        </div>
+      <div className="bg-background relative z-10">
+        <AppFooter />
       </div>
     </div>
   );
 }
+
+function DotsBackgroundPattern(props: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-0 text-foreground/30 dark:text-foreground/10",
+        props.className,
+      )}
+      style={{
+        backgroundImage: "radial-gradient(currentColor 1px, transparent 1px)",
+        backgroundSize: "24px 24px",
+        maskImage:
+          "radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 50%)",
+      }}
+    />
+  );
+}

apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx

@@ -23,7 +23,7 @@ export function EmptyStateChatPageContent(props: {
   onLoginClick: undefined | (() => void);
 }) {
   return (
-    <div className="overflow-hidden py-10 lg:py-16">
+    <div className="relative overflow-hidden py-10 lg:py-16">
       {props.showAurora && (
         <Aurora className="top-0 left-1/2 h-[800px] w-[1000px] text-[hsl(var(--nebula-pink-foreground)/8%)] lg:w-[150%] dark:text-[hsl(var(--nebula-pink-foreground)/10%)]" />
       )}

apps/playground-web/next.config.mjs

@@ -148,12 +148,12 @@ const nextConfig = {
         permanent: false,
       },
       {
-        source: "/insight",
+        source: "/insight/:path*",
         destination: "https://insight.thirdweb.com/reference",
         permanent: false,
       },
       {
-        source: "/payments/backend",
+        source: "/payments/backend/:path*",
         destination: "/reference#tag/payments",
         permanent: false,
       },

apps/playground-web/src/app/api/paywall/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+// Allow streaming responses up to 5 minutes
+export const maxDuration = 300;
+
+export async function GET(_req: Request) {
+  return NextResponse.json({
+    success: true,
+    message: "Congratulations! You have accessed the protected route.",
+  });
+}

apps/playground-web/src/app/bridge/swap-widget/components/code.tsx

@@ -1,5 +1,6 @@
 import { lazy, Suspense } from "react";
 import { LoadingDots } from "@/components/ui/LoadingDots";
+import { quotes, stringifyImports, stringifyProps } from "@/lib/code-gen";
 import type { SwapWidgetPlaygroundOptions } from "./types";
 
 const CodeClient = lazy(() =>
@@ -28,7 +29,8 @@ export function CodeGen(props: { options: SwapWidgetPlaygroundOptions }) {
 
 function getCode(options: SwapWidgetPlaygroundOptions) {
   const imports = {
-    react: ["SwapWidget"] as string[],
+    thirdweb: ["createThirdwebClient"] as string[],
+    "thirdweb/react": ["SwapWidget"] as string[],
   };
 
   let themeProp: string | undefined;
@@ -39,7 +41,7 @@ function getCode(options: SwapWidgetPlaygroundOptions) {
     themeProp = `darkTheme({
       colors: ${JSON.stringify(options.theme.darkColorOverrides)},
     })`;
-    imports.react.push("darkTheme");
+    imports["thirdweb/react"].push("darkTheme");
   }
 
   if (options.theme.type === "light") {
@@ -47,7 +49,7 @@ function getCode(options: SwapWidgetPlaygroundOptions) {
       themeProp = `lightTheme({
         colors: ${JSON.stringify(options.theme.lightColorOverrides)},
       })`;
-      imports.react.push("lightTheme");
+      imports["thirdweb/react"].push("lightTheme");
     } else {
       themeProp = quotes("light");
     }
@@ -69,37 +71,15 @@ function getCode(options: SwapWidgetPlaygroundOptions) {
   };
 
   return `\
-import { createThirdwebClient } from "thirdweb";
-import { ${imports.react.join(", ")} } from "thirdweb/react";
+${stringifyImports(imports)}
 
 const client = createThirdwebClient({
   clientId: "....",
 });
 
-
 function Example() {
   return (
-    <SwapWidget
-      ${stringifyProps(props)}
-    />
+    <SwapWidget ${stringifyProps(props)} />
   );
 }`;
 }
-
-function quotes(value: string) {
-  return `"${value}"`;
-}
-
-function stringifyProps(props: Record<string, string | undefined | boolean>) {
-  const _props: Record<string, string | undefined | boolean> = {};
-
-  for (const key in props) {
-    if (props[key] !== undefined && props[key] !== "") {
-      _props[key] = props[key];
-    }
-  }
-
-  return Object.entries(_props)
-    .map(([key, value]) => `${key}={${value}}`)
-    .join("\n\t  ");
-}

apps/playground-web/src/app/bridge/swap-widget/components/right-section.tsx

@@ -59,7 +59,9 @@ export function RightSection(props: { options: SwapWidgetPlaygroundOptions }) {
             prefill={props.options.prefill}
             currency={props.options.currency}
             showThirdwebBranding={props.options.showThirdwebBranding}
-            key={JSON.stringify(props.options)}
+            key={JSON.stringify({
+              prefill: props.options.prefill,
+            })}
             persistTokenSelections={false}
           />
         )}

apps/playground-web/src/app/data/pages-metadata.ts

@@ -4,6 +4,7 @@ import {
   BotIcon,
   BoxIcon,
   BringToFrontIcon,
+  CircleDollarSignIcon,
   CircleUserIcon,
   CreditCardIcon,
   DollarSignIcon,
@@ -186,6 +187,13 @@ export const paymentsFeatureCards: FeatureCardMetadata[] = [
     description:
       "Enable users to pay for onchain transactions with fiat or crypto",
   },
+  {
+    icon: CircleDollarSignIcon,
+    title: "x402",
+    link: "/payments/x402",
+    description:
+      "Use the x402 payment protocol to pay for API calls using any web3 wallet",
+  },
 ];
 
 export const accountAbstractionsFeatureCards: FeatureCardMetadata[] = [

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

@@ -206,6 +206,10 @@ const payments: ShadcnSidebarLink = {
       href: "/payments/transactions",
       label: "Onchain Transaction",
     },
+    {
+      href: "/payments/x402",
+      label: "x402",
+    },
   ],
 };
 

apps/playground-web/src/app/payments/commerce/CheckoutPlayground.tsx

@@ -18,7 +18,6 @@ const defaultOptions: BridgeComponentsPlaygroundOptions = {
     sellerAddress: "0x0000000000000000000000000000000000000000",
     title: "",
     transactionData: "",
-    widget: "checkout",
     currency: "USD",
     showThirdwebBranding: true,
   },
@@ -37,12 +36,12 @@ export function CheckoutPlayground() {
     <div className="relative flex flex-col-reverse gap-6 xl:min-h-[900px] xl:flex-row xl:gap-6">
       <div className="grow border-b pb-10 xl:mb-0 xl:border-r xl:border-b-0 xl:pr-6">
         <LeftSection
-          lockedWidget="checkout"
+          widget="checkout"
           options={options}
           setOptions={setOptions}
         />
       </div>
-      <RightSection lockedWidget="checkout" options={options} />
+      <RightSection widget="checkout" options={options} />
     </div>
   );
 }

apps/playground-web/src/app/payments/components/CodeGen.tsx

@@ -1,5 +1,10 @@
 import { lazy, Suspense } from "react";
 import { LoadingDots } from "@/components/ui/LoadingDots";
+import {
+  quotes,
+  stringifyImports,
+  stringifyProps,
+} from "../../../lib/code-gen";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
 
 const CodeClient = lazy(() =>
@@ -16,58 +21,114 @@ function CodeLoading() {
   );
 }
 
-export function CodeGen(props: { options: BridgeComponentsPlaygroundOptions }) {
+export function CodeGen(props: {
+  widget: "buy" | "checkout" | "transaction";
+  options: BridgeComponentsPlaygroundOptions;
+}) {
   return (
     <div className="flex w-full grow flex-col">
       <Suspense fallback={<CodeLoading />}>
-        <CodeClient className="grow" code={getCode(props.options)} lang="tsx" />
+        <CodeClient
+          className="grow"
+          code={getCode(props.widget, props.options)}
+          lang="tsx"
+        />
       </Suspense>
     </div>
   );
 }
 
-function getCode(options: BridgeComponentsPlaygroundOptions) {
+function getCode(
+  widget: "buy" | "checkout" | "transaction",
+  options: BridgeComponentsPlaygroundOptions,
+) {
+  const componentName =
+    widget === "buy"
+      ? "BuyWidget"
+      : widget === "checkout"
+        ? "CheckoutWidget"
+        : widget === "transaction"
+          ? "TransactionWidget"
+          : "";
+
   const imports = {
-    chains: [] as string[],
-    react: ["PayEmbed"] as string[],
-    thirdweb: [] as string[],
-    wallets: [] as string[],
+    "thirdweb/chains": [] as string[],
+    "thirdweb/react": [componentName] as string[],
+    thirdweb: ["createThirdwebClient", "defineChain"] as string[],
+    "thirdweb/wallets": ["createWallet"] as string[],
   };
 
-  // Check if we have a custom chain (not base chain which has id 8453)
-  const isCustomChain =
-    options.payOptions.buyTokenChain &&
-    options.payOptions.buyTokenChain.id !== 8453;
-
-  if (isCustomChain) {
-    // Add defineChain to imports if using a custom chain
-    imports.thirdweb.push("defineChain");
-  } else {
-    // Otherwise use the base chain
-    imports.chains.push("base");
+  let themeProp: string | undefined;
+  if (
+    options.theme.type === "dark" &&
+    Object.keys(options.theme.darkColorOverrides || {}).length > 0
+  ) {
+    themeProp = `darkTheme({
+      colors: ${JSON.stringify(options.theme.darkColorOverrides)},
+    })`;
+    imports["thirdweb/react"].push("darkTheme");
   }
 
-  imports.wallets.push("createWallet");
-
-  const componentName = (() => {
-    switch (options.payOptions.widget) {
-      case "buy":
-        return "BuyWidget";
-      case "checkout":
-        return "CheckoutWidget";
-      case "transaction":
-        return "TransactionWidget";
-      default:
-        return "PayEmbed";
+  if (options.theme.type === "light") {
+    if (Object.keys(options.theme.lightColorOverrides || {}).length > 0) {
+      themeProp = `lightTheme({
+        colors: ${JSON.stringify(options.theme.lightColorOverrides)},
+      })`;
+      imports["thirdweb/react"].push("lightTheme");
+    } else {
+      themeProp = quotes("light");
     }
-  })();
-  imports.react.push(componentName);
-  imports.chains.push("defineChain");
+  }
+
+  const transaction =
+    widget === "transaction"
+      ? `claimTo({
+contract: nftContract,
+quantity: 1n,
+to: account?.address || "",
+tokenId: 2n,
+})`
+      : undefined;
+
+  const props: Record<string, string | undefined | boolean> = {
+    theme: themeProp,
+    client: "client",
+    description: options.payOptions.description
+      ? quotes(options.payOptions.description)
+      : undefined,
+    image: options.payOptions.image
+      ? quotes(options.payOptions.image)
+      : undefined,
+    name: options.payOptions.title
+      ? quotes(options.payOptions.title)
+      : undefined,
+    paymentMethods:
+      options.payOptions.paymentMethods.length === 2
+        ? undefined
+        : JSON.stringify(options.payOptions.paymentMethods),
+    currency: options.payOptions.currency
+      ? quotes(options.payOptions.currency)
+      : undefined,
+    chain: `defineChain(${options.payOptions.buyTokenChain.id})`,
+    showThirdwebBranding:
+      options.payOptions.showThirdwebBranding === false ? false : undefined,
+    amount: options.payOptions.buyTokenAmount
+      ? quotes(options.payOptions.buyTokenAmount)
+      : undefined,
+    tokenAddress: options.payOptions.buyTokenAddress
+      ? quotes(options.payOptions.buyTokenAddress)
+      : undefined,
+    seller: options.payOptions.sellerAddress
+      ? quotes(options.payOptions.sellerAddress)
+      : undefined,
+    buttonLabel: options.payOptions.buttonLabel
+      ? quotes(options.payOptions.buttonLabel)
+      : undefined,
+    transaction: transaction,
+  };
 
   return `\
-import { createThirdwebClient } from "thirdweb";
-${imports.react.length > 0 ? `import { ${imports.react.join(", ")} } from "thirdweb/react";` : ""}
-${imports.thirdweb.length > 0 ? `import { ${imports.thirdweb.join(", ")} } from "thirdweb";` : ""}
+${stringifyImports(imports)}
 
 const client = createThirdwebClient({
   clientId: "....",
@@ -75,20 +136,7 @@ const client = createThirdwebClient({
 
 function Example() {
   return (
-    <${componentName}
-      client={client}
-      chain={defineChain(${options.payOptions.buyTokenChain.id})}
-      amount="${options.payOptions.buyTokenAmount}"${options.payOptions.buyTokenAddress ? `\n\t  tokenAddress="${options.payOptions.buyTokenAddress}"` : ""}${options.payOptions.sellerAddress ? `\n\t  seller="${options.payOptions.sellerAddress}"` : ""}${options.payOptions.title ? `\n\t  ${options.payOptions.widget === "checkout" ? "name" : "title"}="${options.payOptions.title}"` : ""}${options.payOptions.image ? `\n\t  image="${options.payOptions.image}"` : ""}${options.payOptions.description ? `\n\t  description="${options.payOptions.description}"` : ""}${options.payOptions.buttonLabel ? `\n\t  buttonLabel="${options.payOptions.buttonLabel}"` : ""}${options.payOptions.paymentMethods && options.payOptions.paymentMethods.length > 0 ? `\n\t  paymentMethods={${JSON.stringify(options.payOptions.paymentMethods)}}` : ""}${options.payOptions.currency ? `\n\t  currency="${options.payOptions.currency}"` : ""}${
-        options.payOptions.widget === "transaction"
-          ? `\n\t  transaction={claimTo({
-        contract: nftContract,
-        quantity: 1n,
-        tokenId: 2n,
-        to: account?.address || "",
-      })}`
-          : ""
-      }
-    />
+    <${componentName} ${stringifyProps(props)} />
   );
 }`;
 }

apps/playground-web/src/app/payments/components/LeftSection.tsx

@@ -1,13 +1,6 @@
 "use client";
 
-import {
-  CreditCardIcon,
-  ExternalLinkIcon,
-  FuelIcon,
-  PaletteIcon,
-  Settings2Icon,
-} from "lucide-react";
-import Link from "next/link";
+import { CreditCardIcon, PaletteIcon, Settings2Icon } from "lucide-react";
 import type React from "react";
 import { useId, useState } from "react";
 import type { Address } from "thirdweb";
@@ -30,11 +23,10 @@ export function LeftSection(props: {
   setOptions: React.Dispatch<
     React.SetStateAction<BridgeComponentsPlaygroundOptions>
   >;
-  lockedWidget: "buy" | "checkout" | "transaction";
+  widget: "buy" | "checkout" | "transaction";
 }) {
   const { options, setOptions } = props;
   const { theme, payOptions } = options;
-  const effectiveWidget = props.lockedWidget || payOptions.widget || "buy";
   const setThemeType = (themeType: "dark" | "light") => {
     setOptions((v) => ({
       ...v,
@@ -130,7 +122,7 @@ export function LeftSection(props: {
           </section>
 
           {/* Shared Chain and Token Selection - Always visible for Buy and Checkout modes */}
-          {(effectiveWidget === "buy" || effectiveWidget === "checkout") && (
+          {(props.widget === "buy" || props.widget === "checkout") && (
             <div className="space-y-4">
               {/* Chain selection */}
               <div className="flex flex-col gap-2">
@@ -164,7 +156,7 @@ export function LeftSection(props: {
           {/* Mode-specific form fields */}
           <div className="my-2">
             {/* Buy Mode - Amount and Payment Methods */}
-            {effectiveWidget === "buy" && (
+            {props.widget === "buy" && (
               <div className="space-y-4">
                 <div className="flex flex-col gap-2">
                   <Label htmlFor={buyTokenAmountId}>Amount</Label>
@@ -245,7 +237,7 @@ export function LeftSection(props: {
             )}
 
             {/* Checkout Mode - Seller Address, Price and Payment Methods */}
-            {effectiveWidget === "checkout" && (
+            {props.widget === "checkout" && (
               <div className="space-y-4">
                 <div className="flex flex-col gap-2">
                   <Label htmlFor={sellerAddressId}>Seller Address</Label>
@@ -347,7 +339,7 @@ export function LeftSection(props: {
             )}
 
             {/* Transaction Mode Options */}
-            {effectiveWidget === "transaction" && (
+            {props.widget === "transaction" && (
               <div className="space-y-4">
                 <div className="flex flex-col gap-2">
                   <Label>Transaction</Label>
@@ -495,26 +487,6 @@ export function LeftSection(props: {
           <Label htmlFor={"branding"}>Show Branding</Label>
         </div>
       </CollapsibleSection>
-
-      <CollapsibleSection icon={FuelIcon} title="Sponsor gas fees">
-        <div className="mt-4 flex items-start gap-6">
-          <div className="flex flex-col gap-2">
-            <p className="">
-              Abstract away gas fees for users of your app by enabling ERC-4337
-              Account Abstraction
-            </p>
-
-            <Link
-              className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
-              href="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
-              target="_blank"
-            >
-              Learn more about Account Abstraction
-              <ExternalLinkIcon className="size-4" />
-            </Link>
-          </div>
-        </div>
-      </CollapsibleSection>
     </div>
   );
 }

apps/playground-web/src/app/payments/components/RightSection.tsx

@@ -29,7 +29,7 @@ type Tab = "ui" | "code";
 export function RightSection(props: {
   options: BridgeComponentsPlaygroundOptions;
   tab?: string;
-  lockedWidget?: "buy" | "checkout" | "transaction";
+  widget: "buy" | "checkout" | "transaction";
 }) {
   const pathname = usePathname();
   const [previewTab, _setPreviewTab] = useState<Tab>(() => {
@@ -52,10 +52,8 @@ export function RightSection(props: {
           colors: props.options.theme.lightColorOverrides,
         });
 
-  const effectiveWidget = props.lockedWidget || props.options.payOptions.widget;
-
   let embed: React.ReactNode;
-  if (effectiveWidget === "buy") {
+  if (props.widget === "buy") {
     embed = (
       <BuyWidget
         amount={props.options.payOptions.buyTokenAmount}
@@ -76,7 +74,7 @@ export function RightSection(props: {
     );
   }
 
-  if (effectiveWidget === "checkout") {
+  if (props.widget === "checkout") {
     embed = (
       <CheckoutWidget
         amount={props.options.payOptions.buyTokenAmount}
@@ -104,7 +102,7 @@ export function RightSection(props: {
     );
   }
 
-  if (effectiveWidget === "transaction") {
+  if (props.widget === "transaction") {
     embed = (
       <TransactionWidget
         client={THIRDWEB_CLIENT}
@@ -155,7 +153,9 @@ export function RightSection(props: {
 
         {previewTab === "ui" && embed}
 
-        {previewTab === "code" && <CodeGen options={props.options} />}
+        {previewTab === "code" && (
+          <CodeGen widget={props.widget} options={props.options} />
+        )}
       </div>
     </div>
   );

apps/playground-web/src/app/payments/components/types.ts

@@ -37,7 +37,6 @@ export type BridgeComponentsPlaygroundOptions = {
     lightColorOverrides: ThemeOverrides["colors"];
   };
   payOptions: {
-    widget?: "buy" | "checkout" | "transaction";
     title: string | undefined;
     image: string | undefined;
     description: string | undefined;

apps/playground-web/src/app/payments/fund-wallet/BuyPlayground.tsx

@@ -18,7 +18,6 @@ const defaultOptions: BridgeComponentsPlaygroundOptions = {
     sellerAddress: "0x0000000000000000000000000000000000000000",
     title: "",
     transactionData: "",
-    widget: "buy",
     currency: "USD",
     showThirdwebBranding: true,
   },
@@ -36,13 +35,9 @@ export function BuyPlayground() {
   return (
     <div className="relative flex flex-col-reverse gap-6 xl:min-h-[900px] xl:flex-row xl:gap-6">
       <div className="grow border-b pb-10 xl:mb-0 xl:border-r xl:border-b-0 xl:pr-6">
-        <LeftSection
-          lockedWidget="buy"
-          options={options}
-          setOptions={setOptions}
-        />
+        <LeftSection widget="buy" options={options} setOptions={setOptions} />
       </div>
-      <RightSection lockedWidget="buy" options={options} />
+      <RightSection widget="buy" options={options} />
     </div>
   );
 }

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

@@ -1,19 +1,14 @@
 import { OverviewPage } from "@/components/blocks/OverviewPage";
-import { PayIcon } from "../../icons/PayIcon";
+import { PayIcon } from "@/icons/PayIcon";
 import { paymentsFeatureCards } from "../data/pages-metadata";
 
 export default function Page() {
   return (
     <OverviewPage
-      icon={PayIcon}
       title="Payments"
-      description={
-        <>
-          Allow developers and users to receive and spend any token on any EVM
-          chain
-        </>
-      }
+      description="thirdweb Payments allow developers to create advanced payment flows to monetize their apps through product sales, peer to peer payments, token sales, and more"
       featureCards={paymentsFeatureCards}
+      icon={PayIcon}
     />
   );
 }

apps/playground-web/src/app/payments/transactions/TransactionPlayground.tsx

@@ -18,7 +18,6 @@ const defaultOptions: BridgeComponentsPlaygroundOptions = {
     sellerAddress: "0x0000000000000000000000000000000000000000",
     title: "",
     transactionData: "",
-    widget: "transaction",
     currency: "USD",
     showThirdwebBranding: true,
   },
@@ -37,12 +36,12 @@ export function TransactionPlayground() {
     <div className="relative flex flex-col-reverse gap-6 xl:min-h-[900px] xl:flex-row xl:gap-6">
       <div className="grow border-b pb-10 xl:mb-0 xl:border-r xl:border-b-0 xl:pr-6">
         <LeftSection
-          lockedWidget="transaction"
+          widget="transaction"
           options={options}
           setOptions={setOptions}
         />
       </div>
-      <RightSection lockedWidget="transaction" options={options} />
+      <RightSection widget="transaction" options={options} />
     </div>
   );
 }

apps/playground-web/src/app/payments/x402/components/x402-client-preview.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { CodeClient } from "@workspace/ui/components/code/code.client";
+import { CodeIcon, LockIcon } from "lucide-react";
+import { arbitrumSepolia } from "thirdweb/chains";
+import {
+  ConnectButton,
+  getDefaultToken,
+  useActiveAccount,
+  useActiveWallet,
+} from "thirdweb/react";
+import { wrapFetchWithPayment } from "thirdweb/x402";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { THIRDWEB_CLIENT } from "../../../../lib/client";
+
+const chain = arbitrumSepolia;
+const token = getDefaultToken(chain, "USDC");
+
+export function X402ClientPreview() {
+  const activeWallet = useActiveWallet();
+  const activeAccount = useActiveAccount();
+  const paidApiCall = useMutation({
+    mutationFn: async () => {
+      if (!activeWallet) {
+        throw new Error("No active wallet");
+      }
+      const fetchWithPay = wrapFetchWithPayment(
+        fetch,
+        THIRDWEB_CLIENT,
+        activeWallet,
+      );
+      const response = await fetchWithPay("/api/paywall");
+      return response.json();
+    },
+  });
+
+  const handlePayClick = async () => {
+    paidApiCall.mutate();
+  };
+
+  return (
+    <div className="flex flex-col gap-4 w-full p-4 md:p-12 max-w-lg mx-auto">
+      <ConnectButton
+        client={THIRDWEB_CLIENT}
+        chain={chain}
+        detailsButton={{
+          displayBalanceToken: {
+            [chain.id]: token!.address,
+          },
+        }}
+        supportedTokens={{
+          [chain.id]: [token!],
+        }}
+      />
+      <Card className="p-6">
+        <div className="flex items-center gap-3 mb-4">
+          <LockIcon className="w-5 h-5 text-muted-foreground" />
+          <span className="text-lg font-medium">Paid API Call</span>
+          <span className="text-xl font-bold text-red-600">$0.01</span>
+        </div>
+
+        <Button
+          onClick={handlePayClick}
+          className="w-full mb-4"
+          size="lg"
+          disabled={paidApiCall.isPending || !activeAccount}
+        >
+          Pay Now
+        </Button>
+        <p className="text-sm text-muted-foreground">
+          {" "}
+          <a
+            className="underline"
+            href={"https://faucet.circle.com/"}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Click here to get USDC on {chain.name}
+          </a>
+        </p>
+      </Card>
+      <Card className="p-6">
+        <div className="flex items-center gap-3 mb-2">
+          <CodeIcon className="w-5 h-5 text-muted-foreground" />
+          <span className="text-lg font-medium">API Call Response</span>
+        </div>
+        {paidApiCall.isPending && <div className="text-center">Loading...</div>}
+        {paidApiCall.isError && (
+          <div className="text-center">Error: {paidApiCall.error.message}</div>
+        )}
+        {paidApiCall.data && (
+          <CodeClient
+            code={JSON.stringify(paidApiCall.data, null, 2)}
+            lang="json"
+          />
+        )}
+      </Card>
+    </div>
+  );
+}

apps/playground-web/src/app/payments/x402/page.tsx

@@ -0,0 +1,141 @@
+import { CodeServer } from "@workspace/ui/components/code/code.server";
+import { CircleDollarSignIcon, Code2Icon } from "lucide-react";
+import { CodeExample, TabName } from "@/components/code/code-example";
+import ThirdwebProvider from "@/components/thirdweb-provider";
+import { PageLayout } from "../../../components/blocks/APIHeader";
+import { createMetadata } from "../../../lib/metadata";
+import { X402ClientPreview } from "./components/x402-client-preview";
+
+const title = "x402 Payments";
+const description =
+  "Use the x402 payment protocol to pay for API calls using any web3 wallet.";
+const ogDescription =
+  "Use the x402 payment protocol to pay for API calls using any web3 wallet.";
+
+export const metadata = createMetadata({
+  title,
+  description: ogDescription,
+  image: {
+    icon: "payments",
+    title,
+  },
+});
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <PageLayout
+        icon={CircleDollarSignIcon}
+        title={title}
+        description={description}
+        docsLink="https://portal.thirdweb.com/payments/x402?utm_source=playground"
+      >
+        <X402Example />
+        <div className="h-8" />
+        <ServerCodeExample />
+      </PageLayout>
+    </ThirdwebProvider>
+  );
+}
+
+function ServerCodeExample() {
+  return (
+    <>
+      <div className="mb-4">
+        <h2 className="font-semibold text-xl tracking-tight">
+          Next.js Server Code Example
+        </h2>
+        <p className="max-w-4xl text-muted-foreground text-balance text-sm md:text-base">
+          Create middleware with the thirdweb facilitator to settle transactions
+          with your server wallet.
+        </p>
+      </div>
+      <div className="overflow-hidden rounded-lg border bg-card">
+        <div className="flex grow flex-col border-b md:border-r md:border-b-0">
+          <TabName icon={Code2Icon} name="Server Code" />
+          <CodeServer
+            className="h-full rounded-none border-none"
+            code={`// src/middleware.ts
+
+import { facilitator, settlePayment } from "thirdweb/x402";
+import { createThirdwebClient } from "thirdweb";
+import { arbitrumSepolia } from "thirdweb/chains";
+
+const client = createThirdwebClient({ secretKey: "your-secret-key" });
+const thirdwebX402Facilitator = facilitator({
+  client,
+  serverWalletAddress: "0xYourWalletAddress",
+});
+
+export async function middleware(request: NextRequest) {
+  const method = request.method.toUpperCase();
+  const resourceUrl = request.nextUrl.toString();
+  const paymentData = request.headers.get("X-PAYMENT");
+
+  const result = await settlePayment({
+    resourceUrl,
+    method,
+    paymentData,
+    payTo: "0xYourWalletAddress",
+    network: arbitrumSepolia, // or any other chain
+    price: "$0.01", // can also be a ERC20 token amount
+    facilitator: thirdwebX402Facilitator,
+  });
+
+  if (result.status === 200) {
+    // payment successful, execute the request
+    return NextResponse.next();
+  }
+
+  // otherwise, request payment
+  return NextResponse.json(result.responseBody, {
+    status: result.status,
+    headers: result.responseHeaders,
+  });
+}
+
+// Configure which paths the middleware should run on
+export const config = {
+  matcher: ["/api/paid-endpoint"],
+};
+
+      `}
+            lang="tsx"
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+function X402Example() {
+  return (
+    <CodeExample
+      header={{
+        title: "Client Code Example",
+        description:
+          "Wrap your fetch requests with the `wrapFetchWithPayment` function to enable x402 payments.",
+      }}
+      code={`import { createThirdwebClient } from "thirdweb";
+import { wrapFetchWithPayment } from "thirdweb/x402";
+import { useActiveWallet } from "thirdweb/react";
+
+const client = createThirdwebClient({ clientId: "your-client-id" });
+
+export default function Page() {
+  const wallet = useActiveWallet();
+
+  const onClick = async () => {
+    const fetchWithPay = wrapFetchWithPayment(fetch, client, wallet);
+    const response = await fetchWithPay('/api/paid-endpoint');
+  }
+
+  return (
+        <Button onClick={onClick}>Pay Now</Button>
+  );
+}`}
+      lang="tsx"
+      preview={<X402ClientPreview />}
+    />
+  );
+}

apps/playground-web/src/app/wallets/sign-in/components/CodeGen.tsx

@@ -1,4 +1,10 @@
 import { lazy, Suspense } from "react";
+import {
+  quotes,
+  stringifyIgnoreFalsy,
+  stringifyImports,
+  stringifyProps,
+} from "@/lib/code-gen";
 import { LoadingDots } from "../../../../components/ui/LoadingDots";
 import type { ConnectPlaygroundOptions } from "./types";
 
@@ -34,10 +40,10 @@ export function CodeGen(props: { connectOptions: ConnectPlaygroundOptions }) {
 function getCode(connectOptions: ConnectPlaygroundOptions) {
   const walletCodes: string[] = [];
   const imports = {
-    chains: [] as string[],
-    react: [] as string[],
-    thirdweb: [] as string[],
-    wallets: [] as string[],
+    "thirdweb/chains": [] as string[],
+    "thirdweb/react": ["ConnectButton"] as string[],
+    thirdweb: ["createThirdwebClient"] as string[],
+    "thirdweb/wallets": [] as string[],
   };
 
   if (
@@ -49,7 +55,7 @@ function getCode(connectOptions: ConnectPlaygroundOptions) {
         options: ${JSON.stringify(connectOptions.inAppWallet.methods)},
       },
     })`);
-    imports.wallets.push("inAppWallet");
+    imports["thirdweb/wallets"].push("inAppWallet");
   }
 
   for (const wallet of connectOptions.walletIds) {
@@ -57,7 +63,7 @@ function getCode(connectOptions: ConnectPlaygroundOptions) {
   }
 
   if (connectOptions.walletIds.length > 0) {
-    imports.wallets.push("createWallet");
+    imports["thirdweb/wallets"].push("createWallet");
   }
 
   let themeProp: string | undefined;
@@ -68,7 +74,7 @@ function getCode(connectOptions: ConnectPlaygroundOptions) {
     themeProp = `darkTheme({
       colors: ${JSON.stringify(connectOptions.theme.darkColorOverrides)},
     })`;
-    imports.react.push("darkTheme");
+    imports["thirdweb/react"].push("darkTheme");
   }
 
   if (connectOptions.theme.type === "light") {
@@ -78,14 +84,14 @@ function getCode(connectOptions: ConnectPlaygroundOptions) {
       themeProp = `lightTheme({
         colors: ${JSON.stringify(connectOptions.theme.lightColorOverrides)},
       })`;
-      imports.react.push("lightTheme");
+      imports["thirdweb/react"].push("lightTheme");
     } else {
       themeProp = quotes("light");
     }
   }
 
   if (connectOptions.enableAccountAbstraction) {
-    imports.chains.push("ethereum");
+    imports["thirdweb/chains"].push("ethereum");
   }
 
   const props: Record<string, string | undefined> = {
@@ -118,11 +124,7 @@ function getCode(connectOptions: ConnectPlaygroundOptions) {
   };
 
   return `\
-import { createThirdwebClient } from "thirdweb";
-import { ConnectButton } from "thirdweb/react";
-${imports.react.length > 0 ? `import { ${imports.react.join(", ")} } from "thirdweb/react";` : ""}
-${imports.wallets.length > 0 ? `import { ${imports.wallets.join(", ")} } from "thirdweb/wallets";` : ""}
-${imports.chains.length > 0 ? `import { ${imports.chains.join(", ")} } from "thirdweb/chains";` : ""}
+${stringifyImports(imports)}
 
 const client = createThirdwebClient({
   clientId: "....",
@@ -160,35 +162,3 @@ const accountAbstractCode = `\
   sponsorGas: true
 }
 `;
-
-function stringifyIgnoreFalsy(
-  value: Record<string, string | undefined | boolean>,
-) {
-  const _value: Record<string, string | boolean> = {};
-
-  for (const key in value) {
-    if (value[key] !== undefined && value[key] !== "") {
-      _value[key] = value[key];
-    }
-  }
-
-  return JSON.stringify(_value);
-}
-
-function stringifyProps(props: Record<string, string | undefined | boolean>) {
-  const _props: Record<string, string | undefined | boolean> = {};
-
-  for (const key in props) {
-    if (props[key] !== undefined && props[key] !== "") {
-      _props[key] = props[key];
-    }
-  }
-
-  return Object.entries(_props)
-    .map(([key, value]) => `${key}={${value}}`)
-    .join("\n");
-}
-
-function quotes(value: string) {
-  return `"${value}"`;
-}

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

@@ -19,7 +19,7 @@ export function OverviewPage(props: {
           <h1 className="mb-2 font-bold text-5xl tracking-tight">
             {props.title}
           </h1>
-          <p className="text-base text-muted-foreground leading-normal text-pretty">
+          <p className="text-base text-muted-foreground leading-normal text-pretty max-w-[80%]">
             {props.description}
           </p>
         </div>

apps/playground-web/src/lib/code-gen.ts

@@ -0,0 +1,43 @@
+export function stringifyProps(
+  props: Record<string, string | undefined | boolean>,
+) {
+  const _props: Record<string, string | undefined | boolean> = {};
+
+  for (const key in props) {
+    if (props[key] !== undefined && props[key] !== "") {
+      _props[key] = props[key];
+    }
+  }
+
+  return Object.entries(_props)
+    .map(([key, value]) => `${key}={${value}}`)
+    .join("\n");
+}
+
+export function quotes(value: string) {
+  return `"${value}"`;
+}
+
+export function stringifyImports(imports: Record<string, string[]>) {
+  let code = "";
+  for (const key in imports) {
+    if (imports[key].length > 0) {
+      code += `import { ${imports[key].join(", ")} } from "${key}";\n`;
+    }
+  }
+  return code;
+}
+
+export function stringifyIgnoreFalsy(
+  value: Record<string, string | undefined | boolean>,
+) {
+  const _value: Record<string, string | boolean> = {};
+
+  for (const key in value) {
+    if (value[key] !== undefined && value[key] !== "") {
+      _value[key] = value[key];
+    }
+  }
+
+  return JSON.stringify(_value);
+}

apps/playground-web/src/middleware.ts

@@ -0,0 +1,61 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { createThirdwebClient } from "thirdweb";
+import { arbitrumSepolia } from "thirdweb/chains";
+import { facilitator, settlePayment } from "thirdweb/x402";
+
+const client = createThirdwebClient({
+  secretKey: process.env.THIRDWEB_SECRET_KEY as string,
+});
+
+const chain = arbitrumSepolia;
+const BACKEND_WALLET_ADDRESS = process.env.ENGINE_BACKEND_WALLET as string;
+const ENGINE_VAULT_ACCESS_TOKEN = process.env
+  .ENGINE_VAULT_ACCESS_TOKEN as string;
+const API_URL = `https://${process.env.NEXT_PUBLIC_API_URL || "api.thirdweb.com"}`;
+
+const twFacilitator = facilitator({
+  baseUrl: `${API_URL}/v1/payments/x402`,
+  client,
+  serverWalletAddress: BACKEND_WALLET_ADDRESS,
+  vaultAccessToken: ENGINE_VAULT_ACCESS_TOKEN,
+});
+
+export async function middleware(request: NextRequest) {
+  const pathname = request.nextUrl.pathname;
+  const method = request.method.toUpperCase();
+  const resourceUrl = `${request.nextUrl.protocol}//${request.nextUrl.host}${pathname}`;
+  const paymentData = request.headers.get("X-PAYMENT");
+
+  const result = await settlePayment({
+    resourceUrl,
+    method,
+    paymentData,
+    payTo: "0xdd99b75f095d0c4d5112aCe938e4e6ed962fb024",
+    network: chain,
+    price: "$0.01",
+    routeConfig: {
+      description: "Access to paid content",
+    },
+    facilitator: twFacilitator,
+  });
+
+  if (result.status === 200) {
+    // payment successful, execute the request
+    const response = NextResponse.next();
+    for (const [key, value] of Object.entries(result.responseHeaders)) {
+      response.headers.set(key, value);
+    }
+    return response;
+  }
+
+  // otherwise, request payment
+  return NextResponse.json(result.responseBody, {
+    status: result.status,
+    headers: result.responseHeaders,
+  });
+}
+
+// Configure which paths the middleware should run on
+export const config = {
+  matcher: ["/api/paywall"],
+};

apps/portal/src/app/Header.tsx

@@ -213,7 +213,7 @@ export function Header() {
   const pathname = usePathname();
 
   return (
-    <header className="flex w-full flex-col gap-2 border-b bg-background p-4 xl:pb-0 lg:px-8 overflow-hidden">
+    <header className="flex w-full flex-col gap-2 border-b p-4 xl:pb-0 lg:px-8 lg:pt-5 overflow-hidden bg-card">
       {/* Top row */}
       <div className="container flex items-center justify-between gap-6">
         <div className="flex items-center gap-2">
@@ -230,7 +230,7 @@ export function Header() {
           </Link>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           <div className="hidden xl:block">
             <Link
               className="text-foreground"
@@ -269,13 +269,13 @@ export function Header() {
       </div>
 
       {/* Bottom row - hidden on mobile */}
-      <div className="container hidden items-center justify-between gap-6 xl:flex mt-1">
+      <div className="container hidden items-start justify-between gap-6 xl:flex mt-1">
         <nav className="flex grow gap-5">
-          <ul className="flex flex-row items-center gap-0 mb-1">
+          <ul className="flex flex-row items-center gap-0 mb-1.5">
             {links.map((link) => {
               return (
                 <li
-                  className="flex items-center py-2 relative px-2.5 hover:text-foreground"
+                  className="flex items-center relative"
                   key={link.href}
                   onClick={() => {
                     setShowBurgerMenu(false);
@@ -284,9 +284,13 @@ export function Header() {
                     setShowBurgerMenu(false);
                   }}
                 >
-                  <NavLink href={link.href} name={link.name} />
+                  <NavLink
+                    href={link.href}
+                    name={link.name}
+                    className="py-2.5 px-3 hover:bg-accent rounded-lg hover:text-foreground font-normal"
+                  />
                   {pathname?.startsWith(link.href) && (
-                    <div className="bg-violet-700 h-[2px] inset-x-0 rounded-full absolute -bottom-1" />
+                    <div className="bg-foreground h-[2px] inset-x-0 rounded-full absolute -bottom-1.5" />
                   )}
                 </li>
               );
@@ -294,47 +298,37 @@ export function Header() {
           </ul>
         </nav>
 
-        <div className="flex items-center gap-3">
-          <div className="px-1">
-            <DropdownLinks
-              category="AI"
-              links={aiLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
-          <div className="px-1">
-            <DropdownLinks
-              category="SDKs"
-              links={sdkLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
-          <div className="px-1">
-            <DropdownLinks
-              category="APIs"
-              links={apisLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
+        <div className="flex items-center">
+          <DropdownLinks
+            category="AI"
+            links={aiLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
+          <DropdownLinks
+            category="SDKs"
+            links={sdkLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
+          <DropdownLinks
+            category="APIs"
+            links={apisLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
 
-          <div className="px-1">
-            <DropdownLinks
-              category="Tools"
-              links={toolLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
-
-          <div className="px-1">
-            <DropdownLinks
-              category="Support"
-              links={supportLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
+          <DropdownLinks
+            category="Tools"
+            links={toolLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
+          <DropdownLinks
+            category="Support"
+            links={supportLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
 
           <NavLink
             href="/changelog"
+            className="px-3 py-2.5 hover:bg-accent hover:text-foreground rounded-lg"
             name="Changelog"
             onClick={() => {
               setShowBurgerMenu(false);
@@ -448,31 +442,29 @@ function DropdownLinks(props: {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              className="inline-flex items-center gap-1 p-0 font-medium text-muted-foreground text-sm hover:bg-transparent hover:text-foreground"
+              className="inline-flex items-center gap-1.5 font-normal text-muted-foreground text-sm hover:bg-accent hover:text-foreground rounded-lg px-3 py-2.5"
               variant="ghost"
             >
               {props.category}
-              <ChevronDownIcon className="size-4 text-muted-foreground opacity-70" />
+              <ChevronDownIcon className="size-3.5 text-muted-foreground opacity-70" />
             </Button>
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
-            className="flex flex-col gap-1 bg-card p-3"
-            style={{
-              minWidth: "150px",
-            }}
+            className="flex flex-col gap-1 bg-card p-1 rounded-xl min-w-[200px]"
+            sideOffset={14}
           >
             {props.links.map((info) => {
               return (
                 <DropdownMenuItem asChild key={info.name}>
                   <div
                     className={clsx(
-                      "relative flex cursor-pointer gap-2 font-medium text-foreground",
+                      "relative flex cursor-pointer gap-3 font-medium text-foreground !rounded-lg px-3 py-2",
                       "hover:bg-accent",
                     )}
                   >
                     {info.icon && (
-                      <info.icon className="size-5 text-foreground" />
+                      <info.icon className="size-5 text-muted-foreground" />
                     )}
                     <Link
                       className="before:absolute before:inset-0"
@@ -524,6 +516,7 @@ function NavLink(props: {
   name: string;
   onClick?: () => void;
   icon?: React.FC<{ className?: string }>;
+  className?: string;
 }) {
   const pathname = usePathname();
   return (
@@ -534,6 +527,7 @@ function NavLink(props: {
           ? "text-foreground"
           : "text-muted-foreground",
         props.icon ? "flex flex-row gap-3" : "",
+        props.className,
       )}
       href={props.href}
       onClick={props.onClick}

apps/portal/src/app/bridge/swap/page.mdx

@@ -13,6 +13,7 @@ import {
   TypeScriptIcon,
 } from "@/icons";
 import SwapWidgetImage from "./swap-dark.png";
+import SwapWidgetImageLight from "./swap-light.png";
 
 export const metadata = createMetadata({
   image: {
@@ -55,7 +56,12 @@ function Example() {
 }
 ```
 
+<div className='dark-only'>
 <DocImage src={SwapWidgetImage} />
+</div>
+<div className='light-only'>
+<DocImage src={SwapWidgetImageLight} />
+</div>
 
 ## Live Playground
 

apps/portal/src/app/changelog/[slug]/layout.tsx

@@ -1,6 +1,6 @@
 export default function Layout(props: { children: React.ReactNode }) {
   return (
-    <main className="container max-w-3xl py-10" data-noindex>
+    <main className="container max-w-4xl py-10" data-noindex>
       {props.children}
     </main>
   );

apps/portal/src/app/changelog/[slug]/page.tsx

@@ -25,7 +25,7 @@ export default async function Page(props: {
 
   return (
     <div className="changelog-page">
-      <Button asChild>
+      <Button asChild variant="ghost">
         <Link
           className="-translate-x-1/4 !p-2 !text-muted-foreground hover:!text-foreground mb-4 bg-transparent"
           href="/changelog"
@@ -64,7 +64,7 @@ export default async function Page(props: {
         })}
       </div>
 
-      <div className="mb-8 border-t-2" />
+      <div className="mb-8 border-t border-dashed" />
 
       {ReactHtmlParser(data.html || "", {
         transform,

apps/portal/src/app/changelog/components/Author.tsx

@@ -6,13 +6,11 @@ export function Author(props: { name: string; profileImage?: string | null }) {
       {props.profileImage && (
         <img
           alt=""
-          className="size-8 rounded-[50%] border"
+          className="size-6 rounded-[50%] border"
           src={props.profileImage}
         />
       )}
-      <span className="font-medium text-muted-foreground text-sm">
-        {props.name}
-      </span>
+      <span className="text-muted-foreground text-sm">{props.name}</span>
     </div>
   );
 }

apps/portal/src/app/changelog/components/ChangeLogIndexTOC.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import { TableOfContentsSideBar } from "../../../components/others/TableOfContents";
-
-const onlyShowPostTitle = (h: HTMLHeadingElement) => {
-  return h.classList.contains("changelog-title");
-};
-
-export function ChangelogIndexTOC() {
-  return <TableOfContentsSideBar filterHeading={onlyShowPostTitle} />;
-}

apps/portal/src/app/changelog/components/RenderData.tsx

@@ -1,16 +1,10 @@
-import { formatDistance } from "date-fns";
+import { formatDate } from "date-fns";
 import { cn } from "../../../lib/utils";
 
 export function RenderDate(props: { iso: string; className?: string }) {
   return (
-    <time
-      className={cn(
-        "font-medium text-muted-foreground text-sm",
-        props.className,
-      )}
-      dateTime={props.iso}
-    >
-      {formatDistance(new Date(props.iso), new Date())} ago
+    <time className={cn("text-sm", props.className)} dateTime={props.iso}>
+      {formatDate(new Date(props.iso), "MMM d, yyyy")}
     </time>
   );
 }

apps/portal/src/app/changelog/page.tsx

@@ -1,11 +1,8 @@
 import { createMetadata } from "@doc";
 import GithubSlugger from "github-slugger";
-import { PlusIcon } from "lucide-react";
 import Link from "next/link";
 import ReactHtmlParser from "react-html-parser";
 import { Heading } from "@/components/Document";
-import { Author } from "./components/Author";
-import { ChangelogIndexTOC } from "./components/ChangeLogIndexTOC";
 import { RenderDate } from "./components/RenderData";
 import { fetchChangeLogs, fetchPost } from "./ghost";
 import { transform } from "./utils/transform";
@@ -23,12 +20,15 @@ export const metadata = createMetadata({
 
 export default async function Page() {
   return (
-    <main className="container" data-noindex>
-      <div className="flex justify-between gap-16">
-        <div className="w-full max-w-[850px] grow-0 ">
-          <PageContent />
+    <main data-noindex>
+      <div className="border-b py-12 border-dashed">
+        <div className="container">
+          <h1 className="font-semibold text-4xl tracking-tight">Changelog</h1>
         </div>
-        <ChangelogIndexTOC />
+      </div>
+
+      <div className="container">
+        <PageContent />
       </div>
     </main>
   );
@@ -39,53 +39,48 @@ async function PageContent() {
   const slugger = new GithubSlugger();
 
   return (
-    <div className="changelog-page py-6">
-      <h1 className="mb-10 font-semibold text-3xl tracking-tighter">
-        Changelog
-      </h1>
-
-      <div className="flex flex-col gap-10 xl:border-l-2 xl:pl-12">
+    <div className="changelog-page overflow-hidden">
+      <div className="flex flex-col gap-10 xl:border-l border-dashed xl:pl-16 max-w-4xl ml-auto pb-20">
         {posts.map((post) => {
           return (
-            <div className="relative pb-10" key={post.id}>
-              <div className="mb-2 flex items-center gap-5">
+            <div className="relative pt-10" key={post.id}>
+              <div className="-left-16 -translate-x-full absolute top-12 hidden xl:flex gap-5 ml-3 items-center">
                 {post.published_at && (
-                  <RenderDate className="text-base" iso={post.published_at} />
+                  <div className="hidden xl:block text-sm text-muted-foreground">
+                    <RenderDate iso={post.published_at} />
+                  </div>
                 )}
-                <div className="flex gap-5">
-                  {post.authors?.map((author) => {
-                    return (
-                      <Author
-                        key={author.id}
-                        name={author.name || ""}
-                        profileImage={author.profile_image}
-                      />
-                    );
-                  })}
+                <div className="size-6 rounded-[50%] border bg-background flex items-center justify-center">
+                  <div className="size-2 bg-blue-500 rounded-full" />
                 </div>
               </div>
 
-              <div className="-left-12 -translate-x-1/2 absolute top-12 hidden size-7 items-center justify-center rounded-[50%] bg-foreground md:size-10 xl:flex">
-                <PlusIcon className="size-6 text-background" />
-              </div>
-
               <div>
-                <Heading
-                  anchorClassName="[&>a]:hidden m-0 border-b pb-5 mb-5"
-                  anchorId={slugger.slug(post.title || "")}
-                  // eslint-disable-next-line tailwindcss/no-custom-classname
-                  className="changelog-title"
-                  level={2}
-                >
-                  <Link
-                    className="!text-foreground font-bold text-3xl tracking-tighter hover:underline md:text-4xl xl:text-5xl"
-                    href={`/changelog/${post.slug}`}
-                  >
-                    {post.title}
-                  </Link>
-                </Heading>
+                {post.published_at && (
+                  <div className="xl:hidden inline-flex rounded-full border px-3 py-2 mb-4 text-muted-foreground text-xs bg-card">
+                    <RenderDate iso={post.published_at} />
+                  </div>
+                )}
 
-                <RenderChangelogContent slug={post.slug} />
+                <div className="space-y-3 mb-5">
+                  <Heading
+                    anchorClassName="[&>a]:hidden m-0"
+                    anchorId={slugger.slug(post.title || "")}
+                    // eslint-disable-next-line tailwindcss/no-custom-classname
+                    className="changelog-title"
+                    level={2}
+                  >
+                    <Link
+                      className="!text-foreground font-semibold text-3xl md:text-4xl tracking-tight hover:underline !leading-tight"
+                      href={`/changelog/${post.slug}`}
+                    >
+                      {post.title}
+                    </Link>
+                  </Heading>
+                </div>
+                <div className="text-muted-foreground">
+                  <RenderChangelogContent slug={post.slug} />
+                </div>
               </div>
             </div>
           );

apps/portal/src/app/changelog/utils/transform.tsx

@@ -64,7 +64,7 @@ export const transform: Transform = (node, index: number) => {
       node.attribs.class = "text-center text-sm text-muted-foreground";
       return;
     }
-    return <Paragraph>{getChildren()}</Paragraph>;
+    return <Paragraph className="leading-7">{getChildren()}</Paragraph>;
   }
 
   if (node.name === "ul") {
@@ -77,7 +77,7 @@ export const transform: Transform = (node, index: number) => {
     }
     node.attribs.class = "rounded-lg";
     return (
-      <div className="my-5 flex justify-center rounded-lg border p-4">
+      <div className="my-6 flex justify-center rounded-lg border border-dashed p-2 bg-card/50">
         {convertNodeToElement(node, index, transform)}
       </div>
     );
@@ -109,7 +109,13 @@ export const transform: Transform = (node, index: number) => {
       // }
     }
     if (code) {
-      return <CodeBlock code={code} lang={lang} />;
+      return (
+        <CodeBlock
+          code={code}
+          lang={lang}
+          className="bg-card/50 border-dashed"
+        />
+      );
     }
   }
 

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

@@ -61,6 +61,10 @@ export const sidebar: SideBar = {
           href: `${paymentsSlug}/custom-data`,
           name: "Custom Data",
         },
+        {
+          href: `${paymentsSlug}/x402`,
+          name: "x402",
+        },
       ],
       name: "Guides",
     },

apps/portal/src/app/payments/x402/page.mdx

@@ -0,0 +1,102 @@
+import { ArticleIconCard } from "@doc";
+import { ReactIcon } from "@/icons";
+
+# x402 payments
+
+Implement paid API calls using the x402 protocol. Every request is paid for by the user with a micro payment onchain.
+
+<ArticleIconCard
+  title="x402 Playground"
+  description="Try out a x402 payment in our live playground"
+  icon={ReactIcon}
+  href="https://playground.thirdweb.com/payments/x402"
+/>
+
+## Client Side
+
+`wrapFetchWithPayment` wraps the native fetch API to automatically handle `402 Payment Required` responses from any API call. It will:
+1. Make the initial request
+2. If a 402 response is received, parse the payment requirements
+3. Verify the payment amount is within the allowed maximum
+4. Sign a payment authorization 
+5. Create a payment header using the provided wallet signature
+6. Retry the request with the payment header
+
+Here's an example:
+
+```typescript
+import { wrapFetchWithPayment } from "thirdweb/x402";
+import { createThirdwebClient } from "thirdweb";
+import { createWallet } from "thirdweb/wallets";
+
+const client = createThirdwebClient({ clientId: "your-client-id" });
+const wallet = createWallet("io.metamask"); // or any other wallet
+await wallet.connect({ client })
+
+const fetchWithPay = wrapFetchWithPayment(fetch, client, wallet);
+
+// Make a request that may require payment
+const response = await fetchWithPay('https://api.example.com/paid-endpoint');
+```
+
+## Server Side
+
+To make your API calls payable, you can use the `settlePayment` function in a middleware or in your endpoint directly.
+
+Use the `facilitator` configuration function settle transactions with your thirdweb server wallet gaslessly and pass it to the `settlePayment` function.
+
+Here's an example with a Next.js middleware:
+
+```typescript
+import { createThirdwebClient } from "thirdweb";
+import { facilitator, settlePayment } from "thirdweb/x402";
+import { arbitrumSepolia } from "thirdweb/chains";
+
+const client = createThirdwebClient({ secretKey: "your-secret-key" });
+const thirdwebX402Facilitator = facilitator({
+  client,
+  serverWalletAddress: "0xYourWalletAddress",
+});
+
+export async function middleware(request: NextRequest) {
+  const method = request.method.toUpperCase();
+  const resourceUrl = request.nextUrl.toString();
+  const paymentData = request.headers.get("X-PAYMENT");
+
+  const result = await settlePayment({
+    resourceUrl,
+    method,
+    paymentData,
+    payTo: "0xYourWalletAddress",
+    network: arbitrumSepolia, // or any other chain
+    price: "$0.01", // can also be a ERC20 token amount
+    routeConfig: {
+      description: "Access to paid content",
+    },
+    facilitator: thirdwebX402Facilitator,
+  });
+
+  if (result.status === 200) {
+    // payment successful, execute the request
+    const response = NextResponse.next();
+    // optionally set the response headers back to the client
+    for (const [key, value] of Object.entries(result.responseHeaders)) {
+      response.headers.set(key, value);
+    }
+    return response;
+  }
+
+  // otherwise, request payment
+  return NextResponse.json(result.responseBody, {
+    status: result.status,
+    headers: result.responseHeaders,
+  });
+}
+
+// Configure which paths the middleware should run on
+export const config = {
+  matcher: ["/api/paid-endpoint"],
+};
+```
+
+You can also use the `verifyPayment` function to verify the payment before settling it. This lets you do the work that requires payment first and then settle the payment.

apps/portal/src/app/transactions/page.mdx

@@ -70,9 +70,9 @@ Send, monitor, and manage transactions. Send transactions from user or server wa
     - For user wallets in React applications that use the SDK, you can obtain the user wallet auth token (JWT) with the [`useAuthToken()`](/references/typescript/v5/useAuthToken) hook.
     - For user wallets in TypeScript applications, you can get it by calling `wallet.getAuthToken()` on a connected [`inAppWallet()`](/references/typescript/v5/inAppWallet) or [`ecosystemWallet()`](/references/typescript/v5/ecosystemWallet).
 
-      <OpenApiEndpoint path="/v1/transactions" method="POST" />
+<OpenApiEndpoint path="/v1/transactions" method="POST" />
 
-    </TabsContent>
+</TabsContent>
 
   <TabsContent value="typescript">
     ### Installation
@@ -425,47 +425,47 @@ Send, monitor, and manage transactions. Send transactions from user or server wa
     2. Enter your Client ID from the thirdweb dashboard
     3. Allowlist your game's Bundle ID on the thirdweb dashboard for security
 
-    ### Send a Transaction
+  ### Send a Transaction
 
-    Create a new script to manage transactions:
+  Create a new script to manage transactions:
 
-    ```csharp
-    using Thirdweb;
-    using UnityEngine;
-    using UnityEngine.UI;
+  ```csharp
+  using Thirdweb;
+  using UnityEngine;
+  using UnityEngine.UI;
 
-    public class TransactionManager : MonoBehaviour
-    {
-        private ThirdwebSDK sdk;
-        public Text walletAddressText;
-        public Button sendButton;
+  public class TransactionManager : MonoBehaviour
+  {
+      private ThirdwebSDK sdk;
+      public Text walletAddressText;
+      public Button sendButton;
 
-        void Start()
-        {
-            // Client ID is set in Project Settings > Thirdweb
-            sdk = new ThirdwebSDK("ethereum"); // Or any supported chain
-            sendButton.onClick.AddListener(SendTransaction);
-        }
+      void Start()
+      {
+          // Client ID is set in Project Settings > Thirdweb
+          sdk = new ThirdwebSDK("ethereum"); // Or any supported chain
+          sendButton.onClick.AddListener(SendTransaction);
+      }
 
-        public async void SendTransaction()
-        {
-            try {
-                var contract = await ThirdwebManager.Instance.GetContract(
-                    address: "contract-address",
-                    chainId: 1,
-                    abi: "optional-abi"
-                );
+      public async void SendTransaction()
+      {
+          try {
+              var contract = await ThirdwebManager.Instance.GetContract(
+                  address: "contract-address",
+                  chainId: 1,
+                  abi: "optional-abi"
+              );
 
-                // Send a transaction
-                var receipt = await contract.Write(wallet, contract, "transfer", weiValue, toAddress, amount);
-                Debug.Log($"Transaction receipt: {receipt}");
-            }
-            catch (System.Exception e) {
-                Debug.LogError("Error sending transaction: " + e.Message);
-            }
-        }
-    }
-    ```
+              // Send a transaction
+              var receipt = await contract.Write(wallet, contract, "transfer", weiValue, toAddress, amount);
+              Debug.Log($"Transaction receipt: {receipt}");
+          }
+          catch (System.Exception e) {
+              Debug.LogError("Error sending transaction: " + e.Message);
+          }
+      }
+  }
+  ```
 
   </TabsContent>
 

apps/portal/src/app/transactions/sponsor/page.mdx

@@ -103,6 +103,8 @@ Example sponsored contract write request:
 
 </Tabs>
 
+<div className='h-6' />
+
 That's it! All transactions executed by the user will be sponsored via the thirdweb infrastructure.
 
 </TabsContent>

apps/portal/src/components/AI/chat-button.tsx

@@ -20,14 +20,14 @@ export function ChatButton() {
     <>
       {/* Inline Button (not floating) */}
       <Button
-        className="gap-2 rounded-full shadow-lg"
+        className="gap-2 rounded-full bg-background"
         onClick={() => {
           setIsOpen(true);
           setHasBeenOpened(true);
         }}
-        variant="default"
+        variant="outline"
       >
-        <MessageCircleIcon className="size-4" />
+        <MessageCircleIcon className="size-4 text-muted-foreground" />
         Ask AI
       </Button>
 

apps/portal/src/components/Document/AuthMethodsTabs.tsx

@@ -16,6 +16,7 @@ import {
 } from "@/icons";
 import { cn } from "@/lib/utils";
 import { CodeClient } from "../code/code.client";
+import { Button } from "../ui/button";
 
 type AuthMethod =
   | "email"
@@ -849,16 +850,15 @@ function AuthMethodsTabsContent() {
         </h3>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
           {authMethods.map((method) => (
-            <button
+            <Button
               type="button"
+              variant="outline"
               key={method.id}
               onClick={() => setSelectedAuth(method.id)}
               className={cn(
-                "overflow-hidden text-ellipsis px-3 py-1.5  transition-colors duration-300 hover:text-foreground text-sm rounded-lg hover:bg-violet-800/15",
-                selectedAuth === method.id
-                  ? "font-medium text-foreground bg-violet-800/25 border border-violet-800"
-                  : "",
-                "flex flex-row justify-start items-start gap-3",
+                "overflow-hidden text-ellipsis text-sm rounded-lg hover:bg-accent justify-start gap-3 h-auto py-3 rounded-xl",
+                selectedAuth === method.id &&
+                  "font-medium text-foreground bg-accent",
               )}
             >
               <img
@@ -866,8 +866,8 @@ function AuthMethodsTabsContent() {
                 className="size-5 shrink-0"
                 src={getSocialIcon(method.id)}
               />
-              <div className="font-medium">{method.label}</div>
-            </button>
+              <div>{method.label}</div>
+            </Button>
           ))}
         </div>
       </div>

apps/portal/src/components/Document/Code.tsx

@@ -73,8 +73,8 @@ export async function CodeBlock(props: {
         lang={lang}
       >
         <ScrollShadow
-          className=""
           scrollableClassName={cn("p-4", props.scrollContainerClassName)}
+          shadowColor="hsl(var(--card))"
         >
           <RenderCode code={code} lang={lang} tokenLinks={tokenLinks} />
         </ScrollShadow>

apps/portal/src/components/Document/DocImage.tsx

@@ -15,7 +15,7 @@ export function DocImage(props: {
   return (
     <div
       className={cn(
-        "my-4 flex justify-center rounded-lg border p-4",
+        "my-4 flex justify-center rounded-lg border border-dashed p-4",
         props.containerClassName,
       )}
     >

apps/portal/src/components/Document/DocLink.tsx

@@ -10,7 +10,7 @@ export function DocLink(props: {
   return (
     <Link
       className={cn(
-        "underline decoration-violet-800 decoration-dotted underline-offset-[5px] transition-colors hover:decoration-violet-800 hover:decoration-solid hover:text-foreground",
+        "text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400 decoration-dotted transition-colors ",
         props.className,
       )}
       href={props.href}

apps/portal/src/components/Document/Grid.tsx

@@ -4,7 +4,7 @@ export function Grid(props: { children: React.ReactNode; className?: string }) {
   return (
     <div
       className={cn(
-        "my-4 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+        "my-4 grid gap-3 md:grid-cols-2 lg:grid-cols-3",
         props.className,
       )}
     >

apps/portal/src/components/Document/Heading.tsx

@@ -33,7 +33,7 @@ export function Heading(props: {
         >
           <h2
             className={cn(
-              "break-words font-medium text-xl text-foreground tracking-tight",
+              "break-words font-semibold text-xl text-foreground tracking-tight",
               props.className,
             )}
           >
@@ -52,7 +52,7 @@ export function Heading(props: {
         >
           <h3
             className={cn(
-              "break-words font-medium text-foreground text-xl",
+              "break-words font-semibold text-foreground text-xl tracking-tight",
               props.className,
             )}
           >
@@ -71,7 +71,7 @@ export function Heading(props: {
         >
           <h4
             className={cn(
-              "break-words font-medium text-foreground text-lg",
+              "break-words font-semibold text-foreground text-lg tracking-tight",
               props.className,
             )}
           >

apps/portal/src/components/Document/InlineCode.tsx

@@ -4,7 +4,7 @@ export function InlineCode(props: { code: string; className?: string }) {
   return (
     <code
       className={cn(
-        "max-h-20 rounded-md border bg-muted px-1.5 py-0.5 text-[0.875em]",
+        "max-h-20 rounded-lg bg-muted border px-1.5 py-[3px] text-[0.875em]",
         props.className,
       )}
       style={{

apps/portal/src/components/Document/PageFooter.tsx

@@ -16,18 +16,17 @@ export function PageFooter(props: {
   sidebarLinks?: SidebarLink[];
 }) {
   return (
-    <footer className="flex flex-col gap-7 pb-20" data-noindex>
-      <div className="flex flex-col justify-between gap-7">
-        <div className="flex gap-4 justify-between items-center">
-          {props.editPageButton && <AutoEditPageButton />}
-          {props.sidebarLinks && (
-            <AutoNextPageButton sidebarLinks={props.sidebarLinks} />
-          )}
-        </div>
+    <footer className="flex flex-col border-t border-dashed" data-noindex>
+      <div className="flex gap-4 justify-end items-center py-6">
+        {props.sidebarLinks && (
+          <AutoNextPageButton sidebarLinks={props.sidebarLinks} />
+        )}
+      </div>
+      <div className="border-t py-2 border-dashed flex justify-between items-center">
+        {props.editPageButton && <AutoEditPageButton />}
         <Feedback />
       </div>
-      <div className="h-1 border-t" />
-      <div className="flex flex-col justify-between gap-7 md:flex-row">
+      <div className="flex flex-col justify-between gap-7 md:flex-row border-t py-6 border-dashed">
         <Links />
         <Subscribe />
       </div>
@@ -37,18 +36,18 @@ export function PageFooter(props: {
 
 function Links() {
   return (
-    <ul className="flex flex-col gap-3">
+    <ul className="flex flex-col gap-2">
       <FooterLinkItem
         href="https://www.youtube.com/@thirdweb_"
         icon={VideoIcon}
-        label="video Tutorials"
+        label="Video tutorials"
         prefix="Watch our"
       />
 
       <FooterLinkItem
         href="/changelog"
         icon={ScrollTextIcon}
-        label="changelog"
+        label="Changelog"
         prefix="View our"
       />
 
@@ -71,11 +70,13 @@ function FooterLinkItem(props: {
   return (
     <li className="flex items-center gap-2 text-muted-foreground">
       <div className="flex items-center gap-2 font-medium">
-        <props.icon className="size-5" />
-        <span>{props.prefix}</span>
+        <props.icon className="size-4" />
+        <span className="text-sm">{props.prefix}</span>
       </div>
 
-      <DocLink href={props.href}>{props.label}</DocLink>
+      <DocLink href={props.href} className="text-sm">
+        {props.label}
+      </DocLink>
     </li>
   );
 }

apps/portal/src/components/Document/SDKCard.tsx

@@ -10,14 +10,16 @@ export function SDKCard(props: {
 }) {
   return (
     <Link
-      className="flex items-center gap-2 rounded-lg border bg-card p-2 px-4 transition-colors hover:border-active-border text-foreground/80 hover:text-foreground shadow-sm"
+      className="flex items-center gap-3 rounded-xl border bg-card px-4 py-3.5 transition-colors hover:border-active-border text-foreground/80 hover:text-foreground shadow-sm"
       href={props.href}
       target={props.isExternal ? "_blank" : undefined}
     >
       {props.icon && (
-        <props.icon className={cn("size-4 shrink-0", props.iconClassName)} />
+        <div className="rounded-full p-1.5 bg-background shrink-0 border">
+          <props.icon className={cn("size-4", props.iconClassName)} />
+        </div>
       )}
-      <h3 className="font-semibold text-sm tracking-tight">{props.title}</h3>
+      <h3 className="text-foreground text-sm font-medium">{props.title}</h3>
     </Link>
   );
 }

apps/portal/src/components/Layouts/DocLayout.tsx

@@ -29,7 +29,7 @@ export function DocLayout(props: DocLayoutProps) {
         "container relative flex flex-col gap-12 xl:grid",
         props.sideBar.links.length > 0
           ? props.showTableOfContents !== false
-            ? "xl:grid-cols-[220px_720px_1fr]"
+            ? "xl:grid-cols-[220px_820px_1fr]"
             : "xl:grid-cols-[220px_1160px]"
           : props.showTableOfContents !== false
             ? "xl:grid-cols-[960px_1fr]"
@@ -58,7 +58,7 @@ export function DocLayout(props: DocLayoutProps) {
         data-noindex={props.noIndex}
       >
         <div className="grow xl:mt-6">
-          <h5 className="mb-2 text-sm font-semibold text-violet-500">
+          <h5 className="mb-2 text-sm text-muted-foreground">
             {props.sideBar.name}
           </h5>
           {props.children}