`react-dash/src/setup/steps/GoLive.jsx`

116 lines
import React, { useState } from 'react';

const CHECK_ITEMS = [
  { key: 'keys', label: 'Polymarket Connected', check: d => !!d.keys },
  { key: 'conn', label: 'Connection Verified', check: d => !!d.connectionOk },
  { key: 'markets', label: 'Markets Ingested', check: d => d.marketsIngested > 0 },
  { key: 'weather', label: 'Weather Data Loaded', check: d => !!d.weatherFetched },
  { key: 'preds', label: 'Predictions Generated', check: d => !!d.predictionsRun },
  { key: 'risk', label: 'Risk Profile Set', check: d => !!d.riskProfile },
];

export default function GoLive({ data, update, complete, back }) {
  const [paperMode, setPaperMode] = useState(true);
  const [launching, setLaunching] = useState(false);

  const completedSteps = CHECK_ITEMS.filter(c => c.check(data)).length;
  const skippedPoly = data.skippedConnect;

  async function launch() {
    setLaunching(true);
    await complete();
  }

  return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-2">Ready to Launch</h2>
        <p className="text-gray-400 text-sm">Review your setup and start trading</p>
      </div>

      {/* Checklist */}
      <div className="card">
        <h3 className="font-semibold text-sm mb-3">Setup Summary</h3>
        <div className="space-y-2">
          {CHECK_ITEMS.map(c => {
            const ok = c.check(data);
            const skipped = c.key === 'keys' && skippedPoly;
            return (
              <div key={c.key} className="flex items-center gap-3">
                {ok ? (
                  <div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0">
                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" strokeWidth="3" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
                  </div>
                ) : skipped ? (
                  <div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center flex-shrink-0">
                    <span className="text-white text-[10px] font-bold">—</span>
                  </div>
                ) : (
                  <div className="w-5 h-5 rounded-full bg-gray-700 flex-shrink-0" />
                )}
                <span className={`text-sm ${ok ? 'text-gray-200' : skipped ? 'text-yellow-400' : 'text-gray-500'}`}>
                  {c.label}{skipped ? ' (skipped)' : ''}
                </span>
              </div>
            );
          })}
        </div>
        <div className="mt-3 pt-3 border-t border-gray-800">
          <p className="text-xs text-gray-500">{completedSteps}/{CHECK_ITEMS.length} steps completed</p>
        </div>
      </div>

      {/* Stats Row */}
      <div className="grid grid-cols-3 gap-4">
        <div className="card text-center">
          <p className="stat-v text-purple-400">{data.marketsIngested || 0}</p>
          <p className="text-xs text-gray-500 mt-1">Markets</p>
        </div>
        <div className="card text-center">
          <p className="stat-v text-blue-400">{data.riskProfile || '—'}</p>
          <p className="text-xs text-gray-500 mt-1">Risk Profile</p>
        </div>
        <div className="card text-center">
          <p className="stat-v text-green-400">{data.keys ? 'LIVE' : 'PAPER'}</p>
          <p className="text-xs text-gray-500 mt-1">Mode</p>
        </div>
      </div>

      {/* Paper/Live Toggle */}
      <div className="card">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="font-semibold text-sm">Trading Mode</h3>
            <p className="text-xs text-gray-500 mt-0.5">
              {paperMode ? 'Simulated trades, no real funds' : 'Real trades on Polymarket'}
            </p>
          </div>
          <div className="flex items-center gap-3">
            <span className={`text-xs font-medium ${paperMode ? 'text-yellow-400' : 'text-gray-500'}`}>Paper</span>
            <button
              onClick={() => setPaperMode(!paperMode)}
              disabled={!data.keys}
              className={`w-11 h-6 rounded-full transition-colors relative ${paperMode ? 'bg-yellow-500/30' : 'bg-green-500/30'} ${!data.keys ? 'opacity-50 cursor-not-allowed' : ''}`}
            >
              <div className={`w-4 h-4 rounded-full absolute top-1 transition-all ${paperMode ? 'left-1 bg-yellow-400' : 'left-6 bg-green-400'}`} />
            </button>
            <span className={`text-xs font-medium ${!paperMode ? 'text-green-400' : 'text-gray-500'}`}>Live</span>
          </div>
        </div>
        {!paperMode && (
          <div className="mt-3 p-2 bg-red-500/10 border border-red-500/20 rounded-lg">
            <p className="text-xs text-red-400">Live mode will use real USDC on Polygon. Make sure your wallet is funded.</p>
          </div>
        )}
      </div>

      <div className="flex items-center justify-between">
        <button onClick={back} className="text-sm text-gray-500 hover:text-gray-300">Back</button>
        <button onClick={launch} disabled={launching} className="wizard-btn text-lg px-8">
          {launching ? 'Launching...' : 'Launch Poly'}
        </button>
      </div>
    </div>
  );
}