[My Strategies] Add update indicator

e2e/tests/strategy/disposable/create.ts

@@ -44,6 +44,7 @@ export const create = (testCase: CreateStrategyTestCase) => {
     }
 
     await page.waitForURL('/', { timeout: 10_000 });
+    await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);
     // Verify strategy data
     const strategies = myStrategies.getAllStrategies();

e2e/tests/strategy/disposable/delete.ts

@@ -19,6 +19,7 @@ export const deleteStrategy = (testCase: CreateStrategyTestCase) => {
     await modal.waitFor({ state: 'detached' });
 
     const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(0);
   });

e2e/tests/strategy/disposable/deposit.ts

@@ -4,6 +4,7 @@ import {
   assertDisposableTestCase,
   CreateStrategyTestCase,
   EditStrategyDriver,
+  MyStrategyDriver,
 } from '../../../utils/strategy';
 import { TokenApprovalDriver } from '../../../utils/TokenApprovalDriver';
 import { waitForTenderlyRpc } from '../../../utils/tenderly';
@@ -22,9 +23,11 @@ export const deposit = (testCase: CreateStrategyTestCase) => {
     await edit.waitForPage('disposable', 'deposit');
     await edit.waitForWallet();
     await edit.fillDisposableBudget('deposit');
-
     await edit.submit('deposit');
+
     await page.waitForURL('/', { timeout: 20_000 });
+    const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);
 
     await expect(strategy.budget(direction)).toHaveText(output);

e2e/tests/strategy/disposable/duplicate.ts

@@ -33,9 +33,10 @@ export const duplicate = (testCase: CreateStrategyTestCase) => {
     await createForm.submit();
 
     await page.waitForURL('/', { timeout: 10_000 });
+    const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);
 
-    const myStrategies = new MyStrategyDriver(page);
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(2);
 

e2e/tests/strategy/disposable/edit.ts

@@ -4,6 +4,7 @@ import {
   assertDisposableTestCase,
   CreateStrategyTestCase,
   EditStrategyDriver,
+  MyStrategyDriver,
 } from '../../../utils/strategy';
 import { TokenApprovalDriver } from '../../../utils/TokenApprovalDriver';
 import { waitForTenderlyRpc } from '../../../utils/tenderly';
@@ -23,7 +24,10 @@ export const editPrice = (testCase: CreateStrategyTestCase) => {
     await edit.fillDisposablePrice('editPrices');
 
     await edit.submit('editPrices');
+
+    const myStrategies = new MyStrategyDriver(page);
     await page.waitForURL('/', { timeout: 10_000 });
+    await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);
 
     const tooltip = await strategy.priceTooltip(direction);

e2e/tests/strategy/disposable/withdraw.ts

@@ -5,6 +5,7 @@ import {
   assertDisposableTestCase,
   CreateStrategyTestCase,
   EditStrategyDriver,
+  MyStrategyDriver,
 } from '../../../utils/strategy';
 import { TokenApprovalDriver } from '../../../utils/TokenApprovalDriver';
 import { waitForTenderlyRpc } from '../../../utils/tenderly';
@@ -26,9 +27,11 @@ export const withdraw = (testCase: CreateStrategyTestCase) => {
     const edit = new EditStrategyDriver(page, testCase);
     await edit.waitForPage('disposable', 'withdraw');
     await edit.fillDisposableBudget('withdraw');
-
     await edit.submit('withdraw');
+
     await page.waitForURL('/', { timeout: 20_000 });
+    const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);
 
     await expect(strategy.budget(direction)).toHaveText(output);

e2e/tests/strategy/overlapping/create.ts

@@ -41,6 +41,7 @@ export const create = (testCase: CreateStrategyTestCase) => {
     await createForm.submit();
     await tokenApproval.checkApproval([base, quote]);
     await page.waitForURL('/', { timeout: 10_000 });
+    await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);
 
     // Verify strategy data

e2e/tests/strategy/overlapping/deposit.ts

@@ -32,6 +32,7 @@ export const deposit = (testCase: CreateStrategyTestCase) => {
 
     // Verify strategy data
     const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(1);
     const strategy = await myStrategies.getStrategy(1);

e2e/tests/strategy/overlapping/duplicate.ts

@@ -31,9 +31,10 @@ export const duplicate = (testCase: CreateStrategyTestCase) => {
     await createForm.submit();
 
     await page.waitForURL('/', { timeout: 10_000 });
+    const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);
 
-    const myStrategies = new MyStrategyDriver(page);
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(2);
 

e2e/tests/strategy/overlapping/edit.ts

@@ -38,9 +38,11 @@ export const editPrice = (testCase: CreateStrategyTestCase) => {
 
     // Verify strategy data
     const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(1);
     const strategy = await myStrategies.getStrategy(1);
+
     await expect(strategy.pair()).toHaveText(`${base}/${quote}`);
     await expect(strategy.status()).toHaveText('Active');
     await expect(strategy.totalBudget()).toHaveText(output.totalFiat);

e2e/tests/strategy/overlapping/withdraw.ts

@@ -32,6 +32,7 @@ export const withdraw = (testCase: CreateStrategyTestCase) => {
 
     // Verify strategy data
     const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(1);
     const strategy = await myStrategies.getStrategy(1);

e2e/tests/strategy/recurring/create.ts

@@ -45,6 +45,7 @@ export const createRecurringStrategy = (testCase: CreateStrategyTestCase) => {
     await waitForTenderlyRpc(page);
 
     // Verify strategy data
+    myStrategies.waitForUpdates();
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(1);
     const strategy = await myStrategies.getStrategy(1);

e2e/tests/strategy/recurring/delete.ts

@@ -19,6 +19,7 @@ export const deleteStrategyTest = (testCase: CreateStrategyTestCase) => {
     await modal.waitFor({ state: 'detached' });
 
     const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(0);
   });

e2e/tests/strategy/recurring/deposit.ts

@@ -4,6 +4,7 @@ import {
   assertRecurringTestCase,
   CreateStrategyTestCase,
   EditStrategyDriver,
+  MyStrategyDriver,
 } from '../../../utils/strategy';
 import { TokenApprovalDriver } from '../../../utils/TokenApprovalDriver';
 import { waitForTenderlyRpc } from '../../../utils/tenderly';
@@ -26,6 +27,9 @@ export const depositStrategyTest = (testCase: CreateStrategyTestCase) => {
     await page.waitForURL('/', { timeout: 20_000 });
     await waitForTenderlyRpc(page);
 
+    const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
+
     await expect(strategy.budget('buy')).toHaveText(buy);
     await expect(strategy.budget('sell')).toHaveText(sell);
   });

e2e/tests/strategy/recurring/duplicate.ts

@@ -35,6 +35,7 @@ export const duplicateStrategyTest = (testCase: CreateStrategyTestCase) => {
     await waitForTenderlyRpc(page);
 
     const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(2);
 

e2e/tests/strategy/recurring/edit.ts

@@ -27,6 +27,7 @@ export const editPriceStrategyTest = (testCase: CreateStrategyTestCase) => {
     await waitForTenderlyRpc(page);
 
     const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     const strategyEdited = await myStrategies.getStrategy(1);
 
     // Check range

e2e/tests/strategy/recurring/pause.ts

@@ -2,7 +2,10 @@ import { expect, test } from '@playwright/test';
 import { waitModalOpen } from './../../../utils/modal';
 import { Page } from 'playwright-core';
 import { ManageStrategyDriver } from './../../../utils/strategy/ManageStrategyDriver';
-import { CreateStrategyTestCase } from '../../../utils/strategy';
+import {
+  CreateStrategyTestCase,
+  MyStrategyDriver,
+} from '../../../utils/strategy';
 import { TokenApprovalDriver } from '../../../utils/TokenApprovalDriver';
 
 export const pauseStrategy = async (
@@ -18,6 +21,9 @@ export const pauseStrategy = async (
   await modal.getByTestId('pause-strategy-btn').click();
   await modal.waitFor({ state: 'detached' });
 
+  const myStrategies = new MyStrategyDriver(page);
+  await myStrategies.waitForUpdates();
+
   await expect(strategy.status()).toHaveText('Inactive');
 
   return { strategy, manage };

e2e/tests/strategy/recurring/renew.ts

@@ -19,12 +19,14 @@ export const renewStrategyTest = (testCase: CreateStrategyTestCase) => {
     await edit.waitForPage('recurring', 'renew');
     await edit.fillRecurringPrice('renew');
     await edit.submit('renew');
+
     await page.waitForURL('/', { timeout: 10_000 });
+    const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);
+    const strategyEdited = await myStrategies.getStrategy(1);
 
     await expect(strategy.status()).toHaveText('Active');
-    const myStrategies = new MyStrategyDriver(page);
-    const strategyEdited = await myStrategies.getStrategy(1);
 
     // Check range
     const { buy, sell } = testCase.output.editPrices;

e2e/tests/strategy/recurring/undercut.ts

@@ -32,8 +32,9 @@ export const undercutStrategyTest = (testCase: CreateStrategyTestCase) => {
     await createForm.submit();
 
     await page.waitForURL('/', { timeout: 10_000 });
-
     const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
+
     const strategies = myStrategies.getAllStrategies();
     await expect(strategies).toHaveCount(2);
 

e2e/tests/strategy/recurring/withdraw.ts

@@ -5,6 +5,7 @@ import {
   assertRecurringTestCase,
   CreateStrategyTestCase,
   EditStrategyDriver,
+  MyStrategyDriver,
 } from '../../../utils/strategy';
 import { TokenApprovalDriver } from '../../../utils/TokenApprovalDriver';
 import { waitForTenderlyRpc } from '../../../utils/tenderly';
@@ -29,6 +30,8 @@ export const withdrawStrategyTest = (testCase: CreateStrategyTestCase) => {
 
     await edit.submit('withdraw');
     await page.waitForURL('/', { timeout: 20_000 });
+    const myStrategies = new MyStrategyDriver(page);
+    await myStrategies.waitForUpdates();
     await waitForTenderlyRpc(page);
 
     await expect(strategy.budget('buy')).toHaveText(buy);

e2e/utils/strategy/MyStrategyDriver.ts

@@ -17,6 +17,14 @@ type ManageStrategyID =
 export class MyStrategyDriver {
   constructor(private page: Page) {}
 
+  async waitForUpdates(timeout = 2_000) {
+    try {
+      const indicator = this.page.getByTestId('fetch-strategies');
+      await indicator.waitFor({ state: 'attached', timeout });
+      return indicator.waitFor({ state: 'detached', timeout });
+    } catch {}
+  }
+
   firstStrategy() {
     return this.page.getByTestId('first-strategy');
   }

src/pages/strategies/index.tsx

@@ -60,7 +60,14 @@ export const StrategiesPage = () => {
             <StrategyPageTitleWidget showFilter={showFilter} />
           </header>
         )}
-
+        {/* Hidden tag to target in E2E */}
+        {query.isFetching && (
+          <div
+            className="pointer-events-none fixed opacity-0"
+            aria-hidden="true"
+            data-testid="fetch-strategies"
+          ></div>
+        )}
         {user ? <Outlet /> : <WalletConnect />}
       </StrategyProvider>
     </Page>