Merge branch 'dustin/engine_playground' of https://github.com/thirdweb-dev/js into dustin/engine_playground

Author: DustinTurska

.changeset/clever-carrots-march.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Add headless components: ChainProvider, ChainIcon & ChainName

.changeset/perfect-bananas-behave.md

@@ -1,42 +1,12 @@
 import { fetchAnalytics } from "data/analytics/fetch-analytics";
-
-export interface WalletStats {
-  date: string;
-  uniqueWalletsConnected: number;
-  totalConnections: number;
-  walletType: string;
-}
-
-export interface WalletUserStats {
-  date: string;
-  newUsers: number;
-  returningUsers: number;
-  totalUsers: number;
-}
-
-export interface InAppWalletStats {
-  date: string;
-  authenticationMethod: string;
-  uniqueWalletsConnected: number;
-}
-
-export interface EcosystemWalletStats extends InAppWalletStats {}
-
-export interface UserOpStats {
-  date: string;
-  successful: number;
-  failed: number;
-  sponsoredUsd: number;
-  chainId?: string;
-}
-
-interface AnalyticsQueryParams {
-  clientId?: string;
-  accountId?: string;
-  from?: Date;
-  to?: Date;
-  period?: "day" | "week" | "month" | "year" | "all";
-}
+import type {
+  AnalyticsQueryParams,
+  InAppWalletStats,
+  RpcMethodStats,
+  UserOpStats,
+  WalletStats,
+  WalletUserStats,
+} from "types/analytics";
 
 function buildSearchParams(params: AnalyticsQueryParams): URLSearchParams {
   const searchParams = new URLSearchParams();
@@ -115,6 +85,27 @@ export async function getUserOpUsage(
   return json.data as UserOpStats[];
 }
 
+export async function getRpcMethodUsage(
+  params: AnalyticsQueryParams,
+): Promise<RpcMethodStats[]> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v1/rpc/evm-methods?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
+
+  if (res?.status !== 200) {
+    console.error("Failed to fetch RPC method usage");
+    return [];
+  }
+
+  const json = await res.json();
+  return json.data as RpcMethodStats[];
+}
+
 export async function getWalletUsers(
   params: AnalyticsQueryParams,
 ): Promise<WalletUserStats[]> {
@@ -135,3 +126,21 @@ export async function getWalletUsers(
   const json = await res.json();
   return json.data as WalletUserStats[];
 }
+
+export async function isProjectActive(
+  params: AnalyticsQueryParams,
+): Promise<boolean> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(`v1/active?${searchParams.toString()}`, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  });
+
+  if (res?.status !== 200) {
+    console.error("Failed to fetch project active status");
+    return false;
+  }
+
+  const json = await res.json();
+  return json.data.isActive as boolean;
+}

.changeset/seven-olives-applaud.md

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

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

@@ -32,6 +32,7 @@ type PricingCardProps = {
   current?: boolean;
   canTrialGrowth?: boolean;
   activeTrialEndsAt?: string;
+  redirectPath: string;
 };
 
 export const PricingCard: React.FC<PricingCardProps> = ({
@@ -42,6 +43,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   current = false,
   canTrialGrowth = false,
   activeTrialEndsAt,
+  redirectPath,
 }) => {
   const plan = TEAM_PLANS[billingPlan];
   const isCustomPrice = typeof plan.price === "string";
@@ -129,6 +131,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
               variant={cta.variant || "outline"}
               teamSlug={teamSlug}
               sku={billingPlan === "starter" ? "plan:starter" : "plan:growth"}
+              redirectPath={redirectPath}
             >
               {cta.title}
             </CheckoutButton>

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

@@ -7,7 +7,7 @@ export function InlineCode({
   return (
     <code
       className={cn(
-        "inline-block rounded bg-muted px-2 font-mono text-sm",
+        "mx-0.5 inline rounded-lg border border-border px-1.5 py-[3px] font-mono text-[0.85em] text-foreground",
         className,
       )}
     >

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

@@ -111,7 +111,8 @@ export const engineKeys = {
     ] as const,
   health: (instance: string) =>
     [...engineKeys.all, instance, "health"] as const,
-  latestVersion: () => [...engineKeys.all, "latestVersion"] as const,
+  deploymentPublicConfiguration: () =>
+    [...engineKeys.all, "deploymentPublicConfiguration"] as const,
   systemMetrics: (engineId: string) =>
     [...engineKeys.all, engineId, "systemMetrics"] as const,
   queueMetrics: (engineId: string) =>

apps/dashboard/src/@/components/ui/inline-code.tsx

@@ -1,4 +1,3 @@
-import type { UserOpStats } from "@/api/analytics";
 import type { Team } from "@/api/team";
 import {
   type Query,
@@ -9,6 +8,7 @@ import {
 import { THIRDWEB_ANALYTICS_API_HOST, THIRDWEB_API_HOST } from "constants/urls";
 import { useAllChainsData } from "hooks/chains/allChains";
 import invariant from "tiny-invariant";
+import type { UserOpStats } from "types/analytics";
 import { accountKeys, apiKeys, authorizedWallets } from "../cache-keys";
 import { useLoggedInUser } from "./useLoggedInUser";
 

apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts

@@ -191,32 +191,48 @@ export function useEngineQueueMetrics(
   });
 }
 
-export function useEngineLatestVersion() {
-  return useQuery({
-    queryKey: engineKeys.latestVersion(),
+interface GetDeploymentPublicConfigurationInput {
+  teamSlug: string;
+}
+
+interface DeploymentPublicConfigurationResponse {
+  serverVersions: {
+    name: string;
+    createdAt: string;
+  }[];
+}
+
+export function useEngineGetDeploymentPublicConfiguration(
+  input: GetDeploymentPublicConfigurationInput,
+) {
+  return useQuery<DeploymentPublicConfigurationResponse>({
+    queryKey: engineKeys.deploymentPublicConfiguration(),
     queryFn: async () => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/latest-version`, {
-        method: "GET",
-      });
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v1/teams/${input.teamSlug}/engine/deployments/public-configuration`,
+        { method: "GET" },
+      );
       if (!res.ok) {
         throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
       }
+
       const json = await res.json();
-      return json.data.version as string;
+      return json.data as DeploymentPublicConfigurationResponse;
     },
   });
 }
 
-interface UpdateVersionInput {
+interface UpdateDeploymentInput {
+  teamSlug: string;
   deploymentId: string;
   serverVersion: string;
 }
 
-export function useEngineUpdateServerVersion() {
+export function useEngineUpdateDeployment() {
   return useMutation({
-    mutationFn: async (input: UpdateVersionInput) => {
+    mutationFn: async (input: UpdateDeploymentInput) => {
       const res = await fetch(
-        `${THIRDWEB_API_HOST}/v2/engine/deployments/${input.deploymentId}/infrastructure`,
+        `${THIRDWEB_API_HOST}/v1/teams/${input.teamSlug}/engine/deployments/${input.deploymentId}`,
         {
           method: "PUT",
           headers: {