const TradingCup = () => {
  const {cup, maxVolume, readyState, cupSubscribe, cupUnsubscribe} = useRustWsServer();
  return (
    <>   </>
  );
};

type CupItem = {
  futures_price_micro: number;
  quantity: number;
  spot_quantity: number;
  side: string;
}; 
export function useRustWsServer() {
  const [connection, setConnection] = useState<WebSocket|null>(null);
  const [cup, setCup] = useState<Array<CupItem>>([]);
  useEffect(() => {
    const url = process.env.NEXT_PUBLIC_RUST_WS_SERVER;

    if (url) {
      const ws = new WebSocket(url);

      setConnection(ws);
    }
  }, []);

  useEffect(() => {
    if (null !== connection) {

      connection.onmessage = (message: MessageEvent) => {
        if (!message.data) return;

        const data = JSON.parse(message.data);

        if (!data?.commands || data.commands.length === 0) return;

        const domUpdate = data.commands.find((item: any) => "undefined" !== typeof item.SymbolDomUpdate);

        if (!domUpdate) return;

        setCup(splitCupSides(domUpdate.SymbolDomUpdate.dom_rows));
      };

      connection.onopen = () => {
        setReadyState(ReadyState.OPEN);
      };

      connection.onclose = () => {
        setReadyState(ReadyState.CLOSED);
      };
    }
  }, [connection]);
 return {
    readyState,
    cupSubscribe,
    cupUnsubscribe,
    cup,
    maxVolume,
  };
}




export default class ClustersClientControllers {
    renderTrades = () => {
        this.clearOrderFeed();
        reduce(this.tradesArr, (prev, cur, index) => {
            this.renderTrade(prev, cur, this.tradesArr.length - (index as any))
            prev = cur
            console.log(prev);
            
            return prev
        })

    }
    clearOrderFeed = () => {
        this.orderFeedCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
    }
    renderTrade = (prev, item, index) => {
        //const anomalyQty = this.root.instruments[this.root.selectedSymbol].anomalies.anomaly_qty;


        console.log(item); // 
price_float
: 
0.4139
price_micro
: 
4139000
quantity
: 
6
side
: 
"Buy"
time
: 
1685607036920
        

        //if (size < 1) return;
        const ctx = this.orderFeedCtx
        let xPos = (this.canvasWidth - (index * (bubbleSize * 1.5))) - bubbleSize;
        const offsetFromTop = this.root.tradingDriverController.upperPrice - item.price_micro;
        const y = ((offsetFromTop / this.root.tradingDriverController.getZoomedStepMicro()) - 1) * rowHeight
        const label = abbreviateNumber(item.quantity * item.price_float)
        const {width: textWidth} = ctx.measureText(label);
        const itemUsdt = item.quantity * item.price_float;
        const tradeFilter = this.getTradeFilterBySymbol(this.getSymbol())
        const maxUsdtBubbleAmount = tradeFilter * 30;
        const maxPixelBubbleAmount = 35;
        const realBubbleSize = (itemUsdt / maxUsdtBubbleAmount) *  maxPixelBubbleAmount
        const size = clamp(realBubbleSize, (textWidth/2)+3, maxPixelBubbleAmount)

        const bubbleX = xPos;
        const bubbleY = y + 8;
        ctx.beginPath();
        let bigRatio = (realBubbleSize / maxPixelBubbleAmount) / 3;
        bigRatio = bigRatio > 0.95 ? 0.95 : bigRatio;
        ctx.fillStyle = item.side === "Sell" ? deepGreen.lighten(bigRatio).toString() : deepRed.lighten(bigRatio).toString()
        ctx.strokeStyle = 'black';
        ctx.arc(xPos, bubbleY, size, 0, 2 * Math.PI)
        ctx.fill();
        ctx.stroke();

        ctx.fillStyle = "#FFFFFF"
		ctx.fillText(label, bubbleX - (textWidth / 2), (bubbleY + (rowHeight / 2)) - 2)

    }
}

1. В компоненте TradingCup  нужно запрашивать cup из useRustWsServer и отрисовывать как в методах renderTrade renderTrades .
2. renderTrade renderTrades то другой  немного компонент с немного другими данными, нужно использовать его в TradingCup  только с нашими данными type CupItem = {
  futures_price_micro: number;
  quantity: number;
  spot_quantity: number;
  side: string;
};

3. В методе renderTrade() показатели quantity и price_float перемножаются, чтобы получить объем в $. Нам это не нужно, будем выводить только quantity.