Merge pull request #604 from z3us-dapps/feat/connector-1.4.1

Update Connector 1.4.1

apps/extension/README.md

@@ -60,5 +60,15 @@ In case user changes selected wallet you might want to reset connect button stat
 ```typescript
 const rdt = RadixDappToolkit(options)
 
-window.z3us.onWalletChange(() => { rdt.disconnect() })
+window.z3us.onWalletChange(() => {
+	rdt.disconnect()
+})
+```
+
+Reload page on z3us wallet change to update Radix Connector underlying state
+
+```typescript
+z3us.onWalletChange(() => {
+	window.location.reload()
+})
 ```

apps/extension/package.json

@@ -22,14 +22,14 @@
 		"intl:clean": "node src/helpers/intl-clean"
 	},
 	"dependencies": {
+		"@noble/curves": "^1.4.0",
 		"@radix-ui/react-avatar": "^1.0.2",
-		"@radixdlt/babylon-gateway-api-sdk": "^1.4.0",
-		"@radixdlt/connector-extension": "https://github.com/radixdlt/connector-extension#v1.3.6",
-		"@radixdlt/radix-connect-schemas": "^1.2.0",
+		"@radixdlt/babylon-gateway-api-sdk": "^1.6.1",
+		"@radixdlt/connector-extension": "https://github.com/radixdlt/connector-extension#v1.4.1",
 		"@radixdlt/radix-connect-webrtc": "^1.2.1",
-		"@radixdlt/radix-dapp-toolkit": "^1.4.3",
-		"@radixdlt/radix-engine-toolkit": "^1.0.3",
-		"@radixnameservice/rns-sdk": "^2.0.0",
+		"@radixdlt/radix-dapp-toolkit": "2.0.0",
+		"@radixdlt/radix-engine-toolkit": "^1.0.4",
+		"@radixnameservice/rns-sdk": "^2.0.2",
 		"@scure/bip32": "^1.3.2",
 		"async-mutex": "^0.4.0",
 		"bip39": "^3.1.0",

apps/extension/src/browser/app/message-client.ts

@@ -32,7 +32,7 @@ export const MessageClient = () => {
 
 	const onPortDisconnect = () => {
 		// eslint-disable-next-line no-console
-		if (port.error) console.error(`Disconnected due to an error: ${port.error.message}`)
+		if (port.error) console.error(`[APP]: Disconnected due to an error: ${port.error.message}`)
 		port = browser.runtime.connect({ name: PORT_NAME })
 		port.onDisconnect.addListener(onPortDisconnect)
 		port.onMessage.addListener(onPortMessage)
@@ -43,7 +43,7 @@ export const MessageClient = () => {
 
 	const sendMessage = async (
 		action: BackgroundMessageAction,
-		payload: BackgroundMessageTypes[keyof BackgroundMessageTypes] = {},
+		payload: BackgroundMessageTypes[keyof BackgroundMessageTypes],
 	) => {
 		const msg = newMessage(action, MessageSource.POPUP, MessageSource.BACKGROUND, payload)
 		const promise = new Promise<ResponseMessage>(resolve => {

apps/extension/src/browser/app/types.ts

@@ -1,8 +1,8 @@
-import type { WalletInteractionWithOrigin } from '@radixdlt/radix-connect-schemas'
+import type { WalletInteraction } from '@radixdlt/radix-dapp-toolkit'
 
 export enum MessageAction {
 	APP_PING = 'v1-app-ping',
 	APP_INTERACTION_CANCEL = 'v1-app-interaction-cancel',
 }
 
-export type WalletInteractionWithTabId = WalletInteractionWithOrigin & { fromTabId: number; senderURl: string }
+export type WalletInteractionWithTabId = WalletInteraction & { fromTabId: number; senderURl: string }

apps/extension/src/browser/background/message-client.ts

@@ -85,7 +85,7 @@ export const MessageClient = (logger: AppLogger) => {
 		})
 
 		port.onDisconnect.addListener(() => {
-			if (port.error) console.error(`Disconnected due to an error: ${port.error.message}`)
+			if (port.error) console.error(`[BACKGROUND]: Disconnected due to an error: ${port.error.message}`)
 		})
 	}
 

apps/extension/src/browser/background/message-handlers.ts

@@ -5,7 +5,7 @@ import {
 	messageSource as radixMessageSource,
 } from '@radixdlt/connector-extension/src/chrome/messages/_types'
 import { createMessage as createRadixMessage } from '@radixdlt/connector-extension/src/chrome/messages/create-message'
-import type { WalletInteractionWithOrigin } from '@radixdlt/radix-connect-schemas'
+import type { WalletInteraction } from '@radixdlt/radix-dapp-toolkit'
 import type { PrivateKey } from '@radixdlt/radix-engine-toolkit'
 import { Convert } from '@radixdlt/radix-engine-toolkit'
 import browser from 'webextension-polyfill'
@@ -20,6 +20,7 @@ import { MessageAction as AppMessageAction } from '@src/browser/app/types'
 import { newMessage } from '@src/browser/messages/message'
 import { type Message, type MessageHandlers, MessageSource } from '@src/browser/messages/types'
 import { Vault } from '@src/browser/vault/vault'
+import { config } from '@src/config'
 import type { PublicKeyJSON } from '@src/crypto/key_pair'
 import { getPrivateKey, publicKeyToJSON } from '@src/crypto/key_pair'
 import { getSecret as cryptoGetSecret, getCombineData } from '@src/crypto/secret'
@@ -28,6 +29,7 @@ import { signatureToJSON, signatureWithPublicKeyToJSON } from '@src/crypto/signa
 import { saveInteractions } from '@src/radix/interaction'
 import { type Data } from '@src/types/vault'
 
+import { getExtensionTabsByUrl } from '../tabs'
 import { MessageAction } from './types'
 
 const vault = new Vault(globalThis.crypto)
@@ -210,11 +212,20 @@ async function handleRadixMessage(message: Message) {
 				radixMsg.messageEvent,
 				radixMsg.data,
 			)
+		case messageDiscriminator.focusLedgerTab: {
+			const [page] = await getExtensionTabsByUrl(config.popup.pages.ledger)
+			if (page?.id) {
+				return browser.tabs.update(page.id, { active: true })
+			}
+			return createRadixMessage.confirmationError(radixMessageSource.background, radixMsg.messageId, {
+				reason: 'failedToFocusLedgerTab',
+			})
+		}
 		case messageDiscriminator.walletResponse:
 			return radixMsg.data
 		case messageDiscriminator.dAppRequest: {
 			try {
-				const walletInteraction: WalletInteractionWithOrigin = radixMsg.data
+				const walletInteraction: WalletInteraction = radixMsg.data
 				const { interactionId, metadata, items } = walletInteraction
 				if (items) {
 					switch (items.discriminator) {
@@ -258,6 +269,61 @@ async function handleRadixMessage(message: Message) {
 				})
 			}
 		}
+		case messageDiscriminator.walletInteraction: {
+			try {
+				const { interactionId, metadata } = radixMsg.interaction.interaction
+				saveInteractions({
+					...radixMsg.interaction.interaction,
+					fromTabId: message.fromTabId,
+					senderURl: message.senderUrl,
+				} as WalletInteractionWithTabId)
+					.then(() => openAppPopup(`#/interaction/${interactionId}`))
+					// eslint-disable-next-line no-console
+					.catch(console.error)
+
+				return createRadixMessage.sendMessageEventToDapp(
+					radixMessageSource.contentScript,
+					messageLifeCycleEvent.receivedByExtension,
+					{ interactionId, metadata },
+				)
+			} catch (error) {
+				// eslint-disable-next-line no-console
+				console.error(`⚡️Z3US⚡️: background handleRadixMessage: ${radixMsg?.discriminator}`, radixMsg, error)
+				return createRadixMessage.confirmationError(radixMessageSource.contentScript, radixMsg.messageId, {
+					reason: 'failedToDetectWalletLink',
+					jsError: error,
+				})
+			}
+		}
+		case messageDiscriminator.cancelWalletInteraction: {
+			try {
+				const { interactionId, metadata } = radixMsg.interaction
+				browser.runtime
+					.sendMessage(
+						newMessage(
+							AppMessageAction.APP_INTERACTION_CANCEL,
+							MessageSource.BACKGROUND,
+							MessageSource.POPUP,
+							radixMsg.interaction,
+						),
+					)
+					// eslint-disable-next-line no-console
+					.catch(console.error)
+
+				return createRadixMessage.sendMessageEventToDapp(
+					radixMessageSource.contentScript,
+					messageLifeCycleEvent.receivedByExtension,
+					{ interactionId, metadata },
+				)
+			} catch (error) {
+				// eslint-disable-next-line no-console
+				console.error(`⚡️Z3US⚡️: background handleRadixMessage: ${radixMsg?.discriminator}`, radixMsg, error)
+				return createRadixMessage.confirmationError(radixMessageSource.contentScript, radixMsg.messageId, {
+					reason: 'failedToDetectWalletLink',
+					jsError: error,
+				})
+			}
+		}
 		default:
 			// eslint-disable-next-line no-console
 			console.error(`⚡️Z3US⚡️: background handleRadixMessage: ${radixMsg?.discriminator}`, radixMsg, message)

apps/extension/src/browser/background/storage.ts

@@ -1,11 +1,22 @@
+import { messageSource } from '@radixdlt/connector-extension/src/chrome/messages/_types'
 import { createMessage } from '@radixdlt/connector-extension/src/chrome/messages/create-message'
 import type { Storage } from 'webextension-polyfill'
 import browser from 'webextension-polyfill'
 
-export const handleStorageChange = async (changes: { [key: string]: Storage.StorageChange }) => {
-	if (changes?.connectionPassword) {
-		const radixMsg = createMessage.setConnectionPassword('background', changes?.connectionPassword?.newValue)
-		return browser.runtime.sendMessage(radixMsg)
+export const handleStorageChange = async (changes: { [key: string]: Storage.StorageChange }, area: string) => {
+	if (changes.connections && area === 'local') {
+		const radixMsg = createMessage.setConnections(messageSource.background, changes.connections?.newValue || {})
+		await browser.runtime.sendMessage(radixMsg)
+	}
+
+	if (changes.options && area === 'local') {
+		const radixMsg = createMessage.setConnectorExtensionOptions(messageSource.background, changes.options.newValue)
+		await browser.runtime.sendMessage(radixMsg)
+	}
+
+	if (changes.sessionRouter && area === 'local') {
+		const radixMsg = createMessage.setSessionRouterData(changes.sessionRouter.newValue, messageSource.background)
+		await browser.runtime.sendMessage(radixMsg)
 	}
 	return undefined
 }

apps/extension/src/browser/content-script/messages-client.ts

@@ -1,7 +1,12 @@
+/* eslint-disable no-case-declarations */
+
 /* eslint-disable no-console */
-import type { Message as RadixMessage } from '@radixdlt/connector-extension/src/chrome/messages/_types'
+import {
+	type Message as RadixMessage,
+	messageSource as radixMessageSource,
+} from '@radixdlt/connector-extension/src/chrome/messages/_types'
 import { createMessage as createRadixMessage } from '@radixdlt/connector-extension/src/chrome/messages/create-message'
-import type { ExtensionInteraction, WalletInteractionWithOrigin } from '@radixdlt/radix-connect-schemas'
+import type { ExtensionInteraction, WalletInteraction } from '@radixdlt/radix-dapp-toolkit'
 import browser from 'webextension-polyfill'
 
 import { DAPP_ORIGIN } from 'ui/src/constants/dapp'
@@ -12,7 +17,7 @@ import { PORT_NAME } from '@src/browser/messages/constants'
 import { newMessage } from '@src/browser/messages/message'
 import type { Message, ResponseMessage } from '@src/browser/messages/types'
 import { MessageSource } from '@src/browser/messages/types'
-import { addOriginToMetadata } from '@src/radix/metadata'
+import { addOriginToCancelInteraction, addOriginToWalletInteraction } from '@src/radix/add-origin-to-wallet-interaction'
 
 import timeout, { reason } from '../messages/timeout'
 import { chromeDAppClient, logger, radixMessageHandler, sendRadixMessage } from './radix'
@@ -59,7 +64,7 @@ export const MessageClient = () => {
 	}
 
 	const onPortDisconnect = () => {
-		if (port.error) console.error(`Disconnected due to an error: ${port.error.message}`)
+		if (port.error) console.error(`[CONTENT]: Disconnected due to an error: ${port.error.message}`)
 		port = browser.runtime.connect({ name: PORT_NAME })
 		port.onDisconnect.addListener(onPortDisconnect)
 		port.onMessage.addListener(onPortMessage)
@@ -133,35 +138,46 @@ export const MessageClient = () => {
 		}
 	}
 
-	const handleWalletInteraction = async (walletInteraction: WalletInteractionWithOrigin) => {
-		const radixMsg = createRadixMessage.dAppRequest('contentScript', walletInteraction)
+	const handleWalletInteraction = async (walletInteraction: WalletInteraction) => {
+		const radixMsg = createRadixMessage.dAppRequest(radixMessageSource.contentScript, walletInteraction)
 		const enabled = await isHandledByRadix()
 		if (enabled) {
-			await browser.runtime.sendMessage(addOriginToMetadata(radixMsg))
-		} else {
-			await sendMessage(radixMsg)
+			return browser.runtime.sendMessage(radixMsg)
 		}
+		return sendMessage(radixMsg)
 	}
 
 	const handleExtensionInteraction = async (extensionInteraction: ExtensionInteraction) => {
 		switch (extensionInteraction.discriminator) {
 			case 'openPopup':
+				return openAppPopup('#/keystore/new')
+			case 'extensionStatus':
+				return checkConnectButtonStatus()
+			case 'cancelWalletInteraction':
+				const cancelWalletInteractionMsg = createRadixMessage.cancelWalletInteraction(
+					addOriginToCancelInteraction(extensionInteraction),
+				)
 				if (await isHandledByRadix()) {
-					await browser.runtime.sendMessage(createRadixMessage.openParingPopup())
-				} else {
-					await openAppPopup('#/keystore/new')
+					return browser.runtime.sendMessage(cancelWalletInteractionMsg)
 				}
-				break
-			case 'extensionStatus':
-				await checkConnectButtonStatus()
-				break
+				return sendMessage(cancelWalletInteractionMsg)
+			case 'walletInteraction':
+				const walletInteractionMsg = createRadixMessage.walletInteraction({
+					...extensionInteraction,
+					interaction: addOriginToWalletInteraction(extensionInteraction.interaction),
+				})
+				if (await isHandledByRadix()) {
+					return browser.runtime.sendMessage(walletInteractionMsg)
+				}
+				return sendMessage(walletInteractionMsg)
 			default:
 				logger.error({
 					reason: 'InvalidExtensionRequest',
 					interaction: extensionInteraction,
 				})
 				break
 		}
+		return undefined
 	}
 
 	chromeDAppClient.messageListener(handleWalletInteraction, handleExtensionInteraction)

apps/extension/src/browser/content-script/storage.ts

@@ -1,25 +1,25 @@
+import { hasConnections } from '@radixdlt/connector-extension/src/chrome/helpers/get-connections'
 import { createMessage as createRadixMessage } from '@radixdlt/connector-extension/src/chrome/messages/create-message'
 import type { Storage } from 'webextension-polyfill'
 
 import { sharedStore } from 'ui/src/store'
 
-import { getConnectionPassword } from '@src/browser/vault/storage'
-
 import { sendRadixMessageToDapp } from './radix'
 import { isHandledByRadix } from './radix-connector'
 
 export const checkConnectButtonStatus = async () => {
 	const enabled = await isHandledByRadix()
 	if (enabled) {
-		const connectionPassword = await getConnectionPassword()
-		sendRadixMessageToDapp(createRadixMessage.extensionStatus(!!connectionPassword))
+		hasConnections().map(has => sendRadixMessageToDapp(createRadixMessage.extensionStatus(has)))
 	} else {
 		await sharedStore.persist.rehydrate()
 		const sharedState = sharedStore.getState()
 		sendRadixMessageToDapp(createRadixMessage.extensionStatus(sharedState.keystores.length > 0))
 	}
 }
 
-export const onStorageChange = (changes: { [key: string]: Storage.StorageChange }) => {
-	if (changes.connectionPassword) checkConnectButtonStatus()
+export const onStorageChange = (changes: { [key: string]: Storage.StorageChange }, area: string) => {
+	if (changes.connections && area === 'local') {
+		checkConnectButtonStatus()
+	}
 }

apps/extension/src/browser/inpage.ts

@@ -1,10 +1,9 @@
-import '@src/helpers/polyfills'
-
 import { MessageAction as BackgroundMessageAction } from '@src/browser/background/types'
 import { MessageClient } from '@src/browser/inpage/message-client'
-import { Event , MessageAction as InPageMessageAction } from '@src/browser/inpage/types'
+import { Event, MessageAction as InPageMessageAction } from '@src/browser/inpage/types'
 import type { ResponseMessage } from '@src/browser/messages/types'
 import { config } from '@src/config'
+import '@src/helpers/polyfills'
 
 declare global {
 	interface Window {