fix: do not run concurrent idb transactions

.test_patterns.yml

@@ -222,17 +222,6 @@ tests:
     owners:
       - *esau
 
-  # boxes
-  - regex: "BOX=vite BROWSER=webkit run_compose_test vite-webkit box boxes"
-    error_regex: "WARN: sequencer Too far into slot for INITIALIZING_PROPOSAL"
-    owners:
-      - *grego
-
-  - regex: "BOX=vanilla BROWSER=webkit run_compose_test vanilla-webkit box boxes"
-    error_regex: "Test timeout of 90000ms exceeded."
-    owners:
-      - *esau
-
   # kind tests
   - regex: "spartan/bootstrap.sh"
     # Will skip all kind tests for now. Too unstable, blocking merge queue.

yarn-project/kv-store/src/indexeddb/store.ts

@@ -1,6 +1,6 @@
 import type { Logger } from '@aztec/foundation/log';
 
-import { type DBSchema, type IDBPDatabase, deleteDB, openDB } from 'idb';
+import { type DBSchema, type IDBPDatabase, type IDBPTransaction, deleteDB, openDB } from 'idb';
 
 import type { AztecAsyncArray } from '../interfaces/array.js';
 import type { Key, StoreSize, Value } from '../interfaces/common.js';
@@ -40,6 +40,7 @@ export interface AztecIDBSchema extends DBSchema {
 export class AztecIndexedDBStore implements AztecAsyncKVStore {
   #rootDB: IDBPDatabase<AztecIDBSchema>;
   #name: string;
+  #currentTx?: IDBPTransaction<AztecIDBSchema, ['data'], 'readwrite'>;
 
   #containers = new Set<
     | IndexedDBAztecArray<any>
@@ -153,18 +154,24 @@ export class AztecIndexedDBStore implements AztecAsyncKVStore {
    * @returns A promise that resolves to the return value of the callback
    */
   async transactionAsync<T>(callback: () => Promise<T>): Promise<T> {
-    const tx = this.#rootDB.transaction('data', 'readwrite');
+    // We can only have one transaction at a time for the same store
+    // So we need to wait for the current one to finish
+    if (this.#currentTx) {
+      await this.#currentTx.done;
+    }
+    this.#currentTx = this.#rootDB.transaction('data', 'readwrite');
     for (const container of this.#containers) {
-      container.db = tx.store;
+      container.db = this.#currentTx.store;
     }
     // Avoid awaiting this promise so it doesn't get scheduled in the next microtask
     // By then, the tx would be closed
     const runningPromise = callback();
     // Wait for the transaction to finish
-    await tx.done;
+    await this.#currentTx.done;
     for (const container of this.#containers) {
       container.db = undefined;
     }
+
     // Return the result of the callback.
     // Tx is guaranteed to already be closed, so the await doesn't hurt anything here
     return await runningPromise;