[#351] Add Basescan tx links on donation history + Load more pagination

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<DonationPage> {
   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 (
     <div className="mx-auto max-w-2xl px-6 py-12">
@@ -141,26 +140,13 @@ export default function ReaderDashboard() {
           )}
         </div>
 
-        {totalPages > 1 && (
-          <div className="mt-4 flex items-center justify-between text-xs">
-            <button
-              onClick={() => setPage((p) => p - 1)}
-              disabled={!hasPrev}
-              className="text-accent disabled:text-muted disabled:cursor-not-allowed"
-            >
-              &larr; Prev
-            </button>
-            <span className="text-muted">
-              Page {page + 1} of {totalPages}
-            </span>
-            <button
-              onClick={() => setPage((p) => p + 1)}
-              disabled={!hasMore}
-              className="text-accent disabled:text-muted disabled:cursor-not-allowed"
-            >
-              Next &rarr;
-            </button>
-          </div>
+        {hasMore && (
+          <button
+            onClick={() => setLimit((l) => l + PAGE_SIZE)}
+            className="text-accent hover:text-foreground mt-4 w-full text-center text-xs transition-colors"
+          >
+            Load more ({totalCount - donations.length} remaining)
+          </button>
         )}
       </section>
     </div>
@@ -183,9 +169,22 @@ function DonationRow({ donation, decimals }: { donation: Donation; decimals: num
           </time>
         )}
       </div>
-      <span className="text-accent font-medium">
-        {formatTruncated(BigInt(donation.amount), decimals)} {RESERVE_LABEL}
-      </span>
+      <div className="flex items-center gap-2">
+        <span className="text-accent font-medium">
+          {formatTruncated(BigInt(donation.amount), decimals)} {RESERVE_LABEL}
+        </span>
+        {donation.tx_hash && (
+          <a
+            href={`${EXPLORER_URL}/tx/${donation.tx_hash}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted hover:text-accent transition-colors"
+            title="View on Basescan"
+          >
+            &#x2197;
+          </a>
+        )}
+      </div>
     </div>
   );
 }