Version Packages (#8243 )

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
[SDK] Fix Coinbase wallet transaction desktop popup for mobile QR login (#8253 )
2025-10-14 12:29:02 -07:00 · 2025-10-14 12:20:50 -07:00 · 2025-10-14 18:37:48 +00:00 · 2025-10-14 18:06:44 +00:00 · 2025-10-13 21:44:06 +00:00 · 2025-10-13 21:28:49 +00:00
453 changed files with 28080 additions and 10934 deletions
@@ -2,7 +2,7 @@ name: Auto Author Assign

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

 permissions:
  pull-requests: write
@@ -10,6 +10,7 @@ module.exports = [
  "/wallets",
  "/account-abstraction",
  "/payments",
+  "/payments/x402",
  "/auth",
  "/in-app-wallets",
  "/transactions",
@@ -474,6 +474,11 @@ async function redirects() {
      destination: "/team/~/~/support",
      permanent: false,
    },
+    {
+      source: "/routes",
+      destination: "/tokens",
+      permanent: false,
+    },
  ];
 }

@@ -0,0 +1,70 @@
+"use server";
+
+import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
+import type { ProjectWalletSummary } from "@/lib/server/project-wallet";
+
+interface VaultWalletListItem {
+  id: string;
+  address: string;
+  metadata?: {
+    label?: string;
+    projectId?: string;
+    teamId?: string;
+    type?: string;
+  } | null;
+}
+
+export async function listProjectServerWallets(params: {
+  managementAccessToken: string;
+  projectId: string;
+  pageSize?: number;
+}): Promise<ProjectWalletSummary[]> {
+  const { managementAccessToken, projectId, pageSize = 100 } = params;
+
+  if (!managementAccessToken || !NEXT_PUBLIC_THIRDWEB_VAULT_URL) {
+    return [];
+  }
+
+  try {
+    const vaultClient = await createVaultClient({
+      baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
+    });
+
+    const response = await listEoas({
+      client: vaultClient,
+      request: {
+        auth: {
+          accessToken: managementAccessToken,
+        },
+        options: {
+          page: 0,
+          // @ts-expect-error - Vault SDK expects snake_case pagination fields
+          page_size: pageSize,
+        },
+      },
+    });
+
+    if (!response.success || !response.data?.items) {
+      return [];
+    }
+
+    const items = response.data.items as VaultWalletListItem[];
+
+    return items
+      .filter((item) => {
+        return (
+          item.metadata?.projectId === projectId &&
+          (!item.metadata?.type || item.metadata.type === "server-wallet")
+        );
+      })
+      .map<ProjectWalletSummary>((item) => ({
+        id: item.id,
+        address: item.address,
+        label: item.metadata?.label ?? undefined,
+      }));
+  } catch (error) {
+    console.error("Failed to list project server wallets", error);
+    return [];
+  }
+}
@@ -0,0 +1,74 @@
+"use server";
+
+import { configure, sendTokens } from "@thirdweb-dev/api";
+import { THIRDWEB_API_HOST } from "@/constants/urls";
+
+configure({
+  override: {
+    baseUrl: THIRDWEB_API_HOST,
+  },
+});
+
+export async function sendProjectWalletTokens(options: {
+  walletAddress: string;
+  recipientAddress: string;
+  chainId: number;
+  quantityWei: string;
+  publishableKey: string;
+  teamId: string;
+  tokenAddress?: string;
+  secretKey: string;
+  vaultAccessToken?: string;
+}) {
+  const {
+    walletAddress,
+    recipientAddress,
+    chainId,
+    quantityWei,
+    publishableKey,
+    teamId,
+    tokenAddress,
+    secretKey,
+    vaultAccessToken,
+  } = options;
+
+  if (!secretKey) {
+    return {
+      error: "A project secret key is required to send funds.",
+      ok: false,
+    } as const;
+  }
+
+  const response = await sendTokens({
+    body: {
+      chainId,
+      from: walletAddress,
+      recipients: [
+        {
+          address: recipientAddress,
+          quantity: quantityWei,
+        },
+      ],
+      ...(tokenAddress ? { tokenAddress } : {}),
+    },
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": publishableKey,
+      "x-secret-key": secretKey,
+      "x-team-id": teamId,
+      ...(vaultAccessToken ? { "x-vault-access-token": vaultAccessToken } : {}),
+    },
+  });
+
+  if (response.error || !response.data) {
+    return {
+      error: response.error || "Failed to submit transfer request.",
+      ok: false,
+    } as const;
+  }
+
+  return {
+    ok: true,
+    transactionIds: response.data.result?.transactionIds ?? [],
+  } as const;
+}
@@ -1,6 +1,6 @@
 import "server-only";

-import { headers } from "next/headers";
+import { cookies, headers } from "next/headers";
 import Stripe from "stripe";
 import type { Team } from "@/api/team/get-team";
 import {
@@ -88,6 +88,9 @@ export async function fetchClientSecret(team: Team) {
    throw new Error("No customer ID found");
  }

+  // try to get the gclid cookie
+  const gclid = (await cookies()).get("gclid")?.value;
+
  // Create Checkout Sessions from body params.
  const session = await stripe.checkout.sessions.create({
    ui_mode: "embedded",
@@ -117,6 +120,8 @@ export async function fetchClientSecret(team: Team) {
          missing_payment_method: "cancel",
        },
      },
+      // if gclid exists, set it as a metadata field so we can attribute the conversion later
+      metadata: gclid ? { gclid } : undefined,
    },
  });

@@ -24,6 +24,7 @@ export function reportContractDeployed(properties: {
  publisher: string | undefined;
  contractName: string | undefined;
  deploymentType?: "asset";
+  is_testnet: boolean | undefined;
 }) {
  posthog.capture("contract deployed", properties);
 }
@@ -40,6 +41,7 @@ export function reportContractDeployed(properties: {
 export function reportContractDeployFailed(properties: {
  errorMessage: string;
  chainId: number;
+  is_testnet: boolean | undefined;
  publisher: string | undefined;
  contractName: string | undefined;
 }) {
@@ -171,9 +173,7 @@ export function reportOnboardingCompleted() {
 *
 */
 export function reportFaucetUsed(properties: { chainId: number }) {
-  posthog.capture("faucet used", {
-    chainId: properties.chainId,
-  });
+  posthog.capture("faucet used", properties);
 }

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

 // ----------------------------
@@ -225,14 +220,11 @@ type AssetContractType =
 */
 export function reportAssetBuySuccessful(properties: {
  chainId: number;
-  contractType: AssetContractType;
+  contractType: AssetContractType | undefined;
  assetType: "nft" | "coin";
+  is_testnet: boolean | undefined;
 }) {
-  posthog.capture("asset buy successful", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-  });
+  posthog.capture("asset buy successful", properties);
 }

 type TokenSwapParams = {
@@ -243,9 +235,51 @@ type TokenSwapParams = {
  pageType: "asset" | "bridge" | "chain";
 };

+type TokenBuyParams = {
+  buyTokenChainId: number | undefined;
+  buyTokenAddress: string | undefined;
+  pageType: "asset" | "bridge" | "chain";
+};
+
 /**
 * ### Why do we need to report this event?
- * - To track number of successful token swaps from the token page
+ * - To track number of successful token buys
+ * - To track which tokens are being bought the most
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuySuccessful(properties: TokenBuyParams) {
+  posthog.capture("token buy successful", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of failed token buys
+ * - To track which token buys are failing
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuyFailed(properties: TokenBuyParams) {
+  posthog.capture("token buy failed", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of cancelled token buys
+ * - To track which token buys are being cancelled
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportTokenBuyCancelled(properties: TokenBuyParams) {
+  posthog.capture("token buy cancelled", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track number of successful token swaps
 * - To track which tokens are being swapped the most
 *
 * ### Who is responsible for this event?
@@ -271,7 +305,7 @@ export function reportSwapWidgetShown(properties: {

 /**
 * ### Why do we need to report this event?
- * - To track number of failed token swaps from the token page
+ * - To track number of failed token swaps
 * - To track which tokens are being swapped the most
 *
 * ### Who is responsible for this event?
@@ -287,7 +321,7 @@ export function reportTokenSwapFailed(

 /**
 * ### Why do we need to report this event?
- * - To track number of cancelled token swaps from the token page
+ * - To track number of cancelled token swaps
 * - To track which tokens are being swapped the most
 *
 * ### Who is responsible for this event?
@@ -299,7 +333,7 @@ export function reportTokenSwapCancelled(properties: TokenSwapParams) {

 /**
 * ### Why do we need to report this event?
- * - To track number of failed asset purchases from the token page
+ * - To track number of failed asset purchases
 * - To track the errors that users encounter when trying to purchase an asset
 *
 * ### Who is responsible for this event?
@@ -307,16 +341,12 @@ export function reportTokenSwapCancelled(properties: TokenSwapParams) {
 */
 export function reportAssetBuyFailed(properties: {
  chainId: number;
-  contractType: AssetContractType;
+  is_testnet: boolean | undefined;
+  contractType: AssetContractType | undefined;
  assetType: "nft" | "coin";
  error: string;
 }) {
-  posthog.capture("asset buy failed", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-    error: properties.error,
-  });
+  posthog.capture("asset buy failed", properties);
 }

 /**
@@ -329,14 +359,11 @@ export function reportAssetBuyFailed(properties: {
 */
 export function reportAssetBuyCancelled(properties: {
  chainId: number;
-  contractType: AssetContractType;
+  is_testnet: boolean | undefined;
+  contractType: AssetContractType | undefined;
  assetType: "nft" | "coin";
 }) {
-  posthog.capture("asset buy cancelled", {
-    assetType: properties.assetType,
-    chainId: properties.chainId,
-    contractType: properties.contractType,
-  });
+  posthog.capture("asset buy cancelled", properties);
 }

 // Assets Landing Page ----------------------------
@@ -381,10 +408,7 @@ export function reportAssetCreationStepConfigured(
        step: "coin-info" | "token-distribution" | "launch-coin";
      },
 ) {
-  posthog.capture("asset creation step configured", {
-    assetType: properties.assetType,
-    step: properties.step,
-  });
+  posthog.capture("asset creation step configured", properties);
 }

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

 type CoinCreationStep =
@@ -424,7 +447,12 @@ type CoinCreationStep =
 * @MananTank
 */
 export function reportAssetCreationFailed(
-  properties: { contractType: AssetContractType; error: string } & (
+  properties: {
+    contractType: AssetContractType;
+    error: string;
+    is_testnet: boolean | undefined;
+    chainId: number;
+  } & (
    | {
        assetType: "nft";
        step:
@@ -439,12 +467,7 @@ export function reportAssetCreationFailed(
      }
  ),
 ) {
-  posthog.capture("asset creation failed", {
-    assetType: properties.assetType,
-    contractType: properties.contractType,
-    error: properties.error,
-    step: properties.step,
-  });
+  posthog.capture("asset creation failed", properties);
 }

 type UpsellParams = {
@@ -540,6 +563,7 @@ export function reportPaymentLinkBuyFailed(properties: {
 export function reportAssetPageview(properties: {
  assetType: "nft" | "coin";
  chainId: number;
+  is_testnet: boolean | undefined;
 }) {
  posthog.capture("asset pageview", properties);
 }
@@ -551,7 +575,10 @@ export function reportAssetPageview(properties: {
 * ### Who is responsible for this event?
 * @MananTank
 */
-export function reportChainPageview(properties: { chainId: number }) {
+export function reportChainPageview(properties: {
+  chainId: number;
+  is_testnet: boolean | undefined;
+}) {
  posthog.capture("chain pageview", properties);
 }

@@ -644,8 +671,19 @@ export function reportProductFeedback(properties: {
  feedback: string;
  source: "desktop" | "mobile";
 }) {
-  posthog.capture("product feedback submitted", {
-    feedback: properties.feedback,
-    source: properties.source,
-  });
+  posthog.capture("product feedback submitted", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track conversions for the bridge page links
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportBridgePageLinkClick(params: {
+  linkType: "integrate-bridge" | "trending-tokens";
+}) {
+  posthog.capture("bridge page link clicked", params);
 }
@@ -448,6 +448,7 @@ type ActiveStatus = {
  pay: boolean;
  inAppWallet: boolean;
  ecosystemWallet: boolean;
+  engineCloud: boolean;
 };

 export const isProjectActive = unstable_cache(
@@ -479,6 +480,7 @@ export const isProjectActive = unstable_cache(
        pay: false,
        rpc: false,
        sdk: false,
+        engineCloud: false,
        storage: false,
      } as ActiveStatus;
    }
@@ -488,7 +490,7 @@ export const isProjectActive = unstable_cache(
  },
  ["isProjectActive"],
  {
-    revalidate: 60 * 60, // 1 hour
+    revalidate: 30, // 30 seconds
  },
 );

@@ -592,7 +594,7 @@ const cached_getUniversalBridgeUsage = unstable_cache(
    if (res?.status !== 200) {
      const reason = await res?.text();
      console.error(
-        `Failed to fetch universal bridge stats: ${res?.status} - ${res.statusText} - ${reason}`,
+        `Failed to fetch bridge stats: ${res?.status} - ${res.statusText} - ${reason}`,
      );
      return [];
    }
@@ -636,7 +638,7 @@ const cached_getUniversalBridgeWalletUsage = unstable_cache(
    if (res?.status !== 200) {
      const reason = await res?.text();
      console.error(
-        `Failed to fetch universal bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
+        `Failed to fetch bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
      );
      return [];
    }
@@ -1,28 +1,28 @@
-"use server";
 import type { Address } from "thirdweb";
-import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "@/constants/public-envs";

 const UB_BASE_URL = NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST;

-type Webhook = {
+export type Webhook = {
  url: string;
  label: string;
  active: boolean;
  createdAt: string;
  id: string;
-  secret: string;
  version?: number; // TODO (UB) make this mandatory after migration
 };

-export async function getWebhooks(props: { clientId: string; teamId: string }) {
-  const authToken = await getAuthToken();
+export async function getWebhooks(params: {
+  clientId: string;
+  teamId: string;
+  authToken: string;
+}) {
  const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
    headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
      "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
    },
    method: "GET",
  });
@@ -36,28 +36,55 @@ export async function getWebhooks(props: { clientId: string; teamId: string }) {
  return json.data as Array<Webhook>;
 }

-export async function createWebhook(props: {
+export async function getWebhookById(params: {
+  clientId: string;
+  teamId: string;
+  authToken: string;
+  webhookId: string;
+}) {
+  const res = await fetch(
+    `${UB_BASE_URL}/v1/developer/webhooks/${encodeURIComponent(params.webhookId)}`,
+    {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+        "Content-Type": "application/json",
+        "x-client-id": params.clientId,
+        "x-team-id": params.teamId,
+      },
+      method: "GET",
+    },
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Webhook;
+}
+
+export async function createWebhook(params: {
  clientId: string;
  teamId: string;
  version?: number;
  url: string;
  label: string;
  secret?: string;
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
-
  const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
    body: JSON.stringify({
-      label: props.label,
-      secret: props.secret,
-      url: props.url,
-      version: props.version,
+      label: params.label,
+      secret: params.secret,
+      url: params.url,
+      version: params.version,
    }),
    headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
      "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
    },
    method: "POST",
  });
@@ -67,23 +94,23 @@ export async function createWebhook(props: {
    throw new Error(text);
  }

-  return;
+  return (await res.json()) as Webhook;
 }

-export async function deleteWebhook(props: {
+export async function deleteWebhook(params: {
  clientId: string;
  teamId: string;
  webhookId: string;
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
  const res = await fetch(
-    `${UB_BASE_URL}/v1/developer/webhooks/${props.webhookId}`,
+    `${UB_BASE_URL}/v1/developer/webhooks/${encodeURIComponent(params.webhookId)}`,
    {
      headers: {
-        Authorization: `Bearer ${authToken}`,
+        Authorization: `Bearer ${params.authToken}`,
        "Content-Type": "application/json",
-        "x-client-id": props.clientId,
-        "x-team-id": props.teamId,
+        "x-client-id": params.clientId,
+        "x-team-id": params.teamId,
      },
      method: "DELETE",
    },
@@ -94,7 +121,151 @@ export async function deleteWebhook(props: {
    throw new Error(text);
  }

-  return;
+  return true;
+}
+
+export async function updateWebhook(params: {
+  clientId: string;
+  teamId: string;
+  webhookId: string;
+  authToken: string;
+  body: {
+    version?: number;
+    url: string;
+    label: string;
+  };
+}) {
+  const res = await fetch(
+    `${UB_BASE_URL}/v1/developer/webhooks/${encodeURIComponent(params.webhookId)}`,
+    {
+      method: "PUT",
+      body: JSON.stringify(params.body),
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+        "Content-Type": "application/json",
+        "x-client-id": params.clientId,
+        "x-team-id": params.teamId,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+
+  return json.data as Webhook;
+}
+
+export type WebhookSend = {
+  id: string;
+  webhookId: string;
+  webhookUrl: string;
+  createdAt: string;
+  onrampId: string | null;
+  paymentId: string | null;
+  response: string | null;
+  responseStatus: number;
+  status: "PENDING" | "COMPLETED" | "FAILED";
+  success: boolean;
+  transactionId: string | null;
+  body: unknown;
+};
+
+type WebhookSendsResponse = {
+  data: WebhookSend[];
+  pagination: {
+    limit: number;
+    offset: number;
+    total: number;
+  };
+};
+
+export async function getWebhookSends(options: {
+  authToken: string;
+  projectClientId: string;
+  teamId: string;
+  limit?: number;
+  offset?: number;
+  webhookId: string;
+  success?: boolean;
+}): Promise<WebhookSendsResponse> {
+  const { limit, offset, success, webhookId, authToken } = options;
+
+  const url = new URL(
+    `${NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST}/v1/developer/webhook-sends`,
+  );
+
+  url.searchParams.set("webhookId", webhookId);
+
+  if (limit !== undefined) {
+    url.searchParams.set("limit", limit.toString());
+  }
+  if (offset !== undefined) {
+    url.searchParams.set("offset", offset.toString());
+  }
+  if (success !== undefined) {
+    url.searchParams.set("success", success.toString());
+  }
+
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      "x-client-id": options.projectClientId,
+      "x-team-id": options.teamId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const errorJson = await response.json();
+    throw new Error(errorJson.message);
+  }
+
+  return (await response.json()) as WebhookSendsResponse;
+}
+
+export async function resendWebhook(
+  params: {
+    authToken: string;
+    projectClientId: string;
+    teamId: string;
+  } & (
+    | {
+        paymentId: string;
+      }
+    | {
+        onrampId: string;
+      }
+  ),
+) {
+  const url = new URL(
+    `${NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST}/v1/developer/webhooks/retry`,
+  );
+
+  const response = await fetch(url.toString(), {
+    method: "POST",
+    body: JSON.stringify(
+      "paymentId" in params
+        ? { paymentId: params.paymentId }
+        : { onrampId: params.onrampId },
+    ),
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": params.projectClientId,
+      "x-team-id": params.teamId,
+      Authorization: `Bearer ${params.authToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const errorJson = await response.json();
+    throw new Error(errorJson.message);
+  }
+
+  return true;
 }

 type PaymentLink = {
@@ -116,17 +287,17 @@ type PaymentLink = {
  amount: bigint;
 };

-export async function getPaymentLinks(props: {
+export async function getPaymentLinks(params: {
  clientId: string;
  teamId: string;
+  authToken: string;
 }): Promise<Array<PaymentLink>> {
-  const authToken = await getAuthToken();
  const res = await fetch(`${UB_BASE_URL}/v1/developer/links`, {
    headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
      "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
    },
    method: "GET",
  });
@@ -159,7 +330,7 @@ export async function getPaymentLinks(props: {
  }));
 }

-export async function createPaymentLink(props: {
+export async function createPaymentLink(params: {
  clientId: string;
  teamId: string;
  title: string;
@@ -171,26 +342,25 @@ export async function createPaymentLink(props: {
    amount: bigint;
    purchaseData?: unknown;
  };
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
-
  const res = await fetch(`${UB_BASE_URL}/v1/developer/links`, {
    body: JSON.stringify({
-      title: props.title,
-      imageUrl: props.imageUrl,
+      title: params.title,
+      imageUrl: params.imageUrl,
      intent: {
-        destinationChainId: props.intent.destinationChainId,
-        destinationTokenAddress: props.intent.destinationTokenAddress,
-        receiver: props.intent.receiver,
-        amount: props.intent.amount.toString(),
-        purchaseData: props.intent.purchaseData,
+        destinationChainId: params.intent.destinationChainId,
+        destinationTokenAddress: params.intent.destinationTokenAddress,
+        receiver: params.intent.receiver,
+        amount: params.intent.amount.toString(),
+        purchaseData: params.intent.purchaseData,
      },
    }),
    headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
      "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
    },
    method: "POST",
  });
@@ -207,20 +377,20 @@ export async function createPaymentLink(props: {
  return response.data;
 }

-export async function deletePaymentLink(props: {
+export async function deletePaymentLink(params: {
  clientId: string;
  teamId: string;
  paymentLinkId: string;
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
  const res = await fetch(
-    `${UB_BASE_URL}/v1/developer/links/${props.paymentLinkId}`,
+    `${UB_BASE_URL}/v1/developer/links/${encodeURIComponent(params.paymentLinkId)}`,
    {
      headers: {
-        Authorization: `Bearer ${authToken}`,
+        Authorization: `Bearer ${params.authToken}`,
        "Content-Type": "application/json",
-        "x-client-id": props.clientId,
-        "x-team-id": props.teamId,
+        "x-client-id": params.clientId,
+        "x-team-id": params.teamId,
      },
      method: "DELETE",
    },
@@ -231,7 +401,7 @@ export async function deletePaymentLink(props: {
    throw new Error(text);
  }

-  return;
+  return true;
 }

 export type Fee = {
@@ -241,14 +411,17 @@ export type Fee = {
  updatedAt: string;
 };

-export async function getFees(props: { clientId: string; teamId: string }) {
-  const authToken = await getAuthToken();
+export async function getFees(params: {
+  clientId: string;
+  teamId: string;
+  authToken: string;
+}) {
  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
    headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
      "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
    },
    method: "GET",
  });
@@ -262,23 +435,23 @@ export async function getFees(props: { clientId: string; teamId: string }) {
  return json.data as Fee;
 }

-export async function updateFee(props: {
+export async function updateFee(params: {
  clientId: string;
  teamId: string;
  feeRecipient: string;
  feeBps: number;
+  authToken: string;
 }) {
-  const authToken = await getAuthToken();
  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
    body: JSON.stringify({
-      feeBps: props.feeBps,
-      feeRecipient: props.feeRecipient,
+      feeBps: params.feeBps,
+      feeRecipient: params.feeRecipient,
    }),
    headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
      "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
    },
    method: "PUT",
  });
@@ -288,7 +461,7 @@ export async function updateFee(props: {
    throw new Error(text);
  }

-  return;
+  return true;
 }

 export type PaymentsResponse = {
@@ -345,36 +518,34 @@ export type Payment = {

 export type BridgePayment = Extract<Payment, { type: BridgePaymentType }>;

-export async function getPayments(props: {
+export async function getPayments(params: {
  clientId: string;
  teamId: string;
  paymentLinkId?: string;
  limit?: number;
+  authToken: string;
  offset?: number;
 }) {
-  const authToken = await getAuthToken();
-
-  // Build URL with query parameters if provided
  const url = new URL(`${UB_BASE_URL}/v1/developer/payments`);

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

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

-  if (props.paymentLinkId) {
-    url.searchParams.append("paymentLinkId", props.paymentLinkId);
+  if (params.paymentLinkId) {
+    url.searchParams.append("paymentLinkId", params.paymentLinkId);
  }

  const res = await fetch(url.toString(), {
    headers: {
-      Authorization: `Bearer ${authToken}`,
+      Authorization: `Bearer ${params.authToken}`,
      "Content-Type": "application/json",
-      "x-client-id": props.clientId,
-      "x-team-id": props.teamId,
+      "x-client-id": params.clientId,
+      "x-team-id": params.teamId,
    },
    method: "GET",
  });
@@ -1,29 +1,40 @@
 "use client";

 import { useTheme } from "next-themes";
-import { useEffect, useRef, useState } from "react";
-import type { Chain, ThirdwebClient } from "thirdweb";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { Chain } from "thirdweb";
 import { BuyWidget, SwapWidget } from "thirdweb/react";
 import {
  reportAssetBuyCancelled,
  reportAssetBuyFailed,
  reportAssetBuySuccessful,
  reportSwapWidgetShown,
+  reportTokenBuyCancelled,
+  reportTokenBuyFailed,
+  reportTokenBuySuccessful,
  reportTokenSwapCancelled,
  reportTokenSwapFailed,
  reportTokenSwapSuccessful,
 } from "@/analytics/report";
 import { Button } from "@/components/ui/button";
+import {
+  NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID,
+} from "@/constants/public-envs";
 import { cn } from "@/lib/utils";
 import { parseError } from "@/utils/errorParser";
 import { getSDKTheme } from "@/utils/sdk-component-theme";
+import { getConfiguredThirdwebClient } from "../../constants/thirdweb.server";
+
+type PageType = "asset" | "bridge" | "chain";

 export function BuyAndSwapEmbed(props: {
-  client: ThirdwebClient;
  chain: Chain;
  tokenAddress: string | undefined;
  buyAmount: string | undefined;
-  pageType: "asset" | "bridge" | "chain";
+  pageType: PageType;
+  isTestnet: boolean | undefined;
 }) {
  const { theme } = useTheme();
  const [tab, setTab] = useState<"buy" | "swap">("swap");
@@ -41,8 +52,23 @@ export function BuyAndSwapEmbed(props: {
    });
  }, [props.pageType]);

+  const client = useMemo(() => {
+    return getConfiguredThirdwebClient({
+      clientId:
+        props.pageType === "asset"
+          ? NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID
+          : props.pageType === "bridge"
+            ? NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID
+            : props.pageType === "chain"
+              ? NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID
+              : undefined,
+      secretKey: undefined,
+      teamId: undefined,
+    });
+  }, [props.pageType]);
+
  return (
-    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col">
+    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10 shadow-xl min-w-0">
      <div className="flex gap-2.5 p-4 border-b border-dashed">
        <TabButton
          label="Swap"
@@ -60,38 +86,90 @@ export function BuyAndSwapEmbed(props: {
        <BuyWidget
          amount={props.buyAmount || "1"}
          chain={props.chain}
-          className="!rounded-2xl !w-full !border-none"
+          className="!rounded-2xl !border-none"
          title=""
-          client={props.client}
+          client={client}
          connectOptions={{
            autoConnect: false,
          }}
-          onError={(e) => {
+          onError={(e, quote) => {
            const errorMessage = parseError(e);
+
+            reportTokenBuyFailed({
+              buyTokenChainId:
+                quote?.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote?.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote?.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote?.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
            if (props.pageType === "asset") {
              reportAssetBuyFailed({
                assetType: "coin",
                chainId: props.chain.id,
-                contractType: "DropERC20",
                error: errorMessage,
+                contractType: undefined,
+                is_testnet: props.isTestnet,
              });
            }
          }}
-          onCancel={() => {
+          onCancel={(quote) => {
+            reportTokenBuyCancelled({
+              buyTokenChainId:
+                quote?.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote?.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote?.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote?.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
            if (props.pageType === "asset") {
              reportAssetBuyCancelled({
                assetType: "coin",
                chainId: props.chain.id,
-                contractType: "DropERC20",
+                contractType: undefined,
+                is_testnet: props.isTestnet,
              });
            }
          }}
-          onSuccess={() => {
+          onSuccess={(quote) => {
+            reportTokenBuySuccessful({
+              buyTokenChainId:
+                quote.type === "buy"
+                  ? quote.intent.destinationChainId
+                  : quote.type === "onramp"
+                    ? quote.intent.chainId
+                    : undefined,
+              buyTokenAddress:
+                quote.type === "buy"
+                  ? quote.intent.destinationTokenAddress
+                  : quote.type === "onramp"
+                    ? quote.intent.tokenAddress
+                    : undefined,
+              pageType: props.pageType,
+            });
+
            if (props.pageType === "asset") {
              reportAssetBuySuccessful({
                assetType: "coin",
                chainId: props.chain.id,
-                contractType: "DropERC20",
+                contractType: undefined,
+                is_testnet: props.isTestnet,
              });
            }
          }}
@@ -103,16 +181,17 @@ export function BuyAndSwapEmbed(props: {

      {tab === "swap" && (
        <SwapWidget
-          client={props.client}
+          client={client}
          theme={themeObj}
-          className="!rounded-2xl !border-none !w-full"
+          className="!rounded-2xl !border-none"
          prefill={{
-            sellToken: {
+            // buy this token by default
+            buyToken: {
              chainId: props.chain.id,
              tokenAddress: props.tokenAddress,
            },
-            // only set `buyToken` as "Native token" if `sellToken` is not a "native token" already
-            buyToken: props.tokenAddress
+            // sell the native token by default (but if buytoken is a native token, don't set)
+            sellToken: props.tokenAddress
              ? {
                  chainId: props.chain.id,
                }
@@ -161,9 +240,10 @@ function TabButton(props: {
  return (
    <Button
      onClick={props.onClick}
+      size="sm"
      className={cn(
-        "rounded-full text-muted-foreground px-5 text-base bg-accent",
-        props.isActive && "text-foreground border-foreground",
+        "rounded-full text-muted-foreground px-4 bg-accent",
+        props.isActive && "text-foreground border-foreground/50",
      )}
      variant="outline"
    >
@@ -1,7 +1,7 @@
 "use client";

 import { useCallback, useMemo } from "react";
-import type { ThirdwebClient } from "thirdweb";
+import type { Bridge, ThirdwebClient } from "thirdweb";
 import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
@@ -296,3 +296,89 @@ export function SingleNetworkSelector(props: {
    />
  );
 }
+
+type BridgeNetworkSelectorProps = {
+  chainId: number | undefined;
+  onChange: (chainId: number) => void;
+  className?: string;
+  popoverContentClassName?: string;
+  side?: "left" | "right" | "top" | "bottom";
+  align?: "center" | "start" | "end";
+  placeholder?: string;
+  client: ThirdwebClient;
+  chains: Bridge.chains.Result;
+};
+
+export function BridgeNetworkSelector(props: BridgeNetworkSelectorProps) {
+  const options = useMemo(() => {
+    return props.chains.map((chain) => {
+      return {
+        label: cleanChainName(chain.name),
+        value: String(chain.chainId),
+      };
+    });
+  }, [props.chains]);
+
+  const searchFn = useCallback(
+    (option: Option, searchValue: string) => {
+      const chain = props.chains.find(
+        (chain) => chain.chainId === Number(option.value),
+      );
+      if (!chain) {
+        return false;
+      }
+
+      if (Number.isInteger(Number.parseInt(searchValue))) {
+        return String(chain.chainId).startsWith(searchValue);
+      }
+      return chain.name.toLowerCase().includes(searchValue.toLowerCase());
+    },
+    [props.chains],
+  );
+
+  const renderOption = useCallback(
+    (option: Option) => {
+      const chain = props.chains.find(
+        (chain) => chain.chainId === Number(option.value),
+      );
+      if (!chain) {
+        return option.label;
+      }
+
+      return (
+        <div className="flex justify-between gap-4">
+          <span className="flex grow gap-2 truncate text-left">
+            <ChainIconClient
+              className="size-5"
+              client={props.client}
+              src={chain.icon}
+              loading="lazy"
+            />
+            {cleanChainName(chain.name)}
+          </span>
+        </div>
+      );
+    },
+    [props.chains, props.client],
+  );
+
+  return (
+    <SelectWithSearch
+      align={props.align}
+      className={props.className}
+      closeOnSelect={true}
+      onValueChange={(chainId) => {
+        props.onChange(Number(chainId));
+      }}
+      options={options}
+      overrideSearchFn={searchFn}
+      placeholder={props.placeholder || "Select Chain"}
+      popoverContentClassName={props.popoverContentClassName}
+      renderOption={renderOption}
+      searchPlaceholder="Search by Name or Chain ID"
+      showCheck={false}
+      side={props.side}
+      value={props.chainId?.toString()}
+    />
+  );
+}
@@ -30,6 +30,7 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
    description?: string;
    titleClassName?: string;
    headerClassName?: string;
+    icon?: React.ReactNode;
  };
  customHeader?: React.ReactNode;
  // chart config
@@ -70,6 +71,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
    <Card className={props.className}>
      {props.header && (
        <CardHeader className={props.header.headerClassName}>
+          {props.header.icon}
          <CardTitle className={cn("mb-2", props.header.titleClassName)}>
            {props.header.title}
          </CardTitle>
@@ -4,9 +4,10 @@ import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { ClientOnly } from "@/components/blocks/client-only";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { Skeleton } from "../ui/skeleton";

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

  return (
@@ -15,7 +16,10 @@ export function ToggleThemeButton() {
    >
      <Button
        aria-label="Toggle theme"
-        className="h-auto w-auto rounded-full border border-border bg-background p-2"
+        className={cn(
+          "h-auto w-auto rounded-full border border-border bg-background p-2",
+          props.className,
+        )}
        onClick={() => {
          setTheme(theme === "dark" ? "light" : "dark");
        }}
@@ -0,0 +1,73 @@
+"use client";
+import { ChevronDownIcon } from "lucide-react";
+import { useId, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { cn } from "@/lib/utils";
+
+export function FaqSection(props: {
+  faqs: Array<{ title: string; description: string }>;
+}) {
+  return (
+    <section>
+      <h2 className="text-2xl md:text-3xl font-semibold mb-4 tracking-tight">
+        Frequently asked questions
+      </h2>
+      <div className="flex flex-col">
+        {props.faqs.map((faq, faqIndex) => (
+          <FaqItem
+            key={faq.title}
+            title={faq.title}
+            description={faq.description}
+            className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function FaqItem(props: {
+  title: string;
+  description: string;
+  className?: string;
+}) {
+  const [isOpen, setIsOpenn] = useState(false);
+  const contentId = useId();
+  return (
+    <DynamicHeight>
+      <div className={cn("border-b border-dashed", props.className)}>
+        <h3>
+          <Button
+            variant="ghost"
+            onClick={() => setIsOpenn(!isOpen)}
+            aria-controls={contentId}
+            aria-expanded={isOpen}
+            className={cn(
+              "w-full justify-between h-auto py-5 text-base text-muted-foreground hover:bg-transparent pl-0 text-wrap text-left gap-6",
+              isOpen && "text-foreground",
+            )}
+          >
+            {props.title}
+            <ChevronDownIcon
+              className={cn(
+                "size-4 shrink-0 transition-transform duration-200",
+                isOpen && "rotate-180",
+              )}
+            />
+          </Button>
+        </h3>
+
+        <p
+          className={cn(
+            "text-muted-foreground text-base leading-7 pb-6 max-w-4xl",
+            !isOpen && "hidden",
+          )}
+          id={contentId}
+        >
+          {props.description}
+        </p>
+      </div>
+    </DynamicHeight>
+  );
+}
@@ -4,7 +4,7 @@ export function GridPatternEmbedContainer(props: {
  children: React.ReactNode;
 }) {
  return (
-    <div className=" sm:flex sm:justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 rounded-lg overflow-hidden relative">
+    <div className="flex justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 sm:rounded-xl sm:overflow-hidden relative">
      <GridPattern
        width={30}
        height={30}
@@ -17,7 +17,7 @@ export function GridPatternEmbedContainer(props: {
            "linear-gradient(to bottom right,white,transparent,transparent)",
        }}
      />
-      <div className="sm:w-[420px] z-10">{props.children}</div>
+      <div className="z-10 min-w-0">{props.children}</div>
    </div>
  );
 }
@@ -1,6 +1,6 @@
 "use client";

-import { MessageCircleIcon, XIcon } from "lucide-react";
+import { CircleQuestionMarkIcon, XIcon } from "lucide-react";
 import { useSelectedLayoutSegments } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { createThirdwebClient } from "thirdweb";
@@ -16,7 +16,6 @@ const client = createThirdwebClient({
 });

 export function CustomChatButton(props: {
-  label: string;
  examplePrompts: string[];
  authToken: string;
  team: Team;
@@ -39,21 +38,25 @@ export function CustomChatButton(props: {
    <>
      {/* Inline Button (not floating) */}
      <Button
-        className="gap-2 rounded-full shadow-lg"
+        className={cn(
+          "gap-2 rounded-full shadow-lg fixed right-6 bottom-6 z-50 bg-card",
+          isOpen && "opacity-0",
+        )}
+        size="sm"
        onClick={() => {
          setIsOpen(true);
          setHasBeenOpened(true);
        }}
-        variant="default"
+        variant="outline"
      >
-        <MessageCircleIcon className="size-4" />
-        {props.label}
+        <CircleQuestionMarkIcon className="size-3.5 text-muted-foreground" />
+        Need help?
      </Button>

      {/* Popup/Modal */}
      <div
        className={cn(
-          "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-xl",
+          "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-2xl",
          !isOpen && "hidden",
        )}
        ref={ref}
@@ -61,8 +64,7 @@ export function CustomChatButton(props: {
        {/* Header with close button */}
        <div className="flex items-center justify-between border-b px-4 py-4">
          <div className="flex items-center gap-2 font-semibold text-lg">
-            <MessageCircleIcon className="size-5 text-muted-foreground" />
-            {props.label}
+            Need help?
          </div>
          <Button
            aria-label="Close chat"
@@ -46,7 +46,7 @@ export function AdvancedSearchInput(props: {
        value={searchType}
        onValueChange={(value) => setSearchType(value as SearchType)}
      >
-        <SelectTrigger className="w-[140px] bg-card">
+        <SelectTrigger className="w-[140px] bg-background rounded-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
@@ -61,7 +61,7 @@ export function AdvancedSearchInput(props: {
      <div className="flex flex-1">
        <div className="relative flex-1">
          <Input
-            className="bg-card pl-9 border-r-0 rounded-r-none"
+            className="bg-background pl-9 border-r-0 rounded-r-none rounded-l-full"
            placeholder={`Search by ${searchType}...`}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
@@ -86,7 +86,7 @@ export function AdvancedSearchInput(props: {
          onClick={handleSearch}
          variant="outline"
          disabled={!query.trim() || props.isLoading}
-          className="rounded-l-none gap-2 bg-card disabled:opacity-100"
+          className="rounded-l-none rounded-r-full gap-2 bg-background disabled:opacity-100"
        >
          {props.isLoading && <Spinner className="size-4" />}
          Search
@@ -2,7 +2,7 @@

 import { createColumnHelper } from "@tanstack/react-table";
 import { format } from "date-fns";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { ArrowLeftIcon, ArrowRightIcon, UserIcon } from "lucide-react";
 import Papa from "papaparse";
 import { useCallback, useMemo, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
@@ -264,11 +264,24 @@ export function InAppWalletUsersPageContent(

  return (
    <div>
-      <div className="flex flex-col gap-4">
-        {/* Top section */}
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col md:flex-row lg:items-center justify-end gap-3">
-            <div className="w-full max-w-lg">
+      <div className="overflow-hidden rounded-xl border border-border bg-card">
+        <div className="flex flex-col lg:flex-row lg:justify-between p-4 lg:px-6 py-5 lg:items-center gap-5">
+          <div>
+            <div className="flex mb-3">
+              <div className="p-2 rounded-full bg-background border border-border">
+                <UserIcon className="size-5 text-muted-foreground" />
+              </div>
+            </div>
+            <h2 className="font-semibold text-2xl tracking-tight">
+              User Wallets
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              View and manage your project's users
+            </p>
+          </div>
+
+          <div className="flex flex-col items-start lg:items-end gap-2.5 border-t lg:border-t-0 pt-5 lg:pt-0 border-dashed">
+            <div className="w-full lg:w-auto lg:min-w-[320px]">
              <AdvancedSearchInput
                onSearch={handleSearch}
                onClear={handleClearSearch}
@@ -277,7 +290,7 @@ export function InAppWalletUsersPageContent(
              />
            </div>
            <Button
-              className="gap-2 bg-card"
+              className="gap-2 bg-background rounded-full"
              disabled={wallets.length === 0 || isPending}
              onClick={downloadCSV}
              variant="outline"
@@ -298,11 +311,11 @@ export function InAppWalletUsersPageContent(
                data={wallets}
                isFetched={walletsQuery.isFetched}
                isPending={walletsQuery.isPending}
-                tableContainerClassName="rounded-b-none"
+                tableContainerClassName="rounded-none border-x-0 border-b-0"
                title="in-app wallets"
              />

-              <div className="flex justify-center gap-3 rounded-b-lg border border-t-0 bg-card p-6">
+              <div className="flex justify-center gap-3 border-t bg-card p-6">
                <Button
                  className="gap-2 bg-background"
                  disabled={activePage === 1 || walletsQuery.isPending}
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { useLocalStorage } from "@/hooks/useLocalStorage";

+// biome-ignore lint/correctness/noUnusedVariables: banner is toggled on-demand via API content changes
 function AnnouncementBannerUI(props: {
  href: string;
  label: string;
@@ -44,11 +45,12 @@ function AnnouncementBannerUI(props: {
 }

 export function AnnouncementBanner() {
-  return (
-    <AnnouncementBannerUI
-      href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
-      label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
-      trackingLabel="product-rebrand"
-    />
-  );
+  // return (
+  //   <AnnouncementBannerUI
+  //     href="https://blog.thirdweb.com/the-fastest-way-to-build-web3-applications/"
+  //     label="We have re-branded our Engine, Payments, and Connect products. Please read the full blog post for details on changes"
+  //     trackingLabel="product-rebrand"
+  //   />
+  // );
+  return null;
 }
@@ -64,7 +64,7 @@ const CreateProjectDialog = (props: CreateProjectDialogProps) => {
    <CreateProjectDialogUI
      createProject={async (params) => {
        const res = await createProjectClient(props.teamId, params);
-        await createVaultAccountAndAccessToken({
+        const vaultTokens = await createVaultAccountAndAccessToken({
          project: res.project,
          projectSecretKey: res.secret,
        }).catch((error) => {
@@ -74,6 +74,13 @@ const CreateProjectDialog = (props: CreateProjectDialogProps) => {
          );
          throw error;
        });
+
+        const managementAccessToken = vaultTokens.managementToken?.accessToken;
+
+        if (!managementAccessToken) {
+          throw new Error("Missing management access token for project wallet");
+        }
+
        return {
          project: res.project,
          secret: res.secret,
@@ -32,3 +32,12 @@ export const NEXT_PUBLIC_DEMO_ENGINE_URL =

 export const NEXT_PUBLIC_THIRDWEB_AI_HOST =
  process.env.NEXT_PUBLIC_THIRDWEB_AI_HOST || "https://nebula-api.thirdweb.com";
+
+export const NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID =
+  process.env.NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID;
+
+export const NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID =
+  process.env.NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID;
+
+export const NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID =
+  process.env.NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID;
@@ -92,23 +92,7 @@ if (REDIS_URL) {
  );
 }

+// DO NOT TAINT THESE VALUES (for now)
 export const GROWTH_PLAN_SKU = process.env.GROWTH_PLAN_SKU || "";
-
-if (GROWTH_PLAN_SKU) {
-  experimental_taintUniqueValue(
-    "Do not pass GROWTH_PLAN_SKU to the client",
-    process,
-    GROWTH_PLAN_SKU,
-  );
-}
-
 export const PAYMENT_METHOD_CONFIGURATION =
  process.env.PAYMENT_METHOD_CONFIGURATION || "";
-
-if (PAYMENT_METHOD_CONFIGURATION) {
-  experimental_taintUniqueValue(
-    "Do not pass PAYMENT_METHOD_CONFIGURATION to the client",
-    process,
-    PAYMENT_METHOD_CONFIGURATION,
-  );
-}
@@ -25,6 +25,7 @@ import { getVercelEnv } from "@/utils/vercel";
 export function getConfiguredThirdwebClient(options: {
  secretKey: string | undefined;
  teamId: string | undefined;
+  clientId?: string;
 }): ThirdwebClient {
  if (getVercelEnv() !== "production") {
    // if not on production: run this when creating a client to set the domains
@@ -77,7 +78,8 @@ export function getConfiguredThirdwebClient(options: {
  }

  // During build time, provide fallbacks if credentials are missing
-  const clientId = NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "dummy-build-client";
+  const clientId =
+    options.clientId || NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "dummy-build-client";
  const secretKey = options.secretKey || undefined;

  return createThirdwebClient({
@@ -119,12 +119,17 @@ export function useCsvUpload<
      }
      Papa.parse(csv, {
        complete: (results) => {
-          const data = props.csvParser(results.data as T[]);
-          if (!data[0]?.address) {
+          try {
+            const data = props.csvParser(results.data as T[]);
+            if (!data[0]?.address) {
+              setNoCsv(true);
+              return;
+            }
+            setRawData(data);
+          } catch (error) {
+            console.error(error);
            setNoCsv(true);
-            return;
          }
-          setRawData(data);
        },
        header: true,
      });
@@ -379,12 +379,27 @@ export function useEngineTransactions(params: {
    page?: number;
    status?: EngineStatus;
  };
+  id?: string;
 }) {
-  const { instanceUrl, autoUpdate, authToken } = params;
+  const { instanceUrl, autoUpdate, authToken, id } = params;

  return useQuery({
    placeholderData: keepPreviousData,
    queryFn: async () => {
+      if (id) {
+        const res = await fetch(`${instanceUrl}transaction/status/${id}`, {
+          headers: getEngineRequestHeaders(authToken),
+          method: "GET",
+        });
+
+        const json = await res.json();
+        const transaction = (json.result as Transaction) || {};
+        return {
+          transactions: [transaction],
+          totalCount: 1,
+        };
+      }
+
      const url = new URL(`${instanceUrl}transaction/get-all`);
      if (params.queryParams) {
        for (const key in params.queryParams) {
@@ -402,7 +417,6 @@ export function useEngineTransactions(params: {
      });

      const json = await res.json();
-
      return (json.result as TransactionResponse) || {};
    },
    queryKey: engineKeys.transactions(instanceUrl, params),
@@ -0,0 +1,21 @@
+const PROJECT_WALLET_LABEL_SUFFIX = " Wallet";
+const PROJECT_WALLET_LABEL_MAX_LENGTH = 32;
+
+/**
+ * Builds the default label for a project's primary server wallet.
+ * Ensures a stable naming convention so the wallet can be identified across flows.
+ */
+export function getProjectWalletLabel(projectName: string | undefined) {
+  const baseName = projectName?.trim() || "Project";
+  const maxBaseLength = Math.max(
+    1,
+    PROJECT_WALLET_LABEL_MAX_LENGTH - PROJECT_WALLET_LABEL_SUFFIX.length,
+  );
+
+  const normalizedBase =
+    baseName.length > maxBaseLength
+      ? baseName.slice(0, maxBaseLength).trimEnd()
+      : baseName;
+
+  return `${normalizedBase}${PROJECT_WALLET_LABEL_SUFFIX}`;
+}
@@ -0,0 +1,99 @@
+import "server-only";
+
+import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import type { Project } from "@/api/project/projects";
+import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
+import { getProjectWalletLabel } from "@/lib/project-wallet";
+
+export type ProjectWalletSummary = {
+  id: string;
+  address: string;
+  label?: string;
+};
+
+type VaultWalletListItem = {
+  id: string;
+  address: string;
+  metadata?: {
+    label?: string;
+    projectId?: string;
+    teamId?: string;
+    type?: string;
+  };
+};
+
+export async function getProjectWallet(
+  project: Project,
+): Promise<ProjectWalletSummary | undefined> {
+  const engineCloudService = project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+
+  const managementAccessToken =
+    engineCloudService?.managementAccessToken || undefined;
+  const projectWalletAddress = (
+    engineCloudService as { projectWalletAddress?: string } | undefined
+  )?.projectWalletAddress;
+
+  if (
+    !managementAccessToken ||
+    !NEXT_PUBLIC_THIRDWEB_VAULT_URL ||
+    !projectWalletAddress
+  ) {
+    return undefined;
+  }
+
+  try {
+    const vaultClient = await createVaultClient({
+      baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
+    });
+
+    const response = await listEoas({
+      client: vaultClient,
+      request: {
+        auth: {
+          accessToken: managementAccessToken,
+        },
+        options: {
+          page: 0,
+          // @ts-expect-error - SDK expects snake_case for pagination arguments
+          page_size: 100,
+        },
+      },
+    });
+
+    if (!response.success || !response.data) {
+      return undefined;
+    }
+
+    const items = response.data.items as VaultWalletListItem[] | undefined;
+
+    if (!items?.length) {
+      return undefined;
+    }
+
+    const defaultLabel = getProjectWalletLabel(project.name);
+
+    const serverWallets = items.filter(
+      (item) => item.metadata?.projectId === project.id,
+    );
+
+    const defaultWallet = serverWallets.find(
+      (item) =>
+        item.address.toLowerCase() === projectWalletAddress.toLowerCase(),
+    );
+
+    if (!defaultWallet) {
+      return undefined;
+    }
+
+    return {
+      id: defaultWallet.id,
+      address: defaultWallet.address,
+      label: defaultWallet.metadata?.label ?? defaultLabel,
+    };
+  } catch (error) {
+    console.error("Failed to load project wallet", error);
+    return undefined;
+  }
+}
@@ -31,9 +31,9 @@ export function getSDKTheme(theme: "light" | "dark"): Theme {
      selectedTextBg: "hsl(var(--inverted))",
      selectedTextColor: "hsl(var(--inverted-foreground))",
      separatorLine: "hsl(var(--border))",
-      skeletonBg: "hsl(var(--muted))",
+      skeletonBg: "hsl(var(--secondary-foreground)/15%)",
      success: "hsl(var(--success-text))",
-      tertiaryBg: "hsl(var(--muted)/50%)",
+      tertiaryBg: "hsl(var(--muted)/30%)",
      tooltipBg: "hsl(var(--popover))",
      tooltipText: "hsl(var(--popover-foreground))",
    },
@@ -1,12 +0,0 @@
-import { TeamHeader } from "../../team/components/TeamHeader/team-header";
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex grow flex-col">
-      <div className="border-border border-b bg-card">
-        <TeamHeader />
-      </div>
-      {children}
-    </div>
-  );
-}
@@ -1,37 +0,0 @@
-"use client";
-
-import { usePathname, useSearchParams } from "next/navigation";
-import { useCallback } from "react";
-import { PaginationButtons } from "@/components/blocks/pagination-buttons";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-type ChainlistPaginationProps = {
-  totalPages: number;
-  activePage: number;
-};
-
-export const ChainlistPagination: React.FC<ChainlistPaginationProps> = ({
-  activePage,
-  totalPages,
-}) => {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const router = useDashboardRouter();
-
-  const createPageURL = useCallback(
-    (pageNumber: number) => {
-      const params = new URLSearchParams(searchParams || undefined);
-      params.set("page", pageNumber.toString());
-      return `${pathname}?${params.toString()}`;
-    },
-    [pathname, searchParams],
-  );
-
-  return (
-    <PaginationButtons
-      activePage={activePage}
-      onPageClick={(page) => router.push(createPageURL(page))}
-      totalPages={totalPages}
-    />
-  );
-};
@@ -1,74 +0,0 @@
-"use client";
-
-import { SearchIcon, XCircleIcon } from "lucide-react";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect, useRef } from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-function cleanUrl(url: string) {
-  if (url.endsWith("?")) {
-    return url.slice(0, -1);
-  }
-  return url;
-}
-
-export const SearchInput: React.FC = () => {
-  const router = useDashboardRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    // reset the input if the query param is removed
-    if (inputRef.current?.value && !searchParams?.get("query")) {
-      inputRef.current.value = "";
-    }
-  }, [searchParams]);
-
-  const handleSearch = useDebouncedCallback((term: string) => {
-    const params = new URLSearchParams(searchParams ?? undefined);
-    if (term) {
-      params.set("query", term);
-    } else {
-      params.delete("query");
-    }
-    // always delete the page number when searching
-    params.delete("page");
-    const url = cleanUrl(`${pathname}?${params.toString()}`);
-    router.replace(url);
-  }, 300);
-
-  return (
-    <div className="group relative w-full">
-      <SearchIcon className="-translate-y-1/2 absolute top-[50%] left-3 size-4 text-muted-foreground" />
-      <Input
-        className="h-10 rounded-lg bg-card py-2 pl-9 lg:min-w-[300px]"
-        defaultValue={searchParams?.get("query") || ""}
-        onChange={(e) => handleSearch(e.target.value)}
-        placeholder="Search by token name or symbol"
-        ref={inputRef}
-      />
-      {searchParams?.has("query") && (
-        <Button
-          className="-translate-y-1/2 absolute top-[50%] right-0 bg-background text-muted-foreground opacity-0 transition duration-300 ease-in-out group-hover:opacity-100"
-          onClick={() => {
-            const params = new URLSearchParams(searchParams ?? undefined);
-            params.delete("query");
-            params.delete("page");
-            const url = cleanUrl(`${pathname}?${params.toString()}`);
-            router.replace(url);
-          }}
-          size="icon"
-          variant="outline"
-        >
-          <XCircleIcon className="size-5" />
-        </Button>
-      )}
-    </div>
-  );
-};
@@ -1,55 +0,0 @@
-"use client";
-
-import { ArrowDownLeftIcon, ArrowUpRightIcon } from "lucide-react";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useCallback } from "react";
-import { Button } from "@/components/ui/button";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-type QueryTypeProps = {
-  activeType: "origin" | "destination";
-};
-
-export const QueryType: React.FC<QueryTypeProps> = ({ activeType }) => {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const router = useDashboardRouter();
-
-  const createPageURL = useCallback(
-    (type: "origin" | "destination") => {
-      const params = new URLSearchParams(searchParams || undefined);
-      params.set("type", type);
-      return `${pathname}?${params.toString()}`;
-    },
-    [pathname, searchParams],
-  );
-  return (
-    <div className="flex flex-row">
-      <ToolTipLabel contentClassName="w-full" label="Origin">
-        <Button
-          className="rounded-r-none"
-          onClick={() => {
-            router.replace(createPageURL("origin"));
-          }}
-          size="icon"
-          variant={activeType === "origin" ? "default" : "outline"}
-        >
-          <ArrowUpRightIcon strokeWidth={1} />
-        </Button>
-      </ToolTipLabel>
-      <ToolTipLabel contentClassName="w-full" label="Destination">
-        <Button
-          className="rounded-l-none"
-          onClick={() => {
-            router.replace(createPageURL("destination"));
-          }}
-          size="icon"
-          variant={activeType === "destination" ? "default" : "outline"}
-        >
-          <ArrowDownLeftIcon strokeWidth={1} />
-        </Button>
-      </ToolTipLabel>
-    </div>
-  );
-};
@@ -1,50 +0,0 @@
-"use client";
-
-import { Grid2X2Icon, ListIcon } from "lucide-react";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useCallback } from "react";
-import { Button } from "@/components/ui/button";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-type RouteListViewProps = {
-  activeView: "grid" | "table";
-};
-
-export const RouteListView: React.FC<RouteListViewProps> = ({ activeView }) => {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const router = useDashboardRouter();
-
-  const createPageURL = useCallback(
-    (view: "grid" | "table") => {
-      const params = new URLSearchParams(searchParams || undefined);
-      params.set("view", view);
-      return `${pathname}?${params.toString()}`;
-    },
-    [pathname, searchParams],
-  );
-  return (
-    <div className="flex flex-row">
-      <Button
-        className="rounded-r-none"
-        onClick={() => {
-          router.replace(createPageURL("table"));
-        }}
-        size="icon"
-        variant={activeView === "table" ? "default" : "outline"}
-      >
-        <ListIcon strokeWidth={1} />
-      </Button>
-      <Button
-        className="rounded-l-none"
-        onClick={() => {
-          router.replace(createPageURL("grid"));
-        }}
-        size="icon"
-        variant={activeView === "grid" ? "default" : "outline"}
-      >
-        <Grid2X2Icon strokeWidth={1} />
-      </Button>
-    </div>
-  );
-};
@@ -1,141 +0,0 @@
-import { ExternalLinkIcon } from "lucide-react";
-import Link from "next/link";
-import { defineChain, getAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
-import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
-
-type RouteListCardProps = {
-  originChainId: number;
-  originTokenAddress: string;
-  originTokenIconUri?: string | null;
-  originTokenSymbol: string;
-  originTokenName: string;
-  destinationChainId: number;
-  destinationTokenAddress: string;
-  destinationTokenIconUri?: string | null;
-  destinationTokenSymbol: string;
-  destinationTokenName: string;
-};
-
-export async function RouteListCard({
-  originChainId,
-  originTokenAddress,
-  originTokenIconUri,
-  originTokenName,
-  destinationChainId,
-  destinationTokenAddress,
-  destinationTokenIconUri,
-  destinationTokenName,
-}: RouteListCardProps) {
-  const [
-    originChain,
-    destinationChain,
-    resolvedOriginTokenIconUri,
-    resolvedDestinationTokenIconUri,
-  ] = await Promise.all([
-    // eslint-disable-next-line no-restricted-syntax
-    getChainMetadata(defineChain(originChainId)),
-    // eslint-disable-next-line no-restricted-syntax
-    getChainMetadata(defineChain(destinationChainId)),
-    originTokenIconUri
-      ? resolveSchemeWithErrorHandler({
-          client: serverThirdwebClient,
-          uri: originTokenIconUri,
-        })
-      : undefined,
-    destinationTokenIconUri
-      ? resolveSchemeWithErrorHandler({
-          client: serverThirdwebClient,
-          uri: destinationTokenIconUri,
-        })
-      : undefined,
-  ]);
-
-  return (
-    <div className="relative h-full">
-      <Card className="h-full w-full">
-        <CardHeader className="flex flex-row items-center justify-between p-4">
-          <div className="flex flex-row items-center gap-2">
-            {resolvedOriginTokenIconUri ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                alt={originTokenAddress}
-                className="size-8 rounded-full border border-muted-foreground"
-                src={resolvedOriginTokenIconUri}
-              />
-            ) : (
-              <div className="size-8 rounded-full bg-muted-foreground" />
-            )}
-            {resolvedDestinationTokenIconUri ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                alt={destinationTokenAddress}
-                className="-translate-x-4 size-8 rounded-full border border-muted-foreground ring-2 ring-card"
-                src={resolvedDestinationTokenIconUri}
-              />
-            ) : (
-              <div className="-translate-x-4 size-8 rounded-full bg-muted-foreground ring-2 ring-card" />
-            )}
-          </div>
-        </CardHeader>
-
-        <CardContent className="px-4 pt-0 pb-4">
-          <div className="flex flex-col gap-1">
-            <div className="flex justify-between gap-2">
-              <TokenName
-                chainMetadata={originChain}
-                tokenAddress={originTokenAddress}
-                tokenName={originTokenName}
-              />
-              <div className="text-right text-base text-muted-foreground">
-                {originChain.name}
-              </div>
-            </div>
-
-            <div className="flex justify-between gap-2">
-              <TokenName
-                chainMetadata={destinationChain}
-                tokenAddress={destinationTokenAddress}
-                tokenName={destinationTokenName}
-              />
-              <div className="text-right text-base text-muted-foreground">
-                {destinationChain.name}
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-const nativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS);
-
-function TokenName(props: {
-  tokenAddress: string;
-  tokenName: string;
-  chainMetadata: ChainMetadata;
-}) {
-  const isERC20 = getAddress(props.tokenAddress) !== nativeTokenAddress;
-
-  if (isERC20) {
-    return (
-      <Link
-        className="flex items-center gap-1.5 font-normal text-base group/link hover:underline underline-offset-4 decoration-muted-foreground/50 decoration-dotted"
-        href={`https://thirdweb.com/${props.chainMetadata.slug}/${props.tokenAddress}`}
-        target="_blank"
-      >
-        {props.tokenName}
-        <ExternalLinkIcon className="size-3.5 text-muted-foreground group-hover/link:text-foreground" />
-      </Link>
-    );
-  }
-
-  return (
-    <div className="text-left font-normal text-base">
-      {props.chainMetadata.nativeCurrency.name}
-    </div>
-  );
-}
@@ -1,136 +0,0 @@
-import { ExternalLinkIcon } from "lucide-react";
-import Link from "next/link";
-import { getAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
-import {
-  type ChainMetadata,
-  defineChain,
-  getChainMetadata,
-} from "thirdweb/chains";
-import { shortenAddress } from "thirdweb/utils";
-import { Img } from "@/components/blocks/Img";
-import { Button } from "@/components/ui/button";
-import { TableCell, TableRow } from "@/components/ui/table";
-import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
-
-type RouteListRowProps = {
-  originChainId: number;
-  originTokenAddress: string;
-  originTokenIconUri?: string | null;
-  originTokenSymbol?: string;
-  originTokenName?: string;
-  destinationChainId: number;
-  destinationTokenAddress: string;
-  destinationTokenIconUri?: string | null;
-  destinationTokenSymbol?: string;
-  destinationTokenName?: string;
-};
-
-export async function RouteListRow({
-  originChainId,
-  originTokenAddress,
-  originTokenIconUri,
-  originTokenSymbol,
-  destinationChainId,
-  destinationTokenAddress,
-  destinationTokenIconUri,
-  destinationTokenSymbol,
-}: RouteListRowProps) {
-  const [
-    originChain,
-    destinationChain,
-    resolvedOriginTokenIconUri,
-    resolvedDestinationTokenIconUri,
-  ] = await Promise.all([
-    // eslint-disable-next-line no-restricted-syntax
-    getChainMetadata(defineChain(originChainId)),
-    // eslint-disable-next-line no-restricted-syntax
-    getChainMetadata(defineChain(destinationChainId)),
-    originTokenIconUri
-      ? resolveSchemeWithErrorHandler({
-          client: serverThirdwebClient,
-          uri: originTokenIconUri,
-        })
-      : undefined,
-    destinationTokenIconUri
-      ? resolveSchemeWithErrorHandler({
-          client: serverThirdwebClient,
-          uri: destinationTokenIconUri,
-        })
-      : undefined,
-  ]);
-
-  return (
-    <TableRow className="group">
-      <TableCell>
-        <TokenInfo
-          chainMetadata={originChain}
-          tokenAddress={originTokenAddress}
-          tokenIconUri={resolvedOriginTokenIconUri}
-          tokenSymbol={originTokenSymbol}
-        />
-      </TableCell>
-
-      <TableCell className="text-muted-foreground/90">
-        <span className="font-medium">{originChain.name}</span>
-      </TableCell>
-
-      <TableCell>
-        <TokenInfo
-          chainMetadata={destinationChain}
-          tokenAddress={destinationTokenAddress}
-          tokenIconUri={resolvedDestinationTokenIconUri}
-          tokenSymbol={destinationTokenSymbol}
-        />
-      </TableCell>
-
-      <TableCell className="text-muted-foreground/90">
-        <span className="font-medium">{destinationChain.name}</span>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-const nativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS);
-
-function TokenInfo(props: {
-  tokenAddress: string;
-  tokenSymbol: string | undefined;
-  chainMetadata: ChainMetadata;
-  tokenIconUri: string | undefined;
-}) {
-  const isERC20 = getAddress(props.tokenAddress) !== nativeTokenAddress;
-
-  return (
-    <div className="flex items-center gap-1.5">
-      {props.tokenIconUri ? (
-        <Img
-          alt={props.tokenAddress}
-          className="size-7 rounded-full border border-border/50"
-          src={props.tokenIconUri}
-        />
-      ) : (
-        <div className="size-7 rounded-full bg-muted-foreground/20" />
-      )}
-      {isERC20 ? (
-        <Button
-          asChild
-          className="h-auto w-auto py-1 px-1.5 gap-2"
-          variant="ghost"
-        >
-          <Link
-            href={`https://thirdweb.com/${props.chainMetadata.slug}/${props.tokenAddress}`}
-            target="_blank"
-          >
-            {props.tokenSymbol || shortenAddress(props.tokenAddress)}
-            <ExternalLinkIcon className="size-3.5 text-muted-foreground" />
-          </Link>
-        </Button>
-      ) : (
-        <span className="font-medium text-sm px-1.5 py-1">
-          {props.chainMetadata.nativeCurrency.symbol}
-        </span>
-      )}
-    </div>
-  );
-}
@@ -1,176 +0,0 @@
-import type { Address } from "thirdweb";
-import {
-  Table,
-  TableBody,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { getRoutes } from "../../../utils";
-import { ChainlistPagination } from "../client/pagination";
-import { RouteListCard } from "./routelist-card";
-import { RouteListRow } from "./routelist-row";
-
-export type SearchParams = Partial<{
-  includeDeprecated: boolean;
-  query: string;
-  page: number;
-  type: "origin" | "destination";
-  // maybe later we'll have a page size param?
-  // pageSize: number;
-  view: "table" | "grid";
-}>;
-
-// 120 is divisible by 2, 3, and 4 so card layout looks nice
-const DEFAULT_PAGE_SIZE = 120;
-
-async function getRoutesToRender(params: SearchParams) {
-  const filters: Partial<{
-    originQuery?: string;
-    destinationQuery?: string;
-    originChainId?: number;
-    originTokenAddress?: Address;
-    destinationChainId?: number;
-    destinationTokenAddress?: Address;
-  }> = {};
-
-  if (params.type === "origin" || typeof params.type === "undefined") {
-    if (params.query?.startsWith("0x")) {
-      filters.originTokenAddress = params.query as Address;
-    } else if (Number.isInteger(Number(params.query))) {
-      filters.originChainId = Number(params.query);
-    } else if (params.query) {
-      filters.originQuery = params.query;
-    }
-  } else if (params.type === "destination") {
-    if (params.query?.startsWith("0x")) {
-      filters.destinationTokenAddress = params.query as Address;
-    } else if (Number.isInteger(Number(params.query))) {
-      filters.destinationChainId = Number(params.query);
-    } else if (params.query) {
-      filters.destinationQuery = params.query;
-    }
-  }
-  const routes = await getRoutes({
-    destinationQuery: filters.destinationQuery,
-    limit: DEFAULT_PAGE_SIZE,
-    offset: DEFAULT_PAGE_SIZE * ((params.page || 1) - 1),
-    originQuery: filters.originQuery,
-  });
-
-  return {
-    filteredCount: routes.meta.filteredCount,
-    routesToRender: routes.data,
-    totalCount: routes.meta.totalCount,
-  };
-}
-
-export async function RoutesData(props: {
-  searchParams: SearchParams;
-  activeView: "table" | "grid";
-  isLoggedIn: boolean;
-}) {
-  const { routesToRender, totalCount, filteredCount } = await getRoutesToRender(
-    props.searchParams,
-  );
-
-  const totalPages = Math.ceil(filteredCount / DEFAULT_PAGE_SIZE);
-
-  return (
-    <>
-      <main>
-        {/* empty state */}
-        {routesToRender.length === 0 ? (
-          <div className="flex h-[300px] items-center justify-center rounded-lg border p-8 lg:h-[500px]">
-            <p className="text-2xl">No Results found</p>
-          </div>
-        ) : props.activeView === "table" ? (
-          <TableContainer>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Origin Token</TableHead>
-                  <TableHead>Origin Chain</TableHead>
-                  <TableHead>Destination Token</TableHead>
-                  <TableHead>Destination Chain</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {routesToRender.map((route) => (
-                  <RouteListRow
-                    destinationChainId={route.destinationToken.chainId}
-                    destinationTokenAddress={route.destinationToken.address}
-                    destinationTokenIconUri={route.destinationToken.iconUri}
-                    destinationTokenName={route.destinationToken.name}
-                    destinationTokenSymbol={route.destinationToken.symbol}
-                    key={`${route.originToken.chainId}:${route.originToken.address}-${route.destinationToken.chainId}:${route.destinationToken.address}`}
-                    originChainId={route.originToken.chainId}
-                    originTokenAddress={route.originToken.address}
-                    originTokenIconUri={route.originToken.iconUri}
-                    originTokenName={route.originToken.name}
-                    originTokenSymbol={route.originToken.symbol}
-                  />
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        ) : (
-          <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {routesToRender.map((route) => (
-              <li
-                className="h-full"
-                key={`${route.originToken.chainId}:${route.originToken.address}-${route.destinationToken.chainId}:${route.destinationToken.address}`}
-              >
-                <RouteListCard
-                  destinationChainId={route.destinationToken.chainId}
-                  destinationTokenAddress={route.destinationToken.address}
-                  destinationTokenIconUri={route.destinationToken.iconUri}
-                  destinationTokenName={route.destinationToken.name}
-                  destinationTokenSymbol={route.destinationToken.symbol}
-                  originChainId={route.originToken.chainId}
-                  originTokenAddress={route.originToken.address}
-                  originTokenIconUri={route.originToken.iconUri}
-                  originTokenName={route.originToken.name}
-                  originTokenSymbol={route.originToken.symbol}
-                />
-              </li>
-            ))}
-          </ul>
-        )}
-      </main>
-      <div className="h-10" />
-      {totalPages > 1 && (
-        <ChainlistPagination
-          activePage={Number(props.searchParams.page) || 1}
-          totalPages={totalPages}
-        />
-      )}
-      <div className="h-4" />
-      <p className="text-balance text-center text-muted-foreground text-sm">
-        Showing{" "}
-        <span className="text-accent-foreground">{routesToRender.length}</span>{" "}
-        out of{" "}
-        {filteredCount !== totalCount ? (
-          <>
-            <span className="text-accent-foreground">
-              {filteredCount.toLocaleString()}
-            </span>{" "}
-            routes that match filters. (Total:{" "}
-            <span className="text-accent-foreground">
-              {totalCount.toLocaleString()}
-            </span>
-            )
-          </>
-        ) : (
-          <>
-            <span className="text-accent-foreground">
-              {totalCount.toLocaleString()}
-            </span>{" "}
-            routes.
-          </>
-        )}
-      </p>
-    </>
-  );
-}
@@ -1,94 +0,0 @@
-import { ArrowUpRightIcon } from "lucide-react";
-import type { Metadata } from "next";
-import { headers } from "next/headers";
-import { getAuthToken } from "@/api/auth-token";
-import { SearchInput } from "./components/client/search";
-import { QueryType } from "./components/client/type";
-import { RouteListView } from "./components/client/view";
-import {
-  RoutesData,
-  type SearchParams,
-} from "./components/server/routes-table";
-
-const title = "Payments Routes: Swap, Bridge, and Onramp";
-const description =
-  "A list of token routes for swapping, bridging, and on-ramping between EVM chains with thirdweb.";
-
-export const metadata: Metadata = {
-  description,
-  openGraph: {
-    description,
-    title,
-  },
-  title,
-};
-
-export default async function RoutesPage(props: {
-  searchParams: Promise<SearchParams>;
-}) {
-  const authToken = await getAuthToken();
-  const headersList = await headers();
-  const viewportWithHint = Number(
-    headersList.get("Sec-Ch-Viewport-Width") || 0,
-  );
-  const searchParams = await props.searchParams;
-
-  const activeType = searchParams.type ?? "origin";
-
-  // default is driven by viewport hint
-  const activeView = searchParams.view
-    ? searchParams.view
-    : viewportWithHint > 1000
-      ? "table"
-      : "grid";
-
-  return (
-    <section className="container mx-auto flex h-full flex-col px-4 py-10">
-      <header className="flex flex-col gap-6">
-        <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
-          <div className="flex flex-col gap-2">
-            <h1 className="font-semibold text-4xl tracking-tighter lg:text-5xl">
-              Routes
-            </h1>
-          </div>
-          <div className="flex flex-row items-end gap-4 lg:flex-col">
-            <div className="flex w-full flex-row items-center gap-4">
-              <SearchInput />
-              <QueryType activeType={activeType} />
-              <RouteListView activeView={activeView} />
-            </div>
-          </div>
-        </div>
-      </header>
-      <div className="h-10" />
-      <div className="relative overflow-hidden rounded-lg border-2 border-green-500/20 bg-gradient-to-br from-card/80 to-card/50 p-4 shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.02)]">
-        <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
-        <div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-col gap-1">
-            <h3 className="font-medium text-lg">
-              Get Started with thirdweb Payments
-            </h3>
-            <p className="text-muted-foreground text-sm">
-              Simple, instant, and secure payments across any token and chain.
-            </p>
-          </div>
-          <a
-            className="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 font-medium text-sm text-white transition-all hover:bg-green-600/90 hover:shadow-sm"
-            href="https://portal.thirdweb.com/payments"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Learn More
-            <ArrowUpRightIcon className="size-4" />
-          </a>
-        </div>
-      </div>
-      <div className="h-10" />
-      <RoutesData
-        activeView={activeView}
-        isLoggedIn={!!authToken}
-        searchParams={searchParams}
-      />
-    </section>
-  );
-}
@@ -1,18 +0,0 @@
-import type { Address } from "thirdweb";
-
-export type Route = {
-  originToken: {
-    address: Address;
-    chainId: number;
-    iconUri?: string;
-    name: string;
-    symbol: string;
-  };
-  destinationToken: {
-    address: Address;
-    chainId: number;
-    iconUri?: string;
-    name: string;
-    symbol: string;
-  };
-};
@@ -1,48 +0,0 @@
-import "server-only";
-
-import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "@/constants/public-envs";
-import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
-import type { Route } from "./types/route";
-
-export async function getRoutes({
-  limit,
-  offset,
-  originQuery,
-  destinationQuery,
-}: {
-  limit?: number;
-  offset?: number;
-  originQuery?: string;
-  destinationQuery?: string;
-} = {}) {
-  const url = new URL(`${NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST}/v1/routes/search`);
-  if (limit) {
-    url.searchParams.set("limit", limit.toString());
-  }
-  if (offset) {
-    url.searchParams.set("offset", offset.toString());
-  }
-  if (originQuery) {
-    url.searchParams.set("originQuery", originQuery);
-  }
-  if (destinationQuery) {
-    url.searchParams.set("destinationQuery", destinationQuery);
-  }
-  url.searchParams.set("sortBy", "popularity");
-  const routesResponse = await fetch(url, {
-    headers: {
-      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
-    },
-    next: { revalidate: 60 * 60 },
-  });
-
-  if (!routesResponse.ok) {
-    throw new Error("Failed to fetch routes");
-  }
-  const routes: {
-    data: Route[];
-    meta: { totalCount: number; filteredCount: number };
-  } = await routesResponse.json();
-
-  return routes;
-}
@@ -0,0 +1,50 @@
+import "server-only";
+import { unstable_cache } from "next/cache";
+
+type ChainSeo = {
+  title: string;
+  description: string;
+  og: {
+    title: string;
+    description: string;
+    site_name: string;
+    url: string;
+  };
+  faqs: Array<{
+    title: string;
+    description: string;
+  }>;
+  chain: {
+    chainId: number;
+    name: string;
+    slug: string;
+    nativeCurrency: {
+      name: string;
+      symbol: string;
+      decimals: number;
+    };
+    testnet: boolean;
+    is_deprecated: boolean;
+  };
+};
+
+export const fetchChainSeo = unstable_cache(
+  async (chainId: number) => {
+    const url = new URL(
+      `https://seo-pages-generator-5814.zeet-nftlabs.zeet.app/chain/${chainId}`,
+    );
+    const res = await fetch(url, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!res.ok) {
+      return undefined;
+    }
+
+    return res.json() as Promise<ChainSeo>;
+  },
+  ["chain-seo"],
+  { revalidate: 60 * 60 * 24 }, // 24 hours
+);
@@ -1,18 +1,14 @@
 "use client";
-import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { BuyAndSwapEmbed } from "@/components/blocks/BuyAndSwapEmbed";
 import { GridPatternEmbedContainer } from "@/components/blocks/grid-pattern-embed-container";
 import { defineDashboardChain } from "@/lib/defineDashboardChain";

-export function BuyFundsSection(props: {
-  chain: ChainMetadata;
-  client: ThirdwebClient;
-}) {
+export function BuyFundsSection(props: { chain: ChainMetadata }) {
  return (
    <GridPatternEmbedContainer>
      <BuyAndSwapEmbed
-        client={props.client}
+        isTestnet={props.chain.testnet}
        // eslint-disable-next-line no-restricted-syntax
        chain={defineDashboardChain(props.chain.chainId, props.chain)}
        buyAmount={undefined}
@@ -2,10 +2,11 @@
 import { reportChainPageview } from "@/analytics/report";
 import { useEffectOnce } from "@/hooks/useEffectOnce";

-export function ChainPageView(props: { chainId: number }) {
+export function ChainPageView(props: { chainId: number; is_testnet: boolean }) {
  useEffectOnce(() => {
    reportChainPageview({
      chainId: props.chainId,
+      is_testnet: props.is_testnet,
    });
  });

@@ -11,7 +11,7 @@ export function ChainOverviewSection(props: { chain: ChainMetadata }) {
  return (
    <section>
      <SectionTitle title="Chain Overview" />
-      <div className="grid grid-cols-1 gap-6 rounded-lg border bg-card p-4 md:grid-cols-2 md:p-6 lg:grid-cols-3 lg:gap-8">
+      <div className="grid grid-cols-1 gap-6 rounded-xl border bg-card p-4 md:grid-cols-2 md:p-6 lg:grid-cols-3 lg:gap-6">
        {/* Info */}
        {chain.infoURL && (
          <PrimaryInfoItem title="Info">
@@ -1,4 +1,3 @@
-import { CircleCheckIcon } from "lucide-react";
 import Link from "next/link";
 import type { ChainMetadataWithServices } from "@/types/chain";
 import { products } from "../../../../components/server/products";
@@ -24,15 +23,18 @@ export function SupportedProductsSection(props: {
        {enabledProducts.map((product) => {
          return (
            <div
-              className="relative flex gap-3 rounded-lg border bg-card p-4 pr-8 transition-colors hover:border-active-border"
+              className="relative rounded-xl border bg-card p-4 hover:border-active-border"
              key={product.id}
            >
-              <CircleCheckIcon className="absolute top-4 right-4 size-5 text-success-text" />
-              <product.icon className="mt-0.5 size-5 shrink-0" />
+              <div className="flex mb-4">
+                <div className="p-2 rounded-full border bg-background">
+                  <product.icon className="size-4 text-muted-foreground" />
+                </div>
+              </div>
              <div>
-                <h3 className="mb-1.5 font-medium">
+                <h3 className="mb-1">
                  <Link
-                    className="before:absolute before:inset-0"
+                    className="before:absolute before:inset-0 text-base font-medium"
                    href={product.link}
                    rel="noopener noreferrer"
                    target="_blank"
@@ -17,7 +17,7 @@ export function ExplorersSection(props: {
              key={explorer.url}
            >
              <ExternalLinkIcon className="absolute top-4 right-4 size-4 text-muted-foreground" />
-              <h3 className="mb-1 font-semibold text-base capitalize">
+              <h3 className="mb-1 font-medium text-base capitalize">
                {explorer.name}
              </h3>
              <Link
@@ -6,9 +6,7 @@ export function PrimaryInfoItem(props: {
  return (
    <div>
      <div className="flex items-center gap-2">
-        <h3 className="font-medium text-base text-muted-foreground">
-          {props.title}
-        </h3>
+        <h3 className="text-base text-muted-foreground">{props.title}</h3>
        {props.titleIcon}
      </div>
      {props.children}
@@ -22,39 +22,51 @@ import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { mapV4ChainToV5Chain } from "@/utils/map-chains";
 import { TeamHeader } from "../../../../team/components/TeamHeader/team-header";
 import { StarButton } from "../../components/client/star-button";
-import { getChain, getChainMetadata } from "../../utils";
+import { getChain, getCustomChainMetadata } from "../../utils";
+import { fetchChainSeo } from "./apis/chain-seo";
 import { AddChainToWallet } from "./components/client/add-chain-to-wallet";
 import { ChainPageView } from "./components/client/chain-pageview";
 import { ChainHeader } from "./components/server/chain-header";

-// TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
+type Params = Promise<{ chain_id: string }>;

 export async function generateMetadata(props: {
-  params: Promise<{ chain_id: string }>;
-}): Promise<Metadata> {
+  params: Params;
+}): Promise<Metadata | undefined> {
  const params = await props.params;
  const chain = await getChain(params.chain_id);
-  const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
-  const title = `${sanitizedChainName}: RPC and Chain Settings`;
+  const chainSeo = await fetchChainSeo(Number(chain.chainId)).catch(
+    () => undefined,
+  );

-  const description = `Use the best ${sanitizedChainName} RPC and add to your wallet. Discover the chain ID, native token, explorers, and ${
-    chain.testnet && chain.faucets?.length ? "faucet options" : "more"
-  }.`;
+  if (!chainSeo) {
+    return undefined;
+  }

  return {
-    description,
+    title: chainSeo.title,
+    description: chainSeo.description,
+    metadataBase: new URL("https://thirdweb.com"),
    openGraph: {
-      description,
-      title,
+      title: chainSeo.og.title,
+      description: chainSeo.og.description,
+      siteName: "thirdweb",
+      type: "website",
+      url: "https://thirdweb.com",
+    },
+    twitter: {
+      title: chainSeo.og.title,
+      description: chainSeo.og.description,
+      card: "summary_large_image",
+      creator: "@thirdweb",
+      site: "@thirdweb",
    },
-    title,
  };
 }

-// this is the dashboard layout file
 export default async function ChainPageLayout(props: {
  children: React.ReactNode;
-  params: Promise<{ chain_id: string }>;
+  params: Params;
 }) {
  const params = await props.params;
  const { children } = props;
@@ -67,12 +79,14 @@ export default async function ChainPageLayout(props: {
    redirect(chain.slug);
  }

-  const chainMetadata = await getChainMetadata(chain.chainId);
+  const customChainMetadata = getCustomChainMetadata(chain.chainId);
+  const chainSeo = await fetchChainSeo(chain.chainId);
  const client = getClientThirdwebClient(undefined);
+  const description = customChainMetadata?.about || chainSeo?.description;

  return (
    <div className="flex grow flex-col">
-      <ChainPageView chainId={chain.chainId} />
+      <ChainPageView chainId={chain.chainId} is_testnet={chain.testnet} />
      <div className="border-border border-b bg-card">
        <TeamHeader />
      </div>
@@ -123,7 +137,7 @@ export default async function ChainPageLayout(props: {
          <ChainHeader
            chain={chain}
            client={client}
-            headerImageUrl={chainMetadata?.headerImgUrl}
+            headerImageUrl={customChainMetadata?.headerImgUrl}
            logoUrl={chain.icon?.url}
          />

@@ -131,7 +145,7 @@ export default async function ChainPageLayout(props: {

          <div className="flex flex-col gap-3 md:gap-2">
            {/* Gas Sponsored badge - Mobile */}
-            {chainMetadata?.gasSponsored && (
+            {customChainMetadata?.gasSponsored && (
              <div className="flex md:hidden">
                <GasSponsoredBadge />
              </div>
@@ -153,7 +167,7 @@ export default async function ChainPageLayout(props: {
              )}

              {/* Gas Sponsored badge - Desktop */}
-              {chainMetadata?.gasSponsored && (
+              {customChainMetadata?.gasSponsored && (
                <div className="hidden md:block">
                  <GasSponsoredBadge />
                </div>
@@ -161,9 +175,9 @@ export default async function ChainPageLayout(props: {
            </div>

            {/* description */}
-            {chainMetadata?.about && (
-              <p className="mb-2 whitespace-pre-line text-muted-foreground text-sm lg:text-base">
-                {chainMetadata.about}
+            {description && (
+              <p className="mb-2 whitespace-pre-line text-muted-foreground text-sm lg:text-base text-pretty max-w-3xl">
+                {description}
              </p>
            )}

@@ -1,5 +1,4 @@
 import { ImageResponse } from "next/og";
-import { useId } from "react";
 import { download } from "thirdweb/storage";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
@@ -18,8 +17,8 @@ export const size = {
 export const contentType = "image/png";

 const TWLogo: React.FC = () => {
-  const clipPathId = useId();
-  const linearGradientId = useId();
+  const clipPathId = "og-tw-logo-clip-path";
+  const linearGradientId = "og-tw-logo-linear-gradient";
  return (
    // biome-ignore lint/a11y/noSvgWithoutTitle: not needed
    <svg
@@ -1,7 +1,9 @@
 import { CircleAlertIcon } from "lucide-react";
 import { getRawAccount } from "@/api/account/get-account";
+import { FaqSection } from "@/components/blocks/faq-section";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import { getChain, getChainMetadata } from "../../utils";
+import { getChain, getCustomChainMetadata } from "../../utils";
+import { fetchChainSeo } from "./apis/chain-seo";
 import { BuyFundsSection } from "./components/client/BuyFundsSection";
 import { ChainOverviewSection } from "./components/server/ChainOverviewSection";
 import { ChainCTA } from "./components/server/cta-card";
@@ -9,22 +11,27 @@ import { ExplorersSection } from "./components/server/explorer-section";
 import { FaucetSection } from "./components/server/FaucetSection";
 import { SupportedProductsSection } from "./components/server/SupportedProductsSection";

-export default async function Page(props: {
+type Props = {
  params: Promise<{ chain_id: string }>;
-}) {
+};
+
+export default async function Page(props: Props) {
  const params = await props.params;
  const chain = await getChain(params.chain_id);
-  const chainMetadata = await getChainMetadata(chain.chainId);
+  const customChainMetadata = getCustomChainMetadata(Number(params.chain_id));
+  const chainSeo = await fetchChainSeo(Number(chain.chainId)).catch(
+    () => undefined,
+  );
  const client = getClientThirdwebClient();
  const isDeprecated = chain.status === "deprecated";
-
  const account = await getRawAccount();

  return (
    <div className="flex flex-col gap-10">
      {/* Custom CTA */}
-      {(chainMetadata?.cta?.title || chainMetadata?.cta?.description) && (
-        <ChainCTA {...chainMetadata.cta} />
+      {(customChainMetadata?.cta?.title ||
+        customChainMetadata?.cta?.description) && (
+        <ChainCTA {...customChainMetadata.cta} />
      )}

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

      {/* Chain Overview */}
@@ -58,6 +65,12 @@ export default async function Page(props: {
      {chain.services.filter((s) => s.enabled).length > 0 && (
        <SupportedProductsSection services={chain.services} />
      )}
+
+      {chainSeo?.faqs && chainSeo.faqs.length > 0 && (
+        <div className="py-10">
+          <FaqSection faqs={chainSeo.faqs} />
+        </div>
+      )}
    </div>
  );
 }
@@ -67,7 +67,6 @@ export async function getContractUniqueWalletAnalytics(params: {
  }

  const json = (await res.json()) as InsightResponse;
-  console.log("wallet analytics json", json);
  const aggregations = Object.values(json.aggregations[0]);

  const returnValue: TransactionAnalyticsEntry[] = [];
@@ -2,7 +2,7 @@

 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
+import { Suspense, useState } from "react";
 import type { NFT, ThirdwebClient, ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
@@ -89,7 +89,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({

  if (isPending) {
    return (
-      <div className="flex h-[400px] items-center justify-center">
+      <div className="flex h-[400px] items-center justify-center py-20">
        <Spinner className="size-10" />
      </div>
    );
@@ -179,15 +179,26 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
            <NFTDetailsTab client={contract.client} nft={nft} />
          )}

-          {tabs.map((tb) => {
-            return (
-              tb.title === tab && (
-                <div className="w-full" key={tb.title}>
-                  {tb.children}
+          <Suspense
+            fallback={
+              <div className="h-full">
+                <div className="flex items-center gap-1.5">
+                  <Spinner className="size-4" />
+                  <p className="text-sm text-muted-foreground"> Loading </p>
                </div>
-              )
-            );
-          })}
+              </div>
+            }
+          >
+            {tabs.map((tb) => {
+              return (
+                tb.title === tab && (
+                  <div className="w-full" key={tb.title}>
+                    {tb.children}
+                  </div>
+                )
+              );
+            })}
+          </Suspense>
        </div>
      </div>
    </div>
@@ -58,6 +58,7 @@ export function NFTGetAllTable({
      includeOwners: true,
      start: currentPage * pageSize,
      tokenByIndex,
+      useIndexer: false, // TEMPORARY, TODO: Remove when this is fixed in insight
    },
  );

@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from "@vercel/og";
-import { useId } from "react";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { isProd } from "@/constants/env-utils";
 import { API_ROUTES_CLIENT_ID } from "@/constants/server-envs";
@@ -62,8 +61,9 @@ function shortenString(str: string) {
  return `${str.substring(0, 7)}...${str.substring(str.length - 5)}`;
 }

+const gradientId = "og-brand-icon-gradient";
+
 const OgBrandIcon: React.FC = () => {
-  const gradientId = useId();
  return (
    // biome-ignore lint/a11y/noSvgWithoutTitle: not needed
    <svg
@@ -6,7 +6,7 @@ import { PublicPageConnectButton } from "./PublicPageConnectButton";

 export function PageHeader(props: { containerClassName?: string }) {
  return (
-    <div className="border-b bg-card">
+    <div className="border-b">
      <header
        className={cn(
          "container flex max-w-8xl justify-between py-3",
@@ -28,6 +28,9 @@ export function PublicPageConnectButton(props: {
      connectButton={{
        className: props.connectButtonClassName,
      }}
+      detailsButton={{
+        className: props.connectButtonClassName,
+      }}
      connectModal={{
        privacyPolicyUrl: "/privacy-policy",
        showThirdwebBranding: false,
@@ -5,11 +5,13 @@ import { useEffectOnce } from "@/hooks/useEffectOnce";
 export function AssetPageView(props: {
  assetType: "nft" | "coin";
  chainId: number;
+  is_testnet: boolean;
 }) {
  useEffectOnce(() => {
    reportAssetPageview({
      assetType: props.assetType,
      chainId: props.chainId,
+      is_testnet: props.is_testnet,
    });
  });

@@ -76,7 +76,7 @@ export function ContractHeaderUI(props: {
  return (
    <div
      className={cn(
-        "flex flex-col lg:flex-row lg:items-center gap-5 py-6 relative",
+        "flex flex-col lg:flex-row lg:items-center gap-5 py-8 relative",
        props.className,
      )}
    >
@@ -1,6 +1,7 @@
 "use client";
 import { formatDistanceToNow } from "date-fns";
 import {
+  ArrowLeftRightIcon,
  ArrowRightIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
@@ -73,8 +74,13 @@ function RecentTransfersUI(props: {

  return (
    <div>
-      <div className="p-4 lg:p-6 bg-card border rounded-b-none border-b-0 rounded-lg">
-        <h2 className="font-semibold text-2xl tracking-tight mb-0.5">
+      <div className="p-4 lg:p-6 bg-card border rounded-b-none border-b-0 rounded-xl">
+        <div className="flex mb-3">
+          <div className="rounded-full border p-2 bg-background">
+            <ArrowLeftRightIcon className="size-4 text-muted-foreground" />
+          </div>
+        </div>
+        <h2 className="font-semibold text-2xl tracking-tight mb-1">
          Recent Transfers
        </h2>
        <p className="text-muted-foreground text-sm">
@@ -194,7 +200,7 @@ function RecentTransfersUI(props: {
        )}
      </TableContainer>

-      <div className="flex items-center justify-end gap-3 rounded-b-lg border-x border-b bg-card px-6 py-5">
+      <div className="flex items-center justify-end gap-3 rounded-b-xl border-x border-b bg-card px-6 py-5">
        <Button
          className="gap-1.5 bg-background rounded-full"
          disabled={props.page === 0 || props.isPending}
@@ -122,6 +122,7 @@ export function TokenDropClaim(props: {
            chainId: props.contract.chain.id,
            contractType: "DropERC20",
            error: errorMessage,
+            is_testnet: props.chainMetadata.testnet,
          });

          toast.error("Failed to approve spending", {
@@ -160,6 +161,7 @@ export function TokenDropClaim(props: {
          chainId: props.contract.chain.id,
          contractType: "DropERC20",
          error: errorMessage,
+          is_testnet: props.chainMetadata.testnet,
        });

        toast.error("Failed to buy tokens", {
@@ -172,6 +174,7 @@ export function TokenDropClaim(props: {
        assetType: "coin",
        chainId: props.contract.chain.id,
        contractType: "DropERC20",
+        is_testnet: props.chainMetadata.testnet,
      });

      setStepsUI({
@@ -1,5 +1,6 @@
 "use client";

+import { BarChart3Icon } from "lucide-react";
 import { useState } from "react";
 import { ThirdwebAreaChart } from "@/components/blocks/charts/area-chart";
 import {
@@ -35,10 +36,18 @@ export function ContractAnalyticsOverview(props: {
      margin={{
        bottom: 20,
      }}
+      className="rounded-xl"
      header={{
        headerClassName: "p-4 lg:p-6",
        title: "Analytics",
        titleClassName: "font-semibold text-2xl mb-0.5 tracking-tight",
+        icon: (
+          <div className="flex mb-3">
+            <div className="rounded-full border p-2 bg-background">
+              <BarChart3Icon className="size-4 text-muted-foreground" />
+            </div>
+          </div>
+        ),
        description:
          "View trends of transactions, events and unique wallets interacting with this contract over time",
      }}
@@ -1,77 +0,0 @@
-export const mapChainIdToDexScreenerChainSlug = {
-  8453: "base",
-  1: "ethereum",
-  56: "bsc",
-  369: "pulsechain",
-  137: "polygon",
-  2741: "abstract",
-  43114: "avalanche",
-  999: "hyperliquid",
-  480: "worldchain",
-  42161: "arbitrum",
-  388: "cronos",
-  59144: "linea",
-  1514: "story",
-  397: "near",
-  295: "hedera",
-  146: "sonic",
-  10: "optimism",
-  80094: "berachain",
-  57073: "ink",
-  130: "unichain",
-  5000: "mantle",
-  324: "zksync",
-  466: "apechain",
-  1116: "core",
-  250: "fantom",
-  1868: "soneium",
-  81457: "blast",
-  2000: "dogechain",
-  14: "flare",
-  2040: "vana",
-  4337: "beam",
-  109: "shibarium",
-  747: "flowevm",
-  1088: "metis",
-  1030: "conflux",
-  43113: "avalanchedfk",
-  534352: "scroll",
-  747474: "katana",
-  42220: "celo",
-  1284: "moonbeam",
-  4200: "merlinchain",
-  2222: "kava",
-  39797: "energi",
-  34443: "mode",
-  252: "fraxtal",
-  48900: "zircuit",
-  20: "elastos",
-  100: "gnosischain",
-  204: "opbnb",
-  169: "manta",
-  1313161554: "aurora",
-  3073: "movement",
-  4689: "iotex",
-  23294: "oasissapphire",
-  6001: "bouncebit",
-  42170: "arbitrumnova",
-  1101: "polygonzkevm",
-  40: "telos",
-  592: "astar",
-  42262: "oasisemerald",
-  1285: "moonriver",
-  245022934: "neonevm",
-  7777777: "zora",
-  122: "fuse",
-  321: "kcc",
-  1234: "stepnetwork",
-  106: "velas",
-  167000: "taiko",
-  288: "boba",
-  42766: "zkfair",
-  32520: "bitgert",
-  82: "meter",
-} as const;
-
-export type DexScreenerChainSlug =
-  (typeof mapChainIdToDexScreenerChainSlug)[keyof typeof mapChainIdToDexScreenerChainSlug];
@@ -1,58 +0,0 @@
-"use client";
-import { Spinner } from "@workspace/ui/components/spinner";
-import { useTheme } from "next-themes";
-import { useMemo } from "react";
-import { ClientOnly } from "@/components/blocks/client-only";
-import type { DexScreenerChainSlug } from "./dex-screener-chains";
-
-function DexScreenerIframe(props: {
-  chain: DexScreenerChainSlug;
-  contractAddress: string;
-}) {
-  const { theme } = useTheme();
-
-  const iframeUrl = useMemo(() => {
-    const resolvedTheme = theme === "light" ? "light" : "dark";
-    const url = new URL("https://dexscreener.com");
-    url.pathname = `${props.chain}/${props.contractAddress}`;
-    url.searchParams.set("embed", "1");
-    url.searchParams.set("loadChartSettings", "0");
-    url.searchParams.set("chartTheme", resolvedTheme);
-    url.searchParams.set("theme", resolvedTheme);
-    url.searchParams.set("trades", "1");
-    url.searchParams.set("chartStyle", "1");
-    url.searchParams.set("chartLeftToolbar", "0");
-    url.searchParams.set("chartType", "usd");
-    url.searchParams.set("interval", "15");
-    url.searchParams.set("chartDefaultOnMobile", "1");
-    return url.toString();
-  }, [theme, props.chain, props.contractAddress]);
-
-  return (
-    <iframe
-      className="w-full h-[500px] lg:h-[1000px] rounded-lg overflow-hidden border bg-card"
-      src={iframeUrl}
-      title="DexScreener"
-    ></iframe>
-  );
-}
-
-export function DexScreener(props: {
-  chain: DexScreenerChainSlug;
-  contractAddress: string;
-}) {
-  return (
-    <ClientOnly
-      ssr={
-        <div className="w-full h-[500px] lg:h-[1000px] rounded-lg border bg-card items-center justify-center flex">
-          <Spinner className="size-10" />
-        </div>
-      }
-    >
-      <DexScreenerIframe
-        chain={props.chain}
-        contractAddress={props.contractAddress}
-      />
-    </ClientOnly>
-  );
-}
@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { getUnixTime, subDays } from "date-fns";
 import { isProd } from "@/constants/env-utils";
 import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";

@@ -35,6 +36,11 @@ export function useTokenTransfers(params: {
      url.searchParams.set("page", params.page.toString());
      url.searchParams.set("limit", params.limit.toString());
      url.searchParams.set("clientId", NEXT_PUBLIC_DASHBOARD_CLIENT_ID);
+      const THIRTY_DAYS_AGO = subDays(new Date(), 30);
+      url.searchParams.set(
+        "block_timestamp_from",
+        getUnixTime(THIRTY_DAYS_AGO).toString(),
+      );

      const res = await fetch(url);
      if (!res.ok) {
@@ -46,7 +52,12 @@ export function useTokenTransfers(params: {
      return data;
    },
    queryKey: ["token-transfers", params],
-    refetchInterval: 5000,
+    refetchInterval: (data) => {
+      if (data?.state.error) {
+        return false;
+      }
+      return 5000;
+    },
    refetchOnWindowFocus: false,
    retry: false,
    retryOnMount: false,
@@ -1,42 +1,21 @@
 import "server-only";
-import { isProd } from "@/constants/env-utils";
-import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
+import { Bridge, type ThirdwebClient } from "thirdweb";

 export async function fetchTokenInfoFromBridge(params: {
  chainId: number;
  tokenAddress: string;
-  clientId: string;
+  client: ThirdwebClient;
 }) {
  try {
-    const res = await fetch(
-      `https://bridge.${isProd ? "thirdweb.com" : "thirdweb-dev.com"}/v1/tokens?chainId=${params.chainId}&tokenAddress=${params.tokenAddress}`,
-      {
-        headers: {
-          "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
-        },
-      },
-    );
-
-    if (!res.ok) {
-      console.error(
-        `Failed to fetch token info from bridge: ${await res.text()}`,
-      );
-      return null;
-    }
-
-    const data = (await res.json()) as {
-      data: Array<{
-        iconUri: string;
-        address: string;
-        decimals: number;
-        name: string;
-        symbol: string;
-        priceUsd: number;
-      }>;
-    };
-
-    return data.data[0];
+    const res = await Bridge.tokens({
+      client: params.client,
+      chainId: params.chainId,
+      tokenAddress: params.tokenAddress,
+      includePrices: true,
+      limit: 1,
+    });
+    return res[0];
  } catch {
-    return null;
+    return undefined;
  }
 }
@@ -1,3 +1,4 @@
+import { BarChart3Icon, DollarSignIcon, TrendingUpIcon } from "lucide-react";
 import { cookies } from "next/headers";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
@@ -13,8 +14,6 @@ import { PageHeader } from "../_components/PageHeader";
 import { ContractHeaderUI } from "./_components/ContractHeader";
 import { TokenDropClaim } from "./_components/claim-tokens/claim-tokens-ui";
 import { ContractAnalyticsOverview } from "./_components/contract-analytics/contract-analytics";
-import { DexScreener } from "./_components/dex-screener";
-import { mapChainIdToDexScreenerChainSlug } from "./_components/dex-screener-chains";
 import { RecentTransfers } from "./_components/RecentTransfers";
 import { fetchTokenInfoFromBridge } from "./_utils/fetch-coin-info";
 import { getCurrencyMeta } from "./_utils/getCurrencyMeta";
@@ -40,7 +39,7 @@ export async function ERC20PublicPage(props: {
    }),
    fetchTokenInfoFromBridge({
      chainId: props.serverContract.chain.id,
-      clientId: props.clientContract.client.clientId,
+      client: props.serverContract.client,
      tokenAddress: props.serverContract.address,
    }),
    resolveFunctionSelectors(props.serverContract),
@@ -77,10 +76,14 @@ export async function ERC20PublicPage(props: {

  return (
    <div className="flex grow flex-col">
-      <AssetPageView assetType="coin" chainId={props.chainMetadata.chainId} />
+      <AssetPageView
+        assetType="coin"
+        chainId={props.chainMetadata.chainId}
+        is_testnet={props.chainMetadata.testnet}
+      />
      <PageHeader containerClassName="max-w-7xl" />

-      <div className="border-b">
+      <div className="border-b border-dashed">
        <div className="container max-w-7xl">
          <ContractHeaderUI
            chainMetadata={props.chainMetadata}
@@ -102,6 +105,44 @@ export async function ERC20PublicPage(props: {

      <div className="h-8" />

+      {tokenInfoFromUB && (
+        <div className="container max-w-7xl mb-8">
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3 p-6 border rounded-xl bg-card relative">
+            <TokenInfoSection
+              icon={DollarSignIcon}
+              label="Price"
+              value={
+                tokenInfoFromUB.prices.USD
+                  ? formatPrice(tokenInfoFromUB.prices.USD)
+                  : "N/A"
+              }
+            />
+
+            <TokenInfoSection
+              className="border-t pt-6 lg:border-l lg:border-t-0 border-dashed lg:pl-8 lg:pt-0"
+              icon={TrendingUpIcon}
+              label="Market Cap"
+              value={
+                tokenInfoFromUB.marketCapUsd
+                  ? formatCompactUSD(tokenInfoFromUB.marketCapUsd)
+                  : "N/A"
+              }
+            />
+
+            <TokenInfoSection
+              className="border-t pt-6 lg:border-l lg:border-t-0 border-dashed lg:pl-8 lg:pt-0"
+              icon={BarChart3Icon}
+              label="Volume (24h)"
+              value={
+                tokenInfoFromUB.volume24hUsd
+                  ? formatCompactUSD(tokenInfoFromUB.volume24hUsd)
+                  : "N/A"
+              }
+            />
+          </div>
+        </div>
+      )}
+
      {showBuyEmbed && (
        <div className="container max-w-7xl pb-10">
          <GridPatternEmbedContainer>
@@ -118,20 +159,6 @@ export async function ERC20PublicPage(props: {
        </div>
      )}

-      {props.chainMetadata.chainId in mapChainIdToDexScreenerChainSlug && (
-        <div className="container max-w-7xl pb-10">
-          <DexScreener
-            chain={
-              mapChainIdToDexScreenerChainSlug[
-                props.chainMetadata
-                  .chainId as keyof typeof mapChainIdToDexScreenerChainSlug
-              ]
-            }
-            contractAddress={props.clientContract.address}
-          />
-        </div>
-      )}
-
      <div className="container flex max-w-7xl grow flex-col pb-10">
        <div className="flex grow flex-col gap-8">
          <ContractAnalyticsOverview
@@ -173,10 +200,10 @@ function BuyEmbed(props: {
    return (
      <BuyAndSwapEmbed
        chain={props.clientContract.chain}
-        client={props.clientContract.client}
        tokenAddress={props.clientContract.address}
        buyAmount={undefined}
        pageType="asset"
+        isTestnet={props.chainMetadata.testnet}
      />
    );
  }
@@ -206,3 +233,61 @@ async function getActiveClaimConditionWithErrorHandler(
 }

 type ActiveClaimCondition = Awaited<ReturnType<typeof getActiveClaimCondition>>;
+
+function TokenInfoSection(props: {
+  label: string;
+  value: string;
+  icon: React.FC<{ className?: string }>;
+  className?: string;
+}) {
+  return (
+    <div className={props.className}>
+      <div className="flex mb-5">
+        <div className="border rounded-full bg-background p-2">
+          <props.icon className="size-4 text-muted-foreground" />
+        </div>
+      </div>
+      <dl className="space-y-1.5">
+        <dt className="text-xs font-medium text-muted-foreground tracking-wider uppercase">
+          {props.label}
+        </dt>
+        <dd className="text-3xl font-bold text-foreground tracking-tight">
+          {props.value}
+        </dd>
+      </dl>
+    </div>
+  );
+}
+
+function formatPrice(value: number): string {
+  if (value < 100) {
+    return smallValueUSDFormatter.format(value);
+  }
+  return largeValueUSDFormatter.format(value);
+}
+
+const smallValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 6,
+  roundingMode: "halfEven",
+});
+
+const largeValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 2,
+  roundingMode: "halfEven",
+});
+
+const compactValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  notation: "compact",
+  maximumFractionDigits: 2,
+  roundingMode: "halfEven",
+});
+
+function formatCompactUSD(value: number): string {
+  return compactValueUSDFormatter.format(value);
+}
@@ -18,7 +18,11 @@ export function NFTPublicPageLayout(props: {
 }) {
  return (
    <div className="flex grow flex-col">
-      <AssetPageView assetType="nft" chainId={props.chainMetadata.chainId} />
+      <AssetPageView
+        assetType="nft"
+        chainId={props.chainMetadata.chainId}
+        is_testnet={props.chainMetadata.testnet}
+      />
      <PageHeader containerClassName="max-w-8xl" />
      <div className="border-b">
        <div className="container max-w-8xl">
@@ -120,6 +120,7 @@ export function BuyEditionDrop(props: BuyEditionDropProps) {
            chainId: props.contract.chain.id,
            contractType: "DropERC1155",
            error: errorMessage,
+            is_testnet: props.chainMetadata.testnet,
          });

          console.error(errorMessage);
@@ -147,6 +148,7 @@ export function BuyEditionDrop(props: BuyEditionDropProps) {
          assetType: "nft",
          chainId: props.contract.chain.id,
          contractType: "DropERC1155",
+          is_testnet: props.chainMetadata.testnet,
        });

        props.onSuccess?.();
@@ -163,6 +165,7 @@ export function BuyEditionDrop(props: BuyEditionDropProps) {
          chainId: props.contract.chain.id,
          contractType: "DropERC1155",
          error: errorMessage,
+          is_testnet: props.chainMetadata.testnet,
        });

        return;
@@ -180,6 +183,7 @@ export function BuyEditionDrop(props: BuyEditionDropProps) {
        chainId: props.contract.chain.id,
        contractType: "DropERC1155",
        error: errorMessage,
+        is_testnet: props.chainMetadata.testnet,
      });
    }
  });
@@ -77,6 +77,7 @@ export function BuyNFTDrop(props: BuyNFTDropProps) {
            chainId: props.contract.chain.id,
            contractType: "DropERC721",
            error: errorMessage,
+            is_testnet: props.chainMetadata.testnet,
          });

          return;
@@ -103,6 +104,7 @@ export function BuyNFTDrop(props: BuyNFTDropProps) {
          assetType: "nft",
          chainId: props.contract.chain.id,
          contractType: "DropERC721",
+          is_testnet: props.chainMetadata.testnet,
        });

        props.onSuccess?.();
@@ -115,6 +117,7 @@ export function BuyNFTDrop(props: BuyNFTDropProps) {
          chainId: props.contract.chain.id,
          contractType: "DropERC721",
          error: errorMessage,
+          is_testnet: props.chainMetadata.testnet,
        });

        return;
@@ -131,6 +134,7 @@ export function BuyNFTDrop(props: BuyNFTDropProps) {
        chainId: props.contract.chain.id,
        contractType: "DropERC721",
        error: errorMessage,
+        is_testnet: props.chainMetadata.testnet,
      });
    }
  };
@@ -190,25 +190,37 @@ export async function generateContractLayoutMetadata(params: {
      .replace("Testnet", "")
      .trim();

-    const title = `${contractDisplayName} | ${cleanedChainName} Smart Contract`;
+    let title = `${contractDisplayName} | ${cleanedChainName} Smart Contract`;
    let description = "";

    if (isERC721 || isERC1155) {
      description = `View tokens, source code, transactions, balances, and analytics for the ${contractDisplayName} smart contract on ${cleanedChainName}.`;
    } else if (isERC20) {
-      description = `View ERC20 tokens, transactions, balances, source code, and analytics for the ${contractDisplayName} smart contract on ${cleanedChainName}`;
+      title = `${contractMetadata.name} (${contractMetadata.symbol}) on ${cleanedChainName} | Buy, Swap, Bridge & Price`;
+      description = `Buy, swap & bridge ${contractMetadata.name} (${contractMetadata.symbol}) on ${cleanedChainName} with thirdweb Bridge. View contract address, holders, analytics, transactions and live price.`;
    } else {
-      description = `View tokens, transactions, balances, source code, and analytics for the ${contractDisplayName} smart contract  on ${cleanedChainName}`;
+      description = `View tokens, transactions, balances, source code, and analytics for the ${contractMetadata.name} smart contract  on ${cleanedChainName}`;
    }

    return {
      description: description,
      title: title,
+      openGraph: {
+        description: description,
+        title: title,
+      },
    };
  } catch {
+    const fallbackTitle = `${shortenIfAddress(params.contractAddress)} | ${params.chainIdOrSlug}`;
+    const fallbackDescription = `View tokens, transactions, balances, source code, and analytics for the smart contract  on Chain ID ${params.chainIdOrSlug}`;
+
    return {
-      description: `View tokens, transactions, balances, source code, and analytics for the smart contract  on Chain ID ${params.chainIdOrSlug}`,
-      title: `${shortenIfAddress(params.contractAddress)} | ${params.chainIdOrSlug}`,
+      description: fallbackDescription,
+      title: fallbackTitle,
+      openGraph: {
+        description: fallbackDescription,
+        title: fallbackTitle,
+      },
    };
  }
 }
@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import type { Status } from "thirdweb/bridge";
+import { storybookThirdwebClient } from "@/storybook/utils";
+import { BridgeStatus } from "./bridge-status";
+
+const meta = {
+  component: BridgeStatus,
+  title: "chain/tx/bridge-status",
+  decorators: [
+    (Story) => (
+      <div className="container max-w-6xl py-10">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof BridgeStatus>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const completedStatus: Status = {
+  status: "COMPLETED",
+  paymentId:
+    "0x8e0a0d9c0254a75a3004a28e0fb69bae7f2d659938ddd461753627270930db60",
+  originAmount: 129935n,
+  destinationAmount: 100000n,
+  transactions: [
+    {
+      chainId: 42161,
+      transactionHash:
+        "0x37daf698878e73590adb2d6f833e810304a9981829ad983fb355245af1183107",
+    },
+    {
+      chainId: 8453,
+      transactionHash:
+        "0xc72abba2761bb48f605125dc12c17b15088303db960816fa12316f0c90796417",
+    },
+  ],
+  originChainId: 42161,
+  originTokenAddress: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
+  originToken: {
+    chainId: 42161,
+    address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
+    symbol: "USDC",
+    name: "USD Coin",
+    decimals: 6,
+    iconUri: "https://ethereum-optimism.github.io/data/USDC/logo.png",
+  },
+  destinationChainId: 8453,
+  destinationTokenAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+  destinationToken: {
+    chainId: 8453,
+    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+    symbol: "USDC",
+    name: "USD Coin",
+    decimals: 6,
+    iconUri:
+      "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694",
+  },
+  sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+  receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+};
+
+const pendingStatus: Status = {
+  ...completedStatus,
+  status: "PENDING",
+};
+
+const failedStatus: Status = {
+  ...completedStatus,
+  status: "FAILED",
+};
+
+const notFoundStatus: Status = {
+  ...completedStatus,
+  status: "NOT_FOUND",
+  transactions: [],
+};
+
+export const Completed: Story = {
+  args: {
+    bridgeStatus: completedStatus,
+    client: storybookThirdwebClient,
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    bridgeStatus: pendingStatus,
+    client: storybookThirdwebClient,
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    bridgeStatus: failedStatus,
+    client: storybookThirdwebClient,
+  },
+};
+
+export const NotFound: Story = {
+  args: {
+    bridgeStatus: notFoundStatus,
+    client: storybookThirdwebClient,
+  },
+};
+
+export const WithPurchaseData: Story = {
+  args: {
+    bridgeStatus: {
+      ...completedStatus,
+      purchaseData: {
+        userId: "68d645b7ded999651272bf1e",
+        credits: 32000,
+        transactionId: "fd2606d1-90df-45c6-bd2c-b19a34764a31",
+      },
+    },
+    client: storybookThirdwebClient,
+  },
+};
@@ -0,0 +1,404 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { CodeClient } from "@workspace/ui/components/code/code.client";
+import { Img } from "@workspace/ui/components/img";
+import { Spinner } from "@workspace/ui/components/spinner";
+import { ArrowRightIcon, CircleCheckIcon, CircleXIcon } from "lucide-react";
+import Link from "next/link";
+import { NATIVE_TOKEN_ADDRESS, type ThirdwebClient } from "thirdweb";
+import type { Status, Token } from "thirdweb/bridge";
+import { status } from "thirdweb/bridge";
+import { toTokens } from "thirdweb/utils";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { fetchChain } from "@/utils/fetchChain";
+import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
+
+type PurchaseData = Exclude<Status, { status: "NOT_FOUND" }>["purchaseData"];
+
+export function BridgeStatus(props: {
+  bridgeStatus: Status;
+  client: ThirdwebClient;
+}) {
+  const { bridgeStatus } = props;
+  const purchaseDataString =
+    bridgeStatus.status !== "NOT_FOUND" && bridgeStatus.purchaseData
+      ? getPurchaseData(bridgeStatus.purchaseData)
+      : undefined;
+
+  return (
+    <div className="bg-card rounded-xl border relative">
+      {bridgeStatus.status === "FAILED" &&
+        bridgeStatus.transactions.length > 0 && (
+          <FailedBridgeStatusContent
+            transactions={bridgeStatus.transactions}
+            client={props.client}
+          />
+        )}
+
+      {(bridgeStatus.status === "COMPLETED" ||
+        bridgeStatus.status === "PENDING") && (
+        <BridgeStatusContent
+          bridgeStatus={bridgeStatus}
+          client={props.client}
+        />
+      )}
+
+      <div className="px-6 lg:px-8 py-7 space-y-1.5">
+        <div className="flex justify-between items-center">
+          <p className="text-sm text-muted-foreground "> Status </p>
+
+          <div
+            className={cn(
+              "flex items-center gap-1.5 text-sm capitalize",
+              bridgeStatus.status === "COMPLETED" && "text-green-500",
+              bridgeStatus.status === "PENDING" && "text-blue-500",
+              bridgeStatus.status === "FAILED" && "text-red-500",
+            )}
+          >
+            {bridgeStatus.status === "COMPLETED" && (
+              <CircleCheckIcon className="size-3.5" />
+            )}
+            {bridgeStatus.status === "PENDING" && (
+              <Spinner className="size-3.5" />
+            )}
+            {bridgeStatus.status === "FAILED" && (
+              <CircleXIcon className="size-3.5" />
+            )}
+            {bridgeStatus.status === "NOT_FOUND" && (
+              <CircleXIcon className="size-3.5" />
+            )}
+
+            {bridgeStatus.status.toLowerCase().replace("_", " ")}
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center">
+          <p className="text-sm text-muted-foreground ">Payment ID</p>
+          <CopyTextButton
+            textToCopy={bridgeStatus.paymentId}
+            textToShow={`${bridgeStatus.paymentId.slice(0, 6)}...${bridgeStatus.paymentId.slice(-4)}`}
+            tooltip="Payment ID"
+            className="text-sm translate-x-1.5"
+            copyIconPosition="left"
+            variant="ghost"
+          />
+        </div>
+      </div>
+
+      {purchaseDataString && (
+        <div className="px-6 lg:px-8 py-7 space-y-2 border-t border-dashed">
+          <p className="text-sm text-muted-foreground ">Purchase Data</p>
+          <CodeClient
+            code={purchaseDataString}
+            lang="json"
+            className="[&_code]:text-xs"
+            scrollableClassName="p-3"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TokenInfo(props: {
+  label: string;
+  addressLabel: string;
+  token: Token;
+  amountWei: bigint | undefined;
+  walletAddress: string;
+  client: ThirdwebClient;
+  txHash: string | undefined;
+}) {
+  const chainQuery = useChainQuery(props.token.chainId);
+
+  return (
+    <div className="flex-1 pt-10 pb-9 px-6 lg:px-8">
+      <div className="flex justify-between items-center">
+        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {props.label}
+        </h3>
+      </div>
+
+      <div className="pb-7 pt-6 border-b border-dashed">
+        <div className="flex items-center gap-3">
+          <div className="relative hover:ring-2 hover:ring-offset-2 hover:ring-offset-card hover:ring-foreground/30 rounded-full">
+            <Link
+              href={
+                props.token.address.toLowerCase() ===
+                NATIVE_TOKEN_ADDRESS.toLowerCase()
+                  ? `/${chainQuery.data?.slug || props.token.chainId}`
+                  : `/${chainQuery.data?.slug || props.token.chainId}/${props.token.address}`
+              }
+              target="_blank"
+              aria-label="View Token"
+              className="absolute inset-0 z-10"
+            />
+
+            <Img
+              src={props.token.iconUri}
+              alt={props.token.name}
+              className="size-10 rounded-full"
+              fallback={
+                <div className="size-10 from-blue-500 to-foreground rounded-full bg-gradient-to-b" />
+              }
+            />
+
+            <div className="absolute -bottom-0.5 -right-0.5 bg-background p-0.5 rounded-full">
+              <Img
+                src={resolveSchemeWithErrorHandler({
+                  client: props.client,
+                  uri: chainQuery.data?.icon?.url,
+                })}
+                alt={props.token.name}
+                className="size-4 rounded-full"
+                fallback={
+                  <div className="size-4 from-blue-500 to-foreground rounded-full bg-gradient-to-b" />
+                }
+              />
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <p className="text-lg text-foreground font-medium tracking-tight leading-none">
+              {props.amountWei ? (
+                <>
+                  {toTokens(props.amountWei, props.token.decimals)}{" "}
+                  {props.token.symbol}
+                </>
+              ) : (
+                "N/A"
+              )}
+            </p>
+            <SkeletonContainer
+              skeletonData={`Chain ${props.token.chainId}`}
+              loadedData={chainQuery.data?.name}
+              className="[&_*]:flex"
+              render={(data) => (
+                <Link
+                  href={`/${chainQuery.data?.slug || props.token.chainId}`}
+                  className="text-sm text-muted-foreground leading-none hover:underline"
+                  target="_blank"
+                >
+                  {data}
+                </Link>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="h-6" />
+
+      <div className="space-y-1.5">
+        <div className="flex gap-2.5 justify-between">
+          <p className="text-sm text-muted-foreground ">{props.addressLabel}</p>
+          <WalletAddress
+            address={props.walletAddress}
+            client={props.client}
+            className="py-0.5 h-auto text-sm [&>*]:!font-sans"
+            iconClassName="size-3.5"
+          />
+        </div>
+
+        <div className="flex gap-2 justify-between">
+          <p className="text-sm text-muted-foreground ">Token Address</p>
+          <CopyTextButton
+            textToCopy={props.token.address}
+            textToShow={`${props.token.address.slice(0, 6)}...${props.token.address.slice(-4)}`}
+            tooltip="Token Address"
+            className="text-sm translate-x-1.5"
+            copyIconPosition="left"
+            variant="ghost"
+          />
+        </div>
+
+        <div className="flex gap-2 justify-between">
+          <p className="text-sm text-muted-foreground ">Transaction Hash</p>
+          {props.txHash ? (
+            <CopyTextButton
+              textToCopy={props.txHash}
+              textToShow={`${props.txHash.slice(0, 6)}...${props.txHash.slice(-4)}`}
+              tooltip="Transaction Hash"
+              className="text-sm translate-x-1.5"
+              copyIconPosition="left"
+              variant="ghost"
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground ">N/A</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BridgeStatusContent(props: {
+  bridgeStatus: Exclude<Status, { status: "FAILED" } | { status: "NOT_FOUND" }>;
+  client: ThirdwebClient;
+}) {
+  const { bridgeStatus } = props;
+
+  const fromTxHash = bridgeStatus.transactions.find(
+    (tx) => tx.chainId === bridgeStatus.originChainId,
+  )?.transactionHash;
+  const toTxHash = bridgeStatus.transactions.find(
+    (tx) => tx.chainId === bridgeStatus.destinationChainId,
+  )?.transactionHash;
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 border-b border-dashed">
+      <TokenInfo
+        label="From"
+        token={bridgeStatus.originToken}
+        amountWei={bridgeStatus.originAmount}
+        walletAddress={bridgeStatus.sender}
+        client={props.client}
+        txHash={fromTxHash}
+        addressLabel="Sender"
+      />
+
+      <div className="border-t lg:border-l lg:border-t-0 border-dashed relative">
+        <div className="p-1.5 rounded-full bg-background absolute top-0 lg:top-1/2 left-1/2 lg:left-0 -translate-y-1/2 -translate-x-1/2 border">
+          <ArrowRightIcon className="size-4 text-muted-foreground rotate-90 lg:rotate-0" />
+        </div>
+        <TokenInfo
+          label="To"
+          token={bridgeStatus.destinationToken}
+          // TODO - destinationAmount is not available in PENDING status, fix it in API
+          amountWei={
+            bridgeStatus.status === "COMPLETED"
+              ? bridgeStatus.destinationAmount
+              : undefined
+          }
+          walletAddress={bridgeStatus.receiver}
+          client={props.client}
+          txHash={toTxHash}
+          addressLabel="Receiver"
+        />
+      </div>
+    </div>
+  );
+}
+
+function FailedBridgeStatusContent(props: {
+  transactions: { chainId: number; transactionHash: string }[];
+  client: ThirdwebClient;
+}) {
+  return (
+    <div className="px-6 lg:px-8 py-7 space-y-1.5 border-b border-dashed">
+      <h3 className="text-base font-medium tracking-tight mb-3">
+        Transactions
+      </h3>
+      <div className="flex flex-col gap-2">
+        {props.transactions.map((tx) => {
+          return (
+            <TxHashRow
+              key={tx.chainId}
+              client={props.client}
+              chainId={tx.chainId}
+              txHash={tx.transactionHash}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function useChainQuery(chainId: number | undefined) {
+  return useQuery({
+    enabled: !!chainId,
+    queryKey: ["chain-metadata", chainId],
+    queryFn: async () => {
+      if (!chainId) {
+        return null;
+      }
+      return fetchChain(chainId);
+    },
+  });
+}
+
+function TxHashRow(props: {
+  client: ThirdwebClient;
+  chainId: number;
+  txHash: string;
+}) {
+  const chainQuery = useChainQuery(props.chainId);
+
+  return (
+    <div className="flex items-center gap-2 justify-between">
+      <div className="flex items-center gap-2">
+        <Img
+          src={resolveSchemeWithErrorHandler({
+            client: props.client,
+            uri: chainQuery.data?.icon?.url,
+          })}
+          alt={chainQuery.data?.name}
+          className="size-4 rounded-full"
+          fallback={
+            <div className="size-4 from-blue-500 to-foreground rounded-full bg-gradient-to-b" />
+          }
+        />
+        <SkeletonContainer
+          skeletonData={`Chain ${props.chainId}`}
+          loadedData={chainQuery.data?.name}
+          render={(data) => (
+            <p className="text-sm text-muted-foreground">{data}</p>
+          )}
+        />
+      </div>
+      <CopyTextButton
+        textToCopy={props.txHash}
+        textToShow={`${props.txHash.slice(0, 6)}...${props.txHash.slice(-4)}`}
+        tooltip="Copy Transaction Hash"
+        className="text-sm"
+        copyIconPosition="right"
+        variant="ghost"
+      />
+    </div>
+  );
+}
+
+export function BridgeStatusWithPolling(props: {
+  bridgeStatus: Status;
+  client: ThirdwebClient;
+  chainId: number;
+  transactionHash: string;
+}) {
+  const bridgeStatusQuery = useQuery({
+    enabled:
+      props.bridgeStatus.status === "PENDING" ||
+      props.bridgeStatus.status === "NOT_FOUND",
+    queryKey: ["bridge-status", props.transactionHash, props.chainId],
+    queryFn: () =>
+      status({
+        chainId: props.chainId,
+        transactionHash: props.transactionHash as `0x${string}`,
+        client: props.client,
+      }),
+    refetchInterval(query) {
+      const status = query.state.data?.status;
+      if (status === "COMPLETED" || status === "FAILED") {
+        return false;
+      }
+      return 5000;
+    },
+  });
+
+  return (
+    <BridgeStatus
+      bridgeStatus={bridgeStatusQuery.data || props.bridgeStatus}
+      client={props.client}
+    />
+  );
+}
+
+function getPurchaseData(purchaseData: PurchaseData) {
+  try {
+    return JSON.stringify(purchaseData, null, 2);
+  } catch {
+    return undefined;
+  }
+}
@@ -1,16 +1,42 @@
-import { toTokens, ZERO_ADDRESS } from "thirdweb";
+import { Button } from "@workspace/ui/components/button";
+import { PlainTextCodeBlock } from "@workspace/ui/components/code/plaintext-code";
+import { ToolTipLabel } from "@workspace/ui/components/tooltip";
+import { formatDate, formatDistanceToNowStrict, fromUnixTime } from "date-fns";
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  Clock4Icon,
+  InfoIcon,
+} from "lucide-react";
+import { toTokens } from "thirdweb";
+import { status } from "thirdweb/bridge";
+import type { ChainMetadata } from "thirdweb/chains";
 import {
  eth_getBlockByHash,
  eth_getTransactionByHash,
  eth_getTransactionReceipt,
  getRpcClient,
 } from "thirdweb/rpc";
-import { hexToNumber, shortenAddress, toEther } from "thirdweb/utils";
+import type { TransactionReceipt } from "thirdweb/transaction";
+import { hexToNumber, toEther } from "thirdweb/utils";
 import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { mapV4ChainToV5Chain } from "@/utils/map-chains";
 import { getChain } from "../../../utils";
+import { BridgeStatusWithPolling } from "./bridge-status";
+import { BridgeAndOverviewTabs } from "./tabs";
+
+type Transaction = Awaited<ReturnType<typeof eth_getTransactionByHash>>;

 export default async function Page(props: {
  params: Promise<{ chain_id: string; txHash: `0x${string}` }>;
@@ -25,142 +51,339 @@ export default async function Page(props: {
    client: serverThirdwebClient,
  });

-  const [transaction, receipt] = await Promise.all([
+  const [transaction, receipt, bridgeStatus] = await Promise.all([
    eth_getTransactionByHash(rpcRequest, {
      hash: params.txHash,
-    }),
+    }).catch(() => undefined),
    eth_getTransactionReceipt(rpcRequest, {
      hash: params.txHash,
-    }),
+    }).catch(() => undefined),
+    status({
+      chainId: chain.chainId,
+      transactionHash: params.txHash,
+      client: serverThirdwebClient,
+    }).catch(() => undefined),
  ]);
-  if (!transaction.blockHash) {
-    return <div>no tx found</div>;
+
+  if (!transaction?.blockHash || !receipt) {
+    return (
+      <div className="flex flex-col items-center justify-center grow">
+        <div className="flex flex-col items-center justify-center gap-3">
+          <div className="p-2 rounded-full bg-background border">
+            <CircleAlertIcon className="size-5 text-muted-foreground" />
+          </div>
+          Transaction not found
+        </div>
+      </div>
+    );
  }
+
  const block = await eth_getBlockByHash(rpcRequest, {
    blockHash: transaction.blockHash,
  });

+  const overviewContent = (
+    <GeneericTxDetails
+      transaction={transaction}
+      receipt={receipt}
+      block={block}
+      chain={chain}
+    />
+  );
+
  return (
-    <main className="container flex flex-col gap-y-10 py-6">
-      <header className="flex flex-col gap-y-2">
-        <p className="font-bold text-3xl">Transaction Details</p>
-        <div className="flex gap-x-2">
-          {shortenAddress(transaction.from)} called on{" "}
-          {shortenAddress(transaction.to || ZERO_ADDRESS)}
-        </div>
-      </header>
+    <main className="pb-20">
+      <div className="flex h-14 items-center border-border border-b">
+        <Breadcrumb className="container max-w-6xl">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/chainlist">Chainlist</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href={`/${chain.slug}`}>
+                {chain.name.replace("Mainnet", "")}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Transaction Details</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>

-      <Separator orientation="horizontal" />
+      <div className="container max-w-6xl py-10">
+        <h1 className="font-semibold text-3xl tracking-tight">
+          Transaction Details
+        </h1>
+      </div>

-      <section className="flex flex-col gap-y-2">
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Transaction hash</div>
-          <p>{transaction.hash}</p>
-        </div>
-
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">
-            Status {/* and method */}
-          </div>
-          <div className="flex gap-x-2">
-            <Badge
-              className={
-                receipt.status === "success" ? "bg-green-500" : "bg-red-500"
-              }
-            >
-              {receipt.status}
-            </Badge>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Block</div>
-          <p>{Number(transaction.blockNumber)}</p>
-        </div>
-
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Timestamp</div>
-          <p>
-            {new Date(
-              Number.parseInt(block.timestamp.toString()) * 1000,
-            ).toLocaleString()}
-          </p>
-        </div>
-      </section>
-
-      <Separator orientation="horizontal" />
-
-      <section className="flex flex-col gap-y-2">
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">From</div>
-          <p>{transaction.from}</p>
-        </div>
-
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">
-            Interacted with contract
-          </div>
-          <p>{transaction.to}</p>
-        </div>
-      </section>
-
-      <Separator orientation="horizontal" />
-
-      <section className="flex flex-col gap-y-2">
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Value</div>
-          <p>{toEther(transaction.value)} ETH</p>
-        </div>
-
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Transaction fee</div>
-          <p>{toEther((transaction.gasPrice || 0n) * receipt.gasUsed)} ETH</p>
-        </div>
-
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Gas price</div>
-          <p>{toEther(transaction.gasPrice || 0n)} ETH</p>
-        </div>
-
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Gas usage</div>
-          <p>{receipt.gasUsed.toString()}</p>
-        </div>
-
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Gas fees (Gwei)</div>
-          <p>
-            Base: {toTokens(block.baseFeePerGas || 0n, 9)} | Max:{" "}
-            {toTokens(transaction.maxFeePerGas || 0n, 9)} | Max priority:{" "}
-            {transaction.maxPriorityFeePerGas?.toString()}
-          </p>
-        </div>
-
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Burnt fees</div>
-          <p>{toEther(block.baseFeePerGas || 0n * receipt.gasUsed)}</p>
-        </div>
-      </section>
-
-      <Separator orientation="horizontal" />
-
-      <section className="flex flex-col gap-y-2">
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-x-2">Other</div>
-          <p>
-            Txn type: {hexToNumber(transaction.typeHex || "0x0")} (
-            {transaction.type}) | Nonce: {transaction.nonce} | Position:{" "}
-            {transaction.transactionIndex}
-          </p>
-        </div>
-
-        <div className="grid grid-cols-2 items-start">
-          <div className="flex items-center gap-x-2">Raw Input:</div>
-          <div className="break-words rounded-lg bg-card p-4 text-sm">
-            {transaction.input}
-          </div>
-        </div>
-      </section>
+      <div className="container max-w-6xl">
+        {bridgeStatus ? (
+          <BridgeAndOverviewTabs
+            bridgeStatus={
+              <BridgeStatusWithPolling
+                bridgeStatus={bridgeStatus}
+                client={getClientThirdwebClient()}
+                chainId={chain.chainId}
+                transactionHash={params.txHash}
+              />
+            }
+            overview={overviewContent}
+          />
+        ) : (
+          overviewContent
+        )}
+      </div>
    </main>
  );
 }
+
+function GeneericTxDetails(props: {
+  transaction: Transaction;
+  receipt: TransactionReceipt;
+  block: {
+    timestamp: bigint;
+    baseFeePerGas: bigint | null;
+  };
+  chain: ChainMetadata;
+}) {
+  const { transaction, receipt, chain, block } = props;
+
+  const timestamp = getDatefromTimestamp(block.timestamp);
+
+  return (
+    <div className="border  rounded-xl p-4 lg:p-6 bg-card">
+      {/* section 1 */}
+      <section className="border-b pb-6 space-y-5 lg:space-y-3">
+        <GridItem
+          label="Transaction hash"
+          tooltip="A TxHash or transaction hash is a unique 66-character identifier that is generated whenever a transaction is executed."
+        >
+          <CopyTextButton
+            textToCopy={transaction.hash}
+            textToShow={transaction.hash}
+            tooltip="Copy transaction hash"
+            variant="ghost"
+            copyIconPosition="right"
+            className="truncate -translate-x-1.5 max-w-full"
+          />
+        </GridItem>
+
+        <GridItem label="Status" tooltip="The status of the transaction.">
+          <Badge
+            className="py-0.5 gap-1.5 px-1.5 capitalize"
+            variant={receipt.status === "success" ? "success" : "destructive"}
+          >
+            {receipt.status === "success" ? (
+              <CircleCheckIcon className="size-3" />
+            ) : (
+              <CircleAlertIcon className="size-3" />
+            )}
+            {receipt.status}
+          </Badge>
+        </GridItem>
+
+        {transaction.blockNumber && (
+          <GridItem
+            label="Block"
+            tooltip="Number of the block in which the transaction is recorded. Block confirmations indicate how many blocks have been added since the transaction was produced."
+          >
+            <p>{Number(transaction.blockNumber)}</p>
+          </GridItem>
+        )}
+
+        {timestamp && (
+          <GridItem
+            label="Timestamp"
+            tooltip="The date and time at which a transaction is validated."
+          >
+            <div className="flex items-center gap-1.5 flex-wrap">
+              <Clock4Icon className="size-3" />
+              <p>
+                {formatDistanceToNowStrict(timestamp, {
+                  addSuffix: true,
+                })}
+              </p>
+              <p>({formatDate(timestamp, "PP pp z")})</p>
+            </div>
+          </GridItem>
+        )}
+      </section>
+
+      {/* section 2 */}
+      <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}
+            tooltip="Copy from address"
+            variant="ghost"
+            copyIconPosition="right"
+            className="truncate -translate-x-1.5 max-w-full"
+          />
+        </GridItem>
+
+        {transaction.to && (
+          <GridItem
+            label="Interacted with (To)"
+            tooltip="The receiving party of the transaction (could be a contract address)."
+          >
+            <CopyTextButton
+              textToCopy={transaction.to}
+              textToShow={transaction.to}
+              tooltip="Copy to address"
+              variant="ghost"
+              copyIconPosition="right"
+              className="truncate -translate-x-1.5 max-w-full"
+            />
+          </GridItem>
+        )}
+      </section>
+
+      {/* section 3 */}
+      <section className="py-6 space-y-5 lg:space-y-3 border-b">
+        <GridItem
+          label="Value"
+          tooltip="The value being transacted in ETH and fiat value. Note: You can click the fiat value (if available) to see historical value at the time of transaction."
+        >
+          <p>
+            {toEther(transaction.value)} {chain.nativeCurrency?.symbol}
+          </p>
+        </GridItem>
+
+        <GridItem
+          label="Transaction Fee"
+          tooltip="Amount paid to the validator for processing the transaction."
+        >
+          <p>
+            {toEther((transaction.gasPrice || 0n) * receipt.gasUsed)}{" "}
+            {chain.nativeCurrency?.symbol}
+          </p>
+        </GridItem>
+
+        <GridItem
+          label="Gas Price"
+          tooltip="The price per gas unit the sender is willing to pay"
+        >
+          <p>
+            {toEther(transaction.gasPrice || 0n)} {chain.nativeCurrency?.symbol}
+          </p>
+        </GridItem>
+
+        <GridItem
+          label="Gas Usage"
+          tooltip="The amount of gas used by the transaction."
+        >
+          <p>{receipt.gasUsed.toString()}</p>
+        </GridItem>
+
+        <GridItem
+          label="Gas Fees"
+          tooltip="Base Fee refers to the network Base Fee at the time of the block, while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay for their tx & to give to the miner respectively."
+        >
+          <p className="flex gap-2.5">
+            <span>Base: {toTokens(block.baseFeePerGas || 0n, 9)} Gwei</span>
+
+            {transaction.maxFeePerGas && (
+              <>
+                <span className="text-muted-foreground/50">|</span>
+                <span>
+                  Max: {toTokens(transaction.maxFeePerGas || 0n, 9)} Gwei
+                </span>
+              </>
+            )}
+
+            {transaction.maxPriorityFeePerGas && (
+              <>
+                <span className="text-muted-foreground/50">|</span>
+                <span>
+                  Max priority: {transaction.maxPriorityFeePerGas?.toString()}{" "}
+                  Gwei
+                </span>
+              </>
+            )}
+          </p>
+        </GridItem>
+
+        <GridItem
+          label="Burnt fees"
+          tooltip="The amount of fees that were burnt by the transaction."
+        >
+          <p>{toEther(block.baseFeePerGas || 0n * receipt.gasUsed)}</p>
+        </GridItem>
+      </section>
+
+      {/* section 4 */}
+      <section className="pt-6 space-y-5 lg:space-y-3">
+        <GridItem
+          label="Other Attributes"
+          tooltip="Other data related to this transaction."
+        >
+          <div className="flex gap-2 flex-wrap">
+            <Badge variant="outline" className="gap-1 py-1">
+              <span className="text-muted-foreground">Txn type:</span>
+              <span className="capitalize">
+                {hexToNumber(transaction.typeHex || "0x0")} ({transaction.type})
+              </span>
+            </Badge>
+            <Badge variant="outline" className="gap-1 py-1">
+              <span className="text-muted-foreground">Nonce: </span>
+              <span>{transaction.nonce}</span>
+            </Badge>
+            <Badge variant="outline" className="gap-1 py-1">
+              <span className="text-muted-foreground">Position: </span>
+              <span>{transaction.transactionIndex}</span>
+            </Badge>
+          </div>
+        </GridItem>
+
+        <GridItem
+          label="Input Data"
+          tooltip="Additional data included for this transaction. Commonly used as part of contract interaction or as a message sent to the recipient."
+        >
+          <PlainTextCodeBlock
+            code={transaction.input}
+            className="[&_code]:!whitespace-pre-wrap break-all [&_code]:text-xs text-muted-foreground w-full"
+            scrollableClassName="max-h-[400px] p-2 min-h-[80px]"
+          />
+        </GridItem>
+      </section>
+    </div>
+  );
+}
+
+function GridItem(props: {
+  label: string;
+  children: React.ReactNode;
+  tooltip?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-1 lg:grid grid-cols-[300px_1fr] items-start">
+      <div className="flex items-center gap-0.5">
+        <ToolTipLabel label={props.tooltip}>
+          <Button
+            asChild
+            variant="ghost"
+            className="h-auto w-auto p-1 hidden lg:block"
+          >
+            <div>
+              <InfoIcon className="size-3.5 text-muted-foreground" />
+            </div>
+          </Button>
+        </ToolTipLabel>
+        <p className="text-muted-foreground text-sm">{props.label}</p>
+      </div>
+      <div className="text-sm w-full">{props.children}</div>
+    </div>
+  );
+}
+
+function getDatefromTimestamp(timestamp: bigint) {
+  try {
+    return fromUnixTime(Number(timestamp));
+  } catch {
+    return undefined;
+  }
+}
@@ -0,0 +1,31 @@
+"use client";
+import { useState } from "react";
+import { TabButtons } from "@/components/ui/tabs";
+
+export function BridgeAndOverviewTabs(props: {
+  bridgeStatus: React.ReactNode;
+  overview: React.ReactNode;
+}) {
+  const [tab, setTab] = useState<"bridge" | "overview">("bridge");
+  return (
+    <div>
+      <TabButtons
+        tabs={[
+          {
+            name: "Bridge",
+            onClick: () => setTab("bridge"),
+            isActive: tab === "bridge",
+          },
+          {
+            name: "Overview",
+            onClick: () => setTab("overview"),
+            isActive: tab === "overview",
+          },
+        ]}
+      />
+      <div className="h-3" />
+      {tab === "bridge" && props.bridgeStatus}
+      {tab === "overview" && props.overview}
+    </div>
+  );
+}
@@ -5,7 +5,7 @@ import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { ChainSupportedService } from "@/types/chain";
 import { ChainIcon } from "../../../components/server/chain-icon";
-import { getChainMetadata } from "../../../utils";
+import { getCustomChainMetadata } from "../../../utils";

 type ChainListCardProps = {
  favoriteButton: JSX.Element | undefined;
@@ -18,7 +18,7 @@ type ChainListCardProps = {
  iconUrl?: string;
 };

-export async function ChainListCard({
+export function ChainListCard({
  isDeprecated,
  chainId,
  chainName,
@@ -28,7 +28,7 @@ export async function ChainListCard({
  favoriteButton,
  iconUrl,
 }: ChainListCardProps) {
-  const chainMetadata = await getChainMetadata(chainId);
+  const customChainMetadata = getCustomChainMetadata(chainId);

  return (
    <div className="relative h-full">
@@ -90,9 +90,9 @@ export async function ChainListCard({
            </tbody>
          </table>

-          {(isDeprecated || chainMetadata?.gasSponsored) && (
+          {(isDeprecated || customChainMetadata?.gasSponsored) && (
            <div className="mt-5 flex gap-5 border-t pt-4">
-              {!isDeprecated && chainMetadata?.gasSponsored && (
+              {!isDeprecated && customChainMetadata?.gasSponsored && (
                <div className="flex items-center gap-1.5">
                  <TicketCheckIcon className="size-5 text-foreground" />
                  <p className="text-sm">Gas Sponsored</p>
@@ -13,7 +13,7 @@ import { cn } from "@/lib/utils";
 import type { ChainSupportedService } from "@/types/chain";
 import { ChainIcon } from "../../../components/server/chain-icon";
 import { products } from "../../../components/server/products";
-import { getChainMetadata } from "../../../utils";
+import { getCustomChainMetadata } from "../../../utils";

 type ChainListRowProps = {
  favoriteButton: JSX.Element | undefined;
@@ -26,7 +26,7 @@ type ChainListRowProps = {
  iconUrl?: string;
 };

-export async function ChainListRow({
+export function ChainListRow({
  isDeprecated,
  chainId,
  chainName,
@@ -36,7 +36,7 @@ export async function ChainListRow({
  favoriteButton,
  iconUrl,
 }: ChainListRowProps) {
-  const chainMetadata = await getChainMetadata(chainId);
+  const chainMetadata = getCustomChainMetadata(chainId);
  return (
    <TableRow className="hover:bg-accent/50" linkBox>
      {/* Name */}
@@ -914,9 +914,9 @@ const chainMetaRecord = {
 } satisfies Record<number, ExtraChainMetadata>;
 // END TEMPORARY

-export async function getChainMetadata(
+export function getCustomChainMetadata(
  chainId: number,
-): Promise<(ExtraChainMetadata & { gasSponsored?: true }) | null> {
+): (ExtraChainMetadata & { gasSponsored?: true }) | null {
  // TODO: fetch this from the API
  if (chainId in chainMetaRecord) {
    return {
@@ -50,6 +50,7 @@ import {
 } from "@/constants/addresses";
 import { LAST_USED_PROJECT_ID, LAST_USED_TEAM_ID } from "@/constants/cookie";
 import { ZERO_FEE_CHAINS } from "@/constants/fee-config";
+import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
 import {
  useCustomFactoryAbi,
  useFunctionParamsFromABI,
@@ -206,6 +207,8 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({

  const activeAccount = useActiveAccount();
  const walletChain = useActiveWalletChain();
+  const walletChainMetadata = useV5DashboardChain(walletChain?.id);
+
  const { onError } = useTxNotifications(
    "Successfully deployed contract",
    "Failed to deploy contract",
@@ -656,6 +659,7 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
                chainId: walletChain.id,
                contractName: metadata.name,
                publisher: rewriteTwPublisher(metadata.publisher),
+                is_testnet: walletChainMetadata?.testnet,
              });

              deployStatusModal.nextStep();
@@ -694,6 +698,7 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
                contractName: metadata.name,
                errorMessage: parsedError,
                publisher: rewriteTwPublisher(metadata.publisher),
+                is_testnet: walletChain.testnet,
              });

              deployStatusModal.close();
@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
+import { cn } from "@/lib/utils";
+import { ThirdwebMiniLogo } from "../../../components/ThirdwebMiniLogo";
+import { PublicPageConnectButton } from "../../(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
+
+export function PageHeader(props: { containerClassName?: string }) {
+  return (
+    <div className="border-b">
+      <header
+        className={cn(
+          "container flex max-w-7xl justify-between py-3",
+          props.containerClassName,
+        )}
+      >
+        <div className="flex items-center gap-4">
+          <Link className="flex items-center gap-2" href="/team">
+            <ThirdwebMiniLogo className="h-5" />
+            <span className="hidden font-bold text-2xl tracking-tight lg:block">
+              thirdweb
+            </span>
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-5">
+          <Link
+            href="https://portal.thirdweb.com/bridge"
+            target="_blank"
+            className="text-sm text-muted-foreground hover:text-foreground"
+          >
+            Docs
+          </Link>
+          <ToggleThemeButton />
+          <PublicPageConnectButton connectButtonClassName="!rounded-full" />
+        </div>
+      </header>
+    </div>
+  );
+}
@@ -0,0 +1,142 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { Input } from "@workspace/ui/components/input";
+import { cn } from "@workspace/ui/lib/utils";
+import { ActivityIcon, SearchIcon, TrendingUpIcon } from "lucide-react";
+import { useCallback, useState } from "react";
+import { Bridge } from "thirdweb";
+import { BridgeNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Button } from "@/components/ui/button";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { TokensTable } from "./tokens-table";
+
+const client = getClientThirdwebClient();
+
+const pageSize = 20;
+
+type Filter =
+  | { type: "filter"; value: "volume" | "market_cap" }
+  | { type: "search"; value: string };
+
+export function TokenPage(props: { chains: Bridge.chains.Result }) {
+  const [page, setPage] = useState(1);
+  const [chainId, setChainId] = useState(1);
+  const [filter, _setFilter] = useState<Filter>({
+    type: "filter",
+    value: "volume",
+  });
+
+  const setFilter = useCallback((filter: Filter) => {
+    _setFilter(filter);
+    setPage(1);
+  }, []);
+
+  const tokensQuery = useQuery({
+    queryKey: [
+      "tokens",
+      {
+        page,
+        chainId,
+        filter,
+      },
+    ],
+    queryFn: () => {
+      return Bridge.tokens({
+        client: client,
+        chainId: chainId,
+        limit: pageSize,
+        offset: (page - 1) * pageSize,
+        sortBy: filter.type === "filter" ? filter.value : undefined,
+        query: filter.type === "search" ? filter.value : undefined,
+      });
+    },
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
+
+  return (
+    <div className="pb-20 pt-8">
+      <div className="container max-w-7xl">
+        <div className="mb-4 flex gap-4 lg:gap-3 flex-col lg:flex-row">
+          <BridgeNetworkSelector
+            client={client}
+            chainId={chainId}
+            onChange={setChainId}
+            className="rounded-xl bg-card lg:w-fit min-w-[280px]"
+            popoverContentClassName="!w-[300px] rounded-xl overflow-hidden"
+            chains={props.chains}
+          />
+
+          <div className="flex gap-3">
+            <SortButton
+              label="Popular"
+              onClick={() => {
+                setFilter({ type: "filter", value: "market_cap" });
+              }}
+              isSelected={
+                filter.type === "filter" && filter.value === "market_cap"
+              }
+              icon={ActivityIcon}
+            />
+            <SortButton
+              label="Trending"
+              onClick={() => {
+                setFilter({ type: "filter", value: "volume" });
+              }}
+              isSelected={filter.type === "filter" && filter.value === "volume"}
+              icon={TrendingUpIcon}
+            />
+          </div>
+
+          <div className="relative w-full lg:w-[420px] ml-auto">
+            <SearchIcon className="size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Search Tokens"
+              value={filter.type === "search" ? filter.value : ""}
+              className="rounded-xl bg-card flex-1 pl-9"
+              onChange={(e) =>
+                setFilter({ type: "search", value: e.target.value })
+              }
+            />
+          </div>
+        </div>
+
+        <TokensTable
+          pageSize={pageSize}
+          tokens={tokensQuery.data ?? []}
+          isFetching={tokensQuery.isFetching}
+          pagination={{
+            onNext: () => setPage(page + 1),
+            onPrevious: () => setPage(page - 1),
+            nextDisabled: !!(
+              tokensQuery.data && tokensQuery.data.length < pageSize
+            ),
+            previousDisabled: page === 1,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function SortButton(props: {
+  label: string;
+  onClick: () => void;
+  isSelected: boolean;
+  icon: React.FC<{ className?: string }>;
+}) {
+  return (
+    <Button
+      variant="outline"
+      onClick={props.onClick}
+      className={cn(
+        "rounded-xl gap-2 bg-card",
+        props.isSelected && "bg-accent border-active-border",
+      )}
+    >
+      <props.icon className="size-3.5" />
+      {props.label}
+    </Button>
+  );
+}
@@ -0,0 +1,212 @@
+"use client";
+
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
+import { type Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export function TokensTable(props: {
+  tokens: Bridge.TokenWithPrices[];
+  pageSize: number;
+  isFetching: boolean;
+  pagination: {
+    onNext: () => void;
+    onPrevious: () => void;
+    nextDisabled: boolean;
+    previousDisabled: boolean;
+  };
+}) {
+  const { tokens, isFetching } = props;
+
+  return (
+    <div className="border rounded-xl overflow-hidden">
+      <TableContainer className="border-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Token</TableHead>
+              <TableHead>Price</TableHead>
+              <TableHead>Market cap</TableHead>
+              <TableHead>Volume (24h)</TableHead>
+              <TableHead></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isFetching
+              ? new Array(props.pageSize).fill(0).map((_, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: ok
+                  <TableRow key={i}>
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <Skeleton className="size-10 rounded-full" />
+                        <div className="flex flex-col gap-1.5">
+                          <Skeleton className="h-4 w-16" />
+                          <Skeleton className="h-3 w-36" />
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto h-4 w-16" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto h-4 w-20" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto h-4 w-20" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto h-4 w-20" />
+                    </TableCell>
+                  </TableRow>
+                ))
+              : tokens.length > 0
+                ? tokens.map((token) => {
+                    const price = token.prices.USD;
+                    return (
+                      <TableRow
+                        key={`${token.chainId}-${token.address}`}
+                        className="hover:bg-accent/50"
+                        linkBox
+                      >
+                        <TableCell>
+                          <div className="flex items-center gap-3">
+                            <Avatar className="size-10">
+                              <AvatarImage
+                                src={token.iconUri ?? undefined}
+                                alt={token.symbol}
+                                className="rounded-full"
+                              />
+                              <AvatarFallback>
+                                {token.symbol?.slice(0, 2)?.toUpperCase()}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="flex flex-col gap-1.5">
+                              <span className="font-medium leading-none text-base">
+                                {token.symbol}
+                              </span>
+                              <span className="text-sm text-muted-foreground leading-none">
+                                {token.name}
+                              </span>
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          {price ? formatPrice(price) : "N/A"}
+                        </TableCell>
+                        <TableCell>
+                          {token.marketCapUsd
+                            ? formatUsdCompact(token.marketCapUsd)
+                            : "N/A"}
+                        </TableCell>
+                        <TableCell>
+                          {token.volume24hUsd
+                            ? formatUsdCompact(token.volume24hUsd)
+                            : "N/A"}
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            asChild
+                            variant="outline"
+                            size="sm"
+                            className="gap-2 rounded-full bg-card hover:border-foreground/50 text-muted-foreground hover:bg-inverted hover:text-inverted-foreground"
+                          >
+                            <Link
+                              aria-label={`Buy ${token.symbol}`}
+                              href={
+                                token.address.toLowerCase() ===
+                                NATIVE_TOKEN_ADDRESS.toLowerCase()
+                                  ? `/${token.chainId}`
+                                  : `/${token.chainId}/${token.address}`
+                              }
+                              prefetch={false}
+                              className="before:absolute before:inset-0"
+                            >
+                              Buy
+                              <ArrowRightIcon className="size-3" />
+                            </Link>
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+                : null}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {tokens.length === 0 && !isFetching && (
+        <div className="flex items-center justify-center py-20 text-muted-foreground w-full text-sm ">
+          No tokens found
+        </div>
+      )}
+
+      <div className="flex justify-end p-4 gap-3 border-t bg-card">
+        <Button
+          variant="outline"
+          className="gap-2 rounded-full"
+          size="sm"
+          onClick={() => props.pagination.onPrevious()}
+          disabled={props.pagination.previousDisabled || isFetching}
+        >
+          <ArrowLeftIcon className="size-4" />
+          Previous
+        </Button>
+
+        <Button
+          variant="outline"
+          className="gap-2 rounded-full"
+          size="sm"
+          onClick={() => props.pagination.onNext()}
+          disabled={props.pagination.nextDisabled || isFetching}
+        >
+          Next
+          <ArrowRightIcon className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function formatPrice(value: number): string {
+  if (value < 100) {
+    return smallValueUSDFormatter.format(value);
+  }
+  return largeValueUSDFormatter.format(value);
+}
+
+const smallValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 6,
+  roundingMode: "halfEven",
+});
+
+const largeValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 2,
+  roundingMode: "halfEven",
+});
+
+const compactValueUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  notation: "compact",
+  maximumFractionDigits: 2,
+  roundingMode: "halfEven",
+});
+
+function formatUsdCompact(value: number): string {
+  return compactValueUSDFormatter.format(value);
+}
@@ -0,0 +1,57 @@
+import { BringToFrontIcon } from "lucide-react";
+import type { Metadata } from "next";
+import { unstable_cache } from "next/cache";
+import { Bridge } from "thirdweb";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
+import { PageHeader } from "./components/header";
+import { TokenPage } from "./components/token-page";
+
+const title = "Tokens | thirdweb";
+const description = "Discover and swap any tokens on any chain, instantly";
+
+export const metadata: Metadata = {
+  description,
+  openGraph: {
+    description,
+    title,
+  },
+  title,
+};
+
+export default async function Page() {
+  const chains = await getBridgeSupportedChains();
+
+  return (
+    <div>
+      <PageHeader />
+      <div className="border-b py-10 ">
+        <div className="container max-w-7xl">
+          <div className="flex mb-4">
+            <div className="rounded-full bg-card p-2.5 border">
+              <BringToFrontIcon className="size-6 text-muted-foreground" />
+            </div>
+          </div>
+          <h1 className="text-4xl font-bold tracking-tighter mb-1">
+            Discover and swap any tokens on any chain, instantly
+          </h1>
+
+          <p className="text-muted-foreground">
+            85+ chains, 4500+ tokens and 9+ million routes supported
+          </p>
+        </div>
+      </div>
+      <TokenPage chains={chains} />
+    </div>
+  );
+}
+
+const getBridgeSupportedChains = unstable_cache(
+  async () => {
+    const chains = await Bridge.chains({ client: serverThirdwebClient });
+    return chains;
+  },
+  ["bridge-supported-chains"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
@@ -1,5 +1,4 @@
 import { ImageResponse } from "next/og";
-import { useId } from "react";
 import { download } from "thirdweb/storage";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
@@ -19,8 +18,8 @@ export const size = {
 export const contentType = "image/png";

 const TWLogo: React.FC = () => {
-  const cipId = useId();
-  const linearGradientId = useId();
+  const cipId = "og-tw-logo-clip-path";
+  const linearGradientId = "og-tw-logo-linear-gradient";

  return (
    // biome-ignore lint/a11y/noSvgWithoutTitle: not needed
@@ -55,7 +55,7 @@ export function CreateProjectFormOnboarding(props: {
          <CreateProjectForm
            createProject={async (params) => {
              const res = await createProjectClient(props.teamId, params);
-              await createVaultAccountAndAccessToken({
+              const vaultTokens = await createVaultAccountAndAccessToken({
                project: res.project,
                projectSecretKey: res.secret,
              }).catch((error) => {
@@ -65,6 +65,16 @@ export function CreateProjectFormOnboarding(props: {
                );
                throw error;
              });
+
+              const managementAccessToken =
+                vaultTokens.managementToken?.accessToken;
+
+              if (!managementAccessToken) {
+                throw new Error(
+                  "Missing management access token for project wallet",
+                );
+              }
+
              return {
                project: res.project,
                secret: res.secret,
@@ -103,15 +103,12 @@ export default async function TeamLayout(props: {
        >
          {props.children}
        </TeamSidebarLayout>
-        <div className="fixed right-4 bottom-4 z-50">
-          <CustomChatButton
-            authToken={authToken}
-            clientId={undefined}
-            examplePrompts={siwaExamplePrompts}
-            label="Get Help"
-            team={team}
-          />
-        </div>
+        <CustomChatButton
+          authToken={authToken}
+          clientId={undefined}
+          examplePrompts={siwaExamplePrompts}
+          team={team}
+        />
      </div>
    </SidebarProvider>
  );
@@ -25,6 +25,34 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { ThirdwebMiniLogo } from "../../../../../../../components/ThirdwebMiniLogo";
 import { searchParams } from "../search-params";

+function getStatusBadge(invoice: Stripe.Invoice) {
+  switch (invoice.status) {
+    case "paid":
+      return <Badge variant="success">Paid</Badge>;
+    case "open":
+    // we treat "uncollectible" as unpaid
+    case "uncollectible": {
+      // if the invoice has a due date, use that, otherwise use the effective at date (which is the date the invoice was created)
+      const effectiveDueDate = invoice.due_date || invoice.effective_at;
+
+      // if the invoice due date is in the past, we want to display it as past due
+      if (effectiveDueDate && effectiveDueDate * 1000 < Date.now()) {
+        return <Badge variant="destructive">Past Due</Badge>;
+      }
+      return <Badge variant="outline">Open</Badge>;
+    }
+    case "void":
+      return <Badge variant="secondary">Void</Badge>;
+
+    default:
+      return <Badge variant="outline">Unknown</Badge>;
+  }
+}
+
+function isInvoicePayable(invoice: Stripe.Invoice) {
+  return invoice.status === "open" || invoice.status === "uncollectible";
+}
+
 export function BillingHistory(props: {
  teamSlug: string;
  invoices: Stripe.Invoice[];
@@ -57,27 +85,6 @@ export function BillingHistory(props: {
    });
  };

-  const getStatusBadge = (invoice: Stripe.Invoice) => {
-    switch (invoice.status) {
-      case "paid":
-        return <Badge variant="success">Paid</Badge>;
-      case "open":
-      // we treate "uncollectible" as unpaid
-      case "uncollectible": {
-        // if the invoice due date is in the past, we want to display it as past due
-        if (invoice.due_date && invoice.due_date * 1000 < Date.now()) {
-          return <Badge variant="destructive">Past Due</Badge>;
-        }
-        return <Badge variant="outline">Open</Badge>;
-      }
-      case "void":
-        return <Badge variant="secondary">Void</Badge>;
-
-      default:
-        return <Badge variant="outline">Unknown</Badge>;
-    }
-  };
-
  if (props.invoices.length === 0) {
    if (props.status === "open") {
      return (
@@ -126,7 +133,7 @@ export function BillingHistory(props: {
                <TableCell>{getStatusBadge(invoice)}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end space-x-2">
-                    {invoice.status === "open" && (
+                    {isInvoicePayable(invoice) && (
                      <>
                        {/* always show the crypto payment button */}
                        <ToolTipLabel
@@ -552,7 +552,7 @@ export function AccountAbstractionSettingsPage(
                        you build your own rules.{" "}
                        <UnderlineLink
                          className="text-primary-500"
-                          href="https://portal.thirdweb.com/wallets/smart-wallet/sponsorship-rules#setting-up-a-server-verifier"
+                          href="https://portal.thirdweb.com/transactions/policies#server-verifier"
                          rel="noopener noreferrer"
                          target="_blank"
                        >
@@ -1,6 +1,6 @@
 "use client";

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

@@ -2,6 +2,9 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import type { ProjectResponse } from "@thirdweb-dev/service-utils";
+import { Button } from "@workspace/ui/components/button";
+import { Spinner } from "@workspace/ui/components/spinner";
+import { PlusIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
@@ -19,7 +22,6 @@ import {
  type RouteDiscoveryValidationSchema,
  routeDiscoveryValidationSchema,
 } from "@/schema/validations";
-import { RouteDiscoveryCard } from "./RouteDiscoveryCard";

 export const RouteDiscovery = ({
  project,
@@ -77,33 +79,21 @@ export const RouteDiscovery = ({
    },
  );

+  const errorText = form.getFieldState("tokenAddress").error?.message;
+
  return (
    <Form {...form}>
      <form autoComplete="off" onSubmit={handleSubmit}>
-        <RouteDiscoveryCard
-          bottomText=""
-          errorText={form.getFieldState("tokenAddress").error?.message}
-          noPermissionText={undefined}
-          saveButton={
-            // Only show the submit button in the default state
-            {
-              disabled: !form.formState.isDirty,
-              isPending: submitDiscoveryMutation.isPending,
-              type: "submit",
-              variant: "outline",
-            }
-          }
-        >
-          <div>
-            <h3 className="font-semibold text-xl tracking-tight">
+        <div className="relative rounded-lg border border-border bg-card">
+          <div className="relative border-dashed border-b px-4 py-6 lg:px-6">
+            <h3 className="font-semibold text-xl tracking-tight mb-1">
              Add a token to Bridge
            </h3>
-            <p className="mt-1.5 mb-4 text-muted-foreground max-w-3xl text-sm text-pretty">
+            <p className="mb-4 text-muted-foreground max-w-3xl text-sm text-pretty">
              Select your chain and input the token address to automatically
              kick-off the token route discovery process. <br /> This may take
              up to 20-40 minutes to complete.
            </p>
-
            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 max-w-3xl">
              <FormField
                control={form.control}
@@ -142,7 +132,33 @@ export const RouteDiscovery = ({
              />
            </div>
          </div>
-        </RouteDiscoveryCard>
+          <div>
+            <div className="flex items-center justify-between gap-2 px-4 py-4 lg:px-6">
+              {errorText ? (
+                <p className="text-destructive-text text-sm">{errorText}</p>
+              ) : (
+                <div />
+              )}
+
+              <Button
+                className="gap-1.5 rounded-full"
+                disabled={
+                  !form.formState.isDirty || submitDiscoveryMutation.isPending
+                }
+                size="sm"
+                type="submit"
+                variant={"outline"}
+              >
+                {submitDiscoveryMutation.isPending ? (
+                  <Spinner className="size-3" />
+                ) : (
+                  <PlusIcon className="size-4 text-muted-foreground" />
+                )}
+                Add Token
+              </Button>
+            </div>
+          </div>
+        </div>
      </form>
    </Form>
  );
@@ -1,84 +0,0 @@
-import type React from "react";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/Spinner";
-import { cn } from "@/lib/utils";
-
-export function RouteDiscoveryCard(
-  props: React.PropsWithChildren<{
-    bottomText: React.ReactNode;
-    header?: {
-      description: string | undefined;
-      title: string;
-    };
-    errorText: string | undefined;
-    noPermissionText: string | undefined;
-    saveButton?: {
-      onClick?: () => void;
-      disabled: boolean;
-      isPending: boolean;
-      type?: "submit";
-      variant?:
-        | "ghost"
-        | "default"
-        | "primary"
-        | "destructive"
-        | "outline"
-        | "secondary";
-      className?: string;
-      label?: string;
-    };
-  }>,
-) {
-  return (
-    <div className="relative rounded-lg border border-border bg-card">
-      <div
-        className={cn(
-          "relative border-border border-b px-4 py-6 lg:px-6",
-          props.noPermissionText && "cursor-not-allowed",
-        )}
-      >
-        {props.header && (
-          <>
-            <h3 className="font-semibold text-xl tracking-tight">
-              {props.header.title}
-            </h3>
-            {props.header.description && (
-              <p className="mt-1.5 mb-4 text-foreground text-sm">
-                {props.header.description}
-              </p>
-            )}
-          </>
-        )}
-
-        {props.children}
-      </div>
-
-      <div className="flex min-h-[60px] items-center justify-between gap-2 px-4 py-3 lg:px-6">
-        {props.noPermissionText ? (
-          <p className="text-muted-foreground text-sm">
-            {props.noPermissionText}
-          </p>
-        ) : props.errorText ? (
-          <p className="text-destructive-text text-sm">{props.errorText}</p>
-        ) : (
-          <p className="text-muted-foreground text-sm">{props.bottomText}</p>
-        )}
-
-        {props.saveButton && !props.noPermissionText && (
-          <Button
-            className={cn("gap-2", props.saveButton.className)}
-            disabled={props.saveButton.disabled || props.saveButton.isPending}
-            onClick={props.saveButton.onClick}
-            size="sm"
-            type={props.saveButton.type}
-            variant={props.saveButton.variant || "outline"}
-          >
-            {props.saveButton.isPending && <Spinner className="size-3" />}
-            {props.saveButton.label ||
-              (props.saveButton.isPending ? "Submit" : "Submit Token")}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
@@ -11,6 +11,7 @@ import { PayAnalytics } from "../payments/components/PayAnalytics";
 import { getUniversalBridgeFiltersFromSearchParams } from "../payments/components/time";
 import { QuickStartSection } from "./QuickstartSection.client";
 import { RouteDiscovery } from "./RouteDiscovery";
+import { ViewTxStatus } from "./view-tx-status";

 export default async function Page(props: {
  params: Promise<{
@@ -69,72 +70,22 @@ export default async function Page(props: {
          },
        },
        links: [
-          // TODO - add docs when bridge docs are added in portal
-          // {
-          // 	type: "docs",
-          // 	href: "https://portal.thirdweb.com/payments",
-          // },
+          {
+            type: "docs",
+            href: "https://portal.thirdweb.com/bridge",
+          },
+          {
+            type: "playground",
+            href: "https://playground.thirdweb.com/bridge/swap-widget",
+          },
          {
            type: "api",
            href: "https://api.thirdweb.com/reference#tag/bridge",
          },
        ],
      }}
-      footer={{
-        center: {
-          links: [
-            {
-              href: "https://playground.thirdweb.com/payments/ui-components",
-              label: "UI Component",
-            },
-            {
-              href: "https://playground.thirdweb.com/connect/payments/fund-wallet",
-              label: "Buy Crypto",
-            },
-            {
-              href: "https://playground.thirdweb.com/connect/payments/commerce",
-              label: "Checkout",
-            },
-            {
-              href: "https://playground.thirdweb.com/connect/payments/transactions",
-              label: "Transactions",
-            },
-          ],
-          title: "Demos",
-        },
-        left: {
-          links: [
-            {
-              href: "https://portal.thirdweb.com/payments",
-              label: "Overview",
-            },
-            {
-              href: "https://portal.thirdweb.com/typescript/v5/convertCryptoToFiat",
-              label: "TypeScript",
-            },
-            {
-              href: "https://portal.thirdweb.com/react/v5/pay/fund-wallets",
-              label: "React",
-            },
-            {
-              href: "https://portal.thirdweb.com/dotnet/universal-bridge/quickstart",
-              label: ".NET",
-            },
-          ],
-          title: "Documentation",
-        },
-        right: {
-          links: [
-            {
-              href: "https://www.youtube.com/watch?v=aBu175-VsNY",
-              label: "Implement cross-chain payments in any app",
-            },
-          ],
-          title: "Tutorials",
-        },
-      }}
    >
-      <div className="flex flex-col gap-12">
+      <div className="flex flex-col gap-6">
        <ResponsiveSearchParamsProvider value={searchParams}>
          <PayAnalytics
            client={client}
@@ -149,12 +100,16 @@ export default async function Page(props: {

        <RouteDiscovery client={client} project={project} />

-        <QuickStartSection
-          projectSlug={params.project_slug}
-          teamSlug={params.team_slug}
-          clientId={project.publishableKey}
-          teamId={project.teamId}
-        />
+        <ViewTxStatus client={client} />
+
+        <div className="pt-4">
+          <QuickStartSection
+            projectSlug={params.project_slug}
+            teamSlug={params.team_slug}
+            clientId={project.publishableKey}
+            teamId={project.teamId}
+          />
+        </div>
      </div>
    </ProjectPage>
  );
@@ -0,0 +1,72 @@
+"use client";
+import { Button } from "@workspace/ui/components/button";
+import { ArrowUpRightIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function ViewTxStatus(props: { client: ThirdwebClient }) {
+  const [txHash, setTxHash] = useState("");
+  const [chainId, setChainId] = useState<number>(1);
+
+  const isValidTxHash = txHash.length === 66 && txHash.startsWith("0x");
+  const isEnabled = !!txHash && !!chainId && isValidTxHash;
+
+  return (
+    <div className="bg-card rounded-xl border">
+      <div className="p-4 lg:p-6 mb-3">
+        <h3 className="font-semibold text-xl tracking-tight mb-1">
+          View transaction status
+        </h3>
+        <p className="text-sm text-muted-foreground mb-4">
+          Select chain and enter the transaction hash to view the transaction
+          status.
+        </p>
+
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 max-w-3xl">
+          <div className="space-y-2">
+            <Label>Chain</Label>
+            <SingleNetworkSelector
+              chainId={chainId}
+              onChange={setChainId}
+              client={props.client}
+              disableChainId
+              className="bg-background"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="view-tx-hash">Transaction Hash</Label>
+            <Input
+              id="view-tx-hash"
+              value={txHash}
+              onChange={(e) => setTxHash(e.target.value)}
+              placeholder="0x.."
+            />
+            {txHash && !isValidTxHash && (
+              <p className="text-sm text-destructive-text">
+                Invalid transaction hash
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="px-4 lg:px-6 py-4 border-t border-dashed justify-end items-center flex">
+        <Button
+          asChild
+          disabled={!isEnabled}
+          size="sm"
+          variant={isEnabled ? "default" : "outline"}
+          className="gap-1.5 rounded-full"
+        >
+          <Link href={`/${chainId.toString()}/tx/${txHash}`} target="_blank">
+            View Transaction Status <ArrowUpRightIcon className="size-4" />
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}
@@ -1,45 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { TabButtons } from "@/components/ui/tabs";
-
-type TabKey =
-  | "ts"
-  | "react"
-  | "react-native"
-  | "dotnet"
-  | "unity"
-  | "unreal"
-  | "api"
-  | "curl";
-
-const tabNames: Record<TabKey, string> = {
-  api: "API",
-  ts: "TypeScript",
-  react: "React",
-  "react-native": "React Native",
-  dotnet: ".NET",
-  unity: "Unity",
-  unreal: "Unreal Engine",
-  curl: "cURL",
-};
-
-export function IntegrateAPIKeyCodeTabs(props: {
-  tabs: Record<TabKey, React.ReactNode>;
-}) {
-  const [tab, setTab] = useState<TabKey>("api");
-
-  return (
-    <div>
-      <TabButtons
-        tabs={Object.entries(tabNames).map(([key, name]) => ({
-          isActive: tab === key,
-          name,
-          onClick: () => setTab(key as TabKey),
-        }))}
-      />
-      <div className="h-2" />
-      {props.tabs[tab]}
-    </div>
-  );
-}
@@ -31,5 +31,6 @@ export const Default: Story = {
      ],
    },
    teamSlug: "bar",
+    managementAccessToken: undefined,
  },
 };
@@ -1,14 +1,11 @@
 import {
  ArrowLeftRightIcon,
  ChevronRightIcon,
-  CircleAlertIcon,
  ExternalLinkIcon,
 } from "lucide-react";
 import Link from "next/link";
 import type { Project } from "@/api/project/projects";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { CodeServer } from "@/components/ui/code/code.server";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { DotNetIcon } from "@/icons/brand-icons/DotNetIcon";
 import { GithubIcon } from "@/icons/brand-icons/GithubIcon";
 import { ReactIcon } from "@/icons/brand-icons/ReactIcon";
@@ -18,17 +15,34 @@ 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 { IntegrateAPIKeyCodeTabs } from "./IntegrateAPIKeyCodeTabs";
+import { ProjectWalletControls } from "./ProjectWalletControls.client";
+import { ProjectWalletSetup } from "./ProjectWalletSetup.client";
 import { SecretKeySection } from "./SecretKeySection";

-export function ProjectFTUX(props: { project: Project; teamSlug: string }) {
+export async function ProjectFTUX(props: {
+  project: Project;
+  teamSlug: string;
+  wallet?: ProjectWalletSummary | undefined;
+  managementAccessToken: string | undefined;
+}) {
+  const projectWallet = props.wallet ?? (await getProjectWallet(props.project));
+
  return (
    <div className="flex flex-col gap-10">
-      <IntegrateAPIKeySection
+      <ProjectWalletSection
        project={props.project}
        teamSlug={props.teamSlug}
+        wallet={projectWallet}
+        managementAccessToken={props.managementAccessToken}
      />
+      <IntegrateAPIKeySection project={props.project} />
      <ProductsSection
        projectSlug={props.project.slug}
        teamSlug={props.teamSlug}
@@ -39,15 +53,67 @@ export function ProjectFTUX(props: { project: Project; teamSlug: string }) {
  );
 }

-// Integrate API key section ------------------------------------------------------------
-
-function IntegrateAPIKeySection({
-  project,
-  teamSlug,
-}: {
+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 }) {
  const secretKeyMasked = project.secretKeys[0]?.masked;
  const clientId = project.publishableKey;

@@ -69,194 +135,38 @@ function IntegrateAPIKeySection({
        </div>

        <div className="h-5" />
-        <IntegrationCodeExamples project={project} teamSlug={teamSlug} />
+        <div className="flex flex-col gap-3">
+          <p className="text-muted-foreground text-sm">
+            Run this command in your terminal to send a test transaction using
+            your Project Wallet.
+          </p>
+          <CodeServer
+            className="bg-background"
+            code={curlCodeExample(project)}
+            lang="bash"
+          />
+        </div>
      </div>
    </section>
  );
 }
-
-function IntegrationCodeExamples(props: {
-  project: Project;
-  teamSlug: string;
-}) {
-  return (
-    <IntegrateAPIKeyCodeTabs
-      tabs={{
-        dotnet: (
-          <div className="flex flex-col gap-3">
-            <CodeServer
-              className="bg-background"
-              code={dotNotCodeExample(props.project)}
-              lang="csharp"
-            />
-            <Alert className="bg-background" variant="info">
-              <CircleAlertIcon className="size-5" />
-              <AlertTitle>
-                Configure your app's bundle ID in "Allowed Bundle IDs" in
-                Project
-              </AlertTitle>
-              <AlertDescription className="leading-loose">
-                Go to{" "}
-                <UnderlineLink
-                  href={`/team/${props.teamSlug}/${props.project.slug}/settings`}
-                  target="_blank"
-                >
-                  Project settings
-                </UnderlineLink>{" "}
-                and add your app's bundle ID to the "Allowed Bundle IDs" list.
-              </AlertDescription>
-            </Alert>
-          </div>
-        ),
-        react: (
-          <CodeServer
-            className="bg-background"
-            code={reactCodeExample(props.project)}
-            lang="ts"
-          />
-        ),
-        "react-native": (
-          <CodeServer
-            className="bg-background"
-            code={reactCodeExample(props.project)}
-            lang="ts"
-          />
-        ),
-        ts: (
-          <CodeServer
-            className="bg-background"
-            code={typescriptCodeExample(props.project)}
-            lang="ts"
-          />
-        ),
-        unity: (
-          <Alert className="bg-background" variant="info">
-            <CircleAlertIcon className="size-5" />
-            <AlertTitle>
-              Configure Client ID in Thirdweb Manager prefab
-            </AlertTitle>
-            <AlertDescription className="leading-loose">
-              Configure "Client ID" and "Bundle ID" in{" "}
-              <UnderlineLink
-                href="https://portal.thirdweb.com/unity/v5/thirdwebmanager"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Thirdweb Manager prefab
-              </UnderlineLink>
-              <span className="block text-sm">
-                Make sure to configure your app's bundle ID in "Allowed Bundle
-                IDs" in{" "}
-                <UnderlineLink
-                  href={`/team/${props.teamSlug}/${props.project.slug}/settings`}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Project settings
-                </UnderlineLink>
-              </span>
-            </AlertDescription>
-          </Alert>
-        ),
-        unreal: (
-          <Alert className="bg-background" variant="info">
-            <CircleAlertIcon className="size-5" />
-            <AlertTitle>
-              Configure Client ID in Thirdweb Unreal Plugin{" "}
-            </AlertTitle>
-            <AlertDescription className="leading-loose">
-              Configure "Client ID" and "Bundle ID" in{" "}
-              <UnderlineLink
-                href="https://portal.thirdweb.com/unreal-engine/getting-started"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                thirdweb plugin settings
-              </UnderlineLink>
-              <span className="block text-sm">
-                Make sure to configure your app's bundle ID in "Allowed Bundle
-                IDs" in{" "}
-                <UnderlineLink
-                  href={`/team/${props.teamSlug}/${props.project.slug}/settings`}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Project settings
-                </UnderlineLink>
-              </span>
-            </AlertDescription>
-          </Alert>
-        ),
-        api: (
-          <CodeServer
-            className="bg-background"
-            code={apiCodeExample(props.project)}
-            lang="javascript"
-          />
-        ),
-        curl: (
-          <CodeServer
-            className="bg-background"
-            code={curlCodeExample(props.project)}
-            lang="bash"
-          />
-        ),
-      }}
-    />
-  );
-}
-
-const typescriptCodeExample = (project: Project) => `\
-import { createThirdwebClient } from "thirdweb";
-
-const client = createThirdwebClient({
-  // use clientId for client side usage
-  clientId: "${project.publishableKey}",
-  // use secretKey for server side usage
-  secretKey: "${project.secretKeys[0]?.masked}", // replace this with full secret key
-});`;
-
-const reactCodeExample = (project: Project) => `\
-import { createThirdwebClient } from "thirdweb";
-
-const client = createThirdwebClient({
-  clientId: "${project.publishableKey}",
-});`;
-
-const dotNotCodeExample = (project: Project) => `\
-using Thirdweb;
-
-// For web applications
-var client = ThirdwebClient.Create(clientId: "${project.publishableKey}");
-
-// For native applications - Replace "yourBundleId" with your app's bundle ID
-var client = ThirdwebClient.Create(clientId: "${project.publishableKey}", bundleId: "yourBundleId");
-
-// For backend applications (Note: below shown secret key is not the full secret key)
-var client = ThirdwebClient.Create(secretKey: "${project.secretKeys[0]?.masked}");`;
-
-const apiCodeExample = (project: Project): string => `\
-// Server-side only: replace with your full secret key. Never expose in browser code.
-fetch('https://api.thirdweb.com/v1/wallets/server', {
-  method: 'POST',
-  headers: {
-    'Content-Type': 'application/json',
-    'x-secret-key': '${project.secretKeys[0]?.masked ?? "<YOUR_SECRET_KEY>"}'
-  },
-  body: JSON.stringify({
-    identifier: 'treasury-wallet-123'
-  })
-});`;
-
 const curlCodeExample = (project: Project): string => `\
-// Server-side only: replace with your full secret key. Never expose in browser code.
-curl https://api.thirdweb.com/v1/wallets/server \\
+curl https://api.thirdweb.com/v1/transactions \\
  --request POST \\
  --header 'Content-Type: application/json' \\
  --header 'x-secret-key: ${project.secretKeys[0]?.masked ?? "<YOUR_SECRET_KEY>"}' \\
  --data '{
-  "identifier": "treasury-wallet-123"
-}'`;
+  "chainId": 421614,
+  "transactions": [
+    {
+      "data": "0x",
+      "to": "vitalik.eth",
+      "value": "0"
+    }
+  ]
+}'
+`;
+
 // products section ------------------------------------------------------------

 function ProductsSection(props: { teamSlug: string; projectSlug: string }) {
@@ -0,0 +1,747 @@
+"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>
+  );
+}
@@ -0,0 +1,215 @@
+"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>
+  );
+}
@@ -1,3 +1,4 @@
+import { Input } from "@workspace/ui/components/input";
 import { format, formatDistanceToNowStrict } from "date-fns";
 import {
  ArrowLeftIcon,
@@ -110,6 +111,7 @@ export function TransactionsTable(props: {
  const [autoUpdate, setAutoUpdate] = useState(true);
  const [page, setPage] = useState(1);
  const [status, setStatus] = useState<EngineStatus | undefined>(undefined);
+  const [filterId, setFilterId] = useState<string | undefined>(undefined);
  const autoUpdateId = useId();
  const pageSize = 10;
  const transactionsQuery = useEngineTransactions({
@@ -121,6 +123,7 @@ export function TransactionsTable(props: {
      page: page,
      status,
    },
+    id: filterId,
  });

  const transactions = transactionsQuery.data?.transactions ?? [];
@@ -160,6 +163,16 @@ export function TransactionsTable(props: {
              onCheckedChange={(v) => setAutoUpdate(!!v)}
            />
          </div>
+          <Input
+            className="max-w-[250px]"
+            onChange={(e) => {
+              const value = e.target.value.trim();
+              setFilterId(value || undefined);
+              setPage(1);
+            }}
+            placeholder="Filter by Queue ID"
+            value={filterId || ""}
+          />
          <StatusSelector
            setStatus={(v) => {
              setStatus(v);
@@ -77,15 +77,12 @@ export default async function ProjectLayout(props: {
          {props.children}
        </ProjectSidebarLayout>
      </div>
-      <div className="fixed right-4 bottom-4 z-50">
-        <CustomChatButton
-          authToken={authToken}
-          clientId={project.publishableKey}
-          examplePrompts={siwaExamplePrompts}
-          label="Ask AI Assistant"
-          team={team}
-        />
-      </div>
+      <CustomChatButton
+        authToken={authToken}
+        clientId={project.publishableKey}
+        examplePrompts={siwaExamplePrompts}
+        team={team}
+      />
      <SaveLastUsedProject projectId={project.id} teamId={team.id} />
    </SidebarProvider>
  );
--- a/Show More
+++ b/Show More