← back to Bertha

react-dash/src/setup/steps/ConnectPoly.jsx

124 lines

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

export default function ConnectPoly({ data, update, next, back }) {
  const [key, setKey] = useState(data.keys?.api_key || '');
  const [secret, setSecret] = useState(data.keys?.api_secret || '');
  const [passphrase, setPassphrase] = useState(data.keys?.api_passphrase || '');
  const [wallet, setWallet] = useState(data.keys?.wallet || '');
  const [showSecret, setShowSecret] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState(null);

  async function save() {
    setSaving(true);
    setError(null);
    try {
      const r = await post('/polymarket', {
        action: 'save_keys',
        api_key: key,
        api_secret: secret,
        api_passphrase: passphrase,
        wallet: wallet || undefined,
      });
      if (r.success) {
        update({ keys: { api_key: key, api_secret: secret, api_passphrase: passphrase, wallet } });
        next();
      } else {
        setError(r.error || 'Failed to save');
      }
    } catch {
      setError('Connection error');
    }
    setSaving(false);
  }

  function skip() {
    update({ keys: null, skippedConnect: true });
    next();
  }

  return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-2">Connect Polymarket</h2>
        <p className="text-gray-400 text-sm">Enter your Builder API credentials to enable live trading</p>
      </div>

      <div className="card space-y-4">
        <div>
          <label className="block text-xs text-gray-400 mb-1.5 font-medium">API Key</label>
          <input
            type="text"
            value={key}
            onChange={e => setKey(e.target.value)}
            placeholder="Your Polymarket API key"
            className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-sm focus:border-blue-500 focus:outline-none font-mono"
          />
        </div>
        <div>
          <label className="block text-xs text-gray-400 mb-1.5 font-medium">API Secret</label>
          <div className="relative">
            <input
              type={showSecret ? 'text' : 'password'}
              value={secret}
              onChange={e => setSecret(e.target.value)}
              placeholder="Your API secret"
              className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-sm focus:border-blue-500 focus:outline-none font-mono pr-16"
            />
            <button onClick={() => setShowSecret(!showSecret)} className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-gray-500 hover:text-gray-300">
              {showSecret ? 'Hide' : 'Show'}
            </button>
          </div>
        </div>
        <div>
          <label className="block text-xs text-gray-400 mb-1.5 font-medium">Passphrase</label>
          <input
            type="password"
            value={passphrase}
            onChange={e => setPassphrase(e.target.value)}
            placeholder="Your API passphrase"
            className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-sm focus:border-blue-500 focus:outline-none font-mono"
          />
        </div>
        <div>
          <label className="block text-xs text-gray-400 mb-1.5 font-medium">Wallet Address <span className="text-gray-600">(optional)</span></label>
          <input
            type="text"
            value={wallet}
            onChange={e => setWallet(e.target.value)}
            placeholder="0x..."
            className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-sm focus:border-blue-500 focus:outline-none font-mono"
          />
        </div>

        {error && <p className="text-red-400 text-xs">{error}</p>}
      </div>

      <div className="card bg-gray-800/30">
        <h3 className="text-sm font-medium mb-2">Where to get your keys</h3>
        <ol className="text-xs text-gray-400 space-y-1.5 list-decimal list-inside">
          <li>Go to <span className="text-blue-400 font-mono">polymarket.com</span></li>
          <li>Click your profile → Settings</li>
          <li>Navigate to the <span className="text-blue-400">Builder</span> tab</li>
          <li>Create a new API key — save the secret immediately</li>
        </ol>
      </div>

      <div className="flex items-center justify-between">
        <button onClick={back} className="text-sm text-gray-500 hover:text-gray-300">Back</button>
        <div className="flex items-center gap-3">
          <button onClick={skip} className="text-sm text-gray-500 hover:text-gray-300">Skip (paper mode)</button>
          <button
            onClick={save}
            disabled={saving || (!key && !secret)}
            className="wizard-btn"
          >
            {saving ? 'Saving...' : 'Save & Continue'}
          </button>
        </div>
      </div>
    </div>
  );
}