Skip to content

Dashboard: Add block_timestamp_from param to useTokenTransfers #8121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 13, 2025
Merged

Dashboard: Add block_timestamp_from param to useTokenTransfers #8121

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion ...oard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useQuery } from "@tanstack/react-query";
import { getUnixTime, subDays } from "date-fns";
import { isProd } from "@/constants/env-utils";
import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";

Expand Down Expand Up @@ -35,6 +36,11 @@ export function useTokenTransfers(params: {
url.searchParams.set("page", params.page.toString());
url.searchParams.set("limit", params.limit.toString());
url.searchParams.set("clientId", NEXT_PUBLIC_DASHBOARD_CLIENT_ID);
const THIRTY_DAYS_AGO = subDays(new Date(), 30);
url.searchParams.set(
"block_timestamp_from",
getUnixTime(THIRTY_DAYS_AGO).toString(),
);
Comment on lines +39 to +43
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Move timestamp calculation outside queryFn for cache stability.

Calculating THIRTY_DAYS_AGO inside queryFn means new Date() is invoked on every query execution, producing a different Unix timestamp each time. This can affect React Query's caching behavior and makes the request parameters non-deterministic.

Consider one of these solutions:

  1. Calculate once per render (outside queryFn):
 export function useTokenTransfers(params: {
   chainId: number;
   contractAddress: string;
   page: number;
   limit: number;
 }) {
+  const thirtyDaysAgo = getUnixTime(subDays(new Date(), 30));
+
   return useQuery({
     queryFn: async () => {
       const domain = isProd ? "thirdweb" : "thirdweb-dev";
       const url = new URL(
         `https://insight.${domain}.com/v1/tokens/transfers/${params.contractAddress}`,
       );

       url.searchParams.set("include_historical_prices", "true");
       url.searchParams.set("chain_id", params.chainId.toString());
       url.searchParams.set("include_holders", "true");
       url.searchParams.set("page", params.page.toString());
       url.searchParams.set("limit", params.limit.toString());
       url.searchParams.set("clientId", NEXT_PUBLIC_DASHBOARD_CLIENT_ID);
-      const THIRTY_DAYS_AGO = subDays(new Date(), 30);
       url.searchParams.set(
         "block_timestamp_from",
-        getUnixTime(THIRTY_DAYS_AGO).toString(),
+        thirtyDaysAgo.toString(),
       );

       const res = await fetch(url);
       if (!res.ok) {
         throw new Error(await res.text());
       }

       const json = await res.json();
       const data = json.data as TokenTransfersData[];
       return data;
     },
     queryKey: ["token-transfers", params],
  1. Or use a fixed reference (start of day) for more stable caching:
const thirtyDaysAgo = getUnixTime(startOfDay(subDays(new Date(), 30)));
🤖 Prompt for AI Agents 
In
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts
around lines 39-43, the THIRTY_DAYS_AGO timestamp is computed inside queryFn
causing a new Date() on every query execution which breaks React Query cache
stability; move the timestamp calculation outside the queryFn (compute once per
render) and set the param using that stable value, or use a normalized reference
like getUnixTime(startOfDay(subDays(new Date(), 30))) to make the generated
block_timestamp_from deterministic across queries.


const res = await fetch(url);
if (!res.ok) {
Expand All @@ -46,7 +52,12 @@ export function useTokenTransfers(params: {
return data;
},
queryKey: ["token-transfers", params],
refetchInterval: 5000,
refetchInterval: (data) => {
if (data?.state.error) {
return false;
}
return 5000;
},
refetchOnWindowFocus: false,
retry: false,
retryOnMount: false,
Expand Down
Loading