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/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

@@ -12,16 +12,16 @@ const SvgSwitch = (props: SVGProps<SVGSVGElement>) => (
     <path
       d="M12 6.83331H1L4.14286 3.83331"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M4 9.83331H15L11.8571 12.8333"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );

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,
+    });
+  });
 });

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

@@ -2,7 +2,7 @@ import { cn } from '@venusprotocol/ui';
 import BigNumber from 'bignumber.js';
 import { useSearchParams } from 'react-router';
 
-import { Apy, CellGroup, type CellProps } from 'components';
+import { Apy, CellGroup, type CellProps, Icon } from 'components';
 import { PLACEHOLDER_KEY } from 'constants/placeholders';
 import { useTranslation } from 'libs/translations';
 import type { Asset, Token } from 'types';
@@ -52,6 +52,13 @@ export const PairInfo: React.FC<PairInfoProps> = ({ changePercentage, priceCents
         : longToken.address,
     }));
 
+  const switchSelectedTokens = () =>
+    setSearchParams(currentSearchParams => ({
+      ...Object.fromEntries(currentSearchParams),
+      [SHORT_TOKEN_ADDRESS_PARAM_KEY]: longToken.address,
+      [LONG_TOKEN_ADDRESS_PARAM_KEY]: shortToken.address,
+    }));
+
   const {
     data: { borrowAssets, supplyAssets },
   } = useGetTradeAssets();
@@ -184,6 +191,15 @@ export const PairInfo: React.FC<PairInfoProps> = ({ changePercentage, priceCents
               </p>
             )}
           </div>
+
+          <button
+            type="button"
+            className="cursor-pointer text-light-grey hover:text-blue"
+            onClick={switchSelectedTokens}
+            data-testid="pair-info-switch-tokens-button"
+          >
+            <Icon name="switch" className="text-inherit transition-colors" />
+          </button>
         </div>
 
         <div className="overflow-hidden">