[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: {
@@ -59,33 +66,59 @@ export function ContractAnalyticsOverviewCard(props: {
   const isPending =
     wallets.isPending || transactions.isPending || events.isPending;
 
-  const mergedData = useMemo(() => {
+  const { data, precision } = useMemo(() => {
     if (isPending) {
-      return undefined;
+      return {
+        data: undefined,
+        precision: "day" as const,
+      };
     }
 
     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);
-      });
+    // 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;
 
-      return {
-        time,
-        wallets: wallet?.count || 0,
-        transactions: transaction?.count || 0,
-        events: event?.count || 0,
-      };
-    });
+    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]);
 
   const analyticsPath = buildContractPagePath({
@@ -111,10 +144,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 +175,16 @@ export function ContractAnalyticsOverviewCard(props: {
     />
   );
 }
+
+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;
+  };
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx

@@ -18,7 +18,7 @@ import {
   ChevronRightIcon,
   ExternalLinkIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { type ThirdwebContract, toTokens } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import {
@@ -199,6 +199,7 @@ export function RecentTransfers(props: {
 }) {
   const rowsPerPage = 10;
   const [page, setPage] = useState(0);
+  const [hasFetchedOnce, setHasFetchedOnce] = useState(false);
 
   const tokenQuery = useTokenTransfers({
     chainId: props.clientContract.chain.id,
@@ -207,11 +208,18 @@ export function RecentTransfers(props: {
     limit: rowsPerPage,
   });
 
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!tokenQuery.isPending) {
+      setHasFetchedOnce(true);
+    }
+  }, [tokenQuery.isPending]);
+
   return (
     <div>
       <RecentTransfersUI
         data={tokenQuery.data ?? []}
-        isPending={tokenQuery.isPending}
+        isPending={tokenQuery.isPending && !hasFetchedOnce}
         rowsPerPage={rowsPerPage}
         tokenMetadata={{
           decimals: props.decimals,