index.js

import React, { useEffect } from 'react'
import ReactApexChart from 'react-apexcharts'

import { Header } from '@/components'
import { OrderBookTable, LastTradesTable, OperationHistory, BuySellOffers, ArbitrationForm } from './components'
import { useBuySellOffersData } from './components/BuyOffersTable/useBuySellOffersData'
import { useArbitrationForm } from './components/ArbitrationForm/useArbitrationForm'
import { useOperationHistory } from './components/OperationHistory/useOperationHistory'
import { useOrderBook } from './components/OrderBookTable/useOrderBook'
import { useLastTrades } from './components/LastTradesTable/useLastTrades'
import { useCandlesChart } from './hooks/useCandlesChart'
import './styles.scss'

const TradeView = () => {
  const buySellOfferData = useBuySellOffersData()
  const arbitrationForm = useArbitrationForm(buySellOfferData)
  const operationHistory = useOperationHistory()
  const orderBook = useOrderBook()
  const lastTrades = useLastTrades()
  const candlesChart = useCandlesChart()

  useEffect(() => {
    buySellOfferData.getBuySellOffers()
    operationHistory.getOperations()

    const webSocket = new WebSocket('wss://api-pub.bitfinex.com/ws/2')
    orderBook.setLoadingOrderBook(true)
    lastTrades.setLoadingLastTrades(true)

    webSocket.onopen = () => {
      webSocket.send(JSON.stringify({ event: 'conf', flags: 65536 + 131072 }))
      webSocket.send(JSON.stringify({ event: 'subscribe', channel: 'candles', key: 'trade:1D:tBTCUSD' }))
      webSocket.send(JSON.stringify({ event: 'subscribe', channel: 'trades', symbol: 'tBTCUSD', prec: 'P0' }))
      webSocket.send(JSON.stringify({ event: 'subscribe', channel: 'book', symbol: 'tBTCUSD', prec: 'P0' }))
      orderBook.setLoadingOrderBook(false)
      lastTrades.setLoadingLastTrades(false)

      webSocket.onmessage = msg => {
        const message = JSON.parse(msg.data)
        candlesChart.consumeCandleChartWebSocket(message)
        orderBook.consumeOrderBookWebSocket(message)
        lastTrades.consumeLastTradesWebSocket(message)
      }
    }

    return () => webSocket.close()
  }, [])

  return (
    <>
      <Header className="TradeViewHeader" />
      <main className="flex flex-col flex-nowrap">
        <section className="flex flex-col flex-nowrap">
          <section className="mt-5">
            <ReactApexChart
              options={candlesChart.dataChart.options}
              series={candlesChart.dataChart.series}
              type="candlestick"
              height={500}
            />
          </section>

          <BuySellOffers
            buyOffers={buySellOfferData.buyOffers}
            bestBuy={buySellOfferData.bestBuy}
            sellOffers={buySellOfferData.sellOffers}
            bestSell={buySellOfferData.bestSell}
            offersCountdown={buySellOfferData.offersCountdown}
            selectedBuy={buySellOfferData.selectedBuy}
            selectedSell={buySellOfferData.selectedSell}
            setSelectedBuy={offer => buySellOfferData.setSelectedBuy(offer)}
            setSelectedSell={offer => buySellOfferData.setSelectedSell(offer)}
            loading={buySellOfferData.loadingOffers}
          />

          <ArbitrationForm
            selectedSell={buySellOfferData.selectedSell}
            selectedBuy={buySellOfferData.selectedBuy}
            btcUsdPrice={buySellOfferData.btcUsdPrice}
            loading={arbitrationForm.loadingSubmit}
            amount={arbitrationForm.amount}
            setAmount={amount => arbitrationForm.setAmount(amount)}
            onClickBuyButton={arbitrationForm.onClickBuyButton}
          />

          <OperationHistory data={operationHistory.customerOperations} />
        </section>

        <section className="flex flex-col flex-nowrap">
          <OrderBookTable bids={orderBook.bids} asks={orderBook.asks} loading={orderBook.loadingOrderBook} />
          <LastTradesTable data={lastTrades.lastTradesData} loading={lastTrades.loadingLastTrades} />
        </section>
      </main>
    </>
  )
}

export default TradeView