Stacking Tracker

const stackingData = {
  stackedSTX: 12456.78,          // Total STX currently stacked
  totalSTXEarned: 142.78,        // Lifetime STX rewards
  totalBTCEarned: 0.00034,       // Lifetime BTC equivalent
  cyclesCompleted: 8,            // Number of full cycles
  currentCycle: 24,              // Active cycle number
  cycleProgress: 68,             // % complete (0-100)
  nextPayoutDays: 6,             // Days until next payout
  nextPayoutSTX: 18.45,          // Projected next payout
  nextPayoutDate: 'Mar 15, 2026',
  earnings: [
    {
      cycle: 23,
      stxEarned: 18.97,
      btcValue: 0.000042,
      date: 'Mar 1',
      status: 'Paid'
    },
    // ...
  ]
};

// Progress bar implementation
<div style={{ width: `${cycleProgress}%`, 
             background: 'linear-gradient(90deg, #F7931A, #3B82F6)' }} />

// Estimated payout = (Stacked STX * APY) / cycles per year
const nextPayoutSTX = (stackedSTX * 0.095) / 26;
// 26 cycles per year (365 days / 14 days per cycle)

┌────────────────────────────────────┐
│ Cycle #23                          │
│ Mar 1                         Paid │
│                                    │
│ +18.97 STX    +0.000042 BTC        │
└────────────────────────────────────┘

TOTAL EARNED
+142.78 STX    +0.00034 BTC

const DEMO_STACKING = {
  stackedSTX: 5000,
  totalSTXEarned: 47.5,
  totalBTCEarned: 0.000105,
  cyclesCompleted: 5,
  currentCycle: 6,
  cycleProgress: 42,
  nextPayoutDays: 8,
  nextPayoutSTX: 9.13,
  // ...
};

// Annual rewards
const yearlyRewards = stackedSTX * 0.095;

// Per cycle (26 cycles per year)
const perCycleRewards = yearlyRewards / 26;

// Example: 5,000 STX stacked
// Yearly: 5000 * 0.095 = 475 STX
// Per cycle: 475 / 26 = ~18.27 STX

const btcValue = (stxEarned * STX_PRICE) / BTC_PRICE;

// Example:
// 18.27 STX * $0.26 / $68,000 = 0.000070 BTC

function getNextCycleDate() {
  const now = new Date();
  const next = new Date(now);
  next.setDate(now.getDate() + CYCLE_DURATION_DAYS);
  return next.toLocaleDateString('en-US', { 
    month: 'short', 
    day: 'numeric', 
    year: 'numeric' 
  });
}