// Set up Time Filter components /src/components/TimeFilter
const [timeframe, setTimeframe] = useQueryParam<string>("t", withDefault(StringParam, "1w"));
const onTimeframeChange = (newValue: string) => {
setTimeframe(newValue, "replaceIn");
<ToggleButtonGroup value={timeframe} defaultValue={timeframe} onChange={onTimeframeChange} name="timeframe" isAttached variant="outline" aria-label="Change timeframe">
<ToggleButton value="24h" aria-label="24 hours" children="24h" />
<ToggleButton value="1w" aria-label="1 week" children="1w" />
<ToggleButton value="1m" aria-label="1 month" children="1m" />
<ToggleButton value="1y" aria-label="1 year" children="1y" />
<ToggleButton value="all" aria-label="all time" children="all" />
// Use Time Filter /src/api/hooks/useNfts.ts
const fetchNfts = async (timeframe: string = "1w") => {
let nsfwList: any[] = [];
nsfwList = res?.data?.NSFWList || [];
.catch(() => {}); // We don't want to catch anything.
/* Get nfts based on the timeframe */
const { data } = await axios.get(`/attention/nft-summaries?period=${timeframe}`);
const dataWithNsfwTag = data?.map((nft: any) => ({ ...nft, isNsfw: [...nsfwList].includes(nft?.id) }));
export function useNfts({ timeframe = "1w" }: Props) {
const [isNsfw] = useQueryParam("nsfw");
return useQuery(`nfts-${timeframe}`, () => fetchNfts(timeframe), {
staleTime: 60 * 1000 * 5, // 5min cache
refetchOnWindowFocus: undefined,
return isNsfw ? data : [...data].filter((nft: any) => !nft.isNsfw);