fix: bugs when changing state with new order types

components/Checkbox.tsx

@@ -15,16 +15,23 @@ const HiddenCheckbox = styled.input`
   width: 1px;
 `
 
-const Checkbox = ({ checked, children, ...props }) => (
+const Checkbox = ({ checked, children, disabled = false, ...props }) => (
   <label className="cursor-pointer flex items-center">
-    <HiddenCheckbox checked={checked} {...props} type="checkbox" />
+    <HiddenCheckbox
+      checked={checked}
+      {...props}
+      disabled={disabled}
+      type="checkbox"
+    />
     <div
       className={`${
-        checked ? 'border-th-primary' : 'border-th-fgd-4'
+        checked && !disabled ? 'border-th-primary' : 'border-th-fgd-4'
       } border cursor-pointer default-transition flex items-center justify-center rounded h-4 w-4`}
     >
       <CheckIcon
-        className={`${checked ? 'block' : 'hidden'} h-4 w-4 text-th-primary`}
+        className={`${checked ? 'block' : 'hidden'} h-4 w-4 ${
+          disabled ? 'text-th-fgd-4' : 'text-th-primary'
+        }`}
       />
     </div>
     <span className="ml-2 text-xs text-th-fgd-3">{children}</span>

components/Notification.tsx

@@ -84,7 +84,7 @@ const Notification = ({ type, title, description, txid }) => {
 
   return (
     <div
-      className={`max-w-sm w-full bg-th-bkg-3 shadow-lg rounded-md mt-2 pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`}
+      className={`max-w-sm w-full bg-th-bkg-3 border border-th-bkg-4 shadow-lg rounded-md mt-2 pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`}
     >
       <div className={`flex items-center p-4 relative`}>
         <div className={`flex-shrink-0`}>

components/Tooltip.tsx

@@ -27,7 +27,7 @@ const Tooltip = ({
       delay={delay}
       content={
         <div
-          className={`rounded p-2 text-xs bg-th-bkg-3 leading-4 shadow-md text-th-fgd-3 outline-none focus:outline-none ${className}`}
+          className={`rounded p-2 text-xs bg-th-bkg-3 leading-4 shadow-md text-th-fgd-3 outline-none focus:outline-none border border-th-bkg-4 ${className}`}
         >
           {content}
         </div>

components/TradePageGrid.tsx

@@ -26,7 +26,7 @@ export const defaultLayouts = {
   xl: [
     { i: 'tvChart', x: 0, y: 0, w: 6, h: 30 },
     { i: 'orderbook', x: 6, y: 0, w: 3, h: 17 },
-    { i: 'tradeForm', x: 9, y: 1, w: 3, h: 14 },
+    { i: 'tradeForm', x: 9, y: 1, w: 3, h: 19 },
     { i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
     { i: 'accountInfo', x: 9, y: 3, w: 3, h: 15 },
     { i: 'userInfo', x: 0, y: 2, w: 9, h: 19 },
@@ -54,7 +54,7 @@ export const defaultLayouts = {
     { i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 },
     { i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
     { i: 'accountInfo', x: 6, y: 1, w: 6, h: 15, minW: 2 },
-    { i: 'tradeForm', x: 0, y: 2, w: 12, h: 15, minW: 3 },
+    { i: 'tradeForm', x: 0, y: 2, w: 12, h: 18, minW: 3 },
     { i: 'orderbook', x: 0, y: 3, w: 6, h: 17, minW: 3 },
     { i: 'marketTrades', x: 6, y: 3, w: 6, h: 17, minW: 2 },
     { i: 'userInfo', x: 0, y: 4, w: 12, h: 19, minW: 6 },
@@ -63,14 +63,14 @@ export const defaultLayouts = {
     { i: 'tvChart', x: 0, y: 0, w: 12, h: 12, minW: 6 },
     { i: 'marketPosition', x: 0, y: 1, w: 6, h: 13, minW: 2 },
     { i: 'accountInfo', x: 0, y: 2, w: 6, h: 15, minW: 2 },
-    { i: 'tradeForm', x: 0, y: 3, w: 12, h: 13, minW: 3 },
+    { i: 'tradeForm', x: 0, y: 3, w: 12, h: 17, minW: 3 },
     { i: 'orderbook', x: 0, y: 4, w: 6, h: 17, minW: 3 },
     { i: 'marketTrades', x: 0, y: 5, w: 6, h: 17, minW: 2 },
     { i: 'userInfo', x: 0, y: 6, w: 12, h: 19, minW: 6 },
   ],
 }
 
-export const GRID_LAYOUT_KEY = 'mangoSavedLayouts-3.0.8'
+export const GRID_LAYOUT_KEY = 'mangoSavedLayouts-3.0.9'
 export const breakpoints = { xl: 1600, lg: 1200, md: 1110, sm: 768, xs: 0 }
 
 const TradePageGrid = () => {

components/trade_form/AdvancedTradeForm.tsx

@@ -52,7 +52,7 @@ export default function AdvancedTradeForm({
   const market = useMangoStore((s) => s.selectedMarket.current)
   const isPerpMarket = market instanceof PerpMarket
   const [reduceOnly, setReduceOnly] = useState(false)
-  const [spotMargin, setSpotMargin] = useState(false)
+  const [spotMargin, setSpotMargin] = useState(true)
   const [positionSizePercent, setPositionSizePercent] = useState('')
   const { takerFee } = useFees()
 
@@ -134,6 +134,9 @@ export default function AdvancedTradeForm({
 
   useEffect(() => {
     handleSetPositionSize(positionSizePercent, spotMargin)
+    if (!isPerpMarket && isTriggerOrder) {
+      onTradeTypeChange('Limit')
+    }
   }, [market])
 
   const { max, deposits, borrows, spotMax } = useMemo(() => {
@@ -307,6 +310,7 @@ export default function AdvancedTradeForm({
     }
     const rawQuoteSize = baseSize * usePrice
     setQuoteSize(rawQuoteSize.toFixed(6))
+    setPositionSizePercent('')
   }
 
   const onSetQuoteSize = (quoteSize: number | '') => {
@@ -324,10 +328,14 @@ export default function AdvancedTradeForm({
     const rawBaseSize = quoteSize / usePrice
     const baseSize = quoteSize && floorToDecimal(rawBaseSize, sizeDecimalCount)
     setBaseSize(baseSize)
+    setPositionSizePercent('')
   }
 
   const onTradeTypeChange = (tradeType) => {
     setTradeType(tradeType)
+    if (TRIGGER_ORDER_TYPES.includes(tradeType)) {
+      setReduceOnly(true)
+    }
     if (['Market', 'Stop Loss', 'Take Profit'].includes(tradeType)) {
       setIoc(true)
       if (isTriggerOrder) {
@@ -362,7 +370,9 @@ export default function AdvancedTradeForm({
   }
   const marginOnChange = (checked) => {
     setSpotMargin(checked)
-    handleSetPositionSize(positionSizePercent, checked)
+    if (positionSizePercent) {
+      handleSetPositionSize(positionSizePercent, checked)
+    }
   }
 
   const handleSetPositionSize = (percent, spotMargin) => {
@@ -384,6 +394,7 @@ export default function AdvancedTradeForm({
   }
 
   const percentToClose = (size, total) => {
+    if (!size || !total) return 0
     return (size / total) * 100
   }
 
@@ -776,7 +787,7 @@ export default function AdvancedTradeForm({
                 </div>
               </div>
             ) : null}
-            {marketConfig.kind === 'perp' && !isTriggerOrder ? (
+            {marketConfig.kind === 'perp' ? (
               <div className="mt-4">
                 <Tooltip
                   className="hidden md:block"
@@ -787,6 +798,7 @@ export default function AdvancedTradeForm({
                   <Checkbox
                     checked={reduceOnly}
                     onChange={(e) => reduceOnChange(e.target.checked)}
+                    disabled={isTriggerOrder}
                   >
                     Reduce Only
                   </Checkbox>
@@ -810,7 +822,7 @@ export default function AdvancedTradeForm({
               </div>
             ) : null}
           </div>
-          <div className="col-span-12 md:col-span-10 md:col-start-3 pt-2">
+          <div className="col-span-12 md:col-span-10 md:col-start-3 pt-1">
             {tradeType === 'Market' && priceImpact ? (
               <EstPriceImpact priceImpact={priceImpact} />
             ) : (