@mysten-incubation/dev-wallet 0.0.0

package/src/ui/utils.ts

@@ -0,0 +1,118 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { normalizeStructTag, parseStructTag } from '@mysten/sui/utils';
+
+const NORMALIZED_SUI_COIN_TYPE =
+	'0x0000000000000000000000000000000000000000000000000000000000000002::sui::SUI';
+
+const NORMALIZED_COIN_PREFIX =
+	'0x0000000000000000000000000000000000000000000000000000000000000002::coin::Coin<';
+
+export function isSuiCoinType(coinType: string): boolean {
+	try {
+		return normalizeStructTag(coinType) === NORMALIZED_SUI_COIN_TYPE;
+	} catch {
+		return false;
+	}
+}
+
+export function formatAddress(address: string): string {
+	if (address.length <= 16) return address;
+	return `${address.slice(0, 8)}...${address.slice(-6)}`;
+}
+
+export function getCoinSymbol(coinType: string): string {
+	try {
+		const tag = parseStructTag(coinType);
+		return tag.name;
+	} catch {
+		return coinType;
+	}
+}
+
+/** Check if a type string is a Coin wrapper (0x2::coin::Coin<...>) */
+export function isCoinType(type: string): boolean {
+	try {
+		return normalizeStructTag(type).startsWith(NORMALIZED_COIN_PREFIX);
+	} catch {
+		return false;
+	}
+}
+
+/** Extract the short struct name from a full Move type string */
+export function getTypeName(type: string): string {
+	try {
+		return parseStructTag(type).name;
+	} catch {
+		return type;
+	}
+}
+
+export async function copyToClipboard(text: string): Promise<boolean> {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+export const NETWORK_COLORS: Record<string, string> = {
+	mainnet: '#f97316',
+	testnet: '#22c55e',
+	devnet: '#3b82f6',
+	localnet: '#6b7280',
+};
+
+export interface PairableAdapter {
+	readonly isPaired: boolean;
+}
+
+export function isPairableAdapter(adapter: unknown): adapter is PairableAdapter {
+	return adapter != null && typeof adapter === 'object' && 'isPaired' in adapter;
+}
+
+/** Dispatch a composed, bubbling custom event from a host element. */
+export function emitEvent(host: HTMLElement, name: string, detail?: unknown): void {
+	host.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));
+}
+
+/** Clone a Set and toggle an item in/out of it. */
+export function toggleSetItem<T>(set: Set<T>, item: T): Set<T> {
+	const next = new Set(set);
+	if (next.has(item)) {
+		next.delete(item);
+	} else {
+		next.add(item);
+	}
+	return next;
+}
+
+/** Extract a user-facing error message, with a fallback for non-Error throws. */
+export function getErrorMessage(error: unknown, fallback: string): string {
+	return error instanceof Error ? error.message : fallback;
+}
+
+export { getNetworkFromChain } from '../wallet/constants.js';
+
+/** Find the adapter that owns a given address. */
+export function findAdapterForAddress<T extends { getAccount(address: string): unknown }>(
+	adapters: readonly T[],
+	address: string,
+): T | undefined {
+	return adapters.find((a) => a.getAccount(address) !== undefined);
+}
+
+export function formatCoinBalance(balance: string | bigint, decimals: number): string {
+	if (decimals === 0) return balance.toString();
+
+	const value = typeof balance === 'string' ? BigInt(balance) : balance;
+	const divisor = BigInt(10 ** decimals);
+	const whole = value / divisor;
+	const fraction = value % divisor;
+
+	if (fraction === 0n) return whole.toString();
+	const fractionStr = fraction.toString().padStart(decimals, '0').replace(/0+$/, '');
+	return `${whole}.${fractionStr}`;
+}

package/src/ui/wallet-controller.ts

@@ -0,0 +1,340 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ClientWithCoreApi } from '@mysten/sui/client';
+import type { ReadonlyWalletAccount } from '@mysten/wallet-standard';
+import { html, nothing } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+import { getNetworkFromChain } from '../wallet/constants.js';
+import type {
+	DevWallet,
+	PendingConnectRequest,
+	PendingSigningRequest,
+} from '../wallet/dev-wallet.js';
+import './dev-wallet-account-selector.js';
+import './dev-wallet-balances.js';
+import './dev-wallet-connect.js';
+import './dev-wallet-network-badge.js';
+import './dev-wallet-objects.js';
+import './dev-wallet-settings.js';
+import './dev-wallet-signing-modal.js';
+import type { TabId } from './dev-wallet-tab-bar.js';
+import './dev-wallet-tab-bar.js';
+
+/**
+ * Lit Reactive Controller that encapsulates all shared wallet management logic
+ * between `dev-wallet-panel` and `dev-wallet-standalone`.
+ *
+ * Both components delegate state management, event subscription, and shared
+ * render fragments to this controller, keeping only layout-specific code.
+ */
+export class WalletController implements ReactiveController {
+	host: ReactiveControllerHost;
+
+	activeTab: TabId = 'assets';
+	accounts: ReadonlyWalletAccount[] = [];
+	activeAccountIndex = 0;
+	pendingRequest: PendingSigningRequest | null = null;
+	pendingConnect: PendingConnectRequest | null = null;
+	bookmarkletOrigin = '';
+
+	#wallet: DevWallet | null = null;
+	#unsubscribeEvents: (() => void) | null = null;
+	#unsubscribeRequests: (() => void) | null = null;
+	#unsubscribeConnect: (() => void) | null = null;
+
+	constructor(host: ReactiveControllerHost) {
+		this.host = host;
+		host.addController(this);
+	}
+
+	get wallet(): DevWallet | null {
+		return this.#wallet;
+	}
+
+	get activeAddress(): string {
+		return this.accounts[this.activeAccountIndex]?.address ?? '';
+	}
+
+	set wallet(value: DevWallet | null) {
+		if (value === this.#wallet) return;
+		this.#unsubscribe();
+		this.#wallet = value;
+		this.#subscribe();
+		this.syncState();
+	}
+
+	hostConnected(): void {
+		this.#subscribe();
+		this.syncState();
+	}
+
+	hostDisconnected(): void {
+		this.#unsubscribe();
+	}
+
+	// ── State sync ──────────────────────────────────────────────────────────
+
+	syncState(): void {
+		if (!this.#wallet) return;
+		const newAccounts = this.#wallet.accounts;
+		const newPending = this.#wallet.pendingRequest;
+
+		const accountsChanged =
+			newAccounts.length !== this.accounts.length ||
+			newAccounts.some((a, i) => a.address !== this.accounts[i]?.address);
+		const pendingChanged = newPending !== this.pendingRequest;
+
+		if (!accountsChanged && !pendingChanged) return;
+
+		if (accountsChanged) {
+			this.accounts = [...newAccounts];
+			// Clamp activeAccountIndex when accounts shrink
+			if (this.activeAccountIndex >= newAccounts.length && newAccounts.length > 0) {
+				this.activeAccountIndex = newAccounts.length - 1;
+			}
+		}
+		this.pendingRequest = newPending;
+		this.host.requestUpdate();
+	}
+
+	syncConnectState(): void {
+		if (!this.#wallet) return;
+		const newConnect = this.#wallet.pendingConnect;
+		if (newConnect === this.pendingConnect) return;
+		this.pendingConnect = newConnect;
+		this.host.requestUpdate();
+	}
+
+	// ── Client resolution ───────────────────────────────────────────────────
+
+	getActiveClient(): ClientWithCoreApi | null {
+		if (!this.#wallet) return null;
+
+		if (this.pendingRequest) {
+			const network = getNetworkFromChain(this.pendingRequest.chain);
+			if (network) {
+				try {
+					return this.#wallet.getClient(network);
+				} catch {
+					return this.#wallet.activeClient;
+				}
+			}
+		}
+
+		return this.#wallet.activeClient;
+	}
+
+	// ── Event handlers ──────────────────────────────────────────────────────
+
+	async handleApprove(): Promise<void> {
+		if (!this.#wallet) return;
+		try {
+			await this.#wallet.approveRequest();
+		} catch (error) {
+			console.error('[dev-wallet] approve failed:', error);
+		}
+	}
+
+	handleReject(): void {
+		if (!this.#wallet) return;
+		try {
+			this.#wallet.rejectRequest();
+		} catch (error) {
+			console.error('[dev-wallet] reject failed:', error);
+		}
+	}
+
+	handleTabChanged(e: CustomEvent<{ tab: TabId }>): void {
+		this.activeTab = e.detail.tab;
+		this.host.requestUpdate();
+	}
+
+	handleNetworkChanged(e: CustomEvent<{ network: string }>): void {
+		this.#wallet?.setActiveNetwork(e.detail.network);
+	}
+
+	handleAccountSelected(e: CustomEvent<{ account: ReadonlyWalletAccount }>): void {
+		const index = this.accounts.findIndex((a) => a.address === e.detail.account.address);
+		if (index !== -1) {
+			this.activeAccountIndex = index;
+			this.host.requestUpdate();
+		}
+	}
+
+	handleApproveConnect(e: CustomEvent<{ selectedAddresses: string[] }>): void {
+		e.stopPropagation();
+		if (!this.#wallet) return;
+		try {
+			this.#wallet.approveConnect(e.detail.selectedAddresses);
+		} catch (error) {
+			console.error('[dev-wallet] connect approve failed:', error);
+		}
+	}
+
+	handleRejectConnect(e?: Event): void {
+		e?.preventDefault();
+		if (e instanceof CustomEvent) e.stopPropagation();
+		if (!this.#wallet) return;
+		try {
+			this.#wallet.rejectConnect();
+		} catch (error) {
+			console.error('[dev-wallet] connect reject failed:', error);
+		}
+	}
+
+	// ── Shared render fragments ─────────────────────────────────────────────
+
+	renderAccountSelector() {
+		return html`
+			<div class="section">
+				<dev-wallet-account-selector
+					exportparts="trigger: selector-trigger, copy-button: selector-copy-button, empty-state: selector-empty-state"
+					.accounts=${this.accounts}
+					.adapters=${this.#wallet ? [...this.#wallet.adapters] : []}
+					.activeAddress=${this.activeAddress}
+					@account-selected=${(e: CustomEvent) => this.handleAccountSelected(e)}
+				></dev-wallet-account-selector>
+			</div>
+		`;
+	}
+
+	renderAssetsTab() {
+		return html`
+			${this.renderAccountSelector()}
+			${this.activeAddress && this.#wallet
+				? html`
+						<div class="section">
+							<dev-wallet-balances
+								exportparts="balance-list, loading: balances-loading, error-message: balances-error-message, empty-state: balances-empty-state"
+								.address=${this.activeAddress}
+								.client=${this.getActiveClient()}
+							></dev-wallet-balances>
+						</div>
+					`
+				: nothing}
+		`;
+	}
+
+	renderObjectsTab() {
+		return html`
+			${this.renderAccountSelector()}
+			<dev-wallet-objects
+				exportparts="object-list, loading: objects-loading, error-message: objects-error-message, empty-state: objects-empty-state, load-more-button"
+				.address=${this.activeAddress}
+				.client=${this.getActiveClient()}
+			></dev-wallet-objects>
+		`;
+	}
+
+	renderSettingsTab() {
+		return html`
+			<dev-wallet-settings
+				exportparts="accounts-account-list, accounts-add-button, accounts-empty-state"
+				.wallet=${this.#wallet}
+				.accounts=${this.accounts}
+				.adapters=${this.#wallet ? [...this.#wallet.adapters] : []}
+				.activeAddress=${this.activeAddress}
+				.bookmarkletOrigin=${this.bookmarkletOrigin}
+				@account-selected=${(e: CustomEvent) => this.handleAccountSelected(e)}
+			></dev-wallet-settings>
+		`;
+	}
+
+	renderTabContent() {
+		if (this.activeTab === 'assets') return this.renderAssetsTab();
+		if (this.activeTab === 'objects') return this.renderObjectsTab();
+		if (this.activeTab === 'settings') return this.renderSettingsTab();
+		return nothing;
+	}
+
+	renderSigningModal() {
+		if (!this.pendingRequest) return nothing;
+
+		return html`
+			<dev-wallet-signing-modal
+				exportparts="signing-approve-button, signing-reject-button, signing-request-type, signing-empty-state, signing-error-message, signing-footer, dialog: signing-dialog"
+				.request=${this.pendingRequest}
+				.client=${this.getActiveClient()}
+				.walletName=${this.#wallet?.name ?? 'Dev Wallet'}
+				@approve=${() => this.handleApprove()}
+				@reject=${() => this.handleReject()}
+			></dev-wallet-signing-modal>
+		`;
+	}
+
+	renderConnectPicker() {
+		if (!this.pendingConnect) return nothing;
+
+		const allAccounts = this.#wallet
+			? this.#wallet.adapters.flatMap((a) =>
+					a.getAccounts().map((acc) => ({
+						address: acc.address,
+						label: acc.label,
+						adapterName: a.name,
+					})),
+				)
+			: [];
+
+		return html`
+			<dialog class="connect-dialog" @cancel=${(e: Event) => this.handleRejectConnect(e)}>
+				<div class="connect-dialog-header">
+					<span class="connect-dialog-title">${this.#wallet?.name ?? 'Dev Wallet'}</span>
+				</div>
+				<dev-wallet-connect
+					exportparts="approve-button: connect-approve-button, reject-button: connect-reject-button, account-list: connect-account-list, error-message: connect-error-message"
+					.accounts=${allAccounts}
+					@approve=${(e: CustomEvent) => this.handleApproveConnect(e)}
+					@reject=${(e: Event) => this.handleRejectConnect(e)}
+				></dev-wallet-connect>
+			</dialog>
+		`;
+	}
+
+	renderNetworkBadge() {
+		if (!this.#wallet) return nothing;
+		return html`
+			<dev-wallet-network-badge
+				exportparts="trigger: network-trigger"
+				.active=${this.#wallet.activeNetwork}
+				.networks=${this.#wallet.availableNetworks}
+				@network-changed=${(e: CustomEvent) => this.handleNetworkChanged(e)}
+			></dev-wallet-network-badge>
+		`;
+	}
+
+	renderTabBar() {
+		return html`
+			<dev-wallet-tab-bar
+				exportparts="tab-bar, tab"
+				.active=${this.activeTab}
+				@tab-changed=${(e: CustomEvent) => this.handleTabChanged(e)}
+			></dev-wallet-tab-bar>
+		`;
+	}
+
+	// ── Subscriptions ───────────────────────────────────────────────────────
+
+	#subscribe(): void {
+		if (!this.#wallet) return;
+		this.#unsubscribeEvents = this.#wallet.features['standard:events'].on('change', () => {
+			this.syncState();
+		});
+		this.#unsubscribeRequests = this.#wallet.onRequestChange(() => {
+			this.syncState();
+		});
+		this.#unsubscribeConnect = this.#wallet.onConnectChange(() => {
+			this.syncConnectState();
+		});
+	}
+
+	#unsubscribe(): void {
+		this.#unsubscribeEvents?.();
+		this.#unsubscribeEvents = null;
+		this.#unsubscribeRequests?.();
+		this.#unsubscribeRequests = null;
+		this.#unsubscribeConnect?.();
+		this.#unsubscribeConnect = null;
+	}
+}

package/src/wallet/constants.ts

@@ -0,0 +1,17 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StandardEventsListeners, WalletIcon } from '@mysten/wallet-standard';
+
+export type WalletEventsMap = {
+	[E in keyof StandardEventsListeners]: Parameters<StandardEventsListeners[E]>[0];
+};
+
+/** Extract the network name from a chain identifier (e.g. 'sui:devnet' → 'devnet'). */
+export function getNetworkFromChain(chain: string): string | undefined {
+	return chain.split(':')[1];
+}
+
+/** Default wallet icon shared between DevWallet and DevWalletClient. */
+export const DEFAULT_WALLET_ICON: WalletIcon =
+	'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0id2FsbGV0R3JhZCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiM2MzY2RjEiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6IzI1NjNFQiIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImZsYXBHcmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzgxOENGOCIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojNEY0NkU1IiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPCEtLSBTaGFkb3cgLS0+CiAgPHJlY3QgeD0iOSIgeT0iMjEiIHdpZHRoPSI1MCIgaGVpZ2h0PSIzNiIgcng9IjYiIHJ5PSI2IiBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjEiIC8+CiAgPCEtLSBXYWxsZXQgYm9keSAtLT4KICA8cmVjdCB4PSI2IiB5PSIxOCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjM2IiByeD0iNiIgcnk9IjYiIGZpbGw9InVybCgjd2FsbGV0R3JhZCkiIC8+CiAgPCEtLSBGbGFwIC0tPgogIDxwYXRoIGQ9Ik02IDI2IEw2IDIyIEM2IDE1IDggMTIgMTQgMTIgTDQ2IDEyIEM1MiAxMiA1NiAxNSA1NiAyMiBMNTYgMjYgWiIgZmlsbD0idXJsKCNmbGFwR3JhZCkiIC8+CiAgPCEtLSBDbGFzcCAtLT4KICA8cmVjdCB4PSI0MiIgeT0iMzAiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgcng9IjQiIHJ5PSI0IiBmaWxsPSIjNDMzOENBIiAvPgogIDwhLS0gR29sZCBjb2luIGluIGNsYXNwIC0tPgogIDxjaXJjbGUgY3g9IjQ4IiBjeT0iMzYiIHI9IjMuNSIgZmlsbD0iI0ZDRDM0RCIgLz4KICA8Y2lyY2xlIGN4PSI0OCIgY3k9IjM2IiByPSIyIiBmaWxsPSIjRjU5RTBCIiAvPgogIDwhLS0gRW1ib3NzZWQgRFcgdGV4dCAtLT4KICA8dGV4dCB4PSIyNiIgeT0iNDUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjE4IiBmaWxsPSIjMzczMEEzIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiBsZXR0ZXItc3BhY2luZz0iMiI+RFc8L3RleHQ+CiAgPHRleHQgeD0iMjYiIHk9IjQ0IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjkwMCIgZm9udC1zaXplPSIxOCIgZmlsbD0iI0M3RDJGRSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGxlIiBsZXR0ZXItc3BhY2luZz0iMiI+RFc8L3RleHQ+Cjwvc3ZnPgo=';