STEP 1 — Create the React UI
In your frontend (if using React or Next.js), create this file:

📄 WormchainLiveUI.jsx
jsx
Copy
Edit
import { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowUpRight, ArrowDownLeft } from "lucide-react";
import { motion } from "framer-motion";

export default function WormchainLiveUI() {
  const [worms, setWorms] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      fetch("/api/wormchain/live")
        .then((res) => res.json())
        .then((data) => setWorms(data));
    }, 1500);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
      {worms.map((worm) => (
        <motion.div
          key={worm.id}
          className="border border-green-400 rounded-2xl p-3 shadow-md bg-black text-green-300"
          initial={{ scale: 0.9, opacity: 0.7 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 0.4 }}
        >
          <Card>
            <CardContent>
              <div className="flex justify-between items-center mb-2">
                <span className="font-bold text-lg">{worm.name}</span>
                {worm.direction === "long" ? (
                  <ArrowUpRight className="text-lime-400" />
                ) : (
                  <ArrowDownLeft className="text-red-400" />
                )}
              </div>
              <div className="text-sm">
                Token: <span className="text-white">{worm.token}</span>
              </div>
              <div className="text-sm">
                Entry Price: {worm.entryPrice}
              </div>
              <div className="text-sm">
                PnL: <span className={worm.pnl >= 0 ? "text-lime-300" : "text-red-400"}>{worm.pnl}%</span>
              </div>
              <div className="text-xs mt-2 text-muted">
                Last updated: {worm.timestamp}
              </div>
            </CardContent>
          </Card>
        </motion.div>
      ))}
    </div>
  );
}
Then import this component into your /routes or App.jsx:

jsx
Copy
Edit
import WormchainLiveUI from "./WormchainLiveUI";
<Route path="/wormchain" element={<WormchainLiveUI />} />
🧠 STEP 2 — Flask Backend Route
In your Python backend, add this to your main app.py or routes file:

📄 @app.route('/api/wormchain/live')
python
Copy
Edit
from flask import jsonify
from datetime import datetime

@app.route('/api/wormchain/live')
def live_worm_data():
    # Replace with real bot state logic if desired
    return jsonify([
        {
            "id": "wormie-alpha",
            "name": "Wormie Alpha",
            "token": "$BONK/SOL",
            "entryPrice": "0.00000214",
            "direction": "long",
            "pnl": 2.34,
            "timestamp": datetime.now().strftime("%H:%M:%S")
        },
        {
            "id": "wormie-beta",
            "name": "Wormie Beta",
            "token": "$JUP/SOL",
            "entryPrice": "1.345",
            "direction": "short",
            "pnl": -0.87,
            "timestamp": datetime.now().strftime("%H:%M:%S")
        }
    ])
You can eventually pipe this into live strategy data from your trading swarm.

✅ STEP 3 — Deploy & Test
Push the updated files to Replit

Run the app

Go to:
👉 https://code-craft-cryptodawg8.replit.app/wormchain