& {
time: string; // human readable date
@@ -51,7 +52,8 @@ export function TotalSponsoredChartCard(props: {
if (!chartData) {
_chartDataMap.set(stat.date, {
time: format(new Date(stat.date), "MMM dd"),
- [chainId || "Unknown"]: Math.round(stat.sponsoredUsd * 100) / 100,
+ [chain?.name || chainId || "Unknown"]:
+ Math.round(stat.sponsoredUsd * 100) / 100,
} as ChartData);
} else {
chartData[chain?.name || chainId || "Unknown"] =
@@ -120,7 +122,7 @@ export function TotalSponsoredChartCard(props: {
{
// Shows the number of each type of wallet connected on all dates
@@ -200,7 +202,25 @@ export function TotalSponsoredChartCard(props: {
axisLine={false}
/>
- } />
+ {
+ console.log(data);
+ return Object.entries(data)
+ .filter(([key]) => key !== "time")
+ .map(([, value]) => value)
+ .reduce((acc, current) => Number(acc) + Number(current), 0);
+ }}
+ tickLine={false}
+ axisLine={false}
+ tickFormatter={(value) => `$${formatTickerNumber(value)}`}
+ />
+
+ `$${value}`} />
+ }
+ />
} />
{uniqueChainIds.map((chainId) => {
return (
diff --git a/apps/dashboard/src/data/analytics/fetch-analytics.ts b/apps/dashboard/src/data/analytics/fetch-analytics.ts
new file mode 100644
index 00000000000..03f78832617
--- /dev/null
+++ b/apps/dashboard/src/data/analytics/fetch-analytics.ts
@@ -0,0 +1,33 @@
+import "server-only";
+
+export async function fetchAnalytics(input: string | URL, init?: RequestInit) {
+ const [pathname, searchParams] = input.toString().split("?");
+ if (!pathname) {
+ throw new Error("Invalid input, no pathname provided");
+ }
+
+ // create a new URL object for the analytics server
+ const API_SERVER_URL = new URL(
+ process.env.ANALYTICS_SERVICE_URL || "https://analytics.thirdweb.com",
+ );
+ API_SERVER_URL.pathname = pathname;
+ for (const param of searchParams?.split("&") || []) {
+ const [key, value] = param.split("=");
+ if (!key || !value) {
+ return;
+ }
+ API_SERVER_URL.searchParams.append(
+ decodeURIComponent(key),
+ decodeURIComponent(value),
+ );
+ }
+
+ return await fetch(API_SERVER_URL, {
+ ...init,
+ headers: {
+ "content-type": "application/json",
+ authorization: `Bearer ${process.env.ANALYTICS_SERVICE_API_KEY}`,
+ ...init?.headers,
+ },
+ });
+}
diff --git a/apps/dashboard/src/data/analytics/wallets/in-app.ts b/apps/dashboard/src/data/analytics/wallets/in-app.ts
new file mode 100644
index 00000000000..0ebfb54585f
--- /dev/null
+++ b/apps/dashboard/src/data/analytics/wallets/in-app.ts
@@ -0,0 +1,38 @@
+import { fetchAnalytics } from "../fetch-analytics";
+
+export async function getInAppWalletUsage(args: {
+ clientId: string;
+ from?: Date;
+ to?: Date;
+ period?: "day" | "week" | "month" | "year" | "all";
+}) {
+ const { clientId, from, to, period } = args;
+
+ const searchParams = new URLSearchParams();
+ searchParams.append("clientId", clientId);
+ if (from) {
+ searchParams.append("from", from.toISOString());
+ }
+ if (to) {
+ searchParams.append("to", to.toISOString());
+ }
+ if (period) {
+ searchParams.append("period", period);
+ }
+ const res = await fetchAnalytics(
+ `v1/wallets/in-app?${searchParams.toString()}`,
+ {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ },
+ );
+ const json = await res?.json();
+
+ if (!res || res.status !== 200) {
+ throw new Error(json.message);
+ }
+
+ return json.data;
+}
diff --git a/apps/dashboard/src/lib/format-utils.ts b/apps/dashboard/src/lib/format-utils.ts
new file mode 100644
index 00000000000..8327467cfd9
--- /dev/null
+++ b/apps/dashboard/src/lib/format-utils.ts
@@ -0,0 +1,24 @@
+export const formatTickerNumber = (value: number) => {
+ if (value >= 1000000) {
+ const millions = value / 1000000;
+ // Only show decimal if not a whole number, up to 2 decimals with no trailing zeros
+ return `${millions % 1 === 0 ? millions.toFixed(0) : Number(millions.toFixed(2)).toString()}M`;
+ }
+ if (value >= 1000) {
+ const thousands = value / 1000;
+ // Only show decimal if not a whole number
+ return `${thousands % 1 === 0 ? thousands.toFixed(0) : thousands.toFixed(1)}k`;
+ }
+ return value.toString();
+};
+
+export const formatWalletType = (walletType: string) => {
+ return walletType.toLowerCase().includes("inapp") ||
+ walletType.toLowerCase().includes("embedded")
+ ? "in-app"
+ : walletType.toLowerCase().includes("metamask")
+ ? "metamask"
+ : walletType.toLowerCase().includes("coinbase")
+ ? "coinbase"
+ : walletType.toLowerCase();
+};