mango-v4-ui/components/trade/SpotSlider.tsx

import LeverageSlider from '@components/swap/LeverageSlider'
import mangoStore from '@store/mangoStore'
import Decimal from 'decimal.js'
import { useCallback, useMemo, useState } from 'react'

const SpotSlider = () => {
  const side = mangoStore((s) => s.tradeForm.side)
  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const tradeForm = mangoStore((s) => s.tradeForm)

  const leverageMax = useMemo(() => {
    const group = mangoStore.getState().group
    const set = mangoStore.getState().set
    if (!mangoAccount || !group || !selectedMarket) return 100

    if (side === 'buy') {
      const maxQuote = mangoAccount.getMaxQuoteForSerum3BidUi(
        group,
        selectedMarket.serumMarketExternal
      )
      return new Decimal(maxQuote.toString()).toNumber()
    } else {
      const maxBase = mangoAccount.getMaxBaseForSerum3AskUi(
        group,
        selectedMarket.serumMarketExternal
      )

      return new Decimal(maxBase.toString()).toNumber()
    }
  }, [side, selectedMarket, mangoAccount])

  const handleSlide = useCallback((val: string) => {
    const set = mangoStore.getState().set

    set((s) => {
      if (s.tradeForm.side === 'buy') {
        s.tradeForm.quoteSize = val

        if (Number(s.tradeForm.price)) {
          s.tradeForm.baseSize = (
            parseFloat(val) / parseFloat(s.tradeForm.price)
          ).toString()
        } else {
          s.tradeForm.baseSize = ''
        }
      } else if (s.tradeForm.side === 'sell') {
        s.tradeForm.baseSize = val

        if (Number(s.tradeForm.price)) {
          s.tradeForm.quoteSize = (
            parseFloat(val) * parseFloat(s.tradeForm.price)
          ).toString()
        }
      }
    })
  }, [])

  return (
    <div className="w-full px-4">
      <LeverageSlider
        amount={
          tradeForm.side === 'buy'
            ? parseFloat(tradeForm.quoteSize)
            : parseFloat(tradeForm.baseSize)
        }
        leverageMax={leverageMax}
        onChange={handleSlide}
      />
    </div>
  )
}

export default SpotSlider