[Limit Orders]: Intro Toast

packages/web/components/alert/limit-orders-toast.tsx

@@ -0,0 +1,152 @@
+import { Transition } from "@headlessui/react";
+import classNames from "classnames";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { parseAsString, useQueryState } from "nuqs";
+import { Fragment } from "react";
+import { useLocalStorage } from "react-use";
+
+import { Icon } from "~/components/assets";
+import { Pill } from "~/components/indicators/pill";
+import { ArrowButton, IconButton } from "~/components/ui/button";
+import { Breakpoint, useTranslation, useWindowSize } from "~/hooks";
+import { useOrderbook } from "~/hooks/limit-orders/use-orderbook";
+
+export const LimitOrdersFloatingBannerDoNotShowKey =
+  "limit-orders-floating-banner-do-not-show";
+
+export function LimitOrdersToast() {
+  const { t } = useTranslation();
+  const [from] = useQueryState("from", parseAsString.withDefault("OSMO"));
+  const router = useRouter();
+  const [doNotShowAgain, setDoNotShowAgain] = useLocalStorage(
+    LimitOrdersFloatingBannerDoNotShowKey,
+    false
+  );
+  const { isMobile } = useWindowSize(Breakpoint.sm);
+
+  const { orderbook } = useOrderbook({ baseDenom: from, quoteDenom: "USDC" });
+
+  const fromDenom = orderbook ? from : "OSMO";
+  const quoteDenom = "USDC";
+
+  const onClose = () => {
+    setDoNotShowAgain(true);
+  };
+
+  return (
+    <Transition
+      appear
+      as={Fragment}
+      show={!doNotShowAgain}
+      enter="transform transition duration-300 ease-inOutBack"
+      enterFrom="translate-x-[130%]"
+      enterTo="translate-x-0 translate-y-0"
+      leave="transform transition duration-300 ease-inOutBack"
+      leaveFrom="translate-x-0 translate-y-0"
+      leaveTo="translate-x-[120%]"
+    >
+      <div
+        className={classNames(
+          "fixed bottom-8 right-8 z-50 w-fit cursor-pointer overflow-hidden rounded-5xl bg-osmoverse-800 ",
+          "sm:left-1/2 sm:right-auto sm:w-[90vw] sm:-translate-x-1/2 sm:transform sm:rounded-2xl"
+        )}
+        onClick={() => {
+          router.push(
+            `/?tab=buy&from=${fromDenom}&quote=${quoteDenom}&type=limit`
+          );
+          onClose();
+        }}
+      >
+        <div
+          className={classNames(
+            "relative flex items-center gap-6 pr-3",
+            "sm:gap-3 sm:py-4 sm:pl-3"
+          )}
+        >
+          <Image
+            src="/images/limit-orders-intro.svg"
+            alt="limit orders intro"
+            width={136}
+            height={136}
+            className={classNames("sm:hidden")}
+          />
+
+          <Image
+            src="/images/limit-orders-intro-small.svg"
+            alt="limit orders intro"
+            width={40}
+            height={40}
+            className={classNames("mr-3 hidden", "sm:block")}
+          />
+
+          <div
+            className={classNames(
+              "mr-3 flex flex-col gap-2",
+              "sm:mr-0 sm:w-full sm:flex-row"
+            )}
+          >
+            <Pill
+              className={classNames(
+                "!px-2",
+                "sm:order-2 sm:self-center sm:py-1 sm:text-caption"
+              )}
+            >
+              {t("oneClickTrading.floatingBanner.newPill")}
+            </Pill>
+
+            <div
+              className={classNames(
+                "flex flex-col gap-2",
+                "sm:order-1 sm:flex-1 sm:gap-0"
+              )}
+            >
+              <h1
+                className={classNames(
+                  "flex-shrink-0 text-h6 font-h6",
+                  "sm:text-subtitle1 sm:font-subtitle1"
+                )}
+              >
+                {t("limitOrders.floatingBanner.title")}
+              </h1>
+              <ArrowButton
+                className={classNames(
+                  "text-subtitle1 font-subtitle1",
+                  "sm:text-left sm:text-caption sm:font-caption"
+                )}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClose();
+                }}
+              >
+                {t("limitOrders.floatingBanner.tryLimitOrders")}
+              </ArrowButton>
+            </div>
+          </div>
+
+          <IconButton
+            aria-label="Close"
+            variant="default"
+            size={null}
+            className={classNames(
+              "group mr-0.5 mt-3 h-8 w-8 flex-shrink-0 self-start !rounded-full bg-osmoverse-600",
+              "sm:mt-0 sm:h-6 sm:w-6 sm:self-center"
+            )}
+            icon={
+              <Icon
+                id="close-thin"
+                className="ml-[1px] text-osmoverse-800 transition-colors duration-200 group-hover:text-osmoverse-100"
+                width={isMobile ? 16 : 24}
+                height={isMobile ? 16 : 24}
+              />
+            }
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose();
+            }}
+          />
+        </div>
+      </div>
+    </Transition>
+  );
+}

packages/web/localizations/de.json

@@ -1173,6 +1173,10 @@
     "newer": "Neuere"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "Wählen Sie Ihren Preis",
+      "tryLimitOrders": "Versuchen Sie es mit Limit-Orders"
+    },
     "historyTable": {
       "columns": {
         "order": "Befehl",

packages/web/localizations/en.json

@@ -1173,6 +1173,10 @@
     "newer": "Newer"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "Pick your price",
+      "tryLimitOrders": "Try limit orders"
+    },
     "historyTable": {
       "columns": {
         "order": "Order",

packages/web/localizations/es.json

@@ -1173,6 +1173,10 @@
     "newer": "Más nuevo"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "Elige tu precio",
+      "tryLimitOrders": "Pruebe las órdenes limitadas"
+    },
     "historyTable": {
       "columns": {
         "order": "Orden",

packages/web/localizations/fa.json

@@ -1173,6 +1173,10 @@
     "newer": "جدیدتر"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "قیمت خود را انتخاب کنید",
+      "tryLimitOrders": "سفارشات محدود را امتحان کنید"
+    },
     "historyTable": {
       "columns": {
         "order": "سفارش",

packages/web/localizations/fr.json

@@ -1173,6 +1173,10 @@
     "newer": "Plus récent"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "Choisissez votre prix",
+      "tryLimitOrders": "Essayez les ordres limités"
+    },
     "historyTable": {
       "columns": {
         "order": "Commande",

packages/web/localizations/gu.json

@@ -1173,6 +1173,10 @@
     "newer": "નવું"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "તમારી કિંમત પસંદ કરો",
+      "tryLimitOrders": "મર્યાદા ઓર્ડરનો પ્રયાસ કરો"
+    },
     "historyTable": {
       "columns": {
         "order": "ઓર્ડર",

packages/web/localizations/hi.json

@@ -1173,6 +1173,10 @@
     "newer": "नई"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "अपना मूल्य चुनें",
+      "tryLimitOrders": "सीमा आदेश आज़माएँ"
+    },
     "historyTable": {
       "columns": {
         "order": "आदेश",

packages/web/localizations/ja.json

@@ -1173,6 +1173,10 @@
     "newer": "新しい"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "価格を選択してください",
+      "tryLimitOrders": "指値注文を試す"
+    },
     "historyTable": {
       "columns": {
         "order": "注文",

packages/web/localizations/ko.json

@@ -1173,6 +1173,10 @@
     "newer": "최신"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "가격을 선택하세요",
+      "tryLimitOrders": "제한 주문을 시도해 보세요"
+    },
     "historyTable": {
       "columns": {
         "order": "주문하다",

packages/web/localizations/pl.json

@@ -1173,6 +1173,10 @@
     "newer": "Nowsza"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "Wybierz swoją cenę",
+      "tryLimitOrders": "Wypróbuj zlecenia limitowane"
+    },
     "historyTable": {
       "columns": {
         "order": "Zamówienie",

packages/web/localizations/pt-br.json

@@ -1173,6 +1173,10 @@
     "newer": "Mais recente"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "Escolha seu preço",
+      "tryLimitOrders": "Experimente ordens limitadas"
+    },
     "historyTable": {
       "columns": {
         "order": "Ordem",

packages/web/localizations/ro.json

@@ -1173,6 +1173,10 @@
     "newer": "Mai nou"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "Alege-ți prețul",
+      "tryLimitOrders": "Încercați comenzi limită"
+    },
     "historyTable": {
       "columns": {
         "order": "Ordin",

packages/web/localizations/ru.json

@@ -1173,6 +1173,10 @@
     "newer": "Новее"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "Выберите свою цену",
+      "tryLimitOrders": "Попробуйте лимитные ордера"
+    },
     "historyTable": {
       "columns": {
         "order": "Заказ",

packages/web/localizations/tr.json

@@ -1173,6 +1173,10 @@
     "newer": "Daha yeni"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "Fiyatınızı seçin",
+      "tryLimitOrders": "Limit emirlerini deneyin"
+    },
     "historyTable": {
       "columns": {
         "order": "Emir",

packages/web/localizations/zh-cn.json

@@ -1173,6 +1173,10 @@
     "newer": "较新"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "选择您的价格",
+      "tryLimitOrders": "尝试限价订单"
+    },
     "historyTable": {
       "columns": {
         "order": "命令",

packages/web/localizations/zh-hk.json

@@ -1173,6 +1173,10 @@
     "newer": "較新"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "選擇您的價格",
+      "tryLimitOrders": "嘗試限價訂單"
+    },
     "historyTable": {
       "columns": {
         "order": "命令",

packages/web/localizations/zh-tw.json

@@ -1173,6 +1173,10 @@
     "newer": "較新"
   },
   "limitOrders": {
+    "floatingBanner": {
+      "title": "選擇您的價格",
+      "tryLimitOrders": "嘗試限價訂單"
+    },
     "historyTable": {
       "columns": {
         "order": "命令",

packages/web/pages/_app.tsx

@@ -24,14 +24,18 @@ import {
 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Bounce, ToastContainer } from "react-toastify";
+import { useLocalStorage } from "react-use";
 import { WagmiProvider } from "wagmi";
 
+import {
+  LimitOrdersFloatingBannerDoNotShowKey,
+  LimitOrdersToast,
+} from "~/components/alert/limit-orders-toast";
 import { Icon } from "~/components/assets";
 import { ErrorFallback } from "~/components/error/error-fallback";
 import { Pill } from "~/components/indicators/pill";
 import { MainLayout } from "~/components/layouts";
 import { MainLayoutMenu } from "~/components/main-menu";
-import { OneClickToast } from "~/components/one-click-trading/one-click-trading-toast";
 import { AmplitudeEvent, EventName } from "~/config";
 import { wagmiConfig } from "~/config/wagmi";
 import {
@@ -322,6 +326,11 @@ const MainLayoutWrapper: FunctionComponent<{
     },
   ];
 
+  const [doNotShowLimitOrdersBanner] = useLocalStorage(
+    LimitOrdersFloatingBannerDoNotShowKey,
+    false
+  );
+
   return (
     <MainLayout menus={menus} secondaryMenuItems={secondaryMenuItems}>
       {children}
@@ -342,9 +351,9 @@ const MainLayoutWrapper: FunctionComponent<{
       {flags.oneClickTrading && (
         <>
           <OneClickTradingIntroModal />
-          <OneClickToast />
         </>
       )}
+      {flags.limitOrders && !doNotShowLimitOrdersBanner && <LimitOrdersToast />}
     </MainLayout>
   );
 });