diff --git a/src/app/dashboard/reader/page.tsx b/src/app/dashboard/reader/page.tsx index 30f80326..a76f4a83 100644 --- a/src/app/dashboard/reader/page.tsx +++ b/src/app/dashboard/reader/page.tsx @@ -8,7 +8,7 @@ import { ReaderPortfolio } from "../../../components/ReaderPortfolio"; import { WriterIdentityClient } from "../../../components/WriterIdentityClient"; import { formatUnits } from "viem"; import { ConnectWallet } from "../../../components/ConnectWallet"; -import { RESERVE_LABEL, PLOT_TOKEN, STORY_FACTORY } from "../../../../lib/contracts/constants"; +import { RESERVE_LABEL, PLOT_TOKEN, STORY_FACTORY, EXPLORER_URL } from "../../../../lib/contracts/constants"; import { publicClient } from "../../../../lib/rpc"; import { type Address } from "viem"; @@ -20,7 +20,7 @@ function formatTruncated(value: bigint, decimals: number, digits = 6): string { return raw.slice(0, dot + 1 + digits).replace(/0+$/, "").replace(/\.$/, ""); } -const PAGE_SIZE = 50; +const PAGE_SIZE = 10; interface DonationPage { rows: Donation[]; @@ -29,11 +29,12 @@ interface DonationPage { async function fetchDonationPage( address: string, - page: number, + _page: number, + limit: number = PAGE_SIZE, ): Promise { if (!supabase) return { rows: [], totalCount: 0 }; - const from = page * PAGE_SIZE; - const to = from + PAGE_SIZE - 1; + const from = 0; + const to = limit - 1; const { data, count, error } = await supabase .from("donations") .select("*", { count: "exact" }) @@ -48,16 +49,16 @@ async function fetchDonationPage( export default function ReaderDashboard() { const { address, isConnected } = useAccount(); - const [page, setPage] = useState(0); + const [limit, setLimit] = useState(PAGE_SIZE); - // Reset to first page when wallet address changes + // Reset when wallet address changes useEffect(() => { - setPage(0); + setLimit(PAGE_SIZE); }, [address]); const { data, isLoading, error } = useQuery({ - queryKey: ["reader-donations", address, page], - queryFn: () => fetchDonationPage(address!, page), + queryKey: ["reader-donations", address, limit], + queryFn: () => fetchDonationPage(address!, 0, limit), enabled: isConnected && !!address, }); @@ -92,9 +93,7 @@ export default function ReaderDashboard() { BigInt(0), ); - const totalPages = Math.ceil(totalCount / PAGE_SIZE); - const hasMore = page + 1 < totalPages; - const hasPrev = page > 0; + const hasMore = donations.length < totalCount; return (
@@ -141,26 +140,13 @@ export default function ReaderDashboard() { )}
- {totalPages > 1 && ( -
- - - Page {page + 1} of {totalPages} - - -
+ {hasMore && ( + )} @@ -183,9 +169,22 @@ function DonationRow({ donation, decimals }: { donation: Donation; decimals: num )} - - {formatTruncated(BigInt(donation.amount), decimals)} {RESERVE_LABEL} - +
+ + {formatTruncated(BigInt(donation.amount), decimals)} {RESERVE_LABEL} + + {donation.tx_hash && ( + + ↗ + + )} +
); }