[Dashboard] Fix asset page link and improve token claim UX (#7193)

Author: joaquim-verges

apps/dashboard/src/@/components/ui/decimal-input.tsx

@@ -0,0 +1,35 @@
+import { Input } from "./input";
+export function DecimalInput(props: {
+  value: string;
+  onChange: (value: string) => void;
+  maxValue?: number;
+  id?: string;
+  className?: string;
+}) {
+  return (
+    <Input
+      id={props.id}
+      type="text"
+      value={props.value}
+      className={props.className}
+      inputMode="decimal"
+      onChange={(e) => {
+        const number = Number(e.target.value);
+        // ignore if string becomes invalid number
+        if (Number.isNaN(number)) {
+          return;
+        }
+        if (props.maxValue && number > props.maxValue) {
+          return;
+        }
+        // replace leading multiple zeros with single zero
+        let cleanedValue = e.target.value.replace(/^0+/, "0");
+        // replace leading zero before decimal point
+        if (!cleanedValue.includes(".")) {
+          cleanedValue = cleanedValue.replace(/^0+/, "");
+        }
+        props.onChange(cleanedValue || "0");
+      }}
+    />
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx

@@ -53,7 +53,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
               text: "View asset page",
               icon: <ExternalLinkIcon className="size-4" />,
               target: "_blank",
-              link: `https://thirdweb.com/${chainSlug}/${contract.address}`,
+              link: `/${chainSlug}/${contract.address}`,
             }}
             trackingCategory="erc20-contract"
             trackingLabel="view-asset-page"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx

@@ -7,15 +7,22 @@ import {
   useContractTransactionAnalytics,
   useContractUniqueWalletAnalytics,
 } from "data/analytics/hooks";
+import { differenceInCalendarDays, formatDate } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
 import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { buildContractPagePath } from "../../_utils/contract-page-path";
 
-function getDayKey(date: Date) {
-  return date.toISOString().split("T")[0];
+function getDateKey(date: Date, precision: "day" | "hour") {
+  const dayKey = date.toISOString().split("T")[0];
+  if (precision === "day") {
+    return dayKey;
+  }
+
+  const hourKey = date.getHours();
+  return `${dayKey}-${hourKey}`;
 }
 
 export function ContractAnalyticsOverviewCard(props: {
@@ -34,60 +41,13 @@ export function ContractAnalyticsOverviewCard(props: {
     })(),
   );
   const [endDate] = useState(new Date());
-
-  const wallets = useContractUniqueWalletAnalytics({
-    chainId: props.chainId,
-    contractAddress: props.contractAddress,
-    startDate,
-    endDate,
-  });
-
-  const transactions = useContractTransactionAnalytics({
+  const { data, precision, isPending } = useContractAnalyticsOverview({
     chainId: props.chainId,
     contractAddress: props.contractAddress,
     startDate,
     endDate,
   });
 
-  const events = useContractEventAnalytics({
-    chainId: props.chainId,
-    contractAddress: props.contractAddress,
-    startDate,
-    endDate,
-  });
-
-  const isPending =
-    wallets.isPending || transactions.isPending || events.isPending;
-
-  const mergedData = useMemo(() => {
-    if (isPending) {
-      return undefined;
-    }
-
-    const time = (wallets.data || transactions.data || events.data || []).map(
-      (wallet) => wallet.time,
-    );
-
-    return time.map((time) => {
-      const wallet = wallets.data?.find(
-        (wallet) => getDayKey(wallet.time) === getDayKey(time),
-      );
-      const transaction = transactions.data?.find(
-        (transaction) => getDayKey(transaction.time) === getDayKey(time),
-      );
-      const event = events.data?.find((event) => {
-        return getDayKey(event.time) === getDayKey(time);
-      });
-
-      return {
-        time,
-        wallets: wallet?.count || 0,
-        transactions: transaction?.count || 0,
-        events: event?.count || 0,
-      };
-    });
-  }, [wallets.data, transactions.data, events.data, isPending]);
-
   const analyticsPath = buildContractPagePath({
     projectMeta: props.projectMeta,
     chainIdOrSlug: props.chainSlug,
@@ -111,10 +71,11 @@ export function ContractAnalyticsOverviewCard(props: {
           color: "hsl(var(--chart-3))",
         },
       }}
-      data={mergedData || []}
+      data={data || []}
       isPending={isPending}
       showLegend
       chartClassName="aspect-[1.5] lg:aspect-[3]"
+      toolTipLabelFormatter={toolTipLabelFormatterWithPrecision(precision)}
       customHeader={
         <div className="flex items-center justify-between gap-4 border-b p-6 py-4">
           <h2 className="font-semibold text-xl tracking-tight">Analytics</h2>
@@ -141,3 +102,109 @@ export function ContractAnalyticsOverviewCard(props: {
     />
   );
 }
+
+export function useContractAnalyticsOverview(props: {
+  chainId: number;
+  contractAddress: string;
+  startDate: Date;
+  endDate: Date;
+}) {
+  const { chainId, contractAddress, startDate, endDate } = props;
+  const wallets = useContractUniqueWalletAnalytics({
+    chainId: chainId,
+    contractAddress: contractAddress,
+    startDate,
+    endDate,
+  });
+
+  const transactions = useContractTransactionAnalytics({
+    chainId: chainId,
+    contractAddress: contractAddress,
+    startDate,
+    endDate,
+  });
+
+  const events = useContractEventAnalytics({
+    chainId: chainId,
+    contractAddress: contractAddress,
+    startDate,
+    endDate,
+  });
+
+  const isPending =
+    wallets.isPending || transactions.isPending || events.isPending;
+
+  const { data, precision } = useMemo(() => {
+    if (isPending) {
+      return {
+        data: undefined,
+        precision: "day" as const,
+      };
+    }
+
+    const time = (wallets.data || transactions.data || events.data || []).map(
+      (wallet) => wallet.time,
+    );
+
+    // if the time difference between the first and last time is less than 3 days - use hour precision
+    const firstTime = time[0];
+    const lastTime = time[time.length - 1];
+    const timeDiff =
+      firstTime && lastTime
+        ? differenceInCalendarDays(lastTime, firstTime)
+        : undefined;
+
+    const precision: "day" | "hour" = !timeDiff
+      ? "hour"
+      : timeDiff < 3
+        ? "hour"
+        : "day";
+
+    return {
+      data: time.map((time) => {
+        const wallet = wallets.data?.find(
+          (wallet) =>
+            getDateKey(wallet.time, precision) === getDateKey(time, precision),
+        );
+        const transaction = transactions.data?.find(
+          (transaction) =>
+            getDateKey(transaction.time, precision) ===
+            getDateKey(time, precision),
+        );
+
+        const event = events.data?.find((event) => {
+          return (
+            getDateKey(event.time, precision) === getDateKey(time, precision)
+          );
+        });
+
+        return {
+          time,
+          wallets: wallet?.count || 0,
+          transactions: transaction?.count || 0,
+          events: event?.count || 0,
+        };
+      }),
+      precision,
+    };
+  }, [wallets.data, transactions.data, events.data, isPending]);
+
+  return {
+    data,
+    precision,
+    isPending,
+  };
+}
+
+export function toolTipLabelFormatterWithPrecision(precision: "day" | "hour") {
+  return function toolTipLabelFormatter(_v: string, item: unknown) {
+    if (Array.isArray(item)) {
+      const time = item[0].payload.time as number;
+      return formatDate(
+        new Date(time),
+        precision === "day" ? "MMM d, yyyy" : "MMM d, yyyy hh:mm a",
+      );
+    }
+    return undefined;
+  };
+}