Merge remote-tracking branch 'origin/main' into issue-#1300

e2e/pages/trade.spec.ts

@@ -6,6 +6,87 @@ import { TradeDriver } from '../utils/TradeDriver';
 import { navigateTo } from '../utils/operators';
 import { TokenApprovalDriver } from '../utils/TokenApprovalDriver';
 import { waitForTenderlyRpc } from '../utils/tenderly';
+import { TradeTestCase } from '../utils/trade/types';
+import { NotificationDriver } from '../utils/NotificationDriver';
+
+const testCases: TradeTestCase[] = [
+  {
+    mode: 'buy' as const,
+    source: 'USDC',
+    target: 'ETH',
+    swaps: [
+      {
+        sourceValue: '100',
+        targetValue: '0.059554032010090174',
+      },
+    ],
+  },
+  {
+    mode: 'sell' as const,
+    source: 'USDC',
+    target: 'USDT',
+    isLimitedApproval: true,
+    swaps: [
+      {
+        sourceValue: '10',
+        targetValue: '10.004888',
+      },
+      {
+        sourceValue: '10',
+        targetValue: '10.004863',
+      },
+      {
+        sourceValue: '10',
+        targetValue: '10.004838',
+      },
+    ],
+  },
+  {
+    mode: 'sell' as const,
+    source: 'USDC',
+    target: 'USDT',
+    swaps: [
+      {
+        sourceValue: '10',
+        targetValue: '10.004888',
+      },
+      {
+        sourceValue: '10',
+        targetValue: '10.004863',
+      },
+    ],
+  },
+  {
+    mode: 'sell' as const,
+    source: 'ETH',
+    target: 'USDC',
+    swaps: [
+      {
+        sourceValue: '0.005',
+        targetValue: '7.939455',
+      },
+      {
+        sourceValue: '0.005',
+        targetValue: '7.93526',
+      },
+    ],
+  },
+];
+
+const testDescription = (testCase: TradeTestCase) => {
+  const { mode, source, target, isLimitedApproval } = testCase;
+
+  const numSwaps = testCase.swaps.length;
+  const nameSwapSuffix = numSwaps > 1 ? ` ${numSwaps} times` : '';
+  const approvalSuffix = isLimitedApproval ? ' with limited approval ' : '';
+
+  const testName =
+    mode === 'buy'
+      ? `Buy ${target} with ${source}`
+      : `Sell ${source} for ${target}`;
+
+  return testName + nameSwapSuffix + approvalSuffix;
+};
 
 test.describe('Trade', () => {
   test.beforeEach(async ({ page }, testInfo) => {
@@ -22,74 +103,75 @@ test.describe('Trade', () => {
     await removeFork(testInfo);
   });
 
-  const testCases = [
-    {
-      mode: 'buy' as const,
-      source: 'USDC',
-      target: 'ETH',
-      sourceValue: '100',
-      targetValue: '0.059554032010090174',
-    },
-    {
-      mode: 'sell' as const,
-      source: 'USDC',
-      target: 'USDT',
-      sourceValue: '100',
-      targetValue: '100.047766',
-    },
-  ];
-
   for (const testCase of testCases) {
-    const { mode, source, target, sourceValue, targetValue } = testCase;
-    const testName =
-      mode === 'buy'
-        ? `Buy ${target} with ${source}`
-        : `Sell ${source} for ${target}`;
+    const { source, target, swaps, isLimitedApproval } = testCase;
+
+    const testName = testDescription(testCase);
 
     test(testName, async ({ page }) => {
       // Store current balance
       const debug = new DebugDriver(page);
-      const balance = {
-        source: await debug.getBalance(testCase.source).textContent(),
-        target: await debug.getBalance(testCase.target).textContent(),
+      const initialBalance = {
+        source: await debug.getBalance(source).textContent(),
+        target: await debug.getBalance(target).textContent(),
       };
 
       // Test Trade
       await navigateTo(page, '/trade?*');
       const driver = new TradeDriver(page, testCase);
+      const tokenApproval = new TokenApprovalDriver(page);
 
       // Select pair
       await driver.selectPair();
-      await driver.setPay();
-      await expect(driver.getReceiveInput()).toHaveValue(targetValue);
 
-      // Verify routing
-      const routing = await driver.openRouting();
-      await expect(routing.getSource()).toHaveValue(sourceValue);
-      await expect(routing.getTarget()).toHaveValue(targetValue);
-      await routing.close();
+      for (const swap of swaps) {
+        const { sourceValue, targetValue } = swap;
 
-      await driver.submit();
-      await waitForTenderlyRpc(page);
+        await driver.setPay(swap);
+        await expect(driver.getReceiveInput()).toHaveValue(targetValue);
 
-      // Token approval
-      const tokenApproval = new TokenApprovalDriver(page);
-      await tokenApproval.checkApproval([testCase.source]);
+        // Verify routing
+        const routing = await driver.openRouting();
+        await expect(routing.getSource()).toHaveValue(sourceValue);
+        await expect(routing.getTarget()).toHaveValue(targetValue);
+        await routing.close();
+
+        await driver.submit();
+        await waitForTenderlyRpc(page);
+
+        // Token approval
+        await tokenApproval.checkApproval([source], isLimitedApproval);
+
+        // Verify form empty
+        await driver.awaitSuccess();
+        expect(driver.getPayInput()).toHaveValue('');
+        expect(driver.getReceiveInput()).toHaveValue('');
 
-      // Verify form empty
-      await driver.awaitSuccess();
-      expect(driver.getPayInput()).toHaveValue('');
-      expect(driver.getReceiveInput()).toHaveValue('');
+        const notificationDriver = new NotificationDriver(page);
+        await notificationDriver.closeAll();
+      }
 
-      // Check balance diff
+      // Check balance diff after all swaps
       await navigateTo(page, '/debug');
 
-      const sourceDelta = Number(balance.source) - Number(testCase.sourceValue);
+      const { sourceValue, targetValue } = swaps.reduce(
+        (acc, swapValues) => {
+          return {
+            sourceValue: acc.sourceValue + Number(swapValues.sourceValue),
+            targetValue: acc.targetValue + Number(swapValues.targetValue),
+          };
+        },
+        {
+          sourceValue: 0,
+          targetValue: 0,
+        }
+      );
+      const sourceDelta = Number(initialBalance.source) - Number(sourceValue);
       const nextSource = new RegExp(sourceDelta.toString());
-      await expect(debug.getBalance(testCase.source)).toHaveText(nextSource);
-      const targetDelta = Number(balance.target) + Number(testCase.targetValue);
+      await expect(debug.getBalance(source)).toHaveText(nextSource);
+      const targetDelta = Number(initialBalance.target) + Number(targetValue);
       const nextTarget = new RegExp(targetDelta.toString());
-      await expect(debug.getBalance(testCase.target)).toHaveText(nextTarget);
+      await expect(debug.getBalance(target)).toHaveText(nextTarget);
     });
   }
 });

e2e/utils/TokenApprovalDriver.ts

@@ -5,20 +5,22 @@ import { waitFor } from './operators';
 export class TokenApprovalDriver {
   private approvedTokens = ['ETH'];
   constructor(private page: Page) {}
-  async checkApproval(tokens: string[]) {
+  async checkApproval(tokens: string[], limitedApproval?: boolean) {
     if (tokens.every((token) => this.approvedTokens.includes(token))) return;
     const modal = await waitModalOpen(this.page);
     for (const token of tokens) {
       if (token === 'ETH') {
         const msg = modal.getByTestId(`msg-${token}`);
         await expect(msg).toHaveText('Pre-Approved');
       } else {
+        if (limitedApproval)
+          await modal.getByTestId(`approve-limited-${token}`).click();
         await modal.getByTestId(`approve-${token}`).click();
         const msg = await waitFor(this.page, `msg-${token}`, 20000);
         await expect(msg).toHaveText('Approved');
       }
     }
-    this.approvedTokens.push(...tokens);
+    if (!limitedApproval) this.approvedTokens.push(...tokens);
     await modal.getByTestId('approve-submit').click();
   }
 }

e2e/utils/TradeDriver.ts

@@ -2,15 +2,8 @@
 import { Page } from '@playwright/test';
 import { waitFor } from './operators';
 import { closeModal, waitModalClose, waitModalOpen } from './modal';
-import { Direction, debugTokens } from './types';
-
-interface TradeTestCase {
-  mode: Direction;
-  source: string;
-  target: string;
-  sourceValue: string;
-  targetValue: string;
-}
+import { debugTokens } from './types';
+import { TestCaseSwap, TradeTestCase } from './trade/types';
 
 export class TradeDriver {
   public form = this.page.getByTestId(`${this.testCase.mode}-form`);
@@ -38,8 +31,8 @@ export class TradeDriver {
     await waitModalClose(this.page);
   }
 
-  setPay() {
-    const { sourceValue } = this.testCase;
+  setPay(swap: TestCaseSwap) {
+    const { sourceValue } = swap;
     return this.form.getByLabel('You Pay').fill(sourceValue);
   }
 

e2e/utils/trade/types.ts

@@ -0,0 +1,14 @@
+import { DebugTokens, Direction } from '../types';
+
+export type TestCaseSwap = {
+  sourceValue: string;
+  targetValue: string;
+};
+
+export type TradeTestCase = {
+  mode: Direction;
+  source: DebugTokens;
+  target: DebugTokens;
+  isLimitedApproval?: boolean;
+  swaps: TestCaseSwap[];
+};

src/components/activity/ActivityNotification.tsx

@@ -11,9 +11,14 @@ import style from './ActivityNotification.module.css';
 interface Props {
   notification: NotificationActivity;
   close: () => void;
+  onClick?: () => void;
 }
 
-export const ActivityNotification: FC<Props> = ({ notification, close }) => {
+export const ActivityNotification: FC<Props> = ({
+  notification,
+  close,
+  onClick,
+}) => {
   const titleId = useId();
   const { activity } = notification;
 
@@ -31,6 +36,7 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
         </hgroup>
         <Link
           to="/strategy/$id"
+          onClick={onClick}
           params={{ id: activity.strategy.id }}
           className="font-weight-500 flex items-center"
         >

src/components/common/approval/ApproveToken.tsx

@@ -201,6 +201,7 @@ export const ApproveToken: FC<Props> = ({
                   isOn={!isLimited}
                   setIsOn={handleLimitChange}
                   size="sm"
+                  data-testid={`approve-limited-${token.symbol}`}
                 />
               </div>
 

src/components/core/menu/mainMenu/MainMenuRightBurger/MenuItem.tsx

@@ -5,7 +5,7 @@ import { cn } from 'utils/helpers';
 type MenuItemProps = {
   item: {
     onClick?: Function;
-    content: string | ReactElement;
+    content?: string | ReactElement;
     hasSubMenu?: boolean;
     disableHoverEffect?: boolean;
     className?: string;

src/components/core/menu/mainMenu/MainMenuRightBurger/index.tsx

@@ -15,7 +15,9 @@ export const MainMenuRightBurger: FC<{
     menuMapping,
   });
 
-  const currentMenuItems = menuContext.top()?.items;
+  const currentMenuItems = menuContext
+    .top()
+    ?.items.filter((item) => !!item.content);
 
   return (
     <DropdownMenu

src/components/core/menu/mainMenu/MainMenuRightBurger/useBurgerMenuItems.tsx

@@ -10,7 +10,7 @@ import { ReactComponent as IconV } from 'assets/icons/v.svg';
 
 export type MenuItemType = {
   subMenu?: MenuType;
-  content: string | ReactElement;
+  content?: string | ReactElement;
   onClick?: Function;
   postClickAction?: MenuItemActions;
 };
@@ -43,7 +43,7 @@ export const useBurgerMenuItems = () => {
       ),
     },
     {
-      content: (
+      content: externalLinks.analytics && (
         <NewTabLink className="flex" to={externalLinks.analytics}>
           Analytics
         </NewTabLink>
@@ -157,21 +157,21 @@ export const useBurgerMenuItems = () => {
       ),
     },
     {
-      content: (
+      content: externalLinks.simulatorRepo && (
         <NewTabLink className="flex" to={externalLinks.simulatorRepo}>
           Simulator Repo
         </NewTabLink>
       ),
     },
     {
-      content: (
+      content: externalLinks.interactiveSim && (
         <NewTabLink className="flex" to={externalLinks.interactiveSim}>
           Interactive Simulator
         </NewTabLink>
       ),
     },
     {
-      content: (
+      content: externalLinks.duneDashboard && (
         <NewTabLink className="flex" to={externalLinks.duneDashboard}>
           Dune Dashboard
         </NewTabLink>

src/components/strategies/UserMarketPrice.tsx

@@ -23,7 +23,7 @@ interface MarketPriceProps {
 }
 /** Use external market price or user price */
 export const useUserMarketPrice = ({ base, quote }: MarketPriceProps) => {
-  const externalMarketPrice = useMarketPrice({ base, quote });
+  const { marketPrice: externalMarketPrice } = useMarketPrice({ base, quote });
   const userMarketPrice = useContext(UserMarketContext);
   return userMarketPrice || externalMarketPrice;
 };

src/components/strategies/common/InputBudget.tsx

@@ -63,11 +63,9 @@ export const InputBudget: FC<Props> = (props) => {
   };
 
   const setMax = () => {
-    if (max === value) return;
-    if (max) {
-      const balanceValue = new SafeDecimal(max).toFixed(token.decimals);
-      props.onChange(balanceValue);
-    }
+    if (!max || max === value) return;
+    const maxBudget = new SafeDecimal(max).toFixed(token.decimals);
+    props.onChange(maxBudget);
   };
 
   return (