Add contract ABIs for QuantaPool frontend

[moscowchill]

Summary

Adds frontend/ — a staking web app for QuantaPool (merged into dev).

Stake QRL → receive stQRL, request/claim/cancel withdrawals, and track pool + validator stats. Built to match the MyQRLWallet design system: Vite 7, React 19, TypeScript, MobX, TailwindCSS 4, Radix primitives.

What's included

• Pages: Stake (home), Withdrawals (request → 128-block delay → FIFO claim, cancel), Stats, How It Works
• Contract ABIs as TS modules for DepositPoolV2, StQRLV2, ValidatorManager (generated from contracts/solidity; regen instructions in frontend/README.md)
• Wallet connectivity: QRL Wallet extension via EIP-6963 discovery (theqrl.org rdns) using qrl_requestAccounts / qrl_sendTransaction — same flow as myqrlwallet-frontend. MyQRLWallet mobile WebView detected via User-Agent; structured so the myqrlwallet-connect SDK can slot in later.
• Per-account activity feed sourced from DepositPool events via the zondscan explorer API
• Config: testnet v2.2 defaults baked in (src/config/networks.ts mirrors config/testnet-hyperion.json); all endpoints/addresses overridable via VITE_* env vars

Review fixes applied in-branch

• Bounded withdrawal-history fetch + time rounding (dea9915)
• zondscan explorer API wiring + earlier code-review fixes (9a269fd)

Testing

• npm run build (type-check + production build) and npm run lint (zero-warnings) green
• Exercised against testnet v2.2 contracts via the qrlwallet.com RPC proxy

[gemini-code-assist]

Code Review

This pull request introduces the frontend for the QuantaPool liquid staking protocol on the QRL network, including pages for staking, withdrawals, and stats, built with React, MobX, and TailwindCSS. The review feedback focuses on a critical performance optimization to fetch only active/pending withdrawal requests instead of the entire history, thereby preventing excessive RPC overhead and potential browser crashes. Additionally, a bug in the blocksToTime utility was identified and corrected to prevent awkward time formatting.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Fetching all historical withdrawal requests from index 0 to total - 1 results in an $O(N)$ RPC call overhead. For active users with many historical requests, this will trigger hundreds or thousands of concurrent RPC requests, leading to rate-limiting or browser tab crashes. Since completed/cancelled requests are immutable, we should only fetch the active/pending requests from nextIndex (which is total - pending) to total - 1.

    const total = Number(asBig(counts.total));
    const pending = Number(asBig(counts.pending));
    const nextIndex = total - pending;
    const requests = await Promise.all(
      Array.from({ length: pending }, (_, i) =>
        this.fetchWithdrawalRequest(pool, address, nextIndex + i),
      )
    );

    runInAction(() => {
      // The user may have disconnected or switched accounts while we were
      // fetching — don't resurrect stale state.
      if (!this.account || this.account.address !== address) return;
      this.account = {
        address,
        qrlBalance: asBig(qrlBalance),
        shares: asBig(shares),
        lockedShares: asBig(lockedShares),
        qrlValue: asBig(qrlValue),
        completedWithdrawalsCount: nextIndex,
      };

[moscowchill]

All five review items addressed in dea9915.

Bounded withdrawal fetch (this thread + the 3 related ones): refreshAccount now fetches only the live tail [nextIndex, total) where nextIndex = total - pending. Verified against the contract — getWithdrawalRequestCount returns pending = total - nextWithdrawalIndex, so nextIndex is exactly nextWithdrawalIndex, and everything below it is claimed/cancelled and immutable. The per-poll fan-out is now bounded by pending requests instead of full history. Added completedWithdrawalsCount (= nextIndex) to AccountState and switched the "N completed withdrawals" line to it, dropping the claimed filter over the (no-longer-fully-fetched) array.

blocksToTime: now rounds to whole minutes before splitting hours/minutes, so it can't render ≈ 60m or 1h 60m.

Build + lint are green. (As with PR #20, forge/runtime aren't reachable from my sandbox, but the frontend tsc build and ESLint pass.)

---

Generated by Claude Code

[gemini-code-assist]

Remove the unused claimed filter since we will now use the optimized completedWithdrawalsCount from the account state to display the completed withdrawals count.

Suggested change

	const pending = poolStore.pendingWithdrawals;
	const claimableCount = poolStore.claimableWithdrawals.length;
	const claimed = poolStore.withdrawals.filter((w) => w.claimed);
	const pending = poolStore.pendingWithdrawals;
	const claimableCount = poolStore.claimableWithdrawals.length;

[gemini-code-assist]

Use account.completedWithdrawalsCount instead of claimed.length to display the completed withdrawals count, avoiding the need to fetch all historical requests.

Suggested change

	{claimed.length > 0 && (
	<p className="text-center text-xs text-muted-foreground">
	{claimed.length} completed withdrawal{claimed.length === 1 ? "" : "s"}
	</p>
	)}
	{account.completedWithdrawalsCount > 0 && (
	<p className="text-center text-xs text-muted-foreground">
	{account.completedWithdrawalsCount} completed withdrawal{account.completedWithdrawalsCount === 1 ? "" : "s"}
	</p>
	)}

[gemini-code-assist]

Add completedWithdrawalsCount to AccountState to keep track of the total number of completed/processed withdrawals without needing to fetch all historical requests via RPC.

Suggested change

	export interface AccountState {
	address: string;
	qrlBalance: bigint;
	/** stQRL share balance (stable; balanceOf semantics). */
	shares: bigint;
	/** Shares locked by pending withdrawal requests. */
	lockedShares: bigint;
	/** Current QRL value of all shares. */
	qrlValue: bigint;
	}
	export interface AccountState {
	address: string;
	qrlBalance: bigint;
	/** stQRL share balance (stable; balanceOf semantics). */
	shares: bigint;
	/** Shares locked by pending withdrawal requests. */
	lockedShares: bigint;
	/** Current QRL value of all shares. */
	qrlValue: bigint;
	completedWithdrawalsCount: number;
	}

[gemini-code-assist]

The current implementation of blocksToTime can display awkward values like ≈ 60m or ≈ 1h 60m due to rounding with Math.ceil on minutes independently of hours. Converting to total minutes first and then calculating hours and minutes prevents this issue.

Suggested change

	export function blocksToTime(blocks: bigint | number, blockTimeSeconds: number): string {
	const totalSeconds = Number(blocks) * blockTimeSeconds;
	if (totalSeconds <= 0) return "now";
	const hours = Math.floor(totalSeconds / 3600);
	const minutes = Math.ceil((totalSeconds % 3600) / 60);
	if (hours > 0) return `≈ ${hours}h ${minutes}m`;
	return `≈ ${minutes}m`;
	}
	export function blocksToTime(blocks: bigint | number, blockTimeSeconds: number): string {
	const totalSeconds = Number(blocks) * blockTimeSeconds;
	if (totalSeconds <= 0) return "now";
	const totalMinutes = Math.ceil(totalSeconds / 60);
	const hours = Math.floor(totalMinutes / 60);
	const minutes = totalMinutes % 60;
	if (hours > 0) return `≈ ${hours}h ${minutes}m`;
	return `≈ ${minutes}m`;
	}