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

128 lines
import React, { useState, useEffect } from 'react';
import { post } from '../../api';

export default function TestConnection({ data, update, next, back }) {
  const [publicTest, setPublicTest] = useState(null);
  const [authTest, setAuthTest] = useState(null);
  const [publicLoading, setPublicLoading] = useState(true);
  const [authLoading, setAuthLoading] = useState(false);

  useEffect(() => {
    runPublicTest();
  }, []);

  async function runPublicTest() {
    setPublicLoading(true);
    try {
      const r = await post('/polymarket', { action: 'test_public' });
      setPublicTest(r);
      // Auto-run auth test if keys exist
      if (r.success && data.keys) {
        runAuthTest();
      }
    } catch {
      setPublicTest({ error: true });
    }
    setPublicLoading(false);
  }

  async function runAuthTest() {
    setAuthLoading(true);
    try {
      const r = await post('/polymarket', { action: 'auth_test' });
      setAuthTest(r);
      if (r.success) update({ connectionOk: true });
    } catch {
      setAuthTest({ error: true });
    }
    setAuthLoading(false);
  }

  const skipped = data.skippedConnect;

  return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-2">Test Connection</h2>
        <p className="text-gray-400 text-sm">Verifying your Polymarket API access</p>
      </div>

      <div className="grid grid-cols-2 gap-4">
        {/* Public CLOB Test */}
        <div className="card">
          <div className="flex items-center gap-2 mb-3">
            {publicLoading ? (
              <div className="animate-spin w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full" />
            ) : publicTest?.success ? (
              <div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
                <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>
            ) : (
              <div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
                <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="M6 18L18 6M6 6l12 12" /></svg>
              </div>
            )}
            <h3 className="font-semibold text-sm">Public CLOB</h3>
          </div>
          {publicTest?.success ? (
            <div className="space-y-1 text-xs text-gray-400">
              <p>Server Time: <span className="text-green-400 font-mono">{publicTest.server_time ? new Date(parseInt(publicTest.server_time) * 1000).toLocaleTimeString() : 'OK'}</span></p>
              <p>Endpoint: <span className="text-gray-300 font-mono">clob.polymarket.com</span></p>
            </div>
          ) : publicTest?.error ? (
            <p className="text-xs text-red-400">Could not reach CLOB API</p>
          ) : null}
        </div>

        {/* Authenticated Test */}
        <div className="card">
          <div className="flex items-center gap-2 mb-3">
            {skipped ? (
              <div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center">
                <span className="text-white text-xs font-bold">—</span>
              </div>
            ) : authLoading ? (
              <div className="animate-spin w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full" />
            ) : authTest?.success ? (
              <div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
                <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>
            ) : authTest?.error ? (
              <div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
                <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="M6 18L18 6M6 6l12 12" /></svg>
              </div>
            ) : (
              <div className="w-5 h-5 rounded-full bg-gray-600" />
            )}
            <h3 className="font-semibold text-sm">Authenticated</h3>
          </div>
          {skipped ? (
            <p className="text-xs text-yellow-400">Skipped — paper mode only</p>
          ) : authTest?.success ? (
            <p className="text-xs text-green-400">HMAC-SHA256 auth verified</p>
          ) : authTest?.error ? (
            <p className="text-xs text-red-400">Auth failed — check credentials</p>
          ) : !data.keys ? (
            <p className="text-xs text-gray-500">No keys provided</p>
          ) : (
            <p className="text-xs text-gray-500">Waiting for public test...</p>
          )}
        </div>
      </div>

      {!publicLoading && !authLoading && (
        <div className="flex justify-center">
          <button onClick={runPublicTest} className="text-xs text-gray-500 hover:text-gray-300">
            Retry Tests
          </button>
        </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={next} className="wizard-btn">Continue</button>
      </div>
    </div>
  );
}