@aztec/wallet-sdk 0.0.1-commit.fffb133c → 0.0.1-dev

package/src/iframe/provider/iframe_discovery.ts

@@ -0,0 +1,185 @@
+/**
+ * Web wallet discovery — creates {@link IframeWalletProvider} instances from a list of URLs.
+ *
+ * For each configured URL we probe the wallet by loading a tiny invisible iframe,
+ * waiting for WALLET_READY, then sending a DISCOVERY request. On a successful
+ * DISCOVERY_RESPONSE we emit an IframeWalletProvider to the caller.
+ *
+ * This is intentionally lightweight (no key exchange yet) — key exchange happens
+ * later when the user selects the wallet and calls `provider.establishSecureChannel()`.
+ */
+import type { ChainInfo } from '@aztec/aztec.js/account';
+import { promiseWithResolvers } from '@aztec/foundation/promise';
+
+import type { DiscoverySession, WalletProvider } from '../../manager/types.js';
+import { type WalletInfo, WalletMessageType } from '../../types.js';
+import { IframeWalletProvider } from './iframe_provider.js';
+
+const PROBE_TIMEOUT_MS = 10_000;
+
+/**
+ * Probes a list of web wallet URLs and returns a {@link DiscoverySession} compatible
+ * with WalletManager's `getAvailableWallets()` interface.
+ *
+ * Discovered {@link IframeWalletProvider} instances are yielded asynchronously as each
+ * wallet responds to the probe.
+ *
+ * @param walletUrls - URLs of web wallets to probe
+ * @param chainInfo - Network information to pass during discovery
+ * @returns A cancellable discovery session
+ */
+export function discoverWebWallets(walletUrls: string[], chainInfo: ChainInfo): DiscoverySession {
+  const { promise: donePromise, resolve: resolveDone } = promiseWithResolvers<void>();
+
+  /* eslint-disable jsdoc/require-jsdoc */
+  type IteratorState =
+    | { status: 'discovering'; resolve: ((result: IteratorResult<WalletProvider>) => void) | null }
+    | { status: 'done' };
+  /* eslint-enable jsdoc/require-jsdoc */
+
+  let state: IteratorState = { status: 'discovering', resolve: null };
+  const pendingProviders: WalletProvider[] = [];
+
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  function emit(provider: WalletProvider) {
+    if (state.status !== 'discovering') {
+      return;
+    }
+    if (state.resolve) {
+      const resolve = state.resolve;
+      state.resolve = null;
+      resolve({ value: provider, done: false });
+    } else {
+      pendingProviders.push(provider);
+    }
+  }
+
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  function markComplete() {
+    if (state.status !== 'discovering') {
+      return;
+    }
+    const pendingResolve = state.resolve;
+    state = { status: 'done' };
+    resolveDone();
+    if (pendingResolve) {
+      pendingResolve({ value: undefined as unknown as WalletProvider, done: true });
+    }
+  }
+
+  // Probe all URLs in parallel
+  const probes = walletUrls.map(url =>
+    probeWallet(url, chainInfo, PROBE_TIMEOUT_MS).then(
+      provider => {
+        if (provider) {
+          emit(provider);
+        }
+      },
+      () => {
+        // ignore probe errors
+      },
+    ),
+  );
+
+  void Promise.all(probes).then(markComplete);
+
+  const wallets: AsyncIterable<WalletProvider> = {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    [Symbol.asyncIterator](): AsyncIterator<WalletProvider> {
+      return {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        next(): Promise<IteratorResult<WalletProvider>> {
+          if (pendingProviders.length > 0) {
+            return Promise.resolve({ value: pendingProviders.shift()!, done: false });
+          }
+          if (state.status === 'done') {
+            return Promise.resolve({ value: undefined as unknown as WalletProvider, done: true });
+          }
+          return new Promise(resolve => {
+            if (state.status === 'discovering') {
+              state.resolve = resolve;
+            }
+          });
+        },
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        return(): Promise<IteratorResult<WalletProvider>> {
+          markComplete();
+          return Promise.resolve({ value: undefined as unknown as WalletProvider, done: true });
+        },
+      };
+    },
+  };
+
+  return {
+    wallets,
+    done: donePromise,
+    cancel: markComplete,
+  };
+}
+
+/**
+ * Probes a single web wallet URL.
+ * Creates a temporary hidden iframe, waits for WALLET_READY, sends DISCOVERY_REQUEST.
+ * Returns an IframeWalletProvider on success, null on timeout/failure.
+ * @internal
+ */
+function probeWallet(walletUrl: string, chainInfo: ChainInfo, timeoutMs: number): Promise<IframeWalletProvider | null> {
+  const walletOrigin = new URL(walletUrl).origin;
+  const iframe = document.createElement('iframe');
+  iframe.src = walletUrl;
+  iframe.style.cssText = 'display:none;width:0;height:0;border:none;position:absolute;top:-9999px;';
+  iframe.allow = 'storage-access; cross-origin-isolated';
+  let timer: ReturnType<typeof setTimeout>;
+
+  // Register listener BEFORE appending to DOM to avoid race with WALLET_READY
+  const result = new Promise<IframeWalletProvider | null>(resolve => {
+    const cleanup = () => {
+      if (iframe.parentNode) {
+        iframe.parentNode.removeChild(iframe);
+      }
+      window.removeEventListener('message', handler);
+      clearTimeout(timer);
+    };
+
+    timer = setTimeout(() => {
+      cleanup();
+      resolve(null);
+    }, timeoutMs);
+
+    let step: 'waiting-ready' | 'waiting-discovery' = 'waiting-ready';
+    const requestId = globalThis.crypto.randomUUID();
+
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    function handler(event: MessageEvent) {
+      if (event.origin !== walletOrigin) {
+        return;
+      }
+      const msg = event.data;
+      if (!msg || typeof msg !== 'object') {
+        return;
+      }
+
+      if (step === 'waiting-ready' && msg.type === WalletMessageType.WALLET_READY) {
+        step = 'waiting-discovery';
+        iframe.contentWindow?.postMessage(
+          { type: WalletMessageType.DISCOVERY, requestId, appId: 'discovery-probe' },
+          walletOrigin,
+        );
+      } else if (
+        step === 'waiting-discovery' &&
+        msg.type === WalletMessageType.DISCOVERY_RESPONSE &&
+        msg.requestId === requestId
+      ) {
+        const info = msg.walletInfo as WalletInfo;
+        cleanup();
+        resolve(new IframeWalletProvider(info.id, info.name, info.icon, walletUrl, chainInfo));
+      }
+    }
+
+    window.addEventListener('message', handler);
+  });
+
+  document.body.appendChild(iframe);
+
+  return result;
+}

package/src/iframe/provider/iframe_provider.ts

@@ -0,0 +1,331 @@
+/**
+ * IframeWalletProvider — implements {@link WalletProvider} for web wallets loaded in iframes.
+ *
+ * Flow (mirrors ExtensionProvider):
+ *   1. Creates an `<iframe src="walletUrl">` (in app-provided container or floating panel)
+ *   2. Waits for WALLET_READY message from the iframe
+ *   3. Sends DISCOVERY → waits for DISCOVERY_RESPONSE
+ *   4. Sends KEY_EXCHANGE_REQUEST (ECDH public key) → waits for KEY_EXCHANGE_RESPONSE
+ *   5. Derives shared session keys, exposes verificationHash
+ *   6. On confirm(): returns IframeWallet backed by the established session
+ */
+import type { ChainInfo } from '@aztec/aztec.js/account';
+import type { Wallet } from '@aztec/aztec.js/wallet';
+
+import {
+  type ExportedPublicKey,
+  deriveSessionKeys,
+  exportPublicKey,
+  generateKeyPair,
+  importPublicKey,
+} from '../../crypto.js';
+import type { PendingConnection, ProviderDisconnectionCallback, WalletProvider } from '../../manager/types.js';
+import type { WalletInfo } from '../../types.js';
+import { WalletMessageType } from '../../types.js';
+import { IframeWallet } from './iframe_wallet.js';
+
+const READY_TIMEOUT_MS = 15_000;
+const DISCOVERY_TIMEOUT_MS = 15_000;
+const KEY_EXCHANGE_TIMEOUT_MS = 15_000;
+
+/**
+ * Options for {@link IframeWalletProvider.establishSecureChannel}.
+ */
+export interface IframeConnectionOptions {
+  /** Container element to inject the iframe into. If omitted, a floating panel is created. */
+  container?: HTMLElement;
+}
+
+/**
+ * A {@link WalletProvider} that connects to a web wallet loaded in a cross-origin iframe.
+ *
+ * Discovered via {@link discoverWebWallets} and used through the standard
+ * `WalletProvider.establishSecureChannel()` flow.
+ */
+export class IframeWalletProvider implements WalletProvider {
+  readonly type = 'web' as const;
+
+  private iframe: HTMLIFrameElement | null = null;
+  private _container: HTMLDivElement | null = null;
+  private _appOwnsContainer = false;
+  private _dragCleanup: (() => void) | null = null;
+  private wallet: IframeWallet | null = null;
+  private _disconnected = false;
+  private disconnectCallbacks: ProviderDisconnectionCallback[] = [];
+
+  constructor(
+    /** Unique wallet identifier. */
+    public readonly id: string,
+    /** Display name for the wallet. */
+    public readonly name: string,
+    /** Optional wallet icon URL. */
+    public readonly icon: string | undefined,
+    private readonly walletUrl: string,
+    private readonly chainInfo: ChainInfo,
+  ) {}
+
+  /**
+   * Establishes a secure encrypted channel with the iframe wallet.
+   *
+   * @param appId - Application identifier for the requesting dApp
+   * @param options - Optional container element for the iframe
+   * @returns A {@link PendingConnection} with verification hash and confirm/cancel
+   */
+  async establishSecureChannel(appId: string, options?: IframeConnectionOptions): Promise<PendingConnection> {
+    const iframe = document.createElement('iframe');
+    iframe.src = this.walletUrl;
+    iframe.style.cssText = 'flex:1;border:none;width:100%;height:100%;display:block;';
+    iframe.allow = 'storage-access; cross-origin-isolated';
+    this.iframe = iframe;
+
+    if (options?.container) {
+      this._appOwnsContainer = true;
+      options.container.appendChild(iframe);
+    } else {
+      this.createFloatingPanel(iframe);
+    }
+
+    const walletOrigin = new URL(this.walletUrl).origin;
+
+    const post = (msg: object) => {
+      if (!iframe.contentWindow) {
+        throw new Error('Iframe not ready');
+      }
+      iframe.contentWindow.postMessage(msg, walletOrigin);
+    };
+
+    await waitForMessage(msg => msg.type === WalletMessageType.WALLET_READY, READY_TIMEOUT_MS, walletOrigin);
+
+    const requestId = globalThis.crypto.randomUUID();
+    post({ type: WalletMessageType.DISCOVERY, requestId, appId });
+
+    const discoveryResp = await waitForMessage(
+      msg => msg.type === WalletMessageType.DISCOVERY_RESPONSE && msg.requestId === requestId,
+      DISCOVERY_TIMEOUT_MS,
+      walletOrigin,
+    );
+
+    const walletInfo = discoveryResp.walletInfo as WalletInfo;
+
+    const keyPair = await generateKeyPair();
+    const dAppPublicKey = await exportPublicKey(keyPair.publicKey);
+    post({ type: WalletMessageType.KEY_EXCHANGE_REQUEST, requestId, publicKey: dAppPublicKey });
+
+    const keyExchangeResp = await waitForMessage(
+      msg => msg.type === WalletMessageType.KEY_EXCHANGE_RESPONSE && msg.requestId === requestId,
+      KEY_EXCHANGE_TIMEOUT_MS,
+      walletOrigin,
+    );
+
+    const walletPublicKey = await importPublicKey(keyExchangeResp.publicKey as ExportedPublicKey);
+    const sessionKeys = await deriveSessionKeys(keyPair, walletPublicKey, true);
+    const { verificationHash, encryptionKey: sharedKey } = sessionKeys;
+
+    const iframeWallet = IframeWallet.create(
+      walletInfo.id,
+      requestId, // sessionId
+      iframe.contentWindow!,
+      walletOrigin,
+      sharedKey,
+      this.chainInfo,
+      appId,
+    );
+
+    this.wallet = iframeWallet;
+
+    iframeWallet.onDisconnect(() => {
+      this._disconnected = true;
+      for (const cb of this.disconnectCallbacks) {
+        try {
+          cb();
+        } catch {
+          // ignore
+        }
+      }
+    });
+
+    let cancelled = false;
+
+    return {
+      verificationHash,
+      confirm: (): Promise<Wallet> => {
+        if (cancelled) {
+          throw new Error('Connection was cancelled');
+        }
+        return Promise.resolve(iframeWallet.asWallet());
+      },
+      cancel: () => {
+        cancelled = true;
+        this.cleanup();
+      },
+    };
+  }
+
+  disconnect(): Promise<void> {
+    if (this.wallet && !this.wallet.isDisconnected()) {
+      this.wallet.disconnect();
+    }
+    this.cleanup();
+    return Promise.resolve();
+  }
+
+  onDisconnect(callback: ProviderDisconnectionCallback): () => void {
+    this.disconnectCallbacks.push(callback);
+    return () => {
+      const i = this.disconnectCallbacks.indexOf(callback);
+      if (i !== -1) {
+        this.disconnectCallbacks.splice(i, 1);
+      }
+    };
+  }
+
+  isDisconnected(): boolean {
+    return this._disconnected;
+  }
+
+  // ── Floating panel creation ─────────────────────────────────────────────────
+
+  private createFloatingPanel(iframe: HTMLIFrameElement): void {
+    const W = 420,
+      H = 500;
+    const initLeft = window.innerWidth - W - 24;
+    const initTop = window.innerHeight - H - 24;
+
+    const container = document.createElement('div');
+    container.style.cssText = `
+      position:fixed;left:${initLeft}px;top:${initTop}px;width:${W}px;height:${H}px;
+      border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:999999;
+      overflow:hidden;display:flex;flex-direction:column;user-select:none;
+    `;
+
+    const dragHandle = document.createElement('div');
+    dragHandle.style.cssText = `
+      height:28px;min-height:28px;background:rgba(30,30,30,0.95);cursor:grab;
+      display:flex;align-items:center;justify-content:center;
+      border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0;
+    `;
+    dragHandle.innerHTML = `<span style="color:rgba(255,255,255,0.3);font-size:14px;letter-spacing:4px">&#8942;&#8942;&#8942;</span>`;
+
+    const resizeHandle = document.createElement('div');
+    resizeHandle.style.cssText =
+      'position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:se-resize;z-index:1;';
+    resizeHandle.innerHTML = `<svg width="16" height="16" style="opacity:0.3;display:block"><path d="M2 14 L14 2 M6 14 L14 6 M10 14 L14 10" stroke="white" stroke-width="1.5"/></svg>`;
+
+    container.appendChild(dragHandle);
+    container.appendChild(iframe);
+    container.appendChild(resizeHandle);
+    document.body.appendChild(container);
+    this._container = container;
+
+    let dragging = false;
+    let dragOffsetX = 0,
+      dragOffsetY = 0;
+
+    dragHandle.addEventListener('mousedown', (e: MouseEvent) => {
+      dragging = true;
+      dragHandle.style.cursor = 'grabbing';
+      const rect = container.getBoundingClientRect();
+      dragOffsetX = e.clientX - rect.left;
+      dragOffsetY = e.clientY - rect.top;
+      iframe.style.pointerEvents = 'none';
+      e.preventDefault();
+    });
+
+    let resizing = false;
+    let resizeStartX = 0,
+      resizeStartY = 0;
+    let resizeStartW = 0,
+      resizeStartH = 0;
+    const MIN_W = 280,
+      MIN_H = 320;
+
+    resizeHandle.addEventListener('mousedown', (e: MouseEvent) => {
+      resizing = true;
+      resizeStartX = e.clientX;
+      resizeStartY = e.clientY;
+      resizeStartW = container.offsetWidth;
+      resizeStartH = container.offsetHeight;
+      iframe.style.pointerEvents = 'none';
+      e.preventDefault();
+      e.stopPropagation();
+    });
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (dragging) {
+        const newLeft = Math.max(0, Math.min(window.innerWidth - container.offsetWidth, e.clientX - dragOffsetX));
+        const newTop = Math.max(0, Math.min(window.innerHeight - container.offsetHeight, e.clientY - dragOffsetY));
+        container.style.left = `${newLeft}px`;
+        container.style.top = `${newTop}px`;
+      } else if (resizing) {
+        const newW = Math.max(MIN_W, resizeStartW + (e.clientX - resizeStartX));
+        const newH = Math.max(MIN_H, resizeStartH + (e.clientY - resizeStartY));
+        container.style.width = `${newW}px`;
+        container.style.height = `${newH}px`;
+      }
+    };
+
+    const onMouseUp = () => {
+      if (dragging) {
+        dragHandle.style.cursor = 'grab';
+      }
+      dragging = false;
+      resizing = false;
+      iframe.style.pointerEvents = '';
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    this._dragCleanup = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }
+
+  private cleanup(): void {
+    this._dragCleanup?.();
+    this._dragCleanup = null;
+
+    if (this._appOwnsContainer) {
+      if (this.iframe && this.iframe.parentNode) {
+        this.iframe.parentNode.removeChild(this.iframe);
+      }
+    } else if (this._container && this._container.parentNode) {
+      this._container.parentNode.removeChild(this._container);
+    }
+
+    this._container = null;
+    this.iframe = null;
+  }
+}
+
+/** @internal */
+function waitForMessage(
+  predicate: (msg: Record<string, unknown>) => boolean,
+  timeoutMs: number,
+  expectedOrigin: string,
+): Promise<Record<string, unknown>> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      window.removeEventListener('message', handler);
+      reject(new Error(`Iframe wallet: timed out waiting for message (${timeoutMs}ms)`));
+    }, timeoutMs);
+
+    /** Handles incoming postMessage events, filtering by origin and predicate. */
+    function handler(event: MessageEvent) {
+      if (event.origin !== expectedOrigin) {
+        return;
+      }
+      const msg = event.data;
+      if (!msg || typeof msg !== 'object') {
+        return;
+      }
+      if (predicate(msg as Record<string, unknown>)) {
+        clearTimeout(timer);
+        window.removeEventListener('message', handler);
+        resolve(msg as Record<string, unknown>);
+      }
+    }
+
+    window.addEventListener('message', handler);
+  });
+}