@mysten-incubation/dev-wallet 0.5.0 → 0.6.0

package/src/app/main.ts

@@ -1,10 +1,12 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { getFaucetHost } from '@mysten/sui/faucet';
 import { fromBase64, toBase64 } from '@mysten/sui/utils';
 
 import { RemoteCliAdapter } from '../adapters/remote-cli-adapter.js';
 import type { SignerAdapter } from '../types.js';
+import { ConnectedAppsStore } from '../client/connected-apps.js';
 import { parseWalletRequest } from '../client/request-handler.js';
 import { getNetworkFromChain } from '../wallet/constants.js';
 import { DevWallet } from '../wallet/dev-wallet.js';
@@ -97,7 +99,8 @@ async function createWallet(): Promise<DevWallet> {
 	return new DevWallet({
 		adapters,
 		activeNetwork: 'devnet',
-		persistNetworks: true,
+		persistState: true,
+		faucets: { devnet: getFaucetHost('devnet'), localnet: getFaucetHost('localnet') },
 	});
 }
 
@@ -112,6 +115,7 @@ async function handlePopupRequest(hash: string) {
 		const request = parseWalletRequest({
 			adapters: [...wallet.adapters],
 			jwtSecretKey,
+			connectedApps: new ConnectedAppsStore(),
 			getClient: (network) => {
 				try {
 					return wallet.getClient(network);
@@ -201,7 +205,7 @@ async function showStandaloneUI() {
 
 		const el = document.createElement('dev-wallet-standalone') as DevWalletStandalone;
 		el.wallet = wallet;
-		el.bookmarkletOrigin = window.location.origin;
+		el.connectedApps = new ConnectedAppsStore();
 		app.appendChild(el);
 	} catch (error) {
 		showErrorMessage(app, 'Failed to initialize wallet', error);

package/src/client/connected-apps.ts

@@ -0,0 +1,79 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { readPersisted } from '../wallet/persisted.js';
+
+/** localStorage key for the connected-apps list. Bump the suffix on shape changes. */
+export const CONNECTED_APPS_STORAGE_KEY = 'dev-wallet:connected-apps:v1';
+
+/** A dApp the user approved a connection for in the standalone wallet. */
+export interface ConnectedApp {
+	/** The dApp's origin — the identity sessions are scoped to. */
+	origin: string;
+	/** Display name the dApp sent (its page title). */
+	name: string;
+	/** Addresses shared with the dApp. */
+	accounts: string[];
+	/** Milliseconds since epoch of the latest approval. */
+	connectedAt: number;
+}
+
+function isConnectedApp(value: unknown): value is ConnectedApp {
+	if (typeof value !== 'object' || value === null) return false;
+	const app = value as Record<string, unknown>;
+	return (
+		typeof app.origin === 'string' &&
+		typeof app.name === 'string' &&
+		Array.isArray(app.accounts) &&
+		app.accounts.every((a) => typeof a === 'string') &&
+		typeof app.connectedAt === 'number'
+	);
+}
+
+/**
+ * Connected dApps for a standalone wallet, stored in the wallet origin's
+ * localStorage so the popup (which records connections) and the wallet page
+ * (which lists them) share it. Removing an app makes the popup reject that
+ * origin's signing requests until it reconnects.
+ */
+export class ConnectedAppsStore {
+	readonly #storage: Storage;
+
+	constructor(storage: Storage = localStorage) {
+		this.#storage = storage;
+	}
+
+	/** Connected apps, most recently connected first. */
+	list(): ConnectedApp[] {
+		const apps = readPersisted(this.#storage, CONNECTED_APPS_STORAGE_KEY, (value) =>
+			Array.isArray(value) && value.every(isConnectedApp) ? value : null,
+		);
+		return (apps ?? []).sort((a, b) => b.connectedAt - a.connectedAt);
+	}
+
+	has(origin: string): boolean {
+		return this.list().some((app) => app.origin === origin);
+	}
+
+	/** Add an app, or replace the entry for its origin. */
+	record(app: ConnectedApp): void {
+		this.#write([app, ...this.list().filter((a) => a.origin !== app.origin)]);
+	}
+
+	remove(origin: string): void {
+		this.#write(this.list().filter((a) => a.origin !== origin));
+	}
+
+	/** Call `callback` when another window (e.g. the signing popup) changes the list. */
+	subscribe(callback: () => void): () => void {
+		const onStorage = (e: StorageEvent) => {
+			if (e.key === CONNECTED_APPS_STORAGE_KEY || e.key === null) callback();
+		};
+		window.addEventListener('storage', onStorage);
+		return () => window.removeEventListener('storage', onStorage);
+	}
+
+	#write(apps: ConnectedApp[]): void {
+		this.#storage.setItem(CONNECTED_APPS_STORAGE_KEY, JSON.stringify(apps));
+	}
+}

package/src/client/dev-wallet-client.ts

@@ -223,7 +223,8 @@ export class DevWalletClient implements Wallet {
 
 	#createChannel(): DappPostMessageChannel {
 		return new DappPostMessageChannel({
-			appName: this.#name,
+			// Identifies the requesting dApp in the wallet's approval popup.
+			appName: globalThis.document?.title || globalThis.location?.host || this.#name,
 			hostOrigin: this.#origin,
 		});
 	}

package/src/client/index.ts

@@ -5,3 +5,5 @@ export { DevWalletClient, devWalletClientInitializer } from './dev-wallet-client
 export type { DevWalletClientOptions } from './dev-wallet-client.js';
 export { parseWalletRequest } from './request-handler.js';
 export type { PendingWalletRequest, HandleRequestOptions } from './request-handler.js';
+export { ConnectedAppsStore, CONNECTED_APPS_STORAGE_KEY } from './connected-apps.js';
+export type { ConnectedApp } from './connected-apps.js';

package/src/client/request-handler.ts

@@ -6,6 +6,7 @@ import { fromBase64, toBase64 } from '@mysten/sui/utils';
 import { createJwtSession, WalletPostMessageChannel } from '@mysten/window-wallet-core';
 
 import type { SignerAdapter } from '../types.js';
+import type { ConnectedAppsStore } from './connected-apps.js';
 import { getNetworkFromChain } from '../wallet/constants.js';
 import { executeSigning } from '../wallet/signing.js';
 
@@ -41,6 +42,12 @@ export interface HandleRequestOptions {
 	getClient?: (network: string) => ClientWithCoreApi | undefined;
 	/** URL hash containing the encoded request. Defaults to window.location.hash. */
 	hash?: string;
+	/**
+	 * Tracks connected dApps. When set, approved connects are recorded here and
+	 * signing requests from an origin that isn't in the store are rejected, so
+	 * removing an app disconnects it.
+	 */
+	connectedApps?: ConnectedAppsStore;
 }
 
 export function parseWalletRequest(options: HandleRequestOptions): PendingWalletRequest {
@@ -53,6 +60,7 @@ export function parseWalletRequest(options: HandleRequestOptions): PendingWallet
 	const channel = WalletPostMessageChannel.fromUrlHash(hash);
 	const requestData = channel.getRequestData();
 	const payload = requestData.payload;
+	const appOrigin = new URL(requestData.appUrl).origin;
 
 	if (payload.type === 'connect') {
 		return {
@@ -78,10 +86,17 @@ export function parseWalletRequest(options: HandleRequestOptions): PendingWallet
 						secretKey: options.jwtSecretKey,
 						expirationTime: '7d',
 						issuer: 'dev-wallet',
-						audience: new URL(requestData.appUrl).origin,
+						audience: appOrigin,
 					},
 				);
 
+				options.connectedApps?.record({
+					origin: appOrigin,
+					name: requestData.appName,
+					accounts: accounts.map((a) => a.address),
+					connectedAt: Date.now(),
+				});
+
 				channel.sendMessage({
 					type: 'resolve',
 					data: { type: 'connect', session },
@@ -116,6 +131,14 @@ export function parseWalletRequest(options: HandleRequestOptions): PendingWallet
 				return;
 			}
 
+			if (options.connectedApps && !options.connectedApps.has(appOrigin)) {
+				channel.sendMessage({
+					type: 'reject',
+					reason: `${appOrigin} was disconnected from the wallet. Reconnect to continue.`,
+				});
+				return;
+			}
+
 			let account;
 			for (const adapter of options.adapters) {
 				account = adapter.getAccount(payload.address);

package/src/inject/index.ts

@@ -52,6 +52,10 @@ export interface DevstackNetworkInfo {
 export interface RegisterDevstackDevWalletConfig {
 	/** Wallet-app origin (the dev-wallet connection's `walletUrl`). */
 	readonly serverOrigin: string;
+	/** Browser page origins accepted by the devstack wallet server. When the
+	 *  current page is not in this list, the HTTP adapter will be CORS-blocked;
+	 *  this is non-secret metadata used only for a local diagnostic. */
+	readonly allowedOrigins?: ReadonlyArray<string>;
 	/** Bearer pairing token (read by the Vite dev server from the wallet's
 	 *  `0o600` side-channel token file), or null. */
 	readonly token?: string | null;
@@ -97,6 +101,56 @@ declare global {
 	var __devstackDevWalletPromise__: Promise<RegisterDevstackDevWalletResult> | undefined;
 }
 
+const currentPageOrigin = (): string | null => {
+	const location = (globalThis as { location?: { origin?: unknown } }).location;
+	return typeof location?.origin === 'string' && location.origin.length > 0
+		? location.origin
+		: null;
+};
+
+const originMatchesAllowed = (origin: string, allowed: string): boolean => {
+	if (!allowed.includes('*')) return origin === allowed;
+	let originUrl: URL;
+	let patternUrl: URL;
+	try {
+		originUrl = new URL(origin);
+		patternUrl = new URL(allowed.replace('*', 'devstack-origin-probe'));
+	} catch {
+		return false;
+	}
+	if (originUrl.origin !== origin) return false;
+	if (originUrl.protocol !== patternUrl.protocol || originUrl.port !== patternUrl.port) {
+		return false;
+	}
+	const originLabels = originUrl.hostname.toLowerCase().split('.');
+	const patternLabels = patternUrl.hostname.toLowerCase().split('.');
+	return (
+		originLabels.length === patternLabels.length &&
+		patternLabels[0] === 'devstack-origin-probe' &&
+		originLabels[0]!.length > 0 &&
+		originLabels.slice(1).join('.') === patternLabels.slice(1).join('.')
+	);
+};
+
+const assertPageOriginAllowed = (allowedOrigins: ReadonlyArray<string> | undefined): void => {
+	if (allowedOrigins === undefined || allowedOrigins.length === 0) return;
+	const origin = currentPageOrigin();
+	if (origin === null || origin === 'null') return;
+	if (allowedOrigins.some((allowed) => originMatchesAllowed(origin, allowed))) return;
+
+	const recommended = allowedOrigins.find((allowed) => !allowed.includes('*')) ?? allowedOrigins[0];
+	const allowedList = allowedOrigins.join(', ');
+	const guidance =
+		recommended === undefined
+			? ''
+			: ` Open ${recommended}, or add wallet({ allowedOrigins: ['${origin}'] }) if this origin is intentional.`;
+	const message =
+		`[devstack] dev wallet is not available from page origin ${origin}. ` +
+		`Allowed origins: ${allowedList}.${guidance}`;
+	console.error(message);
+	throw new Error(`devstack dev wallet page origin ${origin} is not allowlisted`);
+};
+
 /**
  * Construct + register the devstack dev wallet on the current page and wire
  * the Playwright `connectAs` slot. Idempotent: a second call is a no-op and
@@ -138,6 +192,7 @@ async function registerDevstackDevWalletImpl(
 ): Promise<RegisterDevstackDevWalletResult> {
 	const { mountUI = true, autoApprove = false } = config;
 	globalThis.__DEV_WALLET_INJECTED__ = true;
+	assertPageOriginAllowed(config.allowedOrigins);
 
 	// Resolve the FULL network set up front so it can be advertised both on
 	// the wallet (its `chains`) and on every devstack account (per-account

package/src/ui/dev-wallet-balances.ts

@@ -117,7 +117,6 @@ export class DevWalletBalances extends LitElement {
 				margin-bottom: 0;
 			}
 
-			.manage-btn,
 			.action-btn {
 				height: 30px;
 				padding: 0 10px;
@@ -129,18 +128,12 @@ export class DevWalletBalances extends LitElement {
 				font-weight: var(--dev-wallet-font-weight-medium);
 			}
 
-			.manage-btn:hover,
 			.action-btn:hover:not(:disabled) {
 				background: var(--dev-wallet-bg-hover);
 				border-color: var(--dev-wallet-border-strong);
 				color: var(--dev-wallet-foreground);
 			}
 
-			.manage-btn:disabled {
-				opacity: 0.48;
-				cursor: not-allowed;
-			}
-
 			.balance-hero {
 				display: flex;
 				align-items: center;
@@ -210,6 +203,10 @@ export class DevWalletBalances extends LitElement {
 				color: var(--dev-wallet-foreground);
 			}
 
+			.empty-copy a {
+				color: var(--dev-wallet-foreground);
+			}
+
 			.empty-copy {
 				margin-top: 6px;
 				font-size: 12px;
@@ -271,14 +268,25 @@ export class DevWalletBalances extends LitElement {
 	}
 
 	/** Request SUI from the active network's faucet for the active address,
-	 *  then refresh balances. No-op when no `faucetHost` is configured (live
-	 *  mainnet / fork stacks have none). */
+	 *  wait for the faucet's transfers to land, then refresh balances. No-op
+	 *  when no `faucetHost` is configured (live mainnet / fork stacks have none). */
 	async #requestFromFaucet() {
 		if (!this.faucetHost || !this.address || this._funding) return;
 		this._funding = true;
 		this._fundError = null;
 		try {
-			await requestSuiFromFaucetV2({ host: this.faucetHost, recipient: this.address });
+			const result = await requestSuiFromFaucetV2({
+				host: this.faucetHost,
+				recipient: this.address,
+			});
+			const client = this.client;
+			if (client) {
+				const digests = new Set(result.coins_sent?.map((c) => c.transferTxDigest) ?? []);
+				// Best effort: the funds were sent even if waiting times out.
+				await Promise.allSettled(
+					[...digests].map((digest) => client.core.waitForTransaction({ digest, timeout: 30_000 })),
+				);
+			}
 			this.refresh();
 		} catch (error) {
 			this._fundError =
@@ -346,7 +354,6 @@ export class DevWalletBalances extends LitElement {
 				: nothing}
 			<div class="coins-header">
 				<h3 class="section-header">Coins · ${this._balances.length}</h3>
-				<button class="manage-btn" disabled>Manage</button>
 			</div>
 			${this._loading
 				? html`<div class="loading" part="loading" aria-live="polite">Loading...</div>`
@@ -361,8 +368,13 @@ export class DevWalletBalances extends LitElement {
 									${this.faucetHost
 										? html`Use the Faucet button above to fund ${formatAddress(this.address)} on
 											${networkLabel}, then refresh.`
-										: html`Fund ${formatAddress(this.address)} from your local faucet or devstack
-											seed, then refresh balances here.`}
+										: this.network === 'testnet'
+											? html`Get testnet SUI for ${formatAddress(this.address)} at
+													<a href="https://faucet.sui.io" target="_blank" rel="noopener noreferrer"
+														>faucet.sui.io</a
+													>, then refresh.`
+											: html`Fund ${formatAddress(this.address)} from your local faucet or devstack
+												seed, then refresh balances here.`}
 								</div>
 							</div>`
 						: html`