Fix minimumVolume in LO summary step (#157)

* Feat/max balance (#147) * handle max balance onclick Signed-off-by: belbazanas <[email protected]> * handle market order max balanc e Signed-off-by: belbazanas <[email protected]> * remove disabled receive input field when balance < 0 Signed-off-by: belbazanas <[email protected]> --------- Signed-off-by: belbazanas <[email protected]> * Feat/add zero lend (#153) * handle zerolend logic + refacto logics type Signed-off-by: belbazanas <[email protected]> * add zerolend logo Signed-off-by: belbazanas <[email protected]> * log Signed-off-by: belbazanas <[email protected]> * update indexer sdk to 40 Signed-off-by: belbazanas <[email protected]> * fix build? Signed-off-by: belbazanas <[email protected]> * remove log Signed-off-by: belbazanas <[email protected]> * remove log Signed-off-by: belbazanas <[email protected]> * rename loog Signed-off-by: belbazanas <[email protected]> * computeReceive amount on max button clicked Signed-off-by: belbazanas <[email protected]> * add min volume for limit orders Signed-off-by: belbazanas <[email protected]> * add tooltip Signed-off-by: belbazanas <[email protected]> * reset selected liquidity sourcing on tradeAction switch Signed-off-by: belbazanas <[email protected]> * fix send input errors Signed-off-by: belbazanas <[email protected]> --------- Signed-off-by: belbazanas <[email protected]> * fix minimumVolume in proceed steps + move minVolume methods in tradeInfos hook (#156) Signed-off-by: belbazanas <[email protected]> --------- Signed-off-by: belbazanas <[email protected]> Co-authored-by: Mangrove Automation Bot <[email protected]>
mangrovedao · Mar 5, 2024 · 0923b8f · 0923b8f
1 parent 8232ae8
commit 0923b8f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 39 deletions.
diff --git a/app/trade/_components/forms/components/market-details.tsx b/app/trade/_components/forms/components/market-details.tsx
@@ -26,10 +26,12 @@ export function MarketDetails({
       <MarketDetailsLine title="Taker fee" value={takerFee} />
       <MarketDetailsLine title="Tick size" value={tickSize} />
       <MarketDetailsLine title="Current spot price" value={spotPrice} />
-      <MarketDetailsLine
-        title={`Minimum volume`}
-        value={`${minVolume?.ask.volume} ${minVolume?.ask.token} / ${minVolume?.bid.volume} ${minVolume?.bid.token}`}
-      />
+      {minVolume ? (
+        <MarketDetailsLine
+          title={`Minimum volume`}
+          value={`${minVolume?.ask.volume} ${minVolume?.ask.token} / ${minVolume?.bid.volume} ${minVolume?.bid.token}`}
+        />
+      ) : undefined}
     </Accordion>
   )
 }

diff --git a/app/trade/_components/forms/hooks/use-trade-infos.ts b/app/trade/_components/forms/hooks/use-trade-infos.ts
@@ -55,6 +55,32 @@ export function useTradeInfos(
     market?.quote,
   )
 
+  const minAsk = market?.getSemibook("asks").getMinimumVolume(200_000)
+  const minBid = market?.getSemibook("bids").getMinimumVolume(200_000)
+
+  const minVolume =
+    tradeAction === TradeAction.BUY
+      ? {
+          bid: {
+            volume: minAsk?.toFixed(receiveToken?.displayedDecimals),
+            token: receiveToken?.symbol,
+          },
+          ask: {
+            volume: minBid?.toFixed(quoteToken?.displayedDecimals),
+            token: quoteToken?.symbol,
+          },
+        }
+      : {
+          bid: {
+            volume: minBid?.toFixed(quoteToken?.displayedDecimals),
+            token: quoteToken?.symbol,
+          },
+          ask: {
+            volume: minAsk?.toFixed(sendToken?.displayedDecimals),
+            token: sendToken?.symbol,
+          },
+        }
+
   // const spread = lowestAskPrice
   //   ?.sub(highestBidPrice ?? 0)
   //   .toFixed(priceDecimals)
@@ -89,5 +115,6 @@ export function useTradeInfos(
     tickSize,
     spotPrice: tempSpotPrice,
     defaultLimitPrice,
+    minVolume,
   }
 }
diff --git a/app/trade/_components/forms/limit/components/from-wallet-order-dialog.tsx b/app/trade/_components/forms/limit/components/from-wallet-order-dialog.tsx
@@ -44,6 +44,7 @@ export default function FromWalletLimitOrderDialog({ form, onClose }: Props) {
     spender,
     feeInPercentageAsString,
     tickSize,
+    minVolume,
     spotPrice,
   } = useTradeInfos("limit", form.tradeAction)
   // const { isDeployed, isBound } = useSmartRouter().data ?? {}
@@ -239,6 +240,7 @@ export default function FromWalletLimitOrderDialog({ form, onClose }: Props) {
               spotPrice={spotPrice}
               takerFee={feeInPercentageAsString}
               tickSize={tickSize}
+              minVolume={minVolume}
             />
           </div>
         </div>

diff --git a/app/trade/_components/forms/limit/hooks/use-limit.ts b/app/trade/_components/forms/limit/hooks/use-limit.ts
@@ -56,34 +56,9 @@ export function useLimit(props: Props) {
     tickSize,
     spotPrice,
     defaultLimitPrice,
+    minVolume,
   } = useTradeInfos("limit", tradeAction)
 
-  const minAsk = market?.getSemibook("asks").getMinimumVolume(200_000)
-  const minBid = market?.getSemibook("bids").getMinimumVolume(200_000)
-
-  const minVolume =
-    tradeAction === TradeAction.BUY
-      ? {
-          bid: {
-            volume: minAsk?.toFixed(receiveToken?.displayedDecimals),
-            token: receiveToken?.symbol,
-          },
-          ask: {
-            volume: minBid?.toFixed(quoteToken?.displayedDecimals),
-            token: quoteToken?.symbol,
-          },
-        }
-      : {
-          bid: {
-            volume: minBid?.toFixed(quoteToken?.displayedDecimals),
-            token: quoteToken?.symbol,
-          },
-          ask: {
-            volume: minAsk?.toFixed(sendToken?.displayedDecimals),
-            token: sendToken?.symbol,
-          },
-        }
-
   // TODO: fix TS type for useEventListener
   // @ts-expect-error
   useEventListener("on-orderbook-offer-clicked", handleOnOrderbookOfferClicked)

diff --git a/app/trade/_components/forms/limit/limit.tsx b/app/trade/_components/forms/limit/limit.tsx
@@ -180,11 +180,7 @@ export function Limit() {
                   }}
                   balanceAction={{
                     onClick: () => {
-                      field.handleChange(
-                        Number(currentBalance.formatted).toFixed(
-                          sendToken?.displayedDecimals,
-                        ) || "0",
-                      ),
+                      field.handleChange(currentBalance.formatted || "0"),
                         computeReceiveAmount()
                     },
                   }}

diff --git a/components/minimum-volume.tsx b/components/minimum-volume.tsx
@@ -9,6 +9,7 @@ import {
 import { TooltipContent } from "@radix-ui/react-tooltip"
 import Link from "next/link"
 import InfoTooltip from "./info-tooltip"
+import { Caption } from "./typography/caption"
 
 export function MinimumVolume(props: {
   token?: Token | string
@@ -27,9 +28,10 @@ export function MinimumVolume(props: {
         <span className=" text-xs text-secondary float-left">
           {props.label ?? "Min. Volume"}
         </span>
-        <InfoTooltip>
-          <p className="text-xs">
-            There is a minimum amount required for limit orders on Mangrove.{" "}
+        <InfoTooltip className="flex flex-col">
+          <Caption className="text-xs">There is a minimum amount</Caption>
+          <Caption>
+            required for limit orders on Mangrove.{" "}
             <Link
               href="https://docs.mangrove.exchange/general/web-app/trade/how-to-make-an-order/limit-order"
               target="_blank"
@@ -38,7 +40,7 @@ export function MinimumVolume(props: {
             >
               Learn more
             </Link>
-          </p>
+          </Caption>
         </InfoTooltip>
       </div>
       {!props.volume || !props.token ? (