fix: preserve firefoxId from dynamically detected extensions

Author: augnar

packages/beacon-transport-postmessage/src/PostMessageTransport.ts

@@ -108,7 +108,7 @@ export class PostMessageTransport<
 
       const data = event.data as ExtensionMessage<
         string,
-        { id: string; name: string; iconURL: string }
+        { id: string; name: string; iconURL: string; firefoxId?: string }
       >
       const sender = data.sender
       if (data && data.payload === 'pong' && sender) {

packages/beacon-types/src/types/Extension.ts

@@ -4,4 +4,11 @@ export interface Extension {
   shortName?: string
   iconUrl?: string
   color?: string
+  /**
+   * Firefox extension ID. Used by dynamically detected extensions to enable
+   * proper pairing on Firefox. When an extension responds to a ping with a
+   * firefoxId in the sender object, it should be preserved here so the SDK
+   * can send pairing messages to both the Chrome and Firefox extension IDs.
+   */
+  firefoxId?: string
 }

packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx

@@ -31,7 +31,8 @@ const useConnect = (
       !wallet ||
       (wallet.types.length <= 1 &&
         !wallet.types.includes('ios') &&
-        !wallet.types.includes('desktop')) ||
+        !wallet.types.includes('desktop') &&
+        !wallet.types.includes('extension')) ||
       (isMobileOS(window) && wallet.types.length === 1 && wallet.types.includes('desktop'))
     ) {
       return

packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx

@@ -86,12 +86,16 @@ const useWallets = (networkType?: NetworkType, featuredWallets?: string[]) => {
         .filter((e) => !extensionList.some((w) => w.id === e.id))
         .map((e) => ({
           id: e.id,
-          key: e.id,
+          // If extension provides firefoxId, include it in the key so mergeWallets()
+          // can detect it and set the firefoxId property on the merged wallet
+          key: e.firefoxId ? `${e.id}-firefox` : e.id,
           name: e.shortName ?? e.name ?? '',
           image: e.iconUrl ?? '',
           description: 'Browser Extension',
           type: 'extension' as const,
-          link: (e as any).link ?? ''
+          link: (e as any).link ?? '',
+          // Also pass through the firefoxId for direct access
+          firefoxId: e.firefoxId
         }))
     ]
 

packages/beacon-ui/src/utils/wallets.ts

@@ -8,6 +8,7 @@ export interface Wallet {
   link: string
   supportedInteractionStandards?: ('wallet_connect' | 'beacon')[] // 'wallet_connect' or 'beacon'
   deepLink?: string
+  firefoxId?: string // Firefox extension ID for dynamically detected extensions
 }
 
 export interface MergedWallet {
@@ -113,16 +114,18 @@ export function mergeWallets(wallets: Wallet[]): MergedWallet[] {
       }
       mergedWallets[index].types.push(wallet.type)
       mergedWallets[index].deepLink = wallet.deepLink
-      mergedWallets[index].firefoxId = wallet.key.includes('firefox')
-        ? wallet.id
-        : mergedWallets[index].firefoxId
+      // Set firefoxId from: 1) wallet's explicit firefoxId, 2) key containing 'firefox', 3) existing value
+      mergedWallets[index].firefoxId = wallet.firefoxId
+        ?? (wallet.key.includes('firefox') ? wallet.id : undefined)
+        ?? mergedWallets[index].firefoxId
     } else {
       const newWallet: MergedWallet = {
         ...wallet,
         descriptions: [wallet.description],
         links: ['', '', '', ''],
         types: [wallet.type],
-        firefoxId: wallet.key.includes('firefox') ? wallet.id : undefined
+        // Set firefoxId from explicit property or from key pattern
+        firefoxId: wallet.firefoxId ?? (wallet.key.includes('firefox') ? wallet.id : undefined)
       }
 
       setWallet(newWallet, wallet)