[PRO-213] Dashboard: Empty chart state copy changes

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/page.tsx

@@ -168,7 +168,7 @@ async function AsyncAppHighlightsCard(props: {
   return (
     <EmptyStateCard
       link="https://portal.thirdweb.com/connect/quickstart"
-      metric="Connect"
+      metric="Wallets"
     />
   );
 }
@@ -189,7 +189,7 @@ async function AsyncWalletDistributionCard(props: {
   ) : (
     <EmptyStateCard
       link="https://portal.thirdweb.com/connect/quickstart"
-      metric="Connect"
+      metric="Wallets"
     />
   );
 }
@@ -210,7 +210,7 @@ async function AsyncAuthMethodDistributionCard(props: {
   ) : (
     <EmptyStateCard
       link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
-      metric="In-App Wallets"
+      metric="Wallets"
     />
   );
 }
@@ -249,7 +249,7 @@ async function AsyncTransactionsChartCard(props: {
   ) : (
     <EmptyStateCard
       link="https://portal.thirdweb.com/connect/quickstart"
-      metric="Transactions"
+      metric="Wallets"
     />
   );
 }
@@ -287,7 +287,7 @@ async function AsyncTotalSponsoredCard(props: {
   ) : (
     <EmptyStateCard
       link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
-      metric="Gas Sponsored"
+      metric="Account Abstraction"
     />
   );
 }

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

@@ -66,7 +66,12 @@ export function EngineCloudBarChartCardUI({
   }, [rawData]);
 
   if (data.length === 0 || isAllEmpty) {
-    return <EmptyStateCard link="https://portal.thirdweb.com/" metric="RPC" />;
+    return (
+      <EmptyStateCard
+        link="https://portal.thirdweb.com/engine/v3"
+        metric="Transactions"
+      />
+    );
   }
 
   return (

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

@@ -104,7 +104,7 @@ export function RpcMethodBarChartCardUI({
   }, [rawData]);
 
   if (data.length === 0 || isAllEmpty) {
-    return <EmptyStateCard link="https://portal.thirdweb.com/" metric="RPC" />;
+    return <EmptyStateCard />;
   }
 
   return (

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

@@ -291,7 +291,7 @@ export async function AsyncTotalSponsoredCard(props: {
   ) : (
     <EmptyStateCard
       link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
-      metric="Sponsored Transactions"
+      metric="Account Abstraction"
     />
   );
 }
@@ -313,7 +313,7 @@ async function AsyncAuthMethodDistributionCard(props: {
   ) : (
     <EmptyStateCard
       link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
-      metric="In-App Wallets"
+      metric="Wallets"
     />
   );
 }
@@ -374,7 +374,7 @@ async function AsyncAppHighlightsCard(props: {
   return (
     <EmptyStateCard
       link="https://portal.thirdweb.com/connect/quickstart"
-      metric="Connect"
+      metric="Wallets"
     />
   );
 }
@@ -396,7 +396,7 @@ async function AsyncWalletDistributionCard(props: {
   ) : (
     <EmptyStateCard
       link="https://portal.thirdweb.com/connect/quickstart"
-      metric="Connect"
+      metric="Wallets"
     />
   );
 }

apps/dashboard/src/app/(app)/team/components/Analytics/EmptyStateCard.stories.tsx

@@ -21,15 +21,16 @@ export const Variants: Story = {
 function Component() {
   return (
     <div className="container max-w-6xl space-y-10 py-10">
-      <BadgeContainer label="Basic">
-        <EmptyStateCard metric="transactions" />
+      <BadgeContainer label="With Metric">
+        <EmptyStateCard metric="xyz" />
       </BadgeContainer>
 
       <BadgeContainer label="With Link">
-        <EmptyStateCard
-          link="https://docs.example.com/analytics"
-          metric="revenue"
-        />
+        <EmptyStateCard link="https://docs.example.com/xyz" />
+      </BadgeContainer>
+
+      <BadgeContainer label="With Link and Metric">
+        <EmptyStateCard link="https://docs.example.com/xyz" metric="xyz" />
       </BadgeContainer>
     </div>
   );

apps/dashboard/src/app/(app)/team/components/Analytics/EmptyStateCard.tsx

@@ -8,13 +8,13 @@ export function EmptyStateCard({
   link,
   description,
 }: {
-  metric: string;
+  metric?: string;
   link?: string;
   description?: string;
 }) {
   return (
     <Card className="container h-[300px] p-2 md:h-[400px]">
-      <div className="flex h-full flex-col items-center justify-center gap-2 rounded-md border text-center">
+      <div className="flex h-full flex-col items-center justify-center gap-2 rounded-md border border-dashed text-center">
         <EmptyStateContent
           description={description}
           link={link}
@@ -25,33 +25,44 @@ export function EmptyStateCard({
   );
 }
 
-export function EmptyStateContent({
-  metric,
-  description,
-  link,
-}: {
-  metric: string;
+export function EmptyStateContent(props: {
+  metric: string | undefined;
   description?: string;
   link?: string;
 }) {
+  const description =
+    props.description ||
+    (props.metric
+      ? `Your app may not be configured to use ${props.metric}`
+      : undefined);
+
   return (
     <div className="flex w-full flex-col items-center justify-center gap-2 text-foreground">
-      <div className="flex size-8 items-center justify-center rounded-md border bg-card">
-        <PlugIcon className="size-4" />
+      <div className="flex size-10 items-center justify-center rounded-full border bg-background">
+        <PlugIcon className="size-5 text-muted-foreground" />
       </div>
-      <div className="font-semibold text-lg">No data available</div>
-      <div className="text-muted-foreground text-sm">
-        {description ?? `Your app may not be configured to use ${metric}.`}
+
+      <div className="space-y-0.5">
+        <div className="font-semibold text-lg">No data available</div>
+        {description && (
+          <div className="text-muted-foreground text-sm">{description}</div>
+        )}
       </div>
-      {link && (
-        <Button asChild className="mt-4" size="sm" variant="primary">
+
+      {props.link && (
+        <Button
+          asChild
+          className="mt-2 rounded-full"
+          size="sm"
+          variant="default"
+        >
           <Link
             className="text-sm"
-            href={link}
+            href={props.link}
             rel="noopener noreferrer"
             target="_blank"
           >
-            Configure {metric}
+            Configure {props.metric}
           </Link>
         </Button>
       )}