fix:add indexdb storage (#1339)

* fix: add new indexdb storage replacement for localstorage

* fix: add indexdb storage

* fix: test improvement

* fix: test should validate when we don't use indexDB or localStorage

* fix: mock native implementation in fixtures

* fix: web mocks platform should be web

* fix: remove unused import

* fix: catching transaction exceptions, prevent unhandled exceptions

* fix: no longer needed

* fix: remove fakeIndexDB from fixtures

Author: elribonazo

packages/sdk-multichain/package.json

@@ -35,6 +35,7 @@
     "@types/ws": "^8.18.1",
     "@vitest/coverage-v8": "^3.2.4",
     "esbuild-plugin-umd-wrapper": "^3.0.0",
+    "fake-indexeddb": "^6.0.1",
     "jsdom": "^26.1.0",
     "nock": "^14.0.4",
     "prettier": "^3.3.3",

packages/sdk-multichain/src/fixtures.test.ts

@@ -1,10 +1,10 @@
 /** biome-ignore-all lint/suspicious/noExplicitAny: Tests require it */
+/** biome-ignore-all lint/suspicious/noAsyncPromiseExecutor: ok for tests */
 /** biome-ignore-all lint/style/noNonNullAssertion: Tests require it */
 /**
  * Test fixtures and utilities for the Multichain SDK tests
  * This file is excluded from test discovery via vitest.config.ts
  */
-
 // Additional imports for standardized setup functions
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { JSDOM as Page } from 'jsdom';
@@ -19,6 +19,7 @@ import { createMetamaskSDK as createMetamaskSDKWeb } from './index.browser';
 import { createMetamaskSDK as createMetamaskSDKRN } from './index.native';
 import { createMetamaskSDK as createMetamaskSDKNode } from './index.node';
 import * as nodeStorage from './store/adapters/node';
+import * as webStorage from './store/adapters/web';
 import type { DappClient } from '@metamask/mobile-wallet-protocol-dapp-client';
 
 // Mock logger at the top level
@@ -341,7 +342,6 @@ export const setupWebMocks = (nativeStorageStub: NativeStorageStub, dappUrl = 'h
 		...dom.window,
 		addEventListener: t.vi.fn(),
 		removeEventListener: t.vi.fn(),
-		localStorage: nativeStorageStub,
 		ethereum: {
 			isMetaMask: true,
 		},
@@ -356,6 +356,24 @@ export const setupWebMocks = (nativeStorageStub: NativeStorageStub, dappUrl = 'h
 	t.vi.stubGlobal('document', dom.window.document);
 	t.vi.stubGlobal('HTMLElement', dom.window.HTMLElement);
 	t.vi.stubGlobal('requestAnimationFrame', t.vi.fn());
+	t.vi.spyOn(webStorage, 'StoreAdapterWeb').mockImplementation(() => {
+		const __storage = {
+			get: t.vi.fn((key: string) => {
+				return nativeStorageStub.getItem(key);
+			}),
+			set: t.vi.fn((key: string, value: string) => {
+				return nativeStorageStub.setItem(key, value);
+			}),
+			delete: t.vi.fn((key: string) => {
+				return nativeStorageStub.removeItem(key);
+			}),
+			platform: 'web' as const,
+			get storage() {
+				return __storage;
+			},
+		} as any;
+		return __storage;
+	});
 };
 
 // Helper functions to create standardized test configurations

packages/sdk-multichain/src/store/adapters/web.ts

@@ -1,23 +1,92 @@
 import { StoreAdapter } from '../../domain';
 
+type kvStores = 'sdk-kv-store' | 'key-value-pairs';
+
 export class StoreAdapterWeb extends StoreAdapter {
+	static readonly stores: kvStores[] = ['sdk-kv-store', 'key-value-pairs'];
+	static readonly DB_NAME = 'mmsdk';
+
 	readonly platform = 'web';
+	readonly dbPromise: Promise<IDBDatabase>;
 
 	private get internal() {
-		if (typeof window === 'undefined' || !window.localStorage) {
-			throw new Error('localStorage is not available in this environment');
+		if (typeof window === 'undefined' || !window.indexedDB) {
+			throw new Error('indexedDB is not available in this environment');
 		}
-		return window.localStorage;
+		return window.indexedDB;
+	}
+
+	constructor(
+		dbNameSuffix: `-${string}` = '-kv-store',
+		private storeName: kvStores = StoreAdapterWeb.stores[0],
+	) {
+		super();
+
+		const dbName = `${StoreAdapterWeb.DB_NAME}${dbNameSuffix}`;
+		this.dbPromise = new Promise((resolve, reject) => {
+			try {
+				const request = this.internal.open(dbName, 1);
+				request.onerror = () => reject(new Error('Failed to open IndexedDB.'));
+				request.onsuccess = () => resolve(request.result);
+				request.onupgradeneeded = () => {
+					const db = request.result;
+					for (const name of StoreAdapterWeb.stores) {
+						if (!db.objectStoreNames.contains(name)) {
+							db.createObjectStore(name);
+						}
+					}
+				};
+			} catch (error) {
+				reject(error);
+			}
+		});
 	}
+
 	async get(key: string): Promise<string | null> {
-		return this.internal.getItem(key);
+		const { storeName } = this;
+		const db = await this.dbPromise;
+		return new Promise((resolve, reject) => {
+			try {
+				const tx = db.transaction(storeName, 'readonly');
+				const store = tx.objectStore(storeName);
+				const request = store.get(key);
+				request.onerror = () => reject(new Error('Failed to get value from IndexedDB.'));
+				request.onsuccess = () => resolve((request.result as string) ?? null);
+			} catch (error) {
+				reject(error);
+			}
+		});
 	}
 
 	async set(key: string, value: string): Promise<void> {
-		return this.internal.setItem(key, value);
+		const { storeName } = this;
+		const db = await this.dbPromise;
+		return new Promise((resolve, reject) => {
+			try {
+				const tx = db.transaction(storeName, 'readwrite');
+				const store = tx.objectStore(storeName);
+				const request = store.put(value, key);
+				request.onerror = () => reject(new Error('Failed to set value in IndexedDB.'));
+				request.onsuccess = () => resolve();
+			} catch (error) {
+				reject(error);
+			}
+		});
 	}
 
 	async delete(key: string): Promise<void> {
-		return this.internal.removeItem(key);
+		const { storeName } = this;
+		const db = await this.dbPromise;
+		return new Promise((resolve, reject) => {
+			try {
+				const tx = db.transaction(storeName, 'readwrite');
+				const store = tx.objectStore(storeName);
+				const request = store.delete(key);
+				request.onerror = () => reject(new Error('Failed to delete value from IndexedDB.'));
+				request.onsuccess = () => resolve();
+			} catch (error) {
+				reject(error);
+			}
+		});
 	}
 }

packages/sdk-multichain/src/store/index.test.ts

@@ -1,5 +1,7 @@
 /** biome-ignore-all lint/suspicious/noExplicitAny: Tests require it */
 /** biome-ignore-all lint/style/noNonNullAssertion: Tests require it */
+import 'fake-indexeddb/auto';
+import { IDBFactory } from 'fake-indexeddb';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as t from 'vitest';
 import type { StoreAdapter } from '../domain';
@@ -227,13 +229,15 @@ t.describe(`Store with WebAdapter`, () => {
 		() => {
 			t.vi.stubGlobal('window', {
 				localStorage: nativeStorageStub,
+				indexedDB: new IDBFactory(),
 			});
 		},
 	);
 
 	t.it("Should throw an exception if we try using the store with a browser that doesn't support localStorage", async () => {
 		t.vi.stubGlobal('window', {
-			localStorage: null,
+			localStorage: undefined,
+			indexedDB: undefined,
 		});
 		const store = new Store(new StoreAdapterWeb());
 		await t.expect(() => store.getAnonId()).rejects.toThrow();

yarn.lock

@@ -11279,6 +11279,7 @@ __metadata:
     eciesjs: ^0.4.15
     esbuild-plugin-umd-wrapper: ^3.0.0
     eventemitter3: ^5.0.1
+    fake-indexeddb: ^6.0.1
     jsdom: ^26.1.0
     nock: ^14.0.4
     prettier: ^3.3.3
@@ -32148,6 +32149,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fake-indexeddb@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "fake-indexeddb@npm:6.0.1"
+  checksum: c4b8a0576cf3165238494b67641539d4ff36194e038b36e6992449eb882923dfaadba78a62cfc7d5ae9a5c0ac2fa1e70af5cb6c2228dc764ac79b65f0e68e942
+  languageName: node
+  linkType: hard
+
 "fast-deep-equal@npm:^2.0.1":
   version: 2.0.1
   resolution: "fast-deep-equal@npm:2.0.1"