Merge branch 'main' into ph/teamsEngineRoutes

Author: arcoraven

.changeset/clever-carrots-march.md

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

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

@@ -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;
+}

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

@@ -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/components/homepage/sections/PricingCard.tsx renamed to apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -1,13 +1,14 @@
 import type { Team } from "@/api/team";
+import { CheckoutButton } from "@/components/billing";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { cn } from "@/lib/utils";
+import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
 import type React from "react";
 import { TEAM_PLANS } from "utils/pricing";
-import { CheckoutButton } from "../../../@/components/billing";
 import { remainingDays } from "../../../utils/date-utils";
-import { FeatureItem } from "./FeatureItem";
 
 type ButtonProps = React.ComponentProps<typeof Button>;
 
@@ -31,6 +32,7 @@ type PricingCardProps = {
   current?: boolean;
   canTrialGrowth?: boolean;
   activeTrialEndsAt?: string;
+  redirectPath: string;
 };
 
 export const PricingCard: React.FC<PricingCardProps> = ({
@@ -41,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";
@@ -128,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>
@@ -154,3 +158,30 @@ export const PricingCard: React.FC<PricingCardProps> = ({
     </div>
   );
 };
+
+type FeatureItemProps = {
+  text: string | string[];
+};
+
+function FeatureItem({ text }: FeatureItemProps) {
+  const titleStr = Array.isArray(text) ? text[0] : text;
+
+  return (
+    <div className="flex items-center gap-2">
+      <CheckIcon className="size-4 shrink-0 text-green-500" />
+      {Array.isArray(text) ? (
+        <div className="flex items-center gap-2">
+          <p className="text-muted-foreground">
+            {titleStr}{" "}
+            <span className="text-muted-foreground md:hidden">{text[1]}</span>
+          </p>
+          <ToolTipLabel label={text[1]}>
+            <CircleDollarSignIcon className="hidden size-4 text-muted-foreground md:block" />
+          </ToolTipLabel>
+        </div>
+      ) : (
+        <p className="text-muted-foreground">{titleStr}</p>
+      )}
+    </div>
+  );
+}

apps/dashboard/src/@/components/ui/inline-code.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/@/constants/env.ts

@@ -34,14 +34,14 @@ export const THIRDWEB_ACCESS_TOKEN = process.env.THIRDWEB_ACCESS_TOKEN;
 // Comma-separated list of chain IDs to disable faucet for.
 export const DISABLE_FAUCET_CHAIN_IDS = process.env.DISABLE_FAUCET_CHAIN_IDS;
 
+export const BASE_URL = isProd
+  ? "https://thirdweb.com"
+  : (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL
+      ? `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
+      : "http://localhost:3000") || "https://thirdweb-dev.com";
+
 export function getAbsoluteUrlFromPath(path: string) {
-  const url = new URL(
-    isProd
-      ? "https://thirdweb.com"
-      : (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL
-          ? `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
-          : "http://localhost:3000") || "https://thirdweb-dev.com",
-  );
+  const url = new URL(BASE_URL);
 
   url.pathname = path;
   return url;

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -21,6 +21,7 @@ import {
   useConnectModal,
 } from "thirdweb/react";
 import { useFavoriteChainIds } from "../../../../app/(dashboard)/(chain)/components/client/star-button";
+import { doLogout } from "../../../../app/login/auth-actions";
 import { LazyConfigureNetworkModal } from "../../../../components/configure-networks/LazyConfigureNetworkModal";
 import { useAllChainsData } from "../../../../hooks/chains/allChains";
 import {
@@ -174,10 +175,7 @@ export const CustomConnectWallet = (props: {
         }}
         onDisconnect={async () => {
           try {
-            // log out the user
-            await fetch("/api/auth/logout", {
-              method: "POST",
-            });
+            await doLogout();
           } catch (err) {
             console.error("Failed to log out", err);
           }

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -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/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -23,7 +23,7 @@ import { toUnits } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { useActiveAccount, useWalletBalance } from "thirdweb/react";
 import { z } from "zod";
-import { isOnboardingComplete } from "../../../../../../login/isOnboardingRequired";
+import { isOnboardingComplete } from "../../../../../../login/onboarding/isOnboardingRequired";
 
 function formatTime(seconds: number) {
   const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

apps/dashboard/src/app/account/components/AccountHeader.tsx

@@ -9,6 +9,7 @@ import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { useCallback, useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { LazyCreateAPIKeyDialog } from "../../../components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
+import { doLogout } from "../../login/auth-actions";
 import {
   type AccountHeaderCompProps,
   AccountHeaderDesktopUI,
@@ -27,11 +28,8 @@ export function AccountHeader(props: {
   const { disconnect } = useDisconnect();
 
   const logout = useCallback(async () => {
-    // log out the user
     try {
-      await fetch("/api/auth/logout", {
-        method: "POST",
-      });
+      await doLogout();
       if (wallet) {
         disconnect(wallet);
       }