diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx index 3fef44b7637..4b18147f63e 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx @@ -6,13 +6,7 @@ import { EngineCloudBarChartCardUI } from "./EngineCloudBarChartCardUI"; export function EngineCloudChartCard(props: AnalyticsQueryParams) { return ( - - - - } - > + }> ); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/RpcMethodBarChartCard/index.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/RpcMethodBarChartCard/index.tsx index 59121d1077a..950408cc60d 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/RpcMethodBarChartCard/index.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/RpcMethodBarChartCard/index.tsx @@ -7,13 +7,7 @@ import { RpcMethodBarChartCardUI } from "./RpcMethodBarChartCardUI"; export function RpcMethodBarChartCard(props: AnalyticsQueryParams) { return ( // TODO: Add better LoadingChartState - - - - } - > + }> ); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/index.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/index.tsx index 52aaf17d784..e575881f099 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/index.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/index.tsx @@ -13,13 +13,7 @@ export function TransactionsCharts( ) { return ( // TODO: Add better LoadingChartState - - - - } - > + }> ); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx index e1945f06a48..74fa5c92959 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx @@ -37,6 +37,7 @@ import { getChainMetadata, } from "thirdweb/chains"; import { type WalletId, getWalletInfo } from "thirdweb/wallets"; +import { LoadingChartState } from "../../../../../../components/analytics/empty-chart-state"; import { getAuthToken } from "../../../../api/lib/getAuthToken"; import { loginRedirect } from "../../../../login/loginRedirect"; import { CombinedBarChartCard } from "../../../components/Analytics/CombinedBarChartCard"; @@ -148,107 +149,29 @@ async function ProjectAnalytics(props: { }) { const { project, params, range, interval, searchParams, client } = props; - // Fetch all analytics data in parallel - const [ - walletConnections, - walletUserStatsTimeSeries, - inAppWalletUsage, - userOpUsageTimeSeries, - userOpUsage, - universalBridgeUsage, - ] = await Promise.allSettled([ - // Aggregated wallet connections - getWalletConnections({ - teamId: project.teamId, - projectId: project.id, - from: range.from, - to: range.to, - period: "all", - }), - // Time series data for wallet users - getWalletUsers({ - teamId: project.teamId, - projectId: project.id, - from: range.from, - to: range.to, - period: interval, - }), - // In-app wallet usage - getInAppWalletUsage({ - teamId: project.teamId, - projectId: project.id, - from: range.from, - to: range.to, - period: "all", - }), - // User operations usage - getUserOpUsage({ - teamId: project.teamId, - projectId: project.id, - from: range.from, - to: range.to, - period: interval, - }), - getUserOpUsage({ - teamId: project.teamId, - projectId: project.id, - from: range.from, - to: range.to, - period: "all", - }), - // Universal Bridge - getUniversalBridgeUsage({ - teamId: project.teamId, - projectId: project.id, - from: range.from, - to: range.to, - period: interval, - }), - ]); - return (
- {walletUserStatsTimeSeries.status === "fulfilled" && - universalBridgeUsage.status === "fulfilled" && - walletUserStatsTimeSeries.value.some((w) => w.totalUsers !== 0) ? ( -
- -
- ) : ( - }> + - )} + +
- {walletConnections.status === "fulfilled" && - walletConnections.value.length > 0 ? ( - - ) : ( - - )} - {inAppWalletUsage.status === "fulfilled" && - inAppWalletUsage.value.length > 0 ? ( - - ) : ( - - )} + }> + + + + }> + +
+ - {userOpUsageTimeSeries.status === "fulfilled" && - userOpUsage.status === "fulfilled" && - userOpUsage.value.length > 0 ? ( -
- -
- ) : ( - }> + - )} + + 0 ? ( +
+ +
+ ) : ( + + ); +} + +async function AsyncAuthMethodDistributionCard(props: { + project: Project; + range: Range; +}) { + const inAppWalletUsage = await getInAppWalletUsage({ + teamId: props.project.teamId, + projectId: props.project.id, + from: props.range.from, + to: props.range.to, + period: "all", + }).catch(() => undefined); + + return inAppWalletUsage && inAppWalletUsage.length > 0 ? ( + + ) : ( + + ); +} + +async function AsyncAppHighlightsCard(props: { + project: Project; + range: Range; + interval: "day" | "week"; + searchParams: PageSearchParams; + client: ThirdwebClient; + params: PageParams; +}) { + const [walletUserStatsTimeSeries, universalBridgeUsage] = + await Promise.allSettled([ + getWalletUsers({ + teamId: props.project.teamId, + projectId: props.project.id, + from: props.range.from, + to: props.range.to, + period: props.interval, + }), + getUniversalBridgeUsage({ + teamId: props.project.teamId, + projectId: props.project.id, + from: props.range.from, + to: props.range.to, + period: props.interval, + }), + ]); + + if ( + walletUserStatsTimeSeries.status === "fulfilled" && + universalBridgeUsage.status === "fulfilled" && + walletUserStatsTimeSeries.value.some((w) => w.totalUsers !== 0) + ) { + return ( +
+ +
+ ); + } + + return ( + + ); +} + +async function AsyncWalletDistributionCard(props: { + project: Project; + range: Range; +}) { + const walletConnections = await getWalletConnections({ + teamId: props.project.teamId, + projectId: props.project.id, + from: props.range.from, + to: props.range.to, + period: "all", + }).catch(() => undefined); + + return walletConnections && walletConnections.length > 0 ? ( + + ) : ( + + ); +} + function AppHighlightsCard({ chartKey, userStats, diff --git a/apps/dashboard/src/components/analytics/empty-chart-state.tsx b/apps/dashboard/src/components/analytics/empty-chart-state.tsx index 427f7bc227c..319af5deeff 100644 --- a/apps/dashboard/src/components/analytics/empty-chart-state.tsx +++ b/apps/dashboard/src/components/analytics/empty-chart-state.tsx @@ -3,6 +3,7 @@ import { LoadingDots } from "@/components/ui/LoadingDots"; import { type ChartConfig, ChartContainer } from "@/components/ui/chart"; import { useMemo } from "react"; import { Area, AreaChart, Bar, BarChart } from "recharts"; +import { cn } from "../../@/lib/utils"; type FakeCartData = { value: number; @@ -37,9 +38,14 @@ export function EmptyChartState({ ); } -export function LoadingChartState() { +export function LoadingChartState({ className }: { className?: string }) { return ( -
+
);