Skip to content

Commit bd8f0b1

Browse files
gregfromstlgregfromstl
committed
feat(dashboard): adds analytics to in-app-wallets page
1 parent a365dd8 commit bd8f0b1

File tree

19 files changed

+656
-132
lines changed

19 files changed

+656
-132
lines changed

‎apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,12 @@ export interface WalletStats {
235235
walletType: string;
236236
}
237237

238+
export interface InAppWalletStats {
239+
date: string;
240+
authenticationMethod: string;
241+
uniqueWalletsConnected: number;
242+
}
243+
238244
export interface UserOpStats {
239245
date: string;
240246
successful: number;

‎apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/layout.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { AnalyticsCallout } from "../../../../team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/AnalyticsCallout";
21
import { InAppWaletFooterSection } from "../../../../team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer";
32

43
export default function Layout(props: {
@@ -9,7 +8,6 @@ export default function Layout(props: {
98
{props.children}
109
<div className="h-16" />
1110
{/* Footer */}
12-
<AnalyticsCallout trackingCategory="embedded-wallet" />
1311
<div className="h-5" />
1412
<InAppWaletFooterSection trackingCategory="embedded-wallet" />
1513
</div>

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/AnalyticsCallout.tsx‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { TrackedLinkTW } from "@/components/ui/tracked-link";
2+
import { InAppWalletsSummary } from "components/embedded-wallets/Analytics/Summary";
3+
import { getInAppWalletUsage } from "data/analytics/wallets/in-app";
4+
import { TRACKING_CATEGORY } from "../_constants";
5+
6+
export async function InAppWalletsHeader({ clientId }: { clientId: string }) {
7+
const allTimeStats = await getInAppWalletUsage({
8+
clientId,
9+
from: new Date(2022, 0, 1),
10+
to: new Date(),
11+
period: "all",
12+
});
13+
14+
const monthlyStats = await getInAppWalletUsage({
15+
clientId,
16+
from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
17+
to: new Date(),
18+
period: "month",
19+
});
20+
21+
return (
22+
<div>
23+
<h1 className="mb-3 font-semibold text-2xl tracking-tight md:text-3xl">
24+
In-App Wallets
25+
</h1>
26+
<p className="mt-3 mb-7 max-w-[700px] text-muted-foreground">
27+
A wallet infrastructure that enables apps to create, manage, and control
28+
their users wallets. Email login, social login, and bring-your-own auth
29+
supported.{" "}
30+
<TrackedLinkTW
31+
target="_blank"
32+
href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
33+
label="learn-more"
34+
category={TRACKING_CATEGORY}
35+
className="text-link-foreground hover:text-foreground"
36+
>
37+
Learn more
38+
</TrackedLinkTW>
39+
</p>
40+
<InAppWalletsSummary
41+
allTimeStats={allTimeStats}
42+
monthlyStats={monthlyStats}
43+
/>
44+
</div>
45+
);
46+
}

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/tabs.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"use client";
2+
import { TabLinks } from "@/components/ui/tabs";
3+
import { usePathname } from "next/navigation";
4+
5+
export function Tabs({
6+
team_slug,
7+
project_slug,
8+
}: { team_slug: string; project_slug: string }) {
9+
const path = usePathname();
10+
11+
return (
12+
<TabLinks
13+
links={[
14+
{
15+
name: "Analytics",
16+
href: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/analytics`,
17+
isActive: path?.endsWith("/analytics") || false,
18+
isDisabled: false,
19+
},
20+
{
21+
name: "Users",
22+
href: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/users`,
23+
isActive: path?.endsWith("/users") || false,
24+
isDisabled: false,
25+
},
26+
{
27+
name: "Configuration",
28+
href: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/config`,
29+
isActive: path?.endsWith("/config") || false,
30+
isDisabled: false,
31+
},
32+
]}
33+
/>
34+
);
35+
}

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const TRACKING_CATEGORY = "team/in-app-wallets";

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { Range } from "components/analytics/date-range-selector";
2+
import { InAppWalletAnalytics } from "components/embedded-wallets/Analytics";
3+
4+
export default function Page({
5+
params,
6+
searchParams,
7+
}: {
8+
params: { team_slug: string; project_slug: string };
9+
searchParams: {
10+
from?: string;
11+
to?: string;
12+
type?: string;
13+
interval?: string;
14+
};
15+
}) {
16+
const range =
17+
searchParams.from && searchParams.to
18+
? {
19+
type: searchParams.type ?? "last-120",
20+
from: new Date(searchParams.from),
21+
to: new Date(searchParams.to),
22+
}
23+
: undefined;
24+
25+
const interval: "day" | "week" = ["day", "week"].includes(
26+
searchParams.interval ?? "",
27+
)
28+
? (searchParams.interval as "day" | "week")
29+
: "week";
30+
return (
31+
<InAppWalletAnalytics
32+
clientId={params.project_slug}
33+
interval={interval}
34+
range={range as Range}
35+
/>
36+
);
37+
}

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/config/page.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { getProject } from "@/api/projects";
2+
import { getAPIKeyForProjectId } from "app/api/lib/getAPIKeys";
3+
import { notFound } from "next/navigation";
4+
import { InAppWalletSettingsPage } from "../../../../../../../components/embedded-wallets/Configure";
5+
import { TRACKING_CATEGORY } from "../_constants";
6+
7+
export default async function Page({
8+
params,
9+
}: { params: { team_slug: string; project_slug: string } }) {
10+
const project = await getProject(params.team_slug, params.project_slug);
11+
12+
if (!project) {
13+
notFound();
14+
}
15+
16+
const apiKey = await getAPIKeyForProjectId(project.id);
17+
18+
if (!apiKey) {
19+
notFound();
20+
}
21+
22+
return (
23+
<>
24+
<InAppWalletSettingsPage
25+
apiKey={apiKey}
26+
trackingCategory={TRACKING_CATEGORY}
27+
/>
28+
</>
29+
);
30+
}

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { getProject } from "@/api/projects";
2+
import { getAPIKeyForProjectId } from "app/api/lib/getAPIKeys";
3+
import { notFound } from "next/navigation";
4+
import { InAppWaletFooterSection } from "./_components/footer";
5+
import { InAppWalletsHeader } from "./_components/header";
6+
import { Tabs } from "./_components/tabs";
7+
import { TRACKING_CATEGORY } from "./_constants";
8+
9+
export default async function Layout(props: {
10+
params: {
11+
team_slug: string;
12+
project_slug: string;
13+
};
14+
children: React.ReactNode;
15+
}) {
16+
const project = await getProject(
17+
props.params.team_slug,
18+
props.params.project_slug,
19+
);
20+
if (!project) {
21+
notFound();
22+
}
23+
24+
const apiKey = await getAPIKeyForProjectId(project.id);
25+
if (!apiKey) {
26+
notFound();
27+
}
28+
29+
return (
30+
<div>
31+
<InAppWalletsHeader clientId={apiKey.key} />
32+
33+
<div className="h-8" />
34+
35+
<Tabs
36+
team_slug={props.params.team_slug}
37+
project_slug={props.params.project_slug}
38+
/>
39+
40+
<div className="h-8" />
41+
42+
{props.children}
43+
44+
<div className="h-8" />
45+
46+
<InAppWaletFooterSection trackingCategory={TRACKING_CATEGORY} />
47+
</div>
48+
);
49+
}

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/page.tsx‎

Lines changed: 4 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,13 @@
1-
import { getProject } from "@/api/projects";
2-
import { TrackedLinkTW } from "@/components/ui/tracked-link";
3-
import { notFound } from "next/navigation";
4-
import { InAppWalletUsersPageContent } from "../../../../../../components/embedded-wallets/Users";
5-
import { AnalyticsCallout } from "./_components/AnalyticsCallout";
6-
import { InAppWaletFooterSection } from "./_components/footer";
1+
import { redirect } from "next/navigation";
72

83
export default async function Page(props: {
94
params: {
105
team_slug: string;
116
project_slug: string;
127
};
138
}) {
14-
const project = await getProject(
15-
props.params.team_slug,
16-
props.params.project_slug,
17-
);
18-
19-
if (!project) {
20-
notFound();
21-
}
22-
23-
const TRACKING_CATEGORY = "team/in-app-wallets";
24-
25-
return (
26-
<div>
27-
<h1 className="mb-3 font-semibold text-2xl tracking-tight md:text-3xl">
28-
In-App Wallets
29-
</h1>
30-
31-
<p className="mt-3 mb-7 max-w-[700px] text-muted-foreground">
32-
A wallet infrastructure that enables apps to create, manage, and control
33-
their users wallets. Email login, social login, and bring-your-own auth
34-
supported.{" "}
35-
<TrackedLinkTW
36-
target="_blank"
37-
href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
38-
label="learn-more"
39-
category={TRACKING_CATEGORY}
40-
className="text-link-foreground hover:text-foreground"
41-
>
42-
Learn more
43-
</TrackedLinkTW>
44-
</p>
45-
46-
<InAppWalletUsersPageContent
47-
clientId={project.publishableKey}
48-
trackingCategory={TRACKING_CATEGORY}
49-
/>
50-
51-
<div className="h-16" />
52-
<AnalyticsCallout trackingCategory={TRACKING_CATEGORY} />
53-
<div className="h-5" />
54-
55-
<InAppWaletFooterSection trackingCategory={TRACKING_CATEGORY} />
56-
</div>
9+
// Default to the users tab
10+
redirect(
11+
`/team/${props.params.team_slug}/${props.params.project_slug}/connect/in-app-wallets/analytics`,
5712
);
5813
}

0 commit comments

Comments
 (0)