[#159] Add balance display, validation, and MAX button to Trade/Donate

[realproject7]

Summary

• Balance display: Shows relevant token balance below input field in Buy (reserve token), Sell (storyline token), and Donate (reserve token) panels
• Pre-validation: Inline "Insufficient balance" error when amount exceeds balance; action button disabled
• MAX button: Fills input with full available balance, positioned inside the input field
• Auto-refresh: Balance updates every 15s and immediately after successful transactions

Fixes #159

Test plan

• tsc --noEmit — zero errors
• next build — clean
• vitest run — 22/22 tests pass
• Connect wallet with tokens → balance shows in Buy/Sell/Donate panels
• Click MAX → input fills with full balance
• Enter amount > balance → "Insufficient balance" error, button disabled
• Complete a trade → balance updates
• Test at 375px width → layout doesn't break

🤖 Generated with Claude Code

[project7-interns]

T2b REQUEST CHANGES

One bug found in TradingWidget.tsx:

MAX button unit mismatch on Buy tab: The input field is labeled "Tokens to buy" (storyline tokens), but the MAX button fills it with formatUnits(balance, 18) where balance is the reserve token (PLOT) balance. These are different units — if you have 100 PLOT and click MAX, it sets "buy 100 storyline tokens" which could cost much more or less than 100 PLOT depending on the bonding curve price.

Fix options:

1. On the Buy tab, either hide the MAX button or compute the max purchasable tokens from the reserve balance (inverse price estimate)
2. Or change the Buy input to accept reserve token amounts instead of token counts

The Sell tab MAX is correct (same unit: storyline tokens). DonateWidget MAX is also correct (reserve token amount in, reserve token balance).

Everything else looks good — balance queries, validation, refetch logic, button disable states, UI layout.

[project7-interns]

Verdict: REQUEST CHANGES

Summary

The balance display and validation additions are on the right path, but the new MAX behavior on the Trade buy tab fills the wrong unit into the input. As implemented, the buy-side MAX button does not satisfy the acceptance criteria and can leave users with an unusable prefilled value.

Findings

• [medium] Buy-tab MAX writes reserve-token balance into an input that still represents Tokens to buy, so the value is in the wrong unit and usually becomes invalid immediately.
  • File: src/components/TradingWidget.tsx:205
  • Suggestion: Either change the buy input semantics to reserve-token spend amount, or keep the current token-amount input and compute the maximum purchasable token amount from the reserve balance before filling MAX. As written, setAmount(formatUnits(balance, 18)) at src/components/TradingWidget.tsx:223 is not correct for a token-quantity field.

Decision

Requesting changes because the buy-side MAX button currently populates the wrong unit, so PR #164 does not correctly implement the requested MAX behavior for Trade.

[project7-interns]

T2b APPROVE (re-review after fix)

MAX button now correctly hidden on Buy tab, shown only on Sell tab where units match. Input padding is also conditional. Previous concern resolved.

[project7-interns]

Verdict: APPROVE

Summary

The follow-up commit resolves the buy-tab MAX unit mismatch by removing MAX where the input and balance are in different units, while keeping the rest of the balance display and validation work intact. The remaining sell-side MAX behavior is unit-correct, and both GitHub CI and local validation are green.

Findings

• [info] No remaining blocking findings after 7e8f55c.
  • File: src/components/TradingWidget.tsx:220
  • Suggestion: None.

Decision

Approving because the prior MAX-button correctness issue has been addressed, the PR now matches the safe subset of issue #159, and lint-and-typecheck plus local typecheck, test, and build validation pass.