Feat/curve simulator how it works

[parasmani-dev]

Description

Closes #68

This PR implements the interactive Dynamic Curve Simulator in the How It Works section as requested by @aniket866, addressing the matching calculation issue in the starter snippet and providing a concrete example-based walkthrough.

---

Key Features & Fixes

1. Fixed Curve Matching Condition

• Root cause in starter code: Inverted ternary logic (currentBuyPrice <= currentSellPrice ? false : true) caused the badge to prematurely declare matching from $t = 0\text{s}$ and un-match upon intersection.
• Fix: Implemented analytical crossing time calculation:
  $$t^* = \frac{P_{0,\text{buy}} - P_{0,\text{sell}}}{s_{\text{sell}} - s_{\text{buy}}}$$
  • $t < t^*$: Protocol displays "Price Discovery in Progress" with real-time spread.
  • $t \ge t^*$: Triggers "⚡ Keeper Match Condition Met!", lights up the golden intersection beacon, and calculates atomic settlement price & keeper fee.

2. Interactive SVG Visualizer

• Protocol Formula Alignment: Matches $P(t) = P_0 + s \cdot t$ defined in PriceCurve.sol.
• Dynamic Curves:
  • Emerald curve (#10B981) for Buy Bid.
  • Blue curve (#3B82F6) for Sell Ask.
  • Golden beacon (#FFC517) indicating the crossing point.
  • Animated time cursor with live coordinate dots.
• Playback Controls: Play / Pause, Reset to $0\text{s}$, Speed controls ($1\times, 5\times, 10\times$), and scrub slider ($0$–$600\text{s}$).
• Parameter Sliders & Presets: Sliders for $P_0$ and slope $s$ for both curves, with presets (Standard, Fast Match, Wide Spread).

3. Real-World Walkthrough (ETH / USDC)

• Added an example card demonstrating:
  • Alice (Buyer): Bid starting at $3,300 with $-$0.80/\text{s}$ slope.
  • Bob (Seller): Ask starting at $2,700 with $+$0.60/\text{s}$ slope.
  • Autonomous Keeper: Triggering settlement at $t \approx 428.57\text{s}$ ($$2,957.14$) and earning a $0.1%$ bounty.

---

Quality Gates Passed

• npx tsc --noEmit — 0 errors
• npm run lint — 0 errors
• npm run build — Production build succeeds with all static routes optimized
• No console.log statements added
• Follows strict TypeScript typing and Tailwind utility conventions

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
windmill-evm-web	Ready	Preview	Sep 7, 2026 8:05pm UTC

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Team

Run ID: a252d4a9-2b99-4362-b466-c8d293de5bce

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[parasmani-dev]

@aniket866 , have implemented the Dynamic Curve Simulator directly under the How It Works section as you suggested in #68!
I tried my best to cover everything you described! Please take a look, and if anything is still missing or needs adjustments, just let me know — I'm right here and happy to refine it further.

[aniket866]

One more fix: After match the curves should stop movincg futher also keep the range of buy and sell to also consider -ve slope for both
buy can also have -ve slope and sell can also have +ve slope