more trade form improvements

components/LeverageSlider.tsx

@@ -2,7 +2,11 @@ import React, { useEffect, useMemo, useState } from 'react'
 import Slider from 'rc-slider'
 import 'rc-slider/assets/index.css'
 import useMangoStore from '../stores/useMangoStore'
-import { getMarketIndexBySymbol } from '@blockworks-foundation/mango-client'
+import {
+  getMarketIndexBySymbol,
+  I80F48,
+  PerpMarket,
+} from '@blockworks-foundation/mango-client'
 import tw from 'twin.macro'
 import styled from '@emotion/styled'
 import 'rc-slider/assets/index.css'
@@ -41,6 +45,7 @@ type SliderProps = {
   step: number
   value: number
   side: string
+  price: number
   disabled?: boolean
   max?: number
   maxButtonTransition?: boolean
@@ -54,6 +59,7 @@ export default function LeverageSlider({
   disabled,
   maxButtonTransition,
   side,
+  price,
 }: SliderProps) {
   const [enableTransition, setEnableTransition] = useState(false)
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
@@ -68,35 +74,44 @@ export default function LeverageSlider({
     marketConfig.baseSymbol
   )
 
-  const marketInfo = useMemo(() => {
-    if (mangoGroup) {
-      if (marketType === 'perp') {
-        return mangoGroup.perpMarkets[marketIndex]
-      } else {
-        return mangoGroup.spotMarkets[marketIndex]
-      }
-    }
-  }, [marketType, mangoGroup, marketIndex])
-
   const max = useMemo(() => {
-    if (mangoAccount) {
-      console.log('market', market)
+    if (!mangoAccount) return 0
+    const priceOrDefault = price
+      ? I80F48.fromNumber(price)
+      : mangoGroup.getPrice(marketIndex, mangoCache)
+    console.log('price', priceOrDefault.toFixed())
 
-      const maxQuote = mangoAccount
-        .getMaxLeverageForMarket(
-          mangoGroup,
-          mangoCache,
-          marketIndex,
-          marketInfo.initAssetWeight,
-          marketInfo.initLiabWeight,
-          market,
-          side
-        )
-        .toNumber()
-      return maxQuote / mangoGroup.getPrice(marketIndex, mangoCache).toNumber()
-    }
-    return 0
-  }, [mangoAccount, marketInfo, mangoGroup, mangoCache, side, marketIndex])
+    const maxQuote = mangoAccount
+      .getMaxLeverageForMarket(
+        mangoGroup,
+        mangoCache,
+        marketIndex,
+        market,
+        side,
+        priceOrDefault
+      )
+      .toNumber()
+    console.log('max quote :: ', maxQuote)
+
+    if (maxQuote <= 0) return 0
+    // mul by scaler value to account for rounding errors in getMaxLeverageForMarket or fees
+    const maxScaler = market instanceof PerpMarket ? 0.99 : 0.95
+    const max =
+      (maxQuote * maxScaler) /
+      mangoGroup.getPrice(marketIndex, mangoCache).toNumber()
+
+    return max
+  }, [
+    mangoAccount,
+    mangoGroup,
+    mangoCache,
+    marketIndex,
+    market,
+    marketType,
+    side,
+    step,
+    price,
+  ])
 
   useEffect(() => {
     if (maxButtonTransition) {

components/PerpPositionsTable.tsx

@@ -226,8 +226,10 @@ const PositionsTable = () => {
                             )}
                           </Td>
                           <Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
-                            {perpMarket.baseLotsToNumber(
-                              perpAccount.basePosition
+                            {Math.abs(
+                              perpMarket.baseLotsToNumber(
+                                perpAccount.basePosition
+                              )
                             )}
                           </Td>
                           <Th

components/TradeForm.tsx

@@ -6,7 +6,7 @@ import {
   PerpMarket,
 } from '@blockworks-foundation/mango-client'
 import { notify } from '../utils/notifications'
-import { calculateMarketPrice, getDecimalCount, sleep } from '../utils'
+import { calculateTradePrice, getDecimalCount, sleep } from '../utils'
 import FloatingElement from './FloatingElement'
 import { floorToDecimal } from '../utils/index'
 import useMangoStore, { mangoClient } from '../stores/useMangoStore'
@@ -235,9 +235,20 @@ export default function TradeForm() {
     setSubmitting(true)
 
     try {
-      let orderPrice = Number(price)
-      if (tradeType === 'Market') {
-        orderPrice = calculateMarketPrice(orderbook, baseSize, side)
+      const orderPrice = calculateTradePrice(
+        tradeType,
+        orderbook,
+        baseSize,
+        side,
+        price
+      )
+
+      if (!orderPrice) {
+        notify({
+          title: 'Price not available',
+          description: 'Please try again',
+          type: 'error',
+        })
       }
 
       const orderType = ioc ? 'ioc' : postOnly ? 'postOnly' : 'limit'
@@ -377,6 +388,13 @@ export default function TradeForm() {
             step={parseFloat(minOrderSize)}
             disabled={false}
             side={side}
+            price={calculateTradePrice(
+              tradeType,
+              orderbook,
+              baseSize ? baseSize : 0,
+              side,
+              price
+            )}
           />
           {tradeType !== 'Market' ? (
             <div className="flex mt-4">

pages/perp/[market].tsx

@@ -37,9 +37,10 @@ const PerpMarket = () => {
         state.selectedMarket.kind = 'perp'
         if (newMarket.name !== marketConfig.name) {
           state.selectedMarket.config = newMarket
-          state.tradeForm.price = mangoGroup
-            .getPrice(marketIndex, mangoCache)
-            .toFixed(2)
+          state.tradeForm.price =
+            state.tradeForm.tradeType === 'Limit'
+              ? mangoGroup.getPrice(marketIndex, mangoCache).toFixed(2)
+              : ''
         }
       })
     }

pages/spot/[market].tsx

@@ -40,9 +40,10 @@ const SpotMarket = () => {
         state.selectedMarket.kind = 'spot'
         if (newMarket.name !== marketConfig.name) {
           state.selectedMarket.config = newMarket
-          state.tradeForm.price = mangoGroup
-            .getPrice(marketIndex, mangoCache)
-            .toFixed(2)
+          state.tradeForm.price =
+            state.tradeForm.tradeType === 'Limit'
+              ? mangoGroup.getPrice(marketIndex, mangoCache).toFixed(2)
+              : ''
         }
       })
     }

utils/index.ts

@@ -149,11 +149,24 @@ export function isDefined<T>(argument: T | undefined): argument is T {
   return argument !== undefined
 }
 
+export function calculateTradePrice(
+  tradeType: string,
+  orderBook: Orderbook,
+  baseSize: number,
+  side: 'buy' | 'sell',
+  price: string | number
+): number {
+  if (tradeType === 'Market') {
+    return calculateMarketPrice(orderBook, baseSize, side)
+  }
+  return Number(price)
+}
+
 export const calculateMarketPrice = (
   orderBook: Orderbook,
   size: number,
   side: 'buy' | 'sell'
-) => {
+): number => {
   const orders = side === 'buy' ? orderBook.asks : orderBook.bids
   let acc = 0
   let selectedOrder
@@ -165,6 +178,11 @@ export const calculateMarketPrice = (
     }
   }
 
+  if (!selectedOrder) {
+    console.error('Orderbook empty no market price available')
+    return
+  }
+
   if (side === 'buy') {
     return selectedOrder[0] * 1.05
   } else {

yarn.lock

@@ -995,7 +995,7 @@
 
 "@blockworks-foundation/mango-client@git+https://github.com/blockworks-foundation/mango-client-v3.git":
   version "3.0.4"
-  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#29b6d5e35428515e25e91892dc679e8fbcb590a7"
+  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#b1a52165e65e5557f3233738ec5a0e5a8aba2adc"
   dependencies:
     "@project-serum/serum" "0.13.55"
     "@project-serum/sol-wallet-adapter" "^0.2.0"