Merge pull request #1492 from bancorprotocol/issue-#1445

Update strategy selection on edit prices page

src/components/strategies/edit/EditPriceNav.tsx

@@ -1,64 +1,79 @@
-import { useEditStrategyCtx } from './EditStrategyContext';
 import { Link, useParams } from '@tanstack/react-router';
+import { ReactComponent as IconDisposable } from 'assets/icons/disposable.svg';
+import { ReactComponent as IconRecurring } from 'assets/icons/recurring.svg';
+import { ReactComponent as IconOverlapping } from 'assets/icons/overlapping.svg';
+import { Tooltip } from 'components/common/tooltip/Tooltip';
+import { useEditStrategyCtx } from 'components/strategies/edit/EditStrategyContext';
 import {
   EditTypes,
   toDisposablePricesSearch,
   toOverlappingPricesSearch,
   toRecurringPricesSearch,
 } from 'libs/routing/routes/strategyEdit';
-import { ReactComponent as IconDisposable } from 'assets/icons/disposable.svg';
-import { ReactComponent as IconRecurring } from 'assets/icons/recurring.svg';
-import { ReactComponent as IconOverlapping } from 'assets/icons/overlapping.svg';
-import { FC } from 'react';
 
-interface Props {
-  editType: EditTypes;
-}
-export const EditPriceNav: FC<Props> = ({ editType }) => {
+const links = [
+  {
+    label: 'Limit / Range',
+    svg: <IconDisposable className="hidden size-14 md:inline" />,
+    to: '/strategies/edit/$strategyId/prices/disposable',
+    text: 'Buy or sell at a specific price, or gradually scale in or out of a position.',
+    id: 'disposable',
+  },
+  {
+    label: 'Recurring',
+    svg: <IconRecurring className="hidden size-14 md:inline" />,
+    to: '/strategies/edit/$strategyId/prices/recurring',
+    text: 'Create an automated trading cycle of buy low/sell high with two separate orders.',
+    id: 'recurring',
+  },
+  {
+    label: 'Concentrated',
+    svg: <IconOverlapping className="hidden size-14 md:inline" />,
+    to: '/strategies/edit/$strategyId/prices/overlapping',
+    text: 'Buy and sell within custom parameters with custom fee tier and auto-compounding fees.',
+    id: 'overlapping',
+  },
+] as const;
+
+export const EditPriceNav = ({ editType }: { editType: EditTypes }) => {
   const params = useParams({ from: '/strategies/edit/$strategyId' });
-  const isDisposable = window.location.pathname.includes('disposable');
-  const isRecurring = window.location.pathname.includes('recurring');
-  const isOverlapping = window.location.pathname.includes('overlapping');
+  const pathName = window.location.pathname;
+  const priceSearchFn = {
+    disposable: toDisposablePricesSearch,
+    recurring: toRecurringPricesSearch,
+    overlapping: toOverlappingPricesSearch,
+  };
+
   const { strategy } = useEditStrategyCtx();
   if (editType !== 'editPrices' && editType !== 'renew') return;
+
   return (
-    <nav
-      className="border-background-900 text-14 flex gap-4 rounded-full border-2 p-6"
-      aria-label="Switch between type of strategy"
-    >
-      <Link
-        className="aria-current-page:bg-white/10 aria-current-page:text-white flex flex-1 items-center justify-center gap-8 rounded-full bg-transparent py-4 text-center text-white/60 hover:text-white/80"
-        to="/strategies/edit/$strategyId/prices/disposable"
-        search={toDisposablePricesSearch(strategy, editType)}
-        params={params}
-        replace={true}
-        aria-current={isDisposable ? 'page' : 'false'}
-      >
-        <IconDisposable className="hidden size-14 md:inline" />
-        Limit / Range
-      </Link>
-      <Link
-        className="aria-current-page:bg-white/10 aria-current-page:text-white flex flex-1 items-center justify-center gap-8 rounded-full bg-transparent py-4 text-center text-white/60 hover:text-white/80"
-        to="/strategies/edit/$strategyId/prices/recurring"
-        search={toRecurringPricesSearch(strategy, editType)}
-        params={params}
-        replace={true}
-        aria-current={isRecurring ? 'page' : 'false'}
-      >
-        <IconRecurring className="hidden size-14 md:inline" />
-        Recurring
-      </Link>
-      <Link
-        className="aria-current-page:bg-white/10 aria-current-page:text-white flex flex-1 items-center justify-center gap-8 rounded-full bg-transparent py-4 text-center text-white/60 hover:text-white/80"
-        to="/strategies/edit/$strategyId/prices/overlapping"
-        search={toOverlappingPricesSearch(strategy, editType)}
-        params={params}
-        replace={true}
-        aria-current={isOverlapping ? 'page' : 'false'}
+    <article className="bg-background-900 grid gap-20 rounded p-20">
+      <h2 id="edit-strategy-nav" className="text-18">
+        Trading Strategy
+      </h2>
+      <nav
+        aria-labelledby="edit-strategy-nav"
+        className="text-14 grid grid-cols-1 gap-8 md:grid-cols-2"
+        aria-label="Switch between type of strategy"
       >
-        <IconOverlapping className="hidden size-14 md:inline" />
-        Concentrated
-      </Link>
-    </nav>
+        {links.map((link) => (
+          <Link
+            key={link.id}
+            to={link.to}
+            search={priceSearchFn[link.id](strategy, editType)}
+            params={params}
+            replace={true}
+            aria-current={pathName.includes(link.id) ? 'page' : 'false'}
+            data-testid={`edit-${link.id}`}
+            className="rounded-8 hover:border-background-400 flex items-center justify-center gap-8 border border-transparent bg-black p-8 text-white/60 aria-[current=page]:border-white aria-[current=page]:text-white"
+          >
+            {link.svg}
+            {link.label}
+            <Tooltip element={link.text} iconClassName="size-14" />
+          </Link>
+        ))}
+      </nav>
+    </article>
   );
 };

src/components/trade/TradeNav.tsx

@@ -5,7 +5,7 @@ import { ReactComponent as IconMarket } from 'assets/icons/market.svg';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { Link, TradeSearch, useRouterState } from 'libs/routing';
 
-export const links = [
+const links = [
   {
     label: 'Limit / Range',
     svg: <IconDisposable className="hidden size-14 md:inline" />,
@@ -46,7 +46,7 @@ export const TradeNav = () => {
       </h2>
       <nav
         aria-labelledby="trading-strateg-nav"
-        className="text-14 grid grid-cols-2 gap-8"
+        className="text-14 grid grid-cols-1 gap-8 md:grid-cols-2"
       >
         {links.map((link) => (
           <Link