[Dashboard] Fix: Cleanup dashboard UI (#5344)

CNCT-2282

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on refactoring components related to analytics and charts in the dashboard, removing unused components, improving data handling, and enhancing UI elements for better responsiveness and clarity.

### Detailed summary
- Deleted `ConnectSDKCard.tsx` and `ConnectAnalyticsDashboard.tsx` files.
- Removed the `Analytics` link from the sidebar.
- Enhanced `PieChartCard` and `BarChart` components with better data mapping and UI adjustments.
- Updated `RangeSelector` to handle local state for range and interval.
- Removed unused API functions related to wallet usage.
- Improved data filtering logic in `WalletDistributionCard` and `AuthMethodDistributionCard`.
- Adjusted image rendering for better layout consistency in charts.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: gregfromstl

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

@@ -380,43 +380,6 @@ export function useAccountCredits() {
   });
 }
 
-async function getWalletUsage(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 fetch(
-    `${THIRDWEB_ANALYTICS_API_HOST}/v1/wallets?${searchParams.toString()}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-  const json = await res.json();
-
-  if (res.status !== 200) {
-    throw new Error(json.message);
-  }
-
-  return json.data;
-}
-
 async function getUserOpUsage(args: {
   clientId: string;
   from?: Date;
@@ -454,43 +417,6 @@ async function getUserOpUsage(args: {
   return json.data;
 }
 
-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 fetch(
-    `${THIRDWEB_ANALYTICS_API_HOST}/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;
-}
-
 export function useUserOpUsageAggregate(args: {
   clientId: string;
   from?: Date;
@@ -574,63 +500,6 @@ export function useUserOpUsagePeriod(args: {
   });
 }
 
-export function useWalletUsageAggregate(args: {
-  clientId: string;
-  from?: Date;
-  to?: Date;
-}) {
-  const { clientId, from, to } = args;
-  const { user, isLoggedIn } = useLoggedInUser();
-
-  return useQuery({
-    queryKey: accountKeys.walletStats(
-      user?.address as string,
-      clientId as string,
-      from?.toISOString() || "",
-      to?.toISOString() || "",
-      "all",
-    ),
-    queryFn: async () => {
-      return getWalletUsage({
-        clientId,
-        from,
-        to,
-        period: "all",
-      });
-    },
-    enabled: !!clientId && !!user?.address && isLoggedIn,
-  });
-}
-
-export function useWalletUsagePeriod(args: {
-  clientId: string;
-  from?: Date;
-  to?: Date;
-  period: "day" | "week" | "month" | "year";
-}) {
-  const { clientId, from, to, period } = args;
-  const { user, isLoggedIn } = useLoggedInUser();
-
-  return useQuery({
-    queryKey: accountKeys.walletStats(
-      user?.address as string,
-      clientId as string,
-      from?.toISOString() || "",
-      to?.toISOString() || "",
-      period,
-    ),
-    queryFn: async () => {
-      return getWalletUsage({
-        clientId,
-        from,
-        to,
-        period,
-      });
-    },
-    enabled: !!clientId && !!user?.address && isLoggedIn,
-  });
-}
-
 export function useUpdateAccount() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/BarChart.tsx

@@ -59,7 +59,7 @@ export function BarChart({
           }}
         />
         <YAxis
-          width={32}
+          width={48}
           dataKey={activeKey}
           tickLine={false}
           axisLine={false}
@@ -68,7 +68,7 @@ export function BarChart({
         <ChartTooltip
           content={
             <ChartTooltipContent
-              className="w-[150px]"
+              className="w-[200px]"
               nameKey={activeKey}
               labelFormatter={(value) => {
                 return new Date(value).toLocaleDateString("en-US", {
@@ -77,6 +77,7 @@ export function BarChart({
                   year: "numeric",
                 });
               }}
+              valueFormatter={(v: unknown) => formatTickerNumber(v as number)}
             />
           }
         />

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/CombinedBarChartCard.tsx

@@ -53,6 +53,7 @@ export function CombinedBarChartCard<
                       usersChart: key,
                     },
                   }}
+                  prefetch
                   scroll={false}
                   key={chart}
                   data-active={activeChart === chart}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/PieChart.tsx

@@ -6,6 +6,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
+import { formatTickerNumber } from "lib/format-utils";
 import { Pie, PieChart as RechartsPieChart } from "recharts";
 
 export function PieChart({
@@ -39,7 +40,12 @@ export function PieChart({
       <RechartsPieChart>
         <ChartTooltip
           cursor={false}
-          content={<ChartTooltipContent hideLabel />}
+          content={
+            <ChartTooltipContent
+              hideLabel
+              valueFormatter={(v: unknown) => formatTickerNumber(v as number)}
+            />
+          }
         />
         <Pie data={data} dataKey="value" nameKey="label" innerRadius={60} />
       </RechartsPieChart>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/PieChartCard.tsx

@@ -28,7 +28,9 @@ export function PieChartCard({
     const sorted = [...data].sort((a, b) => b.value - a.value);
 
     // Take top 9
-    const top10 = sorted.slice(0, 9);
+    const top10 = sorted.slice(0, 9).map((item) => ({
+      ...item,
+    }));
 
     // Aggregate the rest
     const otherValue = sorted
@@ -44,7 +46,11 @@ export function PieChartCard({
     }
 
     return top10;
-  })();
+  })().map((item, index) => ({
+    ...item,
+    fill: item.fill || `hsl(var(--chart-${index + 1}))`,
+  }));
+
   return (
     <Card className="flex flex-col">
       <CardHeader className="border-border border-b p-0">

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/ConnectAnalyticsDashboard.tsx

@@ -12,11 +12,6 @@ export default async function Layout(props: {
   const { team_slug, project_slug } = await props.params;
 
   const links: SidebarLink[] = [
-    {
-      label: "Analytics",
-      href: `/team/${team_slug}/${project_slug}/connect`,
-      exactMatch: true,
-    },
     {
       label: "In-App Wallets",
       href: `/team/${team_slug}/${project_slug}/connect/in-app-wallets`,

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/layout.tsx

@@ -1,7 +1,5 @@
 import { getProject } from "@/api/projects";
-import { ConnectSDKCard } from "components/shared/ConnectSDKCard";
-import { notFound } from "next/navigation";
-import { ConnectAnalyticsDashboard } from "./analytics/ConnectAnalyticsDashboard";
+import { notFound, redirect } from "next/navigation";
 
 export default async function Page(props: {
   params: Promise<{
@@ -16,23 +14,7 @@ export default async function Page(props: {
     notFound();
   }
 
-  return (
-    <div>
-      <div>
-        <h1 className="mb-1 font-semibold text-2xl tracking-tight md:text-3xl">
-          Connect Analytics
-        </h1>
-        <p className="text-muted-foreground text-sm md:text-base">
-          Visualize how your users are connecting to your app
-        </p>
-      </div>
-      <div className="h-6 lg:h-8" />
-      <ConnectAnalyticsDashboard
-        clientId={project.publishableKey}
-        connectLayoutSlug={`/team/${params.team_slug}/${params.project_slug}/connect`}
-      />
-      <div className="h-4 lg:h-8" />
-      <ConnectSDKCard description="Add the Connect SDK to your app to get started collecting analytics." />
-    </div>
+  redirect(
+    `/team/${params.team_slug}/${params.project_slug}/connect/in-app-wallets`,
   );
 }