perf: improve webRTC connection flow

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
     'no-undef': 'off',
     '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
     'array-callback-return': 'off',
+    'max-nested-callbacks': 'off',
   },
   extends: [
     'alloy',

package.json

@@ -38,6 +38,7 @@
     "react-qr-code": "^2.0.8",
     "react-use": "^17.4.0",
     "rxjs": "^7.5.7",
+    "tslog": "^4.7.1",
     "zod": "^3.19.1"
   },
   "devDependencies": {

src/chrome/background.ts

@@ -4,15 +4,10 @@ import { getExtensionTabsByUrl } from 'chrome/helpers/get-extension-tabs-by-url'
 import { getPopupId } from 'chrome/helpers/get-popup-id'
 import { setPopupId } from 'chrome/helpers/set-popup-id'
 import { config } from 'config'
-import { getLogger } from 'loglevel'
 import { ok } from 'neverthrow'
-import { createChromeApi } from './chrome-api'
 import { closePopup } from './helpers/close-popup'
 import { getActiveWindow } from './helpers/get-active-window'
-
-const logger = getLogger('background')
-
-const chromeAPI = createChromeApi(config.storage.key, logger)
+import { chromeLocalStore } from './helpers/chrome-local-store'
 
 const createOrFocusPopupWindow = () =>
   getExtensionTabsByUrl(config.popup.pages.pairing)
@@ -31,19 +26,16 @@ const createOrFocusPopupWindow = () =>
     )
 
 const handleIncomingMessage = () =>
-  chromeAPI
-    .getConnectionPassword()
-    .andThen((connectionPassword) =>
+  chromeLocalStore
+    .getItem('connectionPassword')
+    .andThen(({ connectionPassword }) =>
       connectionPassword ? closePopup() : createOrFocusPopupWindow()
     )
 
 const handleConnectionPasswordChange = async (changes: {
   [key: string]: chrome.storage.StorageChange
 }) => {
-  const connectionPasswordKey = Object.keys(changes).find((key) =>
-    key.includes(':connectionPassword')
-  )
-  if (connectionPasswordKey && changes[connectionPasswordKey].newValue) {
+  if (changes['connectionPassword']?.newValue) {
     setTimeout(() => {
       closePopup()
     }, config.popup.closeDelayTime)

src/chrome/chrome-connector-client.ts

@@ -1,42 +1,66 @@
-import { Connector, ConnectorType } from 'connector/connector'
-import { StorageClient } from 'connector/storage/storage-client'
+import { ConnectorClient } from 'connector/connector-client'
 import { config } from 'config'
-import log, { LogLevelDesc } from 'loglevel'
 import { map, Subscription } from 'rxjs'
 import { ChromeDAppClient } from './chrome-dapp-client'
+import { Logger } from 'tslog'
+import { chromeLocalStore } from './helpers/chrome-local-store'
 
 const chromeDAppClient = ChromeDAppClient()
 
-export const ChromeConnectorClient = (logLevel: LogLevelDesc) => {
-  let connector: ConnectorType | undefined
+export const ChromeConnectorClient = () => {
+  let connector: ConnectorClient | undefined
   let subscriptions: Subscription | undefined
-  const logger = log
-
-  chrome.storage.local.get('loglevel').then((value) => {
-    const storedLoglevel = value['loglevel']
-
-    if (storedLoglevel === 'DEBUG')
-      console.log(`Radix Connector loglevel: 'debug'`)
-
-    logger.setLevel(storedLoglevel || logLevel)
-  })
 
   const createConnector = () => {
-    connector = Connector({
-      logger,
-      storageClient: StorageClient({ id: config.storage.key }),
-      generateConnectionPassword: false,
+    connector = ConnectorClient({
+      source: 'extension',
+      target: 'wallet',
+      signalingServerBaseUrl: config.signalingServer.baseUrl,
+      isInitiator: false,
+      logger: new Logger({
+        prettyLogTemplate: '{{hh}}:{{MM}}:{{ss}}:{{ms}}\t{{logLevelName}}\t',
+        minLevel: 2,
+      }),
     })
+
     connector.connect()
-    subscriptions = connector.message$
-      .pipe(map((result) => result.map(chromeDAppClient.sendMessage)))
+
+    subscriptions = connector.onMessage$
+      .pipe(map((message) => chromeDAppClient.sendMessage(message)))
       .subscribe()
+
+    chromeLocalStore
+      .getItem('connectionPassword')
+      .map(({ connectionPassword }) => {
+        if (connectionPassword)
+          connector?.setConnectionPassword(
+            Buffer.from(connectionPassword, 'hex')
+          )
+      })
+  }
+
+  const onChange = ({
+    connectionPassword,
+  }: {
+    [key: string]: chrome.storage.StorageChange
+  }) => {
+    if (!connectionPassword.newValue) {
+      connector?.disconnect()
+    } else if (connectionPassword.newValue) {
+      connector?.setConnectionPassword(
+        Buffer.from(connectionPassword.newValue, 'hex')
+      )
+      connector?.connect()
+    }
   }
 
+  chrome.storage.onChanged.addListener(onChange)
+
   const destroy = () => {
     subscriptions?.unsubscribe()
     subscriptions = undefined
     connector?.destroy()
+    chrome.storage.onChanged.removeListener(onChange)
     connector = undefined
   }
 

src/chrome/content.ts

@@ -1,9 +1,8 @@
-import { config } from 'config'
 import { ChromeConnectorClient } from './chrome-connector-client'
 import { ChromeDAppClient, messageLifeCycleEvent } from './chrome-dapp-client'
 import { decorateMessage } from './helpers/decorate-message'
 
-const connectorClient = ChromeConnectorClient(config.logLevel)
+const connectorClient = ChromeConnectorClient()
 const chromeDAppClient = ChromeDAppClient()
 
 chromeDAppClient.messageListener((message) => {