@tangle-network/blueprint-ui 0.3.1 → 0.5.0

package/dist/iframe/testing-index.d.ts

@@ -0,0 +1,82 @@
+import { C as CallJobRequest, h as ServiceContextOperator, g as ServiceContextJob, b as ChainContext } from '../parentBridgeProtocol-BS2zbIvX.js';
+import { FC, ReactNode } from 'react';
+import { Address } from 'viem';
+import { W as WalletSnapshot, S as ServiceSnapshot } from '../tangleIframeClient-DES8FDF0.js';
+
+type MockWalletInput = Partial<{
+    address: Address | null;
+    chainId: number;
+    isConnected: boolean;
+}>;
+type MockServiceInput = Partial<{
+    blueprintId: string;
+    serviceId: string | null;
+    operators: readonly ServiceContextOperator[];
+    jobs: readonly ServiceContextJob[];
+    mode: string | null;
+    chain: ChainContext | null;
+}>;
+/**
+ * Construct a deterministic wallet snapshot for tests. Defaults:
+ * connected, vitalik.eth's address, Base Sepolia (84532).
+ */
+declare function mockWallet(input?: MockWalletInput): WalletSnapshot;
+/**
+ * Construct a deterministic service snapshot for tests. Defaults: blueprint
+ * id `0`, no service deployed yet (serviceId null), single mock operator on
+ * the canonical local sidecar URL.
+ */
+declare function mockServiceContext(input?: MockServiceInput): ServiceSnapshot;
+type CallJobHandler = (request: CallJobRequest) => Promise<{
+    status: 'success' | 'error';
+    data?: unknown;
+    error?: string;
+    /** Streaming chunks emitted in order before the terminal status. */
+    chunks?: readonly unknown[];
+}>;
+type HarnessProps = {
+    appId?: string;
+    wallet?: WalletSnapshot;
+    service?: ServiceSnapshot;
+    /** Override callJob behavior. Default: returns a static `{ ok: true }`. */
+    onCallJob?: CallJobHandler;
+    /** Surface a floating debug panel that lets the developer flip state at runtime. */
+    showDebugPanel?: boolean;
+    children: ReactNode;
+};
+/**
+ * Drop-in parent simulator for tests + storybook + standalone dev. Wraps
+ * children in a fake parent that:
+ *
+ *   - Acks the iframe's handshake immediately
+ *   - Broadcasts the configured wallet + service context on mount
+ *   - Intercepts `callJob` requests and routes them through `onCallJob`
+ *   - (Optional) Mounts a floating debug panel so the developer can
+ *     mutate state at runtime: change account, switch chain, set
+ *     serviceId, fire a custom job
+ *
+ * The harness runs in the same JS context as the iframe app — there's no
+ * cross-frame postMessage, just same-window event dispatch. That keeps it
+ * fully synchronous + assertable, but the messages still flow through the
+ * exact same protocol surface the production bridge uses.
+ *
+ * Usage:
+ *
+ *   <TangleParentHarness wallet={mockWallet()} service={mockServiceContext()}>
+ *     <TangleIframeProvider appId="my-app" mode="bridge" parentOrigin="harness://">
+ *       <App />
+ *     </TangleIframeProvider>
+ *   </TangleParentHarness>
+ *
+ * Set `mode="bridge"` + `parentOrigin="harness://"` on the provider so it
+ * matches the harness's synthetic origin. In production, use `mode="auto"`
+ * (the default).
+ */
+declare const TangleParentHarness: FC<HarnessProps>;
+/**
+ * Synthetic origin every harness instance uses. Stable across tests so the
+ * iframe SDK + the harness can pin to the same string.
+ */
+declare const HARNESS_ORIGIN = "harness://tangle.local";
+
+export { type CallJobHandler, HARNESS_ORIGIN, type MockServiceInput, type MockWalletInput, TangleParentHarness, mockServiceContext, mockWallet };

package/dist/iframe/testing-index.js

@@ -0,0 +1,535 @@
+// src/iframe/testing.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function mockWallet(input = {}) {
+  return {
+    address: input.address === void 0 ? "0xd8da6bf26964af9d7eed9e03e53415d37aa96045" : input.address,
+    chainId: input.chainId ?? 84532,
+    isConnected: input.isConnected ?? input.address !== null
+  };
+}
+function mockServiceContext(input = {}) {
+  return {
+    blueprintId: input.blueprintId ?? "0",
+    serviceId: input.serviceId === void 0 ? null : input.serviceId,
+    operators: input.operators ?? [
+      {
+        address: "0x70997970C51812dc3A010C7d01b50e0d17dc79C8",
+        rpcAddress: "http://localhost:8545",
+        status: "active"
+      }
+    ],
+    jobs: input.jobs ?? [
+      { index: 0, name: "invoke" }
+    ],
+    mode: input.mode ?? null,
+    chain: input.chain === void 0 ? {
+      id: 84532,
+      name: "Base Sepolia",
+      rpcUrl: "https://sepolia.base.org",
+      blockExplorerUrl: "https://sepolia.basescan.org",
+      nativeCurrency: { name: "Sepolia Ether", symbol: "ETH", decimals: 18 }
+    } : input.chain
+  };
+}
+var TangleParentHarness = ({
+  appId = "harness",
+  wallet = mockWallet(),
+  service = mockServiceContext(),
+  onCallJob,
+  showDebugPanel = false,
+  children
+}) => {
+  const [currentWallet, setCurrentWallet] = useState(wallet);
+  const [currentService, setCurrentService] = useState(service);
+  const [callLog, setCallLog] = useState([]);
+  const callJobHandler = useRef(onCallJob);
+  callJobHandler.current = onCallJob;
+  const seenHandshake = useRef(false);
+  useEffect(() => {
+    const reply = (message) => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: message,
+          origin: HARNESS_ORIGIN
+        })
+      );
+    };
+    const broadcast = () => {
+      const broadcastMsg = {
+        kind: "tangle.app.serviceContext",
+        blueprintId: currentService.blueprintId ?? "0",
+        serviceId: currentService.serviceId,
+        operators: currentService.operators,
+        jobs: currentService.jobs,
+        mode: currentService.mode,
+        ...currentService.chain !== null ? { chain: currentService.chain } : {}
+      };
+      reply(broadcastMsg);
+      reply({
+        kind: "tangle.app.accountChanged",
+        account: currentWallet.address
+      });
+      if (currentWallet.chainId !== null) {
+        reply({
+          kind: "tangle.app.chainChanged",
+          chainId: currentWallet.chainId
+        });
+      }
+    };
+    const handler = async (event) => {
+      if (event.origin === HARNESS_ORIGIN) return;
+      const data = event.data;
+      if (typeof data !== "object" || data === null) return;
+      const message = data;
+      switch (message.kind) {
+        case "tangle.app.handshake": {
+          if (!seenHandshake.current) {
+            seenHandshake.current = true;
+            reply({
+              kind: "tangle.app.handshakeAck",
+              appId,
+              protocolVersion: "1"
+            });
+            broadcast();
+          }
+          return;
+        }
+        case "tangle.app.readAccount": {
+          if (typeof message.correlationId !== "string") return;
+          reply({
+            kind: "tangle.app.readAccountResult",
+            correlationId: message.correlationId,
+            ok: true,
+            data: {
+              account: currentWallet.address ?? "0x0000000000000000000000000000000000000000",
+              chainId: currentWallet.chainId ?? 0
+            }
+          });
+          return;
+        }
+        case "tangle.app.callJob": {
+          if (typeof message.correlationId !== "string") return;
+          const request = message;
+          setCallLog((prev) => [...prev, request]);
+          const handler2 = callJobHandler.current;
+          if (!handler2) {
+            const result = {
+              kind: "tangle.app.jobResult",
+              correlationId: request.correlationId,
+              status: "success",
+              data: { echo: request.inputs }
+            };
+            reply(result);
+            return;
+          }
+          try {
+            const outcome = await handler2(request);
+            for (const chunk of outcome.chunks ?? []) {
+              reply({
+                kind: "tangle.app.jobResult",
+                correlationId: request.correlationId,
+                status: "streaming",
+                chunk
+              });
+            }
+            reply({
+              kind: "tangle.app.jobResult",
+              correlationId: request.correlationId,
+              status: outcome.status,
+              ...outcome.data !== void 0 ? { data: outcome.data } : {},
+              ...outcome.error !== void 0 ? { error: outcome.error } : {}
+            });
+          } catch (err) {
+            reply({
+              kind: "tangle.app.jobResult",
+              correlationId: request.correlationId,
+              status: "error",
+              error: err instanceof Error ? err.message : String(err)
+            });
+          }
+          return;
+        }
+        // Wallet ops respond optimistically — tests that want to assert
+        // specific signatures should pre-set them via the dev handler.
+        case "tangle.app.signMessage": {
+          if (typeof message.correlationId !== "string") return;
+          reply({
+            kind: "tangle.app.signMessageResult",
+            correlationId: message.correlationId,
+            ok: true,
+            data: { signature: "0xdeadbeef" }
+          });
+          return;
+        }
+        case "tangle.app.signTypedData": {
+          if (typeof message.correlationId !== "string") return;
+          reply({
+            kind: "tangle.app.signTypedDataResult",
+            correlationId: message.correlationId,
+            ok: true,
+            data: {
+              signature: "0x" + "11".repeat(65)
+            }
+          });
+          return;
+        }
+        case "tangle.app.signTransaction": {
+          if (typeof message.correlationId !== "string") return;
+          reply({
+            kind: "tangle.app.signTransactionResult",
+            correlationId: message.correlationId,
+            ok: true,
+            data: { txHash: "0x" + "00".repeat(32) }
+          });
+          return;
+        }
+        case "tangle.app.switchChain": {
+          if (typeof message.correlationId !== "string" || typeof message.chainId !== "number") {
+            return;
+          }
+          const chainId = message.chainId;
+          setCurrentWallet((w) => ({ ...w, chainId }));
+          reply({
+            kind: "tangle.app.switchChainResult",
+            correlationId: message.correlationId,
+            ok: true,
+            data: { chainId }
+          });
+          return;
+        }
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [appId, currentWallet, currentService]);
+  useEffect(() => {
+    if (!seenHandshake.current) return;
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: {
+          kind: "tangle.app.accountChanged",
+          account: currentWallet.address
+        },
+        origin: HARNESS_ORIGIN
+      })
+    );
+  }, [currentWallet.address]);
+  useEffect(() => {
+    if (!seenHandshake.current || currentWallet.chainId === null) return;
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: {
+          kind: "tangle.app.chainChanged",
+          chainId: currentWallet.chainId
+        },
+        origin: HARNESS_ORIGIN
+      })
+    );
+  }, [currentWallet.chainId]);
+  useEffect(() => {
+    if (!seenHandshake.current) return;
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: {
+          kind: "tangle.app.serviceContext",
+          blueprintId: currentService.blueprintId ?? "0",
+          serviceId: currentService.serviceId,
+          operators: currentService.operators,
+          jobs: currentService.jobs,
+          mode: currentService.mode,
+          ...currentService.chain !== null ? { chain: currentService.chain } : {}
+        },
+        origin: HARNESS_ORIGIN
+      })
+    );
+  }, [currentService]);
+  const debugApi = useMemo(
+    () => ({
+      setWallet: setCurrentWallet,
+      setService: setCurrentService,
+      callLog
+    }),
+    [callLog]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    showDebugPanel && /* @__PURE__ */ jsx(DebugPanel, { api: debugApi })
+  ] });
+};
+var HARNESS_ORIGIN = "harness://tangle.local";
+var DebugPanel = ({ api }) => {
+  const [open, setOpen] = useState(true);
+  const [tab, setTab] = useState("wallet");
+  if (!open) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        style: debugStyles.collapsedTrigger,
+        children: "Debug"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { style: debugStyles.panel, children: [
+    /* @__PURE__ */ jsxs("header", { style: debugStyles.header, children: [
+      /* @__PURE__ */ jsx("strong", { style: { fontSize: 11 }, children: "TANGLE DEV HARNESS" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen(false),
+          style: debugStyles.closeButton,
+          "aria-label": "Close debug panel",
+          children: "\xD7"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("nav", { style: debugStyles.tabs, children: ["wallet", "service", "log"].map((t) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setTab(t),
+        style: {
+          ...debugStyles.tab,
+          ...tab === t ? debugStyles.tabActive : {}
+        },
+        children: t
+      },
+      t
+    )) }),
+    /* @__PURE__ */ jsxs("div", { style: debugStyles.body, children: [
+      tab === "wallet" && /* @__PURE__ */ jsx(WalletTab, { api }),
+      tab === "service" && /* @__PURE__ */ jsx(ServiceTab, { api }),
+      tab === "log" && /* @__PURE__ */ jsx(CallLogTab, { callLog: api.callLog })
+    ] })
+  ] });
+};
+var WalletTab = ({ api }) => {
+  const [address, setAddressInput] = useState(
+    "0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
+  );
+  const [chainId, setChainIdInput] = useState("84532");
+  const applyConnect = useCallback(() => {
+    api.setWallet({
+      address,
+      chainId: Number(chainId) || null,
+      isConnected: true
+    });
+  }, [address, chainId, api]);
+  const disconnect = useCallback(() => {
+    api.setWallet({ address: null, chainId: null, isConnected: false });
+  }, [api]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("label", { style: debugStyles.label, children: "address" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        value: address,
+        onChange: (e) => setAddressInput(e.target.value),
+        style: debugStyles.input
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { style: debugStyles.label, children: "chain id" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        value: chainId,
+        onChange: (e) => setChainIdInput(e.target.value),
+        style: debugStyles.input
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: debugStyles.buttonRow, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: applyConnect, style: debugStyles.primary, children: "Set connected" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: disconnect, style: debugStyles.secondary, children: "Disconnect" })
+    ] })
+  ] });
+};
+var ServiceTab = ({ api }) => {
+  const [serviceId, setServiceIdInput] = useState("1");
+  const [blueprintId, setBlueprintIdInput] = useState("0");
+  const apply = useCallback(() => {
+    api.setService((prev) => ({
+      ...prev,
+      serviceId: serviceId || null,
+      blueprintId
+    }));
+  }, [api, serviceId, blueprintId]);
+  const clearService = useCallback(() => {
+    api.setService((prev) => ({ ...prev, serviceId: null }));
+  }, [api]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("label", { style: debugStyles.label, children: "blueprint id" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        value: blueprintId,
+        onChange: (e) => setBlueprintIdInput(e.target.value),
+        style: debugStyles.input
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { style: debugStyles.label, children: "service id (empty = not deployed)" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        value: serviceId,
+        onChange: (e) => setServiceIdInput(e.target.value),
+        style: debugStyles.input
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: debugStyles.buttonRow, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: apply, style: debugStyles.primary, children: "Apply" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: clearService, style: debugStyles.secondary, children: "Clear service" })
+    ] })
+  ] });
+};
+var CallLogTab = ({ callLog }) => {
+  if (callLog.length === 0) {
+    return /* @__PURE__ */ jsx("p", { style: debugStyles.empty, children: "No callJob requests yet." });
+  }
+  return /* @__PURE__ */ jsx("ol", { style: debugStyles.log, children: callLog.map((entry) => /* @__PURE__ */ jsxs("li", { style: debugStyles.logEntry, children: [
+    /* @__PURE__ */ jsxs("strong", { children: [
+      "job ",
+      entry.jobIndex
+    ] }),
+    /* @__PURE__ */ jsx("pre", { style: debugStyles.pre, children: JSON.stringify(entry.inputs, null, 2) })
+  ] }, entry.correlationId)) });
+};
+var debugStyles = {
+  panel: {
+    position: "fixed",
+    right: 12,
+    top: 12,
+    width: 280,
+    zIndex: 99999,
+    background: "#0b0b14",
+    color: "#fff",
+    border: "1px solid #3a3a52",
+    borderRadius: 10,
+    boxShadow: "0 14px 32px rgba(0,0,0,0.4)",
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace',
+    fontSize: 12
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 10px",
+    borderBottom: "1px solid #2a2a3e"
+  },
+  closeButton: {
+    background: "none",
+    border: "none",
+    color: "#fff",
+    fontSize: 18,
+    cursor: "pointer",
+    lineHeight: 1
+  },
+  tabs: {
+    display: "flex",
+    borderBottom: "1px solid #2a2a3e"
+  },
+  tab: {
+    flex: 1,
+    background: "none",
+    border: "none",
+    color: "#a0a0c0",
+    padding: "6px 8px",
+    cursor: "pointer",
+    fontSize: 11,
+    textTransform: "uppercase"
+  },
+  tabActive: {
+    color: "#fff",
+    borderBottom: "2px solid #818cf8"
+  },
+  body: {
+    padding: 10,
+    maxHeight: 320,
+    overflow: "auto"
+  },
+  label: {
+    display: "block",
+    color: "#a0a0c0",
+    fontSize: 10,
+    marginBottom: 4,
+    marginTop: 6,
+    textTransform: "uppercase"
+  },
+  input: {
+    width: "100%",
+    background: "#15152a",
+    border: "1px solid #2a2a3e",
+    color: "#fff",
+    padding: "6px 8px",
+    borderRadius: 4,
+    fontFamily: "inherit",
+    fontSize: 11,
+    boxSizing: "border-box"
+  },
+  buttonRow: { display: "flex", gap: 6, marginTop: 8 },
+  primary: {
+    flex: 1,
+    background: "#4f46e5",
+    color: "#fff",
+    border: "none",
+    padding: "6px 8px",
+    borderRadius: 4,
+    cursor: "pointer",
+    fontSize: 11,
+    fontFamily: "inherit"
+  },
+  secondary: {
+    flex: 1,
+    background: "transparent",
+    color: "#a0a0c0",
+    border: "1px solid #3a3a52",
+    padding: "6px 8px",
+    borderRadius: 4,
+    cursor: "pointer",
+    fontSize: 11,
+    fontFamily: "inherit"
+  },
+  collapsedTrigger: {
+    position: "fixed",
+    right: 12,
+    top: 12,
+    zIndex: 99999,
+    padding: "6px 10px",
+    background: "#0b0b14",
+    border: "1px solid #3a3a52",
+    color: "#fff",
+    borderRadius: 6,
+    fontFamily: "inherit",
+    fontSize: 11,
+    cursor: "pointer"
+  },
+  log: { listStyle: "none", padding: 0, margin: 0 },
+  logEntry: {
+    padding: 6,
+    borderBottom: "1px solid #2a2a3e",
+    fontSize: 11
+  },
+  pre: {
+    margin: "4px 0 0",
+    color: "#a0a0c0",
+    fontSize: 10,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word"
+  },
+  empty: { color: "#a0a0c0", fontSize: 11, margin: 0 }
+};
+export {
+  HARNESS_ORIGIN,
+  TangleParentHarness,
+  mockServiceContext,
+  mockWallet
+};
+//# sourceMappingURL=testing-index.js.map