diff --git a/packages/web/components/swap-tool/swap-tool-tabs.tsx b/packages/web/components/swap-tool/swap-tool-tabs.tsx index f373046e36..775e74e23b 100644 --- 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 = ({ 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 ( - - ); - }); - }, [setTab, activeTab]); - return ( -
- {Tabs} +
+ {tabs.map((tab) => { + const isActive = activeTab === tab.value; + return ( + + ); + })}
); }; diff --git a/packages/web/components/trade-tool/index.tsx b/packages/web/components/trade-tool/index.tsx index 9f9cc45bde..456ede6707 100644 --- 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 = observer(() => { - const [tab, setTab] = useState(SwapToolTab.BUY); +export const TradeTool: FunctionComponent = () => { + const [tab, setTab] = useQueryState( + "tab", + parseAsStringEnum(Object.values(SwapToolTab)).withDefault( + SwapToolTab.SWAP + ) + ); return ( -
- - {useMemo(() => { - switch (tab) { - case SwapToolTab.BUY: - return ; - case SwapToolTab.SELL: - return ; - case SwapToolTab.SWAP: - default: - return ( - - ); - } - }, [tab])} -
+ +
+ + {useMemo(() => { + switch (tab) { + case SwapToolTab.BUY: + return ; + case SwapToolTab.SELL: + return ; + case SwapToolTab.SWAP: + default: + return ( + + ); + } + }, [tab])} +
+
); -}); +};