update quote size on orderbook click and market order

components/trade/AdvancedTradeForm.tsx

@@ -192,21 +192,37 @@ const AdvancedTradeForm = () => {
 
   useEffect(() => {
     const group = mangoStore.getState().group
-    if (!group || !marketPrice || !selectedMarket) return
-    let tickSize: number
-    if (selectedMarket instanceof Serum3Market) {
-      const market = group.getSerum3ExternalMarket(
-        selectedMarket.serumMarketExternal
-      )
-      tickSize = market.tickSize
-    } else {
-      tickSize = selectedMarket.tickSize
+    if (
+      tradeForm.tradeType === 'Market' &&
+      marketPrice &&
+      selectedMarket &&
+      group
+    ) {
+      let tickSize: number
+      if (selectedMarket instanceof Serum3Market) {
+        const market = group.getSerum3ExternalMarket(
+          selectedMarket.serumMarketExternal
+        )
+        tickSize = market.tickSize
+      } else {
+        tickSize = selectedMarket.tickSize
+      }
+      if (tradeForm.baseSize) {
+        const baseSize = new Decimal(tradeForm.baseSize).toNumber()
+        const orderbook = mangoStore.getState().selectedMarket.orderbook
+        const price = calculateMarketPrice(orderbook, baseSize, tradeForm.side)
+        const quoteSize = baseSize * price
+        set((s) => {
+          s.tradeForm.price = price.toFixed(getDecimalCount(tickSize))
+          s.tradeForm.quoteSize = quoteSize.toFixed(getDecimalCount(tickSize))
+        })
+      } else {
+        set((s) => {
+          s.tradeForm.price = marketPrice.toFixed(getDecimalCount(tickSize))
+        })
+      }
     }
-
-    set((s) => {
-      s.tradeForm.price = marketPrice.toFixed(getDecimalCount(tickSize))
-    })
-  }, [set, marketPrice, selectedMarket])
+  }, [marketPrice, selectedMarket, tradeForm])
 
   const handlePlaceOrder = useCallback(async () => {
     const client = mangoStore.getState().client

components/trade/Orderbook.tsx

@@ -572,6 +572,7 @@ const OrderbookRow = ({
   minOrderSize: number
   tickSize: number
 }) => {
+  const tradeForm = mangoStore((s) => s.tradeForm)
   const element = useRef<HTMLDivElement>(null)
   const [animationSettings] = useLocalStorageState(
     ANIMATION_SETTINGS_KEY,
@@ -608,15 +609,29 @@ const OrderbookRow = ({
     const set = mangoStore.getState().set
     set((state) => {
       state.tradeForm.price = formattedPrice.toFixed()
+      if (tradeForm.baseSize && tradeForm.tradeType === 'Limit') {
+        const quoteSize = floorToDecimal(
+          formattedPrice.mul(new Decimal(tradeForm.baseSize)),
+          getDecimalCount(tickSize)
+        )
+        state.tradeForm.quoteSize = quoteSize.toFixed()
+      }
     })
-  }, [formattedPrice])
+  }, [formattedPrice, tradeForm])
 
   const handleSizeClick = useCallback(() => {
     const set = mangoStore.getState().set
     set((state) => {
       state.tradeForm.baseSize = formattedSize.toString()
+      if (formattedSize && tradeForm.price) {
+        const quoteSize = floorToDecimal(
+          formattedSize.mul(new Decimal(tradeForm.price)),
+          getDecimalCount(tickSize)
+        )
+        state.tradeForm.quoteSize = quoteSize.toString()
+      }
     })
-  }, [formattedSize])
+  }, [formattedSize, tradeForm])
 
   const groupingDecimalCount = useMemo(
     () => getDecimalCount(grouping),