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

import { PerpMarket, Serum3Market } from '@blockworks-foundation/mango-v4'
import Button from '@components/shared/Button'
import InlineNotification from '@components/shared/InlineNotification'
import Loading from '@components/shared/Loading'
import SecondaryConnectButton from '@components/shared/SecondaryConnectButton'
import { useWallet } from '@solana/wallet-adapter-react'
import useIpAddress from 'hooks/useIpAddress'
import useMangoAccount from 'hooks/useMangoAccount'
import useSelectedMarket from 'hooks/useSelectedMarket'
import { useSpotMarketMax } from './SpotSlider'
import { usePerpMarketMax } from './PerpSlider'
import mangoStore from '@store/mangoStore'
import { useTranslation } from 'react-i18next'

const TradeformSubmitButton = ({
  disabled,
  placingOrder,
  setShowCreateAccountModal,
  setShowDepositModal,
  sideNames,
  useMargin,
}: {
  disabled: boolean
  placingOrder: boolean
  setShowCreateAccountModal: (show: boolean) => void
  setShowDepositModal: (show: boolean) => void
  sideNames: string[]
  useMargin: boolean
}) => {
  const { t } = useTranslation(['common', 'trade'])
  const side = mangoStore((s) => s.tradeForm.side)
  const themeData = mangoStore((s) => s.themeData)
  const { connected } = useWallet()
  const {
    initialLoad: mangoAccountLoading,
    mangoAccount,
    mangoAccountAddress,
  } = useMangoAccount()
  const { selectedMarket } = useSelectedMarket()
  const { ipAllowed, ipCountry } = useIpAddress()
  const spotMax = useSpotMarketMax(
    mangoAccount,
    selectedMarket,
    side,
    useMargin,
  )
  const perpMax = usePerpMarketMax(mangoAccount, selectedMarket, side)

  return ipAllowed ? (
    connected ? (
      mangoAccountLoading ||
      (selectedMarket instanceof Serum3Market && spotMax) ||
      (selectedMarket instanceof PerpMarket && perpMax) ? (
        <Button
          className={`flex w-full items-center justify-center ${
            side === 'buy'
              ? themeData.buttonStyle === 'raised'
                ? 'raised-buy-button'
                : 'bg-th-up-dark text-white md:hover:bg-th-up-dark md:hover:brightness-90'
              : themeData.buttonStyle === 'raised'
              ? 'raised-sell-button'
              : 'bg-th-down-dark text-white md:hover:bg-th-down-dark md:hover:brightness-90'
          }`}
          disabled={disabled}
          size="large"
          type="submit"
        >
          {!placingOrder ? (
            <span>
              {t('trade:place-order', {
                side: side === 'buy' ? sideNames[0] : sideNames[1],
              })}
            </span>
          ) : (
            <div className="flex items-center space-x-2">
              <Loading />
              <span className="hidden sm:block">
                {t('trade:placing-order')}
              </span>
            </div>
          )}
        </Button>
      ) : mangoAccountAddress ? (
        <div className="w-full">
          <Button
            className="flex w-full items-center justify-center"
            onClick={() => setShowDepositModal(true)}
            size="large"
          >
            {t('deposit')}
          </Button>
          <div className="mt-4">
            <InlineNotification
              type="info"
              desc={t('trade:no-balance-to-trade')}
            />
          </div>
        </div>
      ) : (
        <div className="w-full">
          <Button
            className="flex w-full items-center justify-center"
            onClick={() => setShowCreateAccountModal(true)}
            size="large"
          >
            {t('create-account')}
          </Button>
        </div>
      )
    ) : (
      <SecondaryConnectButton
        className="flex w-full items-center justify-center"
        isLarge
      />
    )
  ) : (
    <Button disabled className="w-full leading-tight" size="large">
      {t('country-not-allowed', {
        country: ipCountry ? `(${ipCountry})` : '',
      })}
    </Button>
  )
}

export default TradeformSubmitButton