feat: multi wallet support

package.json

@@ -32,7 +32,7 @@
     "@mui/material": "^5.14.0",
     "@radixdlt/babylon-gateway-api-sdk": "^1.2.7",
     "@radixdlt/connect-button": "^1.0.1",
-    "@radixdlt/radix-connect-schemas": "^1.3.0-cap36.1",
+    "@radixdlt/radix-connect-schemas": "^1.3.0-cap36.4",
     "@radixdlt/radix-connect-webrtc": "^1.2.1",
     "@stitches/react": "^1.2.8",
     "@types/blake2b": "^2.1.0",

src/chrome/background/background.ts

@@ -19,8 +19,8 @@ import { RadixNetworkConfigById } from '@radixdlt/babylon-gateway-api-sdk'
 import { openRadixDevToolsPage } from './open-radix-dev-tools-page'
 import { sendMessage } from 'chrome/messages/send-message'
 import { Connections } from 'pairing/state/connections'
-import { SessionRouter } from 'chrome/offscreen/session-router'
 import { createTab } from 'chrome/helpers/create-tab'
+import { getExtensionOptions, setConnectorExtensionOptions } from 'options'
 
 const logger = utilsLogger.getSubLogger({ name: 'background' })
 
@@ -37,6 +37,8 @@ const handleOnInstallExtension = async () => {
       }
     } catch (err) {}
   }
+
+  getExtensionOptions().map(setConnectorExtensionOptions)
 }
 
 const handleStorageChange = (
@@ -123,15 +125,7 @@ chrome.storage.onChanged.addListener(handleStorageChange)
 chrome.action.onClicked.addListener(openParingPopup)
 chrome.runtime.onInstalled.addListener(handleOnInstallExtension)
 
-if (isDevMode) {
-  chrome.runtime.onInstalled.addListener(() => {
-    createTab(
-      `chrome-extension://${chrome.runtime.id}/src/chrome/offscreen/index.html`,
-    )
-  })
-} else {
-  createOffscreen()
-}
+createOffscreen()
 
 chrome.runtime.onStartup.addListener(() => {
   logger.debug('onStartup')

src/chrome/background/message-handler.ts

@@ -46,8 +46,6 @@ export const BackgroundMessageHandler =
     message: Message,
     sendMessageWithConfirmation: SendMessageWithConfirmation,
   ): MessageHandlerOutput => {
-    if (message?.discriminator !== 'log')
-      logger?.debug('incoming bg message', message.discriminator)
     switch (message?.discriminator) {
       case messageDiscriminator.getExtensionOptions:
         return getExtensionOptions()
@@ -132,11 +130,21 @@ export const BackgroundMessageHandler =
           .mapErr(() => ({ reason: 'failedToFocusLedgerTab' }))
       }
 
+      case messageDiscriminator.removeSessionId: {
+        chromeLocalStore.getSingleItem('sessionRouter').andThen((data) => {
+          if (!data) {
+            return okAsync(undefined)
+          }
+
+          const { [message.sessionId]: _, ...rest } = data
+          return chromeLocalStore.setSingleItem('sessionRouter', rest)
+        })
+      }
+
       case messageDiscriminator.walletResponse: {
         const sessionId = message.data?.metadata?.sessionId
         const clientId = message.data?.metadata?.clientId
 
-        logger?.debug('bg knows about', sessionId, clientId, message.data)
         if (
           sessionId &&
           clientId &&
@@ -145,7 +153,6 @@ export const BackgroundMessageHandler =
         ) {
           chromeLocalStore.getSingleItem('sessionRouter').map((data) => {
             if (!data) {
-              logger?.debug('adding sessionId->clientId mapping')
               return chromeLocalStore.setSingleItem('sessionRouter', {
                 [sessionId]: clientId,
               })
@@ -156,14 +163,11 @@ export const BackgroundMessageHandler =
                 `sessionRouter has clientId ${data[sessionId]} for ${sessionId} but we've just had a response from ${clientId}`,
               )
             } else if (!data[sessionId]) {
-              logger?.debug('adding sessionId->clientId mapping')
               return chromeLocalStore.setSingleItem('sessionRouter', {
                 ...data,
                 [sessionId]: clientId,
               })
             }
-
-            logger?.debug('not updating clientId nor sessionId')
           })
         }
 
@@ -210,10 +214,6 @@ export const BackgroundMessageHandler =
           }))
       }
 
-      case messageDiscriminator.addToSessionRouter: {
-        logger?.debug(message)
-      }
-
       case messageDiscriminator.dAppRequest: {
         hasConnections().map((hasConnections) => {
           if (hasConnections) {

src/chrome/content-script/content-script.ts

@@ -62,6 +62,12 @@ const handleExtensionInteraction = async (
   extensionInteraction: ExtensionInteraction,
 ) => {
   switch (extensionInteraction.discriminator) {
+    case 'removeSessionId':
+      await sendMessage(
+        createMessage.removeSessionId(extensionInteraction.sessionId),
+      )
+      break
+
     case 'openPopup':
       await sendMessage(createMessage.openParingPopup())
       break
@@ -103,8 +109,6 @@ chrome.storage.onChanged.addListener(
   },
 )
 
-logger.debug('content-script loaded')
-
 hasConnections().map((hasConnections) => {
   sendMessageToDapp(createMessage.extensionStatus(hasConnections))
 })

src/chrome/messages/_types.ts

@@ -13,7 +13,7 @@ export const messageDiscriminator = {
   getExtensionOptions: 'getExtensionOptions',
   getSessionRouterData: 'getSessionRouterData',
   setSessionRouterData: 'setSessionRouterData',
-  addToSessionRouter: 'addToSessionRouter',
+  removeSessionId: 'removeSessionId',
   dAppRequest: 'dAppRequest',
   closeLedgerTab: 'closeLedgerTab',
   focusLedgerTab: 'focusLedgerTab',
@@ -156,7 +156,7 @@ export type Messages = {
     { data: Record<string, any> }
   >
   [messageDiscriminator.dAppRequest]: MessageBuilder<
-    MessageDiscriminator[typeof messageDiscriminator.dAppRequest],
+    MessageDiscriminator['dAppRequest'],
     { data: WalletInteractionWithOrigin }
   >
   [messageDiscriminator.walletMessage]: MessageBuilder<

src/chrome/messages/create-message.ts

@@ -26,6 +26,10 @@ export const createMessage = {
     discriminator: messageDiscriminator.setSessionRouterData,
     data,
   }),
+  removeSessionId: (sessionId: string) => ({
+    discriminator: messageDiscriminator.removeSessionId,
+    sessionId,
+  }),
   extensionStatus: (isWalletLinked: boolean) => ({
     eventType: 'extensionStatus',
     isExtensionAvailable: true,
@@ -85,9 +89,9 @@ export const createMessage = {
   dAppRequest: (
     source: MessageSource,
     data: WalletInteractionWithOrigin,
-  ): Messages[typeof messageDiscriminator.dAppRequest] => ({
+  ): Messages['dAppRequest'] => ({
     source,
-    discriminator: messageDiscriminator.dAppRequest,
+    discriminator: 'dAppRequest',
     messageId: crypto.randomUUID(),
     data,
   }),

src/chrome/offscreen/index.html

@@ -3,6 +3,5 @@
   <body>
     <div id="logs"></div>
     <script type="module" src="/src/chrome/offscreen/offscreen.ts"></script>
-
   </body>
 </html>

src/chrome/offscreen/session-router.ts

@@ -1,5 +1,3 @@
-import { ok } from 'neverthrow'
-
 export type SessionRouter = ReturnType<typeof SessionRouter>
 
 export type SessionId = string
@@ -8,13 +6,6 @@ export type ClientId = string
 export const SessionRouter = () => {
   const store = new Map<SessionId, ClientId>()
 
-  const add = (sessionId: SessionId, clientId: ClientId) => {
-    store.set(sessionId, clientId)
-    return ok(undefined)
-  }
-
-  const removeBySessionId = (sessionId: SessionId) => store.delete(sessionId)
-
   const getClientId = (sessionId: SessionId) => store.get(sessionId)
 
   const refreshStore = (data: Record<SessionId, ClientId>) => {
@@ -28,6 +19,5 @@ export const SessionRouter = () => {
     refreshStore,
     getClientId,
     store,
-    removeBySessionId,
   }
 }

src/chrome/offscreen/wallet-connection/factory.ts

@@ -31,6 +31,7 @@ export const walletConnectionClientFactory = (input: {
       target: 'wallet',
       isInitiator: config.webRTC.isInitiator,
       logger,
+      negotiationTimeout: 10_000,
     })
 
   const client = WalletConnectionClient({

src/chrome/offscreen/wallet-connection/message-handler.ts

@@ -74,7 +74,6 @@ export const WalletConnectionMessageHandler = (input: {
             const clientIdForSessionId = sessionRouter.getClientId(
               arbitraryData?.sessionId,
             )
-            logger.info('clientIdForSessionId', clientIdForSessionId)
             if (walletInteraction.items.discriminator === 'cancelRequest') {
               return dAppRequestQueue
                 .cancel(interactionId)
@@ -90,14 +89,7 @@ export const WalletConnectionMessageHandler = (input: {
                 )
             }
 
-            logger.debug(
-              'almost adding to request queue',
-              clientId,
-              arbitraryData?.sessionId,
-            )
-
             if ([undefined, clientId].includes(clientIdForSessionId)) {
-              logger.debug('add')
               return dAppRequestQueue.add(
                 {
                   items,

src/pairing/components/connection-password.tsx

@@ -5,10 +5,15 @@ import { Link } from 'react-router-dom'
 
 export const ConnectionPassword = ({
   connectionPassword,
+  clientId,
+  purpose,
 }: {
   connectionPassword?: string
+  clientId?: string
+  purpose?: 'general'
 }) => {
   if (!connectionPassword) return null
+
   const connectionsClient = useConnectionsClient()
   return (
     <>
@@ -22,8 +27,16 @@ export const ConnectionPassword = ({
         Scan the QR code with the Radix Wallet app on your mobile phone to start
         using it with dApps in this web browser.
       </PairingHeader>
+
       <Box mt="3xl" p="none">
-        <QrCode value={connectionPassword} data-testid="custom-element" />
+        <QrCode
+          value={JSON.stringify({
+            password: connectionPassword,
+            clientId,
+            purpose,
+          })}
+          data-testid="custom-element"
+        />
       </Box>
 
       <Box textAlign="center">

src/pairing/pairing.tsx

@@ -5,7 +5,7 @@ import { logger } from 'utils/logger'
 import { config, radixConnectConfig } from 'config'
 import { useConnectionsClient } from './state/connections'
 import { useConnectorOptions } from './state/options'
-import { Subscription, filter, map, tap, withLatestFrom } from 'rxjs'
+import { Subscription, filter, map, withLatestFrom } from 'rxjs'
 import { useNavigate } from 'react-router-dom'
 
 export const Pairing = () => {
@@ -15,10 +15,12 @@ export const Pairing = () => {
   const connectionsClient = useConnectionsClient()
   const connectorOptions = useConnectorOptions()
   const navigate = useNavigate()
-
+  const [clientId, setClientId] = useState<string>()
   useEffect(() => {
     if (!connectorOptions) return
 
+    setClientId(connectorOptions.clientId)
+
     const connectorClient = ConnectorClient({
       source: 'extension',
       target: 'wallet',
@@ -41,12 +43,6 @@ export const Pairing = () => {
       filter((message) => message.discriminator === 'linkClient'),
     )
 
-    const sendLinkClientInteraction = connectorClient.sendMessage({
-      discriminator: 'linkClient',
-      clientId: connectorOptions.clientId,
-      purpose: 'general',
-    })
-
     const hexConnectionPassword$ = connectorClient.connectionPassword$.pipe(
       filter(Boolean),
       map((buffer) => buffer.toString('hex')),
@@ -62,12 +58,12 @@ export const Pairing = () => {
       connectorClient.connected$
         .pipe(
           filter(Boolean),
-          tap(() => {}),
           withLatestFrom(hexConnectionPassword$),
+          withLatestFrom(linkClientInteraction$),
         )
-        .subscribe(([, password]) => {
+        .subscribe(([[, password], interaction]) => {
           connectionsClient
-            .addOrUpdate(password, crypto.randomUUID())
+            .addOrUpdate(password, interaction.clientId)
             .map(() => connectorClient.disconnect())
             .map(() => navigate('/'))
         }),
@@ -81,5 +77,13 @@ export const Pairing = () => {
     }
   }, [setConnectionPassword, connectorOptions, connectionsClient])
 
-  return <ConnectionPassword connectionPassword={connectionPassword} />
+  return (
+    <>
+      <ConnectionPassword
+        connectionPassword={connectionPassword}
+        purpose="general"
+        clientId={clientId}
+      />
+    </>
+  )
 }