@mysten-incubation/dev-wallet 0.5.0 → 0.6.0

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

@@ -1,14 +1,19 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import type { DevWallet } from '../wallet/dev-wallet.js';
+import type { ConnectedAppsStore } from '../client/connected-apps.js';
+import './dev-wallet-connect-guide.js';
+import './dev-wallet-connected-apps.js';
 import { connectDialogStyles, sharedStyles } from './styles.js';
 import type { CoinRecord } from './utils.js';
 import { WalletController } from './wallet-controller.js';
 
+const DOCS_URL = 'https://ts-sdks-incubation.vercel.app/dev-wallet';
+
 @customElement('dev-wallet-standalone')
 export class DevWalletStandalone extends LitElement {
 	static override styles = [
@@ -29,147 +34,65 @@ export class DevWalletStandalone extends LitElement {
 				background-position: -1px -1px;
 			}
 
+			/* Wallet centered: connect help on the left, connected apps on the right. */
 			.standalone-layout {
 				width: 100%;
-				max-width: 1220px;
-				min-height: calc(100vh - 48px);
 				margin: 0 auto;
 				padding: 24px 0;
 				display: grid;
-				grid-template-columns: minmax(240px, 1fr) 480px minmax(260px, 1fr);
-				gap: 20px;
+				grid-template-columns: minmax(0, 1fr) 480px minmax(0, 1fr);
+				gap: 36px;
 				align-items: start;
 			}
 
-			.rail {
-				min-width: 0;
-				display: flex;
-				flex-direction: column;
-				gap: 16px;
-				padding-top: 6px;
-			}
-
-			.wordmark {
-				display: flex;
-				align-items: center;
-				gap: 10px;
-			}
-
-			.logo-mark {
-				width: 28px;
-				height: 28px;
-				border-radius: 9px;
-				display: inline-flex;
-				align-items: center;
-				justify-content: center;
-				color: var(--dev-wallet-primary-foreground);
-				background:
-					radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.5), transparent 24px),
-					linear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));
-				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
-			}
-
-			.logo-mark svg {
-				width: 18px;
-				height: 18px;
-			}
-
-			.wordmark-title {
-				display: flex;
-				flex-direction: column;
-				line-height: 1.1;
+			.card {
+				grid-column: 2;
 			}
 
-			.wordmark-title strong {
-				font-size: 16px;
-				font-weight: var(--dev-wallet-font-weight-semibold);
+			.rail-left {
+				grid-column: 1;
+				justify-self: end;
+				width: 100%;
 			}
 
-			.version {
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 9px;
-				letter-spacing: 0.12em;
-				text-transform: uppercase;
-				color: var(--dev-wallet-text-3);
+			.rail-right {
+				grid-column: 3;
 			}
 
-			.rail-section {
+			.rail {
+				max-width: 348px;
+				min-width: 0;
 				display: flex;
 				flex-direction: column;
-				gap: 8px;
-			}
-
-			.rail-title {
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 10px;
-				font-weight: var(--dev-wallet-font-weight-medium);
-				letter-spacing: 0.14em;
-				text-transform: uppercase;
-				color: var(--dev-wallet-text-3);
-			}
-
-			.code {
-				margin: 0;
-				overflow: auto;
-				white-space: pre;
-				padding: 10px 12px;
-				border-radius: var(--dev-wallet-radius);
-				border: 1px solid var(--dev-wallet-border);
-				background: var(--dev-wallet-bg-0);
-				color: var(--dev-wallet-foreground);
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 11.5px;
+				gap: 24px;
+				padding-top: 8px;
+				font-size: 12px;
 				line-height: 1.55;
+				color: var(--dev-wallet-muted-foreground);
 			}
 
-			.status-list {
+			.about {
+				padding-top: 16px;
+				border-top: 1px solid var(--dev-wallet-border);
 				display: flex;
 				flex-direction: column;
 				gap: 6px;
+				font-size: 11px;
+				color: var(--dev-wallet-text-3);
 			}
 
-			.status-row {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-				min-width: 0;
-				padding: 8px 10px;
-				border-radius: var(--dev-wallet-radius-lg);
-				border: 1px solid var(--dev-wallet-border);
-				background: color-mix(in srgb, var(--dev-wallet-bg-1) 88%, transparent);
-			}
-
-			.status-dot {
-				width: 7px;
-				height: 7px;
-				border-radius: 999px;
-				background: var(--dev-wallet-status-connected);
-				flex-shrink: 0;
-			}
-
-			.status-dot.mute {
-				background: var(--dev-wallet-text-3);
-			}
-
-			.status-copy {
-				min-width: 0;
-				display: flex;
-				flex-direction: column;
-				gap: 1px;
+			.about code {
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 10.5px;
+				color: var(--dev-wallet-muted-foreground);
 			}
 
-			.status-copy strong {
-				font-size: 12px;
-				font-weight: var(--dev-wallet-font-weight-medium);
+			.about a {
+				color: var(--dev-wallet-muted-foreground);
 			}
 
-			.status-copy span {
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 10.5px;
-				color: var(--dev-wallet-text-3);
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
+			.about a:hover {
+				color: var(--dev-wallet-foreground);
 			}
 
 			.card {
@@ -208,19 +131,6 @@ export class DevWalletStandalone extends LitElement {
 				margin-left: auto;
 			}
 
-			.status-dot {
-				width: 8px;
-				height: 8px;
-				border-radius: 50%;
-				background: var(--dev-wallet-status-connected);
-			}
-
-			.status-text {
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 10.5px;
-				color: var(--dev-wallet-muted-foreground);
-			}
-
 			.card-body {
 				overflow-y: auto;
 				flex: 1;
@@ -237,12 +147,18 @@ export class DevWalletStandalone extends LitElement {
 				border-bottom: 0;
 			}
 
-			@media (max-width: 1020px) {
+			/* Too narrow to keep the wallet centered with the aside beside it:
+			   hide the aside. The Settings tab carries the same connect guide. */
+			@media (max-width: 1240px) {
 				.standalone-layout {
 					grid-template-columns: minmax(0, 480px);
 					justify-content: center;
 				}
 
+				.card {
+					grid-column: 1;
+				}
+
 				.rail {
 					display: none;
 				}
@@ -254,7 +170,6 @@ export class DevWalletStandalone extends LitElement {
 				}
 
 				.standalone-layout {
-					min-height: calc(100vh - 24px);
 					padding: 0;
 				}
 
@@ -269,9 +184,10 @@ export class DevWalletStandalone extends LitElement {
 	@property({ attribute: false })
 	wallet: DevWallet | null = null;
 
-	/** When set, the settings tab shows a bookmarklet section pointing to this origin. */
+	/** Origin this wallet is served from. Drives the bookmarklet, console
+	 *  script, and dApp Kit snippet. Defaults to the page's own origin. */
 	@property({ type: String })
-	bookmarkletOrigin = '';
+	walletOrigin = globalThis.location?.origin ?? '';
 
 	/** Optional pre-seeded coin metadata. Pass the generated `coins`
 	 *  constant from devstack codegen to skip per-coin RPC fetches in the
@@ -279,14 +195,22 @@ export class DevWalletStandalone extends LitElement {
 	@property({ attribute: false })
 	coins: CoinRecord | null = null;
 
+	/** Connected-dApps store shared with the signing popup. Pass the same
+	 *  store to `parseWalletRequest` so Disconnect takes effect. */
+	@property({ attribute: false })
+	connectedApps: ConnectedAppsStore | null = null;
+
 	#ctrl = new WalletController(this);
 
 	override willUpdate(changedProperties: Map<string, unknown>) {
 		if (changedProperties.has('wallet')) {
 			this.#ctrl.wallet = this.wallet;
 		}
-		if (changedProperties.has('bookmarkletOrigin')) {
-			this.#ctrl.bookmarkletOrigin = this.bookmarkletOrigin;
+		if (changedProperties.has('walletOrigin')) {
+			this.#ctrl.walletOrigin = this.walletOrigin;
+		}
+		if (changedProperties.has('connectedApps')) {
+			this.#ctrl.connectedApps = this.connectedApps;
 		}
 		if (changedProperties.has('coins')) {
 			this.#ctrl.coins = this.coins;
@@ -305,116 +229,41 @@ export class DevWalletStandalone extends LitElement {
 	override render() {
 		return html`
 			<div class="standalone-layout">
-				<aside class="rail">${this.#renderLeftRail()}</aside>
-				<div class="card" part="card">
+				<aside class="rail rail-left">
+					<dev-wallet-connect-guide .origin=${this.walletOrigin}></dev-wallet-connect-guide>
+					${this.#renderAbout()}
+				</aside>
+				<main class="card" part="card">
 					<div class="card-header">
-						<span class="logo-mark">${this.#walletIcon}</span>
-						<span class="wordmark-title">
-							<span class="card-title">${this.wallet?.name ?? 'Dev Wallet'}</span>
-							<span class="version">v0.1.0</span>
-						</span>
-						<div class="header-right">
-							${this.#ctrl.renderNetworkBadge()}
-							<span class="status-dot"></span>
-							<span class="status-text">Running</span>
-						</div>
+						<span class="card-title">${this.wallet?.name ?? 'Dev Wallet'}</span>
+						<div class="header-right">${this.#ctrl.renderNetworkBadge()}</div>
 					</div>
 					${this.#ctrl.renderTabBar()}
 					<div class="card-body">${this.#ctrl.renderTabContent()}</div>
-				</div>
-				<aside class="rail">${this.#renderRightRail()}</aside>
+				</main>
+				<aside class="rail rail-right">
+					<dev-wallet-connected-apps .store=${this.connectedApps}></dev-wallet-connected-apps>
+				</aside>
 			</div>
 			${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}
 		`;
 	}
 
-	#renderLeftRail() {
-		const origin = this.bookmarkletOrigin || globalThis.location?.origin || 'http://localhost:5174';
-		const quickStart = `npx @mysten-incubation/dev-wallet serve\n${origin}`;
-		const clientSnippet = `createDAppKit({
-  walletInitializers: [
-    devWalletClientInitializer({
-      origin: '${origin}'
-    })
-  ]
-})`;
-		const embeddingSnippet = `createDAppKit({
-  networks: ['devnet'],
-  walletInitializers: [
-    devWalletInitializer({
-      adapters: [
-        new WebCryptoSignerAdapter()
-      ],
-      autoConnect: true,
-      mountUI: true
-    })
-  ]
-})`;
-		return html`
-			<div class="wordmark">
-				<span class="logo-mark">${this.#walletIcon}</span>
-				<span class="wordmark-title">
-					<strong>Dev Wallet</strong>
-					<span class="version">v0.1.0</span>
-				</span>
-			</div>
-			<div class="rail-section">
-				<div class="rail-title">Quick Start</div>
-				<pre class="code">${quickStart}</pre>
-			</div>
-			<div class="rail-section">
-				<div class="rail-title">Embed Wallet</div>
-				<pre class="code">${embeddingSnippet}</pre>
-			</div>
-			<div class="rail-section">
-				<div class="rail-title">Standalone Client</div>
-				<pre class="code">${clientSnippet}</pre>
-			</div>
-			<div class="rail-section">
-				<div class="rail-title">Bookmarklet Endpoint</div>
-				<pre class="code">${origin}/bookmarklet.js</pre>
-			</div>
-		`;
-	}
-
-	#renderRightRail() {
-		const activeNetwork = this.wallet?.activeNetwork ?? 'devnet';
-		const networkUrl = this.wallet?.networkUrls[activeNetwork] ?? 'client configured by dApp Kit';
-		const accountCount = this.wallet?.accounts.length ?? 0;
-		const adapterCount = this.wallet?.adapters.length ?? 0;
-		const adapterNames =
-			this.wallet?.adapters.map((adapter) => adapter.name).join(', ') ?? 'No adapters';
+	#renderAbout() {
+		const isLocal = /^https?:\/\/(localhost|127\.0\.0\.1)(:|$)/.test(this.walletOrigin);
 		return html`
-			<div class="rail-section">
-				<div class="rail-title">Wallet Status</div>
-				<div class="status-list">
-					<div class="status-row">
-						<span class="status-dot"></span>
-						<span class="status-copy">
-							<strong>Network: ${activeNetwork}</strong>
-							<span>${networkUrl}</span>
-						</span>
-					</div>
-					<div class="status-row">
-						<span class="status-dot mute"></span>
-						<span class="status-copy">
-							<strong>${accountCount} account(s)</strong>
-							<span>${adapterCount} adapter(s): ${adapterNames}</span>
-						</span>
-					</div>
-				</div>
-			</div>
+			<footer class="about">
+				<span>Keys are stored in this browser only. Don't hold real funds here.</span>
+				${isLocal
+					? nothing
+					: html`<span>
+							For your <code>sui</code> CLI keys or localnet, run it locally:
+							<code>npx @mysten-incubation/dev-wallet serve</code>
+						</span>`}
+				<a href=${DOCS_URL} target="_blank" rel="noopener noreferrer">Documentation ↗</a>
+			</footer>
 		`;
 	}
-
-	get #walletIcon() {
-		return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
-			<rect x="2" y="6" width="20" height="14" rx="2.5" />
-			<path d="M2 10h20" />
-			<rect x="15" y="12" width="5" height="4" rx="1" />
-			<circle cx="17.5" cy="14" r="0.5" fill="currentColor" stroke="none" />
-		</svg>`;
-	}
 }
 
 declare global {

package/src/ui/index.ts

@@ -5,6 +5,8 @@ export { DevWalletPanel } from './dev-wallet-panel.js';
 export { DevWalletAccounts } from './dev-wallet-accounts.js';
 export { DevWalletBalances } from './dev-wallet-balances.js';
 export { DevWalletConnect } from './dev-wallet-connect.js';
+export { DevWalletConnectGuide } from './dev-wallet-connect-guide.js';
+export { DevWalletConnectedApps } from './dev-wallet-connected-apps.js';
 export { DevWalletNewAccount } from './dev-wallet-new-account.js';
 export { DevWalletObjects } from './dev-wallet-objects.js';
 export { DevWalletPopup } from './dev-wallet-popup.js';

package/src/ui/wallet-controller.ts

@@ -7,6 +7,7 @@ import { html, nothing } from 'lit';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
 import type { ForkRelay } from '../adapters/fork-relay.js';
+import type { ConnectedAppsStore } from '../client/connected-apps.js';
 import { getNetworkFromChain } from '../wallet/constants.js';
 import type {
 	DevWallet,
@@ -41,7 +42,11 @@ export class WalletController implements ReactiveController {
 	activeAccountIndex = 0;
 	pendingRequest: PendingSigningRequest | null = null;
 	pendingConnect: PendingConnectRequest | null = null;
-	bookmarkletOrigin = '';
+	/** Origin of a standalone/hosted wallet. When set, Settings leads with the
+	 *  connect guide (bookmarklet + dApp Kit snippet). */
+	walletOrigin = '';
+	/** Connected-dApps store for a standalone wallet; listed in Settings. */
+	connectedApps: ConnectedAppsStore | null = null;
 	/** Pre-seeded coin metadata (typically the generated `coins` constant from
 	 *  devstack codegen). Forwarded to `<dev-wallet-balances>` and the
 	 *  signing modal so they can skip per-coin RPC waterfalls. */
@@ -58,6 +63,7 @@ export class WalletController implements ReactiveController {
 	forkUpstream = '';
 
 	#wallet: DevWallet | null = null;
+	#networkKey = '';
 	#unsubscribeEvents: (() => void) | null = null;
 	#unsubscribeRequests: (() => void) | null = null;
 	#unsubscribeConnect: (() => void) | null = null;
@@ -103,11 +109,23 @@ export class WalletController implements ReactiveController {
 			newAccounts.length !== this.accounts.length ||
 			newAccounts.some((a, i) => a.address !== this.accounts[i]?.address);
 		const pendingChanged = newPending !== this.pendingRequest;
+		// Network switches and network add/remove only emit `change`; without
+		// this the badge, balances client, and faucet stay on the old network.
+		const networkKey = `${this.#wallet.activeNetwork}|${this.#wallet.availableNetworks.join(',')}`;
+		const networkChanged = networkKey !== this.#networkKey;
+		this.#networkKey = networkKey;
 
-		if (!accountsChanged && !pendingChanged) return;
+		if (!accountsChanged && !pendingChanged && !networkChanged) return;
 
 		if (accountsChanged) {
+			const hadAccounts = this.accounts.length > 0;
 			this.accounts = [...newAccounts];
+			// Restore the persisted active account once accounts first load.
+			const persisted = this.#wallet.activeAccount;
+			const restored = persisted ? newAccounts.findIndex((a) => a.address === persisted) : -1;
+			if (!hadAccounts && restored !== -1) {
+				this.activeAccountIndex = restored;
+			}
 			// Clamp activeAccountIndex when accounts shrink
 			if (this.activeAccountIndex >= newAccounts.length && newAccounts.length > 0) {
 				this.activeAccountIndex = newAccounts.length - 1;
@@ -177,6 +195,7 @@ export class WalletController implements ReactiveController {
 		const index = this.accounts.findIndex((a) => a.address === e.detail.account.address);
 		if (index !== -1) {
 			this.activeAccountIndex = index;
+			this.#wallet?.setActiveAccount(e.detail.account.address);
 			this.host.requestUpdate();
 		}
 	}
@@ -263,7 +282,8 @@ export class WalletController implements ReactiveController {
 				.accounts=${this.accounts}
 				.adapters=${this.#wallet ? [...this.#wallet.adapters] : []}
 				.activeAddress=${this.activeAddress}
-				.bookmarkletOrigin=${this.bookmarkletOrigin}
+				.walletOrigin=${this.walletOrigin}
+				.connectedApps=${this.connectedApps}
 				@account-selected=${(e: CustomEvent) => this.handleAccountSelected(e)}
 			></dev-wallet-settings>
 		`;