[Limit Orders]: Add order type selector

packages/web/components/swap-tool/order-type-selector.tsx

@@ -0,0 +1,115 @@
+import { Menu, Transition } from "@headlessui/react";
+import classNames from "classnames";
+import { parseAsStringLiteral, useQueryState } from "nuqs";
+import React, { Fragment, useMemo } from "react";
+
+import { Icon } from "~/components/assets";
+import { SpriteIconId } from "~/config";
+import { useTranslation } from "~/hooks";
+
+interface UITradeType {
+  // id: "market" | "limit" | "recurring";
+  id: "market" | "limit";
+  title: string;
+  description: string;
+  icon: SpriteIconId;
+}
+
+// const TRADE_TYPES = ["market", "limit", "recurring"] as const;
+const TRADE_TYPES = ["market", "limit"] as const;
+
+export default function OrderTypeSelector() {
+  const { t } = useTranslation();
+
+  const [type, setType] = useQueryState(
+    "type",
+    parseAsStringLiteral(TRADE_TYPES).withDefault("market")
+  );
+
+  const uiTradeTypes: UITradeType[] = useMemo(
+    () => [
+      {
+        id: "market",
+        title: t("place-limit.marketOrder.title"),
+        description: t("place-limit.marketOrder.description"),
+        icon: "exchange",
+      },
+      {
+        id: "limit",
+        title: t("place-limit.limitOrder.title"),
+        description: t("place-limit.limitOrder.description", { denom: "BTC" }),
+        icon: "trade",
+      },
+      // {
+      //   id: "recurring",
+      //   title: t("place-limit.recurringOrder.title"),
+      //   description: t("place-limit.recurringOrder.description"),
+      //   icon: "history-uncolored",
+      // },
+    ],
+    [t]
+  );
+
+  return (
+    <Menu as="div" className="relative inline-block">
+      <Menu.Button className="flex items-center gap-2 rounded-[48px] bg-osmoverse-825 py-3 px-4">
+        <p className="font-semibold text-wosmongton-200">Market</p>
+        <div className="flex h-6 w-6 items-center justify-center">
+          <Icon id="chevron-down" className="h-[7px] w-3 text-wosmongton-200" />
+        </div>
+      </Menu.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-50 mt-3 flex w-[280px] origin-top-right flex-col rounded-xl bg-osmoverse-800">
+          <div className="flex items-center border-b border-osmoverse-700 py-2 px-4">
+            <p className="text-subtitle1 font-semibold">Order Type</p>
+          </div>
+          <div className="flex flex-col gap-2 p-2">
+            {uiTradeTypes.map(({ id, title, description, icon }) => {
+              const isSelected = type === id;
+
+              return (
+                <Menu.Item key={title}>
+                  {({ active }) => (
+                    <button
+                      onClick={() => setType(id)}
+                      className={classNames(
+                        "flex gap-3 rounded-lg py-2 px-3 transition-colors",
+                        { "bg-osmoverse-700": active || isSelected }
+                      )}
+                    >
+                      <div className="flex h-6 w-6 items-center justify-center">
+                        <Icon
+                          id={icon}
+                          className={classNames(
+                            "h-6 w-6 text-osmoverse-400 transition-colors",
+                            {
+                              "text-white-full": active || isSelected,
+                            }
+                          )}
+                        />
+                      </div>
+                      <div className="flex flex-col gap-1 text-left">
+                        <p>{title}</p>
+                        <small className="text-sm leading-5 text-osmoverse-300">
+                          {description}
+                        </small>
+                      </div>
+                    </button>
+                  )}
+                </Menu.Item>
+              );
+            })}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

packages/web/components/swap-tool/swap-tool-tabs.tsx

@@ -52,7 +52,7 @@ export const SwapToolTabs: FunctionComponent<SwapToolTabsProps> = ({
           >
             <p
               className={classNames("font-semibold", {
-                "text-osmoverse-100": !isActive,
+                "text-wosmongton-100": !isActive,
               })}
             >
               {tab.label}

packages/web/components/trade-tool/index.tsx

@@ -4,6 +4,7 @@ import { FunctionComponent, useMemo } from "react";
 import ClientOnly from "~/components/client-only";
 import { PlaceLimitTool } from "~/components/place-limit-tool";
 import { SwapTool } from "~/components/swap-tool";
+import OrderTypeSelector from "~/components/swap-tool/order-type-selector";
 import {
   SwapToolTab,
   SwapToolTabs,
@@ -23,7 +24,10 @@ export const TradeTool: FunctionComponent<TradeToolProps> = () => {
   return (
     <ClientOnly>
       <div className="relative flex flex-col gap-6 overflow-hidden md:gap-6 md:px-3 md:pb-4 md:pt-4">
-        <SwapToolTabs activeTab={tab} setTab={setTab} />
+        <div className="flex w-full items-center justify-between">
+          <SwapToolTabs activeTab={tab} setTab={setTab} />
+          {tab !== SwapToolTab.SWAP && <OrderTypeSelector />}
+        </div>
         {useMemo(() => {
           switch (tab) {
             case SwapToolTab.BUY:

packages/web/localizations/de.json

@@ -1130,6 +1130,18 @@
     "newer": "Neuere"
   },
   "place-limit": {
-    "reviewOrder": "Bestellung überprüfen"
+    "reviewOrder": "Bestellung überprüfen",
+    "marketOrder": {
+      "title": "Marktauftrag",
+      "description": "Sofort zum besten verfügbaren Preis kaufen"
+    },
+    "limitOrder": {
+      "title": "Limit-Auftrag",
+      "description": "Kaufen, wenn der Preis {denom} sinkt"
+    },
+    "recurringOrder": {
+      "title": "Wiederkehrende Bestellung",
+      "description": "Kaufen Sie zum Durchschnittspreis im Laufe der Zeit"
+    }
   }
 }

packages/web/localizations/en.json

@@ -1130,6 +1130,18 @@
     "newer": "Newer"
   },
   "place-limit": {
-    "reviewOrder": "Review Order"
+    "reviewOrder": "Review Order",
+    "marketOrder": {
+      "title": "Market Order",
+      "description": "Buy immediately at best available price"
+    },
+    "limitOrder": {
+      "title": "Limit Order",
+      "description": "Buy when {denom} price decreases"
+    },
+    "recurringOrder": {
+      "title": "Recurring Order",
+      "description": "Buy at average price over time"
+    }
   }
 }

packages/web/localizations/es.json

@@ -1130,6 +1130,18 @@
     "newer": "Más nuevo"
   },
   "place-limit": {
-    "reviewOrder": "Revisar orden"
+    "reviewOrder": "Revisar orden",
+    "marketOrder": {
+      "title": "Orden de mercado",
+      "description": "Compre inmediatamente al mejor precio disponible"
+    },
+    "limitOrder": {
+      "title": "Orden límite",
+      "description": "Compre cuando el precio {denom} baje"
+    },
+    "recurringOrder": {
+      "title": "Orden recurrente",
+      "description": "Compre a precio promedio a lo largo del tiempo"
+    }
   }
 }

packages/web/localizations/fa.json

@@ -1130,6 +1130,18 @@
     "newer": "جدیدتر"
   },
   "place-limit": {
-    "reviewOrder": "سفارش بررسی"
+    "reviewOrder": "سفارش بررسی",
+    "marketOrder": {
+      "title": "سفارش بازار",
+      "description": "بلافاصله با بهترین قیمت موجود خرید کنید"
+    },
+    "limitOrder": {
+      "title": "سفارش محدود",
+      "description": "زمانی که قیمت {denom} کاهش یابد، خرید کنید"
+    },
+    "recurringOrder": {
+      "title": "سفارش تکراری",
+      "description": "در طول زمان با قیمت متوسط خرید کنید"
+    }
   }
 }

packages/web/localizations/fr.json

@@ -1130,6 +1130,18 @@
     "newer": "Plus récent"
   },
   "place-limit": {
-    "reviewOrder": "Réviser la commande"
+    "reviewOrder": "Réviser la commande",
+    "marketOrder": {
+      "title": "Ordre du marché",
+      "description": "Achetez immédiatement au meilleur prix disponible"
+    },
+    "limitOrder": {
+      "title": "Ordre Limité",
+      "description": "Achetez lorsque le prix {denom} diminue"
+    },
+    "recurringOrder": {
+      "title": "Commande récurrente",
+      "description": "Acheter au prix moyen dans le temps"
+    }
   }
 }

packages/web/localizations/gu.json

@@ -1130,6 +1130,18 @@
     "newer": "નવું"
   },
   "place-limit": {
-    "reviewOrder": "રિવ્યૂ ઓર્ડર"
+    "reviewOrder": "રિવ્યૂ ઓર્ડર",
+    "marketOrder": {
+      "title": "માર્કેટ ઓર્ડર",
+      "description": "શ્રેષ્ઠ ઉપલબ્ધ ભાવે તરત જ ખરીદો"
+    },
+    "limitOrder": {
+      "title": "મર્યાદા ઓર્ડર",
+      "description": "જ્યારે {denom} કિંમત ઘટે ત્યારે ખરીદો"
+    },
+    "recurringOrder": {
+      "title": "રિકરિંગ ઓર્ડર",
+      "description": "સમય જતાં સરેરાશ કિંમતે ખરીદો"
+    }
   }
 }

packages/web/localizations/hi.json

@@ -1130,6 +1130,18 @@
     "newer": "नई"
   },
   "place-limit": {
-    "reviewOrder": "अादेश का पुनः निरिक्षण"
+    "reviewOrder": "अादेश का पुनः निरिक्षण",
+    "marketOrder": {
+      "title": "बाजार आदेश",
+      "description": "सर्वोत्तम उपलब्ध मूल्य पर तुरंत खरीदें"
+    },
+    "limitOrder": {
+      "title": "सीमा आदेश",
+      "description": "जब {denom} कीमत घट जाए तो खरीदें"
+    },
+    "recurringOrder": {
+      "title": "आवर्ती आदेश",
+      "description": "समय के साथ औसत कीमत पर खरीदें"
+    }
   }
 }

packages/web/localizations/ja.json

@@ -1130,6 +1130,18 @@
     "newer": "新しい"
   },
   "place-limit": {
-    "reviewOrder": "注文の確認"
+    "reviewOrder": "注文の確認",
+    "marketOrder": {
+      "title": "成行注文",
+      "description": "最安価格で今すぐご購入ください"
+    },
+    "limitOrder": {
+      "title": "指値注文",
+      "description": "{denom}価格が下がったら購入する"
+    },
+    "recurringOrder": {
+      "title": "定期注文",
+      "description": "時間の経過とともに平均価格で購入する"
+    }
   }
 }

packages/web/localizations/ko.json

@@ -1130,6 +1130,18 @@
     "newer": "최신"
   },
   "place-limit": {
-    "reviewOrder": "주문 검토"
+    "reviewOrder": "주문 검토",
+    "marketOrder": {
+      "title": "시장가 주문",
+      "description": "가장 좋은 가격으로 즉시 구매하세요"
+    },
+    "limitOrder": {
+      "title": "제한 주문",
+      "description": "{denom} 가격이 하락하면 구매하세요."
+    },
+    "recurringOrder": {
+      "title": "반복 주문",
+      "description": "시간이 지남에 따라 평균 가격으로 구매"
+    }
   }
 }

packages/web/localizations/pl.json

@@ -1130,6 +1130,18 @@
     "newer": "Nowsza"
   },
   "place-limit": {
-    "reviewOrder": "Przegląd zamówienia"
+    "reviewOrder": "Przegląd zamówienia",
+    "marketOrder": {
+      "title": "Porządek rynkowy",
+      "description": "Kup natychmiast po najlepszej dostępnej cenie"
+    },
+    "limitOrder": {
+      "title": "Zamówienie z limitem",
+      "description": "Kupuj, gdy cena {denom} spadnie"
+    },
+    "recurringOrder": {
+      "title": "Zamówienie powtarzające się",
+      "description": "Kupuj po średniej cenie na przestrzeni czasu"
+    }
   }
 }

packages/web/localizations/pt-br.json

@@ -1130,6 +1130,18 @@
     "newer": "Mais recente"
   },
   "place-limit": {
-    "reviewOrder": "Revisar pedido"
+    "reviewOrder": "Revisar pedido",
+    "marketOrder": {
+      "title": "Ordem de mercado",
+      "description": "Compre imediatamente ao melhor preço disponível"
+    },
+    "limitOrder": {
+      "title": "Ordem Limitada",
+      "description": "Compre quando o preço {denom} diminuir"
+    },
+    "recurringOrder": {
+      "title": "Pedido recorrente",
+      "description": "Compre pelo preço médio ao longo do tempo"
+    }
   }
 }

packages/web/localizations/ro.json

@@ -1130,6 +1130,18 @@
     "newer": "Mai nou"
   },
   "place-limit": {
-    "reviewOrder": "Verificați comanda"
+    "reviewOrder": "Verificați comanda",
+    "marketOrder": {
+      "title": "Ordinul pieței",
+      "description": "Cumpărați imediat la cel mai bun preț disponibil"
+    },
+    "limitOrder": {
+      "title": "Ordin limită",
+      "description": "Cumpărați când prețul {denom} scade"
+    },
+    "recurringOrder": {
+      "title": "Comandă recurentă",
+      "description": "Cumpărați la preț mediu în timp"
+    }
   }
 }