@tangle-network/blueprint-ui 0.5.5 → 0.5.7

package/dist/iframe/index.js

@@ -0,0 +1,607 @@
+import {
+  NO_WALLET_ADDRESS,
+  TANGLE_CLOUD_ORIGINS_DEFAULT,
+  TANGLE_IFRAME_PROTOCOL_VERSION,
+  detectTangleCloudParentOrigin,
+  makeCorrelationId
+} from "../chunk-TM5ROMDV.js";
+
+// src/iframe/TangleIframeProvider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/iframe/tangleIframeClient.ts
+var DEFAULT_REQUEST_TIMEOUT_MS = 6e4;
+var CONNECT_REQUEST_TIMEOUT_MS = 3e5;
+var HANDSHAKE_RETRY_MS = 250;
+var HANDSHAKE_RETRY_BUDGET_MS = 1e4;
+var NULL_WALLET = {
+  address: null,
+  chainId: null,
+  isConnected: false
+};
+var NULL_SERVICE = {
+  blueprintId: null,
+  serviceId: null,
+  operators: [],
+  jobs: [],
+  mode: null,
+  chain: null
+};
+var TangleIframeClient = class {
+  constructor(options) {
+    this.options = options;
+  }
+  options;
+  wallet = NULL_WALLET;
+  service = NULL_SERVICE;
+  handshakeAcked = false;
+  handshakeWaiters = [];
+  installed = false;
+  handshakeRetry = null;
+  listeners = {
+    wallet: /* @__PURE__ */ new Set(),
+    service: /* @__PURE__ */ new Set(),
+    job: /* @__PURE__ */ new Set()
+  };
+  pendingJobs = /* @__PURE__ */ new Map();
+  /** Wire the global message listener + initial handshake. Idempotent. */
+  install() {
+    if (this.installed || typeof window === "undefined") return;
+    this.installed = true;
+    window.addEventListener("message", this.handleParentMessage);
+    this.postHandshake();
+    if (this.handshakeRetry === null) {
+      let elapsed = 0;
+      this.handshakeRetry = setInterval(() => {
+        elapsed += HANDSHAKE_RETRY_MS;
+        if (this.handshakeAcked || elapsed >= HANDSHAKE_RETRY_BUDGET_MS) {
+          this.clearHandshakeRetry();
+          return;
+        }
+        this.postHandshake();
+      }, HANDSHAKE_RETRY_MS);
+    }
+  }
+  uninstall() {
+    if (!this.installed || typeof window === "undefined") return;
+    this.installed = false;
+    this.clearHandshakeRetry();
+    window.removeEventListener("message", this.handleParentMessage);
+    for (const [, pending] of this.pendingJobs) {
+      clearTimeout(pending.timer);
+      pending.reject(new Error("Tangle iframe client uninstalled"));
+    }
+    this.pendingJobs.clear();
+  }
+  // ── State accessors ─────────────────────────────────────────────────────
+  getWallet() {
+    return this.wallet;
+  }
+  getService() {
+    return this.service;
+  }
+  // ── Subscription API (used by React hooks) ──────────────────────────────
+  subscribe(event, listener) {
+    this.listeners[event].add(listener);
+    return () => {
+      this.listeners[event].delete(listener);
+    };
+  }
+  // ── Wallet operations ───────────────────────────────────────────────────
+  /**
+   * Ask the parent dapp to connect a wallet — opening its connect modal if
+   * none is connected. The iframe is sandboxed and cannot reach a wallet
+   * itself, so connection is always delegated to the parent. Resolves with the
+   * connected address (or `null` if the user dismissed without connecting).
+   *
+   * Uses a long timeout (the user is interacting with a modal). Already-
+   * connected parents resolve immediately.
+   */
+  async connect() {
+    await this.ensureBootstrapped();
+    const data = await this.dispatchWallet(
+      "tangle.app.requestConnect",
+      {},
+      CONNECT_REQUEST_TIMEOUT_MS
+    );
+    const { account, chainId } = data;
+    const address = account === NO_WALLET_ADDRESS ? null : account;
+    this.updateWallet({ address, chainId, isConnected: address !== null });
+    return address;
+  }
+  async signMessage(message) {
+    await this.ensureBootstrapped();
+    return this.dispatchWallet("tangle.app.signMessage", {
+      chainId: this.wallet.chainId ?? 0,
+      message
+    }).then((data) => data.signature);
+  }
+  async sendTransaction(tx) {
+    await this.ensureBootstrapped();
+    return this.dispatchWallet("tangle.app.signTransaction", {
+      chainId: this.wallet.chainId ?? 0,
+      to: tx.to,
+      data: tx.data,
+      ...tx.value !== void 0 ? { value: tx.value.toString(10) } : {}
+    }).then((data) => data.txHash);
+  }
+  async switchChain(chainId) {
+    await this.ensureBootstrapped();
+    return this.dispatchWallet("tangle.app.switchChain", { chainId }).then(
+      (data) => data.chainId
+    );
+  }
+  /**
+   * EIP-712 typed-data signing. The parent renders the typed-data fields in
+   * its approval modal; the user audits what they're signing. Use for
+   * operator envelopes, off-chain attestations, anything that needs a
+   * signature outside the standard blueprint-job RFQ flow.
+   *
+   * Shape mirrors viem's `signTypedData` argument. Do not include the
+   * EIP712Domain entry in `types` — the parent injects it from `domain`.
+   */
+  async signTypedData(args) {
+    await this.ensureBootstrapped();
+    return this.dispatchWallet("tangle.app.signTypedData", {
+      chainId: this.wallet.chainId ?? 0,
+      domain: args.domain,
+      types: args.types,
+      primaryType: args.primaryType,
+      message: args.message
+    }).then((data) => data.signature);
+  }
+  // ── Job invocation ──────────────────────────────────────────────────────
+  /**
+   * Invoke a blueprint job. Returns a Promise that resolves on terminal
+   * status (`success` or `error`); subscribe to the `job` event for
+   * intermediate streaming chunks.
+   *
+   * Streaming opt-in: pass `stream: true` if the publisher's job emits
+   * chunks (LLM generation, video encoding). One-shot jobs (embeddings,
+   * classifications) skip the streaming machinery.
+   */
+  async callJob(args) {
+    await this.ensureBootstrapped();
+    const correlationId = makeCorrelationId("tangle.app.callJob");
+    const timeout = this.options.requestTimeoutMs ?? DEFAULT_REQUEST_TIMEOUT_MS;
+    return new Promise((resolve, reject) => {
+      const invocation = {
+        correlationId,
+        status: "pending",
+        chunks: []
+      };
+      const timer = setTimeout(() => {
+        this.pendingJobs.delete(correlationId);
+        reject(
+          bridgeError(4900, `Job did not respond within ${timeout}ms`)
+        );
+      }, timeout);
+      this.pendingJobs.set(correlationId, {
+        resolve,
+        reject,
+        timer,
+        invocation
+      });
+      const message = {
+        kind: "tangle.app.callJob",
+        correlationId,
+        jobIndex: args.jobIndex,
+        inputs: args.inputs,
+        ...args.stream !== void 0 ? { stream: args.stream } : {}
+      };
+      this.postToParent(message);
+      this.emit("job", invocation);
+    });
+  }
+  // ── Internals ───────────────────────────────────────────────────────────
+  clearHandshakeRetry() {
+    if (this.handshakeRetry !== null) {
+      clearInterval(this.handshakeRetry);
+      this.handshakeRetry = null;
+    }
+  }
+  postHandshake() {
+    this.postToParent({
+      kind: "tangle.app.handshake",
+      appId: this.options.appId,
+      version: TANGLE_IFRAME_PROTOCOL_VERSION
+    });
+  }
+  postToParent(message) {
+    if (typeof window === "undefined") return;
+    try {
+      window.parent.postMessage(message, this.options.parentOrigin);
+    } catch {
+    }
+  }
+  handleParentMessage = (event) => {
+    if (event.origin !== this.options.parentOrigin) return;
+    const data = event.data;
+    if (typeof data !== "object" || data === null) return;
+    const message = data;
+    switch (message.kind) {
+      case "tangle.app.handshakeAck":
+        this.handshakeAcked = true;
+        this.clearHandshakeRetry();
+        for (const resolve of this.handshakeWaiters) resolve();
+        this.handshakeWaiters = [];
+        return;
+      case "tangle.app.readAccountResult":
+        if (message.ok) {
+          this.updateWallet({
+            address: message.data.account === NO_WALLET_ADDRESS ? null : message.data.account,
+            chainId: message.data.chainId,
+            isConnected: message.data.account !== NO_WALLET_ADDRESS
+          });
+        }
+        return;
+      case "tangle.app.accountChanged":
+        this.updateWallet({
+          address: message.account,
+          chainId: this.wallet.chainId,
+          isConnected: message.account !== null
+        });
+        return;
+      case "tangle.app.chainChanged":
+        this.updateWallet({
+          address: this.wallet.address,
+          chainId: message.chainId,
+          isConnected: this.wallet.isConnected
+        });
+        return;
+      case "tangle.app.serviceContext":
+        this.updateService(message);
+        return;
+      case "tangle.app.jobResult":
+        this.handleJobResult(message);
+        return;
+      // Wallet-shape responses (signMessageResult etc.) are routed by
+      // dispatchWallet's promise resolver, not here.
+      default:
+        return;
+    }
+  };
+  async dispatchWallet(kind, payload, timeoutMs) {
+    return new Promise((resolve, reject) => {
+      const correlationId = makeCorrelationId(kind);
+      const timeout = timeoutMs ?? this.options.requestTimeoutMs ?? DEFAULT_REQUEST_TIMEOUT_MS;
+      const expectedKind = {
+        "tangle.app.signMessage": "tangle.app.signMessageResult",
+        "tangle.app.signTransaction": "tangle.app.signTransactionResult",
+        "tangle.app.signTypedData": "tangle.app.signTypedDataResult",
+        "tangle.app.switchChain": "tangle.app.switchChainResult",
+        "tangle.app.requestConnect": "tangle.app.connectResult"
+      }[kind];
+      const timer = setTimeout(() => {
+        window.removeEventListener("message", listener);
+        reject(bridgeError(4900, `Parent did not respond to ${kind} in ${timeout}ms`));
+      }, timeout);
+      const listener = (event) => {
+        if (event.origin !== this.options.parentOrigin) return;
+        const data = event.data;
+        if (typeof data !== "object" || data === null) return;
+        const msg = data;
+        if (msg.kind !== expectedKind || !("correlationId" in msg) || msg.correlationId !== correlationId) {
+          return;
+        }
+        clearTimeout(timer);
+        window.removeEventListener("message", listener);
+        const env = msg;
+        if (env.ok) {
+          resolve(env.data);
+        } else {
+          reject(bridgeError(4001, env.error ?? "Parent rejected request"));
+        }
+      };
+      window.addEventListener("message", listener);
+      this.postToParent({ kind, correlationId, ...payload });
+    });
+  }
+  handleJobResult(message) {
+    const pending = this.pendingJobs.get(message.correlationId);
+    if (!pending) return;
+    const updated = {
+      correlationId: message.correlationId,
+      status: message.status,
+      chunks: message.chunk !== void 0 ? [...pending.invocation.chunks, message.chunk] : pending.invocation.chunks,
+      ...message.data !== void 0 ? { data: message.data } : {},
+      ...message.error !== void 0 ? { error: message.error } : {},
+      ...message.progress !== void 0 ? { progress: message.progress } : {}
+    };
+    pending.invocation = updated;
+    this.emit("job", updated);
+    if (message.status === "success" || message.status === "error") {
+      clearTimeout(pending.timer);
+      this.pendingJobs.delete(message.correlationId);
+      if (message.status === "success") {
+        pending.resolve(updated);
+      } else {
+        pending.reject(bridgeError(4001, message.error ?? "Job failed"));
+      }
+    }
+  }
+  updateWallet(next) {
+    if (this.wallet.address === next.address && this.wallet.chainId === next.chainId && this.wallet.isConnected === next.isConnected) {
+      return;
+    }
+    this.wallet = next;
+    this.emit("wallet", next);
+  }
+  updateService(broadcast) {
+    const next = {
+      blueprintId: broadcast.blueprintId,
+      serviceId: broadcast.serviceId,
+      operators: broadcast.operators,
+      jobs: broadcast.jobs,
+      mode: broadcast.mode,
+      chain: broadcast.chain ?? null
+    };
+    this.service = next;
+    this.emit("service", next);
+  }
+  emit(event, value) {
+    for (const listener of [...this.listeners[event]]) {
+      try {
+        listener(value);
+      } catch {
+      }
+    }
+  }
+  async ensureBootstrapped() {
+    if (this.handshakeAcked) return;
+    this.install();
+    await new Promise((resolve) => {
+      this.handshakeWaiters.push(resolve);
+      const retry = setInterval(() => {
+        if (this.handshakeAcked) {
+          clearInterval(retry);
+          return;
+        }
+        this.postHandshake();
+      }, 500);
+      setTimeout(() => clearInterval(retry), 1e4);
+    });
+  }
+};
+function bridgeError(code, message) {
+  const err = new Error(message);
+  err.code = code;
+  return err;
+}
+
+// src/iframe/TangleIframeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var TangleIframeContext = createContext(null);
+var NULL_WALLET2 = {
+  address: null,
+  chainId: null,
+  isConnected: false
+};
+var NULL_SERVICE2 = {
+  blueprintId: null,
+  serviceId: null,
+  operators: [],
+  jobs: [],
+  mode: null,
+  chain: null
+};
+function TangleIframeProvider({
+  appId,
+  parentOrigin: explicitOrigin,
+  extraOrigins,
+  mode: requestedMode = "auto",
+  children
+}) {
+  const resolution = useMemo(() => {
+    if (requestedMode === "dev") {
+      return { mode: "dev", parentOrigin: null };
+    }
+    const detected = explicitOrigin ?? detectTangleCloudParentOrigin({ extraOrigins });
+    if (requestedMode === "bridge") {
+      if (!detected) {
+        console.error(
+          '[TangleIframeProvider] mode="bridge" but no trusted parent was detected. Falling back to dev mode.'
+        );
+        return { mode: "dev", parentOrigin: null };
+      }
+      return { mode: "bridge", parentOrigin: detected };
+    }
+    return detected ? { mode: "bridge", parentOrigin: detected } : { mode: "dev", parentOrigin: null };
+  }, [requestedMode, explicitOrigin, extraOrigins]);
+  const clientRef = useRef(null);
+  const [wallet, setWallet] = useState(NULL_WALLET2);
+  const [service, setService] = useState(NULL_SERVICE2);
+  const [isReady, setIsReady] = useState(false);
+  useEffect(() => {
+    if (resolution.mode === "dev") {
+      setIsReady(true);
+      return void 0;
+    }
+    const options = {
+      parentOrigin: resolution.parentOrigin,
+      appId
+    };
+    const client = new TangleIframeClient(options);
+    clientRef.current = client;
+    const unsubWallet = client.subscribe("wallet", setWallet);
+    const unsubService = client.subscribe("service", setService);
+    client.install();
+    setIsReady(true);
+    return () => {
+      unsubWallet();
+      unsubService();
+      client.uninstall();
+      clientRef.current = null;
+      setIsReady(false);
+    };
+  }, [resolution, appId]);
+  const value = useMemo(
+    () => ({
+      client: clientRef.current,
+      wallet,
+      service,
+      mode: resolution.mode,
+      isReady
+    }),
+    [wallet, service, resolution.mode, isReady]
+  );
+  return /* @__PURE__ */ jsx(TangleIframeContext.Provider, { value, children });
+}
+function useTangleIframeContext() {
+  const ctx = useContext(TangleIframeContext);
+  if (!ctx) {
+    throw new Error(
+      "useTangleIframeContext must be used inside <TangleIframeProvider>."
+    );
+  }
+  return ctx;
+}
+
+// src/iframe/hooks.ts
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import {
+  createPublicClient,
+  http
+} from "viem";
+function useTangleWallet() {
+  const { client, wallet } = useTangleIframeContext();
+  const connect = useCallback(() => {
+    if (!client) throw new Error("Wallet not available in dev mode.");
+    return client.connect();
+  }, [client]);
+  const signMessage = useCallback(
+    (message) => {
+      if (!client) throw new Error("Wallet not available in dev mode.");
+      return client.signMessage(message);
+    },
+    [client]
+  );
+  const sendTransaction = useCallback(
+    (tx) => {
+      if (!client) throw new Error("Wallet not available in dev mode.");
+      return client.sendTransaction(tx);
+    },
+    [client]
+  );
+  const signTypedData = useCallback(
+    (args) => {
+      if (!client) throw new Error("Wallet not available in dev mode.");
+      return client.signTypedData(args);
+    },
+    [client]
+  );
+  const switchChain = useCallback(
+    (chainId) => {
+      if (!client) throw new Error("Wallet not available in dev mode.");
+      return client.switchChain(chainId);
+    },
+    [client]
+  );
+  return {
+    ...wallet,
+    connect,
+    signMessage,
+    sendTransaction,
+    signTypedData,
+    switchChain
+  };
+}
+function useChainContext() {
+  return useTangleIframeContext().service.chain;
+}
+function useTanglePublicClient() {
+  const chain = useChainContext();
+  return useMemo2(() => {
+    if (!chain) return null;
+    const chainConfig = {
+      id: chain.id,
+      name: chain.name,
+      nativeCurrency: chain.nativeCurrency !== void 0 ? { ...chain.nativeCurrency } : { name: "Ether", symbol: "ETH", decimals: 18 },
+      rpcUrls: {
+        default: { http: [chain.rpcUrl] }
+      },
+      ...chain.blockExplorerUrl ? {
+        blockExplorers: {
+          default: { name: "Explorer", url: chain.blockExplorerUrl }
+        }
+      } : {}
+    };
+    return createPublicClient({
+      chain: chainConfig,
+      transport: http(chain.rpcUrl)
+    });
+  }, [chain]);
+}
+function useTangleService() {
+  return useTangleIframeContext().service;
+}
+function useCallJob() {
+  const { client } = useTangleIframeContext();
+  const [invocation, setInvocation] = useState2(null);
+  const [latestId, setLatestId] = useState2(null);
+  useEffect2(() => {
+    if (!client) return void 0;
+    return client.subscribe("job", (next) => {
+      setLatestId((prevLatest) => {
+        if (prevLatest === null || prevLatest === next.correlationId) {
+          setInvocation(next);
+          return next.correlationId;
+        }
+        return prevLatest;
+      });
+    });
+  }, [client]);
+  const call = useCallback(
+    async (args) => {
+      if (!client) {
+        throw new Error(
+          "Job invocation not available in dev mode without a configured stub. See `setDevJobHandler` in the testing harness."
+        );
+      }
+      setInvocation(null);
+      const result = await client.callJob(args);
+      setLatestId(result.correlationId);
+      return result;
+    },
+    [client]
+  );
+  const reset = useCallback(() => {
+    setInvocation(null);
+    setLatestId(null);
+  }, []);
+  return useMemo2(
+    () => ({ call, invocation, reset, isPending: invocation?.status === "pending" || invocation?.status === "streaming" }),
+    [call, invocation, reset]
+  );
+}
+function useTangleAddress() {
+  return useTangleIframeContext().wallet.address;
+}
+function useTangleReady() {
+  return useTangleIframeContext().isReady;
+}
+function useTangleMode() {
+  return useTangleIframeContext().mode;
+}
+export {
+  TANGLE_CLOUD_ORIGINS_DEFAULT,
+  TangleIframeClient,
+  TangleIframeProvider,
+  useCallJob,
+  useChainContext,
+  useTangleAddress,
+  useTangleIframeContext,
+  useTangleMode,
+  useTanglePublicClient,
+  useTangleReady,
+  useTangleService,
+  useTangleWallet
+};
+//# sourceMappingURL=index.js.map