diff --git a/components/trade/AdvancedTradeForm.tsx b/components/trade/AdvancedTradeForm.tsx index afad68b7..6f29f107 100644 --- a/components/trade/AdvancedTradeForm.tsx +++ b/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 diff --git a/components/trade/Orderbook.tsx b/components/trade/Orderbook.tsx index a74b3f4f..3e38c631 100644 --- a/components/trade/Orderbook.tsx +++ b/components/trade/Orderbook.tsx @@ -572,6 +572,7 @@ const OrderbookRow = ({ minOrderSize: number tickSize: number }) => { + const tradeForm = mangoStore((s) => s.tradeForm) const element = useRef(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),