feat(): sync active account across tabs (#651)

* feat(): sync active account across tabs

* fix(): tests

packages/beacon-core/src/storage/ChromeStorage.ts

@@ -47,4 +47,19 @@ export class ChromeStorage implements Storage {
       })
     })
   }
+
+  public async subscribeToStorageChanged(
+    _callback: (arg: {
+      eventType: 'storageCleared' | 'entryModified'
+      key: string | null
+      oldValue: string | null
+      newValue: string | null
+    }) => {}
+  ): Promise<void> {
+    // TODO
+  }
+
+  public getPrefixedKey(key: string): string {
+    return key
+  }
 }

packages/beacon-core/src/storage/LocalStorage.ts

@@ -42,7 +42,38 @@ export class LocalStorage extends Storage {
     return Promise.resolve(localStorage.removeItem(this.getPrefixedKey(key)))
   }
 
-  private getPrefixedKey(key: string): string {
+  public async subscribeToStorageChanged(
+    callback: (arg: {
+      eventType: 'storageCleared' | 'entryModified'
+      key: string | null
+      oldValue: string | null
+      newValue: string | null
+    }) => {}
+  ): Promise<void> {
+    window.addEventListener(
+      'storage',
+      (event) => {
+        if (!event.key) {
+          callback({
+            eventType: 'storageCleared',
+            key: null,
+            oldValue: null,
+            newValue: null
+          })
+        } else {
+          callback({
+            eventType: 'entryModified',
+            key: this.getPrefixedKey(event.key),
+            oldValue: event.oldValue,
+            newValue: event.newValue
+          })
+        }
+      },
+      false
+    )
+  }
+
+  public getPrefixedKey(key: string): string {
     return this.prefix ? `${this.prefix}-${key}` : key
   }
 }

packages/beacon-dapp/src/dapp-client/DAppClient.ts

@@ -215,6 +215,23 @@ export class DAppClient extends Client {
 
     this.appMetadataManager = new AppMetadataManager(this.storage)
 
+    // Subscribe to storage changes and update the active account if it changes on other tabs
+    this.storage.subscribeToStorageChanged(async (event) => {
+      if (event.eventType === 'storageCleared') {
+        this.setActiveAccount(undefined)
+      } else if (event.eventType === 'entryModified') {
+        if (event.key === this.storage.getPrefixedKey(StorageKey.ACTIVE_ACCOUNT)) {
+          const accountIdentifier = event.newValue
+          if (!accountIdentifier || accountIdentifier === 'undefined') {
+            this.setActiveAccount(undefined)
+          } else {
+            const account = await this.getAccount(accountIdentifier)
+            this.setActiveAccount(account)
+          }
+        }
+      }
+    })
+
     this.activeAccountLoaded = this.storage
       .get(StorageKey.ACTIVE_ACCOUNT)
       .then(async (activeAccountIdentifier) => {

packages/beacon-types/src/types/storage/Storage.ts

@@ -34,4 +34,25 @@ export abstract class Storage {
    * @param key The storage key
    */
   abstract delete<K extends StorageKey>(key: K): Promise<void>
+
+  /**
+   * This event will fire if the storage was modified by someone else, eg. on another tab
+   *
+   * @param callback The callback to be called when a storage value changes
+   */
+  abstract subscribeToStorageChanged(
+    callback: (arg: {
+      eventType: 'storageCleared' | 'entryModified'
+      key: string | null
+      oldValue: string | null
+      newValue: string | null
+    }) => {}
+  ): Promise<void>
+
+  /**
+   * Get the key with the internal prefix
+   *
+   * @param key the storage key
+   */
+  abstract getPrefixedKey<K extends StorageKey>(key: K): string
 }

test/test-utils/FileStorage.ts

@@ -72,4 +72,19 @@ export class FileStorage implements Storage {
 
     return writeLocalFile(json)
   }
+
+  public async subscribeToStorageChanged(
+    _callback: (arg: {
+      eventType: 'storageCleared' | 'entryModified'
+      key: string | null
+      oldValue: string | null
+      newValue: string | null
+    }) => {}
+  ): Promise<void> {
+    // TODO
+  }
+
+  public getPrefixedKey(key: string): string {
+    return key
+  }
 }