Bitcoin trading simulator

Build a modern React frontend for a Bitcoin Golden Cross Trading Simulator.

Since we don't have a backend connected, implement the core logic entirely in the browser using JavaScript/TypeScript:

Simulation: Use a simple Geometric Brownian Motion formula to simulate 60 days of daily Bitcoin prices. Allow the user to input the initial price, drift, and volatility.
Moving Averages: Calculate a 7-day (Short-term) and 30-day (Long-term) Moving Average.
Trading Logic: Implement a Golden Cross strategy. Start with a given cash amount (e.g., $10,000). Buy BTC when the 7-day MA crosses above the 30-day MA. Sell BTC when the 7-day MA crosses below the 30-day MA.

UI Layout:

A side panel (or top section) for Simulation Parameters: Initial Price, Days, Drift, Volatility, and Initial Cash, along with a "Run Simulation" button.
A dashboard showing key metrics: Final Portfolio Value (Strategy), Final Portfolio Value (Buy & Hold), and Final BTC Price.
Two charts (using Recharts or similar):
- Price Chart: Shows the simulated BTC Price, 7-day MA, and 30-day MA.
- Portfolio Chart: Shows the total portfolio value over time.
A data table at the bottom displaying the Daily Trade Ledger: Date, Price, 7-day MA, 30-day MA, Action (Buy/Sell/Hold), Cash, Holdings, and Portfolio Value. Highlight rows where a Buy or Sell action occurs.

Use a modern, clean, dark-mode styling if possible, similar to a crypto trading platform.

Show full message

53d ago

Now let me build all the components for this simulator:

Now I'll build everything — globals, layout, main page, and all sub-components:

Now let me build the core simulation engine and all UI components:

Now let's make sure the globals.css theme block also includes all the custom tokens properly:

The CSS looks great. Now let me add a custom scrollbar style and a small @layer base tweak for the dark terminal feel:

All the files are in place. Here's a summary of what was built:

Bitcoin Golden Cross Trading Simulator — fully client-side, no backend needed.

Architecture (6 files):

/lib/simulation.ts — Core engine: Box-Muller GBM price generation, SMA calculation, and Golden Cross/Death Cross trade logic
/app/page.tsx — Root page wiring all components together with a sidebar + main layout
/components/simulator/SimulatorHeader.tsx — Sticky top bar with branding and LIVE SIM indicator
/components/simulator/ParamsPanel.tsx — Sidebar with range sliders for all 5 GBM parameters + strategy summary
/components/simulator/MetricsBar.tsx — 4 KPI cards: Strategy Portfolio, Buy & Hold, Final BTC Price, Trades Executed
/components/simulator/PriceChart.tsx — Recharts ComposedChart showing BTC price (gold), 7-day MA (blue), 30-day MA (green) with ▲BUY / ▼SELL dot annotations and reference lines
/components/simulator/PortfolioChart.tsx — Area chart comparing Strategy vs Buy & Hold value over time
/components/simulator/TradeLedger.tsx — Paginated table with ALL / TRADES / BUY / SELL filters, highlighted rows for trade events, and per-row portfolio coloring

Design: Deep dark crypto terminal palette — near-black background, Bitcoin gold (oklch(0.72 0.2 54)) as the primary accent, with green for buys and red for sells throughout.

53d ago

Build a modern React frontend for a Bitcoin Golden Cross Trading Simulator.

Since we don't have a backend connected, implement the core logic entirely in the browser using JavaScript/TypeScript:

Simulation: Use a simple Geometric Brownian Motion formula to simulate 60 days of daily Bitcoin prices. Allow the user to input the initial price, drift, and volatility.
Moving Averages: Calculate a 7-day (Short-term) and 30-day (Long-term) Moving Average.
Trading Logic: Implement a Golden Cross strategy. Start with a given cash amount (e.g., $10,000). Buy BTC when the 7-day MA crosses above the 30-day MA. Sell BTC when the 7-day MA crosses below the 30-day MA.

UI Layout:

A side panel (or top section) for Simulation Parameters: Initial Price, Days, Drift, Volatility, and Initial Cash, along with a "Run Simulation" button.
A dashboard showing key metrics: Final Portfolio Value (Strategy), Final Portfolio Value (Buy & Hold), and Final BTC Price.
Two charts (using Recharts or similar):
- Price Chart: Shows the simulated BTC Price, 7-day MA, and 30-day MA.
- Portfolio Chart: Shows the total portfolio value over time.
A data table at the bottom displaying the Daily Trade Ledger: Date, Price, 7-day MA, 30-day MA, Action (Buy/Sell/Hold), Cash, Holdings, and Portfolio Value. Highlight rows where a Buy or Sell action occurs.

Use a modern, clean, dark-mode styling if possible, similar to a crypto trading platform.

Show full message

53d ago

Now let me build all the components for this simulator:

Now I'll build everything — globals, layout, main page, and all sub-components:

Now let me build the core simulation engine and all UI components:

Now let's make sure the globals.css theme block also includes all the custom tokens properly:

The CSS looks great. Now let me add a custom scrollbar style and a small @layer base tweak for the dark terminal feel:

All the files are in place. Here's a summary of what was built:

Bitcoin Golden Cross Trading Simulator — fully client-side, no backend needed.

Architecture (6 files):

/lib/simulation.ts — Core engine: Box-Muller GBM price generation, SMA calculation, and Golden Cross/Death Cross trade logic
/app/page.tsx — Root page wiring all components together with a sidebar + main layout
/components/simulator/SimulatorHeader.tsx — Sticky top bar with branding and LIVE SIM indicator
/components/simulator/ParamsPanel.tsx — Sidebar with range sliders for all 5 GBM parameters + strategy summary
/components/simulator/MetricsBar.tsx — 4 KPI cards: Strategy Portfolio, Buy & Hold, Final BTC Price, Trades Executed
/components/simulator/PriceChart.tsx — Recharts ComposedChart showing BTC price (gold), 7-day MA (blue), 30-day MA (green) with ▲BUY / ▼SELL dot annotations and reference lines
/components/simulator/PortfolioChart.tsx — Area chart comparing Strategy vs Buy & Hold value over time
/components/simulator/TradeLedger.tsx — Paginated table with ALL / TRADES / BUY / SELL filters, highlighted rows for trade events, and per-row portfolio coloring

Design: Deep dark crypto terminal palette — near-black background, Bitcoin gold (oklch(0.72 0.2 54)) as the primary accent, with green for buys and red for sells throughout.