Feat/custom bc

.github/workflows/build.yml

@@ -18,10 +18,10 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
-      - name: Node 16
+      - name: Node 18
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Prepare
         run: npm ci

.github/workflows/deploy-docs.yml

@@ -17,10 +17,10 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
-      - name: Node 16
+      - name: Node 18
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Prepare
         run: npm ci

.github/workflows/dev-demo-deploy.yml

@@ -17,10 +17,10 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
-      - name: Node 16
+      - name: Node 18
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Prepare
         run: npm ci

packages/beacon-core/package.json

@@ -40,7 +40,7 @@
     "@stablelib/nacl": "^1.0.4",
     "@stablelib/utf8": "^1.0.1",
     "@stablelib/x25519-session": "^1.0.4",
-    "bs58check": "2.1.2",
-    "broadcast-channel": "^7.0.0"
+    "broadcast-channel": "^7.0.0",
+    "bs58check": "2.1.2"
   }
 }

packages/beacon-core/src/utils/multi-tab-channel.ts

@@ -1,15 +1,25 @@
 import { Logger } from '@airgap/beacon-core'
+import { BeaconMessageType } from '@airgap/beacon-types'
+import { ExposedPromise } from '@airgap/beacon-utils'
 import { createLeaderElection, BroadcastChannel, LeaderElector } from 'broadcast-channel'
 
-type Message = {
-  type: string
-  id: string
-  data: any
+type BCMessageType =
+  | 'LEADER_DEAD'
+  | 'RESPONSE'
+  | 'DISCONNECT'
+  | BeaconMessageType
+
+type BCMessage = {
+  type: BCMessageType
+  sender: string
+  recipient?: string
+  data?: any
 }
 
 const logger = new Logger('MultiTabChannel')
 
 export class MultiTabChannel {
+  private id: string = String(Date.now())
   private channel: BroadcastChannel
   private elector: LeaderElector
   private eventListeners = [
@@ -18,6 +28,7 @@ export class MultiTabChannel {
   ]
   private onBCMessageHandler: Function
   private onElectedLeaderHandler: Function
+  private _isLeader: ExposedPromise<boolean> = new ExposedPromise()
   // Auxiliary variable needed for handling beforeUnload.
   // Closing a tab causes the elector to be killed immediately
   private wasLeader: boolean = false
@@ -27,17 +38,29 @@ export class MultiTabChannel {
     this.onElectedLeaderHandler = onElectedLeaderHandler
     this.channel = new BroadcastChannel(name)
     this.elector = createLeaderElection(this.channel)
-    this.init().then(() => logger.debug('MultiTabChannel', 'constructor', 'init', 'done'))
+    this.init()
+      .then(() => logger.debug('MultiTabChannel', 'constructor', 'init', 'done'))
+      .catch((err) => logger.warn(err.message))
   }
 
   private async init() {
+    const isMobile = typeof window !== 'undefined' ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    ) : false
+
+    if (isMobile) {
+      throw new Error('BroadcastChannel is not fully supported on mobile.')
+    }
+
     const hasLeader = await this.elector.hasLeader()
 
     if (!hasLeader) {
       await this.elector.awaitLeadership()
-      this.wasLeader = this.isLeader()
+      this.wasLeader = this.elector.isLeader
+      this.wasLeader && logger.log('The current tab is the leader.')
     }
 
+    this._isLeader.resolve(this.wasLeader)
     this.channel.onmessage = this.eventListeners[1]
     window?.addEventListener('beforeunload', this.eventListeners[0])
   }
@@ -52,23 +75,30 @@ export class MultiTabChannel {
     this.channel.removeEventListener('message', this.eventListeners[1])
   }
 
-  private async onMessageHandler(message: Message) {
+  private async onMessageHandler(message: BCMessage) {
+    if (message.recipient && message.recipient !== this.id) {
+      return
+    }
+
     if (message.type === 'LEADER_DEAD') {
       await this.elector.awaitLeadership()
 
-      this.wasLeader = this.isLeader()
+      this.wasLeader = this.elector.isLeader
+      this._isLeader = new ExposedPromise()
+      this._isLeader.resolve(this.wasLeader)
 
-      if (this.isLeader()) {
+      if (this.wasLeader) {
         this.onElectedLeaderHandler()
+        logger.log('The current tab is the leader.')
       }
       return
     }
 
     this.onBCMessageHandler(message)
   }
 
-  isLeader(): boolean {
-    return this.elector.isLeader
+  isLeader(): Promise<boolean> {
+    return this._isLeader.promise
   }
 
   async getLeadership() {
@@ -79,7 +109,7 @@ export class MultiTabChannel {
     return this.elector.hasLeader()
   }
 
-  postMessage(message: any): void {
-    this.channel.postMessage(message)
+  postMessage(message: Omit<BCMessage, 'sender'>): void {
+    this.channel.postMessage({ ...message, sender: this.id })
   }
 }

packages/beacon-dapp/package.json

@@ -39,7 +39,6 @@
     "@airgap/beacon-transport-matrix": "4.3.0",
     "@airgap/beacon-transport-postmessage": "4.3.0",
     "@airgap/beacon-transport-walletconnect": "4.3.0",
-    "@airgap/beacon-ui": "4.3.0",
-    "broadcast-channel": "^7.0.0"
+    "@airgap/beacon-ui": "4.3.0"
   }
 }