Trading Hooks

import { usePositions, useTrade } from "@0xmonaco/react";

const {
  placeLimitOrder,
  placeMarketOrder,
  cancelOrder,
  batchCancel,
  batchCancelAll,
  cancelAllAfter,
  replaceOrder,
  batchCreate,
  batchReplace,
  cancelConditionalOrder,
  listConditionalOrders,
  getPaginatedOrders,
  getOrder,
} = useTrade();

import { useUserOrders } from "@0xmonaco/react";

const { 
  orders,
  loading,
  subscribed,
  error,
  clearError,
  refresh
} = useUserOrders(maxOrders);

import { useUserOrders } from "@0xmonaco/react";

function OrdersList() {
  const { orders, loading, subscribed, error } = useUserOrders(50);

  if (loading) {
    return <div>Loading orders...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <p>WebSocket: {subscribed ? "Connected" : "Disconnected"}</p>
      <h2>Your Orders ({orders.length})</h2>
      {orders.map(order => (
        <div key={order.id}>
          <strong>{order.side}</strong> {order.quantity} @ {order.price}
          <span>Status: {order.status}</span>
        </div>
      ))}
    </div>
  );
}

function ActiveOrders() {
  const { orders } = useUserOrders(100);

  const activeOrders = orders.filter(
    order => order.status === "SUBMITTED" || order.status === "PARTIALLY_FILLED"
  );

  return (
    <div>
      <h2>Active Orders ({activeOrders.length})</h2>
      {activeOrders.map(order => (
        <div key={order.id}>
          {order.side} {order.quantity} @ {order.price}
          {order.filledQuantity && order.filledQuantity !== "0" && (
            <span>Filled: {order.filledQuantity}</span>
          )}
        </div>
      ))}
    </div>
  );
}

function OrdersByPair() {
  const { orders } = useUserOrders(100);

  // Group by trading pair ID. To display human-readable symbols, fetch
  // trading pairs once via sdk.market.getPaginatedTradingPairs and build
  // (or maintain) a local id → symbol map.
  const byPair = orders.reduce((acc, order) => {
    const pair = order.tradingPairId;
    if (!acc[pair]) acc[pair] = [];
    acc[pair].push(order);
    return acc;
  }, {} as Record<string, typeof orders>);

  return (
    <div>
      {Object.entries(byPair).map(([pair, pairOrders]) => (
        <div key={pair}>
          <h3>{pair}</h3>
          <p>{pairOrders.length} orders</p>
          <ul>
            {pairOrders.map(order => (
              <li key={order.id}>
                {order.side} {order.quantity} @ {order.price} - {order.status}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

function OrderHistory() {
  const { orders, loading } = useUserOrders(200);
  const [filter, setFilter] = useState<"all" | "active" | "filled" | "cancelled">("all");

  const filteredOrders = orders.filter(order => {
    switch (filter) {
      case "active":
        return order.status === "SUBMITTED" || order.status === "PARTIALLY_FILLED";
      case "filled":
        return order.status === "FILLED" || order.status === "SETTLED" || order.status === "SETTLED_ON_CHAIN";
      case "cancelled":
        return order.status === "CANCELLED";
      default:
        return true;
    }
  });

  return (
    <div>
      <div>
        <button onClick={() => setFilter("all")}>All ({orders.length})</button>
        <button onClick={() => setFilter("active")}>Active</button>
        <button onClick={() => setFilter("filled")}>Filled</button>
        <button onClick={() => setFilter("cancelled")}>Cancelled</button>
      </div>
      
      {loading ? (
        <div>Loading...</div>
      ) : (
        <div>
          {filteredOrders.map(order => (
            <div key={order.id}>
              <strong>{order.tradingPairId}</strong>
              <span>{order.side} {order.quantity}</span>
              {order.price && <span>@ {order.price}</span>}
              <span>{order.status}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function LiveOrderTracker({ orderId }: { orderId: string }) {
  const { orders, subscribed } = useUserOrders(50);

  const order = orders.find(o => o.id === orderId);

  if (!order) {
    return <div>Order not found</div>;
  }

  const fillPercentage = order.filledQuantity && order.quantity
    ? (parseFloat(order.filledQuantity) / parseFloat(order.quantity)) * 100
    : 0;

  return (
    <div>
      <div>
        <span>Live: {subscribed ? "Connected" : "Disconnected"}</span>
      </div>
      
      <h3>Order {order.id.slice(0, 8)}...</h3>
      <p>Status: {order.status}</p>
      <p>Side: {order.side}</p>
      <p>Quantity: {order.quantity}</p>
      {order.price && <p>Price: {order.price}</p>}
      
      {order.filledQuantity && order.filledQuantity !== "0" && (
        <div>
          <p>Filled: {order.filledQuantity} ({fillPercentage.toFixed(2)}%)</p>
          <div style={{ width: "100%", backgroundColor: "#e0e0e0", borderRadius: "4px" }}>
            <div 
              style={{ 
                width: `${fillPercentage}%`, 
                backgroundColor: "#4caf50", 
                height: "8px",
                borderRadius: "4px",
                transition: "width 0.3s ease"
              }} 
            />
          </div>
        </div>
      )}
      
      {order.averageFillPrice && (
        <p>Average Fill Price: {order.averageFillPrice}</p>
      )}
    </div>
  );
}

function OrdersWithRetry() {
  const { orders, loading, error, clearError, refresh } = useUserOrders(50);

  if (error) {
    return (
      <div>
        <p>Failed to load orders</p>
        <p>{error.message}</p>
        <button onClick={() => {
          clearError();
          refresh();
        }}>
          Retry
        </button>
      </div>
    );
  }

  if (loading) {
    return <div>Loading orders...</div>;
  }

  return (
    <div>
      <button onClick={refresh}>Refresh Orders</button>
      <div>
        {orders.map(order => (
          <div key={order.id}>
            {order.tradingPairId}: {order.side} {order.quantity}
          </div>
        ))}
      </div>
    </div>
  );
}

import { useUserOrders } from "@0xmonaco/react";
import { formatDistanceToNow } from "date-fns";

function OrdersDashboard() {
  const { orders, loading, subscribed, error } = useUserOrders(100);

  const stats = {
    total: orders.length,
    active: orders.filter(o => o.status === "SUBMITTED" || o.status === "PARTIALLY_FILLED").length,
    filled: orders.filter(o => o.status === "FILLED" || o.status === "SETTLED" || o.status === "SETTLED_ON_CHAIN").length,
    cancelled: orders.filter(o => o.status === "CANCELLED").length,
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "SUBMITTED":
      case "PARTIALLY_FILLED":
        return "text-blue-600";
      case "FILLED":
      case "SETTLED":
      case "SETTLED_ON_CHAIN":
        return "text-green-600";
      case "CANCELLED":
        return "text-gray-600";
      case "REJECTED":
        return "text-red-600";
      default:
        return "text-gray-600";
    }
  };

  if (loading) {
    return (
      <div className="animate-pulse">
        <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
        <div className="h-4 bg-gray-200 rounded w-1/2"></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded p-4">
        <p className="text-red-800">Failed to load orders</p>
        <p className="text-sm text-red-600">{error.message}</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Connection Status */}
      <div className="flex items-center gap-2">
        <div className={`w-2 h-2 rounded-full ${subscribed ? "bg-green-500" : "bg-gray-400"}`} />
        <span className="text-sm text-gray-600">
          {subscribed ? "Real-time updates active" : "Disconnected"}
        </span>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-4 gap-4">
        <div className="bg-white border border-gray-200 rounded-lg p-4">
          <p className="text-sm text-gray-600">Total Orders</p>
          <p className="text-2xl font-bold">{stats.total}</p>
        </div>
        <div className="bg-white border border-gray-200 rounded-lg p-4">
          <p className="text-sm text-gray-600">Active</p>
          <p className="text-2xl font-bold text-blue-600">{stats.active}</p>
        </div>
        <div className="bg-white border border-gray-200 rounded-lg p-4">
          <p className="text-sm text-gray-600">Filled</p>
          <p className="text-2xl font-bold text-green-600">{stats.filled}</p>
        </div>
        <div className="bg-white border border-gray-200 rounded-lg p-4">
          <p className="text-sm text-gray-600">Cancelled</p>
          <p className="text-2xl font-bold text-gray-600">{stats.cancelled}</p>
        </div>
      </div>

      {/* Orders List */}
      <div className="space-y-2">
        {orders.length === 0 ? (
          <p className="text-gray-500 text-center py-8">No orders yet</p>
        ) : (
          orders.map(order => (
            <div 
              key={order.id}
              className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
            >
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{order.tradingPairId}</span>
                    <span className={`px-2 py-1 text-xs rounded ${
                      order.side === "BUY" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                    }`}>
                      {order.side}
                    </span>
                    <span className={`text-sm ${getStatusColor(order.status)}`}>
                      {order.status}
                    </span>
                  </div>
                  
                  <div className="mt-2 text-sm text-gray-600">
                    <span>Quantity: {order.quantity}</span>
                    {order.price && <span className="ml-4">Price: {order.price}</span>}
                    {order.filledQuantity && order.filledQuantity !== "0" && (
                      <span className="ml-4">Filled: {order.filledQuantity}</span>
                    )}
                  </div>
                  
                  {order.averageFillPrice && (
                    <div className="mt-1 text-sm text-gray-500">
                      Avg Fill Price: {order.averageFillPrice}
                    </div>
                  )}
                </div>
                
                <div className="text-right text-sm text-gray-500">
                  {order.createdAt && (
                    <p>{formatDistanceToNow(new Date(order.createdAt), { addSuffix: true })}</p>
                  )}
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

export default OrdersDashboard;

interface Order {
  id: string;                           // Order UUID
  tradingPairId: string;              // Trading pair UUID
  orderType: OrderType;                // "LIMIT" | "MARKET"
  side: OrderSide;                      // "BUY" | "SELL"
  price?: string;                       // Order price (undefined for MARKET orders)
  quantity: string;                     // Order quantity
  filledQuantity: string;              // Amount filled so far
  averageFillPrice?: string;          // Average price of fills
  status: OrderStatus;                  // Order status
  tradingMode: TradingMode;            // "SPOT" | "MARGIN"
  timeInForce?: TimeInForce;          // "GTC" | "IOC" | "FOK"; absent on MARKET orders, which have none
  clientOrderId?: string;              // correlation handle echoed back as supplied; absent when the order carried none
  selfTradePreventionMode?: "CANCEL_MAKER" | "CANCEL_TAKER" | "CANCEL_BOTH" | "SKIP";  // the per-order override REQUESTED at placement — present on REST-seeded rows, absent on event/snapshot-derived ones (see the limitation below)
  createdAt: string;                   // ISO 8601 timestamp (UTC)
  updatedAt?: string;                  // ISO 8601 timestamp (UTC)
  version?: number;                    // opaque same-order revision; absent means unknown
  expirationDate?: string;             // expiry for a GTC order
  conditionalOrderId?: string;         // REST-only: the TP/SL conditional that placed this order
  origin?: "USER" | "LIQUIDATION" | "SYSTEM" | "ADL" | (string & {});  // what placed the order; label a liquidation from this, not from orderType
  placementTakerFeeBps?: string;       // Monaco taker fee rate fixed at placement, in bps; absent for orders placed before rates were stored
  placementMakerFeeBps?: string;       // Monaco maker fee rate fixed at placement, in bps (negative = rebate); absent likewise

  // Perp-only fields (populated when this is a margin order)
  marginAccountId?: string;
  positionSide?: "LONG" | "SHORT" | "NONE";
  leverage?: string;
  reduceOnly?: boolean;
  postOnly?: boolean;                   // maker-only; absent for orders placed before the flag was persisted
  positionId?: string;
}

type OrderStatus =
  | "SUBMITTED"
  | "PARTIALLY_FILLED"
  | "FILLED"
  | "CANCELLED"
  | "REJECTED"
  | "EXPIRED"
  | "SETTLED"
  | "SETTLED_ON_CHAIN"; // terminal state — fully settled on-chain

import { usePositions } from "@0xmonaco/react";

const {
  listPositions,
  getPosition,
  getPositionRisk,
  closePosition,
  batchCloseAllPositions,
  attachPositionTpSl,
  listPositionHistory,
} = usePositions();