Merge pull request #584 from z3us-dapps/develop

v2.0.37+ext

apps/extension/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "z3us-extension",
-	"version": "2.0.36",
+	"version": "2.0.37",
 	"type": "module",
 	"scripts": {
 		"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
@@ -29,7 +29,7 @@
 		"@radixdlt/radix-connect-webrtc": "^1.2.1",
 		"@radixdlt/radix-dapp-toolkit": "^1.4.3",
 		"@radixdlt/radix-engine-toolkit": "^1.0.3",
-		"@radixnameservice/rns-sdk": "^1.0.4",
+		"@radixnameservice/rns-sdk": "^2.0.0",
 		"@scure/bip32": "^1.3.2",
 		"async-mutex": "^0.4.0",
 		"bip39": "^3.1.0",
@@ -55,7 +55,7 @@
 		"simplebar-react": "^3.2.4",
 		"use-debounce": "^9.0.4",
 		"use-immer": "^0.9.0",
-		"usehooks-ts": "^2.9.1",
+		"usehooks-ts": "^3.1.0",
 		"webextension-polyfill": "^0.10.0",
 		"zustand": "^4.3.8",
 		"zustand-store-addons": "^0.1.12"

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

@@ -15,6 +15,7 @@ import { addInjectContentScript } from '@src/browser/content-script/context-menu
 import { addDevTools } from '@src/browser/dev-tools/context-menu'
 import { addLedger } from '@src/browser/ledger/context-menu'
 import { createOffscreen } from '@src/browser/offscreen/offscreen'
+import { addSidePanel } from '@src/browser/side-panel/context-menu'
 
 const logger = utilsLogger.getSubLogger({ name: 'background' })
 
@@ -50,6 +51,7 @@ browser.idle.onStateChanged.addListener(state => {
 browser.contextMenus.removeAll().then(() => {
 	addInjectContentScript()
 	addDashboard()
+	addSidePanel()
 	addLogs()
 	addLedger()
 	addDevTools()

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

@@ -41,27 +41,29 @@ async function lockVault(): Promise<void> {
 }
 
 export interface UnlockVaultMessage {
+	runtimeId: string
 	keystore: Keystore
 	password: string
 }
 
 async function unlockVault(message: Message): Promise<void> {
-	const { keystore, password } = message.payload as UnlockVaultMessage
-	await vault.unlock(keystore, password)
+	const { runtimeId, keystore, password } = message.payload as UnlockVaultMessage
+	await vault.unlock(keystore, runtimeId, password)
 }
 
 export interface IsUnlockVaultMessage {
+	runtimeId: string
 	keystore: Keystore
 }
 
 async function isVaultUnlocked(message: Message): Promise<boolean> {
-	const { keystore } = message.payload as UnlockVaultMessage
+	const { runtimeId, keystore } = message.payload as IsUnlockVaultMessage
 
-	const walletData = await vault.get()
+	const walletData = await vault.get(runtimeId)
 	if (!walletData) {
 		try {
 			await vault.checkPassword(keystore, '')
-			return !!(await vault.unlock(keystore, ''))
+			return !!(await vault.unlock(keystore, runtimeId, ''))
 		} catch (error) {
 			return false
 		}
@@ -91,14 +93,15 @@ async function removeFromVault(message: Message): Promise<void> {
 }
 
 export interface GetPublicKeyMessage {
+	runtimeId: string
 	curve: CURVE
 	derivationPath: string
 	combinedKeystoreId: string
 }
 
 async function getPublicKey(message: Message): Promise<PublicKeyJSON | null> {
-	const { curve, derivationPath, combinedKeystoreId } = message.payload as GetPublicKeyMessage
-	const walletData = await vault.get()
+	const { runtimeId, curve, derivationPath, combinedKeystoreId } = message.payload as GetPublicKeyMessage
+	const walletData = await vault.get(runtimeId)
 	if (!walletData) {
 		return null
 	}
@@ -111,6 +114,7 @@ async function getPublicKey(message: Message): Promise<PublicKeyJSON | null> {
 }
 
 export interface SignMessage {
+	runtimeId: string
 	keystore: Keystore
 	password: string
 	toSign: string
@@ -120,8 +124,9 @@ export interface SignMessage {
 }
 
 async function signToSignature(message: Message): Promise<SignatureJSON | null> {
-	const { keystore, curve, derivationPath, password, toSign, combinedKeystoreId } = message.payload as SignMessage
-	const walletData = await vault.get()
+	const { runtimeId, keystore, curve, derivationPath, password, toSign, combinedKeystoreId } =
+		message.payload as SignMessage
+	const walletData = await vault.get(runtimeId)
 	if (!walletData) {
 		return null
 	}
@@ -135,8 +140,9 @@ async function signToSignature(message: Message): Promise<SignatureJSON | null>
 }
 
 async function signToSignatureWithPublicKey(message: Message): Promise<SignatureWithPublicKeyJSON | null> {
-	const { keystore, curve, derivationPath, password, toSign, combinedKeystoreId } = message.payload as SignMessage
-	const walletData = await vault.get()
+	const { runtimeId, keystore, curve, derivationPath, password, toSign, combinedKeystoreId } =
+		message.payload as SignMessage
+	const walletData = await vault.get(runtimeId)
 	if (!walletData) {
 		return null
 	}
@@ -150,14 +156,15 @@ async function signToSignatureWithPublicKey(message: Message): Promise<Signature
 }
 
 export interface GetSecretMessage {
+	runtimeId: string
 	keystore: Keystore
 	password: string
 	combinedKeystoreId: string
 }
 
 async function getSecret(message: Message): Promise<string> {
-	const { keystore, password, combinedKeystoreId } = message.payload as GetSecretMessage
-	const walletData = await vault.get()
+	const { runtimeId, keystore, password, combinedKeystoreId } = message.payload as GetSecretMessage
+	const walletData = await vault.get(runtimeId)
 	if (!walletData) {
 		return null
 	}
@@ -169,13 +176,14 @@ async function getSecret(message: Message): Promise<string> {
 }
 
 export interface GetDataMessage {
+	runtimeId: string
 	keystore: Keystore
 	password: string
 }
 
 async function getData(message: Message): Promise<Data> {
-	const { keystore, password } = message.payload as GetDataMessage
-	const walletData = await vault.get()
+	const { runtimeId, keystore, password } = message.payload as GetDataMessage
+	const walletData = await vault.get(runtimeId)
 	if (!walletData) {
 		return null
 	}

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

@@ -15,10 +15,10 @@ export const handleChange = (text: string, suggest: (suggestResults: Omnibox.Sug
 				directive: 'website:redirect',
 			})
 			.then(redirectVal => {
-				if (redirectVal) {
+				if (redirectVal?.value) {
 					suggest([
 						{
-							content: `@redirect:${redirectVal}`,
+							content: `@redirect:${redirectVal?.value}`,
 							description: `Go to <match>${text}</match>'s website`,
 							deletable: false,
 						},

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { generateId } from 'ui/src/utils/generate-id'
+import { generateId } from 'ui/src/utils/rand'
 
 import { eventFromMessage } from '@src/browser/messages/message'
 import timeout, { reason } from '@src/browser/messages/timeout'

apps/extension/src/browser/manifest/manifest.ts

@@ -16,6 +16,7 @@ const permissions = [
 	'scripting',
 	'contextMenus',
 	'idle',
+	'sidePanel',
 ]
 
 const manifest: ManifestV3Export = {
@@ -27,6 +28,9 @@ const manifest: ManifestV3Export = {
 	short_name: 'Z3US',
 	description: 'An open source community centered browser wallet for the Radix DLT network.',
 	omnibox: { keyword: 'z3us' },
+	side_panel: {
+		default_path: 'src/pages/app/system.html',
+	},
 	action: {
 		default_popup: 'src/pages/app/system.html',
 		default_title: 'Z3US',

apps/extension/src/browser/messages/message.ts

@@ -1,4 +1,4 @@
-import { generateId } from 'ui/src/utils/generate-id'
+import { generateId } from 'ui/src/utils/rand'
 
 import type { Message, MessageAction, MessageSource, ResponseMessage, ResponseMessageData, Z3USEvent } from './types'
 

apps/extension/src/browser/side-panel/context-menu.ts

@@ -0,0 +1,21 @@
+import browser from 'webextension-polyfill'
+
+const menuId = 'z3us-side-panel'
+
+const openSidePanel = async ({ menuItemId }, tab) => {
+	if (menuItemId !== menuId) return
+	if (chrome?.sidePanel) {
+		await (chrome.sidePanel as any).open({ windowId: tab.windowId })
+	} else {
+		await browser.sidebarAction.open()
+	}
+}
+
+export const addSidePanel = () => {
+	browser.contextMenus.create({
+		id: menuId,
+		title: 'Open in Side Panel',
+		contexts: ['all'],
+	})
+	browser.contextMenus.onClicked.addListener(openSidePanel)
+}

apps/extension/src/browser/vault/vault.ts

@@ -11,6 +11,7 @@ import { getSecret, removeSecret, saveSecret, setConnectionPassword } from './st
 
 type WalletData = {
 	timer?: NodeJS.Timeout
+	runtimeId: string
 	keystore: Keystore
 	data: Data
 }
@@ -40,7 +41,7 @@ export class Vault {
 		return this.wallet
 	}
 
-	unlock = async (keystore: Keystore, password: string): Promise<WalletData> => {
+	unlock = async (keystore: Keystore, runtimeId: string, password: string): Promise<WalletData> => {
 		const release = await this.mutex.acquire()
 		try {
 			const secret = await getSecret(keystore.id)
@@ -53,7 +54,7 @@ export class Vault {
 			if (this.wallet?.timer) {
 				clearTimeout(this.wallet.timer)
 			}
-			this.wallet = { keystore, data }
+			this.wallet = { keystore, data, runtimeId }
 			if (walletUnlockTimeoutInMinutes > 0) {
 				this.wallet.timer = setTimeout(this.lock, walletUnlockTimeoutInMinutes * 60 * 1000)
 			}
@@ -68,19 +69,16 @@ export class Vault {
 		return this.wallet
 	}
 
-	get = async (): Promise<WalletData | null> => {
+	get = async (runtimeId: string): Promise<WalletData | null> => {
 		const release = await this.mutex.acquire()
 		try {
 			if (!this.wallet) {
-				throw new Error('Locked')
+				await this.clearState()
 			}
-		} catch (error) {
-			await this.clearState()
-			throw error
 		} finally {
 			release()
 
-			await this.restartTimer()
+			await this.restartTimer(runtimeId)
 		}
 
 		return this.wallet
@@ -136,60 +134,71 @@ export class Vault {
 	}
 
 	private lockOnTimer = async () => {
-		await sharedStore.persist.rehydrate()
-		const { selectedKeystoreId } = sharedStore.getState()
-
-		const noneSharedStore = await getNoneSharedStore(selectedKeystoreId)
-		await noneSharedStore.persist.rehydrate()
-		const { walletUnlockTimeoutInMinutes } = noneSharedStore.getState()
-
-		if (this.wallet?.keystore.id !== selectedKeystoreId) {
-			// eslint-disable-next-line no-console
-			console.error(
-				`Vault.lockOnTimer memory keystore ${this.wallet?.keystore.id} !== selected keystore ${selectedKeystoreId}`,
-			)
-		} else if (walletUnlockTimeoutInMinutes > 0) {
-			const release = await this.mutex.acquire()
-			try {
+		const release = await this.mutex.acquire()
+		try {
+			if (!this.wallet) {
+				return
+			}
+
+			await sharedStore.persist.rehydrate()
+			const { selectedKeystoreId } = sharedStore.getState()
+
+			const noneSharedStore = await getNoneSharedStore(selectedKeystoreId)
+			await noneSharedStore.persist.rehydrate()
+			const { walletUnlockTimeoutInMinutes } = noneSharedStore.getState()
+
+			if (this.wallet?.keystore.id !== selectedKeystoreId) {
+				// eslint-disable-next-line no-console
+				console.error(
+					`Vault.lockOnTimer memory keystore ${this.wallet?.keystore.id} !== selected keystore ${selectedKeystoreId}`,
+				)
+			} else if (walletUnlockTimeoutInMinutes > 0) {
 				await this.clearState()
-			} finally {
-				release()
 			}
+		} finally {
+			release()
 		}
 	}
 
-	private clearState = async () => {
-		if (this.wallet?.timer) {
-			clearTimeout(this.wallet.timer)
-		}
-		this.wallet = null
-		await this.setConnectionPassword()
-	}
+	private restartTimer = async (currentRuntimeId: string) => {
+		const release = await this.mutex.acquire()
+		try {
+			if (!this.wallet) {
+				return
+			}
 
-	private restartTimer = async () => {
-		if (this.wallet) {
+			const { runtimeId, timer } = this.wallet
 			await sharedStore.persist.rehydrate()
 			const { selectedKeystoreId } = sharedStore.getState()
 
 			const noneSharedStore = await getNoneSharedStore(selectedKeystoreId)
 			await noneSharedStore.persist.rehydrate()
 			const { walletUnlockTimeoutInMinutes } = noneSharedStore.getState()
 
-			const release = await this.mutex.acquire()
-			try {
-				if (this.wallet?.timer) {
-					clearTimeout(this.wallet.timer)
+			if (walletUnlockTimeoutInMinutes === -1 && currentRuntimeId !== runtimeId) {
+				await this.clearState()
+			} else {
+				if (timer) {
+					clearTimeout(timer)
 				}
 				if (walletUnlockTimeoutInMinutes > 0) {
 					this.wallet.timer = setTimeout(this.lockOnTimer, walletUnlockTimeoutInMinutes * 60 * 1000)
 				}
-			} catch (error) {
-				await this.lock()
-				throw error
-			} finally {
-				release()
 			}
+		} catch (error) {
+			await this.lock()
+			throw error
+		} finally {
+			release()
+		}
+	}
+
+	private clearState = async () => {
+		if (this.wallet?.timer) {
+			clearTimeout(this.wallet.timer)
 		}
+		this.wallet = null
+		await this.setConnectionPassword()
 	}
 
 	private setConnectionPassword = async () => {

apps/extension/src/components/forms/styles.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import { sprinkles } from 'ui/src/components/system/sprinkles.css'
+import { sprinkles } from 'ui/src/theme/sprinkles.css'
 
 export const modalContentFormButtonWrapper = style([
 	sprinkles({
@@ -10,5 +10,4 @@ export const modalContentFormButtonWrapper = style([
 		gap: 'small',
 		paddingTop: 'medium',
 	}),
-	{},
 ])