osmosis-labs · crnbarr93 · Aug 13, 2024 · Aug 13, 2024 · Aug 13, 2024 · Aug 13, 2024
diff --git a/packages/web/components/complex/asset-fieldset.tsx b/packages/web/components/complex/asset-fieldset.tsx
@@ -183,7 +183,6 @@ const AssetFieldsetTokenSelector = ({
   const { t } = useTranslation();
   const { logEvent } = useAmplitudeAnalytics();
   const { isMobile } = useWindowSize(Breakpoint.sm);
-
   const {
     isOpen: isSelectOpen,
     onOpen: openSelect,

diff --git a/packages/web/components/place-limit-tool/index.tsx b/packages/web/components/place-limit-tool/index.tsx
@@ -35,7 +35,7 @@ import {
   useTranslation,
   useWalletSelect,
 } from "~/hooks";
-import { usePlaceLimit } from "~/hooks/limit-orders";
+import { MIN_ORDER_VALUE, usePlaceLimit } from "~/hooks/limit-orders";
 import { AddFundsModal } from "~/modals/add-funds";
 import { ReviewOrder } from "~/modals/review-order";
 import { useStore } from "~/stores";
@@ -44,7 +44,6 @@ import { countDecimals, trimPlaceholderZeros } from "~/utils/number";
 
 export interface PlaceLimitToolProps {
   page: EventPage;
-  refetchOrders: () => Promise<any>;
 }
 
 const fixDecimalCount = (value: string, decimalCount = 18) => {
@@ -75,11 +74,12 @@ const transformAmount = (value: string, decimalCount = 18) => {
 const NON_DISPLAY_ERRORS = [
   "errors.zeroAmount",
   "errors.emptyAmount",
-  "errors.generic",
+  "limitOrders.priceTooLow",
+  "limitOrders.priceTooHigh",
 ];
 
 export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
-  ({ page, refetchOrders }: PlaceLimitToolProps) => {
+  ({ page }: PlaceLimitToolProps) => {
     const { accountStore } = useStore();
     const { t } = useTranslation();
     const [reviewOpen, setReviewOpen] = useState<boolean>(false);
@@ -141,6 +141,7 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
         type === "market" &&
         swapState.priceState.percentAdjusted.abs().gt(new Dec(0))
       ) {
+        console.log("RESETTING");
         swapState.priceState.reset();
       }
     }, [swapState.priceState, type]);
@@ -403,6 +404,17 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
 
     const errorDisplay = useMemo(() => {
       if (swapState.error && !NON_DISPLAY_ERRORS.includes(swapState.error)) {
+        if (swapState.error === "errors.generic") {
+          return t("errors.uhOhSomethingWentWrong");
+        }
+
+        if (swapState.error === "limitOrders.belowMinimumAmount") {
+          return t("limitOrders.belowMinimumAmount", {
+            amount: formatFiatPrice(
+              new PricePretty(DEFAULT_VS_CURRENCY, MIN_ORDER_VALUE)
+            ),
+          });
+        }
         return t(swapState.error);
       }
     }, [swapState.error, t]);
@@ -481,7 +493,10 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
                   swapState.marketState.isFetchingNextPageAssets
                 }
                 isLoadingSelectAssets={
-                  swapState.marketState.isLoadingSelectAssets
+                  // The getUserAssets query seems to return false to loading before finishing loading other pages
+                  // so we add a check to prevent the loading state from being shown when there are at most 1 page of assets
+                  swapState.marketState.isLoadingSelectAssets ||
+                  selectableBaseAssets.length <= 50
                 }
                 data-testid="token-in"
               />
@@ -596,7 +611,6 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
           confirmAction={async () => {
             setIsSendingTx(true);
             await swapState.placeLimit();
-            refetchOrders();
             swapState.reset();
             setAmountSafe("fiat", "");
             setReviewOpen(false);

diff --git a/packages/web/components/place-limit-tool/limit-price-selector.tsx b/packages/web/components/place-limit-tool/limit-price-selector.tsx
@@ -153,61 +153,68 @@ export const LimitPriceSelector: FC<LimitPriceSelectorProps> = ({
         className="absolute top-0 h-0.5 w-[512px] -translate-x-5 bg-[#3C356D4A]"
         style={{ width: width + 40 }}
       />
-      <GenericDisclaimer
-        disabled={!swapState.priceState.isBeyondOppositePrice}
-        title={
-          <span className="caption">
-            {orderDirection === "bid"
-              ? t("limitOrders.aboveMarket.title")
-              : t("limitOrders.belowMarket.title")}
-          </span>
-        }
-        body={
-          <span className="text-caption text-osmoverse-300">
-            {orderDirection === "bid"
-              ? t("limitOrders.aboveMarket.description")
-              : t("limitOrders.belowMarket.description")}
-          </span>
-        }
-      >
-        <button
-          type="button"
-          className="body2 sm:caption inline-flex min-h-[32px] w-full items-center justify-start gap-1 text-left"
-          onClick={swapInputMode}
-          disabled={priceState.isLoading}
+      {!priceState.priceError ? (
+        <GenericDisclaimer
+          disabled={!swapState.priceState.isBeyondOppositePrice}
+          title={
+            <span className="caption">
+              {orderDirection === "bid"
+                ? t("limitOrders.aboveMarket.title")
+                : t("limitOrders.belowMarket.title")}
+            </span>
+          }
+          body={
+            <span className="text-caption text-osmoverse-300">
+              {orderDirection === "bid"
+                ? t("limitOrders.aboveMarket.description")
+                : t("limitOrders.belowMarket.description")}
+            </span>
+          }
         >
-          <span className="text-osmoverse-300">
-            {t("limitOrders.whenDenomPriceIs", {
-              denom: swapState.baseAsset?.coinDenom ?? "",
-            })}{" "}
-            <span
+          <button
+            type="button"
+            className="body2 sm:caption inline-flex min-h-[32px] w-full items-center justify-start gap-1 text-left"
+            onClick={swapInputMode}
+            disabled={priceState.isLoading}
+          >
+            <span className="text-osmoverse-300">
+              {t("limitOrders.whenDenomPriceIs", {
+                denom: swapState.baseAsset?.coinDenom ?? "",
+              })}{" "}
+              <span
+                className={classNames("text-wosmongton-300", {
+                  "text-rust-400": swapState.priceState.isBeyondOppositePrice,
+                })}
+              >
+                {priceLabel}
+              </span>{" "}
+              {inputMode === InputMode.Price &&
+                +swapState.priceState.manualPercentAdjusted > 0 && (
+                  <span
+                    className={classNames("text-wosmongton-300", {
+                      "text-rust-400":
+                        swapState.priceState.isBeyondOppositePrice,
+                    })}
+                  >
+                    {percentageSuffix}
+                  </span>
+                )}
+            </span>
+            <Icon
+              id="switch"
               className={classNames("text-wosmongton-300", {
                 "text-rust-400": swapState.priceState.isBeyondOppositePrice,
               })}
-            >
-              {priceLabel}
-            </span>{" "}
-            {inputMode === InputMode.Price &&
-              +swapState.priceState.manualPercentAdjusted > 0 && (
-                <span
-                  className={classNames("text-wosmongton-300", {
-                    "text-rust-400": swapState.priceState.isBeyondOppositePrice,
-                  })}
-                >
-                  {percentageSuffix}
-                </span>
-              )}
-          </span>
-          <Icon
-            id="switch"
-            className={classNames("text-wosmongton-300", {
-              "text-rust-400": swapState.priceState.isBeyondOppositePrice,
-            })}
-            width={16}
-            height={16}
-          />
-        </button>
-      </GenericDisclaimer>
+              width={16}
+              height={16}
+            />
+          </button>
+        </GenericDisclaimer>
+      ) : (
+        <span className="body2 flex min-h-[2rem] items-center text-rust-400">
+          {t(priceState.priceError)}
+        </span>
+      )}
       <label className="flex w-full items-center justify-between">
         <div className="inline-flex items-end gap-1 py-3 text-h6 font-h6">
           <SkeletonLoader

diff --git a/packages/web/components/trade-tool/index.tsx b/packages/web/components/trade-tool/index.tsx
@@ -15,7 +15,6 @@ import {
 } from "~/components/swap-tool/swap-tool-tabs";
 import { EventName, EventPage } from "~/config";
 import { useAmplitudeAnalytics, useTranslation } from "~/hooks";
-import { useOrderbookAllActiveOrders } from "~/hooks/limit-orders/use-orderbook";
 import { useStore } from "~/stores";
 
 export interface TradeToolProps {
@@ -37,12 +36,6 @@ export const TradeTool: FunctionComponent<TradeToolProps> = observer(
     const { accountStore } = useStore();
     const wallet = accountStore.getWallet(accountStore.osmosisChainId);
 
-    const { orders, refetch } = useOrderbookAllActiveOrders({
-      userAddress: wallet?.address ?? "",
-      pageSize: 10,
-      refetchInterval: 4000,
-    });
-
     useEffect(() => {
       switch (tab) {
         case SwapToolTab.BUY:
@@ -74,21 +67,9 @@ export const TradeTool: FunctionComponent<TradeToolProps> = observer(
           {useMemo(() => {
             switch (tab) {
               case SwapToolTab.BUY:
-                return (
-                  <PlaceLimitTool
-                    key="tool-buy"
-                    page={page}
-                    refetchOrders={refetch}
-                  />
-                );
+                return <PlaceLimitTool key="tool-buy" page={page} />;
               case SwapToolTab.SELL:
-                return (
-                  <PlaceLimitTool
-                    key="tool-sell"
-                    page={page}
-                    refetchOrders={refetch}
-                  />
-                );
+                return <PlaceLimitTool key="tool-sell" page={page} />;
               case SwapToolTab.SWAP:
               default:
                 return (
@@ -100,9 +81,9 @@ export const TradeTool: FunctionComponent<TradeToolProps> = observer(
                   />
                 );
             }
-          }, [page, swapToolProps, tab, refetch])}
+          }, [page, swapToolProps, tab])}
         </div>
-        {wallet?.isWalletConnected && orders.length > 0 && (
+        {wallet?.isWalletConnected && (
           <Link
             href="/transactions?tab=orders&fromPage=swap"
             className="my-3 flex items-center justify-between rounded-2xl border border-solid border-osmoverse-800/50 bg-osmoverse-1000 py-2 px-4 hover:bg-osmoverse-850"

diff --git a/packages/web/hooks/limit-orders/use-place-limit.ts b/packages/web/hooks/limit-orders/use-place-limit.ts
@@ -29,6 +29,9 @@ function getNormalizationFactor(
 
 export type OrderDirection = "bid" | "ask";
 
+export const MIN_ORDER_VALUE =
+  process.env.NEXT_PUBLIC_LIMIT_ORDER_MIN_AMOUNT ?? "";
+
 export interface UsePlaceLimitParams {
   osmosisChainId: string;
   orderDirection: OrderDirection;
@@ -470,6 +473,7 @@ export const usePlaceLimit = ({
     priceState.reset();
     marketState.inAmountInput.reset();
   }, [inAmountInput, priceState, marketState]);
+
   const error = useMemo(() => {
     if (!isMarket && orderbookError) {
       return orderbookError;
@@ -492,6 +496,16 @@ export const usePlaceLimit = ({
       return priceState.priceError;
     }
 
+    if (
+      !isMarket &&
+      !!MIN_ORDER_VALUE &&
+      isValidNumericalRawInput(MIN_ORDER_VALUE) &&
+      !!paymentFiatValue &&
+      paymentFiatValue?.toDec().lt(new Dec(MIN_ORDER_VALUE))
+    ) {
+      return "limitOrders.belowMinimumAmount";
+    }
+
     return;
   }, [
     insufficientFunds,
@@ -500,6 +514,7 @@ export const usePlaceLimit = ({
     paymentTokenValue,
     orderbookError,
     priceState.priceError,
+    paymentFiatValue,
   ]);
 
   const shouldEstimateLimitGas = useMemo(() => {

diff --git a/packages/web/localizations/de.json b/packages/web/localizations/de.json
@@ -1318,6 +1318,10 @@
       "past": "Vergangenheit",
       "pending": "Ausstehend",
       "filled": "Ausgeführte Bestellungen zum Einfordern"
-    }
-  }
+    },
+    "priceReaches": "Wenn der Preis {denom} {price} erreicht",
+    "belowMinimumAmount": "{amount} Minimum"
+  },
+  "tradeFee": "Handelsgebühr",
+  "receiveAtLeast": "Erhalten Sie mindestens"
 }
diff --git a/packages/web/localizations/en.json b/packages/web/localizations/en.json
@@ -1318,6 +1318,10 @@
       "past": "Past",
       "pending": "Pending",
       "filled": "Filled orders to claim"
-    }
-  }
+    },
+    "priceReaches": "If {denom} price reaches {price}",
+    "belowMinimumAmount": "{amount} minimum"
+  },
+  "tradeFee": "Trade fee",
+  "receiveAtLeast": "Receive at least"
 }
diff --git a/packages/web/localizations/es.json b/packages/web/localizations/es.json
@@ -1318,6 +1318,10 @@
       "past": "Pasado",
       "pending": "Pendiente",
       "filled": "Pedidos completados para reclamar"
-    }
-  }
+    },
+    "priceReaches": "Si el precio {denom} alcanza {price}",
+    "belowMinimumAmount": "{amount} mínimo"
+  },
+  "tradeFee": "Tarifa de comercio",
+  "receiveAtLeast": "Recibir al menos"
 }
diff --git a/packages/web/localizations/fa.json b/packages/web/localizations/fa.json
@@ -1318,6 +1318,10 @@
       "past": "گذشته",
       "pending": "انتظار",
       "filled": "سفارشات تکمیل شده برای ادعا"
-    }
-  }
+    },
+    "priceReaches": "اگر قیمت {denom} به {price} برسد.",
+    "belowMinimumAmount": "حداقل {amount}"
+  },
+  "tradeFee": "کارمزد تجارت",
+  "receiveAtLeast": "حداقل دریافت کنید"
 }
diff --git a/packages/web/localizations/fr.json b/packages/web/localizations/fr.json
@@ -1318,6 +1318,10 @@
       "past": "Passé",
       "pending": "En attente",
       "filled": "Commandes exécutées à réclamer"
-    }
-  }
+    },
+    "priceReaches": "Si le prix {denom} atteint {price}",
+    "belowMinimumAmount": "{amount} minimum"
+  },
+  "tradeFee": "Frais de transaction",
+  "receiveAtLeast": "Recevez au moins"
 }
diff --git a/packages/web/localizations/gu.json b/packages/web/localizations/gu.json
@@ -1318,6 +1318,10 @@
       "past": "ભૂતકાળ",
       "pending": "બાકી છે",
       "filled": "દાવો કરવાના આદેશો ભર્યા"
-    }
-  }
+    },
+    "priceReaches": "જો {denom} કિંમત {price} સુધી પહોંચે છે",
+    "belowMinimumAmount": "{amount} ન્યૂનતમ"
+  },
+  "tradeFee": "વેપાર ફી",
+  "receiveAtLeast": "ઓછામાં ઓછું પ્રાપ્ત કરો"
 }
diff --git a/packages/web/localizations/hi.json b/packages/web/localizations/hi.json
@@ -1318,6 +1318,10 @@
       "past": "अतीत",
       "pending": "लंबित",
       "filled": "दावा करने के लिए भरे गए ऑर्डर"
-    }
-  }
+    },
+    "priceReaches": "यदि {denom} मूल्य {price} तक पहुँच जाता है",
+    "belowMinimumAmount": "{amount} न्यूनतम"
+  },
+  "tradeFee": "व्यापार शुल्क",
+  "receiveAtLeast": "कम से कम प्राप्त करें"
 }