Skip to content

[#25] Price chart for story page#73

Merged
realproject7 merged 3 commits intomainfrom
task/25-price-chart
Mar 14, 2026
Merged

[#25] Price chart for story page#73
realproject7 merged 3 commits intomainfrom
task/25-price-chart

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

  • P5-3a: New PriceChart component — samples getReserveForToken at evenly spaced supply points to render an SVG bonding curve
  • Marks current supply position with dashed line and dot
  • Terminal aesthetic: monospace labels, accent-colored curve, dark theme
  • Placed between price info card and trading widget on story page

Fixes #25

Test plan

  • Verify chart renders on story pages with bonded tokens
  • Verify current supply marker positioned correctly
  • Verify graceful fallback (no chart) for tokens without a bond
  • npm run lint and npm run typecheck pass

🤖 Generated with Claude Code

Fixes #25

- P5-3a: New PriceChart component — samples getReserveForToken at
  evenly spaced supply points to render an SVG bonding curve
- Marks current supply position with a dashed line and dot
- Terminal aesthetic: monospace labels, accent-colored curve
- Placed between price info card and trading widget on story page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: REQUEST CHANGES

Summary

The chart component is wired into the story page cleanly, but the sampling logic is incorrect, so the plotted line does not actually represent the bonding curve across supply.

Findings

  • [high] PriceChart computes supplyAt for each sample point, but the on-chain read ignores it and always calls getReserveForToken(tokenAddress, oneToken). That means every sample uses the same one-token quote, producing a flat/repeated Y value instead of a curve over different supply points. The current-supply marker is then positioned against that bogus dataset, so the visualization is misleading.
    • File: src/components/PriceChart.tsx:54
    • Suggestion: Either derive the curve from the correct supply-dependent view/math, or query the bond contract with arguments that actually vary by sample so each point represents a distinct place on the curve.

Decision

Requesting changes because the current chart does not plot the bonding curve it claims to show.

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

REQUEST CHANGES — chart data bug produces a flat line.

Bug (blocking): src/components/PriceChart.tsx:55 — Every RPC call passes oneToken (1e18) as the amount argument instead of supplyAt:

args: [tokenAddress, oneToken],  // same args for all 20 points

This means all 20 data points return the identical price (cost to mint 1 token from current supply), producing a flat horizontal line instead of a bonding curve.

To plot a meaningful curve, you need to vary the query per sample point. One approach: use getReserveForToken(token, supplyAt) with increasing supplyAt values to get cumulative reserve cost at each supply level, then derive marginal price (delta reserve / delta supply) between consecutive points.

Alternatively, if getReserveForToken is cumulative from current supply (not from zero), consider that the bonding curve shape may need to be approximated differently — e.g., calling getReserveForToken(token, 1 token) at each simulated supply level via multicall isn't possible without a custom contract. In that case, a simpler approach would be to plot the mathematical curve formula directly if the curve type is known (e.g., linear, exponential).

Queries cumulative getReserveForToken costs for increasing mint amounts
and computes marginal price per token at each step, producing a real
bonding curve shape instead of a flat line.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Curve data now correctly computes marginal price per step from cumulative getReserveForToken costs — produces a real bonding curve shape. Current supply marker correctly positioned at the first data point. Approved.

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: REQUEST CHANGES

Summary

The updated sampling now produces varying curve points, but the current-supply marker is still placed incorrectly.

Findings

  • [medium] The chart labels the dashed line and dot as the current supply marker, but the code anchors it to curvePoints[0], which is the first future sample (currentSupply + step), not the actual current supply. That means the marker is shifted to the right of the true current position and its Y value reflects the first sampled future price rather than the current price.
    • File: src/components/PriceChart.tsx:99
    • Suggestion: Compute the marker directly from currentSupply and a corresponding current price, or include an explicit sample at the current supply position and use that point for the marker.

Decision

Requesting changes because the chart still misrepresents the current position on the bonding curve.

Adds currentPriceRaw prop from server-side getTokenPrice result.
Inserts actual current supply/price as the first curve point and
uses it for the marker position instead of the first future sample.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Marker now uses actual server-side price/supply data via currentPriceRaw prop — more accurate than approximating from sampled curve points. Current point correctly prepended to curve data. Approved.

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

The price chart now samples a real supply-dependent curve and marks the actual current supply/current price point correctly. The PR matches issue #25 and lint-and-typecheck is passing.

Findings

  • none

Decision

Approving because the story-page price chart now presents a coherent bonding-curve visualization with an accurate current-position marker.

@realproject7 realproject7 merged commit 1454f32 into main Mar 14, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[P5-3] Price Chart

2 participants