Skip to content

Commit 1383ec3

Browse files
joaquim-vergesjoaquim-verges
committed
[Dashboard] Filter out smart wallets from analytics and improve wallet stats display
1 parent 557d42d commit 1383ec3

File tree

10 files changed

+100
-127
lines changed

10 files changed

+100
-127
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,13 @@ const cached_getWalletConnections = unstable_cache(
147147
}
148148

149149
const json = await res.json();
150-
return json.data as WalletStats[];
150+
return (json.data as WalletStats[]).filter(
151+
(w) =>
152+
w.walletType !== "smart" &&
153+
w.walletType !== "smartWallet" &&
154+
w.walletType !== "inApp" &&
155+
w.walletType !== "inAppWallet",
156+
);
151157
},
152158
["getWalletConnections"],
153159
{

‎apps/dashboard/src/@/types/analytics.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export interface InAppWalletStats {
1818
date: string;
1919
authenticationMethod: string;
2020
uniqueWalletsConnected: number;
21+
newUsers: number;
2122
}
2223

2324
export interface EcosystemWalletStats extends InAppWalletStats {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { subDays } from "date-fns";
22
import { redirect } from "next/navigation";
3-
import { getWalletConnections } from "@/api/analytics";
3+
import { getInAppWalletUsage } from "@/api/analytics";
44
import { getAuthToken } from "@/api/auth-token";
55
import { getProjects, type Project } from "@/api/project/projects";
66
import { getTeamBySlug } from "@/api/team/get-team";
@@ -90,7 +90,8 @@ async function getProjectsWithAnalytics(
9090
const today = new Date();
9191
const thirtyDaysAgo = subDays(today, 30);
9292

93-
const data = await getWalletConnections(
93+
// TODO (stats): also add the external wallet usage?
94+
const data = await getInAppWalletUsage(
9495
{
9596
from: thirtyDaysAgo,
9697
period: "all",

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useMemo } from "react";
44
import { useSetResponsiveSearchParams } from "responsive-rsc";
5-
import type { UniversalBridgeStats, WalletUserStats } from "@/types/analytics";
5+
import type { InAppWalletStats, UniversalBridgeStats } from "@/types/analytics";
66
import { CombinedBarChartCard } from "../../../../components/Analytics/CombinedBarChartCard";
77
import { EmptyStateContent } from "../../../../components/Analytics/EmptyStateCard";
88

@@ -19,7 +19,7 @@ export function TeamHighlightsCard({
1919
selectedChart,
2020
selectedChartQueryParam,
2121
}: {
22-
userStats: WalletUserStats[];
22+
userStats: InAppWalletStats[];
2323
volumeStats: UniversalBridgeStats[];
2424
selectedChart: string | undefined;
2525
selectedChartQueryParam: string;
@@ -32,18 +32,6 @@ export function TeamHighlightsCard({
3232

3333
const chartConfig = {
3434
activeUsers: { color: "hsl(var(--chart-1))", label: "Active Users" },
35-
feesCollected: {
36-
color: "hsl(var(--chart-4))",
37-
emptyContent: (
38-
<EmptyStateContent
39-
description="Your apps haven't collected any fees yet."
40-
link={"https://portal.thirdweb.com/payments"}
41-
metric="Fees"
42-
/>
43-
),
44-
isCurrency: true,
45-
label: "Fee Revenue",
46-
},
4735
newUsers: { color: "hsl(var(--chart-3))", label: "New Users" },
4836
totalVolume: {
4937
color: "hsl(var(--chart-2))",
@@ -57,6 +45,18 @@ export function TeamHighlightsCard({
5745
isCurrency: true,
5846
label: "Total Volume",
5947
},
48+
feesCollected: {
49+
color: "hsl(var(--chart-4))",
50+
emptyContent: (
51+
<EmptyStateContent
52+
description="Your apps haven't collected any fees yet."
53+
link={"https://portal.thirdweb.com/payments"}
54+
metric="Fees"
55+
/>
56+
),
57+
isCurrency: true,
58+
label: "Fee Revenue",
59+
},
6060
} as const;
6161

6262
return (
@@ -96,7 +96,7 @@ type TimeSeriesMetrics = AggregatedMetrics & {
9696
};
9797

9898
function processTimeSeriesData(
99-
userStats: WalletUserStats[],
99+
userStats: InAppWalletStats[],
100100
volumeStats: UniversalBridgeStats[],
101101
): TimeSeriesMetrics[] {
102102
const metrics: TimeSeriesMetrics[] = [];
@@ -119,7 +119,7 @@ function processTimeSeriesData(
119119
.reduce((acc, curr) => acc + curr.developerFeeUsdCents / 100, 0);
120120

121121
metrics.push({
122-
activeUsers: stat.totalUsers ?? 0,
122+
activeUsers: stat.uniqueWalletsConnected ?? 0,
123123
date: stat.date,
124124
feesCollected: fees,
125125
newUsers: stat.newUsers ?? 0,

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

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
getUniversalBridgeUsage,
1414
getUserOpUsage,
1515
getWalletConnections,
16-
getWalletUsers,
1716
} from "@/api/analytics";
1817
import { getAuthToken } from "@/api/auth-token";
1918
import { getTeamBySlug } from "@/api/team/get-team";
@@ -193,7 +192,7 @@ async function AsyncTeamHighlightsCard(props: {
193192
}) {
194193
const [walletUserStatsTimeSeries, universalBridgeUsage] =
195194
await Promise.allSettled([
196-
getWalletUsers(
195+
getInAppWalletUsage(
197196
{
198197
from: props.range.from,
199198
period: props.interval,
@@ -216,7 +215,7 @@ async function AsyncTeamHighlightsCard(props: {
216215
if (
217216
walletUserStatsTimeSeries.status === "fulfilled" &&
218217
universalBridgeUsage.status === "fulfilled" &&
219-
walletUserStatsTimeSeries.value.some((w) => w.totalUsers !== 0)
218+
walletUserStatsTimeSeries.value.some((w) => w.uniqueWalletsConnected !== 0)
220219
) {
221220
return (
222221
<TeamHighlightsCard
@@ -255,8 +254,8 @@ async function AsyncWalletDistributionCard(props: {
255254
<WalletDistributionCard data={walletConnections} />
256255
) : (
257256
<EmptyStateCard
258-
link="https://portal.thirdweb.com/wallets"
259-
metric="Wallets"
257+
link="https://portal.thirdweb.com/wallets/external-wallets"
258+
metric="External Wallets"
260259
/>
261260
);
262261
}
@@ -381,19 +380,17 @@ async function AsyncTotalSponsoredCard(props: {
381380

382381
async function WalletDistributionCard({ data }: { data: WalletStats[] }) {
383382
const formattedData = await Promise.all(
384-
data
385-
.filter((w) => w.walletType !== "smart" && w.walletType !== "smartWallet")
386-
.map(async (w) => {
387-
const wallet = await getWalletInfo(w.walletType as WalletId).catch(
388-
() => ({ name: w.walletType }),
389-
);
390-
return {
391-
totalConnections: w.totalConnections,
392-
uniqueWalletsConnected: w.uniqueWalletsConnected,
393-
walletName: wallet.name,
394-
walletType: w.walletType,
395-
};
396-
}),
383+
data.map(async (w) => {
384+
const wallet = await getWalletInfo(w.walletType as WalletId).catch(
385+
() => ({ name: w.walletType }),
386+
);
387+
return {
388+
totalConnections: w.totalConnections,
389+
uniqueWalletsConnected: w.uniqueWalletsConnected,
390+
walletName: wallet.name,
391+
walletType: w.walletType,
392+
};
393+
}),
397394
);
398395

399396
return (
@@ -404,7 +401,7 @@ async function WalletDistributionCard({ data }: { data: WalletStats[] }) {
404401
value: uniqueWalletsConnected,
405402
};
406403
})}
407-
title="Wallets Connected"
404+
title="External Wallets Connected"
408405
/>
409406
);
410407
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ function ecosystemWalletStatsStub(
5454
date: formattedDate,
5555
ecosystemPartnerId: "123",
5656
uniqueWalletsConnected: Math.floor(Math.random() * 1000) + 1,
57+
newUsers: Math.floor(Math.random() * 100) + 1,
5758
});
5859
}
5960
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/overview/highlights-card.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { EmptyStateContent } from "app/(app)/team/components/Analytics/EmptyStateCard";
44
import { useSetResponsiveSearchParams } from "responsive-rsc";
5-
import type { UniversalBridgeStats, WalletUserStats } from "@/types/analytics";
5+
import type { InAppWalletStats, UniversalBridgeStats } from "@/types/analytics";
66
import { CombinedBarChartCard } from "../../../../components/Analytics/CombinedBarChartCard";
77

88
type AggregatedMetrics = {
@@ -14,7 +14,7 @@ type AggregatedMetrics = {
1414

1515
export function ProjectHighlightsCard(props: {
1616
selectedChart: string | undefined;
17-
userStats: WalletUserStats[];
17+
userStats: InAppWalletStats[];
1818
volumeStats: UniversalBridgeStats[];
1919
teamSlug: string;
2020
projectSlug: string;
@@ -34,18 +34,6 @@ export function ProjectHighlightsCard(props: {
3434

3535
const chartConfig = {
3636
activeUsers: { color: "hsl(var(--chart-1))", label: "Active Users" },
37-
feesCollected: {
38-
color: "hsl(var(--chart-4))",
39-
emptyContent: (
40-
<EmptyStateContent
41-
description="Your app hasn't collected any fees yet."
42-
link={`/team/${teamSlug}/${projectSlug}/payments/settings`}
43-
metric="Fees"
44-
/>
45-
),
46-
isCurrency: true,
47-
label: "Fee Revenue",
48-
},
4937
newUsers: { color: "hsl(var(--chart-3))", label: "New Users" },
5038
totalVolume: {
5139
color: "hsl(var(--chart-2))",
@@ -59,6 +47,18 @@ export function ProjectHighlightsCard(props: {
5947
isCurrency: true,
6048
label: "Total Volume",
6149
},
50+
feesCollected: {
51+
color: "hsl(var(--chart-4))",
52+
emptyContent: (
53+
<EmptyStateContent
54+
description="Your app hasn't collected any fees yet."
55+
link={`/team/${teamSlug}/${projectSlug}/payments/settings`}
56+
metric="Fees"
57+
/>
58+
),
59+
isCurrency: true,
60+
label: "Fee Revenue",
61+
},
6262
} as const;
6363

6464
return (
@@ -101,7 +101,7 @@ type TimeSeriesMetrics = AggregatedMetrics & {
101101
* Processes time series data to combine wallet and user statistics
102102
*/
103103
function processTimeSeriesData(
104-
userStats: WalletUserStats[],
104+
userStats: InAppWalletStats[],
105105
volumeStats: UniversalBridgeStats[],
106106
): TimeSeriesMetrics[] {
107107
const metrics: TimeSeriesMetrics[] = [];
@@ -124,7 +124,7 @@ function processTimeSeriesData(
124124
.reduce((acc, curr) => acc + curr.developerFeeUsdCents / 100, 0);
125125

126126
metrics.push({
127-
activeUsers: stat.totalUsers ?? 0,
127+
activeUsers: stat.uniqueWalletsConnected ?? 0,
128128
date: stat.date,
129129
feesCollected: fees,
130130
newUsers: stat.newUsers ?? 0,

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

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
getUniversalBridgeUsage,
1717
getUserOpUsage,
1818
getWalletConnections,
19-
getWalletUsers,
2019
isProjectActive,
2120
} from "@/api/analytics";
2221
import { getAuthToken } from "@/api/auth-token";
@@ -364,7 +363,7 @@ async function AsyncAppHighlightsCard(props: {
364363
}) {
365364
const [walletUserStatsTimeSeries, universalBridgeUsage] =
366365
await Promise.allSettled([
367-
getWalletUsers(
366+
getInAppWalletUsage(
368367
{
369368
from: props.range.from,
370369
period: props.interval,
@@ -439,27 +438,25 @@ async function AsyncWalletDistributionCard(props: {
439438
<WalletDistributionCard data={walletConnections} />
440439
) : (
441440
<EmptyStateCard
442-
link="https://portal.thirdweb.com/wallets"
443-
metric="Wallets"
441+
link="https://portal.thirdweb.com/wallets/external-wallets"
442+
metric="External Wallets"
444443
/>
445444
);
446445
}
447446

448447
async function WalletDistributionCard({ data }: { data: WalletStats[] }) {
449448
const formattedData = await Promise.all(
450-
data
451-
.filter((w) => w.walletType !== "smart" && w.walletType !== "smartWallet")
452-
.map(async (w) => {
453-
const wallet = await getWalletInfo(w.walletType as WalletId).catch(
454-
() => ({ name: w.walletType }),
455-
);
456-
return {
457-
totalConnections: w.totalConnections,
458-
uniqueWalletsConnected: w.uniqueWalletsConnected,
459-
walletName: wallet.name,
460-
walletType: w.walletType,
461-
};
462-
}),
449+
data.map(async (w) => {
450+
const wallet = await getWalletInfo(w.walletType as WalletId).catch(
451+
() => ({ name: w.walletType }),
452+
);
453+
return {
454+
totalConnections: w.totalConnections,
455+
uniqueWalletsConnected: w.uniqueWalletsConnected,
456+
walletName: wallet.name,
457+
walletType: w.walletType,
458+
};
459+
}),
463460
);
464461

465462
return (
@@ -470,7 +467,7 @@ async function WalletDistributionCard({ data }: { data: WalletStats[] }) {
470467
value: uniqueWalletsConnected,
471468
};
472469
})}
473-
title="Wallets Connected"
470+
title="External Wallets Connected"
474471
/>
475472
);
476473
}

0 commit comments

Comments
 (0)