[In Given Out]: Default input adjustments (#3784)

* fix: button disabled for limit

* feat: default display for buy/sell tab

* refactor: wrapped updating code in useEffect

* fix: loading state for button

packages/web/components/place-limit-tool/index.tsx

@@ -38,6 +38,7 @@ import {
   useWalletSelect,
 } from "~/hooks";
 import { MIN_ORDER_VALUE, usePlaceLimit } from "~/hooks/limit-orders";
+import { mulPrice } from "~/hooks/queries/assets/use-coin-fiat-value";
 import {
   QuoteType,
   useAmountWithSlippage,
@@ -117,20 +118,22 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
     const [isSendingTx, setIsSendingTx] = useState(false);
 
     const [focused, setFocused] = useState<"fiat" | "token">(
-      tab === "buy" ? "fiat" : "token"
+      !featureFlags.inGivenOut && tab === "sell" ? "token" : "fiat"
     );
 
     const [fiatAmount, setFiatAmount] = useState<string>("");
 
     const setBase = useCallback((base: string) => set({ from: base }), [set]);
 
-    if (from === quote) {
-      if (quote === "USDC") {
-        set({ quote: "USDT" });
-      } else {
-        set({ quote: "USDC" });
+    useEffect(() => {
+      if (from === quote) {
+        if (quote === "USDC") {
+          set({ quote: "USDT" });
+        } else {
+          set({ quote: "USDC" });
+        }
       }
-    }
+    }, [from, quote, set]);
 
     const orderDirection = useMemo(
       () => (tab === "buy" ? "bid" : "ask"),
@@ -214,14 +217,12 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
     const isMarketLoading = useMemo(() => {
       return (
         swapState.isMarket &&
-        (swapState.marketState.isQuoteLoading ||
-          swapState.marketState.isLoadingNetworkFee) &&
+        swapState.marketState.isQuoteLoading &&
         !Boolean(swapState.marketState.error)
       );
     }, [
       swapState.isMarket,
       swapState.marketState.isQuoteLoading,
-      swapState.marketState.isLoadingNetworkFee,
       swapState.marketState.error,
     ]);
 
@@ -309,6 +310,7 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
         tab,
         type,
         resetSlippage,
+        featureFlags.inGivenOut,
       ]
     );
 
@@ -455,6 +457,7 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
           Boolean(swapState.marketState.networkFeeError)
         );
       }
+
       return Boolean(swapState.error) || !swapState.isBalancesFetched;
     }, [
       swapState.error,
@@ -569,6 +572,36 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
       fiatAmount,
       focused,
     ]);
+
+    const { tokenBalance, fiatBalance } = useMemo(() => {
+      if (tab === "buy") {
+        const fiatBalance = mulPrice(
+          swapState.quoteTokenBalance,
+          swapState.quoteAssetPrice,
+          DEFAULT_VS_CURRENCY
+        );
+        return { tokenBalance: swapState.quoteTokenBalance, fiatBalance };
+      } else if (tab === "sell") {
+        const fiatBalance = mulPrice(
+          swapState.baseTokenBalance,
+          swapState.baseAssetPrice,
+          DEFAULT_VS_CURRENCY
+        );
+        return { tokenBalance: swapState.baseTokenBalance, fiatBalance };
+      }
+
+      return {
+        tokenBalance: undefined,
+        fiatBalance: undefined,
+      };
+    }, [
+      tab,
+      swapState.quoteTokenBalance,
+      swapState.quoteAssetPrice,
+      swapState.baseTokenBalance,
+      swapState.baseAssetPrice,
+    ]);
+
     return (
       <>
         <div>
@@ -596,11 +629,11 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
               </AssetFieldsetHeaderLabel>
               <AssetFieldsetHeaderBalance
                 availableBalance={
-                  tab === "buy"
-                    ? swapState.quoteAsset?.usdValue &&
-                      formatFiatPrice(swapState.quoteAsset?.usdValue)
-                    : swapState.baseTokenBalance &&
-                      formatPretty(swapState.baseTokenBalance.toDec(), {
+                  focused === "fiat" || tab === "buy"
+                    ? formatFiatPrice(
+                        fiatBalance ?? new PricePretty(DEFAULT_VS_CURRENCY, "0")
+                      )
+                    : formatPretty(tokenBalance ?? new Dec(0), {
                         minimumSignificantDigits: 6,
                         maximumSignificantDigits: 6,
                         maxDecimals: 10,

packages/web/hooks/limit-orders/use-place-limit.ts

@@ -13,6 +13,7 @@ import {
 } from "~/hooks/input/use-amount-input";
 import { useOrderbook } from "~/hooks/limit-orders/use-orderbook";
 import { mulPrice } from "~/hooks/queries/assets/use-coin-fiat-value";
+import { usePrice } from "~/hooks/queries/assets/use-price";
 import { useAmplitudeAnalytics } from "~/hooks/use-amplitude-analytics";
 import { useEstimateTxFees } from "~/hooks/use-estimate-tx-fees";
 import { QuoteType, useSwap, useSwapAssets } from "~/hooks/use-swap";
@@ -116,6 +117,10 @@ export const usePlaceLimit = ({
     []
   );
 
+  const { price: baseAssetPrice } = usePrice({
+    coinMinimalDenom: baseAsset?.coinMinimalDenom ?? "",
+  });
+
   /**
    * Calculates the amount of tokens to be sent with the order.
    * In the case of an Ask order the amount sent is the amount of tokens defined by the user in terms of the base asset.
@@ -144,8 +149,7 @@ export const usePlaceLimit = ({
     }
 
     // Determine the outgoing fiat amount the user wants to buy
-    const outgoingFiatValue =
-      marketState.inAmountInput.amount?.toDec() ?? new Dec(0);
+    const outgoingFiatValue = inAmountInput.amount?.toDec() ?? new Dec(0);
 
     // Determine the amount of quote asset tokens to send by dividing the outgoing fiat amount by the current quote asset price
     // Multiply by 10^n where n is the amount of decimals for the quote asset
@@ -609,6 +613,7 @@ export const usePlaceLimit = ({
     marketState,
     isMarket,
     quoteAssetPrice,
+    baseAssetPrice,
     reset,
     error,
     feeUsdValue,