diff --git a/packages/beacon-transport-postmessage/src/PostMessageTransport.ts b/packages/beacon-transport-postmessage/src/PostMessageTransport.ts index 89480835e..8d1429ab8 100644 --- a/packages/beacon-transport-postmessage/src/PostMessageTransport.ts +++ b/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) { diff --git a/packages/beacon-types/src/types/Extension.ts b/packages/beacon-types/src/types/Extension.ts index 04991d82b..3549f5daa 100644 --- a/packages/beacon-types/src/types/Extension.ts +++ b/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 } diff --git a/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx b/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx index a16843617..5eaa2070c 100644 --- a/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx +++ b/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 diff --git a/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx b/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx index c7248c511..d3deb6809 100644 --- a/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx +++ b/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 })) ] diff --git a/packages/beacon-ui/src/utils/wallets.ts b/packages/beacon-ui/src/utils/wallets.ts index 3ddaba8b1..d553c0d4b 100644 --- a/packages/beacon-ui/src/utils/wallets.ts +++ b/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)