feat: add token switch on Trade page (#5583)

* feat: simplify CellGroup component

* feat: add token switch to Trade page

Author: therealemjy

.changeset/slimy-windows-sleep.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": minor
+---
+
+add token switch to Trade page

apps/evm/src/components/CellGroup/index.tsx

@@ -5,7 +5,7 @@ import { Cell, type CellProps } from '../Cell';
 
 export type { CellProps } from '../Cell';
 
-export type CellGroupVariant = 'primary' | 'secondary' | 'tertiary';
+export type CellGroupVariant = 'primary' | 'secondary';
 
 export interface CellGroupProps {
   cells: CellProps[];
@@ -21,13 +21,10 @@ export const CellGroup: React.FC<CellGroupProps> = ({
 }) => (
   <Card
     className={cn(
-      'min-w-0 border-0',
+      'min-w-0 border-0 p-0 gap-4 md:gap-x-6',
       variant === 'primary' &&
-        'p-4 grid grid-cols-2 rounded-xl gap-4 sm:flex sm:flex-wrap sm:gap-0 sm:px-6 sm:py-4',
-      variant === 'secondary' &&
-        'p-0 flex overflow-x-auto overflow-y-hidden scrollbar-hidden bg-transparent sm:p-0 md:p-0 xl:p-0',
-      variant === 'tertiary' &&
-        'gap-2 bg-transparent p-0 grid grid-cols-2 sm:p-0 xl:bg-cards xl:flex xl:p-6 xl:flex-wrap xl:rounded-xl xl:gap-x-0',
+        'flex overflow-x-auto overflow-y-hidden scrollbar-hidden bg-transparent',
+      variant === 'secondary' && 'grid grid-cols-2 xl:flex xl:flex-wrap xl:rounded-xl',
       className,
     )}
     {...containerProps}
@@ -36,14 +33,7 @@ export const CellGroup: React.FC<CellGroupProps> = ({
       <Cell
         key={`cell-group-item-${cell.label}`}
         {...cell}
-        className={cn(
-          'shrink-0 xl:bg-transparent',
-          variant === 'primary' && 'sm:px-6 sm:first-of-type:pl-0 sm:last-of-type:pr-0',
-          variant === 'secondary' && 'px-4 md:px-6 first-of-type:pl-0 last-of-type:pr-0',
-          variant === 'tertiary' &&
-            'bg-cards rounded-xl p-4 xl:py-0 xl:px-6 xl:rounded-none xl:first-of-type:pl-0 xl:last-of-type:pr-0',
-          cell.className,
-        )}
+        className={cn('shrink-0 xl:bg-transparent', cell.className)}
       />
     ))}
   </Card>

apps/evm/src/components/Icon/icons/index.ts

@@ -96,3 +96,4 @@ export { default as protectionShield } from './protectionShield';
 export { default as resilientOracle } from './resilientOracle';
 export { default as sunset } from './sunset';
 export { default as fullScreen } from './fullScreen';
+export { default as switch } from './switch';

apps/evm/src/components/Icon/icons/switch.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react';
+
+const SvgSwitch = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 6.83331H1L4.14286 3.83331"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4 9.83331H15L11.8571 12.8333"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SvgSwitch;

apps/evm/src/containers/Layout/Header/MarketInfo/index.tsx

@@ -212,7 +212,7 @@ export const MarketInfo = () => {
             ...cell,
             className: 'p-0 bg-transparent',
           }))}
-          variant="tertiary"
+          variant="secondary"
           className="xl:p-0 xl:bg-transparent"
         />
       </Wrapper>

apps/evm/src/pages/Dashboard/Markets/Positions/Summary/index.tsx

@@ -140,8 +140,8 @@ export const Summary: React.FC<SummaryProps> = ({
       <div className="space-y-4 md:space-y-6 xl:hidden">
         <CellGroup
           cells={displayAccountHealth ? cells.slice(0, cells.length - 1) : cells}
-          variant="tertiary"
-          className={cn('gap-3', displayAccountHealth ? 'sm:grid-cols-3' : 'sm:grid-cols-2')}
+          variant="secondary"
+          className={cn(displayAccountHealth ? 'sm:grid-cols-3' : 'sm:grid-cols-2')}
         />
 
         {displayAccountHealth && <Cell {...cells[cells.length - 1]} className={cellClassName} />}
@@ -152,7 +152,6 @@ export const Summary: React.FC<SummaryProps> = ({
         <CellGroup
           cells={displayAccountHealth ? cells.slice(0, cells.length - 1) : cells}
           className="w-full xl:p-0"
-          variant="secondary"
         />
 
         {/* Account health */}

apps/evm/src/pages/Dashboard/Overview/index.tsx

@@ -312,7 +312,7 @@ export const Overview: React.FC<OverviewProps> = ({ ...otherProps }) => {
         disabled={!accountAddress}
         onClick={toggleAccordion}
       >
-        <CellGroup variant="secondary" cells={graphCells} />
+        <CellGroup cells={graphCells} />
 
         {shouldShowAccountBreakdown && (
           <div className="flex items-center gap-x-3" data-testid={testIds.performanceChartPreview}>

apps/evm/src/pages/Dashboard/Vaults/index.tsx

@@ -82,7 +82,7 @@ export const Vaults: React.FC<VaultsProps> = ({ vaults }) => {
 
   return (
     <>
-      <CellGroup variant="secondary" cells={overviewCells} className="mb-6" />
+      <CellGroup cells={overviewCells} className="mb-6" />
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 2xl:grid-cols-3">
         {filteredVaults.map(vault => (
           <VaultCardSimplified vault={vault} key={vault.key} />

apps/evm/src/pages/Markets/Header/index.tsx

@@ -29,7 +29,6 @@ export const Header: React.FC<HeaderProps> = ({ pool, className }) => {
 
         <PoolStats
           pools={[pool]}
-          variant="secondary"
           className="xl:w-auto"
           stats={['supply', 'borrow', 'liquidity', 'assetCount']}
         />

apps/evm/src/pages/Trade/PairInfo/__tests__/index.spec.tsx

@@ -31,6 +31,7 @@ vi.mock('../../useTokenPair', () => ({
 
 const longTokenSelectTestId = 'pair-info-long-token-select';
 const shortTokenSelectTestId = 'pair-info-short-token-select';
+const switchTokensButtonTestId = 'pair-info-switch-tokens-button';
 
 const defaultLongAsset = poolData[0].assets[2];
 const defaultShortAsset = poolData[0].assets[3];
@@ -209,4 +210,15 @@ describe('PairInfo', () => {
       [SHORT_TOKEN_ADDRESS_PARAM_KEY]: defaultLongToken.address,
     });
   });
+
+  it('updates search params when switching the selected tokens', async () => {
+    renderPairInfo();
+
+    fireEvent.click(screen.getByTestId(switchTokensButtonTestId));
+
+    await expectUpdatedSearchParams({
+      [LONG_TOKEN_ADDRESS_PARAM_KEY]: defaultShortToken.address,
+      [SHORT_TOKEN_ADDRESS_PARAM_KEY]: defaultLongToken.address,
+    });
+  });
 });