feat(e2e): add mint-to-public tests with balance assertion

xorsal · claude · xorsal · commit 7c739b3dc400 · 2026-01-10T19:49:43.000-03:00
Add two E2E test scenarios using @wonderland/walletless:
- Walletless MetaMask: simulates MetaMask wallet connection and minting
- Embedded wallet: uses "Create New Account" button for minting

Both tests assert that public balance increases after minting.

Also add simulation before sending transactions to catch revert reasons
early in useWriteContract hook.

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/src/hooks/contracts/useWriteContract.ts b/src/hooks/contracts/useWriteContract.ts
@@ -175,6 +175,30 @@ export const useWriteContract = (options: UseWriteContractOptions = {}) => {
           }
 
           const tx = method(...(args as unknown[]));
+
+          // Simulate first to catch revert reasons before sending
+          console.log(
+            `[useWriteContract] Simulating ${String(functionName)}...`
+          );
+          try {
+            const simulateResult = await (
+              tx as { simulate: (opts: unknown) => Promise<unknown> }
+            ).simulate({ from: account.getAddress() });
+            console.log(
+              `[useWriteContract] Simulation successful:`,
+              simulateResult
+            );
+          } catch (simErr) {
+            const simErrorMsg =
+              simErr instanceof Error ? simErr.message : 'Simulation failed';
+            console.error(
+              `[useWriteContract] Simulation failed for ${String(functionName)}:`,
+              simErr
+            );
+            setError(simErrorMsg);
+            return { success: false, error: `Simulation failed: ${simErrorMsg}` };
+          }
+
           const sentTx = (
             tx as {
               send: (opts: unknown) => {
diff --git a/src/hooks/mutations/useDripper.ts b/src/hooks/mutations/useDripper.ts
@@ -72,6 +72,14 @@ export const useDripper = (options: UseDripperOptions = {}) => {
         throw new Error('Account not available');
       }
 
+      // Simulate first to catch revert reasons before sending
+      console.log('[useDripper] Simulating drip_to_public...', {
+        dripperAddress,
+        tokenAddress,
+        amount: amount.toString(),
+        account: account.getAddress().toString(),
+      });
+
       const result = await writeContract({
         contract: DripperContract,
         address: dripperAddress,
@@ -80,9 +88,11 @@ export const useDripper = (options: UseDripperOptions = {}) => {
       });
 
       if (!result.success) {
+        console.error('[useDripper] drip_to_public failed:', result.error);
         throw new Error(result.error ?? 'drip_to_public failed');
       }
 
+      console.log('[useDripper] drip_to_public success:', result);
       invalidateBalance();
     },
     onSuccess: () => options.onDripToPublicSuccess?.(),
diff --git a/tests/e2e/mint-to-public.spec.ts b/tests/e2e/mint-to-public.spec.ts
@@ -0,0 +1,313 @@
+/**
+ * E2E Test: Mint to Public Balance
+ *
+ * Tests the minting functionality for both:
+ * 1. Walletless (MetaMask simulation via @wonderland/walletless)
+ * 2. Embedded wallet (Create New Account)
+ *
+ * Completion criteria: Public balance increases after minting
+ */
+
+import { test, expect, ANVIL_ACCOUNTS } from './fixtures/walletless';
+import { test as baseTest } from '@playwright/test';
+
+const MINT_AMOUNT = '1';
+const SANDBOX_CONNECTION_TIMEOUT = 120000;
+const WALLET_OPERATION_TIMEOUT = 120000;
+
+/**
+ * Helper to clear browser storage before each test
+ */
+async function clearBrowserStorage(page: import('@playwright/test').Page) {
+  await page.goto('/');
+  await page.evaluate(async () => {
+    const dbs = await indexedDB.databases();
+    for (const db of dbs) {
+      if (db.name) indexedDB.deleteDatabase(db.name);
+    }
+    localStorage.clear();
+    sessionStorage.clear();
+  });
+}
+
+/**
+ * Helper to connect to sandbox network
+ */
+async function connectToSandbox(page: import('@playwright/test').Page) {
+  // Click "Connect Wallet" to open modal
+  const connectBtn = page.locator('.wallet-connect-button');
+  await expect(connectBtn).toBeVisible({ timeout: 30000 });
+  await connectBtn.click();
+
+  // Wait for modal
+  const modal = page.locator('.modal-content');
+  await expect(modal).toBeVisible({ timeout: 5000 });
+
+  // Select sandbox network
+  const networkSelect = page.locator('#modal-network-selector');
+  await networkSelect.selectOption('sandbox');
+
+  // Wait for network connection
+  const networkStatus = page.locator('.network-status');
+  await expect(networkStatus).toContainText('connected', {
+    timeout: SANDBOX_CONNECTION_TIMEOUT,
+  });
+
+  return modal;
+}
+
+/**
+ * Helper to get current public balance from the UI
+ */
+async function getPublicBalance(
+  page: import('@playwright/test').Page
+): Promise<bigint> {
+  // Wait for balance card to be visible
+  const balanceCard = page.locator('.token-balance-card');
+  await expect(balanceCard).toBeVisible({ timeout: 30000 });
+
+  // Wait for loading to complete
+  const loadingSpinner = page.locator('.balance-loading');
+  if (await loadingSpinner.isVisible()) {
+    await expect(loadingSpinner).not.toBeVisible({ timeout: 60000 });
+  }
+
+  // Get the public balance value
+  const publicBalanceItem = page.locator('.balance-item').filter({
+    has: page.locator('.balance-label:has-text("Public")'),
+  });
+
+  const balanceValue = publicBalanceItem.locator('.balance-value');
+  await expect(balanceValue).toBeVisible({ timeout: 10000 });
+
+  const balanceText = await balanceValue.textContent();
+  return BigInt(balanceText?.trim() || '0');
+}
+
+/**
+ * Helper to wait for balance to sync after minting
+ */
+async function waitForBalanceSync(
+  page: import('@playwright/test').Page,
+  expectedMinimum: bigint,
+  timeout = 60000
+): Promise<bigint> {
+  const startTime = Date.now();
+
+  while (Date.now() - startTime < timeout) {
+    const balance = await getPublicBalance(page);
+    if (balance >= expectedMinimum) {
+      return balance;
+    }
+    // Wait a bit before checking again
+    await page.waitForTimeout(2000);
+
+    // Check if there's a refetch happening
+    const refetchBadge = page.locator('.balance-refetch-badge');
+    if (await refetchBadge.isVisible()) {
+      await expect(refetchBadge).not.toBeVisible({ timeout: 30000 });
+    }
+  }
+
+  throw new Error(
+    `Balance did not reach expected minimum ${expectedMinimum} within ${timeout}ms`
+  );
+}
+
+/**
+ * Helper to mint tokens to public balance
+ */
+async function mintToPublic(
+  page: import('@playwright/test').Page,
+  amount: string
+) {
+  // Wait for dripper form to be visible
+  const dripperContent = page.locator('.dripper-content');
+  await expect(dripperContent).toBeVisible({ timeout: 60000 });
+
+  // Wait for contracts to load (loading spinner should disappear)
+  const loadingSpinner = dripperContent.locator('.animate-spin');
+  if (await loadingSpinner.isVisible()) {
+    await expect(loadingSpinner).not.toBeVisible({ timeout: 120000 });
+  }
+
+  // Enter amount
+  const amountInput = page.locator('#amount');
+  await expect(amountInput).toBeVisible({ timeout: 10000 });
+  await expect(amountInput).toBeEnabled({ timeout: 10000 });
+  await amountInput.fill(amount);
+
+  // Select public drip type
+  const dripTypeSelect = page.locator('#drip-type');
+  await expect(dripTypeSelect).toBeEnabled({ timeout: 10000 });
+  await dripTypeSelect.selectOption('public');
+
+  // Find the drip button - look for button with btn-primary class containing "Drip"
+  const dripButton = page.locator('button.btn-primary').filter({
+    hasText: /Drip to public/i,
+  });
+  await expect(dripButton).toBeVisible({ timeout: 10000 });
+  await expect(dripButton).toBeEnabled({ timeout: 30000 });
+
+  // Log button state before clicking
+  const buttonText = await dripButton.textContent();
+  console.log('Drip button text before click:', buttonText);
+
+  // Click the drip button
+  await dripButton.click();
+  console.log('Drip button clicked');
+
+  // Wait for transaction to process - button text changes to "Processing..."
+  // Use a polling approach since the state change might be very quick
+  const startTime = Date.now();
+  let sawProcessing = false;
+
+  while (Date.now() - startTime < WALLET_OPERATION_TIMEOUT) {
+    const currentText = await dripButton.textContent();
+
+    if (currentText?.includes('Processing')) {
+      sawProcessing = true;
+      console.log('Transaction processing...');
+    }
+
+    // Check if processing is done (back to "Drip to")
+    if (sawProcessing && currentText?.includes('Drip to')) {
+      console.log('Transaction completed');
+      break;
+    }
+
+    // Also check for success notification - indicates transaction completed
+    const successNotification = page.locator('.error-item.info');
+    if (await successNotification.isVisible()) {
+      const notifText = await successNotification.textContent();
+      if (notifText?.includes('Successfully minted')) {
+        console.log('Success notification appeared:', notifText);
+        break;
+      }
+    }
+
+    await page.waitForTimeout(500);
+  }
+}
+
+test.describe('Mint to Public - Walletless (MetaMask)', () => {
+  test.beforeEach(async ({ page }) => {
+    await clearBrowserStorage(page);
+  });
+
+  test('should mint tokens to public balance via walletless MetaMask', async ({
+    page,
+    walletless,
+  }) => {
+    console.log('\n=== E2E: Mint to Public via Walletless ===\n');
+    console.log('Test account:', walletless.account.address);
+
+    // Navigate to app
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Connect to sandbox and open modal
+    const modal = await connectToSandbox(page);
+    console.log('Sandbox connected');
+
+    // Click MetaMask connect button
+    const metamaskBtn = modal.locator('button:has-text("MetaMask")');
+    await expect(metamaskBtn).toBeEnabled({ timeout: 10000 });
+    await metamaskBtn.click();
+    console.log('MetaMask button clicked, waiting for wallet connection...');
+
+    // Wait for modal to close (connection complete)
+    await expect(modal).not.toBeVisible({ timeout: WALLET_OPERATION_TIMEOUT });
+    console.log('Wallet connected');
+
+    // Wait for account section to be visible
+    const accountSection = page.locator('.connected-account-section');
+    await expect(accountSection).toBeVisible({
+      timeout: WALLET_OPERATION_TIMEOUT,
+    });
+
+    // Get initial public balance
+    const initialBalance = await getPublicBalance(page);
+    console.log('Initial public balance:', initialBalance.toString());
+
+    // Mint tokens to public balance
+    console.log(`Minting ${MINT_AMOUNT} tokens to public balance...`);
+    await mintToPublic(page, MINT_AMOUNT);
+    console.log('Mint transaction submitted');
+
+    // Wait for balance to increase
+    const expectedMinBalance = initialBalance + BigInt(MINT_AMOUNT);
+    const finalBalance = await waitForBalanceSync(page, expectedMinBalance);
+    console.log('Final public balance:', finalBalance.toString());
+
+    // Assert balance increased
+    expect(finalBalance).toBeGreaterThanOrEqual(expectedMinBalance);
+    console.log(
+      `Balance increased by ${(finalBalance - initialBalance).toString()} tokens`
+    );
+
+    console.log('\n=== TEST PASSED ===\n');
+  });
+});
+
+// Use base test (without walletless fixture) for embedded wallet test
+baseTest.describe('Mint to Public - Embedded Wallet (Create New Account)', () => {
+  baseTest.beforeEach(async ({ page }) => {
+    await clearBrowserStorage(page);
+  });
+
+  baseTest(
+    'should mint tokens to public balance via embedded wallet',
+    async ({ page }) => {
+      console.log('\n=== E2E: Mint to Public via Embedded Wallet ===\n');
+
+      // Navigate to app
+      await page.goto('/');
+      await page.waitForLoadState('networkidle');
+
+      // Connect to sandbox and open modal
+      const modal = await connectToSandbox(page);
+      console.log('Sandbox connected');
+
+      // Click "Create New Account" button
+      const createAccountBtn = modal.locator(
+        'button:has-text("Create New Account")'
+      );
+      await expect(createAccountBtn).toBeEnabled({ timeout: 10000 });
+      await createAccountBtn.click();
+      console.log('Create New Account clicked, waiting for account creation...');
+
+      // Wait for modal to close (account creation complete)
+      await expect(modal).not.toBeVisible({ timeout: WALLET_OPERATION_TIMEOUT });
+      console.log('Account created and connected');
+
+      // Wait for account section to be visible
+      const accountSection = page.locator('.connected-account-section');
+      await expect(accountSection).toBeVisible({
+        timeout: WALLET_OPERATION_TIMEOUT,
+      });
+
+      // Get initial public balance (should be 0 for new account)
+      const initialBalance = await getPublicBalance(page);
+      console.log('Initial public balance:', initialBalance.toString());
+
+      // Mint tokens to public balance
+      console.log(`Minting ${MINT_AMOUNT} tokens to public balance...`);
+      await mintToPublic(page, MINT_AMOUNT);
+      console.log('Mint transaction submitted');
+
+      // Wait for balance to increase
+      const expectedMinBalance = initialBalance + BigInt(MINT_AMOUNT);
+      const finalBalance = await waitForBalanceSync(page, expectedMinBalance);
+      console.log('Final public balance:', finalBalance.toString());
+
+      // Assert balance increased
+      expect(finalBalance).toBeGreaterThanOrEqual(expectedMinBalance);
+      console.log(
+        `Balance increased by ${(finalBalance - initialBalance).toString()} tokens`
+      );
+
+      console.log('\n=== TEST PASSED ===\n');
+    }
+  );
+});
