Version Packages (#8389)

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

.github/workflows/CI.yml

@@ -188,9 +188,16 @@ jobs:
       - name: Build Packages
         run: pnpm build
 
-      - name: Report bundle size
+      - name: Report bundle size (thirdweb)
         uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d # v1.8.0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           package_manager: pnpm
-          directory: packages/thirdweb
+          directory: packages/thirdweb
+
+      - name: Report bundle size (nexus)
+        uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d # v1.8.0
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          package_manager: pnpm
+          directory: packages/nexus

apps/dashboard/framer-rewrites.js

@@ -10,7 +10,7 @@ module.exports = [
   "/wallets",
   "/account-abstraction",
   "/payments",
-  "/payments/x402",
+  "/x402",
   "/nexus",
   "/auth",
   "/in-app-wallets",

apps/dashboard/package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "@marsidev/react-turnstile": "^1.1.0",
+    "@number-flow/react": "^0.5.10",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",

apps/dashboard/redirects.js

@@ -479,6 +479,11 @@ async function redirects() {
       destination: "/tokens",
       permanent: false,
     },
+    {
+      source: "/payments/x402",
+      destination: "/x402",
+      permanent: false,
+    },
   ];
 }
 

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

@@ -21,7 +21,8 @@ export type AuthOption =
   | "steam"
   | "apple"
   | "coinbase"
-  | "line";
+  | "line"
+  | "epic";
 
 export type Ecosystem = {
   name: string;

apps/dashboard/src/@/components/analytics/empty-chart-state.tsx

@@ -95,7 +95,7 @@ function SkeletonBarChart(props: {
             fill={`url(#${fillAreaSkeletonId})`}
             radius={8}
             stroke="hsl(var(--muted-foreground))"
-            type="natural"
+            type="monotone"
           />
         </AreaChart>
       )}

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

@@ -172,7 +172,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
                     key={key}
                     stackId={props.variant !== "stacked" ? undefined : "a"}
                     stroke={`var(--color-${key})`}
-                    type="natural"
+                    type="monotone"
                   />
                 ),
               )}

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

@@ -51,17 +51,12 @@ export function WalletAddressUI(
     };
   },
 ) {
-  // default back to zero address if no address provided
-  const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
+  const address = props.address || ZERO_ADDRESS;
 
-  const [shortenedAddress, _lessShortenedAddress] = useMemo(() => {
-    return [
-      props.shortenAddress !== false
-        ? `${address.slice(0, 6)}...${address.slice(-4)}`
-        : address,
-      `${address.slice(0, 14)}...${address.slice(-12)}`,
-    ];
-  }, [address, props.shortenAddress]);
+  const shortenedAddress =
+    props.shortenAddress !== false
+      ? `${address.slice(0, 6)}...${address.slice(-4)}`
+      : address;
 
   if (!isAddress(address)) {
     return (

apps/dashboard/src/@/utils/faucet.ts

@@ -5,6 +5,10 @@ const customClaimAmounts: Record<number, number> = {
   631571: 0.1,
   // Sophon testnet
   531050104: 5,
+  // Arc testnet
+  5042002: 1,
+  // Injective testnet
+  1439: 1,
 };
 
 const defaultClaimAmount = 0.01;

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

@@ -21,8 +21,8 @@ export function getSDKTheme(theme: "light" | "dark"): Theme {
       primaryButtonText: "hsl(var(--inverted-foreground))",
       primaryText: "hsl(var(--foreground))",
       scrollbarBg: "hsl(var(--muted))",
-      secondaryButtonBg: "hsl(var(--secondary))",
-      secondaryButtonHoverBg: "hsl(var(--secondary)/80%)",
+      secondaryButtonBg: "hsl(var(--secondary)/70%)",
+      secondaryButtonHoverBg: "hsl(var(--secondary))",
       secondaryButtonText: "hsl(var(--secondary-foreground))",
       secondaryIconColor: "hsl(var(--secondary-foreground))",
       secondaryIconHoverBg: "hsl(var(--accent))",
@@ -33,7 +33,7 @@ export function getSDKTheme(theme: "light" | "dark"): Theme {
       separatorLine: "hsl(var(--border))",
       skeletonBg: "hsl(var(--secondary-foreground)/15%)",
       success: "hsl(var(--success-text))",
-      tertiaryBg: "hsl(var(--muted)/30%)",
+      tertiaryBg: "hsl(var(--muted)/50%)",
       tooltipBg: "hsl(var(--popover))",
       tooltipText: "hsl(var(--popover-foreground))",
     },

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx

@@ -225,6 +225,10 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
         moduleInfo: {
           bytecodeUri: selectedModule.metadata.bytecodeUri,
         },
+        isStylus:
+          (selectedModule.metadata.compilers?.stylus &&
+            selectedModule.metadata.compilers?.stylus?.length > 0) ||
+          false,
       });
     },
     queryKey: [
@@ -432,6 +436,7 @@ async function isModuleCompatible(options: {
   moduleInfo: {
     bytecodeUri: string;
   };
+  isStylus: boolean;
   client: ThirdwebClient;
 }) {
   // 1. get module's bytecode
@@ -444,15 +449,17 @@ async function isModuleCompatible(options: {
 
   // 2. check compatibility with core and installed modules
   try {
-    const isCompatible = await checkModulesCompatibility({
-      chain: options.contractInfo.chain,
-      client: options.client,
-      coreBytecode: options.contractInfo.bytecode,
-      moduleBytecodes: [
-        moduleBytecode,
-        ...options.contractInfo.installedModuleBytecodes,
-      ],
-    });
+    const isCompatible =
+      options.isStylus ||
+      (await checkModulesCompatibility({
+        chain: options.contractInfo.chain,
+        client: options.client,
+        coreBytecode: options.contractInfo.bytecode,
+        moduleBytecodes: [
+          moduleBytecode,
+          ...options.contractInfo.installedModuleBytecodes,
+        ],
+      }));
 
     return isCompatible;
   } catch (e) {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx

@@ -10,7 +10,11 @@ import {
   CircleXIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { NATIVE_TOKEN_ADDRESS, type ThirdwebClient } from "thirdweb";
+import {
+  getAddress,
+  NATIVE_TOKEN_ADDRESS,
+  type ThirdwebClient,
+} from "thirdweb";
 import type { Status, Token } from "thirdweb/bridge";
 import { status } from "thirdweb/bridge";
 import { toTokens } from "thirdweb/utils";
@@ -123,6 +127,8 @@ function TokenInfo(props: {
   const isNativeToken =
     props.token.address.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase();
 
+  const tokenAddress = getAddress(props.token.address);
+
   return (
     <div className="flex-1 pt-10 pb-9 px-6 lg:px-8">
       <div className="flex justify-between items-center">
@@ -206,7 +212,7 @@ function TokenInfo(props: {
         <div className="space-y-1">
           <p className="text-sm text-foreground ">{props.addressLabel}</p>
           <WalletAddress
-            address={props.walletAddress}
+            address={getAddress(props.walletAddress)}
             client={props.client}
             className="py-0.5 h-auto text-sm [&>*]:!font-sans tabular-nums [&>*]:font-normal text-muted-foreground hover:text-foreground"
             iconClassName="size-3"
@@ -222,8 +228,8 @@ function TokenInfo(props: {
                 ? `/${chainQuery.data?.slug || props.token.chainId}`
                 : `/${chainQuery.data?.slug || props.token.chainId}/${props.token.address}`
             }
-            textToShow={props.token.address}
-            textToCopy={props.token.address}
+            textToShow={tokenAddress}
+            textToCopy={tokenAddress}
             copyTooltip="Copy Token Address"
             className="-translate-x-1"
           />

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

@@ -8,7 +8,7 @@ import {
   Clock4Icon,
   InfoIcon,
 } from "lucide-react";
-import { toTokens } from "thirdweb";
+import { getAddress, toTokens } from "thirdweb";
 import { status } from "thirdweb/bridge";
 import type { ChainMetadata } from "thirdweb/chains";
 import {
@@ -153,6 +153,9 @@ function GeneericTxDetails(props: {
 
   const timestamp = getDatefromTimestamp(block.timestamp);
 
+  const fromAddress = getAddress(transaction.from);
+  const toAddress = transaction.to ? getAddress(transaction.to) : undefined;
+
   return (
     <div className="border  rounded-xl p-4 lg:p-6 bg-card">
       {/* section 1 */}
@@ -216,8 +219,8 @@ function GeneericTxDetails(props: {
       <section className="border-b py-6 space-y-5 lg:space-y-3">
         <GridItem label="From" tooltip="The sending party of the transaction.">
           <CopyTextButton
-            textToCopy={transaction.from}
-            textToShow={transaction.from}
+            textToCopy={fromAddress}
+            textToShow={fromAddress}
             tooltip="Copy from address"
             variant="ghost"
             copyIconPosition="right"
@@ -225,14 +228,14 @@ function GeneericTxDetails(props: {
           />
         </GridItem>
 
-        {transaction.to && (
+        {toAddress && (
           <GridItem
             label="Interacted with (To)"
             tooltip="The receiving party of the transaction (could be a contract address)."
           >
             <CopyTextButton
-              textToCopy={transaction.to}
-              textToShow={transaction.to}
+              textToCopy={toAddress}
+              textToShow={toAddress}
               tooltip="Copy to address"
               variant="ghost"
               copyIconPosition="right"

apps/dashboard/src/app/(app)/(dashboard)/explore/data.ts

@@ -183,13 +183,64 @@ const STYLUS = {
   ],
   description:
     "Airdrop your NFTs or tokens to a large number of recipients. Built with Arbitrum Stylus.",
-  displayName: "Arbitrum Stylus Contracts",
+  displayName: "Airdrop - Arbitrum Stylus",
   id: "stylus",
   name: "Stylus",
   showInExplore: true,
   isBeta: true,
 } satisfies ExploreCategory;
 
+const MODULAR_CONTRACTS_STYLUS = {
+  contracts: [
+    // erc721 token
+    [
+      "thirdweb.eth/ERC721CoreInitializable",
+      [
+        "0x6453a486d52e0eb6e79ec4491038e2522a926936/StylusMintableERC721",
+        "deployer.thirdweb.eth/BatchMetadataERC721",
+        "0x6453a486d52e0eb6e79ec4491038e2522a926936/StylusTransferableERC721",
+      ],
+      {
+        description: "ERC721 NFTs that only owners can mint.",
+        title: "Modular NFT Collection",
+      },
+    ],
+    // erc1155 token
+    [
+      "thirdweb.eth/ERC1155CoreInitializable",
+      [
+        "0x6453a486d52e0eb6e79ec4491038e2522a926936/StylusMintableERC1155",
+        "deployer.thirdweb.eth/BatchMetadataERC1155",
+        "0x6453a486d52e0eb6e79ec4491038e2522a926936/StylusTransferableERC1155",
+        "deployer.thirdweb.eth/SequentialTokenIdERC1155",
+      ],
+      {
+        description: "ERC1155 NFTs that only owners can mint.",
+        title: "Modular Edition",
+      },
+    ],
+    // erc20 token
+    [
+      "thirdweb.eth/ERC20CoreInitializable",
+      [
+        "0x6453a486d52e0eb6e79ec4491038e2522a926936/StylusMintableERC20",
+        "0x6453a486d52e0eb6e79ec4491038e2522a926936/StylusTransferableERC20",
+      ],
+      {
+        description: "ERC20 Tokens that only owners can mint.",
+        title: "Modular Token",
+      },
+    ],
+  ],
+  description:
+    "Collection of highly customizable and upgradeable smart contracts built with the modular contracts framework.",
+  displayName: "Modular Contracts - Arbitrum Stylus",
+  id: "modular-contracts",
+  name: "modular",
+  showInExplore: true,
+  isBeta: true,
+} satisfies ExploreCategory;
+
 const CATEGORIES: Record<string, ExploreCategory> = {
   [POPULAR.id]: POPULAR,
   [NFTS.id]: NFTS,
@@ -203,6 +254,7 @@ const CATEGORIES: Record<string, ExploreCategory> = {
   [COMMERCE.id]: COMMERCE,
   [STAKING.id]: STAKING,
   [GOVERNANCE.id]: GOVERNANCE,
+  [MODULAR_CONTRACTS_STYLUS.id]: MODULAR_CONTRACTS_STYLUS,
 };
 
 export function getCategory(id: string) {

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

@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { unstable_cache } from "next/cache";
 import { Bridge } from "thirdweb";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
+import { bridgeStats } from "../../../bridge/data";
 import { PageHeader } from "./components/header";
 import { TokenPage } from "./components/token-page";
 
@@ -36,7 +37,8 @@ export default async function Page() {
           </h1>
 
           <p className="text-muted-foreground">
-            85+ chains, 4500+ tokens and 9+ million routes supported
+            {bridgeStats.supportedChains} chains, {bridgeStats.supportedTokens}{" "}
+            tokens and {bridgeStats.supportedRoutes} routes supported
           </p>
         </div>
       </div>

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx

@@ -58,6 +58,7 @@ const authOptions = [
   "apple",
   "coinbase",
   "line",
+  "epic",
 ] as const satisfies AuthOption[];
 
 type AuthOptionsFormData = {

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

@@ -4,9 +4,14 @@ import { ProjectFTUX } from "./ProjectFTUX";
 
 const meta = {
   component: ProjectFTUX,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
   decorators: [
     (Story) => (
-      <div className="container py-8 pb-20">
+      <div className="container py-8 pb-20 max-w-7xl">
         <Story />
       </div>
     ),
@@ -31,6 +36,5 @@ export const Default: Story = {
       ],
     },
     teamSlug: "bar",
-    managementAccessToken: undefined,
   },
 };

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

@@ -15,33 +15,12 @@ import { UnrealIcon } from "@/icons/brand-icons/UnrealIcon";
 import { ContractIcon } from "@/icons/ContractIcon";
 import { InsightIcon } from "@/icons/InsightIcon";
 import { PayIcon } from "@/icons/PayIcon";
-import { WalletProductIcon } from "@/icons/WalletProductIcon";
-import { getProjectWalletLabel } from "@/lib/project-wallet";
-import {
-  getProjectWallet,
-  type ProjectWalletSummary,
-} from "@/lib/server/project-wallet";
 import { ClientIDSection } from "./ClientIDSection";
-import { ProjectWalletControls } from "./ProjectWalletControls.client";
-import { ProjectWalletSetup } from "./ProjectWalletSetup.client";
 import { SecretKeySection } from "./SecretKeySection";
 
-export async function ProjectFTUX(props: {
-  project: Project;
-  teamSlug: string;
-  wallet?: ProjectWalletSummary | undefined;
-  managementAccessToken: string | undefined;
-}) {
-  const projectWallet = props.wallet ?? (await getProjectWallet(props.project));
-
+export function ProjectFTUX(props: { project: Project; teamSlug: string }) {
   return (
     <div className="flex flex-col gap-10">
-      <ProjectWalletSection
-        project={props.project}
-        teamSlug={props.teamSlug}
-        wallet={projectWallet}
-        managementAccessToken={props.managementAccessToken}
-      />
       <IntegrateAPIKeySection project={props.project} />
       <ProductsSection
         projectSlug={props.project.slug}
@@ -53,64 +32,6 @@ export async function ProjectFTUX(props: {
   );
 }
 
-export function ProjectWalletSection(props: {
-  project: Project;
-  teamSlug: string;
-  wallet: ProjectWalletSummary | undefined;
-  managementAccessToken: string | undefined;
-}) {
-  const defaultLabel = getProjectWalletLabel(props.project.name);
-  const walletAddress = props.wallet?.address;
-  const label = props.wallet?.label ?? defaultLabel;
-
-  return (
-    <section>
-      <div className="rounded-lg border border-border bg-card p-4">
-        <div className="flex flex-col gap-4">
-          <div className="flex items-center gap-3">
-            <div className="rounded-full border border-border bg-background p-2">
-              <WalletProductIcon className="size-5 text-muted-foreground" />
-            </div>
-            <div>
-              <p className="font-semibold text-lg tracking-tight">
-                Project Wallet
-              </p>
-              <p className="text-muted-foreground text-sm">
-                Use it for deployments, payments, and API integrations.
-              </p>
-            </div>
-          </div>
-
-          {walletAddress ? (
-            <>
-              <ProjectWalletControls
-                label={label}
-                project={props.project}
-                walletAddress={walletAddress}
-              />
-              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-end">
-                <Link
-                  className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
-                  href={`/team/${props.teamSlug}/${props.project.slug}/transactions`}
-                >
-                  View Transactions
-                  <ChevronRightIcon className="size-4" />
-                </Link>
-              </div>
-            </>
-          ) : (
-            <ProjectWalletSetup
-              managementAccessToken={props.managementAccessToken}
-              project={props.project}
-              teamSlug={props.teamSlug}
-            />
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
 // Integrate API key section ------------------------------------------------------------
 
 function IntegrateAPIKeySection({ project }: { project: Project }) {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx

@@ -1,747 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-  EllipsisVerticalIcon,
-  RefreshCcwIcon,
-  SendIcon,
-  ShuffleIcon,
-  WalletIcon,
-} from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { toWei } from "thirdweb";
-import { useWalletBalance } from "thirdweb/react";
-import { isAddress } from "thirdweb/utils";
-import { z } from "zod";
-import { listProjectServerWallets } from "@/actions/project-wallet/list-server-wallets";
-import { sendProjectWalletTokens } from "@/actions/project-wallet/send-tokens";
-import type { Project } from "@/api/project/projects";
-import { FundWalletModal } from "@/components/blocks/fund-wallets-modal";
-import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { WalletAddress } from "@/components/blocks/wallet-address";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/Spinner";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import type { ProjectWalletSummary } from "@/lib/server/project-wallet";
-import { cn } from "@/lib/utils";
-import { updateDefaultProjectWallet } from "../../transactions/lib/vault.client";
-
-type ProjectWalletControlsProps = {
-  walletAddress: string;
-  label: string;
-  project: Pick<
-    Project,
-    "id" | "publishableKey" | "teamId" | "services" | "name"
-  >;
-  defaultChainId?: number;
-};
-
-export function ProjectWalletControls(props: ProjectWalletControlsProps) {
-  const { walletAddress, label, project, defaultChainId } = props;
-  const [isSendOpen, setIsSendOpen] = useState(false);
-  const [isReceiveOpen, setIsReceiveOpen] = useState(false);
-  const [selectedChainId, setSelectedChainId] = useState(defaultChainId ?? 1);
-  const [isChangeWalletOpen, setIsChangeWalletOpen] = useState(false);
-  const [selectedWalletId, setSelectedWalletId] = useState<string | undefined>(
-    undefined,
-  );
-
-  const client = useMemo(() => getClientThirdwebClient(), []);
-  const chain = useV5DashboardChain(selectedChainId);
-  const queryClient = useQueryClient();
-  const router = useDashboardRouter();
-
-  const engineCloudService = useMemo(
-    () => project.services?.find((service) => service.name === "engineCloud"),
-    [project.services],
-  );
-  const managementAccessToken =
-    engineCloudService?.managementAccessToken ?? undefined;
-  const isManagedVault = !!engineCloudService?.encryptedAdminKey;
-
-  const serverWalletsQuery = useQuery({
-    enabled: !!managementAccessToken,
-    queryFn: async () => {
-      if (!managementAccessToken) {
-        return [] as ProjectWalletSummary[];
-      }
-
-      return listProjectServerWallets({
-        managementAccessToken,
-        projectId: project.id,
-      });
-    },
-    queryKey: ["project", project.id, "server-wallets", managementAccessToken],
-    staleTime: 60_000,
-  });
-
-  const serverWallets = serverWalletsQuery.data ?? [];
-  const currentWalletAddressLower = walletAddress.toLowerCase();
-  const otherWallets = useMemo(() => {
-    return serverWallets.filter((wallet) => {
-      return wallet.address.toLowerCase() !== currentWalletAddressLower;
-    });
-  }, [serverWallets, currentWalletAddressLower]);
-
-  const canChangeWallet = otherWallets.length > 0;
-
-  const handleOpenChangeWallet = () => {
-    const currentWallet = serverWallets.find(
-      (wallet) => wallet.address.toLowerCase() === currentWalletAddressLower,
-    );
-
-    const nextWalletId =
-      otherWallets[0]?.id ?? currentWallet?.id ?? serverWallets[0]?.id;
-
-    setSelectedWalletId(nextWalletId);
-    setIsChangeWalletOpen(true);
-  };
-
-  const handleCloseChangeWallet = () => {
-    setIsChangeWalletOpen(false);
-    setSelectedWalletId(undefined);
-  };
-
-  const selectedWallet = useMemo(() => {
-    if (!selectedWalletId) {
-      return undefined;
-    }
-
-    return serverWallets.find((wallet) => wallet.id === selectedWalletId);
-  }, [selectedWalletId, serverWallets]);
-
-  const isSelectionDifferent = Boolean(
-    selectedWallet &&
-      selectedWallet.address.toLowerCase() !== currentWalletAddressLower,
-  );
-
-  const changeWalletMutation = useMutation({
-    mutationFn: async (wallet: ProjectWalletSummary) => {
-      await updateDefaultProjectWallet({
-        project: project as Project,
-        projectWalletAddress: wallet.address,
-      });
-    },
-    onError: (error) => {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to update project wallet";
-      toast.error(message);
-    },
-    onSuccess: async (_, wallet) => {
-      const descriptionLabel = wallet.label ?? wallet.address;
-      toast.success("Project wallet updated", {
-        description: `Now pointing to ${descriptionLabel}`,
-      });
-      await queryClient.invalidateQueries({
-        queryKey: [
-          "project",
-          project.id,
-          "server-wallets",
-          managementAccessToken,
-        ],
-      });
-      handleCloseChangeWallet();
-      router.refresh();
-    },
-  });
-
-  const balanceQuery = useWalletBalance({
-    address: walletAddress,
-    chain,
-    client,
-  });
-
-  const balanceDisplay = balanceQuery.data
-    ? `${balanceQuery.data.displayValue} ${balanceQuery.data.symbol}`
-    : undefined;
-
-  return (
-    <div className="space-y-5">
-      <div className="rounded-lg border border-border bg-background p-3">
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col gap-3 lg:flex-row">
-            <div className="flex-1">
-              <p className="text-muted-foreground text-xs">Address</p>
-              <WalletAddress address={walletAddress} client={client} />
-            </div>
-            <div className="flex-1">
-              <p className="text-muted-foreground text-xs">Label</p>
-              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                <p className="font-mono text-sm break-all py-2 sm:py-0">
-                  {label}
-                </p>
-                {canChangeWallet && (
-                  <Button
-                    className="h-8 gap-1 sm:ml-4"
-                    onClick={handleOpenChangeWallet}
-                    size="sm"
-                    disabled={serverWalletsQuery.isLoading}
-                    variant="outline"
-                  >
-                    <ShuffleIcon className="size-3.5" />
-                    Change default
-                  </Button>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <div className="flex-1 flex-col">
-              <p className="text-xs text-muted-foreground pb-2">Balance</p>
-              <div className="flex items-center gap-2">
-                <WalletIcon className="size-4 text-muted-foreground" />
-                {balanceQuery.isLoading ? (
-                  <Spinner className="size-4" />
-                ) : balanceDisplay ? (
-                  <span className="text-md tracking-tight">
-                    {balanceDisplay}
-                  </span>
-                ) : (
-                  <span className="text-muted-foreground text-sm">N/A</span>
-                )}
-                <Button
-                  aria-label="Refresh balance"
-                  className="h-8 w-8 p-0"
-                  disabled={balanceQuery.isFetching}
-                  onClick={() => balanceQuery.refetch()}
-                  size="icon"
-                  variant="outline"
-                >
-                  <RefreshCcwIcon
-                    className={cn(
-                      "size-4",
-                      balanceQuery.isFetching && "animate-spin",
-                    )}
-                  />
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      aria-label="Open wallet actions"
-                      className="h-9 w-9"
-                      size="icon"
-                      variant="outline"
-                    >
-                      <EllipsisVerticalIcon className="size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-48 rounded-xl">
-                    <DropdownMenuItem
-                      className="flex items-center gap-2"
-                      onSelect={() => setIsSendOpen(true)}
-                    >
-                      <SendIcon className="size-4 text-muted-foreground" />
-                      Send funds
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className="flex items-center gap-2"
-                      onSelect={() => setIsReceiveOpen(true)}
-                    >
-                      <WalletIcon className="size-4 text-muted-foreground" />
-                      Receive funds
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            </div>
-            <div className="flex-col flex-1">
-              <p className="text-xs text-muted-foreground pb-2">Network</p>
-              <SingleNetworkSelector
-                chainId={selectedChainId}
-                className="max-w-xs rounded-lg"
-                client={client}
-                disableDeprecated
-                disableChainId
-                onChange={setSelectedChainId}
-                placeholder="Select network"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <SendProjectWalletModal
-        chainId={selectedChainId}
-        client={client}
-        isManagedVault={isManagedVault}
-        label={label}
-        onClose={() => setIsSendOpen(false)}
-        onSuccess={() => balanceQuery.refetch()}
-        open={isSendOpen}
-        publishableKey={project.publishableKey}
-        teamId={project.teamId}
-        walletAddress={walletAddress}
-      />
-
-      <FundWalletModal
-        checkoutWidgetTitle={`Fund ${label}`}
-        client={client}
-        defaultChainId={selectedChainId}
-        description="Use your card or crypto to deposit into this server wallet"
-        onOpenChange={setIsReceiveOpen}
-        open={isReceiveOpen}
-        recipientAddress={walletAddress}
-        title="Fund project wallet"
-      />
-
-      <Dialog
-        onOpenChange={(nextOpen) => {
-          if (!nextOpen) {
-            handleCloseChangeWallet();
-          }
-        }}
-        open={isChangeWalletOpen}
-      >
-        <DialogContent className="gap-0 p-0">
-          <DialogHeader className="p-4 lg:p-6">
-            <DialogTitle>Change default wallet</DialogTitle>
-            <DialogDescription>
-              Choose another server wallet to use as the default for this
-              project.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="px-4 pb-8 lg:px-6">
-            {serverWalletsQuery.isLoading ? (
-              <div className="flex justify-center py-6">
-                <Spinner className="size-5" />
-              </div>
-            ) : serverWallets.length <= 1 ? (
-              <p className="text-sm text-muted-foreground">
-                You need at least two server wallets to pick a different
-                default.
-              </p>
-            ) : (
-              <div className="flex flex-col gap-3">
-                <Select
-                  onValueChange={(value) => setSelectedWalletId(value)}
-                  value={selectedWalletId ?? ""}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select server wallet">
-                      {selectedWallet ? (
-                        <div className="flex items-center gap-2">
-                          <WalletAddress
-                            address={selectedWallet.address}
-                            client={client}
-                          />
-                          <div className="flex items-center gap-2">
-                            <span className="text-sm text-foreground">
-                              {selectedWallet.label ?? "Unnamed server wallet"}
-                            </span>
-                            {selectedWallet.address.toLowerCase() ===
-                              currentWalletAddressLower && (
-                              <Badge variant="success" className="text-xs">
-                                current
-                              </Badge>
-                            )}
-                          </div>
-                        </div>
-                      ) : (
-                        "Select server wallet"
-                      )}
-                    </SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    {serverWallets.map((wallet) => {
-                      const isCurrent =
-                        wallet.address.toLowerCase() ===
-                        currentWalletAddressLower;
-
-                      return (
-                        <SelectItem key={wallet.id} value={wallet.id}>
-                          <div className="flex items-center gap-2">
-                            <WalletAddress
-                              address={wallet.address}
-                              client={client}
-                            />
-                            <div className="flex items-center gap-2">
-                              <span className="text-sm text-foreground">
-                                {wallet.label ?? "Unnamed server wallet"}
-                              </span>
-                              {isCurrent && (
-                                <Badge variant="success" className="text-xs">
-                                  current
-                                </Badge>
-                              )}
-                            </div>
-                          </div>
-                        </SelectItem>
-                      );
-                    })}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
-          </div>
-
-          <DialogFooter className="flex justify-end gap-3 border-t bg-card p-4 lg:p-6">
-            <Button
-              onClick={handleCloseChangeWallet}
-              type="button"
-              variant="outline"
-              disabled={changeWalletMutation.isPending}
-            >
-              Cancel
-            </Button>
-            <Button
-              disabled={
-                !selectedWallet ||
-                !isSelectionDifferent ||
-                changeWalletMutation.isPending
-              }
-              onClick={() => {
-                if (selectedWallet) {
-                  changeWalletMutation.mutate(selectedWallet);
-                }
-              }}
-              type="button"
-            >
-              {changeWalletMutation.isPending && (
-                <Spinner className="mr-2 size-4" />
-              )}
-              Save default
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}
-
-const createSendFormSchema = (secretKeyLabel: string) =>
-  z.object({
-    chainId: z.number({
-      required_error: "Select a network",
-    }),
-    toAddress: z
-      .string()
-      .trim()
-      .min(1, "Destination address is required")
-      .refine((value) => Boolean(isAddress(value)), {
-        message: "Enter a valid wallet address",
-      }),
-    amount: z.string().trim().min(1, "Amount is required"),
-    secretKey: z.string().trim().min(1, `${secretKeyLabel} is required`),
-    vaultAccessToken: z.string().trim(),
-  });
-
-const SECRET_KEY_LABEL = "Project secret key";
-
-type SendFormValues = z.infer<ReturnType<typeof createSendFormSchema>>;
-
-function SendProjectWalletModal(props: {
-  open: boolean;
-  onClose: () => void;
-  onSuccess: () => void;
-  walletAddress: string;
-  publishableKey: string;
-  teamId: string;
-  chainId: number;
-  label: string;
-  client: ReturnType<typeof getClientThirdwebClient>;
-  isManagedVault: boolean;
-}) {
-  const {
-    open,
-    onClose,
-    onSuccess,
-    walletAddress,
-    publishableKey,
-    teamId,
-    chainId,
-    label,
-    client,
-    isManagedVault,
-  } = props;
-
-  const secretKeyLabel = SECRET_KEY_LABEL;
-  const secretKeyPlaceholder = "Enter your project secret key";
-  const secretKeyHelper =
-    "Your project secret key was generated when you created your project. If you lost it, regenerate one from Project settings.";
-  const vaultAccessTokenHelper =
-    "Vault access tokens are optional credentials with server wallet permissions. Manage them in Vault settings.";
-
-  const formSchema = useMemo(() => createSendFormSchema(SECRET_KEY_LABEL), []);
-
-  const form = useForm<SendFormValues>({
-    defaultValues: {
-      amount: "0",
-      chainId,
-      secretKey: "",
-      vaultAccessToken: "",
-      toAddress: "",
-    },
-    mode: "onChange",
-    resolver: zodResolver(formSchema),
-  });
-
-  const selectedChain = useV5DashboardChain(form.watch("chainId"));
-
-  // eslint-disable-next-line no-restricted-syntax -- form submission chainId must track selector state
-  useEffect(() => {
-    form.setValue("chainId", chainId);
-  }, [chainId, form]);
-
-  // eslint-disable-next-line no-restricted-syntax -- reset cached inputs when modal closes to avoid leaking state
-  useEffect(() => {
-    if (!open) {
-      const currentValues = form.getValues();
-      form.reset({
-        amount: "0",
-        chainId,
-        secretKey: currentValues.secretKey ?? "",
-        vaultAccessToken: currentValues.vaultAccessToken ?? "",
-        toAddress: "",
-      });
-    }
-  }, [open, chainId, form]);
-
-  const sendMutation = useMutation({
-    mutationFn: async (values: SendFormValues) => {
-      const quantityWei = toWei(values.amount).toString();
-      const secretKeyValue = values.secretKey.trim();
-      const vaultAccessTokenValue = values.vaultAccessToken.trim();
-
-      const result = await sendProjectWalletTokens({
-        chainId: values.chainId,
-        publishableKey,
-        quantityWei,
-        recipientAddress: values.toAddress,
-        teamId,
-        walletAddress,
-        secretKey: secretKeyValue,
-        ...(vaultAccessTokenValue
-          ? { vaultAccessToken: vaultAccessTokenValue }
-          : {}),
-      });
-
-      if (!result.ok) {
-        const errorMessage =
-          typeof result.error === "string"
-            ? result.error
-            : "Failed to send funds";
-        throw new Error(errorMessage);
-      }
-
-      return result.transactionIds;
-    },
-    onError: (error) => {
-      toast.error(error.message);
-    },
-    onSuccess: (transactionIds) => {
-      toast.success("Transfer submitted", {
-        description:
-          transactionIds && transactionIds.length > 0
-            ? `Transaction ID: ${transactionIds[0]}`
-            : undefined,
-      });
-      onSuccess();
-      onClose();
-    },
-  });
-
-  return (
-    <Dialog
-      onOpenChange={(nextOpen) => {
-        if (!nextOpen) {
-          onClose();
-        }
-      }}
-      open={open}
-    >
-      <DialogContent className="gap-0 p-0">
-        <DialogHeader className="p-4 lg:p-6">
-          <DialogTitle>Send from {label}</DialogTitle>
-          <DialogDescription>
-            Execute a one-off transfer using your server wallet.
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit((values) => {
-              void sendMutation.mutateAsync(values);
-            })}
-          >
-            <div className="space-y-4 px-4 pb-8 lg:px-6">
-              <FormField
-                control={form.control}
-                name="chainId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Network</FormLabel>
-                    <FormControl>
-                      <SingleNetworkSelector
-                        chainId={field.value}
-                        className="bg-card"
-                        client={client}
-                        disableDeprecated
-                        onChange={(nextChainId) => {
-                          field.onChange(nextChainId);
-                        }}
-                        placeholder="Select network"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="toAddress"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Send to</FormLabel>
-                    <FormControl>
-                      <Input
-                        autoComplete="off"
-                        placeholder="0x..."
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="amount"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Amount</FormLabel>
-                    <FormControl>
-                      <Input
-                        inputMode="decimal"
-                        min="0"
-                        step="any"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Sending native token
-                      {selectedChain?.nativeCurrency?.symbol
-                        ? ` (${selectedChain.nativeCurrency.symbol})`
-                        : ""}
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="secretKey"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{secretKeyLabel}</FormLabel>
-                    <FormControl>
-                      <Input
-                        autoComplete="off"
-                        autoCorrect="off"
-                        placeholder={secretKeyPlaceholder}
-                        spellCheck={false}
-                        type="password"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormDescription>{secretKeyHelper}</FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {!isManagedVault && (
-                <FormField
-                  control={form.control}
-                  name="vaultAccessToken"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        Vault access token
-                        <span className="text-muted-foreground">
-                          {" "}
-                          (optional)
-                        </span>
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          autoComplete="off"
-                          autoCorrect="off"
-                          placeholder="Enter a vault access token (optional)"
-                          spellCheck={false}
-                          type="password"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormDescription>
-                        {vaultAccessTokenHelper}
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              )}
-            </div>
-
-            <div className="flex justify-end gap-3 border-t bg-card p-4 lg:p-6">
-              <Button onClick={onClose} type="button" variant="outline">
-                Cancel
-              </Button>
-              <Button
-                className="gap-2"
-                disabled={!form.formState.isValid || sendMutation.isPending}
-                type="submit"
-              >
-                {sendMutation.isPending && <Spinner className="size-4" />}
-                Submit transfer
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsx

@@ -1,215 +0,0 @@
-"use client";
-
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CircleAlertIcon } from "lucide-react";
-import { useMemo, useState } from "react";
-import { toast } from "sonner";
-import { listProjectServerWallets } from "@/actions/project-wallet/list-server-wallets";
-import type { Project } from "@/api/project/projects";
-import { WalletAddress } from "@/components/blocks/wallet-address";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import type { ProjectWalletSummary } from "@/lib/server/project-wallet";
-import { updateDefaultProjectWallet } from "../../transactions/lib/vault.client";
-import CreateServerWallet from "../../transactions/server-wallets/components/create-server-wallet.client";
-
-export function ProjectWalletSetup(props: {
-  project: Project;
-  teamSlug: string;
-  managementAccessToken: string | undefined;
-}) {
-  const { project, teamSlug, managementAccessToken } = props;
-  const router = useDashboardRouter();
-  const queryClient = useQueryClient();
-  const client = useMemo(() => getClientThirdwebClient(), []);
-  const [selectedWalletId, setSelectedWalletId] = useState<string | undefined>(
-    undefined,
-  );
-
-  const serverWalletsQuery = useQuery({
-    enabled: Boolean(managementAccessToken),
-    queryFn: async () => {
-      if (!managementAccessToken) {
-        return [] as ProjectWalletSummary[];
-      }
-
-      return listProjectServerWallets({
-        managementAccessToken,
-        projectId: project.id,
-      });
-    },
-    queryKey: ["project", project.id, "server-wallets", managementAccessToken],
-    staleTime: 60_000,
-  });
-
-  const serverWallets = serverWalletsQuery.data ?? [];
-
-  const effectiveSelectedWalletId = useMemo(() => {
-    if (
-      selectedWalletId &&
-      serverWallets.some((wallet) => wallet.id === selectedWalletId)
-    ) {
-      return selectedWalletId;
-    }
-
-    return serverWallets[0]?.id;
-  }, [selectedWalletId, serverWallets]);
-
-  const selectedWallet = useMemo(() => {
-    if (!effectiveSelectedWalletId) {
-      return undefined;
-    }
-
-    return serverWallets.find(
-      (wallet) => wallet.id === effectiveSelectedWalletId,
-    );
-  }, [effectiveSelectedWalletId, serverWallets]);
-
-  const setDefaultWalletMutation = useMutation({
-    mutationFn: async (wallet: ProjectWalletSummary) => {
-      await updateDefaultProjectWallet({
-        project,
-        projectWalletAddress: wallet.address,
-      });
-    },
-    onError: (error) => {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to update project wallet";
-      toast.error(message);
-    },
-    onSuccess: async (_, wallet) => {
-      const descriptionLabel = wallet.label ?? wallet.address;
-      toast.success("Project wallet updated", {
-        description: `Now pointing to ${descriptionLabel}`,
-      });
-      await queryClient.invalidateQueries({
-        queryKey: [
-          "project",
-          project.id,
-          "server-wallets",
-          managementAccessToken,
-        ],
-      });
-      router.refresh();
-    },
-  });
-
-  const canSelectExisting =
-    Boolean(managementAccessToken) && serverWallets.length > 0;
-
-  return (
-    <Alert variant="info">
-      <CircleAlertIcon className="size-5" />
-      <AlertTitle>No project wallet set</AlertTitle>
-      <AlertDescription>
-        Set a project wallet to use for dashboard and API integrations.
-      </AlertDescription>
-
-      <div className="mt-4 space-y-5">
-        {serverWalletsQuery.isLoading ? (
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Spinner className="size-4" />
-            <span>Loading existing server wallets…</span>
-          </div>
-        ) : canSelectExisting ? (
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <p className="text-sm font-medium text-foreground">
-                Choose an existing server wallet
-              </p>
-              <p className="text-sm text-muted-foreground">
-                These wallets were already created for this project. Pick one to
-                set as the default.
-              </p>
-              <Select
-                onValueChange={(value) => setSelectedWalletId(value)}
-                value={effectiveSelectedWalletId ?? ""}
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder="Select server wallet">
-                    {selectedWallet ? (
-                      <div className="flex items-center gap-2">
-                        <WalletAddress
-                          address={selectedWallet.address}
-                          client={client}
-                        />
-                        <span className="text-muted-foreground text-sm">
-                          {selectedWallet.label ?? "Unnamed server wallet"}
-                        </span>
-                      </div>
-                    ) : (
-                      "Select server wallet"
-                    )}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {serverWallets.map((wallet) => (
-                    <SelectItem key={wallet.id} value={wallet.id}>
-                      <div className="flex items-center gap-2">
-                        <WalletAddress
-                          address={wallet.address}
-                          client={client}
-                        />
-                        <span className="text-muted-foreground text-sm">
-                          {wallet.label ?? "Unnamed server wallet"}
-                        </span>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex flex-wrap items-center gap-3">
-              <Button
-                disabled={!selectedWallet || setDefaultWalletMutation.isPending}
-                onClick={() => {
-                  if (selectedWallet) {
-                    setDefaultWalletMutation.mutate(selectedWallet);
-                  }
-                }}
-                type="button"
-              >
-                {setDefaultWalletMutation.isPending && (
-                  <Spinner className="mr-2 size-4" />
-                )}
-                Set as project wallet
-              </Button>
-              <CreateServerWallet
-                managementAccessToken={managementAccessToken}
-                project={project}
-                teamSlug={teamSlug}
-                setAsProjectWallet
-              />
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-3 text-sm text-muted-foreground">
-            <p>
-              Create a server wallet to start using transactions and other
-              project features.
-            </p>
-            <CreateServerWallet
-              managementAccessToken={managementAccessToken}
-              project={project}
-              teamSlug={teamSlug}
-              setAsProjectWallet
-            />
-          </div>
-        )}
-      </div>
-    </Alert>
-  );
-}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx

@@ -0,0 +1,736 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  ArrowLeftRightIcon,
+  EllipsisVerticalIcon,
+  RefreshCcwIcon,
+  SendIcon,
+  ShuffleIcon,
+  WalletIcon,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { type ThirdwebClient, toWei } from "thirdweb";
+import { useWalletBalance } from "thirdweb/react";
+import { isAddress } from "thirdweb/utils";
+import { z } from "zod";
+import { sendProjectWalletTokens } from "@/actions/project-wallet/send-tokens";
+import type { Project } from "@/api/project/projects";
+import { FundWalletModal } from "@/components/blocks/fund-wallets-modal";
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import type { ProjectWalletSummary } from "@/lib/server/project-wallet";
+import { cn } from "@/lib/utils";
+import { updateDefaultProjectWallet } from "../../transactions/lib/vault.client";
+
+type GetProjectServerWallets = (params: {
+  managementAccessToken: string;
+  projectId: string;
+}) => Promise<ProjectWalletSummary[]>;
+
+type ProjectWalletControlsProps = {
+  projectWallet: ProjectWalletSummary;
+  project: Project;
+  defaultChainId?: number;
+  teamSlug: string;
+  getProjectServerWallets: GetProjectServerWallets;
+  client: ThirdwebClient;
+};
+
+export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) {
+  const { projectWallet, project, defaultChainId } = props;
+  const [isSendOpen, setIsSendOpen] = useState(false);
+  const [isReceiveOpen, setIsReceiveOpen] = useState(false);
+  const [selectedChainId, setSelectedChainId] = useState(defaultChainId ?? 1);
+  const [isChangeWalletOpen, setIsChangeWalletOpen] = useState(false);
+
+  const chain = useV5DashboardChain(selectedChainId);
+
+  const engineCloudService = useMemo(
+    () => project.services?.find((service) => service.name === "engineCloud"),
+    [project.services],
+  );
+
+  const managementAccessToken =
+    engineCloudService?.managementAccessToken ?? undefined;
+
+  const isManagedVault = !!engineCloudService?.encryptedAdminKey;
+
+  const serverWalletsQuery = useQuery({
+    enabled: !!managementAccessToken,
+    queryFn: async () => {
+      if (!managementAccessToken) {
+        return [] as ProjectWalletSummary[];
+      }
+
+      return props.getProjectServerWallets({
+        managementAccessToken,
+        projectId: project.id,
+      });
+    },
+    queryKey: ["project", project.id, "server-wallets", managementAccessToken],
+    staleTime: 60_000,
+  });
+
+  const balanceQuery = useWalletBalance({
+    address: projectWallet.address,
+    chain,
+    client: props.client,
+  });
+
+  const canChangeWallet =
+    serverWalletsQuery.data && serverWalletsQuery.data.length > 1;
+
+  const router = useDashboardRouter();
+
+  return (
+    <div>
+      <div className="rounded-xl border border-border bg-card relative">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open wallet actions"
+              className="p-2 h-auto w-auto absolute right-4 top-4 z-10"
+              variant="ghost"
+            >
+              <EllipsisVerticalIcon className="size-5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-64 rounded-xl">
+            <DropdownMenuItem
+              className="flex items-center gap-2"
+              onSelect={() => setIsSendOpen(true)}
+            >
+              <SendIcon className="size-4 text-muted-foreground" />
+              Send funds
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="flex items-center gap-2"
+              onSelect={() => setIsReceiveOpen(true)}
+            >
+              <WalletIcon className="size-4 text-muted-foreground" />
+              Receive funds
+            </DropdownMenuItem>
+
+            <DropdownMenuItem
+              className="flex items-center gap-2"
+              onSelect={() =>
+                router.push(
+                  `/team/${props.teamSlug}/${props.project.slug}/transactions`,
+                )
+              }
+            >
+              <ArrowLeftRightIcon className="size-4 text-muted-foreground" />
+              View transactions
+            </DropdownMenuItem>
+
+            {canChangeWallet && (
+              <DropdownMenuItem
+                className="flex items-center gap-2"
+                onSelect={() => setIsChangeWalletOpen(true)}
+              >
+                <ShuffleIcon className="size-4 text-muted-foreground" />
+                Change project wallet
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <div className="p-4 relative flex flex-col gap-5">
+          <div>
+            <p className="text-sm text-foreground mb-1">Wallet Address</p>
+            <CopyTextButton
+              textToShow={projectWallet.address}
+              textToCopy={projectWallet.address}
+              tooltip="Copy wallet address"
+              copyIconPosition="right"
+              variant="ghost"
+              className="text-muted-foreground -translate-x-1.5 py-0 h-auto"
+            />
+          </div>
+
+          <div>
+            <p className="text-sm text-foreground mb-1">Wallet Label</p>
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+              <p className="text-sm break-all py-2 sm:py-0 text-muted-foreground">
+                {projectWallet.label || "N/A"}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="p-4 border-t border-dashed flex justify-between items-center">
+          <div>
+            <p className="text-sm text-foreground mb-1">Balance</p>
+            <div className="flex items-center gap-1">
+              {balanceQuery.isFetching || !balanceQuery.data ? (
+                <Skeleton className="h-5 w-[100px]" />
+              ) : (
+                <span className="text-sm text-muted-foreground">
+                  {balanceQuery.data.displayValue} {balanceQuery.data.symbol}
+                </span>
+              )}
+
+              <Button
+                aria-label="Refresh balance"
+                className="p-1 h-auto w-auto"
+                disabled={balanceQuery.isFetching}
+                onClick={() => balanceQuery.refetch()}
+                variant="ghost"
+              >
+                <RefreshCcwIcon
+                  className={cn(
+                    "size-3 text-muted-foreground",
+                    balanceQuery.isFetching && "animate-spin",
+                  )}
+                />
+              </Button>
+            </div>
+          </div>
+
+          <SingleNetworkSelector
+            chainId={selectedChainId}
+            className="w-fit rounded-full bg-background hover:bg-accent/50"
+            client={props.client}
+            disableDeprecated
+            disableChainId
+            onChange={setSelectedChainId}
+            placeholder="Select network"
+            popoverContentClassName="!w-[320px] rounded-xl overflow-hidden"
+            align="end"
+          />
+        </div>
+      </div>
+
+      <SendProjectWalletModal
+        chainId={selectedChainId}
+        client={props.client}
+        isManagedVault={isManagedVault}
+        label={projectWallet.label || ""}
+        onClose={() => setIsSendOpen(false)}
+        onSuccess={() => balanceQuery.refetch()}
+        open={isSendOpen}
+        publishableKey={project.publishableKey}
+        teamId={project.teamId}
+        walletAddress={projectWallet.address}
+      />
+
+      <FundWalletModal
+        checkoutWidgetTitle="Fund Project Wallet"
+        client={props.client}
+        defaultChainId={selectedChainId}
+        description="Use your card or crypto to deposit into this server wallet"
+        onOpenChange={setIsReceiveOpen}
+        open={isReceiveOpen}
+        recipientAddress={projectWallet.address}
+        title="Fund project wallet"
+      />
+
+      <Dialog onOpenChange={setIsChangeWalletOpen} open={isChangeWalletOpen}>
+        <DialogContent className="gap-0 p-0 overflow-hidden">
+          <ChangeProjectWalletDialogContent
+            isOpen={isChangeWalletOpen}
+            setIsOpen={setIsChangeWalletOpen}
+            serverWallets={{
+              data: serverWalletsQuery.data ?? [],
+              isPending: serverWalletsQuery.isLoading,
+            }}
+            projectWallet={projectWallet}
+            client={props.client}
+            project={project}
+            managementAccessToken={managementAccessToken}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function ChangeProjectWalletDialogContent(props: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  serverWallets: {
+    data: ProjectWalletSummary[];
+    isPending: boolean;
+  };
+  projectWallet: ProjectWalletSummary;
+  managementAccessToken: string | undefined;
+  project: Project;
+  client: ThirdwebClient;
+}) {
+  const queryClient = useQueryClient();
+  const router = useDashboardRouter();
+
+  const [selectedWalletId, setSelectedWalletId] = useState<string | undefined>(
+    props.projectWallet.id,
+  );
+
+  const serverWallets = props.serverWallets.data;
+
+  const currentWalletAddressLower = props.projectWallet.address.toLowerCase();
+
+  const selectedWallet = useMemo(() => {
+    if (!selectedWalletId) {
+      return undefined;
+    }
+
+    return serverWallets.find((wallet) => wallet.id === selectedWalletId);
+  }, [selectedWalletId, serverWallets]);
+
+  const isSelectionDifferent = Boolean(
+    selectedWallet &&
+      selectedWallet.address.toLowerCase() !== currentWalletAddressLower,
+  );
+
+  const changeWalletMutation = useMutation({
+    mutationFn: async (wallet: ProjectWalletSummary) => {
+      await updateDefaultProjectWallet({
+        project: props.project,
+        projectWalletAddress: wallet.address,
+      });
+    },
+    onError: (error) => {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Failed to update project wallet";
+      toast.error(message);
+    },
+    onSuccess: async () => {
+      toast.success("Project wallet updated");
+      await queryClient.invalidateQueries({
+        queryKey: [
+          "project",
+          props.project.id,
+          "server-wallets",
+          props.managementAccessToken,
+        ],
+      });
+      router.refresh();
+    },
+  });
+
+  return (
+    <div>
+      <DialogHeader className="p-4 lg:p-6">
+        <DialogTitle>Change Project Wallet</DialogTitle>
+        <DialogDescription>
+          Choose a server wallet to use as project wallet
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="px-4 pb-8 lg:px-6">
+        {props.serverWallets.isPending ? (
+          <div className="flex justify-center py-6">
+            <Spinner className="size-5" />
+          </div>
+        ) : (
+          <div className="flex flex-col gap-3">
+            <Select
+              onValueChange={(value) => {
+                setSelectedWalletId(value);
+              }}
+              value={selectedWalletId ?? ""}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select server wallet">
+                  {selectedWallet ? (
+                    <div className="flex items-center gap-2">
+                      <WalletAddress
+                        address={selectedWallet.address}
+                        client={props.client}
+                      />
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm text-foreground">
+                          {selectedWallet.label ?? "Unnamed server wallet"}
+                        </span>
+                        {selectedWallet.address.toLowerCase() ===
+                          currentWalletAddressLower && (
+                          <Badge variant="success" className="text-xs">
+                            current
+                          </Badge>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    "Select server wallet"
+                  )}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {serverWallets.map((wallet) => {
+                  const isCurrent =
+                    wallet.address.toLowerCase() === currentWalletAddressLower;
+
+                  return (
+                    <SelectItem key={wallet.id} value={wallet.id}>
+                      <div className="flex items-center gap-2">
+                        <WalletAddress
+                          address={wallet.address}
+                          client={props.client}
+                        />
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm text-foreground">
+                            {wallet.label ?? "Unnamed server wallet"}
+                          </span>
+                          {isCurrent && (
+                            <Badge variant="success" className="text-xs">
+                              current
+                            </Badge>
+                          )}
+                        </div>
+                      </div>
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end gap-3 border-t bg-card p-4 lg:p-6">
+        <Button
+          onClick={() => props.setIsOpen(false)}
+          type="button"
+          variant="outline"
+          disabled={changeWalletMutation.isPending}
+        >
+          Cancel
+        </Button>
+        <Button
+          disabled={
+            !selectedWallet ||
+            !isSelectionDifferent ||
+            changeWalletMutation.isPending
+          }
+          onClick={() => {
+            if (selectedWallet) {
+              changeWalletMutation.mutate(selectedWallet);
+            }
+          }}
+          type="button"
+        >
+          {changeWalletMutation.isPending && (
+            <Spinner className="mr-2 size-4" />
+          )}
+          Set as project wallet
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+const createSendFormSchema = (secretKeyLabel: string) =>
+  z.object({
+    chainId: z.number({
+      required_error: "Select a network",
+    }),
+    toAddress: z
+      .string()
+      .trim()
+      .min(1, "Destination address is required")
+      .refine((value) => Boolean(isAddress(value)), {
+        message: "Enter a valid wallet address",
+      }),
+    amount: z.string().trim().min(1, "Amount is required"),
+    secretKey: z.string().trim().min(1, `${secretKeyLabel} is required`),
+    vaultAccessToken: z.string().trim(),
+  });
+
+const SECRET_KEY_LABEL = "Project secret key";
+
+type SendFormValues = z.infer<ReturnType<typeof createSendFormSchema>>;
+
+type SendProjectWalletModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  walletAddress: string;
+  publishableKey: string;
+  teamId: string;
+  chainId: number;
+  label: string;
+  client: ReturnType<typeof getClientThirdwebClient>;
+  isManagedVault: boolean;
+};
+
+const secretKeyLabel = SECRET_KEY_LABEL;
+const secretKeyPlaceholder = "Enter your project secret key";
+const secretKeyHelper =
+  "Your project secret key was generated when you created your project. If you lost it, regenerate one from Project settings.";
+const vaultAccessTokenHelper =
+  "Vault access tokens are optional credentials with server wallet permissions. Manage them in Vault settings.";
+
+function SendProjectWalletModal(props: SendProjectWalletModalProps) {
+  return (
+    <Dialog
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          props.onClose();
+        }
+      }}
+      open={props.open}
+    >
+      <DialogContent className="gap-0 p-0 overflow-hidden">
+        <SendProjectWalletModalContent {...props} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SendProjectWalletModalContent(props: SendProjectWalletModalProps) {
+  const {
+    onClose,
+    onSuccess,
+    walletAddress,
+    publishableKey,
+    teamId,
+    chainId,
+    label,
+    client,
+    isManagedVault,
+  } = props;
+
+  const formSchema = useMemo(() => createSendFormSchema(SECRET_KEY_LABEL), []);
+
+  const form = useForm<SendFormValues>({
+    defaultValues: {
+      amount: "0",
+      chainId,
+      secretKey: "",
+      vaultAccessToken: "",
+      toAddress: "",
+    },
+    mode: "onChange",
+    resolver: zodResolver(formSchema),
+  });
+
+  const selectedChain = useV5DashboardChain(form.watch("chainId"));
+
+  const sendMutation = useMutation({
+    mutationFn: async (values: SendFormValues) => {
+      const quantityWei = toWei(values.amount).toString();
+      const secretKeyValue = values.secretKey.trim();
+      const vaultAccessTokenValue = values.vaultAccessToken.trim();
+
+      const result = await sendProjectWalletTokens({
+        chainId: values.chainId,
+        publishableKey,
+        quantityWei,
+        recipientAddress: values.toAddress,
+        teamId,
+        walletAddress,
+        secretKey: secretKeyValue,
+        ...(vaultAccessTokenValue
+          ? { vaultAccessToken: vaultAccessTokenValue }
+          : {}),
+      });
+
+      if (!result.ok) {
+        const errorMessage =
+          typeof result.error === "string"
+            ? result.error
+            : "Failed to send funds";
+        throw new Error(errorMessage);
+      }
+
+      return result.transactionIds;
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+    onSuccess: (transactionIds) => {
+      toast.success("Transfer submitted", {
+        description:
+          transactionIds && transactionIds.length > 0
+            ? `Transaction ID: ${transactionIds[0]}`
+            : undefined,
+      });
+      onSuccess();
+      onClose();
+    },
+  });
+
+  return (
+    <div className="gap-0 p-0">
+      <DialogHeader className="p-4 lg:p-6">
+        <DialogTitle>Send from {label}</DialogTitle>
+        <DialogDescription>
+          Execute a one-off transfer using your server wallet.
+        </DialogDescription>
+      </DialogHeader>
+
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit((values) => {
+            void sendMutation.mutateAsync(values);
+          })}
+        >
+          <div className="space-y-4 px-4 pb-8 lg:px-6">
+            <FormField
+              control={form.control}
+              name="chainId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Network</FormLabel>
+                  <FormControl>
+                    <SingleNetworkSelector
+                      chainId={field.value}
+                      className="bg-card"
+                      client={client}
+                      disableDeprecated
+                      onChange={(nextChainId) => {
+                        field.onChange(nextChainId);
+                      }}
+                      placeholder="Select network"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="toAddress"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Send to</FormLabel>
+                  <FormControl>
+                    <Input autoComplete="off" placeholder="0x..." {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="amount"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Amount</FormLabel>
+                  <FormControl>
+                    <Input inputMode="decimal" min="0" step="any" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Sending native token
+                    {selectedChain?.nativeCurrency?.symbol
+                      ? ` (${selectedChain.nativeCurrency.symbol})`
+                      : ""}
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="secretKey"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{secretKeyLabel}</FormLabel>
+                  <FormControl>
+                    <Input
+                      autoComplete="off"
+                      autoCorrect="off"
+                      placeholder={secretKeyPlaceholder}
+                      spellCheck={false}
+                      type="password"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription>{secretKeyHelper}</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {!isManagedVault && (
+              <FormField
+                control={form.control}
+                name="vaultAccessToken"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Vault access token
+                      <span className="text-muted-foreground"> (optional)</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        autoComplete="off"
+                        autoCorrect="off"
+                        placeholder="Enter a vault access token (optional)"
+                        spellCheck={false}
+                        type="password"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>{vaultAccessTokenHelper}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+          </div>
+
+          <div className="flex justify-end gap-3 border-t bg-card p-4 lg:p-6">
+            <Button onClick={onClose} type="button" variant="outline">
+              Cancel
+            </Button>
+            <Button
+              className="gap-2"
+              disabled={!form.formState.isValid || sendMutation.isPending}
+              type="submit"
+            >
+              {sendMutation.isPending && <Spinner className="size-4" />}
+              Submit transfer
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import type { ProjectWalletSummary } from "@/lib/server/project-wallet";
+import { projectStub } from "@/storybook/stubs";
+import { storybookThirdwebClient } from "@/storybook/utils";
+import { ProjectWalletSectionUI } from "./project-wallet";
+
+const meta = {
+  component: ProjectWalletSectionUI,
+  title: "Project/ProjectWalletSection",
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="container py-8 pb-20 max-w-7xl">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ProjectWalletSectionUI>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const projectWithManagedAccessToken = projectStub("foo", "bar");
+projectWithManagedAccessToken.services = [
+  {
+    name: "engineCloud",
+    actions: [],
+    managementAccessToken: "managed-access-token",
+  },
+];
+
+const projectWithoutManagedAccessToken = projectStub("foo", "bar");
+
+const projectWallet1: ProjectWalletSummary = {
+  id: "server-wallet-id",
+  address: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
+  label: "Project Wallet 1",
+};
+
+const projectWallet2: ProjectWalletSummary = {
+  id: "server-wallet-id-2",
+  address: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
+  label: "Project Wallet 2",
+};
+
+export const NoProjectWalletSetNoManagedAccessToken: Story = {
+  args: {
+    project: projectWithoutManagedAccessToken,
+    client: storybookThirdwebClient,
+    teamSlug: "bar",
+    projectWallet: undefined,
+    getProjectServerWallets: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return [];
+    },
+  },
+};
+
+export const NoProjectWalletSetWithManagedAccessToken: Story = {
+  args: {
+    project: projectWithManagedAccessToken,
+    client: storybookThirdwebClient,
+    teamSlug: "bar",
+    projectWallet: undefined,
+    getProjectServerWallets: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return [];
+    },
+  },
+};
+
+export const NoProjectWalletSetWithManagedAccessTokenAndServerWallets: Story = {
+  args: {
+    project: projectWithManagedAccessToken,
+    teamSlug: "bar",
+    client: storybookThirdwebClient,
+    projectWallet: undefined,
+    getProjectServerWallets: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return [projectWallet1, projectWallet2];
+    },
+  },
+};
+
+export const NoProjectWalletSetLoading: Story = {
+  args: {
+    project: projectWithManagedAccessToken,
+    teamSlug: "bar",
+    client: storybookThirdwebClient,
+    projectWallet: undefined,
+    getProjectServerWallets: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 100000));
+      return [projectWallet1, projectWallet2];
+    },
+  },
+};
+
+export const ProjectWalletSetMultipleServerWallets: Story = {
+  args: {
+    project: projectWithManagedAccessToken,
+    teamSlug: "bar",
+    client: storybookThirdwebClient,
+    projectWallet: projectWallet1,
+    getProjectServerWallets: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return [projectWallet1, projectWallet2];
+    },
+  },
+};
+
+export const ProjectWalletSetSingleServerWallet: Story = {
+  args: {
+    project: projectWithManagedAccessToken,
+    teamSlug: "bar",
+    projectWallet: projectWallet1,
+    client: storybookThirdwebClient,
+    getProjectServerWallets: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return [projectWallet1];
+    },
+  },
+};

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { UnderlineLink } from "@workspace/ui/components/UnderlineLink";
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
+import { listProjectServerWallets } from "@/actions/project-wallet/list-server-wallets";
+import type { Project } from "@/api/project/projects";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/Spinner";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import type { ProjectWalletSummary } from "@/lib/server/project-wallet";
+import { updateDefaultProjectWallet } from "../../transactions/lib/vault.client";
+import { CreateServerWallet } from "../../transactions/server-wallets/components/create-server-wallet.client";
+import { ProjectWalletDetailsSection } from "./project-wallet-details";
+
+type GetProjectServerWallets = (params: {
+  managementAccessToken: string;
+  projectId: string;
+}) => Promise<ProjectWalletSummary[]>;
+
+function CreateProjectWalletSection(props: {
+  project: Project;
+  teamSlug: string;
+  getProjectServerWallets: GetProjectServerWallets;
+}) {
+  const { project, teamSlug } = props;
+  const router = useDashboardRouter();
+  const queryClient = useQueryClient();
+  const client = useMemo(() => getClientThirdwebClient(), []);
+  const [selectedWalletId, setSelectedWalletId] = useState<string | undefined>(
+    undefined,
+  );
+  const [isSelectDialogOpen, setIsSelectDialogOpen] = useState(false);
+
+  const managementAccessToken =
+    props.project.services?.find((service) => service.name === "engineCloud")
+      ?.managementAccessToken ?? undefined;
+
+  const serverWalletsQuery = useQuery({
+    enabled: Boolean(managementAccessToken),
+    queryFn: async () => {
+      if (!managementAccessToken) {
+        return [] as ProjectWalletSummary[];
+      }
+
+      return props.getProjectServerWallets({
+        managementAccessToken,
+        projectId: project.id,
+      });
+    },
+    queryKey: ["project", project.id, "server-wallets", managementAccessToken],
+    refetchOnWindowFocus: false,
+  });
+
+  const serverWallets = serverWalletsQuery.data ?? [];
+
+  const effectiveSelectedWalletId = useMemo(() => {
+    if (
+      selectedWalletId &&
+      serverWallets.some((wallet) => wallet.id === selectedWalletId)
+    ) {
+      return selectedWalletId;
+    }
+
+    return serverWallets[0]?.id;
+  }, [selectedWalletId, serverWallets]);
+
+  const selectedWallet = useMemo(() => {
+    if (!effectiveSelectedWalletId) {
+      return undefined;
+    }
+
+    return serverWallets.find(
+      (wallet) => wallet.id === effectiveSelectedWalletId,
+    );
+  }, [effectiveSelectedWalletId, serverWallets]);
+
+  const setDefaultWalletMutation = useMutation({
+    mutationFn: async (wallet: ProjectWalletSummary) => {
+      await updateDefaultProjectWallet({
+        project,
+        projectWalletAddress: wallet.address,
+      });
+    },
+    onError: (error) => {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Failed to update project wallet";
+      toast.error(message);
+    },
+    onSuccess: async (_, wallet) => {
+      const descriptionLabel = wallet.label ?? wallet.address;
+      toast.success("Project wallet updated", {
+        description: `Now pointing to ${descriptionLabel}`,
+      });
+      await queryClient.invalidateQueries({
+        queryKey: [
+          "project",
+          project.id,
+          "server-wallets",
+          managementAccessToken,
+        ],
+      });
+      setIsSelectDialogOpen(false);
+      router.refresh();
+    },
+  });
+
+  const canSelectExisting =
+    Boolean(managementAccessToken) && serverWallets.length > 0;
+
+  return (
+    <div className="rounded-xl border p-4 bg-card">
+      <div className="rounded-full p-2 border bg-background inline-flex mb-4">
+        <XIcon className="size-3.5 text-muted-foreground" />
+      </div>
+      <h2 className="text-sm font-medium text-foreground mb-0.5">
+        No Project Wallet set
+      </h2>
+      <p className="text-sm text-muted-foreground">
+        Set a project wallet to set the default sender in thirdweb API.
+      </p>
+
+      <div className="mt-4 space-y-5 text-foreground">
+        {serverWalletsQuery.isLoading ? (
+          <Skeleton className="h-[36px] max-w-lg rounded-full" />
+        ) : canSelectExisting ? (
+          <div className="flex items-center gap-3">
+            <Button
+              className="bg-background rounded-full gap-2"
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setSelectedWalletId(effectiveSelectedWalletId);
+                setIsSelectDialogOpen(true);
+              }}
+              type="button"
+            >
+              <ChevronDownIcon className="size-4 text-muted-foreground" />
+              Select a server wallet
+            </Button>
+
+            <CreateServerWallet
+              project={project}
+              teamSlug={teamSlug}
+              setAsProjectWallet
+              button={{ size: "sm", iconClassName: "size-3.5" }}
+            />
+
+            <Dialog
+              onOpenChange={(nextOpen) => {
+                if (!nextOpen) {
+                  setIsSelectDialogOpen(false);
+                }
+              }}
+              open={isSelectDialogOpen}
+            >
+              <DialogContent className="gap-0 p-0 overflow-hidden">
+                <DialogHeader className="p-4 lg:p-6">
+                  <DialogTitle>Select project wallet</DialogTitle>
+                  <DialogDescription>
+                    Choose a server wallet to use as the default for this
+                    project.
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="px-4 pb-8 lg:px-6">
+                  {serverWalletsQuery.isLoading ? (
+                    <div className="flex justify-center py-6">
+                      <Spinner className="size-5" />
+                    </div>
+                  ) : serverWallets.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      No server wallets found.
+                    </p>
+                  ) : (
+                    <div className="flex flex-col gap-3">
+                      <Select
+                        onValueChange={(value) => setSelectedWalletId(value)}
+                        value={selectedWalletId ?? ""}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select server wallet" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {serverWallets.map((wallet) => (
+                            <SelectItem key={wallet.id} value={wallet.id}>
+                              <div className="flex items-center gap-3">
+                                <WalletAddress
+                                  address={wallet.address}
+                                  client={client}
+                                  className="h-auto py-1"
+                                />
+                                <span className="text-sm text-muted-foreground">
+                                  {wallet.label}
+                                </span>
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex justify-end gap-3 border-t bg-card p-4 lg:p-6">
+                  <Button
+                    onClick={() => {
+                      setIsSelectDialogOpen(false);
+                    }}
+                    type="button"
+                    variant="outline"
+                    disabled={setDefaultWalletMutation.isPending}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    disabled={
+                      !selectedWallet || setDefaultWalletMutation.isPending
+                    }
+                    onClick={() => {
+                      if (selectedWallet) {
+                        setDefaultWalletMutation.mutate(selectedWallet);
+                      }
+                    }}
+                    type="button"
+                  >
+                    {setDefaultWalletMutation.isPending && (
+                      <Spinner className="mr-2 size-4" />
+                    )}
+                    Set as project wallet
+                  </Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+        ) : (
+          <div className="space-y-3 text-sm text-muted-foreground">
+            <CreateServerWallet
+              project={project}
+              teamSlug={teamSlug}
+              setAsProjectWallet
+              button={{ size: "sm", iconClassName: "size-3.5" }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ProjectWalletSectionUI(props: {
+  project: Project;
+  teamSlug: string;
+  projectWallet: ProjectWalletSummary | undefined;
+  getProjectServerWallets: GetProjectServerWallets;
+  client: ThirdwebClient;
+}) {
+  return (
+    <div>
+      <div className="mb-3">
+        <h2 className="mb-1 font-semibold text-xl tracking-tight">
+          Project Wallet
+        </h2>
+        <p className="text-muted-foreground text-sm">
+          The server wallet to be used as the default sender in{" "}
+          <UnderlineLink
+            href="https://portal.thirdweb.com/reference"
+            target="_blank"
+          >
+            thirdweb API
+          </UnderlineLink>
+        </p>
+      </div>
+
+      {props.projectWallet ? (
+        <ProjectWalletDetailsSection
+          project={props.project}
+          projectWallet={props.projectWallet}
+          client={props.client}
+          teamSlug={props.teamSlug}
+          getProjectServerWallets={props.getProjectServerWallets}
+        />
+      ) : (
+        <CreateProjectWalletSection
+          project={props.project}
+          teamSlug={props.teamSlug}
+          getProjectServerWallets={props.getProjectServerWallets}
+        />
+      )}
+    </div>
+  );
+}
+
+export function ProjectWalletSection(props: {
+  project: Project;
+  teamSlug: string;
+  projectWallet: ProjectWalletSummary | undefined;
+  client: ThirdwebClient;
+}) {
+  return (
+    <ProjectWalletSectionUI
+      project={props.project}
+      teamSlug={props.teamSlug}
+      client={props.client}
+      projectWallet={props.projectWallet}
+      getProjectServerWallets={listProjectServerWallets}
+    />
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(instance)/[engineId]/metrics/components/ErrorRate.tsx

@@ -59,7 +59,6 @@ export function ErrorRate({ datapoints }: { datapoints: ResultItem[] }) {
           key={tag}
           stackId="a"
           stroke={`var(--color-${tag})`}
-          type="natural"
         />,
       );
     }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/overview/highlights-card.tsx

@@ -14,6 +14,7 @@ type AggregatedMetrics = {
 
 export function ProjectHighlightsCard(props: {
   selectedChart: string | undefined;
+  aggregatedUserStats: InAppWalletStats[];
   userStats: InAppWalletStats[];
   volumeStats: UniversalBridgeStats[];
   teamSlug: string;
@@ -22,6 +23,7 @@ export function ProjectHighlightsCard(props: {
 }) {
   const {
     selectedChart,
+    aggregatedUserStats,
     userStats,
     volumeStats,
     teamSlug,
@@ -70,6 +72,12 @@ export function ProjectHighlightsCard(props: {
           : "activeUsers"
       }
       aggregateFn={(_data, key) => {
+        if (key === "activeUsers") {
+          return aggregatedUserStats.reduce(
+            (acc, curr) => acc + curr.uniqueWalletsConnected,
+            0,
+          );
+        }
         return timeSeriesData.reduce((acc, curr) => acc + curr[key], 0);
       }}
       chartConfig={chartConfig}

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

@@ -39,10 +39,8 @@ import type {
 import { loginRedirect } from "@/utils/redirects";
 import { PieChartCard } from "../../../components/Analytics/PieChartCard";
 import { EngineCloudChartCardAsync } from "./components/EngineCloudChartCard";
-import {
-  ProjectFTUX,
-  ProjectWalletSection,
-} from "./components/ProjectFTUX/ProjectFTUX";
+import { ProjectFTUX } from "./components/ProjectFTUX/ProjectFTUX";
+import { ProjectWalletSection } from "./components/project-wallet/project-wallet";
 import { RpcMethodBarChartCardAsync } from "./components/RpcMethodBarChartCard";
 import { TransactionsChartCardAsync } from "./components/Transactions";
 import { ProjectHighlightsCard } from "./overview/highlights-card";
@@ -112,9 +110,6 @@ export default async function ProjectOverviewPage(props: PageProps) {
   });
 
   const projectWallet = await getProjectWallet(project);
-  const managementAccessToken =
-    project.services?.find((service) => service.name === "engineCloud")
-      ?.managementAccessToken ?? undefined;
 
   return (
     <ResponsiveSearchParamsProvider value={searchParams}>
@@ -135,14 +130,17 @@ export default async function ProjectOverviewPage(props: PageProps) {
           actions: null,
         }}
       >
+        <ProjectWalletSection
+          project={project}
+          teamSlug={params.team_slug}
+          projectWallet={projectWallet}
+          client={client}
+        />
+
+        <div className="h-10" />
+
         {isActive ? (
           <div className="flex flex-col gap-4 md:gap-6">
-            <ProjectWalletSection
-              project={project}
-              teamSlug={params.team_slug}
-              wallet={projectWallet}
-              managementAccessToken={managementAccessToken}
-            />
             <ResponsiveTimeFilters defaultRange={defaultRange} />
             <ProjectAnalytics
               authToken={authToken}
@@ -155,12 +153,7 @@ export default async function ProjectOverviewPage(props: PageProps) {
             />
           </div>
         ) : (
-          <ProjectFTUX
-            project={project}
-            teamSlug={params.team_slug}
-            wallet={projectWallet}
-            managementAccessToken={managementAccessToken}
-          />
+          <ProjectFTUX project={project} teamSlug={params.team_slug} />
         )}
       </ProjectPage>
     </ResponsiveSearchParamsProvider>
@@ -385,8 +378,18 @@ async function AsyncAppHighlightsCard(props: {
   params: PageParams;
   authToken: string;
 }) {
-  const [walletUserStatsTimeSeries, universalBridgeUsage] =
+  const [aggregatedUserStats, walletUserStatsTimeSeries, universalBridgeUsage] =
     await Promise.allSettled([
+      getInAppWalletUsage(
+        {
+          from: props.range.from,
+          period: "all",
+          projectId: props.project.id,
+          teamId: props.project.teamId,
+          to: props.range.to,
+        },
+        props.authToken,
+      ),
       getInAppWalletUsage(
         {
           from: props.range.from,
@@ -415,6 +418,11 @@ async function AsyncAppHighlightsCard(props: {
   ) {
     return (
       <ProjectHighlightsCard
+        aggregatedUserStats={
+          aggregatedUserStats.status === "fulfilled"
+            ? aggregatedUserStats.value
+            : []
+        }
         selectedChart={props.selectedChart}
         selectedChartQueryParam={props.selectedChartQueryParam}
         teamSlug={props.params.team_slug}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/analytics-page.tsx

@@ -1,45 +1,95 @@
-import { ResponsiveSearchParamsProvider } from "responsive-rsc";
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { Spinner } from "@workspace/ui/components/spinner";
 import type { ThirdwebClient } from "thirdweb";
 import type { Project } from "@/api/project/projects";
 import { UnifiedTransactionsTable } from "../components/transactions-table.client";
+import { getTransactionAnalyticsSummary } from "../lib/analytics-summary.client";
 import type { Wallet } from "../server-wallets/wallet-table/types";
-import { TransactionAnalyticsFilter } from "./filter";
-import { TransactionsChartCard } from "./tx-chart/tx-chart";
+import type { SolanaWallet } from "../solana-wallets/wallet-table/types";
+import { EngineChecklist } from "./ftux.client";
+import { TransactionAnalyticsSummary } from "./summary";
+import { TransactionsAnalytics } from "./tx-chart/tx-chart";
 
 export function TransactionsAnalyticsPageContent(props: {
-  searchParams: {
-    from?: string | undefined | string[];
-    to?: string | undefined | string[];
-    interval?: string | undefined | string[];
-  };
   project: Project;
   showAnalytics: boolean;
-  wallets?: Wallet[];
+  wallets: Wallet[];
   teamSlug: string;
   client: ThirdwebClient;
+  authToken: string;
+  teamId: string;
+  isManagedVault: boolean;
+  testTxWithWallet: string | undefined;
+  testSolanaTxWithWallet: string | undefined;
+  solanaWallets: SolanaWallet[];
 }) {
-  return (
-    <ResponsiveSearchParamsProvider value={props.searchParams}>
-      <div className="flex grow flex-col gap-6">
-        {props.showAnalytics && (
-          <>
-            <div className="flex justify-end">
-              <TransactionAnalyticsFilter />
-            </div>
-            <TransactionsChartCard
-              project={props.project}
-              searchParams={props.searchParams}
-              teamSlug={props.teamSlug}
-              wallets={props.wallets ?? []}
-            />
-          </>
-        )}
-        <UnifiedTransactionsTable
-          client={props.client}
-          project={props.project}
-          teamSlug={props.teamSlug}
-        />
+  const engineTxSummaryQuery = useQuery({
+    queryKey: [
+      "engine-tx-analytics-summary",
+      props.teamId,
+      props.project.publishableKey,
+      props.authToken,
+    ],
+    queryFn: async () => {
+      const data = await getTransactionAnalyticsSummary({
+        clientId: props.project.publishableKey,
+        teamId: props.teamId,
+        authToken: props.authToken,
+      });
+      return data;
+    },
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  });
+
+  if (engineTxSummaryQuery.isPending) {
+    return (
+      <div className="flex h-[642px] grow items-center justify-center bg-card rounded-xl border">
+        <Spinner className="size-10" />
       </div>
-    </ResponsiveSearchParamsProvider>
+    );
+  }
+
+  const hasTransactions = engineTxSummaryQuery.data
+    ? engineTxSummaryQuery.data.totalCount > 0
+    : false;
+
+  return (
+    <div className="flex grow flex-col gap-10">
+      <EngineChecklist
+        isManagedVault={props.isManagedVault}
+        client={props.client}
+        hasTransactions={hasTransactions}
+        project={props.project}
+        teamSlug={props.teamSlug}
+        testTxWithWallet={props.testTxWithWallet}
+        testSolanaTxWithWallet={props.testSolanaTxWithWallet}
+        wallets={props.wallets}
+        solanaWallets={props.solanaWallets}
+      />
+
+      {props.showAnalytics && hasTransactions && (
+        <div className="flex flex-col gap-6">
+          <TransactionAnalyticsSummary
+            clientId={props.project.publishableKey}
+            teamId={props.project.teamId}
+            initialData={engineTxSummaryQuery.data}
+          />
+          <TransactionsAnalytics
+            project={props.project}
+            authToken={props.authToken}
+            teamSlug={props.teamSlug}
+            wallets={props.wallets ?? []}
+          />
+        </div>
+      )}
+
+      <UnifiedTransactionsTable
+        client={props.client}
+        project={props.project}
+        teamSlug={props.teamSlug}
+      />
+    </div>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/filter.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import {
-  useResponsiveSearchParams,
-  useSetResponsiveSearchParams,
-} from "responsive-rsc";
-import { DateRangeSelector } from "@/components/analytics/date-range-selector";
-import { IntervalSelector } from "@/components/analytics/interval-selector";
-import { normalizeTimeISOString } from "@/lib/time";
-import { getTxAnalyticsFiltersFromSearchParams } from "../lib/utils";
-
-export function TransactionAnalyticsFilter() {
-  const responsiveSearchParams = useResponsiveSearchParams();
-  const setResponsiveSearchParams = useSetResponsiveSearchParams();
-
-  const { range, interval } = getTxAnalyticsFiltersFromSearchParams({
-    from: responsiveSearchParams.from,
-    interval: responsiveSearchParams.interval,
-    to: responsiveSearchParams.to,
-  });
-
-  return (
-    <div className="no-scrollbar flex items-center gap-3 max-sm:overflow-auto">
-      <DateRangeSelector
-        popoverAlign="end"
-        range={range}
-        setRange={(newRange) => {
-          setResponsiveSearchParams((v) => {
-            return {
-              ...v,
-              from: normalizeTimeISOString(newRange.from),
-              to: normalizeTimeISOString(newRange.to),
-            };
-          });
-        }}
-      />
-
-      <IntervalSelector
-        intervalType={interval}
-        setIntervalType={(newInterval) => {
-          setResponsiveSearchParams((v) => {
-            return {
-              ...v,
-              interval: newInterval,
-            };
-          });
-        }}
-      />
-    </div>
-  );
-}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/ftux.client.tsx

@@ -3,14 +3,13 @@ import { useMemo } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import type { Project } from "@/api/project/projects";
 import { type Step, StepsCard } from "@/components/blocks/StepsCard";
-import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
+import { CreateServerWallet } from "../server-wallets/components/create-server-wallet.client";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import type { SolanaWallet } from "../solana-wallets/wallet-table/types";
 import { SendTestSolanaTransaction } from "./send-test-solana-tx.client";
 import { SendTestTransaction } from "./send-test-tx.client";
 
 interface Props {
-  managementAccessToken: string | undefined;
   project: Project;
   wallets: Wallet[];
   solanaWallets: SolanaWallet[];
@@ -29,11 +28,12 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     const steps: Step[] = [];
     steps.push({
       children: (
-        <CreateServerWalletStep
-          managementAccessToken={props.managementAccessToken}
-          project={props.project}
-          teamSlug={props.teamSlug}
-        />
+        <div className="mt-4 flex flex-row gap-4">
+          <CreateServerWallet
+            project={props.project}
+            teamSlug={props.teamSlug}
+          />
+        </div>
       ),
       completed: props.wallets.length > 0 || props.hasTransactions,
       description:
@@ -61,7 +61,6 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     });
     return steps;
   }, [
-    props.managementAccessToken,
     props.project,
     props.wallets,
     props.hasTransactions,
@@ -113,19 +112,3 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     />
   );
 };
-
-function CreateServerWalletStep(props: {
-  project: Project;
-  teamSlug: string;
-  managementAccessToken: string | undefined;
-}) {
-  return (
-    <div className="mt-4 flex flex-row gap-4">
-      <CreateServerWallet
-        managementAccessToken={props.managementAccessToken}
-        project={props.project}
-        teamSlug={props.teamSlug}
-      />
-    </div>
-  );
-}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/summary.tsx

@@ -1,7 +1,7 @@
 import { ActivityIcon, CoinsIcon } from "lucide-react";
 import { toEther } from "thirdweb/utils";
 import { StatCard } from "@/components/analytics/stat"; // Assuming correct path
-import type { TransactionSummaryData } from "../lib/analytics";
+import type { TransactionSummaryData } from "../lib/analytics-summary.client";
 
 // Renders the UI based on fetched data or pending state
 function TransactionAnalyticsSummaryUI(props: {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-chart/data.ts

@@ -0,0 +1,75 @@
+"use client";
+import { NEXT_PUBLIC_ENGINE_CLOUD_URL } from "@/constants/public-envs";
+import type { TransactionStats } from "@/types/analytics";
+
+export async function getTransactionsChartData({
+  teamId,
+  clientId,
+  from,
+  to,
+  interval,
+  authToken,
+}: {
+  teamId: string;
+  clientId: string;
+  from: string;
+  to: string;
+  interval: "day" | "week";
+  authToken: string;
+}): Promise<TransactionStats[]> {
+  const filters = {
+    endDate: to,
+    resolution: interval,
+    startDate: from,
+  };
+
+  const response = await fetch(
+    `${NEXT_PUBLIC_ENGINE_CLOUD_URL}/v1/transactions/analytics`,
+    {
+      body: JSON.stringify(filters),
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+        "x-client-id": clientId,
+        "x-team-id": teamId,
+      },
+      method: "POST",
+    },
+  );
+
+  if (!response.ok) {
+    if (response.status === 401 || response.status === 400) {
+      return [];
+    }
+
+    // TODO - need to handle this error state, like we do with the connect charts
+    throw new Error(
+      `Error fetching transactions chart data: ${response.status} ${
+        response.statusText
+      } - ${await response.text().catch(() => "Unknown error")}`,
+    );
+  }
+
+  type TransactionsChartResponse = {
+    result: {
+      analytics: Array<{
+        timeBucket: string;
+        chainId: string;
+        count: number;
+      }>;
+      metadata: {
+        resolution: string;
+        startDate: string;
+        endDate: string;
+      };
+    };
+  };
+
+  const data = (await response.json()) as TransactionsChartResponse;
+
+  return data.result.analytics.map((stat) => ({
+    chainId: Number(stat.chainId),
+    count: stat.count,
+    date: stat.timeBucket,
+  }));
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-chart/tx-chart-ui.tsx

@@ -108,10 +108,10 @@ export function TransactionsChartCardUI(props: {
       customHeader={
         <div className="relative px-6 pt-6">
           <h3 className="mb-0.5 font-semibold text-xl tracking-tight">
-            Daily Transactions
+            Transactions
           </h3>
           <p className="text-muted-foreground text-sm">
-            Amount of daily transactions by chain.
+            transactions broken down by chain
           </p>
 
           <div className="top-6 right-6 mb-8 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">
@@ -194,13 +194,7 @@ function EmptyChartContent(props: {
           </div>
         </>
       ) : (
-        <p className="flex items-center gap-2 rounded-full border bg-background px-3.5 py-1.5 text-sm">
-          <span className="!pointer-events-auto relative flex size-2">
-            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" />
-            <span className="relative inline-flex size-2 rounded-full bg-primary" />
-          </span>
-          Waiting for transactions...
-        </p>
+        <p className="text-sm text-muted-foreground">No transactions found</p>
       )}
     </div>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-chart/tx-chart.tsx

@@ -1,73 +1,68 @@
-import { ResponsiveSuspense } from "responsive-rsc";
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
 import type { Project } from "@/api/project/projects";
-import { getTransactionsChart } from "../../lib/analytics";
-import { getTxAnalyticsFiltersFromSearchParams } from "../../lib/utils";
+import {
+  DateRangeSelector,
+  getLastNDaysRange,
+} from "@/components/analytics/date-range-selector";
+import { IntervalSelector } from "@/components/analytics/interval-selector";
+import { normalizeTimeISOString } from "@/lib/time";
 import type { Wallet } from "../../server-wallets/wallet-table/types";
+import { getTransactionsChartData } from "./data";
 import { TransactionsChartCardUI } from "./tx-chart-ui";
 
-async function AsyncTransactionsChartCard(props: {
-  from: string;
-  to: string;
-  interval: "day" | "week";
+export function TransactionsAnalytics(props: {
   project: Project;
   wallets: Wallet[];
+  authToken: string;
   teamSlug: string;
 }) {
-  const data = await getTransactionsChart({
+  const [range, setRange] = useState(() => getLastNDaysRange("last-30"));
+  const [interval, setInterval] = useState<"day" | "week">("day");
+
+  const params = {
     clientId: props.project.publishableKey,
-    from: props.from,
-    interval: props.interval,
+    from: normalizeTimeISOString(range.from),
+    interval: interval,
     teamId: props.project.teamId,
-    to: props.to,
+    to: normalizeTimeISOString(range.to),
+    authToken: props.authToken,
+  };
+
+  const engineTxAnalytics = useQuery({
+    queryKey: ["engine-tx-analytics", params],
+    queryFn: async () => {
+      const data = await getTransactionsChartData(params);
+      return data;
+    },
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
   });
 
   return (
-    <TransactionsChartCardUI
-      isPending={false}
-      project={props.project}
-      teamSlug={props.teamSlug}
-      userOpStats={data}
-      wallets={props.wallets}
-    />
-  );
-}
+    <div className="flex flex-col gap-6">
+      <div className="flex justify-end">
+        <div className="no-scrollbar flex items-center gap-3 max-sm:overflow-auto">
+          <DateRangeSelector
+            popoverAlign="end"
+            range={range}
+            setRange={setRange}
+          />
 
-export function TransactionsChartCard(props: {
-  searchParams: {
-    from?: string | undefined | string[];
-    to?: string | undefined | string[];
-    interval?: string | undefined | string[];
-  };
-  project: Project;
-  wallets: Wallet[];
-  teamSlug: string;
-}) {
-  const { range, interval } = getTxAnalyticsFiltersFromSearchParams(
-    props.searchParams,
-  );
-
-  return (
-    <ResponsiveSuspense
-      // TODO - change this if this component does not end up using these params
-      fallback={
-        <TransactionsChartCardUI
-          isPending={true}
-          project={props.project}
-          teamSlug={props.teamSlug}
-          userOpStats={[]}
-          wallets={[]}
-        />
-      }
-      searchParamsUsed={["from", "to", "interval"]}
-    >
-      <AsyncTransactionsChartCard
-        from={range.from.toISOString()}
-        interval={interval}
+          <IntervalSelector
+            intervalType={interval}
+            setIntervalType={setInterval}
+          />
+        </div>
+      </div>
+      <TransactionsChartCardUI
+        isPending={engineTxAnalytics.isPending}
         project={props.project}
         teamSlug={props.teamSlug}
-        to={range.to.toISOString()}
+        userOpStats={engineTxAnalytics.data ?? []}
         wallets={props.wallets}
       />
-    </ResponsiveSuspense>
+    </div>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/components/server-wallets-table.client.tsx

@@ -40,6 +40,13 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import {
@@ -57,8 +64,9 @@ import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
 import { WalletProductIcon } from "@/icons/WalletProductIcon";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
+import { fetchSolanaBalance } from "../lib/getSolanaBalance";
 import { updateDefaultProjectWallet } from "../lib/vault.client";
-import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
+import { CreateServerWallet } from "../server-wallets/components/create-server-wallet.client";
 import type { Wallet as EVMWallet } from "../server-wallets/wallet-table/types";
 import { CreateSolanaWallet } from "../solana-wallets/components/create-solana-wallet.client";
 import { UpgradeSolanaPermissions } from "../solana-wallets/components/upgrade-solana-permissions.client";
@@ -77,9 +85,9 @@ interface ServerWalletsTableProps {
   solanaTotalPages: number;
   project: Project;
   teamSlug: string;
-  managementAccessToken: string | undefined;
   client: ThirdwebClient;
   solanaPermissionError?: boolean;
+  authToken: string;
 }
 
 export function ServerWalletsTable(props: ServerWalletsTableProps) {
@@ -88,7 +96,6 @@ export function ServerWalletsTable(props: ServerWalletsTableProps) {
     solanaWallets,
     project,
     teamSlug,
-    managementAccessToken,
     evmTotalRecords,
     evmCurrentPage,
     evmTotalPages,
@@ -97,10 +104,14 @@ export function ServerWalletsTable(props: ServerWalletsTableProps) {
     solanaTotalPages,
     client,
     solanaPermissionError,
+    authToken,
   } = props;
 
   const [activeChain, setActiveChain] = useState<WalletChain>("evm");
   const [selectedChainId, setSelectedChainId] = useState<number>(1);
+  const [selectedSolanaChain, setSelectedSolanaChain] = useState<
+    "solana:mainnet" | "solana:devnet"
+  >("solana:mainnet");
   const [showSmartAccount, setShowSmartAccount] = useState(false);
   const queryClient = useQueryClient();
 
@@ -134,11 +145,7 @@ export function ServerWalletsTable(props: ServerWalletsTableProps) {
             <div className="flex flex-row gap-2.5">
               {activeChain === "evm" && (
                 <>
-                  <CreateServerWallet
-                    managementAccessToken={managementAccessToken}
-                    project={project}
-                    teamSlug={teamSlug}
-                  />
+                  <CreateServerWallet project={project} teamSlug={teamSlug} />
                   <SingleNetworkSelector
                     chainId={selectedChainId}
                     onChange={setSelectedChainId}
@@ -151,12 +158,33 @@ export function ServerWalletsTable(props: ServerWalletsTableProps) {
                 </>
               )}
               {activeChain === "solana" && (
-                <CreateSolanaWallet
-                  managementAccessToken={managementAccessToken}
-                  project={project}
-                  teamSlug={teamSlug}
-                  disabled={solanaPermissionError}
-                />
+                <>
+                  <CreateSolanaWallet
+                    project={project}
+                    teamSlug={teamSlug}
+                    disabled={solanaPermissionError}
+                  />
+                  <Select
+                    value={selectedSolanaChain}
+                    onValueChange={(value) =>
+                      setSelectedSolanaChain(
+                        value as "solana:mainnet" | "solana:devnet",
+                      )
+                    }
+                  >
+                    <SelectTrigger className="w-fit min-w-[180px] rounded-full bg-background hover:bg-accent/50">
+                      <SelectValue placeholder="Select network" />
+                    </SelectTrigger>
+                    <SelectContent className="rounded-xl">
+                      <SelectItem value="solana:mainnet" className="rounded-lg">
+                        Solana Mainnet
+                      </SelectItem>
+                      <SelectItem value="solana:devnet" className="rounded-lg">
+                        Solana Devnet
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </>
               )}
             </div>
 
@@ -285,6 +313,8 @@ export function ServerWalletsTable(props: ServerWalletsTableProps) {
                         project={project}
                         teamSlug={teamSlug}
                         client={client}
+                        authToken={authToken}
+                        chainId={selectedSolanaChain}
                       />
                     ))}
                 </TableBody>
@@ -514,11 +544,15 @@ function SolanaWalletRow({
   project,
   teamSlug,
   client,
+  authToken,
+  chainId,
 }: {
   wallet: SolanaWallet;
   project: Project;
   teamSlug: string;
   client: ThirdwebClient;
+  authToken: string;
+  chainId: "solana:mainnet" | "solana:devnet";
 }) {
   const engineService = project.services.find(
     (s) => s.name === "engineCloud",
@@ -554,7 +588,12 @@ function SolanaWalletRow({
       </TableCell>
 
       <TableCell>
-        <SolanaWalletBalance publicKey={wallet.publicKey} />
+        <SolanaWalletBalance
+          publicKey={wallet.publicKey}
+          authToken={authToken}
+          clientId={project.publishableKey}
+          chainId={chainId}
+        />
       </TableCell>
 
       <TableCell>
@@ -746,16 +785,27 @@ function WalletBalance({
   );
 }
 
-function SolanaWalletBalance({ publicKey }: { publicKey: string }) {
+function SolanaWalletBalance({
+  publicKey,
+  authToken,
+  clientId,
+  chainId,
+}: {
+  publicKey: string;
+  authToken: string;
+  clientId: string;
+  chainId: "solana:mainnet" | "solana:devnet";
+}) {
   const balance = useQuery({
     queryFn: async () => {
-      // TODO: Implement actual Solana balance fetching
-      return {
-        displayValue: "0",
-        symbol: "SOL",
-      };
+      return await fetchSolanaBalance({
+        publicKey,
+        authToken,
+        clientId,
+        chainId,
+      });
     },
-    queryKey: ["solanaWalletBalance", publicKey],
+    queryKey: ["solanaWalletBalance", publicKey, chainId],
   });
 
   if (balance.isFetching) {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/analytics-summary.client.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { NEXT_PUBLIC_ENGINE_CLOUD_URL } from "@/constants/public-envs";
+
+export type TransactionSummaryData = {
+  totalCount: number;
+  totalGasCostWei: string;
+  totalGasUnitsUsed: string; // Keep fetched data structure
+};
+
+type AnalyticsSummaryApiResponse = {
+  result: {
+    summary: {
+      totalCount: number;
+      totalGasCostWei: string;
+      totalGasUnitsUsed: string;
+    };
+    metadata: {
+      startDate?: string;
+      endDate?: string;
+    };
+  };
+};
+
+// Fetches data from the /analytics-summary endpoint
+export async function getTransactionAnalyticsSummary(props: {
+  teamId: string;
+  clientId: string;
+  authToken: string;
+}): Promise<TransactionSummaryData> {
+  const body = {};
+  const defaultData: TransactionSummaryData = {
+    totalCount: 0,
+    totalGasCostWei: "0",
+    totalGasUnitsUsed: "0",
+  };
+
+  try {
+    const response = await fetch(
+      `${NEXT_PUBLIC_ENGINE_CLOUD_URL}/v1/transactions/analytics-summary`,
+      {
+        body: JSON.stringify(body),
+        headers: {
+          Authorization: `Bearer ${props.authToken}`,
+          "Content-Type": "application/json",
+          "x-client-id": props.clientId,
+          "x-team-id": props.teamId,
+        },
+        method: "POST",
+      },
+    );
+
+    if (!response.ok) {
+      if (response.status === 401 || response.status === 400) {
+        console.error("Unauthorized fetching transaction summary");
+        return defaultData;
+      }
+      const errorText = await response.text();
+      throw new Error(
+        `Error fetching transaction summary: ${response.status} ${response.statusText} - ${errorText}`,
+      );
+    }
+
+    const data = (await response.json()) as AnalyticsSummaryApiResponse;
+
+    return {
+      totalCount: data.result.summary.totalCount ?? 0,
+      totalGasCostWei: data.result.summary.totalGasCostWei ?? "0",
+      totalGasUnitsUsed: data.result.summary.totalGasUnitsUsed ?? "0",
+    };
+  } catch (error) {
+    console.error("Failed to fetch transaction summary:", error);
+    return defaultData;
+  }
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/analytics.ts

@@ -1,157 +1,10 @@
 import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_ENGINE_CLOUD_URL } from "@/constants/public-envs";
-import type { TransactionStats } from "@/types/analytics";
 import type {
   Transaction,
   TransactionsResponse,
 } from "../analytics/tx-table/types";
 
-// Define the structure of the data we expect back from our fetch function
-export type TransactionSummaryData = {
-  totalCount: number;
-  totalGasCostWei: string;
-  totalGasUnitsUsed: string; // Keep fetched data structure
-};
-
-// Define the structure of the API response
-type AnalyticsSummaryApiResponse = {
-  result: {
-    summary: {
-      totalCount: number;
-      totalGasCostWei: string;
-      totalGasUnitsUsed: string;
-    };
-    metadata: {
-      startDate?: string;
-      endDate?: string;
-    };
-  };
-};
-
-// Fetches data from the /analytics-summary endpoint
-export async function getTransactionAnalyticsSummary(props: {
-  teamId: string;
-  clientId: string;
-}): Promise<TransactionSummaryData> {
-  const authToken = await getAuthToken();
-  const body = {};
-  const defaultData: TransactionSummaryData = {
-    totalCount: 0,
-    totalGasCostWei: "0",
-    totalGasUnitsUsed: "0",
-  };
-
-  try {
-    const response = await fetch(
-      `${NEXT_PUBLIC_ENGINE_CLOUD_URL}/v1/transactions/analytics-summary`,
-      {
-        body: JSON.stringify(body),
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-          "Content-Type": "application/json",
-          "x-client-id": props.clientId,
-          "x-team-id": props.teamId,
-        },
-        method: "POST",
-      },
-    );
-
-    if (!response.ok) {
-      if (response.status === 401 || response.status === 400) {
-        console.error("Unauthorized fetching transaction summary");
-        return defaultData;
-      }
-      const errorText = await response.text();
-      throw new Error(
-        `Error fetching transaction summary: ${response.status} ${response.statusText} - ${errorText}`,
-      );
-    }
-
-    const data = (await response.json()) as AnalyticsSummaryApiResponse;
-
-    return {
-      totalCount: data.result.summary.totalCount ?? 0,
-      totalGasCostWei: data.result.summary.totalGasCostWei ?? "0",
-      totalGasUnitsUsed: data.result.summary.totalGasUnitsUsed ?? "0",
-    };
-  } catch (error) {
-    console.error("Failed to fetch transaction summary:", error);
-    return defaultData;
-  }
-}
-
-export async function getTransactionsChart({
-  teamId,
-  clientId,
-  from,
-  to,
-  interval,
-}: {
-  teamId: string;
-  clientId: string;
-  from: string;
-  to: string;
-  interval: "day" | "week";
-}): Promise<TransactionStats[]> {
-  const authToken = await getAuthToken();
-
-  const filters = {
-    endDate: to,
-    resolution: interval,
-    startDate: from,
-  };
-
-  const response = await fetch(
-    `${NEXT_PUBLIC_ENGINE_CLOUD_URL}/v1/transactions/analytics`,
-    {
-      body: JSON.stringify(filters),
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-        "x-client-id": clientId,
-        "x-team-id": teamId,
-      },
-      method: "POST",
-    },
-  );
-
-  if (!response.ok) {
-    if (response.status === 401 || response.status === 400) {
-      return [];
-    }
-
-    // TODO - need to handle this error state, like we do with the connect charts
-    throw new Error(
-      `Error fetching transactions chart data: ${response.status} ${
-        response.statusText
-      } - ${await response.text().catch(() => "Unknown error")}`,
-    );
-  }
-
-  type TransactionsChartResponse = {
-    result: {
-      analytics: Array<{
-        timeBucket: string;
-        chainId: string;
-        count: number;
-      }>;
-      metadata: {
-        resolution: string;
-        startDate: string;
-        endDate: string;
-      };
-    };
-  };
-
-  const data = (await response.json()) as TransactionsChartResponse;
-
-  return data.result.analytics.map((stat) => ({
-    chainId: Number(stat.chainId),
-    count: stat.count,
-    date: stat.timeBucket,
-  }));
-}
-
 export async function getSingleTransaction({
   teamId,
   clientId,

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/getSolanaBalance.ts

@@ -0,0 +1,60 @@
+import { configure, getSolanaWalletBalance } from "@thirdweb-dev/api";
+import { THIRDWEB_API_HOST } from "@/constants/urls";
+
+// Configure the API client to use the correct base URL
+configure({
+  override: {
+    baseUrl: THIRDWEB_API_HOST,
+  },
+});
+
+export async function fetchSolanaBalance({
+  publicKey,
+  authToken,
+  clientId,
+  chainId = "solana:mainnet",
+}: {
+  publicKey: string;
+  authToken: string;
+  clientId: string;
+  chainId?: "solana:mainnet" | "solana:devnet";
+}): Promise<{
+  displayValue: string;
+  symbol: string;
+  value: string;
+  decimals: number;
+} | null> {
+  try {
+    const response = await getSolanaWalletBalance({
+      path: {
+        address: publicKey,
+      },
+      query: {
+        chainId,
+      },
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+        "x-client-id": clientId,
+      },
+    });
+
+    if (response.error || !response.data) {
+      console.error(
+        "Error fetching Solana balance:",
+        response.error || "No data returned",
+      );
+      return null;
+    }
+
+    return {
+      displayValue: response.data.result.displayValue,
+      symbol: "SOL",
+      value: response.data.result.value,
+      decimals: response.data.result.decimals,
+    };
+  } catch (error) {
+    console.error("Error fetching Solana balance:", error);
+    return null;
+  }
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/utils.ts

@@ -1,14 +0,0 @@
-import { getFiltersFromSearchParams } from "@/lib/time";
-
-export function getTxAnalyticsFiltersFromSearchParams(params: {
-  from?: string | undefined | string[];
-  to?: string | undefined | string[];
-  interval?: string | undefined | string[];
-}) {
-  return getFiltersFromSearchParams({
-    defaultRange: "last-30",
-    from: params.from,
-    interval: params.interval,
-    to: params.to,
-  });
-}

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

@@ -7,10 +7,7 @@ import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { TransactionsAnalyticsPageContent } from "./analytics/analytics-page";
-import { EngineChecklist } from "./analytics/ftux.client";
-import { TransactionAnalyticsSummary } from "./analytics/summary";
 import { ServerWalletsTable } from "./components/server-wallets-table.client";
-import { getTransactionAnalyticsSummary } from "./lib/analytics";
 import type { Wallet } from "./server-wallets/wallet-table/types";
 import { listSolanaAccounts } from "./solana-wallets/lib/vault.client";
 import type { SolanaWallet } from "./solana-wallets/wallet-table/types";
@@ -110,12 +107,6 @@ export default async function TransactionsAnalyticsPage(props: {
   const isSolanaPermissionError =
     solanaAccounts.error?.message.includes("AUTH_INSUFFICIENT_SCOPE") ?? false;
 
-  const initialData = await getTransactionAnalyticsSummary({
-    clientId: project.publishableKey,
-    teamId: project.teamId,
-  }).catch(() => undefined);
-  const hasTransactions = initialData ? initialData.totalCount > 0 : false;
-
   const client = getClientThirdwebClient({
     jwt: authToken,
     teamId: project.teamId,
@@ -152,42 +143,30 @@ export default async function TransactionsAnalyticsPage(props: {
       }}
     >
       <div className="flex flex-col gap-10">
-        <EngineChecklist
-          isManagedVault={isManagedVault}
-          client={client}
-          hasTransactions={hasTransactions}
-          managementAccessToken={managementAccessToken ?? undefined}
-          project={project}
-          teamSlug={params.team_slug}
-          testTxWithWallet={searchParams.testTxWithWallet as string | undefined}
-          testSolanaTxWithWallet={
-            searchParams.testSolanaTxWithWallet as string | undefined
-          }
-          wallets={wallets ?? []}
-          solanaWallets={solanaAccounts.data.items}
-        />
-        {hasTransactions &&
-          !searchParams.testTxWithWallet &&
-          !searchParams.testSolanaTxWithWallet && (
-            <TransactionAnalyticsSummary
-              clientId={project.publishableKey}
-              initialData={initialData}
-              teamId={project.teamId}
-            />
-          )}
-
         {/* transactions */}
         <TransactionsAnalyticsPageContent
           client={client}
+          authToken={authToken}
           project={project}
-          searchParams={searchParams}
           showAnalytics={
-            hasTransactions &&
             !searchParams.testTxWithWallet &&
             !searchParams.testSolanaTxWithWallet
           }
           teamSlug={params.team_slug}
-          wallets={wallets}
+          wallets={wallets ?? []}
+          solanaWallets={solanaAccounts.data.items}
+          teamId={project.teamId}
+          isManagedVault={isManagedVault}
+          testTxWithWallet={
+            typeof searchParams.testTxWithWallet === "string"
+              ? searchParams.testTxWithWallet
+              : undefined
+          }
+          testSolanaTxWithWallet={
+            typeof searchParams.testSolanaTxWithWallet === "string"
+              ? searchParams.testSolanaTxWithWallet
+              : undefined
+          }
         />
 
         {/* Server Wallets (EVM + Solana) */}
@@ -207,7 +186,6 @@ export default async function TransactionsAnalyticsPage(props: {
             evmTotalPages={Math.ceil(eoas.data.totalRecords / pageSize)}
             evmTotalRecords={eoas.data.totalRecords}
             evmWallets={eoas.data.items as Wallet[]}
-            managementAccessToken={managementAccessToken ?? undefined}
             project={project}
             solanaCurrentPage={solanCurrentPage}
             solanaTotalPages={Math.ceil(
@@ -217,6 +195,7 @@ export default async function TransactionsAnalyticsPage(props: {
             solanaWallets={solanaAccounts.data.items}
             teamSlug={params.team_slug}
             solanaPermissionError={isSolanaPermissionError}
+            authToken={authToken}
           />
         )}
       </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx

@@ -15,18 +15,26 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Spinner } from "@/components/ui/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
 import { createProjectServerWallet } from "../../lib/vault.client";
 
-export default function CreateServerWallet(props: {
+export function CreateServerWallet(props: {
   project: Project;
   teamSlug: string;
-  managementAccessToken: string | undefined;
   setAsProjectWallet?: boolean;
+  button?: {
+    size?: "default" | "sm" | "lg";
+    iconClassName?: string;
+  };
 }) {
   const router = useDashboardRouter();
   const [label, setLabel] = useState("");
   const [modalOpen, setModalOpen] = useState(false);
 
+  const managementAccessToken =
+    props.project.services?.find((service) => service.name === "engineCloud")
+      ?.managementAccessToken ?? undefined;
+
   const createEoaMutation = useMutation({
     mutationFn: async ({
       managementAccessToken,
@@ -53,12 +61,12 @@ export default function CreateServerWallet(props: {
   });
 
   const handleCreateServerWallet = async () => {
-    if (!props.managementAccessToken) {
+    if (!managementAccessToken) {
       router.push(`/team/${props.teamSlug}/${props.project.slug}/vault`);
     } else {
       await createEoaMutation.mutateAsync({
         label,
-        managementAccessToken: props.managementAccessToken,
+        managementAccessToken: managementAccessToken,
       });
     }
   };
@@ -68,21 +76,32 @@ export default function CreateServerWallet(props: {
   return (
     <>
       <Button
-        className="gap-1.5 rounded-full bg-background"
+        className="gap-1.5 rounded-full bg-background text-foreground"
         variant="outline"
+        size={props.button?.size}
         onClick={() =>
-          props.managementAccessToken
+          managementAccessToken
             ? setModalOpen(true)
             : router.push(`/team/${props.teamSlug}/${props.project.slug}/vault`)
         }
       >
         {isLoading ? (
-          <Spinner className="size-4" />
+          <Spinner
+            className={cn(
+              "size-4 text-muted-foreground",
+              props.button?.iconClassName,
+            )}
+          />
         ) : (
-          <PlusIcon className="size-4 text-muted-foreground" />
+          <PlusIcon
+            className={cn(
+              "size-4 text-muted-foreground",
+              props.button?.iconClassName,
+            )}
+          />
         )}
 
-        {props.managementAccessToken
+        {managementAccessToken
           ? isLoading
             ? "Creating..."
             : "Create Server Wallet"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/solana-wallets/components/create-solana-wallet.client.tsx

@@ -20,7 +20,6 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { createSolanaAccount } from "../lib/vault.client";
 
 export function CreateSolanaWallet(props: {
-  managementAccessToken: string | undefined;
   project: Project;
   teamSlug: string;
   disabled?: boolean;
@@ -29,14 +28,18 @@ export function CreateSolanaWallet(props: {
   const [label, setLabel] = useState("");
   const router = useDashboardRouter();
 
+  const managementAccessToken =
+    props.project.services?.find((service) => service.name === "engineCloud")
+      ?.managementAccessToken ?? undefined;
+
   const createMutation = useMutation({
     mutationFn: async () => {
-      if (!props.managementAccessToken) {
+      if (!managementAccessToken) {
         throw new Error("No management access token");
       }
 
       const result = await createSolanaAccount({
-        managementAccessToken: props.managementAccessToken,
+        managementAccessToken: managementAccessToken,
         label: label.trim(),
         projectId: props.project.id,
         teamId: props.project.teamId,
@@ -67,8 +70,8 @@ export function CreateSolanaWallet(props: {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button
-          variant="default"
-          className="gap-2 rounded-full bg-foreground hover:bg-foreground/90"
+          variant="outline"
+          className="gap-1.5 rounded-full bg-background text-foreground"
           disabled={props.disabled}
         >
           <PlusIcon className="size-4" />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx

@@ -87,6 +87,7 @@ const authMethodsToPickFrom: InAppWalletAuth[] = [
   "line",
   "x",
   "tiktok",
+  "epic",
   "coinbase",
   "farcaster",
   "telegram",

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

@@ -193,7 +193,6 @@ export default async function Page(props: {
                 evmTotalPages={Math.ceil(eoas.data.totalRecords / pageSize)}
                 evmTotalRecords={eoas.data.totalRecords}
                 evmWallets={eoas.data.items as Wallet[]}
-                managementAccessToken={managementAccessToken ?? undefined}
                 project={project}
                 solanaCurrentPage={solanCurrentPage}
                 solanaTotalPages={Math.ceil(
@@ -203,6 +202,7 @@ export default async function Page(props: {
                 solanaWallets={solanaAccounts.data.items}
                 teamSlug={params.team_slug}
                 solanaPermissionError={isSolanaPermissionError || false}
+                authToken={authToken}
               />
             )}
           </div>

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

@@ -1,6 +1,13 @@
+import type { Format } from "@number-flow/react";
 import { cn } from "@workspace/ui/lib/utils";
+import Image, { type StaticImageData } from "next/image";
 import type { BuyAndSwapEmbedProps } from "@/components/blocks/BuyAndSwapEmbed";
 import { FaqAccordion } from "@/components/blocks/faq-section";
+import ChainsImage from "../assets/chains.png";
+import RoutesImage from "../assets/routes.png";
+import TokensImage from "../assets/tokens.png";
+import { bridgeStats } from "../data";
+import { AnimatedNumbers } from "./client/animated-numbers";
 import { UniversalBridgeEmbed } from "./client/UniversalBridgeEmbed";
 import { BridgePageHeader } from "./header";
 
@@ -13,7 +20,7 @@ export function BridgePageUI(props: {
     <div className="grow flex flex-col">
       <BridgePageHeader />
 
-      <div className="flex grow items-center justify-center px-4 relative pt-12 pb-20 lg:py-28 min-h-[calc(100dvh-60px)]">
+      <div className="flex grow items-center justify-center px-4 relative pt-12 pb-20 lg:py-28 min-h-[calc(100dvh-60px)] overflow-hidden">
         <DotsBackgroundPattern />
         <UniversalBridgeEmbed buyTab={props.buyTab} swapTab={props.swapTab} />
       </div>
@@ -35,24 +42,58 @@ function HeadingSection(props: { title: React.ReactNode }) {
       <div className="mb-3 lg:mb-6">{props.title}</div>
 
       <p className="text-muted-foreground text-sm text-pretty text-center lg:text-lg mb-6 lg:mb-8">
-        Seamlessly move your assets across 85+ chains with the best rates and
-        fastest execution
+        Seamlessly move your assets across {bridgeStats.supportedChains} chains
+        with the best rates and fastest execution
       </p>
 
-      <div className="flex flex-col lg:flex-row gap-3 lg:gap-2 items-center justify-center">
-        <DataPill>85+ Chains Supported</DataPill>
-        <DataPill>4500+ Tokens Supported</DataPill>
-        <DataPill>9+ Million Routes Available</DataPill>
+      <div className="flex gap-3 items-center lg:justify-center flex-wrap">
+        <DataSquare data={90} label="Chains Supported" src={ChainsImage} />
+        <DataSquare
+          data={6700}
+          label="Tokens Supported"
+          src={TokensImage}
+          format={{ notation: "compact" }}
+        />
+        <DataSquare
+          data={14000000}
+          format={{ notation: "compact" }}
+          label="Routes Available"
+          src={RoutesImage}
+        />
       </div>
     </div>
   );
 }
 
-function DataPill(props: { children: React.ReactNode }) {
+function DataSquare(props: {
+  data: number;
+  label: string;
+  src: StaticImageData;
+  format?: Format;
+  imageClassName?: string;
+}) {
   return (
-    <p className="bg-card flex items-center text-xs lg:text-sm gap-1.5 text-foreground border rounded-full px-8 lg:px-3 py-1.5 hover:text-foreground transition-colors duration-300">
-      {props.children}
-    </p>
+    <div className="py-2 lg:py-0 size-full lg:size-[220px] rounded-xl border hover:bg-card bg-card/50 relative shrink-0 overflow-hidden">
+      <div className="p-4">
+        <div className="flex items-center gap-1 text-3xl lg:text-5xl font-medium tracking-tight font-mono mb-1 h-[45px] lg:h-[56px]">
+          <AnimatedNumbers
+            value={props.data}
+            format={props.format}
+            suffix="+"
+          />
+        </div>
+        <p className="text-sm text-foreground">{props.label}</p>
+      </div>
+      <Image
+        draggable={false}
+        src={props.src}
+        className={cn(
+          "object-cover h-full lg:h-auto absolute right-0 top-0 bottom-0 left-1/2 lg:left-0 lg:top-auto invert dark:invert-0 opacity-50 lg:opacity-100",
+          props.imageClassName,
+        )}
+        alt=""
+      />
+    </div>
   );
 }
 

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

@@ -15,6 +15,7 @@ export const bridgeWallets = [
   createWallet("me.rainbow"),
   createWallet("io.rabby"),
   createWallet("io.zerion.wallet"),
+  createWallet("com.okex.wallet"),
 ];
 
 export function UniversalBridgeEmbed(props: {

apps/dashboard/src/app/bridge/components/client/animated-numbers.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import NumberFlow, { type Format } from "@number-flow/react";
+import { useLayoutEffect, useRef, useState } from "react";
+
+export function AnimatedNumbers(props: {
+  value: number;
+  format?: Format;
+  suffix?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [value, setValue] = useState(props.value);
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      // when the div becomes visible, set the value to the props value
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setValue(props.value);
+          } else {
+            setValue(0);
+          }
+        });
+      });
+      observer.observe(ref.current);
+      return () => observer.disconnect();
+    }
+  }, [props.value]);
+
+  return (
+    <div ref={ref}>
+      <NumberFlow
+        willChange
+        value={value}
+        format={props.format}
+        suffix={props.suffix}
+      />
+    </div>
+  );
+}

apps/dashboard/src/app/bridge/data.ts

@@ -0,0 +1,5 @@
+export const bridgeStats = {
+  supportedChains: "90+",
+  supportedTokens: "6700+",
+  supportedRoutes: "14M+",
+};

apps/dashboard/src/app/bridge/exchange/[token-pair]/page.tsx

@@ -5,6 +5,7 @@ import type { ChainMetadata } from "thirdweb/chains";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { fetchChain } from "@/utils/fetchChain";
 import { BridgePageUI } from "../../components/bridge-page";
+import { bridgeStats } from "../../data";
 import { generateTokenPairSlugs, getTokenPairData } from "./slug-map";
 
 type Params = {
@@ -35,8 +36,7 @@ export async function generateMetadata(
   }
 
   const title = getTitle(tokenMetadata);
-  const description =
-    "Bridge and swap 4500+ tokens across 85+ chains (Ethereum, Base, Optimism, Arbitrum, BNB & more). Best-price routing with near-instant finality";
+  const description = `Bridge and swap ${bridgeStats.supportedTokens} tokens across ${bridgeStats.supportedChains} chains (Ethereum, Base, Optimism, Arbitrum, BNB & more). Best-price routing with near-instant finality`;
 
   const result: Metadata = {
     title,

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

@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
+import { isAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { BridgePageUI } from "./components/bridge-page";
+import { bridgeStats } from "./data";
 
-const title = "thirdweb Bridge: Buy, Bridge & Swap Crypto on 85+ Chains";
-const description =
-  "Bridge and swap 4500+ tokens across 85+ chains (Ethereum, Base, Optimism, Arbitrum, BNB & more). Best-price routing with near-instant finality";
+const title = `thirdweb Bridge: Buy, Bridge & Swap Crypto on ${bridgeStats.supportedChains} Chains`;
+const description = `Bridge and swap ${bridgeStats.supportedTokens} tokens across ${bridgeStats.supportedChains} chains (Ethereum, Base, Optimism, Arbitrum, BNB & more). Best-price routing with near-instant finality`;
 
 export const metadata: Metadata = {
   description,
@@ -14,11 +15,50 @@ export const metadata: Metadata = {
   title,
 };
 
-export default function Page() {
+type SearchParams = {
+  [key: string]: string | string[] | undefined;
+};
+
+export default async function Page(props: {
+  searchParams: Promise<SearchParams>;
+}) {
+  const searchParams = await props.searchParams;
+
+  const onlyAddress = (v: string) => (isAddress(v) ? v : undefined);
+  const onlyNumber = (v: string) =>
+    Number.isNaN(Number(v)) ? undefined : Number(v);
+
+  // output is buy, input is sell
+  const sellChain = parse(searchParams.inputChain, onlyNumber);
+  const sellCurrency = parse(searchParams.inputCurrency, onlyAddress);
+
+  const buyChain = parse(searchParams.outputChain, onlyNumber);
+  const buyCurrency = parse(searchParams.outputCurrency, onlyAddress);
+
   return (
     <BridgePageUI
-      buyTab={undefined}
-      swapTab={undefined}
+      buyTab={{
+        buyToken: buyChain
+          ? {
+              chainId: buyChain,
+              tokenAddress: buyCurrency || NATIVE_TOKEN_ADDRESS,
+            }
+          : undefined,
+      }}
+      swapTab={{
+        sellToken: sellChain
+          ? {
+              chainId: sellChain,
+              tokenAddress: sellCurrency || NATIVE_TOKEN_ADDRESS,
+            }
+          : undefined,
+        buyToken: buyChain
+          ? {
+              chainId: buyChain,
+              tokenAddress: buyCurrency || NATIVE_TOKEN_ADDRESS,
+            }
+          : undefined,
+      }}
       title={
         <h1 className="text-3xl md:text-6xl font-semibold tracking-tighter text-balance text-center">
           Bridge and Swap tokens <br className="max-sm:hidden" /> across any
@@ -28,3 +68,13 @@ export default function Page() {
     />
   );
 }
+
+function parse<T>(
+  value: string | string[] | undefined,
+  fn: (value: string) => T | undefined,
+): T | undefined {
+  if (typeof value === "string") {
+    return fn(value);
+  }
+  return undefined;
+}

apps/dashboard/src/app/login/LoginPage.tsx

@@ -49,6 +49,7 @@ const loginOptions = [
   createWallet("io.rabby"),
   createWallet("me.rainbow"),
   createWallet("io.zerion.wallet"),
+  createWallet("com.okex.wallet"),
 ];
 
 const inAppWalletLoginOptions = [

apps/dashboard/src/app/pay/[id]/header.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { Img } from "@workspace/ui/components/img";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { ClientOnly } from "@/components/blocks/client-only";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
+import { payAppThirdwebClient } from "../constants";
+
+export function PayIdPageHeader(props: {
+  projectName: string;
+  projectIcon: string | undefined;
+}) {
+  return (
+    <div className="border-b border-border/70">
+      <header className="container flex max-w-7xl justify-between py-4">
+        <div className="flex items-center gap-3">
+          {props.projectIcon && (
+            <Img
+              src={
+                resolveSchemeWithErrorHandler({
+                  uri: props.projectIcon,
+                  client: payAppThirdwebClient,
+                }) || ""
+              }
+              alt=""
+              className="rounded-full size-6 object-cover"
+            />
+          )}
+
+          <h2 className="text-xl font-semibold tracking-tight">
+            {props.projectName}
+          </h2>
+        </div>
+
+        <div className="flex items-center gap-3 lg:gap-5">
+          <ToggleThemeButton />
+        </div>
+      </header>
+    </div>
+  );
+}
+
+function ToggleThemeButton(props: { className?: string }) {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <ClientOnly
+      ssr={<Skeleton className="size-[36px] rounded-full border bg-accent" />}
+    >
+      <Button
+        aria-label="Toggle theme"
+        className={cn(
+          "h-auto w-auto rounded-full p-2 text-muted-foreground hover:text-foreground",
+          props.className,
+        )}
+        onClick={() => {
+          setTheme(theme === "dark" ? "light" : "dark");
+        }}
+        variant="ghost"
+      >
+        {theme === "light" ? (
+          <SunIcon className="size-5 " />
+        ) : (
+          <MoonIcon className="size-5 " />
+        )}
+      </Button>
+    </ClientOnly>
+  );
+}

apps/dashboard/src/app/pay/[id]/page.tsx

@@ -1,21 +1,16 @@
-import { ShieldCheckIcon } from "lucide-react";
+import { cn } from "@workspace/ui/lib/utils";
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
-import { Bridge, defineChain, toTokens } from "thirdweb";
-import { getChainMetadata } from "thirdweb/chains";
-import { shortenAddress } from "thirdweb/utils";
+import { Bridge } from "thirdweb";
 import { getPaymentLink } from "@/api/universal-bridge/links";
-import { Badge } from "@/components/ui/badge";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import {
   API_SERVER_SECRET,
   DASHBOARD_THIRDWEB_SECRET_KEY,
 } from "@/constants/server-envs";
 import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
-import { resolveEns } from "@/lib/ens";
-import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
 import { PayPageWidget } from "../components/client/PayPageWidget.client";
-import { payAppThirdwebClient } from "../constants";
+import { PayIdPageHeader } from "./header";
 
 const title = "thirdweb Pay";
 const description = "Fast, secure, and simple payments.";
@@ -54,26 +49,10 @@ export default async function PayPage({
     tokenAddress: paymentLink.destinationToken.address,
   });
 
-  const chainPromise = getChainMetadata(
-    // eslint-disable-next-line no-restricted-syntax
-    defineChain(Number(paymentLink.destinationToken.chainId)),
-  );
-
-  const recipientPromise = resolveEns(
-    paymentLink.receiver,
-    getConfiguredThirdwebClient({
-      secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-      teamId: undefined,
-    }),
-  );
-
-  const [tokens, projectMetadata, chain, recipientEnsOrAddress] =
-    await Promise.all([
-      tokensPromise,
-      projectMetadataPromise,
-      chainPromise,
-      recipientPromise,
-    ]);
+  const [tokens, projectMetadata] = await Promise.all([
+    tokensPromise,
+    projectMetadataPromise,
+  ]);
 
   const token = tokens[0];
   if (!token) {
@@ -81,122 +60,20 @@ export default async function PayPage({
   }
 
   return (
-    <ThemeProvider
-      forcedTheme={theme === "light" ? "light" : "dark"}
-      attribute="class"
-      disableTransitionOnChange
-      enableSystem={false}
-    >
-      <div className="flex z-10 flex-col lg:flex-row h-full w-full">
-        <header className="min-w-full lg:min-w-[500px] border-b lg:border-r lg:h-full bg-card flex flex-col gap-4 items-start p-4 lg:p-8">
-          <div>
-            <div className="flex flex-row items-center justify-start gap-4">
-              {projectMetadata.image && (
-                <img
-                  src={
-                    resolveSchemeWithErrorHandler({
-                      uri: projectMetadata.image,
-                      client: payAppThirdwebClient,
-                    }) || ""
-                  }
-                  alt={projectMetadata.name}
-                  width={25}
-                  height={25}
-                  className="rounded-full overflow-hidden"
-                />
-              )}
-              <h2 className="text-xl font-bold">{projectMetadata.name}</h2>
-            </div>
-            {projectMetadata.description && (
-              <p className="mt-2 text-sm text-muted-foreground">
-                {projectMetadata.description}
-              </p>
-            )}
-          </div>
+    <div className="relative flex flex-col min-h-dvh w-full">
+      <ThemeProvider
+        defaultTheme={theme === "light" ? "light" : "dark"}
+        attribute="class"
+        disableTransitionOnChange
+        enableSystem={false}
+      >
+        <PayIdPageHeader
+          projectIcon={projectMetadata.image || undefined}
+          projectName={projectMetadata.name}
+        />
 
-          <div className="hidden lg:block my-4 w-full">
-            {paymentLink.amount && (
-              <div className="flex flex-col gap-1 w-full my-4">
-                <span className="text-muted-foreground text-xs">Details</span>
-                <div className="font-medium flex-row flex justify-between items-center w-full">
-                  <div className="flex flex-row items-center gap-2">
-                    {token.iconUri && (
-                      <img
-                        src={resolveSchemeWithErrorHandler({
-                          uri: token.iconUri,
-                          client: getConfiguredThirdwebClient({
-                            secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-                            teamId: undefined,
-                          }),
-                        })}
-                        alt={token.name}
-                        width={25}
-                        height={25}
-                        className="size-5 rounded-full overflow-hidden"
-                      />
-                    )}
-                    {toTokens(BigInt(paymentLink.amount), token.decimals)}{" "}
-                    {token.symbol}
-                  </div>
-                  {token.prices.USD && (
-                    <span>
-                      $
-                      {(
-                        Number(token.prices.USD) *
-                        Number(
-                          toTokens(BigInt(paymentLink.amount), token.decimals),
-                        )
-                      ).toFixed(2)}
-                    </span>
-                  )}
-                </div>
-              </div>
-            )}
-            {chain && (
-              <div className="flex flex-col gap-1 w-full my-4">
-                <span className="text-muted-foreground text-xs">Network</span>
-                <div className="font-medium flex-row flex justify-between items-center w-full">
-                  <div className="flex flex-row items-center gap-2">
-                    {chain.icon?.url && (
-                      <img
-                        src={resolveSchemeWithErrorHandler({
-                          uri: chain.icon.url,
-                          client: getConfiguredThirdwebClient({
-                            secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-                            teamId: undefined,
-                          }),
-                        })}
-                        alt={chain.name}
-                        width={chain.icon.width}
-                        height={chain.icon.height}
-                        className="size-5 rounded-full overflow-hidden"
-                      />
-                    )}
-                    {chain.name}
-                  </div>
-                </div>
-              </div>
-            )}
-            {recipientEnsOrAddress.ensName ||
-              (recipientEnsOrAddress.address && (
-                <div className="flex flex-col gap-1 w-full my-4">
-                  <span className="text-muted-foreground text-xs">Seller</span>
-                  <div className="font-medium flex-row flex justify-between items-center w-full">
-                    {recipientEnsOrAddress.ensName ??
-                      shortenAddress(recipientEnsOrAddress.address)}
-                  </div>
-                </div>
-              ))}
-          </div>
-
-          <div className="mt-auto hidden lg:block">
-            <Badge className="flex items-center gap-1.5 bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800">
-              <ShieldCheckIcon className="size-3" />
-              Secured by thirdweb
-            </Badge>
-          </div>
-        </header>
-        <main className="flex justify-center p-12 w-full items-center">
+        <main className="flex justify-center py-12 w-full items-center grow overflow-hidden relative">
+          <DotsBackgroundPattern />
           <PayPageWidget
             amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
             chainId={Number(paymentLink.destinationToken.chainId)}
@@ -210,8 +87,8 @@ export default async function PayPage({
             token={token}
           />
         </main>
-      </div>
-    </ThemeProvider>
+      </ThemeProvider>
+    </div>
   );
 }
 
@@ -228,7 +105,24 @@ async function getProjectMetadata(clientId: string) {
   }
 
   const { data } = (await response.json()) as {
-    data: { name: string; image: string | null; description: string | null };
+    data: { name: string; image: string | null };
   };
   return data;
 }
+
+function DotsBackgroundPattern(props: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute -inset-x-36 -inset-y-24 text-foreground/20 dark:text-muted-foreground/15 hidden lg:block",
+        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/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { cn } from "@workspace/ui/lib/utils";
 import { payAppThirdwebClient } from "app/pay/constants";
 import { useTheme } from "next-themes";
 import { createThirdwebClient, NATIVE_TOKEN_ADDRESS, toTokens } from "thirdweb";
@@ -63,7 +64,12 @@ export function PayPageWidget({
         client={
           clientId ? createThirdwebClient({ clientId }) : payAppThirdwebClient
         }
-        image={image}
+        className={cn(
+          "shadow-xl",
+          !image &&
+            "[&_.tw-header-image]:invert dark:[&_.tw-header-image]:invert-0",
+        )}
+        image={image || "/assets/pay/general-pay.png"}
         name={name}
         onSuccess={() => {
           reportPaymentLinkBuySuccessful();

apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx

@@ -1,399 +0,0 @@
-"use client";
-
-import { payAppThirdwebClient } from "app/pay/constants";
-import { ChevronDownIcon, CreditCardIcon } from "lucide-react";
-import { useCallback, useId, useMemo, useState } from "react";
-import { toast } from "sonner";
-import {
-  createThirdwebClient,
-  defineChain,
-  getContract,
-  type ThirdwebClient,
-  toUnits,
-} from "thirdweb";
-import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
-import { resolveScheme, upload } from "thirdweb/storage";
-import { FileInput } from "@/components/blocks/FileInput";
-import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { TokenSelector } from "@/components/blocks/TokenSelector";
-import { Button } from "@/components/ui/button";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { resolveEns } from "@/lib/ens";
-import { cn } from "@/lib/utils";
-
-export function PaymentLinkForm() {
-  const [chainId, setChainId] = useState<number>();
-  const [recipientAddress, setRecipientAddress] = useState("");
-  // TODO - clean this up later
-  const [tokenAddressWithChain, setTokenAddressWithChain] = useState("");
-  const [amount, setAmount] = useState("");
-  const [title, setTitle] = useState("");
-  const [image, setImage] = useState<File | null>(null);
-  const [imageUri, setImageUri] = useState<string>("");
-  const [uploadingImage, setUploadingImage] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [showAdvanced, setShowAdvanced] = useState(false);
-  const [paymentUrl, setPaymentUrl] = useState<string>("");
-
-  const isFormComplete = useMemo(() => {
-    return chainId && recipientAddress && tokenAddressWithChain && amount;
-  }, [chainId, recipientAddress, tokenAddressWithChain, amount]);
-
-  const handleImageUpload = useCallback(async (file: File) => {
-    try {
-      setImage(file);
-      setUploadingImage(true);
-
-      const uploadClient = createThirdwebClient({
-        clientId: "7ae789153cf9ecde8f35649f2d8a4333",
-      });
-      const uri = await upload({
-        client: uploadClient,
-        files: [file],
-      });
-
-      // eslint-disable-next-line no-restricted-syntax
-      const resolvedUrl = resolveScheme({
-        client: uploadClient,
-        uri,
-      });
-
-      setImageUri(resolvedUrl);
-      toast.success("Image uploaded successfully");
-    } catch (error) {
-      console.error("Error uploading image:", error);
-      toast.error("Failed to upload image");
-      setImage(null);
-    } finally {
-      setUploadingImage(false);
-    }
-  }, []);
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault();
-      setIsLoading(true);
-
-      try {
-        if (
-          !chainId ||
-          !recipientAddress ||
-          !tokenAddressWithChain ||
-          !amount
-        ) {
-          throw new Error("All fields are required");
-        }
-
-        const inputs = await parseInputs(
-          payAppThirdwebClient,
-          chainId,
-          tokenAddressWithChain,
-          recipientAddress,
-          amount,
-        );
-
-        // Build payment URL
-        const params = new URLSearchParams({
-          amount: inputs.amount.toString(),
-          chainId: inputs.chainId.toString(),
-          clientId: payAppThirdwebClient.clientId,
-          recipientAddress: inputs.recipientAddress,
-          tokenAddress: inputs.tokenAddress,
-        });
-
-        // Add title as name parameter if provided
-        if (title) {
-          params.set("name", title);
-        }
-
-        // Add image URI if available
-        if (imageUri) {
-          params.set("image", imageUri);
-        }
-
-        const url = `${window.location.origin}/pay?${params.toString()}`;
-        setPaymentUrl(url);
-        toast.success("Payment created!");
-      } catch (err) {
-        toast.error(err instanceof Error ? err.message : "An error occurred");
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [amount, chainId, imageUri, recipientAddress, title, tokenAddressWithChain],
-  );
-
-  const handlePreview = useCallback(async () => {
-    if (!chainId || !recipientAddress || !tokenAddressWithChain || !amount) {
-      toast.error("Please fill in all fields first");
-      return;
-    }
-
-    try {
-      const inputs = await parseInputs(
-        payAppThirdwebClient,
-        chainId,
-        tokenAddressWithChain,
-        recipientAddress,
-        amount,
-      );
-
-      const params = new URLSearchParams({
-        amount: inputs.amount.toString(),
-        chainId: inputs.chainId.toString(),
-        clientId: payAppThirdwebClient.clientId,
-        recipientAddress: inputs.recipientAddress,
-        tokenAddress: inputs.tokenAddress,
-      });
-
-      // Add title as name parameter if provided
-      if (title) {
-        params.set("name", title);
-      }
-
-      // Add image URI if available
-      if (imageUri) {
-        params.set("image", imageUri);
-      }
-
-      window.open(`/pay?${params.toString()}`, "_blank");
-    } catch (err) {
-      toast.error(err instanceof Error ? err.message : "An error occurred");
-    }
-  }, [
-    amount,
-    chainId,
-    imageUri,
-    recipientAddress,
-    title,
-    tokenAddressWithChain,
-  ]);
-
-  const [selectedChainId, selectedTokenAddress] = tokenAddressWithChain
-    ? tokenAddressWithChain.split(":")
-    : [];
-
-  const recipientId = useId();
-  const amountId = useId();
-  const titleId = useId();
-
-  return (
-    <Card className="mx-auto w-full max-w-[500px]">
-      <CardHeader>
-        <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-2">
-          <div className="rounded-lg border border-muted p-1.5 sm:p-2">
-            <CreditCardIcon className="size-5 sm:size-6" />
-          </div>
-          <CardTitle className="text-center sm:text-left">
-            Create a Payment
-          </CardTitle>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <form className="space-y-6" onSubmit={handleSubmit}>
-          <div className="space-y-2">
-            <Label className="font-medium text-sm">Network</Label>
-            <SingleNetworkSelector
-              chainId={chainId}
-              className="w-full"
-              client={payAppThirdwebClient}
-              disableTestnets
-              onChange={setChainId}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label className="font-medium text-sm">Token</Label>
-            <TokenSelector
-              addNativeTokenIfMissing={false}
-              chainId={chainId ?? undefined}
-              className="w-full"
-              client={payAppThirdwebClient}
-              disabled={!chainId}
-              enabled={!!chainId}
-              onChange={(value) => {
-                setTokenAddressWithChain(`${value.chainId}:${value.address}`);
-              }}
-              selectedToken={
-                selectedChainId && selectedTokenAddress
-                  ? {
-                      address: selectedTokenAddress,
-                      chainId: Number(selectedChainId),
-                    }
-                  : undefined
-              }
-              showCheck={false}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label className="font-medium text-sm" htmlFor={recipientId}>
-              Recipient Address
-            </Label>
-            <Input
-              className="w-full"
-              id={recipientId}
-              onChange={(e) => setRecipientAddress(e.target.value)}
-              placeholder="Address or ENS"
-              required
-              value={recipientAddress}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label className="font-medium text-sm" htmlFor={amountId}>
-              Amount
-            </Label>
-            <Input
-              className="w-full"
-              id={amountId}
-              onChange={(e) => setAmount(e.target.value)}
-              placeholder="0.0"
-              required
-              step="any"
-              type="number"
-              value={amount}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Button
-              className={cn(
-                "flex w-full items-center justify-between px-0 text-muted-foreground hover:bg-transparent",
-              )}
-              onClick={() => setShowAdvanced(!showAdvanced)}
-              type="button"
-              variant="ghost"
-            >
-              <span>Advanced Options</span>
-              <ChevronDownIcon
-                className={`size-4 transition-transform duration-200 ease-in-out ${
-                  showAdvanced ? "rotate-180" : ""
-                }`}
-              />
-            </Button>
-
-            <div
-              className={cn(
-                "grid transition-all duration-200 ease-in-out",
-                showAdvanced
-                  ? "grid-rows-[1fr] opacity-100"
-                  : "grid-rows-[0fr] opacity-0",
-              )}
-            >
-              <div className={cn(showAdvanced ? "" : "overflow-hidden")}>
-                <div className="space-y-3">
-                  <div className="space-y-2">
-                    <Label className="font-medium text-sm" htmlFor={titleId}>
-                      Title
-                    </Label>
-                    <Input
-                      className="w-full"
-                      id={titleId}
-                      onChange={(e) => setTitle(e.target.value)}
-                      placeholder="Payment for..."
-                      value={title}
-                    />
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label className="font-medium text-sm">Image</Label>
-                    <div className="w-full">
-                      <FileInput
-                        accept={{ "image/*": [] }}
-                        className="!rounded-md aspect-square h-24 w-full"
-                        client={payAppThirdwebClient}
-                        helperText="image"
-                        isDisabled={uploadingImage}
-                        isDisabledText="Uploading..."
-                        selectOrUpload="Upload"
-                        setValue={handleImageUpload}
-                        value={image || imageUri}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-col space-y-4">
-            {paymentUrl && (
-              <CopyTextButton
-                className="w-full justify-between truncate bg-background px-3 py-2"
-                copyIconPosition="right"
-                textToCopy={paymentUrl}
-                textToShow={paymentUrl}
-                tooltip="Copy Payment Link"
-              />
-            )}
-
-            <div className="flex gap-2">
-              <Button
-                className="flex-1"
-                disabled={isLoading || !isFormComplete}
-                onClick={handlePreview}
-                type="button"
-                variant="outline"
-              >
-                Preview
-              </Button>
-              <Button
-                className="flex-1"
-                disabled={isLoading || !isFormComplete}
-                type="submit"
-              >
-                {isLoading ? "Creating..." : "Create"}
-              </Button>
-            </div>
-          </div>
-        </form>
-      </CardContent>
-    </Card>
-  );
-}
-
-async function parseInputs(
-  client: ThirdwebClient,
-  chainId: number,
-  tokenAddressWithChain: string,
-  recipientAddressOrEns: string,
-  decimalAmount: string,
-) {
-  const [_chainId, tokenAddress] = tokenAddressWithChain.split(":");
-  if (Number(_chainId) !== chainId) {
-    throw new Error("Chain ID does not match token chain");
-  }
-  if (!tokenAddress) {
-    throw new Error("Missing token address");
-  }
-
-  const ensPromise = resolveEns(recipientAddressOrEns, client);
-  const currencyPromise = getCurrencyMetadata({
-    contract: getContract({
-      address: tokenAddress,
-      // eslint-disable-next-line no-restricted-syntax
-      chain: defineChain(chainId),
-      client,
-    }),
-  });
-  const [ens, currencyMetadata] = await Promise.all([
-    ensPromise,
-    currencyPromise,
-  ]);
-  if (!ens.address) {
-    throw new Error("Invalid recipient address");
-  }
-
-  const amountInWei = toUnits(decimalAmount, currencyMetadata.decimals);
-
-  return {
-    amount: amountInWei,
-    chainId,
-    recipientAddress: ens.address,
-    tokenAddress,
-  };
-}

apps/dashboard/src/app/pay/components/types.ts

@@ -1,11 +0,0 @@
-export type PayParams = {
-  chainId: string;
-  recipientAddress: string;
-  tokenAddress: string;
-  amount: string;
-  name?: string;
-  image?: string;
-  theme?: "light" | "dark";
-  redirectUri?: string;
-  clientId?: string;
-};

apps/dashboard/src/app/pay/landing/header.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { MoonIcon, SunIcon } from "lucide-react";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+import { ClientOnly } from "@/components/blocks/client-only";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { ThirdwebMiniLogo } from "../../(app)/components/ThirdwebMiniLogo";
+
+export function PayLandingHeader(props: { containerClassName?: string }) {
+  return (
+    <div className="border-b border-border/70">
+      <header
+        className={cn(
+          "container flex max-w-7xl justify-between py-4",
+          props.containerClassName,
+        )}
+      >
+        <div className="flex items-center gap-6">
+          <Link className="flex items-center gap-2" href="/home">
+            <ThirdwebMiniLogo className="h-5" />
+            <span className="font-bold text-2xl tracking-tight">thirdweb</span>
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-3 lg:gap-5">
+          <ToggleThemeButton />
+        </div>
+      </header>
+    </div>
+  );
+}
+
+function ToggleThemeButton(props: { className?: string }) {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <ClientOnly
+      ssr={<Skeleton className="size-[36px] rounded-full border bg-accent" />}
+    >
+      <Button
+        aria-label="Toggle theme"
+        className={cn(
+          "h-auto w-auto rounded-full p-2 text-muted-foreground hover:text-foreground",
+          props.className,
+        )}
+        onClick={() => {
+          setTheme(theme === "dark" ? "light" : "dark");
+        }}
+        variant="ghost"
+      >
+        {theme === "light" ? (
+          <SunIcon className="size-5 " />
+        ) : (
+          <MoonIcon className="size-5 " />
+        )}
+      </Button>
+    </ClientOnly>
+  );
+}

apps/dashboard/src/app/pay/landing/styled-buy-widget.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { BuyWidget, type BuyWidgetProps } from "thirdweb/react";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { getSDKTheme } from "@/utils/sdk-component-theme";
+import { payLandingWallets } from "./wallets";
+
+const client = getClientThirdwebClient();
+
+export function StyledBuyWidget(
+  props: Omit<
+    BuyWidgetProps,
+    "client" | "theme" | "onSuccess" | "onError" | "onCancel"
+  > & {
+    successUrl?: string;
+  },
+) {
+  const { theme } = useTheme();
+
+  return (
+    <BuyWidget
+      {...props}
+      theme={getSDKTheme(theme === "light" ? "light" : "dark")}
+      client={client}
+      className="shadow-xl"
+      connectOptions={{
+        wallets: payLandingWallets,
+      }}
+      onSuccess={() => {
+        if (props.successUrl) {
+          try {
+            const url = new URL(props.successUrl);
+            url.searchParams.set("success", "true");
+            window.location.href = url.toString();
+          } catch (error) {
+            // Log URL construction error for debugging
+            console.error(
+              "Failed to construct redirect URL:",
+              props.successUrl,
+              error,
+            );
+          }
+        }
+      }}
+    />
+  );
+}

apps/dashboard/src/app/pay/landing/wallets.ts

@@ -0,0 +1,13 @@
+import { createWallet } from "thirdweb/wallets";
+import { appMetadata } from "@/constants/connect";
+
+export const payLandingWallets = [
+  createWallet("io.metamask"),
+  createWallet("com.coinbase.wallet", {
+    appMetadata,
+  }),
+  createWallet("me.rainbow"),
+  createWallet("io.rabby"),
+  createWallet("io.zerion.wallet"),
+  createWallet("com.okex.wallet"),
+];

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

@@ -18,15 +18,11 @@ export default async function PayLayout({
     <html lang="en" suppressHydrationWarning>
       <body
         className={cn(
-          "h-screen w-screen bg-background font-sans antialiased",
+          "min-h-dvh w-screen bg-background font-sans antialiased flex flex-col",
           fontSans.variable,
         )}
       >
-        <PayProviders>
-          <div className="relative mx-auto flex h-full w-full items-center justify-center overflow-x-hidden overflow-y-scroll">
-            {children}
-          </div>
-        </PayProviders>
+        <PayProviders>{children}</PayProviders>
       </body>
     </html>
   );

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

@@ -1,12 +1,9 @@
+import { cn } from "@workspace/ui/lib/utils";
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
-import { createThirdwebClient, defineChain, getContract } from "thirdweb";
-import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
-import { checksumAddress } from "thirdweb/utils";
-import { PaymentLinkForm } from "./components/client/PaymentLinkForm.client";
-import { PayPageWidget } from "./components/client/PayPageWidget.client";
-import type { PayParams } from "./components/types";
-import { payAppThirdwebClient } from "./constants";
+import { defineChain, isAddress } from "thirdweb";
+import { PayLandingHeader } from "./landing/header";
+import { StyledBuyWidget } from "./landing/styled-buy-widget";
 
 const title = "thirdweb Payments";
 const description = "Fast, secure, and simple payments.";
@@ -20,97 +17,97 @@ export const metadata: Metadata = {
   title,
 };
 
-export default async function PayPage({
-  searchParams,
-}: {
-  searchParams: Promise<PayParams>;
+type SearchParams = {
+  [key: string]: string | string[] | undefined;
+};
+
+const onlyAddress = (v: string) => (isAddress(v) ? v : undefined);
+const onlyNumber = (v: string) =>
+  Number.isNaN(Number(v)) ? undefined : Number(v);
+
+/**
+ * Validates and normalizes a URL string.
+ * Only allows http: and https: protocols with a valid hostname.
+ * @returns normalized URL string on success, undefined on failure
+ */
+const onlyUrl = (v: string): string | undefined => {
+  try {
+    const url = new URL(v);
+    // Only allow http or https protocols
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      return undefined;
+    }
+    // Ensure hostname is non-empty
+    if (!url.hostname) {
+      return undefined;
+    }
+    // Return normalized URL
+    return url.toString();
+  } catch {
+    // Invalid URL format
+    return undefined;
+  }
+};
+
+export default async function PayPage(props: {
+  searchParams: Promise<SearchParams>;
 }) {
-  const params = await searchParams;
+  const searchParams = await props.searchParams;
 
-  // If no query parameters are provided, show the form
-  if (
-    !params.chainId &&
-    !params.recipientAddress &&
-    !params.tokenAddress &&
-    !params.amount
-  ) {
-    return (
-      <ThemeProvider
-        forcedTheme={params.theme === "light" ? "light" : "dark"}
-        attribute="class"
-        disableTransitionOnChange
-        enableSystem={false}
-      >
-        <PaymentLinkForm />
-      </ThemeProvider>
-    );
-  }
-
-  // Validate query parameters
-  if (Array.isArray(params.chainId)) {
-    throw new Error("A single chainId parameter is required.");
-  }
-  if (Array.isArray(params.recipientAddress)) {
-    throw new Error("A single recipientAddress parameter is required.");
-  }
-  if (Array.isArray(params.tokenAddress)) {
-    throw new Error("A single tokenAddress parameter is required.");
-  }
-  if (Array.isArray(params.amount)) {
-    throw new Error("A single amount parameter is required.");
-  }
-  if (Array.isArray(params.clientId)) {
-    throw new Error("A single clientId parameter is required.");
-  }
-  if (Array.isArray(params.redirectUri)) {
-    throw new Error("A single redirectUri parameter is required.");
-  }
-
-  // Use any provided clientId or use the dashboard client
-  const client =
-    params.clientId && !Array.isArray(params.clientId)
-      ? createThirdwebClient({ clientId: params.clientId })
-      : payAppThirdwebClient;
-
-  const tokenContract = getContract({
-    address: params.tokenAddress,
-    // eslint-disable-next-line no-restricted-syntax
-    chain: defineChain(Number(params.chainId)),
-    client: payAppThirdwebClient,
-  });
-  const {
-    symbol,
-    decimals,
-    name: tokenName,
-  } = await getCurrencyMetadata({
-    contract: tokenContract,
-  });
-  const token = {
-    address: checksumAddress(params.tokenAddress),
-    chainId: Number(params.chainId),
-    decimals,
-    name: tokenName,
-    symbol,
-  };
+  const receiver = parse(searchParams.receiver, onlyAddress);
+  const token = parse(searchParams.token, onlyAddress);
+  const chain = parse(searchParams.chain, onlyNumber);
+  const amount = parse(searchParams.amount, onlyNumber);
+  const successUrl = parse(searchParams.successUrl, onlyUrl);
 
   return (
     <ThemeProvider
-      forcedTheme={params.theme === "light" ? "light" : "dark"}
       attribute="class"
       disableTransitionOnChange
       enableSystem={false}
     >
-      <PayPageWidget
-        amount={BigInt(params.amount)}
-        chainId={Number(params.chainId)}
-        clientId={client.clientId}
-        image={params.image}
-        name={params.name}
-        purchaseData={undefined}
-        recipientAddress={params.recipientAddress}
-        redirectUri={params.redirectUri}
-        token={token}
-      />
+      <div className="flex flex-col grow">
+        <PayLandingHeader />
+        <div className="flex-1 flex items-center justify-center py-20 relative overflow-hidden">
+          <DotsBackgroundPattern />
+          <StyledBuyWidget
+            // eslint-disable-next-line no-restricted-syntax
+            chain={chain ? defineChain(chain) : undefined}
+            tokenAddress={token}
+            receiverAddress={receiver}
+            amount={amount ? amount.toString() : undefined}
+            successUrl={successUrl}
+          />
+        </div>
+      </div>
     </ThemeProvider>
   );
 }
+
+function parse<T>(
+  value: string | string[] | undefined,
+  fn: (value: string) => T | undefined,
+): T | undefined {
+  if (typeof value === "string") {
+    return fn(value);
+  }
+
+  return undefined;
+}
+
+function DotsBackgroundPattern(props: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute -inset-x-36 -inset-y-24 text-foreground/20 dark:text-muted-foreground/20 hidden lg:block",
+        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/playground-web/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@abstract-foundation/agw-react": "^1.6.4",
+    "@abstract-foundation/agw-react": "^1.10.0",
     "@ai-sdk/react": "^2.0.25",
     "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-avatar": "^1.1.10",

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

@@ -18,8 +18,7 @@ export async function GET(request: NextRequest) {
   // const BACKEND_WALLET_ADDRESS = process.env.ENGINE_BACKEND_SMART_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 API_URL = "http://localhost:3030";
+  const API_URL = `https://${process.env.NEXT_PUBLIC_API_URL || "api.thirdweb.com"}`;
 
   const twFacilitator = facilitator({
     baseUrl: `${API_URL}/v1/payments/x402`,
@@ -42,7 +41,7 @@ export async function GET(request: NextRequest) {
 
   const amount = queryParams.get("amount") || "0.01";
   const payTo = queryParams.get("payTo") ?? undefined;
-  const tokenAddress = queryParams.get("tokenAddress") || token.address;
+  const tokenAddress = queryParams.get("tokenAddress");
   const decimals = queryParams.get("decimals") || token.decimals.toString();
   const waitUntil =
     (queryParams.get("waitUntil") as "simulated" | "submitted" | "confirmed") ||
@@ -54,13 +53,15 @@ export async function GET(request: NextRequest) {
     paymentData,
     network: defineChain(Number(chainId)),
     payTo,
-    price: {
-      amount: toUnits(amount, parseInt(decimals)).toString(),
-      asset: {
-        address: tokenAddress as `0x${string}`,
-        decimals: decimals ? parseInt(decimals) : token.decimals,
-      },
-    },
+    price: tokenAddress
+      ? {
+          amount: toUnits(amount, parseInt(decimals)).toString(),
+          asset: {
+            address: tokenAddress as `0x${string}`,
+            decimals: decimals ? parseInt(decimals) : token.decimals,
+          },
+        }
+      : amount,
     routeConfig: {
       description: "Access to paid content",
     },

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

@@ -43,7 +43,6 @@ export function X402RightSection(props: { options: X402PlaygroundOptions }) {
         fetch,
         THIRDWEB_CLIENT,
         activeWallet,
-        BigInt(1 * 10 ** 18),
       );
       const searchParams = new URLSearchParams();
       searchParams.set("chainId", props.options.chain.id.toString());

apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx

@@ -26,7 +26,7 @@ export default function Page() {
       <PageLayout
         icon={PlaneIcon}
         description={description}
-        docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc20/POST/contract/{chain}/{contractAddress}/erc20/mint-batch-to?utm_source=playground"
+        docsLink="https://engine.thirdweb.com/reference"
         title={title}
       >
         <EngineAirdropPreview />

apps/playground-web/src/app/transactions/mint-tokens/page.tsx

@@ -26,7 +26,7 @@ export default function Page() {
       <PageLayout
         icon={StampIcon}
         description={description}
-        docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc1155/POST/contract/{chain}/{contractAddress}/erc1155/mint-to?utm_source=playground"
+        docsLink="https://engine.thirdweb.com/reference"
         title={title}
       >
         <EngineMintPreview />

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

@@ -20,6 +20,7 @@ const allInAppWalletLoginMethods: InAppWalletAuth[] = [
   "line",
   "x",
   "tiktok",
+  "epic",
   "facebook",
   "apple",
   "coinbase",

apps/portal/redirects.mjs

@@ -742,6 +742,14 @@ const paymentRedirects = {
   "/payments/swap": "/bridge/swap",
   "/payments/tokens": "/bridge/tokens",
   "/payments/routes": "/bridge/routes",
+  "/payments/x402": "/x402",
+  "/payments/x402/:path*": "/x402/:path*",
+  "/payments/fund": "/bridge/fund",
+  "/payments/products": "/bridge/products",
+  "/payments/transactions": "/bridge/transactions",
+  "/payments/send": "/bridge/send",
+  "/payments/webhooks": "/bridge/webhooks",
+  "/payments/custom-data": "/bridge/custom-data",
 };
 
 const contractRedirects = {

apps/portal/src/app/Header.tsx

@@ -40,8 +40,8 @@ const links = [
     name: "Contracts",
   },
   {
-    href: "/payments",
-    name: "Payments",
+    href: "/x402",
+    name: "x402",
   },
   {
     href: "/bridge",

apps/portal/src/app/bridge/custom-data/page.mdx

@@ -188,8 +188,8 @@ Any purchase data you provide to a payment will be included on all webhooks, sta
 
 To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:
 
-- [Send a Payment](/payments/send)
-- [Webhooks](/payments/webhooks)
+- [Send a Payment](/bridge/send)
+- [Webhooks](/bridge/webhooks)
 
 ## Explore Full API References
 

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

@@ -74,8 +74,8 @@ The BuyWidget handles the complete payment flow, supporting both crypto and fiat
 
 ## Going Further
 
-- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments
-- [Webhooks](/payments/webhooks) - Get notified when payments complete
+- [Custom Payment Data](/bridge/custom-data) - Attach metadata to payments
+- [Webhooks](/bridge/webhooks) - Get notified when payments complete
 
 ## API Reference
 

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

@@ -97,7 +97,7 @@ const preparedQuote = await Bridge.Buy.prepare({
 
     The prepared quote will contain details about the payment, including the transactions needed to execute it.
 
-    You can execute the included transactions using the wallet of your choice. To learn how to send it using thirdweb Wallets, checkout the [Send a Payment](/payments/send) guide.
+    You can execute the included transactions using the wallet of your choice. To learn how to send it using thirdweb Wallets, checkout the [Send a Payment](/bridge/send) guide.
 
   </TabsContent>
 

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

@@ -77,8 +77,8 @@ The CheckoutWidget handles the complete payment flow, supporting both crypto and
 
 ## Going Further
 
-- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments
-- [Webhooks](/payments/webhooks) - Get notified when payments complete
+- [Custom Payment Data](/bridge/custom-data) - Attach metadata to payments
+- [Webhooks](/bridge/webhooks) - Get notified when payments complete
 
 ## API Reference
 

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

@@ -1,172 +0,0 @@
-import {
-  Callout,
-  OpenSourceCard,
-  createMetadata,
-  InstallTabs,
-  SDKCard,
-  Grid,
-  ArticleIconCard,
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from "@doc";
-import {
-  ReactIcon,
-  TypeScriptIcon,
-  UnityIcon,
-  DotNetIcon,
-  UnrealEngineIcon,
-} from "@/icons";
-import { ExternalLink } from "lucide-react";
-
-export const metadata = createMetadata({
-  image: {
-    title: "Find Routes",
-    icon: "payments",
-  },
-  title: "Find Routes",
-  description: "Find available routes for bridging, swapping, and paying.",
-});
-
-# Find Routes
-
-Use thirdweb's `Bridge.routes` utility to find all routes between tokens.
-
-    ### Get All Routes
-
-    Retrieve all supported routes:
-
-    ```typescript
-    import { Bridge } from "thirdweb";
-
-    const routes = await Bridge.routes({
-      client,
-    });
-    ```
-
-    This returns an array of route objects with information about supported token pairs:
-
-    ```typescript
-    [
-      {
-        destinationToken: {
-          address: "0x12c88a3C30A7AaBC1dd7f2c08a97145F5DCcD830",
-          chainId: 1,
-          decimals: 18,
-          iconUri: "https://assets.coingecko.com/coins/images/37207/standard/G.jpg",
-          name: "G7",
-          symbol: "G7",
-        },
-        originToken: {
-          address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-          chainId: 480,
-          decimals: 18,
-          iconUri: "https://assets.relay.link/icons/1/light.png",
-          name: "Ether",
-          symbol: "ETH",
-        }
-      },
-      // ... more routes
-    ]
-    ```
-
-    ### Filter Routes by Origin
-
-    Get all routes starting from a specific chain and token:
-
-    ```typescript
-    import { Bridge } from "thirdweb";
-
-    // Get all routes starting from mainnet ETH
-    const routes = await Bridge.routes({
-      originChainId: 1,
-      originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-      client,
-    });
-    ```
-
-    ### Filter Routes by Destination
-
-    Find routes that end at a specific destination:
-
-    ```typescript
-    import { Bridge } from "thirdweb";
-
-    // Get all routes ending at USDC on Optimism
-    const routes = await Bridge.routes({
-      destinationChainId: 10,
-      destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
-      client,
-    });
-    ```
-
-    ### Filter Routes by Both Origin and Destination
-
-    Find direct routes between specific token pairs:
-
-    ```typescript
-    import { Bridge } from "thirdweb";
-
-    // Get routes from mainnet ETH to USDC on Optimism
-    const routes = await Bridge.routes({
-      originChainId: 1,
-      originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-      destinationChainId: 10,
-      destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
-      client,
-    });
-    ```
-
-    ### Pagination
-
-    For large result sets, use pagination to retrieve routes in chunks:
-
-    ```typescript
-    import { Bridge } from "thirdweb";
-
-    // Get the first 10 routes starting from mainnet ETH
-    const routes = await Bridge.routes({
-      originChainId: 1,
-      originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-      limit: 10,
-      offset: 0,
-      client,
-    });
-
-    // Get the next 10 routes
-    const nextRoutes = await Bridge.routes({
-      originChainId: 1,
-      originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-      limit: 10,
-      offset: 10,
-      client,
-    });
-    ```
-
-    ### Limit Route Complexity
-
-    Control the maximum number of steps in the returned routes:
-
-    ```typescript
-    import { Bridge } from "thirdweb";
-
-    // Get only direct routes (1 step)
-    const directRoutes = await Bridge.routes({
-      originChainId: 1,
-      originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-      maxSteps: 1,
-      client,
-    });
-    ```
-
-## Going further
-
-To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:
-
-- [Send a Payment](/payments/send)
-- [Get Token Prices](/payments/prices)
-
-## Explore Full API References
-
-- [Bridge.routes](/references/typescript/v5/routes)

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

@@ -52,15 +52,14 @@ client,
 });
 ```
 
-You can execute this quote exactly like a buy. See the [Send a Payment](/payments/send) guide for more details on this process.
+You can execute this quote exactly like a buy. See the [Send a Payment](/bridge/send) guide for more details on this process.
 
 
 ## Going further
 
 To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:
 
-- [Send a Payment](/payments/send)
-- [Get Routes](/payments/routes)
+- [Send a Payment](/bridge/send)
 
 ## Explore Full API References
 

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

@@ -262,9 +262,8 @@ Once this code completes, your payment has been fully executed. Payments normall
 
 ## Going further
 
-- [Sell a Product](/payments/products)
-- [Token Prices](/payments/tokens)
-- [Routes](/payments/routes)
+- [Sell a Product](/bridge/products)
+- [Token Prices](/bridge/tokens)
 
 ## Explore API References
 

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

@@ -16,25 +16,45 @@ export const sidebar: SideBar = {
     {
       isCollapsible: false,
       links: [
-        {
-          href: `${bridgeSlug}/sell`,
-          name: "Sell Tokens",
-        },
         {
           href: `${bridgeSlug}/swap`,
           name: "Swap Tokens",
         },
+        {
+          href: `${bridgeSlug}/bridge-widget-script`,
+          name: "BridgeWidget Script",
+        },
+        {
+          href: `${bridgeSlug}/fund`,
+          name: "Fund Wallets",
+        },
+        {
+          href: `${bridgeSlug}/products`,
+          name: "Sell a Product",
+        },
+        {
+          href: `${bridgeSlug}/transactions`,
+          name: "Pay for Transactions",
+        },
+        {
+          href: `${bridgeSlug}/send`,
+          name: "Send a Payment",
+        },
+        {
+          href: `${bridgeSlug}/sell`,
+          name: "Sell Tokens",
+        },
         {
           href: `${bridgeSlug}/tokens`,
           name: "Get Token Prices",
         },
         {
-          href: `${bridgeSlug}/routes`,
-          name: "Get Routes",
+          href: `${bridgeSlug}/webhooks`,
+          name: "Webhooks",
         },
         {
-          href: `${bridgeSlug}/bridge-widget-script`,
-          name: "BridgeWidget Script",
+          href: `${bridgeSlug}/custom-data`,
+          name: "Custom Data",
         },
       ],
       name: "Guides",

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

@@ -255,23 +255,6 @@ export class SwapManager {
 
     throw new Error("Transaction timeout - please check status manually");
   }
-
-  async getAvailableRoutes(params: {
-    originChainId?: number;
-    originTokenAddress?: string;
-    destinationChainId?: number;
-    destinationTokenAddress?: string;
-    limit?: number;
-  }) {
-    try {
-      return await Bridge.routes({
-        ...params,
-        client: this.client,
-      });
-    } catch (error) {
-      throw new Error(`Failed to get routes: ${error.message}`);
-    }
-  }
 }
 ```
 
@@ -319,92 +302,6 @@ async function swapEthToMatic(amount: string, userAccount: Account) {
 }
 ```
 
-### Advanced Price Comparison
-
-Compare prices across multiple routes to find the best deal:
-
-```typescript
-interface RouteComparison {
-  route: any;
-  quote: SwapQuote;
-  priceImpact: number;
-  gasEstimate: bigint;
-}
-
-export class PriceComparator {
-  private swapManager: SwapManager;
-
-  constructor(swapManager: SwapManager) {
-    this.swapManager = swapManager;
-  }
-
-  async compareRoutes(
-    fromToken: { chainId: number; address: string },
-    amount: bigint,
-    userAddress: string
-  ): Promise<RouteComparison[]> {
-    // Get available routes
-    const routes = await this.swapManager.getAvailableRoutes({
-      originChainId: fromToken.chainId,
-      originTokenAddress: fromToken.address,
-      limit: 10,
-    });
-
-    // Get quotes for each route
-    const comparisons: RouteComparison[] = [];
-
-    for (const route of routes) {
-      try {
-        const quote = await this.swapManager.getQuote({
-          fromChainId: route.originToken.chainId,
-          fromTokenAddress: route.originToken.address,
-          toChainId: route.destinationToken.chainId,
-          toTokenAddress: route.destinationToken.address,
-          amount,
-          userAddress,
-          client: this.swapManager.client,
-        });
-
-        const priceImpact = this.calculatePriceImpact(quote, amount);
-        const gasEstimate = this.estimateGasCosts(quote);
-
-        comparisons.push({
-          route,
-          quote,
-          priceImpact,
-          gasEstimate,
-        });
-      } catch (error) {
-        console.warn(`Failed to get quote for route ${route.originToken.symbol} -> ${route.destinationToken.symbol}:`, error);
-      }
-    }
-
-    // Sort by best output amount
-    return comparisons.sort((a, b) =>
-      Number(b.quote.destinationAmount) - Number(a.quote.destinationAmount)
-    );
-  }
-
-  private calculatePriceImpact(quote: SwapQuote, inputAmount: bigint): number {
-    // Simplified price impact calculation
-    const ratio = Number(quote.destinationAmount) / Number(quote.originAmount);
-    return Math.abs(1 - ratio) * 100; // Percentage
-  }
-
-  private estimateGasCosts(quote: SwapQuote): bigint {
-    // Sum up gas estimates from all transactions
-    return quote.steps.reduce((total, step) => {
-      return total + step.transactions.reduce((stepTotal: bigint, tx: any) => {
-        return stepTotal + (tx.gasLimit || 200000n); // Default estimate
-      }, 0n);
-    }, 0n);
-  }
-}
-```
-
-<Callout variant="info">
-**Gas Optimization Tip:** For frequently traded pairs, consider caching route data to reduce API calls and improve UI responsiveness.
-</Callout>
 
 </TabsContent>
 </Tabs>
@@ -415,20 +312,16 @@ export class PriceComparator {
 - **Cross-chain swaps** - Exchange tokens across 50+ supported chains
 - **Real-time quotes** - Get up-to-date pricing and execution estimates
 - **Route optimization** - Find the best path for any token pair
-- **Price comparison** - Compare multiple routes to maximize output
 - **Status tracking** - Monitor cross-chain transaction progress
 
 
-
 ## Going Further
 
-- [Send a Payment](/payments/send) - Learn about peer-to-peer transfers
-- [Get Routes](/payments/routes) - Explore route discovery APIs
-- [Token Prices](/payments/tokens) - Access real-time token pricing
-- [Webhooks](/payments/webhooks) - Get notified when swaps complete
+- [Send a Payment](/bridge/send) - Learn about peer-to-peer transfers
+- [Token Prices](/bridge/tokens) - Access real-time token pricing
+- [Webhooks](/bridge/webhooks) - Get notified when swaps complete
 
 ## API Reference
 
 - [Bridge.Buy.prepare](/references/typescript/v5/buy/prepare)
-- [Bridge.routes](/references/typescript/v5/routes)
 - [Bridge.status](/references/typescript/v5/status)

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

@@ -59,7 +59,17 @@ This returns token information with current price:
     symbol: "USDC",
     name: "USD Coin",
     iconUri: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
-    priceUsd: 1.00
+    prices: {
+      USD: 1.00,
+      EUR: 0.86,
+      GBP: 0.74,
+      JPY: 148.85,
+      KRW: 1393.14,
+      CNY: 7.18,
+      INR: 86.20,
+      NOK: 10.18,
+      SEK: 9.68,
+    }
   }
 ]
 ```
@@ -118,8 +128,7 @@ const nextTokens = await Bridge.tokens({
 
 To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:
 
-- [Send a Payment](/payments/send)
-- [Get Routes](/payments/routes)
+- [Send a Payment](/bridge/send)
 
 ## Explore Full API References
 

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

@@ -86,8 +86,8 @@ The TransactionWidget handles the complete payment flow, supporting both crypto
 
 ## Going Further
 
-- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments
-- [Webhooks](/payments/webhooks) - Get notified when payments complete
+- [Custom Payment Data](/bridge/custom-data) - Attach metadata to payments
+- [Webhooks](/bridge/webhooks) - Get notified when payments complete
 
 ## API Reference
 

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

@@ -221,9 +221,8 @@ async function verifyWebhook(
 
 To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:
 
-- [Send a Payment](/payments/send)
-- [Find Routes](/payments/routes)
-- [Get Token Prices](/payments/tokens)
+- [Send a Payment](/bridge/send)
+- [Get Token Prices](/bridge/tokens)
 
 ## Explore Full API References
 

apps/portal/src/app/contracts/arbitrum-stylus/minting-modules/page.mdx

@@ -0,0 +1,160 @@
+import { Step, Steps, createMetadata } from "@doc";
+
+export const metadata = createMetadata({
+	title: "Stylus Minting Modules | thirdweb Documentation",
+	description:
+		"Customizable rust modules written for thirdweb's modular contracts",
+	image: {
+		title: "Stylus Minting Modules",
+		icon: "contracts",
+	},
+});
+
+# Stylus Minting Modules
+
+You can now install rust based modules into a solidity based [modular contract](https://github.com/thirdweb-dev/modular-contracts/blob/dev/design-document.md).
+
+This plug-n-play model also allows users to write their own custom minting logic in rust, taking advantage of Stylus' interoperability and gas savings. These modules  work with existing router contracts and modules written in solidity.
+
+## Deploy through dashboard
+
+Deploying a Modular Contract and installing modules is easy through the thirdweb dashboard and ideal when you don't want to modify any code on the contract.
+
+<Steps>
+<Step title="Select Modular Contract for Stylus">
+
+Navigate to the Modular Contracts section on Explore and select any token contract for your project.
+</Step>
+
+<Step title="Deploy Contract">
+Select Arbitrum Sepolia or any other Stylus-supported network, then select Deploy. Once you have deployed one of these contracts, the modules come pre-installed, both solidity and rust ones.
+</Step>
+
+<Step title="Edit Modules">
+If you wish to install a custom module, navigate to modules tab on your contract page. Enter the publisher address and select module from the dropdown, and click install.
+
+You can uninstall a module from the same page.
+
+Here's a list of prebuilt Rust / Stylus specific modules provided by thirdweb:
+- [Mintable ERC20](https://thirdweb.com/0x6453a486d52e0EB6E79Ec4491038E2522a926936/StylusMintableERC20)
+- [Transferable ERC20](https://thirdweb.com/0x6453a486d52e0EB6E79Ec4491038E2522a926936/StylusTransferableERC20)
+- [Mintable ERC721](https://thirdweb.com/0x6453a486d52e0EB6E79Ec4491038E2522a926936/StylusMintableERC721)
+- [Transferable ERC721](https://thirdweb.com/0x6453a486d52e0EB6E79Ec4491038E2522a926936/StylusTransferableERC721)
+- [Mintable ERC1155](https://thirdweb.com/0x6453a486d52e0EB6E79Ec4491038E2522a926936/StylusMintableERC1155)
+- [Transferable ERC1155](https://thirdweb.com/0x6453a486d52e0EB6E79Ec4491038E2522a926936/StylusTransferableERC1155)
+
+You can customize these modules via thirdweb CLI as described below.
+
+</Step>
+
+</Steps>
+
+## Build with CLI
+
+If you want to modify the contract code or publish a custom module, you can use the thirdweb CLI.
+
+<Steps>
+<Step title="Create a new Stylus module">
+
+In your CLI, run the following command to create a new directory with an template module. Select the module template from the list shown.
+
+```bash
+npx thirdweb create-stylus
+```
+</Step>
+
+<Step title="Modify logic">
+In the `src/lib.rs` file you can modify the contract logic such as adding fees, gating logic, analytics events, and more.
+</Step>
+
+<Step title="Build & Test">
+
+To build your project, run the following command:
+
+```bash
+cargo stylus build
+```
+
+</Step>
+
+<Step title="Deploy or Publish Your Module">
+You can publish your module and install it to your modular contract. Publishing stores your module metadata in thirdweb’s on-chain registry so anyone (including you) can use that exact version later with a few clicks.
+
+To publish your module, ensure you have your thirdweb secret key from your created project, then run the following command:
+
+```bash
+npx thirdweb publish-stylus -k YOUR_TW_SECRET_KEY
+```
+
+Once published, the module is now available to install via thirdweb dashboard from the modules tab of your contract.
+</Step>
+
+</Steps>
+
+## Interacting with the Contract
+
+Using the thirdweb SDKs, you can interact with your Stylus Modular contracts / modules to mint tokens, transfer ownership, and more.
+
+The following describes how to interact with a ERC721 modular contract using thirdweb SDK. (Swap for ERC20 or ERC1155 variants as needed.)
+
+### Upload metadata
+
+```ts
+ import { BatchMetadataERC721 } from "thirdweb/modules";
+
+ const transaction = BatchMetadataERC721.uploadMetadata({
+   contract,
+   metadatas: [
+     { name: "My NFT", description: "This is my NFT" },
+   ],
+ });
+
+ await sendTransaction({
+   transaction,
+   account,
+ });
+ ```
+
+### Mint with role
+
+```typescript
+import { MintableERC721 } from "thirdweb/modules";
+
+const transaction = MintableERC721.mintWithRole({
+  contract,
+  to: "0x...", // Address to mint tokens to
+  nfts: [
+    {
+      name: "My NFT",
+      description: "This is my NFT",
+      image: "ipfs://...",
+    },
+  ],
+});
+
+// Send the transaction
+await sendTransaction({ transaction, account });
+```
+
+### Set transfer rules
+
+```ts
+import { sendTransaction } from "thirdweb";
+import { TransferableERC20 } from "thirdweb/modules";
+
+const transaction = TransferableERC20.setTransferable({
+  contract,
+  enableTransfer: ...,
+  overrides: {
+    ...
+  }
+});
+
+// Send the transaction
+await sendTransaction({ transaction, account });
+```
+
+### Resources
+
+- [Modular Contracts Design Doc](https://github.com/thirdweb-dev/modular-contracts/blob/dev/design-document.md)
+

apps/portal/src/app/contracts/arbitrum-stylus/zk-mint/page.mdx

@@ -0,0 +1,240 @@
+import { Step, Steps, createMetadata } from "@doc";
+
+export const metadata = createMetadata({
+	title: "Stylus Zk Mint Contract | thirdweb Documentation",
+	description:
+		"Stylus Zk Minting contract and app template",
+	image: {
+		title: "Stylus Zk Mint",
+		icon: "contracts",
+	},
+});
+
+# ZK Minting with Stylus
+
+You can now create and deploy ZK Proof based token contracts with Stylus. The templates provide you with Stylus contracts, ZK circuit files, and a ready-to-deploy Next.js app + API for proof generation and minting.
+
+Follow the steps below to learn how to build a privacy-preserving ERC721 token system using Zero-Knowledge proofs on Arbitrum Stylus. Users can mint tokens by proving they own a minimum amount of ETH without revealing their exact balance. However, you can customize the circuits and the contracts to add your own checks for minting.
+
+## What you'll build
+
+- ZK Circuit: Proves token ownership without revealing exact balances
+- Stylus Contract: Rust-based ERC721 contract that verifies ZK proofs
+- Frontend: Next.js app for generating proofs and minting tokens
+- Oracle System: Secure balance verification mechanism
+
+## Prerequisites
+
+- [Create a project on your thirdweb account](https://thirdweb.com/dashboard)
+- Install thirdweb CLI by running `npm install -g thirdweb`
+- Install Rust tool chain by running `curl https://sh.rustup.rs -sSf | sh` or visit rust-lang.org
+- Install solc by running `npm install -g solc` or visit soliditylang.org
+- Install Node version 18 or higher
+
+<Steps>
+<Step title="Project Setup">
+
+In your CLI, run the following command to create a new directory with an template module. Select the module template from the list shown.
+
+```bash
+npx thirdweb create-stylus
+```
+
+Select **"Stylus ZK ERC721"** from the dropdown menu. This will:
+- Clone the repository to your machine
+- Set up the project structure
+- Install basic dependencies
+</Step>
+
+<Step title="Install Dependencies">
+Install dependencies for all components:
+
+```bash
+# Install root dependencies
+pnpm install
+
+# Install circuit dependencies
+cd circuits
+pnpm install
+cd ..
+
+# Install frontend dependencies
+cd app
+pnpm install
+cd ..
+```
+</Step>
+
+<Step title="Generate Cryptographic Keys">
+Run the setup script to generate oracle keys and build the ZK circuit:
+
+```bash
+chmod +x setup.sh
+./setup.sh
+```
+
+This script will:
+- Generate a random oracle secret key
+- Inject the secret into the ZK circuit
+- Compile the circuit with circom
+- Generate proving and verification keys
+- Create the trusted setup for Groth16
+
+**⚠️ Important**: The oracle secret is critical for security. Keep it private!
+
+</Step>
+
+<Step title="Deploy the Contract">
+### Using thirdweb CLI
+
+
+```bash
+cd contracts
+npx thirdweb@latest deploy-stylus -k <THIRDWEB_SECRET_KEY>
+```
+
+### Using Stylus CLI (Alternative)
+
+```bash
+cd contracts
+cargo stylus deploy --endpoint arbitrum-sepolia
+```
+
+Copy the deployed contract address - you'll need it for the frontend.
+</Step>
+
+<Step title="Configure the Frontend">
+Update the contract address in your frontend:
+
+```bash
+cd app
+# Edit pages/index.tsx or lib/config.ts
+# Update ZK_MINT_CONTRACT_ADDRESS with your deployed address
+```
+
+Create environment file:
+
+```bash
+# app/.env.local
+RPC_URL=https://sepolia-rollup.arbitrum.io/rpc
+ORACLE_SECRET_KEY=<your_oracle_secret_from_setup>
+```
+</Step>
+
+<Step title="Run the Application">
+```bash
+cd app
+pnpm dev
+# Visit http://localhost:3000
+```
+</Step>
+
+<Step title="Test the System">
+1. **Connect Wallet**: Connect to Arbitrum Sepolia testnet
+2. **Generate Proof**: Click "Generate ZK Proof" - this proves you have sufficient balance
+3. **Mint Tokens**: Use the proof to mint ERC721 tokens
+</Step>
+
+</Steps>
+
+## Customizing the ZK Logic
+
+The above described logic for ZK verification of user balance is provided as a template. You can modify the logic and write your own custom ZK verification code and circuits as described below.
+
+### Understanding the Circuit
+
+The core circuit (`circuits/token_ownership.circom`) has these components:
+
+```txt
+template TokenOwnership(oracle_secret) {
+    // Private inputs (hidden from public)
+    signal input actual_balance;        // Real balance from oracle
+    signal input salt;                  // Randomness for uniqueness
+    
+    // Public inputs (visible on-chain)
+    signal input min_required_balance;  // Minimum threshold
+    signal input token_contract_hash;   // Which token to check
+    signal input user_address_hash;     // User's address hash
+    signal input timestamp;             // When oracle signed data
+    signal input oracle_commitment;    // Oracle's commitment
+    
+    // Output
+    signal output nullifier;            // Prevents replay attacks
+}
+```
+
+### Customization Examples
+
+#### 1. Change Balance Threshold Logic
+
+Replace the balance check with custom logic:
+
+```txt
+// Original: Simple greater-than check
+component gte = GreaterEqThan(64);
+gte.in[0] <== actual_balance;
+gte.in[1] <== min_required_balance;
+gte.out === 1;
+
+// Custom: Logarithmic scaling
+component log_check = LogarithmicCheck();
+log_check.balance <== actual_balance;
+log_check.threshold <== min_required_balance;
+log_check.out === 1;
+```
+
+#### 2. Add Multiple Token Support
+
+Extend the circuit to verify multiple token balances:
+
+```txt
+template MultiTokenOwnership(oracle_secret, num_tokens) {
+    signal input actual_balances[num_tokens];
+    signal input min_required_balances[num_tokens];
+    signal input token_addresses[num_tokens];
+    
+    // Verify each token separately
+    component checks[num_tokens];
+    for (var i = 0; i < num_tokens; i++) {
+        checks[i] = GreaterEqThan(64);
+        checks[i].in[0] <== actual_balances[i];
+        checks[i].in[1] <== min_required_balances[i];
+        checks[i].out === 1;
+    }
+}
+```
+
+#### 3. Add Time-Based Constraints
+
+Add expiration logic to proofs:
+
+```txt
+// Add time validation
+component time_check = LessThan(64);
+time_check.in[0] <== timestamp;
+time_check.in[1] <== max_timestamp;  // New public input
+time_check.out === 1;
+```
+
+### Rebuilding After Changes
+
+After modifying the circuit:
+
+```bash
+cd circuits
+pnpm run build
+
+# Re-inject verification keys
+cd ..
+node scripts/inject-vk.js
+
+# Recompile contract
+cd contracts
+cargo build
+```
+
+### Resources
+
+- [thirdweb Arbitrum Documentation](https://portal.thirdweb.com/contracts/arbitrum-stylus/stylus-contract)
+- [Arbitrum Stylus Documentation](https://docs.arbitrum.io/stylus/concepts/how-it-works)
+

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

@@ -56,6 +56,14 @@ export const sidebar: SideBar = {
           href: `${slug}/arbitrum-stylus/airdrop-contract`,
           name: "Stylus Airdrop Contract",
         },
+        {
+          href: `${slug}/arbitrum-stylus/zk-mint`,
+          name: "Stylus Zk Mint",
+        },
+        {
+          href: `${slug}/arbitrum-stylus/minting-modules`,
+          name: "Stylus Minting Modules",
+        },
       ],
       name: "Arbitrum Stylus",
     },

apps/portal/src/app/page.tsx

@@ -41,15 +41,15 @@ export default function Page() {
 
 function Hero() {
   return (
-    <section className="grid gap-4 py-14 lg:grid-cols-[1fr_420px] lg:py-0">
+    <section className="grid gap-4 pt-14 pb-6 lg:grid-cols-[1fr_420px] lg:py-0">
       {/* Left */}
       <div className="flex flex-col justify-center">
         <div>
           <h1 className="mb-3 font-bold text-4xl tracking-tighter lg:text-6xl">
             thirdweb Documentation
           </h1>
-          <p className="mb-8 max-w-md text-lg text-muted-foreground leading-normal">
-            Development framework for building onchain apps, games, and agents.
+          <p className="mb-6 max-w-lg text-base lg:text-lg text-muted-foreground leading-normal text-pretty">
+            Platform for building the next generation of internet products
           </p>
           <div className="flex gap-3">
             <ChatButton />
@@ -178,10 +178,10 @@ function LearningResourcesSection() {
           title="Wallets"
         />
         <ArticleCardIndex
-          description="Create onchain payments and sell products"
-          href="/payments"
-          icon={PaymentsIcon}
-          title="Payments"
+          description="Instant payments for APIs, websites, and agents"
+          href="/x402"
+          icon={ZapIcon}
+          title="x402"
         />
         <ArticleCardIndex
           description="Bridge, swap, and onramp tokens on any chain"

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

@@ -49,10 +49,6 @@ export const sidebar: SideBar = {
           href: `/bridge/tokens`,
           name: "Get Token Prices",
         },
-        {
-          href: `/bridge/routes`,
-          name: "Get Routes",
-        },
         {
           href: `${paymentsSlug}/webhooks`,
           name: "Webhooks",
@@ -65,33 +61,6 @@ export const sidebar: SideBar = {
       name: "Guides",
     },
     { separator: true },
-    {
-      isCollapsible: false,
-      links: [
-        {
-          href: `${paymentsSlug}/x402`,
-          name: "Get Started",
-        },
-        {
-          href: `${paymentsSlug}/x402/client`,
-          name: "Client Side",
-        },
-        {
-          href: `${paymentsSlug}/x402/server`,
-          name: "Server Side",
-        },
-        {
-          href: `${paymentsSlug}/x402/agents`,
-          name: "Agents",
-        },
-        {
-          href: `${paymentsSlug}/x402/facilitator`,
-          name: "Facilitator",
-        },
-      ],
-      name: "x402",
-    },
-    { separator: true },
     {
       isCollapsible: false,
       links: [

apps/portal/src/app/vault/faqs/page.mdx

@@ -44,3 +44,7 @@ The admin key is temporarily stored in dashboard when performing actions that re
 Please note, you should never share your admin key with third parties.
 </Details>
 
+<Details summary="Is Vault open source?">
+Vault is not yet open source, but we plan to release it soon.
+</Details>
+

apps/portal/src/app/vault/layout.tsx

@@ -12,7 +12,7 @@ export default async function Layout(props: { children: React.ReactNode }) {
 
 export const metadata = createMetadata({
   description:
-    "Vault is an open-source non-custodial key management service, secured with TEE architecture (AWS Nitro Enclaves) and designed for blockchain applications.",
+    "Vault is a non-custodial key management service secured with TEE architecture (AWS Nitro Enclaves), designed for blockchain applications.",
   title: "Vault",
   image: {
     icon: "vault",

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

@@ -5,7 +5,7 @@ import { ArrowLeftRightIcon, UserLockIcon, UsersIcon, WalletIcon } from "lucide-
 
 export const metadata = createMetadata({
 	title: "thirdweb Vault",
-	description: "An open-source, secure key management service for storing, managing, and protecting cryptographic keys and secrets.",
+	description: "A secure key management service for storing, managing, and protecting cryptographic keys and secrets.",
     image: {
         icon: "vault",
         title: "thirdweb Vault",
@@ -14,7 +14,7 @@ export const metadata = createMetadata({
 
 # Vault
 
-Vault is an open-source non-custodial key management service, secured with TEE architecture (AWS Nitro Enclaves) and designed for blockchain applications.
+Vault is a non-custodial key management service secured with TEE architecture (AWS Nitro Enclaves), designed for blockchain applications.
 
 ## Features
 

apps/portal/src/app/wallets/adapters/page.mdx

@@ -63,10 +63,48 @@ export const config = createConfig({
 });
 ```
 
-Then in your application, you can use the connector to trigger the in-app wallet connection.
+### Using the ConnectButton or ConnectEmbed with a wagmi application
+
+You can use the thirdweb react connection components and hooks like ConnectButton, ConnectEmbed, useConnectModal, etc, but still keep using wagmi for the rest of the application.
+
+To do so, you will need to connect the `inAppWalletConnector` connector from the `@thirdweb-dev/wagmi-adapter` package with the connected thirdweb wallet.
+
+You can do this at any time after connecting the thirdweb wallet, a convenient place to do this is in the `onConnect` callback of the ConnectButton or ConnectEmbed.
+
+```tsx
+const { connectors, connect } = useConnect(); // from wagmi
+
+<ConnectButton
+    client={client}
+    onConnect={(wallet) => {
+      // connect the wagmi connector with the connected thirdweb wallet
+      const twConnector = connectors.find(
+        (c) => c.id === "in-app-wallet",
+      );
+      if (twConnector) {
+        const options = {
+          wallet, // pass the connected wallet
+        } satisfies ConnectionOptions; // for type safety
+        connect({
+          connector: twConnector,
+          chainId: chain.id,
+          ...options,
+        });
+      }
+    }}
+/>
+```
+
+Make sure your app is wrapped in a `<ThirdwebProvider>` as well as a `<WagmiProvider>` since both contexts will be used here. From there, the wallet state will be in sync between the 2 libraries.
+
+**Note:** the ConnectButton and ConnectEmbed handle reconnecting automatically on page reload. If not using those components (ie. useConnectModal or useConnect hooks directly), you will need to handle reconnecting by explicitely calling `useAutoConnect()`, and doing the same wagmi connection from the `onConnect` callback.
+
+### Using the connector directly (headless mode)
+
+You can also use the `inAppWalletConnector` connector directly in your application to connect to the thirdweb wallet without needing a `<ThirdwebProvider>` at all.
 
 ```ts
-const { connect, connectors } = useConnect();
+const { connect, connectors } = useConnect(); // from wagmi
 
 const onClick = () => {
   // grab the connector
@@ -79,9 +117,10 @@ const onClick = () => {
 };
 ```
 
+
 ### Converting a wagmi wallet client to a thirdweb wallet
 
-You can use the thirdweb SDK within a wagmi application by setting the wagmi connected account as the thirdweb 'active wallet'. After that, you can use all of the react components and hooks normally, including `BuyWidget`, `TransactionButton`, etc.
+You can also use the thirdweb SDK within a wagmi application by setting the wagmi connected account as the thirdweb 'active wallet'. After that, you can use all of the react components and hooks normally, including `BuyWidget`, `TransactionButton`, etc.
 
 ```ts
 // Assumes you've wrapped your application in a `<ThirdwebProvider>`

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

@@ -75,7 +75,7 @@ The client library wraps the native `fetch` API and handles:
   </TabsContent>
 
   <TabsContent value="http">
-    ## Prepare Payment
+    ## Fetch with Payment
 
     Fetch any x402-compatible API and automatically handle payment flows when APIs return a `402 Payment Required` response using the authenticated wallet.
 

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

@@ -27,7 +27,9 @@ You can view all transactions processed by your facilitator in your project dash
 
 ## Chain and token support
 
-Our facilitator supports payments on any EVM chain, as long as the payment token supports either:
+The thirdweb x402 client/server stack supports payments on [170+ EVM chains](https://thirdweb.com/chainlist?service=account-abstraction).
+
+The payment token must support either:
 
 - ERC-2612 permit (most ERC20 tokens)
 - ERC-3009 sign with authorization (USDC on all chains)

apps/portal/src/app/x402/layout.tsx

@@ -0,0 +1,21 @@
+import { createMetadata } from "@doc";
+import { DocLayout } from "@/components/Layouts/DocLayout";
+import { sidebar } from "./sidebar";
+
+export default async function Layout(props: { children: React.ReactNode }) {
+  return (
+    <DocLayout editPageButton={true} sideBar={sidebar}>
+      {props.children}
+    </DocLayout>
+  );
+}
+
+export const metadata = createMetadata({
+  description:
+    "Instant payments for your APIs, websites, and autonomous agents. x402 is an open-source protocol that turns the HTTP 402 status code into a fully-featured, on-chain payment layer.",
+  image: {
+    icon: "payments",
+    title: "x402 Payments Docs",
+  },
+  title: "x402 Payments Documentation",
+});

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

@@ -12,9 +12,8 @@ export const metadata = createMetadata({
 
 # x402 Payments
 
-x402 is an open-source protocol that turns the dormant HTTP 402 Payment Required status code into a fully-featured, on-chain payment layer for APIs, websites, and autonomous agents.
+[x402](https://x402.org) is an open-source protocol that turns the dormant HTTP 402 Payment Required status code into a fully-featured, on-chain payment layer for APIs, websites, and autonomous agents.
 
-Learn more about the protocol at [x402.org](https://x402.org).
 
 <ArticleIconCard
   title="x402 Playground"
@@ -23,6 +22,15 @@ Learn more about the protocol at [x402.org](https://x402.org).
   href="https://playground.thirdweb.com/payments/x402"
 />
 
+## Chain and token support
+
+The thirdweb x402 client/server stack supports payments on [170+ EVM chains](https://thirdweb.com/chainlist?service=account-abstraction).
+
+The payment token must support either:
+
+- ERC-2612 permit (most ERC20 tokens)
+- ERC-3009 sign with authorization (USDC on all chains)
+
 ## Client Side
 
 `wrapFetchWithPayment` wraps the native fetch API to automatically handle `402 Payment Required` responses from any x402-compatible API:
@@ -42,7 +50,7 @@ const fetchWithPay = wrapFetchWithPayment(fetch, client, wallet);
 const response = await fetchWithPay('https://api.example.com/paid-endpoint');
 ```
 
-You can also use the thirdweb API to fetch any x402 compatible endpoint and pay for it with the authenticated wallet. See the [client side docs](/payments/x402/client) for more details.
+You can also use the thirdweb API to fetch any x402 compatible endpoint and pay for it with the authenticated wallet. See the [client side docs](/x402/client) for more details.
 
 ## Server Side
 
@@ -88,7 +96,7 @@ export async function GET(request: Request) {
 }
 ```
 
-You can also create middlewares to handle payment for multiple endpoints, see the [server side docs](/payments/x402/server) for more details. The [facilitator](/payments/x402/facilitator) handles settling the payment onchain using your own server wallet.
+You can also create middlewares to handle payment for multiple endpoints, see the [server side docs](/x402/server) for more details. The [facilitator](/x402/facilitator) handles settling the payment onchain using your own server wallet.
 
 ## Going Further
 
@@ -97,18 +105,18 @@ You can also create middlewares to handle payment for multiple endpoints, see th
     title="Client Side"
     description="Learn how to interact with x402-compatible APIs from your client applications"
     icon={TypeScriptIcon}
-    href="/payments/x402/client"
+    href="/x402/client"
   />
   <ArticleIconCard
     title="Server Side"
     description="Accept x402 payments in your APIs with middleware or dedicated endpoints"
     icon={EngineIcon}
-    href="/payments/x402/server"
+    href="/x402/server"
   />
   <ArticleIconCard
     title="Facilitator API"
     description="Configure the facilitator service to verify and settle payments"
     icon={EngineIcon}
-    href="/payments/x402/facilitator"
+    href="/x402/facilitator"
   />
 </div>