validate trade form size and fix slider percentages

components/shared/LeverageSlider.tsx

@@ -55,7 +55,7 @@ const LeverageSlider = ({
   )
 
   useEffect(() => {
-    if (amount) {
+    if (amount && leverageMax) {
       const percent = ((amount - leverageMax) / leverageMax) * 100 + 100
       setValue(amount)
       setPercent(Math.ceil(percent))
@@ -102,12 +102,13 @@ const LeverageSlider = ({
       <div className="mt-1 flex justify-between">
         {PERCENTAGE_SHORTCUTS.map((p) => (
           <button
-            className={`text-xxs focus:outline-none md:hover:text-th-active ${
+            className={`text-xxs focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 md:hover:text-th-active md:disabled:hover:text-th-fgd-3 ${
               p <= percent ? 'text-th-active' : 'text-th-fgd-3'
             }`}
             key={p}
             onClick={() => handleShortcutButtons(p)}
             type="button"
+            disabled={!leverageMax}
           >
             {p}%
           </button>

components/trade/AdvancedTradeForm.tsx

@@ -27,7 +27,7 @@ import NumberFormat, {
 import * as sentry from '@sentry/nextjs'
 
 import { notify } from 'utils/notifications'
-import SpotSlider from './SpotSlider'
+import SpotSlider, { useSpotMarketMax } from './SpotSlider'
 import {
   OrderTypes,
   TriggerOrderTypes,
@@ -37,7 +37,7 @@ import {
 import Image from 'next/legacy/image'
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import TabUnderline from '@components/shared/TabUnderline'
-import PerpSlider from './PerpSlider'
+import PerpSlider, { usePerpMarketMax } from './PerpSlider'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import {
   SIZE_INPUT_UI_KEY,
@@ -135,6 +135,13 @@ const AdvancedTradeForm = () => {
   } = useSelectedMarket()
   const { remainingBorrowsInPeriod, timeToNextPeriod } =
     useRemainingBorrowsInPeriod()
+  const spotMax = useSpotMarketMax(
+    mangoAccount,
+    selectedMarket,
+    tradeForm.side,
+    savedCheckboxSettings.margin,
+  )
+  const perpMax = usePerpMarketMax(mangoAccount, selectedMarket, tradeForm.side)
 
   // check for available serum account slots if serum market
   const serumSlotsFull = useMemo(() => {
@@ -652,7 +659,11 @@ const AdvancedTradeForm = () => {
 
   const orderTypes = useMemo(() => {
     const orderTypesArray = Object.values(OrderTypes)
-    if (!selectedMarket || selectedMarket instanceof PerpMarket)
+    if (
+      !selectedMarket ||
+      selectedMarket instanceof PerpMarket ||
+      !mangoAccountAddress
+    )
       return orderTypesArray
     const baseBalance = floorToDecimal(
       getTokenBalance(baseBank),
@@ -662,7 +673,7 @@ const AdvancedTradeForm = () => {
     return Math.abs(baseBalance) > 0
       ? [...orderTypesArray, ...triggerOrderTypesArray]
       : orderTypesArray
-  }, [baseBank, minOrderDecimals, selectedMarket])
+  }, [baseBank, mangoAccountAddress, minOrderDecimals, selectedMarket])
 
   const isFormValid = useCallback(
     (form: TradeForm) => {
@@ -720,6 +731,17 @@ const AdvancedTradeForm = () => {
     [baseBank, isTriggerOrder, minOrderSize, oraclePrice, setFormErrors],
   )
 
+  const tooMuchSize = useMemo(() => {
+    const { baseSize, quoteSize, side } = tradeForm
+    if (!baseSize || !quoteSize) return false
+    const size = side === 'buy' ? new Decimal(quoteSize) : new Decimal(baseSize)
+    const decimalMax =
+      selectedMarket instanceof Serum3Market
+        ? new Decimal(spotMax)
+        : new Decimal(perpMax)
+    return size.gt(decimalMax)
+  }, [perpMax, selectedMarket, spotMax, tradeForm])
+
   const disabled =
     !serumOrPerpMarket || !isMarketEnabled || !mangoAccountAddress
 
@@ -1030,6 +1052,7 @@ const AdvancedTradeForm = () => {
                 setShowCreateAccountModal={setShowCreateAccountModal}
                 setShowDepositModal={setShowDepositModal}
                 sideNames={sideNames}
+                tooMuchSize={tooMuchSize}
                 useMargin={savedCheckboxSettings.margin}
               />
             </div>

components/trade/TradeformSubmitButton.tsx

@@ -18,6 +18,7 @@ const TradeformSubmitButton = ({
   setShowCreateAccountModal,
   setShowDepositModal,
   sideNames,
+  tooMuchSize,
   useMargin,
 }: {
   disabled: boolean
@@ -25,9 +26,10 @@ const TradeformSubmitButton = ({
   setShowCreateAccountModal: (show: boolean) => void
   setShowDepositModal: (show: boolean) => void
   sideNames: string[]
+  tooMuchSize: boolean
   useMargin: boolean
 }) => {
-  const { t } = useTranslation(['common', 'trade'])
+  const { t } = useTranslation(['common', 'swap', 'trade'])
   const side = mangoStore((s) => s.tradeForm.side)
   const themeData = mangoStore((s) => s.themeData)
   const { connected } = useWallet()
@@ -61,15 +63,17 @@ const TradeformSubmitButton = ({
               ? 'raised-sell-button'
               : 'bg-th-down-dark text-white md:hover:bg-th-down-dark md:hover:brightness-90'
           }`}
-          disabled={disabled}
+          disabled={disabled || tooMuchSize}
           size="large"
           type="submit"
         >
           {!placingOrder ? (
             <span>
-              {t('trade:place-order', {
-                side: side === 'buy' ? sideNames[0] : sideNames[1],
-              })}
+              {tooMuchSize
+                ? t('swap:insufficient-balance', { symbol: '' })
+                : t('trade:place-order', {
+                    side: side === 'buy' ? sideNames[0] : sideNames[1],
+                  })}
             </span>
           ) : (
             <div className="flex items-center space-x-2">