Skip to content

Commit 78c9d56

Browse files
joaquim-vergesjoaquim-verges
committed
empty state
1 parent cda0adf commit 78c9d56

File tree

4 files changed

+58
-89
lines changed

4 files changed

+58
-89
lines changed

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/transactions/analytics/analytics-page.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export function TransactionsAnalyticsPageContent(props: {
1111
};
1212
teamId: string;
1313
clientId: string;
14+
project_slug: string;
15+
team_slug: string;
1416
}) {
1517
return (
1618
<ResponsiveSearchParamsProvider value={props.searchParams}>
@@ -24,6 +26,8 @@ export function TransactionsAnalyticsPageContent(props: {
2426
searchParams={props.searchParams}
2527
teamId={props.teamId}
2628
clientId={props.clientId}
29+
project_slug={props.project_slug}
30+
team_slug={props.team_slug}
2731
/>
2832
<TransactionsTable teamId={props.teamId} clientId={props.clientId} />
2933
</div>

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/transactions/analytics/tx-chart/tx-chart-ui.tsx‎

Lines changed: 29 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@
22

33
import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
44
import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
5+
import { Button } from "@/components/ui/button";
56
import type { ChartConfig } from "@/components/ui/chart";
6-
import { DotNetIcon } from "components/icons/brand-icons/DotNetIcon";
7-
import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
8-
import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
9-
import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
10-
import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
11-
import { DocLink } from "components/shared/DocLink";
7+
import { useDashboardRouter } from "@/lib/DashboardRouter";
128
import { formatDate } from "date-fns";
139
import { useAllChainsData } from "hooks/chains/allChains";
10+
import { formatTickerNumber } from "lib/format-utils";
1411
import { useMemo } from "react";
1512
import type { TransactionStats } from "types/analytics";
16-
import { formatTickerNumber } from "../../../../../../../lib/format-utils";
1713

1814
type ChartData = Record<string, number> & {
1915
time: string;
@@ -27,6 +23,8 @@ export function TransactionsChartCardUI(props: {
2723
// TODO - update this
2824
userOpStats: TransactionStats[];
2925
isPending: boolean;
26+
project_slug: string;
27+
team_slug: string;
3028
}) {
3129
const { userOpStats } = props;
3230
const topChainsToShow = 10;
@@ -148,54 +146,39 @@ export function TransactionsChartCardUI(props: {
148146
return undefined;
149147
}}
150148
toolTipValueFormatter={(value) => formatTickerNumber(Number(value))}
151-
emptyChartState={<EmptyChartContent />}
149+
emptyChartState={
150+
<EmptyChartContent
151+
project_slug={props.project_slug}
152+
team_slug={props.team_slug}
153+
/>
154+
}
152155
/>
153156
);
154157
}
155158

156159
// TODO - update the title and doc links
157-
function EmptyChartContent() {
160+
function EmptyChartContent(props: {
161+
project_slug: string;
162+
team_slug: string;
163+
}) {
164+
const router = useDashboardRouter();
158165
return (
159166
<div className="flex flex-col items-center justify-center px-4">
160167
{/* TODO - update this */}
161-
<span className="mb-6 text-center text-lg">Foo BAR</span>
168+
<span className="mb-6 text-center text-lg">
169+
Create a server wallet and send your first transaction to get started
170+
</span>
162171
<div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
163-
{/* TODO - replace this */}
164-
<DocLink
165-
link="https://portal.thirdweb.com/typescript/v5/account-abstraction/batching-transactions"
166-
label="TypeScript"
167-
icon={TypeScriptIcon}
168-
/>
169-
{/* TODO - replace this */}
170-
<DocLink
171-
link="https://portal.thirdweb.com/react/v5/account-abstraction/batching-transactions"
172-
label="React"
173-
icon={ReactIcon}
174-
/>
175-
{/* TODO - replace this */}
176-
<DocLink
177-
link="https://portal.thirdweb.com/react/v5/account-abstraction/get-started"
178-
label="React Native"
179-
icon={ReactIcon}
180-
/>
181-
{/* TODO - replace this */}
182-
<DocLink
183-
link="https://portal.thirdweb.com/unity/v5/wallets/account-abstraction"
184-
label="Unity"
185-
icon={UnityIcon}
186-
/>
187-
{/* TODO - replace this */}
188-
<DocLink
189-
link="https://portal.thirdweb.com/unreal-engine/blueprints/smart-wallet"
190-
label="Unreal Engine"
191-
icon={UnrealIcon}
192-
/>
193-
{/* TODO - replace this */}
194-
<DocLink
195-
link="https://portal.thirdweb.com/dotnet/wallets/providers/account-abstraction"
196-
label=".NET"
197-
icon={DotNetIcon}
198-
/>
172+
<Button
173+
variant="primary"
174+
onClick={() => {
175+
router.push(
176+
`/team/${props.team_slug}/${props.project_slug}/transactions/server-wallets`,
177+
);
178+
}}
179+
>
180+
Create a server wallet
181+
</Button>
199182
</div>
200183
</div>
201184
);

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/transactions/analytics/tx-chart/tx-chart.tsx‎

Lines changed: 23 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
import { differenceInDays } from "date-fns";
21
import { ResponsiveSuspense } from "responsive-rsc";
32
import { THIRDWEB_ENGINE_CLOUD_URL } from "../../../../../../../@/constants/env";
4-
import type {
5-
TransactionStats,
6-
UserOpStats,
7-
} from "../../../../../../../types/analytics";
3+
import type { TransactionStats } from "../../../../../../../types/analytics";
84
import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
95
import { getTxAnalyticsFiltersFromSearchParams } from "../getTransactionAnalyticsFilter";
106
import { TransactionsChartCardUI } from "./tx-chart-ui";
@@ -15,6 +11,8 @@ async function AsyncTransactionsChartCard(props: {
1511
interval: "day" | "week";
1612
teamId: string;
1713
clientId: string;
14+
project_slug: string;
15+
team_slug: string;
1816
}) {
1917
const data = await getTransactionsChart({
2018
teamId: props.teamId,
@@ -24,7 +22,14 @@ async function AsyncTransactionsChartCard(props: {
2422
interval: props.interval,
2523
});
2624

27-
return <TransactionsChartCardUI isPending={false} userOpStats={data} />;
25+
return (
26+
<TransactionsChartCardUI
27+
isPending={false}
28+
userOpStats={data}
29+
project_slug={props.project_slug}
30+
team_slug={props.team_slug}
31+
/>
32+
);
2833
}
2934

3035
export function TransactionsChartCard(props: {
@@ -35,6 +40,8 @@ export function TransactionsChartCard(props: {
3540
};
3641
teamId: string;
3742
clientId: string;
43+
project_slug: string;
44+
team_slug: string;
3845
}) {
3946
const { range, interval } = getTxAnalyticsFiltersFromSearchParams(
4047
props.searchParams,
@@ -44,54 +51,28 @@ export function TransactionsChartCard(props: {
4451
<ResponsiveSuspense
4552
// TODO - change this if this component does not end up using these params
4653
searchParamsUsed={["from", "to", "interval"]}
47-
fallback={<TransactionsChartCardUI isPending={true} userOpStats={[]} />}
54+
fallback={
55+
<TransactionsChartCardUI
56+
isPending={true}
57+
userOpStats={[]}
58+
project_slug={props.project_slug}
59+
team_slug={props.team_slug}
60+
/>
61+
}
4862
>
4963
<AsyncTransactionsChartCard
5064
from={range.from.toISOString()}
5165
to={range.to.toISOString()}
5266
interval={interval}
5367
teamId={props.teamId}
5468
clientId={props.clientId}
69+
project_slug={props.project_slug}
70+
team_slug={props.team_slug}
5571
/>
5672
</ResponsiveSuspense>
5773
);
5874
}
5975

60-
// TODO: remove
61-
function getTransactionChartStub(
62-
from: string,
63-
to: string,
64-
interval: "day" | "week",
65-
) {
66-
const length = differenceInDays(new Date(to), new Date(from));
67-
const stub: UserOpStats[] = [];
68-
const startDate = new Date(from);
69-
const chainIdsToChooseFrom = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
70-
const increment = interval === "day" ? 1 : 7;
71-
72-
for (let i = 0; i < length; i += increment) {
73-
// pick from 1 - 4
74-
const numberToTxPerDay = Math.floor(Math.random() * 4) + 1;
75-
76-
for (let j = 0; j < numberToTxPerDay; j++) {
77-
stub.push({
78-
date: new Date(
79-
startDate.getTime() + i * 24 * 60 * 60 * 1000,
80-
).toISOString(),
81-
successful: Math.floor(Math.random() * 100),
82-
failed: Math.floor(Math.random() * 100),
83-
sponsoredUsd: Math.floor(Math.random() * 100),
84-
chainId:
85-
chainIdsToChooseFrom[
86-
Math.floor(Math.random() * chainIdsToChooseFrom.length)
87-
]?.toString(),
88-
});
89-
}
90-
}
91-
92-
return stub;
93-
}
94-
9576
async function getTransactionsChart({
9677
teamId,
9778
clientId,

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/transactions/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,9 @@ export default async function TransactionsAnalyticsPage(props: {
4747
searchParams={searchParams}
4848
teamId={project.teamId}
4949
clientId={project.publishableKey}
50+
project_slug={params.project_slug}
51+
team_slug={params.team_slug}
5052
/>
5153
</div>
5254
);
5355
}
54-

0 commit comments

Comments
 (0)