feat: implement query params state for tabs with new design

osmosis-labs · Jun 6, 2024 · 085f5f9 · 085f5f9
1 parent 49ba698
commit 085f5f9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 46 deletions.
diff --git a/packages/web/components/swap-tool/swap-tool-tabs.tsx b/packages/web/components/swap-tool/swap-tool-tabs.tsx
@@ -1,5 +1,7 @@
 import classNames from "classnames";
-import { FunctionComponent, useMemo } from "react";
+import { FunctionComponent } from "react";
+
+import { theme } from "~/tailwind.config";
 
 export enum SwapToolTab {
   SWAP = 0,
@@ -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 { parseAsInteger, 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,26 @@ 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", parseAsInteger.withDefault(0));
 
   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:
+              return (
+                <SwapTool useOtherCurrencies useQueryParams page="Swap Page" />
+              );
+          }
+        }, [tab])}
+      </div>
+    </ClientOnly>
   );
-});
+};