improve slippage calc for spot trades

components/trade/Slippage.tsx

@@ -4,7 +4,7 @@ import useMarkPrice from 'hooks/useMarkPrice'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useTranslation } from 'next-i18next'
 import { useMemo } from 'react'
-import { notify } from 'utils/notifications'
+// import { notify } from 'utils/notifications'
 import { calculateSlippage } from 'utils/tradeForm'
 
 const Slippage = () => {
@@ -25,7 +25,8 @@ const Slippage = () => {
         )
       }
     } catch (e) {
-      notify({ type: 'info', title: 'Unable to calculate slippage' })
+      console.error({ type: 'info', title: 'Unable to calculate slippage' })
+      return 100_000
     }
     return 0
   }, [tradeForm, markPrice, selectedMarket])
@@ -44,7 +45,7 @@ const Slippage = () => {
             : 'text-th-error'
         }`}
       >
-        {slippage.toFixed(2)}%
+        {slippage === 100_000 ? 'Unavailable' : `${slippage.toFixed(2)}&`}
       </p>
     </div>
   ) : null

components/trade/TradeSummary.tsx

@@ -69,7 +69,7 @@ const TradeSummary = ({
       : simulatedHealthRatio < 0
       ? 0
       : Math.trunc(simulatedHealthRatio)
-  }, [group, mangoAccount, selectedMarket, tradeForm.baseSize, tradeForm.side])
+  }, [group, mangoAccount, selectedMarket, tradeForm])
 
   return (
     <div className="space-y-2 px-3 md:px-4">

hooks/useMarkPrice.tsx

@@ -1,8 +1,9 @@
 import mangoStore from '@store/mangoStore'
 import { useEffect } from 'react'
 
+const set = mangoStore.getState().set
+
 export default function useMarkPrice() {
-  const set = mangoStore((s) => s.set)
   const markPrice = mangoStore((s) => s.selectedMarket.markPrice)
   const orderbook = mangoStore((s) => s.selectedMarket.orderbook)
   const fills = mangoStore((s) => s.selectedMarket.fills)
@@ -28,7 +29,9 @@ export default function useMarkPrice() {
         state.selectedMarket.markPrice = newMarkPrice
       })
     }
-  }, [orderbook, trades])
+  }, [orderbook, trades, markPrice])
+
+  console.log('markPrice', markPrice)
 
   return markPrice
 }

utils/tradeForm.ts

@@ -28,6 +28,34 @@ export const calculateLimitPriceForMarketOrder = (
   }
 }
 
+export const calculateEstPriceForBaseSize = (
+  orderBook: OrderbookL2,
+  size: number,
+  side: 'buy' | 'sell'
+): number => {
+  const orders = side === 'buy' ? orderBook.asks : orderBook.bids
+  let acc = 0
+  let selectedOrder
+  const orderSize = size
+  for (const order of orders) {
+    acc += order[1]
+    if (acc >= orderSize) {
+      selectedOrder = order
+      break
+    }
+  }
+
+  if (!selectedOrder) {
+    throw new Error('Unable to calculate market order. Please retry.')
+  }
+
+  if (side === 'buy') {
+    return selectedOrder[0]
+  } else {
+    return selectedOrder[0]
+  }
+}
+
 export const calculateSlippage = (
   orderBook: OrderbookL2,
   size: number,
@@ -39,7 +67,7 @@ export const calculateSlippage = (
   const referencePrice = bb && ba ? (bb + ba) / 2 : markPrice
 
   if (Number(size)) {
-    const estimatedPrice = calculateLimitPriceForMarketOrder(
+    const estimatedPrice = calculateEstPriceForBaseSize(
       orderBook,
       Number(size),
       side
@@ -47,6 +75,7 @@ export const calculateSlippage = (
 
     const slippageAbs =
       Number(size) > 0 ? Math.abs(estimatedPrice - referencePrice) : 0
+
     const slippageRel = (slippageAbs / referencePrice) * 100
     return slippageRel
   }