feat: limit order inputs are now always in base denom

osmosis-labs · Jun 5, 2024 · 42ebf01 · 42ebf01
1 parent 24968e2
commit 42ebf01
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 20 deletions.
diff --git a/packages/web/components/input/limit-input.tsx b/packages/web/components/input/limit-input.tsx
@@ -4,11 +4,13 @@ import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
 import { Icon } from "~/components/assets";
 import { DynamicSizeInput } from "~/components/input/dynamic-size-input";
-import { useCoinPrice } from "~/hooks/queries/assets/use-coin-price";
 import { formatPretty } from "~/utils/formatter";
 
 export interface LimitInputProps {
   baseAsset: CoinPretty;
+  onChange: (value: string) => void;
+  tokenAmount: string;
+  price: Dec;
 }
 
 enum FocusedInput {
@@ -33,10 +35,13 @@ const transformAmount = (value: string) => {
   return updatedValue;
 };
 
-export const LimitInput: FC<LimitInputProps> = ({ baseAsset }) => {
+export const LimitInput: FC<LimitInputProps> = ({
+  baseAsset,
+  onChange,
+  tokenAmount,
+  price,
+}) => {
   const [fiatAmount, setFiatAmount] = useState<string>("");
-  const [tokenAmount, setTokenAmount] = useState<string>("");
-  const { price, isLoading } = useCoinPrice(baseAsset);
   const [focused, setFocused] = useState<FocusedInput>(FocusedInput.FIAT);
 
   const swapFocus = useCallback(() => {
@@ -70,29 +75,27 @@ export const LimitInput: FC<LimitInputProps> = ({ baseAsset }) => {
       if (updatedValue.length > 0 && new Dec(updatedValue).isNegative()) {
         return;
       }
-      setTokenAmount(updatedValue);
+      onChange(updatedValue);
     },
-    [setTokenAmount]
+    [onChange]
   );
 
   useEffect(() => {
-    if (isLoading || focused !== FocusedInput.TOKEN) return;
+    if (focused !== FocusedInput.TOKEN) return;
     const value = tokenAmount && tokenAmount.length > 0 ? tokenAmount : "0";
     const fiatValue = price?.mul(new Dec(value));
-    const newFiatAmount = fiatValue?.toDec() ?? new Dec(0);
-    setFiatAmountSafe(formatPretty(newFiatAmount));
+    setFiatAmountSafe(formatPretty(fiatValue));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [price, isLoading, tokenAmount, setFiatAmountSafe]);
+  }, [price, tokenAmount, setFiatAmountSafe]);
 
   useEffect(() => {
-    if (isLoading || focused !== FocusedInput.FIAT) return;
+    if (focused !== FocusedInput.FIAT) return;
     const value = fiatAmount && fiatAmount.length > 0 ? fiatAmount : "0";
-    const tokenValue = new Dec(value)?.quo(price?.toDec() ?? new Dec(1));
-    const newTokenAmount = tokenValue ?? new Dec(0);
-    setTokenAmountSafe(formatPretty(newTokenAmount));
+    const tokenValue = new Dec(value)?.quo(price);
+    onChange(tokenValue.toString());
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [price, isLoading, fiatAmount, setTokenAmountSafe]);
-  console.log(isLoading);
+  }, [price, fiatAmount, onChange]);
+
   const FiatInput = useMemo(() => {
     const isFocused = focused === FocusedInput.FIAT;
     return (

diff --git a/packages/web/components/place-limit-tool/index.tsx b/packages/web/components/place-limit-tool/index.tsx
@@ -104,7 +104,16 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
           </div>
           <div className="mt-3 flex place-content-between items-center">
             <div className="flex w-full flex-col items-center">
-              <LimitInput baseAsset={swapState.inAmountInput.balance!} />
+              <LimitInput
+                onChange={swapState.inAmountInput.setAmount}
+                baseAsset={swapState.inAmountInput.balance!}
+                tokenAmount={
+                  swapState.inAmountInput.amount
+                    ? formatPretty(swapState.inAmountInput.amount.toDec())
+                    : ""
+                }
+                price={swapState.priceState.price}
+              />
             </div>
           </div>
         </div>

diff --git a/packages/web/hooks/limit-orders/use-place-limit.ts b/packages/web/hooks/limit-orders/use-place-limit.ts
@@ -58,12 +58,21 @@ export const usePlaceLimit = ({
       return;
     }
 
+    const paymentDenom =
+      orderDirection === OrderDirection.Bid
+        ? swapAssets.toAsset.coinMinimalDenom
+        : swapAssets.fromAsset.coinMinimalDenom;
+    const paymentAmount =
+      orderDirection === OrderDirection.Ask
+        ? quantity
+        : new Dec(quantity).mul(priceState.price).truncate().toString();
+
     const tickId = priceToTick(priceState.price);
     const msg = {
       place_limit: {
         tick_id: parseInt(tickId.toString()),
         order_direction: orderDirection,
-        quantity,
+        quantity: paymentAmount,
         claim_bounty: CLAIM_BOUNTY,
       },
     };
@@ -73,8 +82,8 @@ export const usePlaceLimit = ({
       msg,
       [
         {
-          amount: quantity,
-          denom: swapAssets.fromAsset.coinMinimalDenom,
+          amount: paymentAmount,
+          denom: paymentDenom,
         },
       ]
     );