Skip to content

Commit 2fd5b84

Browse files
MananTankMananTank
committed
[PRO-213] Dashboard: Empty chart state copy changes (#7477)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on updating the `EmptyStateCard` component across various files, including changes to its props, styling, and the metrics displayed. It simplifies the component's usage and modifies the metrics for clarity and relevance. ### Detailed summary - Updated `EmptyStateCard` to remove unnecessary props in `RpcMethodBarChartCardUI.tsx`. - Modified metric and link props in `EngineCloudBarChartCardUI.tsx`. - Changed `EmptyStateCard` metrics in `EmptyStateCard.stories.tsx` and other files to be more relevant. - Made `metric` prop optional in `EmptyStateCard.tsx`. - Enhanced styling for `EmptyStateContent` in `EmptyStateCard.tsx`. - Adjusted rendering logic for `EmptyStateContent` to improve clarity and user experience. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 2bfc9b2 commit 2fd5b84

File tree

6 files changed

+51
-34
lines changed

6 files changed

+51
-34
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ async function AsyncAppHighlightsCard(props: {
168168
return (
169169
<EmptyStateCard
170170
link="https://portal.thirdweb.com/connect/quickstart"
171-
metric="Connect"
171+
metric="Wallets"
172172
/>
173173
);
174174
}
@@ -189,7 +189,7 @@ async function AsyncWalletDistributionCard(props: {
189189
) : (
190190
<EmptyStateCard
191191
link="https://portal.thirdweb.com/connect/quickstart"
192-
metric="Connect"
192+
metric="Wallets"
193193
/>
194194
);
195195
}
@@ -210,7 +210,7 @@ async function AsyncAuthMethodDistributionCard(props: {
210210
) : (
211211
<EmptyStateCard
212212
link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
213-
metric="In-App Wallets"
213+
metric="Wallets"
214214
/>
215215
);
216216
}
@@ -249,7 +249,7 @@ async function AsyncTransactionsChartCard(props: {
249249
) : (
250250
<EmptyStateCard
251251
link="https://portal.thirdweb.com/connect/quickstart"
252-
metric="Transactions"
252+
metric="Wallets"
253253
/>
254254
);
255255
}
@@ -287,7 +287,7 @@ async function AsyncTotalSponsoredCard(props: {
287287
) : (
288288
<EmptyStateCard
289289
link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
290-
metric="Gas Sponsored"
290+
metric="Account Abstraction"
291291
/>
292292
);
293293
}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,12 @@ export function EngineCloudBarChartCardUI({
6666
}, [rawData]);
6767

6868
if (data.length === 0 || isAllEmpty) {
69-
return <EmptyStateCard link="https://portal.thirdweb.com/" metric="RPC" />;
69+
return (
70+
<EmptyStateCard
71+
link="https://portal.thirdweb.com/engine/v3"
72+
metric="Transactions"
73+
/>
74+
);
7075
}
7176

7277
return (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export function RpcMethodBarChartCardUI({
104104
}, [rawData]);
105105

106106
if (data.length === 0 || isAllEmpty) {
107-
return <EmptyStateCard link="https://portal.thirdweb.com/" metric="RPC" />;
107+
return <EmptyStateCard />;
108108
}
109109

110110
return (

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ export async function AsyncTotalSponsoredCard(props: {
291291
) : (
292292
<EmptyStateCard
293293
link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
294-
metric="Sponsored Transactions"
294+
metric="Account Abstraction"
295295
/>
296296
);
297297
}
@@ -313,7 +313,7 @@ async function AsyncAuthMethodDistributionCard(props: {
313313
) : (
314314
<EmptyStateCard
315315
link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
316-
metric="In-App Wallets"
316+
metric="Wallets"
317317
/>
318318
);
319319
}
@@ -374,7 +374,7 @@ async function AsyncAppHighlightsCard(props: {
374374
return (
375375
<EmptyStateCard
376376
link="https://portal.thirdweb.com/connect/quickstart"
377-
metric="Connect"
377+
metric="Wallets"
378378
/>
379379
);
380380
}
@@ -396,7 +396,7 @@ async function AsyncWalletDistributionCard(props: {
396396
) : (
397397
<EmptyStateCard
398398
link="https://portal.thirdweb.com/connect/quickstart"
399-
metric="Connect"
399+
metric="Wallets"
400400
/>
401401
);
402402
}

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,16 @@ export const Variants: Story = {
2121
function Component() {
2222
return (
2323
<div className="container max-w-6xl space-y-10 py-10">
24-
<BadgeContainer label="Basic">
25-
<EmptyStateCard metric="transactions" />
24+
<BadgeContainer label="With Metric">
25+
<EmptyStateCard metric="xyz" />
2626
</BadgeContainer>
2727

2828
<BadgeContainer label="With Link">
29-
<EmptyStateCard
30-
link="https://docs.example.com/analytics"
31-
metric="revenue"
32-
/>
29+
<EmptyStateCard link="https://docs.example.com/xyz" />
30+
</BadgeContainer>
31+
32+
<BadgeContainer label="With Link and Metric">
33+
<EmptyStateCard link="https://docs.example.com/xyz" metric="xyz" />
3334
</BadgeContainer>
3435
</div>
3536
);

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

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ export function EmptyStateCard({
88
link,
99
description,
1010
}: {
11-
metric: string;
11+
metric?: string;
1212
link?: string;
1313
description?: string;
1414
}) {
1515
return (
1616
<Card className="container h-[300px] p-2 md:h-[400px]">
17-
<div className="flex h-full flex-col items-center justify-center gap-2 rounded-md border text-center">
17+
<div className="flex h-full flex-col items-center justify-center gap-2 rounded-md border border-dashed text-center">
1818
<EmptyStateContent
1919
description={description}
2020
link={link}
@@ -25,33 +25,44 @@ export function EmptyStateCard({
2525
);
2626
}
2727

28-
export function EmptyStateContent({
29-
metric,
30-
description,
31-
link,
32-
}: {
33-
metric: string;
28+
export function EmptyStateContent(props: {
29+
metric: string | undefined;
3430
description?: string;
3531
link?: string;
3632
}) {
33+
const description =
34+
props.description ||
35+
(props.metric
36+
? `Your app may not be configured to use ${props.metric}`
37+
: undefined);
38+
3739
return (
3840
<div className="flex w-full flex-col items-center justify-center gap-2 text-foreground">
39-
<div className="flex size-8 items-center justify-center rounded-md border bg-card">
40-
<PlugIcon className="size-4" />
41+
<div className="flex size-10 items-center justify-center rounded-full border bg-background">
42+
<PlugIcon className="size-5 text-muted-foreground" />
4143
</div>
42-
<div className="font-semibold text-lg">No data available</div>
43-
<div className="text-muted-foreground text-sm">
44-
{description ?? `Your app may not be configured to use ${metric}.`}
44+
45+
<div className="space-y-0.5">
46+
<div className="font-semibold text-lg">No data available</div>
47+
{description && (
48+
<div className="text-muted-foreground text-sm">{description}</div>
49+
)}
4550
</div>
46-
{link && (
47-
<Button asChild className="mt-4" size="sm" variant="primary">
51+
52+
{props.link && (
53+
<Button
54+
asChild
55+
className="mt-2 rounded-full"
56+
size="sm"
57+
variant="default"
58+
>
4859
<Link
4960
className="text-sm"
50-
href={link}
61+
href={props.link}
5162
rel="noopener noreferrer"
5263
target="_blank"
5364
>
54-
Configure {metric}
65+
Configure {props.metric}
5566
</Link>
5667
</Button>
5768
)}

0 commit comments

Comments
 (0)