@mysten-incubation/dev-wallet 0.0.0

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

@@ -0,0 +1,171 @@
+// 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 { sectionHeaderStyles, sharedStyles, stateStyles } from './styles.js';
+import { formatCoinBalance, getCoinSymbol } from './utils.js';
+
+interface CoinBalance {
+	coinType: string;
+	symbol: string;
+	totalBalance: string;
+	decimals: number;
+}
+
+@customElement('dev-wallet-balances')
+export class DevWalletBalances extends LitElement {
+	static override styles = [
+		sharedStyles,
+		sectionHeaderStyles,
+		stateStyles,
+		css`
+			:host {
+				display: block;
+			}
+
+			.balance-list {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+
+			.balance-item {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 10px 12px;
+				border-radius: var(--dev-wallet-radius-sm);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-secondary);
+			}
+
+			.balance-symbol {
+				font-size: 14px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.balance-amount {
+				font-size: 14px;
+				color: var(--dev-wallet-foreground);
+				font-family: var(--dev-wallet-font-mono);
+			}
+		`,
+	];
+
+	@property({ type: String })
+	address = '';
+
+	@property({ attribute: false })
+	client: ClientWithCoreApi | null = null;
+
+	@state()
+	private _balances: CoinBalance[] = [];
+
+	@state()
+	private _loading = false;
+
+	@state()
+	private _error: string | null = null;
+
+	#lastFetchedAddress = '';
+	#lastFetchedClient: ClientWithCoreApi | null = null;
+	#fetchGeneration = 0;
+
+	/** Re-fetch balances for the current address/client. */
+	refresh() {
+		if (this.address && this.client) {
+			this.#fetchBalances();
+		}
+	}
+
+	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.#fetchBalances();
+		}
+	}
+
+	override render() {
+		if (!this.address || !this.client) {
+			return nothing;
+		}
+
+		return html`
+			<h3 class="section-header">Balances</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._balances.length === 0
+						? html`<div class="empty-state" part="empty-state">No balances</div>`
+						: html`
+								<div class="balance-list" part="balance-list">
+									${this._balances.map(
+										(balance) => html`
+											<div class="balance-item">
+												<span class="balance-symbol">${balance.symbol}</span>
+												<span class="balance-amount"
+													>${formatCoinBalance(balance.totalBalance, balance.decimals)}</span
+												>
+											</div>
+										`,
+									)}
+								</div>
+							`}
+		`;
+	}
+
+	async #fetchBalances() {
+		this.#lastFetchedAddress = this.address;
+		this.#lastFetchedClient = this.client;
+		const generation = ++this.#fetchGeneration;
+		this._loading = true;
+		this._error = null;
+
+		try {
+			const { balances } = await this.client!.core.listBalances({ owner: this.address });
+
+			if (generation !== this.#fetchGeneration) return;
+
+			const metadataResults = await Promise.all(
+				balances.map((b) =>
+					this.client!.core.getCoinMetadata({ coinType: b.coinType }).catch(() => null),
+				),
+			);
+
+			if (generation !== this.#fetchGeneration) return;
+			this._balances = balances.map(
+				(b, i): CoinBalance => ({
+					coinType: b.coinType,
+					symbol: metadataResults[i]?.coinMetadata?.symbol ?? getCoinSymbol(b.coinType),
+					totalBalance: b.balance,
+					decimals: metadataResults[i]?.coinMetadata?.decimals ?? 0,
+				}),
+			);
+		} catch {
+			if (generation !== this.#fetchGeneration) return;
+			this._error = 'Failed to load balances';
+			this._balances = [];
+		} finally {
+			if (generation === this.#fetchGeneration) {
+				this._loading = false;
+			}
+		}
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-balances': DevWalletBalances;
+	}
+}

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

@@ -0,0 +1,259 @@
+// 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 { actionButtonStyles, sharedStyles } from './styles.js';
+import { emitEvent, formatAddress, toggleSetItem } from './utils.js';
+
+interface AccountInfo {
+	address: string;
+	label?: string;
+	adapterName?: string;
+}
+
+@customElement('dev-wallet-connect')
+export class DevWalletConnect extends LitElement {
+	static override styles = [
+		sharedStyles,
+		actionButtonStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				min-height: 0;
+			}
+
+			.connect-content {
+				flex: 1;
+				padding: 16px;
+			}
+
+			.connect-header {
+				text-align: center;
+				margin-bottom: 12px;
+			}
+
+			.connect-title {
+				font-size: 14px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.connect-desc {
+				font-size: 12px;
+				color: var(--dev-wallet-muted-foreground);
+				margin-top: 4px;
+			}
+
+			.app-info {
+				margin-top: 8px;
+			}
+
+			.app-name {
+				font-size: 13px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-foreground);
+				display: block;
+			}
+
+			.app-url {
+				font-size: 11px;
+				color: var(--dev-wallet-muted-foreground);
+				word-break: break-all;
+			}
+
+			.account-list {
+				max-height: 240px;
+				overflow-y: auto;
+			}
+
+			.account-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				padding: 8px;
+				border-radius: var(--dev-wallet-radius-md);
+				cursor: pointer;
+			}
+
+			.account-item:hover {
+				background: var(--dev-wallet-secondary);
+			}
+
+			.account-item input[type='checkbox'] {
+				accent-color: var(--dev-wallet-primary);
+			}
+
+			.account-label {
+				font-size: 13px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.account-address {
+				font-size: 11px;
+				font-family: var(--dev-wallet-font-mono);
+				color: var(--dev-wallet-muted-foreground);
+			}
+
+			.account-adapter {
+				display: inline-block;
+				font-size: 9px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				text-transform: uppercase;
+				letter-spacing: 0.3px;
+				padding: 1px 5px;
+				border-radius: var(--dev-wallet-radius-2xs);
+				background: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);
+				color: var(--dev-wallet-primary);
+				margin-left: 6px;
+			}
+
+			.connect-footer {
+				padding: 12px 16px;
+				border-top: 1px solid var(--dev-wallet-border);
+			}
+
+			/* Override: connect uses --primary instead of --positive for approve */
+			.btn-approve {
+				background: var(--dev-wallet-primary);
+			}
+
+			.btn-approve:hover {
+				background: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);
+			}
+
+			.btn-approve:disabled {
+				cursor: default;
+			}
+
+			.error-message {
+				color: var(--dev-wallet-destructive);
+				font-size: 12px;
+				margin-top: 8px;
+				text-align: center;
+			}
+		`,
+	];
+
+	@property({ type: String })
+	appName = '';
+
+	@property({ type: String })
+	appUrl = '';
+
+	@property({ attribute: false })
+	accounts: AccountInfo[] = [];
+
+	@state()
+	private _connecting = false;
+
+	@state()
+	private _error: string | null = null;
+
+	@state()
+	private _selectedAddresses: Set<string> = new Set();
+
+	override willUpdate(changedProperties: Map<string, unknown>) {
+		if (
+			changedProperties.has('accounts') &&
+			this.accounts.length > 0 &&
+			this._selectedAddresses.size === 0
+		) {
+			this._selectedAddresses = new Set(this.accounts.map((a) => a.address));
+		}
+	}
+
+	override render() {
+		return html`
+			<div class="connect-content">
+				<div class="connect-header">
+					<div class="connect-title">Connection Request</div>
+					<div class="connect-desc">Select accounts to share with the app</div>
+					${this.appName
+						? html`
+								<div class="app-info">
+									<span class="app-name">${this.appName}</span>
+									<span class="app-url">${this.appUrl}</span>
+								</div>
+							`
+						: nothing}
+				</div>
+				${this.accounts.length > 0
+					? html`
+							<div class="account-list" part="account-list">
+								${this.accounts.map(
+									(account) => html`
+										<label class="account-item">
+											<input
+												type="checkbox"
+												.checked=${this._selectedAddresses.has(account.address)}
+												@change=${() => this.#toggleAccount(account.address)}
+											/>
+											<div>
+												${account.label
+													? html`<div class="account-label">
+															${account.label}${account.adapterName
+																? html`<span class="account-adapter">${account.adapterName}</span>`
+																: nothing}
+														</div>`
+													: nothing}
+												<div class="account-address">${formatAddress(account.address)}</div>
+											</div>
+										</label>
+									`,
+								)}
+							</div>
+						`
+					: nothing}
+			</div>
+			<div class="connect-footer">
+				<div class="actions">
+					<button class="btn btn-reject" part="reject-button" @click=${this.#reject}>Reject</button>
+					<button
+						class="btn btn-approve"
+						part="approve-button"
+						?disabled=${this._connecting || this._selectedAddresses.size === 0}
+						@click=${this.#approve}
+					>
+						${this._connecting ? 'Connecting...' : `Connect (${this._selectedAddresses.size})`}
+					</button>
+				</div>
+				${this._error
+					? html`<p class="error-message" part="error-message">${this._error}</p>`
+					: nothing}
+			</div>
+		`;
+	}
+
+	get selectedAddresses(): string[] {
+		return [...this._selectedAddresses];
+	}
+
+	#toggleAccount(address: string) {
+		this._selectedAddresses = toggleSetItem(this._selectedAddresses, address);
+	}
+
+	#approve() {
+		this._connecting = true;
+		this._error = null;
+		emitEvent(this, 'approve', { selectedAddresses: this.selectedAddresses });
+	}
+
+	#reject() {
+		emitEvent(this, 'reject');
+	}
+
+	showError(message: string) {
+		this._connecting = false;
+		this._error = message;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-connect': DevWalletConnect;
+	}
+}

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

@@ -0,0 +1,138 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { sharedStyles } from './styles.js';
+import { emitEvent } from './utils.js';
+
+/**
+ * @slot trigger - The element that opens the dropdown (parent handles click to toggle)
+ * @slot popover - The dropdown content
+ */
+@customElement('dev-wallet-dropdown')
+export class DevWalletDropdown extends LitElement {
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				position: relative;
+				display: inline-block;
+			}
+
+			:host([full-width]) {
+				display: block;
+			}
+
+			.popover {
+				position: absolute;
+				top: 100%;
+				left: 0;
+				margin-top: 4px;
+				min-width: 100%;
+				background: var(--dev-wallet-background);
+				border: 1px solid var(--dev-wallet-border);
+				border-radius: var(--dev-wallet-radius-md);
+				box-shadow: var(--dev-wallet-shadow-md);
+				z-index: 10;
+				overflow: hidden;
+				max-height: var(--dropdown-max-height, none);
+				overflow-y: auto;
+			}
+
+			:host([full-width]) .popover {
+				right: 0;
+			}
+		`,
+	];
+
+	@property({ type: Boolean, reflect: true })
+	open = false;
+
+	@property({ type: Boolean, reflect: true, attribute: 'full-width' })
+	fullWidth = false;
+
+	override render() {
+		return html`
+			<slot name="trigger"></slot>
+			${this.open ? html`<div class="popover"><slot name="popover"></slot></div>` : nothing}
+		`;
+	}
+
+	close() {
+		if (this.open) {
+			this.open = false;
+			emitEvent(this, 'close');
+		}
+	}
+
+	#handleDocClick = (e: Event) => {
+		if (this.open && !e.composedPath().includes(this)) {
+			this.close();
+		}
+	};
+
+	#handleKeydown = (e: KeyboardEvent) => {
+		if (!this.open) return;
+
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			this.close();
+			const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+			trigger?.focus();
+			return;
+		}
+
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+			e.preventDefault();
+			const items = Array.from(
+				this.querySelectorAll<HTMLElement>(
+					'[slot="popover"] button, [slot="popover"] [role="option"]',
+				),
+			);
+			if (items.length === 0) return;
+
+			const focused = items.find((el) => el === document.activeElement);
+			let index = focused ? items.indexOf(focused) : -1;
+
+			if (e.key === 'ArrowDown') {
+				index = index < items.length - 1 ? index + 1 : 0;
+			} else {
+				index = index > 0 ? index - 1 : items.length - 1;
+			}
+
+			items[index]?.focus();
+		}
+	};
+
+	override connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('keydown', this.#handleKeydown);
+		if (this.open) {
+			document.addEventListener('click', this.#handleDocClick, true);
+		}
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener('click', this.#handleDocClick, true);
+		this.removeEventListener('keydown', this.#handleKeydown);
+	}
+
+	override willUpdate(changed: Map<string, unknown>) {
+		if (changed.has('open')) {
+			if (this.open) {
+				document.addEventListener('click', this.#handleDocClick, true);
+			} else {
+				document.removeEventListener('click', this.#handleDocClick, true);
+			}
+		}
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-dropdown': DevWalletDropdown;
+	}
+}

package/src/ui/dev-wallet-network-badge.ts

@@ -0,0 +1,128 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import { dropdownItemStyles, sharedStyles } from './styles.js';
+import { NETWORK_COLORS } from './utils.js';
+import './dev-wallet-dropdown.js';
+
+@customElement('dev-wallet-network-badge')
+export class DevWalletNetworkBadge extends LitElement {
+	static override styles = [
+		sharedStyles,
+		dropdownItemStyles,
+		css`
+			:host {
+				display: inline-block;
+			}
+
+			.badge {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				padding: 3px 8px;
+				border-radius: 999px;
+				font-size: 11px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-foreground);
+				background: var(--dev-wallet-secondary);
+				cursor: pointer;
+				transition: background 0.15s;
+			}
+
+			.badge:hover {
+				background: var(--dev-wallet-border);
+			}
+
+			.dot {
+				width: 6px;
+				height: 6px;
+				border-radius: 50%;
+			}
+
+			.chevron {
+				width: 10px;
+				height: 10px;
+				color: var(--dev-wallet-muted-foreground);
+			}
+
+			.dropdown-item {
+				padding: 8px 12px;
+			}
+		`,
+	];
+
+	@property({ type: String })
+	active = '';
+
+	@property({ attribute: false })
+	networks: string[] = [];
+
+	@state()
+	private _open = false;
+
+	override render() {
+		const color = NETWORK_COLORS[this.active] ?? NETWORK_COLORS['localnet'];
+
+		return html`
+			<dev-wallet-dropdown .open=${this._open} @close=${() => (this._open = false)}>
+				<button
+					slot="trigger"
+					class="badge"
+					part="trigger"
+					aria-expanded=${this._open}
+					aria-haspopup="listbox"
+					@click=${() => (this._open = !this._open)}
+				>
+					<span class="dot" style="background: ${color}"></span>
+					${this.active}
+					<svg
+						class="chevron"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.5"
+					>
+						<path d="M6 9l6 6 6-6" />
+					</svg>
+				</button>
+				<div slot="popover">
+					${this.networks.map((network) => {
+						const dotColor = NETWORK_COLORS[network] ?? NETWORK_COLORS['localnet'];
+						return html`
+							<button
+								class="dropdown-item"
+								aria-selected=${network === this.active}
+								@click=${() => this.#select(network)}
+							>
+								<span class="dot" style="background: ${dotColor}"></span>
+								${network}
+							</button>
+						`;
+					})}
+				</div>
+			</dev-wallet-dropdown>
+		`;
+	}
+
+	#select(network: string) {
+		this._open = false;
+		if (network !== this.active) {
+			this.dispatchEvent(
+				new CustomEvent('network-changed', {
+					bubbles: true,
+					composed: true,
+					detail: { network },
+				}),
+			);
+		}
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-network-badge': DevWalletNetworkBadge;
+	}
+}