checkout orderbook liquidity before market close

components/trade/MarketCloseModal.tsx

@@ -1,4 +1,10 @@
-import { FunctionComponent, useCallback, useEffect, useState } from 'react'
+import {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import mangoStore from '@store/mangoStore'
 import { useTranslation } from 'next-i18next'
 import {
@@ -17,6 +23,7 @@ import { INITIAL_SOUND_SETTINGS } from '@components/settings/SoundSettings'
 import { Howl } from 'howler'
 import { isMangoError } from 'types'
 import { decodeBook, decodeBookL2 } from './Orderbook'
+import InlineNotification from '@components/shared/InlineNotification'
 
 interface MarketCloseModalProps {
   onClose: () => void
@@ -113,6 +120,21 @@ const MarketCloseModal: FunctionComponent<MarketCloseModalProps> = ({
     }
   }, [connection, perpMarket, group])
 
+  const insufficientLiquidity = useMemo(() => {
+    if (!perpMarket) return true
+    const baseSize = position.getBasePositionUi(perpMarket)
+    const isBids = baseSize < 0
+    if (isBids) {
+      if (!bids || !bids.length) return true
+      const liquidityMax = bids.reduce((a, c) => a + c[1], 0)
+      return liquidityMax < baseSize
+    } else {
+      if (!asks || !asks.length) return true
+      const liquidityMax = asks.reduce((a, c) => a + c[1], 0)
+      return liquidityMax < baseSize
+    }
+  }, [perpMarket, position, bids, asks])
+
   const handleMarketClose = useCallback(
     async (bids: BidsAndAsks, asks: BidsAndAsks) => {
       const client = mangoStore.getState().client
@@ -138,14 +160,6 @@ const MarketCloseModal: FunctionComponent<MarketCloseModalProps> = ({
         )
 
         const maxSlippage = 0.025
-        // const perpOrderType =
-        //   tradeForm.tradeType === 'Market'
-        //     ? PerpOrderType.market
-        //     : tradeForm.ioc
-        //     ? PerpOrderType.immediateOrCancel
-        //     : tradeForm.postOnly
-        //     ? PerpOrderType.postOnly
-        //     : PerpOrderType.limit
         const tx = await client.perpPlaceOrder(
           group,
           mangoAccount,
@@ -196,8 +210,17 @@ const MarketCloseModal: FunctionComponent<MarketCloseModalProps> = ({
         {t('trade:close-confirm', { config_name: perpMarket?.name })}
       </h3>
       <div className="pb-6 text-th-fgd-3">{t('trade:price-expect')}</div>
+      {insufficientLiquidity ? (
+        <div className="mb-3">
+          <InlineNotification
+            type="error"
+            desc={t('trade:insufficient-perp-liquidity')}
+          />
+        </div>
+      ) : null}
       <Button
         className="mb-4 flex w-full items-center justify-center"
+        disabled={insufficientLiquidity}
         onClick={() => handleMarketClose(bids, asks)}
         size="large"
       >

public/locales/en/trade.json

@@ -27,6 +27,7 @@
     "in-orders": "In Orders",
     "init-leverage": "Init Leverage",
     "instantaneous-funding": "Instantaneous Funding Snapshot",
+    "insufficient-perp-liquidity": "Not enough liquidity to close your position. Set a limit order instead.",
     "interval-seconds": "Interval (seconds)",
     "insured": "{{token}} Insured",
     "last-updated": "Last updated",

public/locales/es/trade.json

@@ -27,6 +27,7 @@
     "in-orders": "In Orders",
     "init-leverage": "Init Leverage",
     "instantaneous-funding": "Instantaneous Funding Snapshot",
+    "insufficient-perp-liquidity": "Not enough liquidity to close your position. Set a limit order instead.",
     "interval-seconds": "Interval (seconds)",
     "insured": "{{token}} Insured",
     "last-updated": "Last updated",

public/locales/ru/trade.json

@@ -27,6 +27,7 @@
     "in-orders": "In Orders",
     "init-leverage": "Init Leverage",
     "instantaneous-funding": "Instantaneous Funding Snapshot",
+    "insufficient-perp-liquidity": "Not enough liquidity to close your position. Set a limit order instead.",
     "interval-seconds": "Interval (seconds)",
     "insured": "{{token}} Insured",
     "last-updated": "Last updated",

public/locales/zh/trade.json

@@ -27,6 +27,7 @@
     "in-orders": "In Orders",
     "init-leverage": "Init Leverage",
     "instantaneous-funding": "Instantaneous Funding Snapshot",
+    "insufficient-perp-liquidity": "Not enough liquidity to close your position. Set a limit order instead.",
     "interval-seconds": "Interval (seconds)",
     "insured": "{{token}} Insured",
     "last-updated": "Last updated",

public/locales/zh_tw/trade.json

@@ -28,6 +28,7 @@
     "init-leverage": "初始槓桿率",
     "instantaneous-funding": "瞬時資金費率",
     "insured": "{{token}} 受保險",
+    "insufficient-perp-liquidity": "Not enough liquidity to close your position. Set a limit order instead.",
     "interval-seconds": "時間間隔 (秒)",
     "last-updated": "最近更新",
     "limit": "限價",