Fix nextjs localstorage issue (#1193)

* fix nextjs localstorage issue * pr comments * fix test
MetaMask · Jan 14, 2025 · ea14232 · ea14232
1 parent 801c9ef
commit ea14232
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 35 deletions.
diff --git a/packages/sdk/src/Platform/PlatfformManager.test.ts b/packages/sdk/src/Platform/PlatfformManager.test.ts
@@ -407,14 +407,12 @@ describe('PlatformManager', () => {
     });
 
     it('should return true if isNotBrowser returns false', () => {
-      jest.spyOn(platformManager, 'isNotBrowser').mockReturnValue(false);
-
+      jest.spyOn(PlatformManager, 'isNotBrowser').mockReturnValue(false);
       expect(platformManager.isBrowser()).toBe(true);
     });
 
     it('should return false if isNotBrowser returns true', () => {
-      jest.spyOn(platformManager, 'isNotBrowser').mockReturnValue(true);
-
+      jest.spyOn(PlatformManager, 'isNotBrowser').mockReturnValue(true);
       expect(platformManager.isBrowser()).toBe(false);
     });
   });

diff --git a/packages/sdk/src/Platform/PlatfformManager.ts b/packages/sdk/src/Platform/PlatfformManager.ts
@@ -89,7 +89,7 @@ export class PlatformManager {
     return this.state.platformType === PlatformType.MobileWeb;
   }
 
-  isNotBrowser() {
+  static isNotBrowser() {
     return (
       typeof window === 'undefined' ||
       !window?.navigator ||
@@ -99,14 +99,22 @@ export class PlatformManager {
     );
   }
 
-  isNodeJS() {
-    return this.isNotBrowser() && !this.isReactNative();
+  isNotBrowser() {
+    return PlatformManager.isNotBrowser();
   }
 
-  isBrowser() {
+  static isBrowser() {
     return !this.isNotBrowser();
   }
 
+  isBrowser() {
+    return PlatformManager.isBrowser();
+  }
+
+  isNodeJS() {
+    return this.isNotBrowser() && !this.isReactNative();
+  }
+
   isUseDeepLink() {
     return this.state.useDeeplink;
   }

diff --git a/packages/sdk/src/services/MetaMaskSDK/InitializerManager/setupStorage.ts b/packages/sdk/src/services/MetaMaskSDK/InitializerManager/setupStorage.ts
@@ -15,9 +15,6 @@ export async function setupStorageManager(instance: MetaMaskSDK) {
   const { options } = instance;
 
   if (options.storage?.enabled === true && !options.storage.storageManager) {
-    options.storage.storageManager = getStorageManager(
-      // instance.platformManager,
-      options.storage,
-    );
+    options.storage.storageManager = await getStorageManager(options.storage);
   }
 }
diff --git a/packages/sdk/src/services/SDKProvider/InitializationManager/initializeStateAsync.ts b/packages/sdk/src/services/SDKProvider/InitializationManager/initializeStateAsync.ts
@@ -50,7 +50,7 @@ export async function initializeStateAsync(instance: SDKProvider) {
     let relayPersistence = false;
 
     let useCache = false;
-    const storageManager = getStorageManager({ enabled: true });
+    const storageManager = await getStorageManager({ enabled: true });
 
     // FIXME: currently set for backward compatibility so new sdk don't autoconnect with old wallet
     // Only use cache if relayPersistence is enabled for current channel.

diff --git a/packages/sdk/src/storage-manager/getStorageManager.ts b/packages/sdk/src/storage-manager/getStorageManager.ts
@@ -3,28 +3,25 @@ import {
   StorageManager,
   StorageManagerProps,
 } from '@metamask/sdk-communication-layer';
+import { PlatformManager } from '../Platform/PlatfformManager';
 
-/* #if _NODEJS
-import { StorageManagerNode as SMDyn } from './StorageManagerNode';
-//#elif _WEB
-import { StorageManagerWeb as SMDyn } from './StorageManagerWeb';
-//#elif _REACTNATIVE
-import { StorageManagerAS as SMDyn } from './StorageManagerAS';
-//#else */
-// This is ONLY used during development with devnext/devreactnative or via transpiling
-import { StorageManagerAS as SMDyn } from './StorageManagerAS';
-// eslint-disable-next-line spaced-comment
-//#endif
-
-export const getStorageManager = (
-  // platformManager: PlatformManager,
+export const getStorageManager = async (
   options: StorageManagerProps,
-): StorageManager => {
-  // TODO uncomment and test to use similar dynamic imports for each platforms and drop support for JSCC
-  // Currently might have an issue with NextJS and server side rendering
-  // if (platformManager.isNotBrowser()) {
-  //   const { StorageManagerNode } = await import('./StorageManagerNode');
-  //   return new StorageManagerNode(options);
-  // }
-  return new SMDyn(options);
+): Promise<StorageManager> => {
+  if (PlatformManager.isBrowser()) {
+    const { StorageManagerWeb } = await import('./StorageManagerWeb');
+    return new StorageManagerWeb(options);
+  }
+
+  const noopStorageManager: StorageManager = {
+    persistChannelConfig: async () => undefined,
+    getPersistedChannelConfig: async () => undefined,
+    persistAccounts: async () => undefined,
+    getCachedAccounts: async () => [],
+    persistChainId: async () => undefined,
+    getCachedChainId: async () => undefined,
+    terminate: async () => undefined,
+  } as StorageManager;
+
+  return Promise.resolve(noopStorageManager);
 };