mango-ui-v3/components/TradeForm.tsx

import { useMemo, useState } from 'react'
import { SwitchHorizontalIcon } from '@heroicons/react/outline'
import { getWeights } from '@blockworks-foundation/mango-client'
import useMangoStore from '../stores/useMangoStore'
import AdvancedTradeForm from './AdvancedTradeForm'
import SimpleTradeForm from './SimpleTradeForm'
import {
  FlipCard,
  FlipCardBack,
  FlipCardFront,
  FlipCardInner,
  StyledFloatingElement,
} from './FlipCard'

export default function TradeForm() {
  const [showAdvancedFrom, setShowAdvancedForm] = useState(true)
  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)

  const handleFormChange = () => {
    setShowAdvancedForm(!showAdvancedFrom)
  }

  const initLeverage = useMemo(() => {
    if (!mangoGroup || !marketConfig) return 1

    const ws = getWeights(mangoGroup, marketConfig.marketIndex, 'Init')
    const w =
      marketConfig.kind === 'perp' ? ws.perpAssetWeight : ws.spotAssetWeight
    return Math.round((100 * -1) / (w.toNumber() - 1)) / 100
  }, [mangoGroup, marketConfig])

  return (
    <FlipCard>
      <FlipCardInner flip={showAdvancedFrom}>
        {showAdvancedFrom ? (
          <FlipCardFront>
            <StyledFloatingElement className="h-full">
              <button
                onClick={handleFormChange}
                className="absolute flex items-center justify-center right-4 top-4 rounded-full bg-th-bkg-3 w-8 h-8 hover:text-th-primary focus:outline-none"
              >
                <SwitchHorizontalIcon className="w-5 h-5" />
              </button>
              <AdvancedTradeForm initLeverage={initLeverage} />
            </StyledFloatingElement>
          </FlipCardFront>
        ) : (
          <FlipCardBack>
            <StyledFloatingElement className="h-full">
              <button
                onClick={handleFormChange}
                className="absolute flex items-center justify-center right-4 top-4 rounded-full bg-th-bkg-3 w-8 h-8 hover:text-th-primary focus:outline-none"
              >
                <SwitchHorizontalIcon className="w-5 h-5" />
              </button>
              <SimpleTradeForm initLeverage={initLeverage} />
            </StyledFloatingElement>
          </FlipCardBack>
        )}
      </FlipCardInner>
    </FlipCard>
  )
}