Merge pull request #3307 from osmosis-labs/fabryscript/limit-tool-tab…

…-system Use query params for limit tool tabs and implement new designs
osmosis-labs · Jun 7, 2024 · 92cf3b0 · 92cf3b0
2 parents 49ba698 + ece8c83
commit 92cf3b0
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 49 deletions.
diff --git a/packages/web/components/swap-tool/swap-tool-tabs.tsx b/packages/web/components/swap-tool/swap-tool-tabs.tsx
@@ -1,10 +1,12 @@
 import classNames from "classnames";
-import { FunctionComponent, useMemo } from "react";
+import { FunctionComponent } from "react";
+
+import { theme } from "~/tailwind.config";
 
 export enum SwapToolTab {
-  SWAP = 0,
-  BUY = 1,
-  SELL = 2,
+  SWAP = "swap",
+  BUY = "buy",
+  SELL = "sell",
 }
 
 export interface SwapToolTabsProps {
@@ -16,14 +18,17 @@ const tabs = [
   {
     label: "Buy",
     value: SwapToolTab.BUY,
+    color: theme.colors.bullish[400],
   },
   {
     label: "Sell",
     value: SwapToolTab.SELL,
+    color: theme.colors.rust[400],
   },
   {
     label: "Swap",
     value: SwapToolTab.SWAP,
+    color: theme.colors.ammelia[400],
   },
 ];
 
@@ -38,31 +43,26 @@ export const SwapToolTabs: FunctionComponent<SwapToolTabsProps> = ({
   setTab,
   activeTab,
 }) => {
-  // Renders each tab as a button, providing a highlight on the current `activeTab`
-  const Tabs = useMemo(() => {
-    return tabs.map((tab) => {
-      const isActive = activeTab === tab.value;
-      return (
-        <button
-          key={`swap-tab-${tab.value}`}
-          onClick={() => setTab(tab.value)}
-          className={classNames(
-            "text-subtitle6 justify-center rounded-[16px] border-2 py-[12px] text-center font-subtitle1 transition-all duration-75",
-            {
-              "border-bullish-600 bg-osmoverse-850 text-bullish-300": isActive,
-              "border-osmoverse-900 text-osmoverse-400": !isActive,
-            }
-          )}
-        >
-          {tab.label}
-        </button>
-      );
-    });
-  }, [setTab, activeTab]);
-
   return (
-    <div className="grid grid-cols-3 rounded-[16px] bg-osmoverse-900 transition-opacity">
-      {Tabs}
+    <div className="flex items-center">
+      {tabs.map((tab) => {
+        const isActive = activeTab === tab.value;
+        return (
+          <button
+            key={`swap-tab-${tab.value}`}
+            onClick={() => setTab(tab.value)}
+            className={classNames("px-3 py-2", {
+              "!pl-0": tab.value === SwapToolTab.BUY,
+              "text-osmoverse-500": !isActive,
+            })}
+            style={{
+              color: isActive ? tab.color : undefined,
+            }}
+          >
+            <h6 className="leading-6">{tab.label}</h6>
+          </button>
+        );
+      })}
     </div>
   );
 };
diff --git a/packages/web/components/trade-tool/index.tsx b/packages/web/components/trade-tool/index.tsx
@@ -1,6 +1,7 @@
-import { observer } from "mobx-react-lite";
-import { FunctionComponent, useMemo, useState } from "react";
+import { parseAsStringEnum, useQueryState } from "nuqs";
+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 {
@@ -11,25 +12,32 @@ import { OrderDirection } from "~/hooks/limit-orders";
 
 export interface TradeToolProps {}
 
-export const TradeTool: FunctionComponent<TradeToolProps> = observer(() => {
-  const [tab, setTab] = useState<SwapToolTab>(SwapToolTab.BUY);
+export const TradeTool: FunctionComponent<TradeToolProps> = () => {
+  const [tab, setTab] = useQueryState(
+    "tab",
+    parseAsStringEnum<SwapToolTab>(Object.values(SwapToolTab)).withDefault(
+      SwapToolTab.SWAP
+    )
+  );
 
   return (
-    <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} />
-      {useMemo(() => {
-        switch (tab) {
-          case SwapToolTab.BUY:
-            return <PlaceLimitTool orderDirection={OrderDirection.Bid} />;
-          case SwapToolTab.SELL:
-            return <PlaceLimitTool orderDirection={OrderDirection.Ask} />;
-          case SwapToolTab.SWAP:
-          default:
-            return (
-              <SwapTool useOtherCurrencies useQueryParams page="Swap Page" />
-            );
-        }
-      }, [tab])}
-    </div>
+    <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} />
+        {useMemo(() => {
+          switch (tab) {
+            case SwapToolTab.BUY:
+              return <PlaceLimitTool orderDirection={OrderDirection.Bid} />;
+            case SwapToolTab.SELL:
+              return <PlaceLimitTool orderDirection={OrderDirection.Ask} />;
+            case SwapToolTab.SWAP:
+            default:
+              return (
+                <SwapTool useOtherCurrencies useQueryParams page="Swap Page" />
+              );
+          }
+        }, [tab])}
+      </div>
+    </ClientOnly>
   );
-});
+};