@mysten-incubation/dev-wallet 0.0.0

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

@@ -0,0 +1,336 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ClientWithCoreApi } from '@mysten/sui/client';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import { CopyController } from './copy-controller.js';
+import { sectionHeaderStyles, sharedStyles, stateStyles } from './styles.js';
+import { getTypeName, isCoinType } from './utils.js';
+
+interface OwnedObject {
+	objectId: string;
+	type: string;
+	typeName: string;
+	version: string;
+	displayName: string | null;
+	description: string | null;
+	imageUrl: string | null;
+}
+
+@customElement('dev-wallet-objects')
+export class DevWalletObjects extends LitElement {
+	static override styles = [
+		sharedStyles,
+		sectionHeaderStyles,
+		stateStyles,
+		css`
+			:host {
+				display: block;
+			}
+
+			.object-list {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+
+			.object-item {
+				display: flex;
+				gap: 10px;
+				padding: 10px 12px;
+				border-radius: var(--dev-wallet-radius-sm);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-secondary);
+				align-items: flex-start;
+			}
+
+			.object-thumb {
+				width: 40px;
+				height: 40px;
+				border-radius: var(--dev-wallet-radius-xs);
+				object-fit: cover;
+				flex-shrink: 0;
+			}
+
+			.object-body {
+				display: flex;
+				flex-direction: column;
+				gap: 2px;
+				flex: 1;
+				min-width: 0;
+			}
+
+			.object-top {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			.object-type {
+				font-size: 13px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-foreground);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.object-type-badge {
+				font-size: 10px;
+				color: var(--dev-wallet-muted-foreground);
+				opacity: 0.8;
+			}
+
+			.object-description {
+				font-size: 11px;
+				color: var(--dev-wallet-muted-foreground);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.object-version {
+				font-size: 11px;
+				color: var(--dev-wallet-muted-foreground);
+				flex-shrink: 0;
+			}
+
+			.object-id {
+				font-size: 11px;
+				font-family: var(--dev-wallet-font-mono);
+				color: var(--dev-wallet-muted-foreground);
+				cursor: pointer;
+				border-radius: var(--dev-wallet-radius-2xs);
+				padding: 1px 2px;
+				margin: -1px -2px;
+				transition: background 0.15s;
+			}
+
+			.object-id:hover {
+				background: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);
+			}
+
+			.object-id.copied {
+				color: var(--dev-wallet-positive);
+			}
+
+			.load-more {
+				margin-top: 8px;
+				width: 100%;
+				padding: 8px;
+				border-radius: var(--dev-wallet-radius-sm);
+				font-size: 12px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-primary);
+				background: transparent;
+				border: 1px solid var(--dev-wallet-border);
+				transition: background 0.15s;
+			}
+
+			.load-more:hover {
+				background: var(--dev-wallet-secondary);
+			}
+
+			.load-more:disabled {
+				opacity: 0.5;
+				cursor: default;
+			}
+		`,
+	];
+
+	@property({ type: String })
+	address = '';
+
+	@property({ attribute: false })
+	client: ClientWithCoreApi | null = null;
+
+	@state()
+	private _objects: OwnedObject[] = [];
+
+	@state()
+	private _loading = false;
+
+	@state()
+	private _loadingMore = false;
+
+	@state()
+	private _error: string | null = null;
+
+	@state()
+	private _hasNextPage = false;
+
+	#copy = new CopyController(this);
+	#cursor: string | null = null;
+	#lastFetchedAddress = '';
+	#lastFetchedClient: ClientWithCoreApi | null = null;
+	#fetchGeneration = 0;
+
+	override willUpdate(changedProperties: Map<string, unknown>) {
+		if (
+			(changedProperties.has('address') || changedProperties.has('client')) &&
+			this.address &&
+			this.client &&
+			(this.address !== this.#lastFetchedAddress || this.client !== this.#lastFetchedClient)
+		) {
+			this.#fetchObjects(false);
+		}
+	}
+
+	override render() {
+		if (!this.address || !this.client) {
+			return nothing;
+		}
+
+		return html`
+			<h3 class="section-header">Objects</h3>
+			${this._loading
+				? html`<div class="loading" part="loading" aria-live="polite">Loading...</div>`
+				: this._error
+					? html`<div class="error-state" part="error-message" aria-live="polite">
+							${this._error}
+						</div>`
+					: this._objects.length === 0
+						? html`<div class="empty-state" part="empty-state">No objects found</div>`
+						: html`
+								<div class="object-list" part="object-list">
+									${this._objects.map(
+										(obj) => html`
+											<div class="object-item">
+												${obj.imageUrl && /^https?:\/\//i.test(obj.imageUrl)
+													? html`<img
+															class="object-thumb"
+															src=${obj.imageUrl}
+															alt=${obj.displayName ?? obj.typeName}
+															@error=${(e: Event) =>
+																((e.target as HTMLImageElement).style.display = 'none')}
+														/>`
+													: nothing}
+												<div class="object-body">
+													<div class="object-top">
+														<span class="object-type"> ${obj.displayName ?? obj.typeName} </span>
+														<span class="object-version">v${obj.version}</span>
+													</div>
+													${obj.displayName
+														? html`<span class="object-type-badge">${obj.typeName}</span>`
+														: nothing}
+													${obj.description
+														? html`<span class="object-description">${obj.description}</span>`
+														: nothing}
+													<span
+														class="object-id ${this.#copy.isCopied(obj.objectId) ? 'copied' : ''}"
+														title="Click to copy"
+														role="button"
+														tabindex="0"
+														aria-label="Copy object ID"
+														@click=${() => this.#copy.copy(obj.objectId)}
+														@keydown=${(e: KeyboardEvent) => {
+															if (e.key === 'Enter' || e.key === ' ') {
+																e.preventDefault();
+																this.#copy.copy(obj.objectId);
+															}
+														}}
+													>
+														${this.#copy.isCopied(obj.objectId)
+															? 'Copied!'
+															: `${obj.objectId.slice(0, 10)}...${obj.objectId.slice(-8)}`}
+													</span>
+												</div>
+											</div>
+										`,
+									)}
+								</div>
+								${this._hasNextPage
+									? html`
+											<button
+												class="load-more"
+												part="load-more-button"
+												?disabled=${this._loadingMore}
+												@click=${this.#loadMore}
+											>
+												${this._loadingMore ? 'Loading...' : 'Load More'}
+											</button>
+										`
+									: nothing}
+							`}
+		`;
+	}
+
+	async #fetchObjects(append: boolean) {
+		this.#lastFetchedAddress = this.address;
+		this.#lastFetchedClient = this.client;
+
+		if (!append) {
+			this.#cursor = null;
+			this._objects = [];
+		}
+
+		const generation = ++this.#fetchGeneration;
+		if (append) {
+			this._loadingMore = true;
+		} else {
+			this._loading = true;
+		}
+		this._error = null;
+
+		try {
+			const result = await this.client!.core.listOwnedObjects({
+				owner: this.address,
+				limit: 20,
+				cursor: this.#cursor,
+				include: { json: true },
+			});
+
+			if (generation !== this.#fetchGeneration) return;
+
+			// Filter out Coin types — those are shown in the balances tab
+			const nonCoinObjects: OwnedObject[] = result.objects
+				.filter((obj) => !isCoinType(obj.type))
+				.map((obj) => {
+					const json = obj.json;
+					return {
+						objectId: obj.objectId,
+						type: obj.type,
+						typeName: getTypeName(obj.type),
+						version: obj.version,
+						displayName: extractString(json, 'name'),
+						description: extractString(json, 'description'),
+						imageUrl: extractString(json, 'image_url') ?? extractString(json, 'img_url'),
+					};
+				});
+
+			this._objects = append ? [...this._objects, ...nonCoinObjects] : nonCoinObjects;
+			this._hasNextPage = result.hasNextPage;
+			this.#cursor = result.cursor;
+		} catch {
+			if (generation !== this.#fetchGeneration) return;
+			this._error = 'Failed to load objects';
+			if (!append) this._objects = [];
+		} finally {
+			if (generation === this.#fetchGeneration) {
+				this._loading = false;
+				this._loadingMore = false;
+			}
+		}
+	}
+
+	#loadMore() {
+		this.#fetchObjects(true);
+	}
+}
+
+function extractString(
+	json: Record<string, unknown> | null | undefined,
+	key: string,
+): string | null {
+	if (!json) return null;
+	const val = json[key];
+	return typeof val === 'string' && val.length > 0 ? val : null;
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-objects': DevWalletObjects;
+	}
+}

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

@@ -0,0 +1,207 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import type { DevWallet } from '../wallet/dev-wallet.js';
+import { connectDialogStyles, sharedStyles } from './styles.js';
+import { WalletController } from './wallet-controller.js';
+
+@customElement('dev-wallet-panel')
+export class DevWalletPanel extends LitElement {
+	static override styles = [
+		sharedStyles,
+		connectDialogStyles,
+		css`
+			:host {
+				display: block;
+				position: fixed;
+				bottom: 16px;
+				right: 16px;
+				z-index: 999999;
+				font-size: 14px;
+			}
+
+			.trigger {
+				width: 48px;
+				height: 48px;
+				border-radius: 50%;
+				background: var(--dev-wallet-primary);
+				color: var(--dev-wallet-primary-foreground);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-shadow: var(--dev-wallet-shadow-md);
+				transition: transform 0.15s;
+				position: relative;
+			}
+
+			.trigger:hover {
+				transform: scale(1.05);
+			}
+
+			.trigger svg {
+				width: 24px;
+				height: 24px;
+			}
+
+			.sidebar {
+				position: absolute;
+				bottom: 56px;
+				right: 0;
+				width: 360px;
+				max-width: calc(100vw - 32px);
+				max-height: 520px;
+				border-radius: var(--dev-wallet-radius-xl);
+				background: var(--dev-wallet-background);
+				border: 1px solid var(--dev-wallet-border);
+				box-shadow: var(--dev-wallet-shadow-lg);
+				display: flex;
+				flex-direction: column;
+			}
+
+			.sidebar-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 14px 16px;
+				border-bottom: 1px solid var(--dev-wallet-border);
+				position: relative;
+				z-index: 1;
+			}
+
+			.sidebar-title {
+				font-size: 15px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.close-btn {
+				font-size: 18px;
+				color: var(--dev-wallet-muted-foreground);
+				width: 28px;
+				height: 28px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: var(--dev-wallet-radius-xs);
+			}
+
+			.close-btn:hover {
+				background: var(--dev-wallet-secondary);
+			}
+
+			.sidebar-body {
+				padding: 16px;
+				overflow-y: auto;
+				overflow-x: hidden;
+				flex: 1;
+				min-height: 0;
+			}
+
+			.section {
+				margin-bottom: 16px;
+			}
+
+			.section:last-child {
+				margin-bottom: 0;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	wallet: DevWallet | null = null;
+
+	@state()
+	private _isOpen = false;
+
+	#ctrl = new WalletController(this);
+	#hadPendingRequest = false;
+
+	override willUpdate(changedProperties: Map<string, unknown>) {
+		if (changedProperties.has('wallet')) {
+			this.#ctrl.wallet = this.wallet;
+		}
+	}
+
+	override updated() {
+		// Refresh balances only when transitioning from having a pending request to not
+		const hasPending = this.#ctrl.pendingRequest !== null;
+		if (this.#hadPendingRequest && !hasPending) {
+			this.updateComplete.then(() => {
+				this.shadowRoot
+					?.querySelector<
+						import('./dev-wallet-balances.js').DevWalletBalances
+					>('dev-wallet-balances')
+					?.refresh();
+			});
+		}
+		this.#hadPendingRequest = hasPending;
+
+		const dialog = this.shadowRoot?.querySelector<HTMLDialogElement>('.connect-dialog');
+		if (this.#ctrl.pendingConnect && dialog && !dialog.open) {
+			dialog.showModal();
+		} else if (!this.#ctrl.pendingConnect && dialog?.open) {
+			dialog.close();
+		}
+	}
+
+	override render() {
+		return html`
+			${this._isOpen ? this.#renderSidebar() : nothing}
+			<button
+				class="trigger"
+				part="trigger"
+				aria-label="Open Dev Wallet"
+				@click=${this.#togglePanel}
+			>
+				${this.#walletIcon}
+			</button>
+			${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}
+		`;
+	}
+
+	#renderSidebar() {
+		return html`
+			<div class="sidebar" part="sidebar">
+				<div class="sidebar-header">
+					<span class="sidebar-title">${this.wallet?.name ?? 'Dev Wallet'}</span>
+					${this.#ctrl.renderNetworkBadge()}
+					<button
+						class="close-btn"
+						part="close-button"
+						aria-label="Close"
+						@click=${this.#togglePanel}
+					>
+						&times;
+					</button>
+				</div>
+				<div class="sidebar-body">${this.#ctrl.renderTabContent()}</div>
+				${this.#ctrl.renderTabBar()}
+			</div>
+		`;
+	}
+
+	get #walletIcon() {
+		return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+			<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>`;
+	}
+
+	#togglePanel() {
+		this._isOpen = !this._isOpen;
+		if (this._isOpen) {
+			this.#ctrl.syncState();
+		}
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-panel': DevWalletPanel;
+	}
+}

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

@@ -0,0 +1,169 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ClientWithCoreApi } from '@mysten/sui/client';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import type { PendingSigningRequest } from '../wallet/dev-wallet.js';
+import { sharedStyles } from './styles.js';
+import './dev-wallet-connect.js';
+import './dev-wallet-signing.js';
+
+@customElement('dev-wallet-popup')
+export class DevWalletPopup extends LitElement {
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				min-height: 100vh;
+				padding: 20px;
+			}
+
+			.popup-card {
+				width: 360px;
+				max-height: min(600px, 80vh);
+				border-radius: var(--dev-wallet-radius-xl);
+				background: var(--dev-wallet-background);
+				border: 1px solid var(--dev-wallet-border);
+				box-shadow: var(--dev-wallet-shadow-lg);
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+			}
+
+			.popup-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 14px 16px;
+				border-bottom: 1px solid var(--dev-wallet-border);
+			}
+
+			.popup-title {
+				font-size: 15px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.popup-body {
+				flex: 1;
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+			}
+		`,
+	];
+
+	@property({ type: String })
+	walletName = 'Dev Wallet (Web)';
+
+	@property({ type: String })
+	requestType:
+		| 'connect'
+		| 'sign-transaction'
+		| 'sign-and-execute-transaction'
+		| 'sign-personal-message' = 'connect';
+
+	@property({ type: String })
+	appName = '';
+
+	@property({ type: String })
+	appUrl = '';
+
+	@property({ type: String })
+	address = '';
+
+	@property({ type: String })
+	accountLabel = '';
+
+	@property({ type: String })
+	chain = '';
+
+	@property({ attribute: false })
+	data: string | Uint8Array | null = null;
+
+	@property({ attribute: false })
+	client: ClientWithCoreApi | null = null;
+
+	@property({ attribute: false })
+	connectAccounts: Array<{ address: string; label?: string; adapterName?: string }> = [];
+
+	@state()
+	private _request: PendingSigningRequest | null = null;
+
+	#requestId: string | null = null;
+
+	override willUpdate(changed: Map<string, unknown>) {
+		if (
+			this.requestType !== 'connect' &&
+			(changed.has('requestType') ||
+				changed.has('address') ||
+				changed.has('accountLabel') ||
+				changed.has('chain') ||
+				changed.has('data'))
+		) {
+			if (!this.#requestId) {
+				this.#requestId = crypto.randomUUID();
+			}
+			this._request = {
+				id: this.#requestId,
+				type: this.requestType as PendingSigningRequest['type'],
+				account: {
+					address: this.address,
+					label: this.accountLabel || undefined,
+					publicKey: new Uint8Array(0),
+					chains: [],
+					features: [],
+				},
+				chain: this.chain,
+				data: this.data ?? '',
+			};
+		}
+	}
+
+	override render() {
+		return html`
+			<div class="popup-card" part="card">
+				<div class="popup-header">
+					<span class="popup-title">${this.walletName}</span>
+				</div>
+				<div class="popup-body">
+					${this.requestType === 'connect' ? this.#renderConnect() : this.#renderSigning()}
+				</div>
+			</div>
+		`;
+	}
+
+	#renderConnect() {
+		return html`
+			<dev-wallet-connect
+				exportparts="approve-button: connect-approve-button, reject-button: connect-reject-button, account-list: connect-account-list, error-message: connect-error-message"
+				.appName=${this.appName}
+				.appUrl=${this.appUrl}
+				.accounts=${this.connectAccounts}
+			></dev-wallet-connect>
+		`;
+	}
+
+	#renderSigning() {
+		if (!this._request) return html``;
+
+		return html`
+			<dev-wallet-signing
+				exportparts="approve-button: signing-approve-button, reject-button: signing-reject-button, request-type: signing-request-type, empty-state: signing-empty-state, error-message: signing-error-message, footer: signing-footer"
+				.request=${this._request}
+				.client=${this.client}
+			></dev-wallet-signing>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-popup': DevWalletPopup;
+	}
+}