@splitmarkets/sdk 0.2.0

package/dist/widget.js

@@ -0,0 +1,272 @@
+import { getMarkets, getPositionGasless, getPosition, deriveTradingAccount, buyGasless, buy, closeGasless, close } from './chunk-MZEPXYHI.js';
+import { useState, useId, useMemo, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var THEMES = {
+  dark: {
+    accent: "#5b7cfa",
+    background: "#0e0e12",
+    surface: "#15151b",
+    text: "#e8e8ee",
+    muted: "#9a9aa6",
+    radius: "16px",
+    fontFamily: "system-ui, sans-serif"
+  },
+  light: {
+    accent: "#3b5bf5",
+    background: "#ffffff",
+    surface: "#f4f4f7",
+    text: "#16161c",
+    muted: "#6a6a76",
+    radius: "16px",
+    fontFamily: "system-ui, sans-serif"
+  }
+};
+var toLen = (v) => v === void 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
+function SplitTradeWidget({
+  walletClient,
+  account,
+  chain = "base",
+  theme = "dark",
+  appearance,
+  className,
+  mode = "gasless"
+}) {
+  const gasless = mode === "gasless";
+  const [side, setSide] = useState("long");
+  const [markets, setMarkets] = useState([]);
+  const [picked, setPicked] = useState(null);
+  const [amount, setAmount] = useState("0.1");
+  const [position, setPosition] = useState(null);
+  const [status, setStatus] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [trading, setTrading] = useState(null);
+  const scope = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const rootClass = `swt-${scope}`;
+  const vars = useMemo(() => {
+    const base = THEMES[theme] ?? THEMES.dark;
+    const p = {
+      accent: appearance?.accent ?? base.accent,
+      background: appearance?.background ?? base.background,
+      surface: appearance?.surface ?? base.surface,
+      text: appearance?.text ?? base.text,
+      muted: appearance?.muted ?? base.muted,
+      radius: toLen(appearance?.radius) ?? base.radius,
+      fontFamily: appearance?.fontFamily ?? base.fontFamily
+    };
+    return {
+      "--swt-accent": p.accent,
+      "--swt-bg": p.background,
+      "--swt-surface": p.surface,
+      "--swt-text": p.text,
+      "--swt-muted": p.muted,
+      "--swt-radius": p.radius,
+      "--swt-font": p.fontFamily
+    };
+  }, [theme, appearance]);
+  useEffect(() => {
+    let alive = true;
+    setMarkets([]);
+    setPicked(null);
+    getMarkets(chain, side).then((m) => {
+      if (!alive) return;
+      setMarkets(m);
+      if (m.length) setPicked(m[0].seriesId);
+    }).catch((e) => alive && setStatus(`Couldn't load markets: ${e.message}`));
+    return () => {
+      alive = false;
+    };
+  }, [chain, side]);
+  const refreshPosition = useCallback(async () => {
+    if (!account || picked === null) {
+      setPosition(null);
+      return;
+    }
+    try {
+      if (gasless) {
+        if (!trading) {
+          setPosition(null);
+          return;
+        }
+        const p = await getPositionGasless({ chain, side, seriesId: picked, account, walletClient, trading });
+        setPosition({ qN: p.qN, markUsd: p.markUsd, intrinsicUsd: p.intrinsicUsd });
+      } else {
+        setPosition(await getPosition({ chain, side, seriesId: picked, account }));
+      }
+    } catch {
+      setPosition(null);
+    }
+  }, [account, chain, side, picked, gasless, trading, walletClient]);
+  useEffect(() => {
+    refreshPosition();
+  }, [refreshPosition]);
+  const onBuy = useCallback(async () => {
+    if (!walletClient || !account || picked === null) {
+      setStatus("Connect a wallet first.");
+      return;
+    }
+    const qN = Number(amount);
+    if (!(qN > 0)) {
+      setStatus("Enter an amount > 0.");
+      return;
+    }
+    setBusy(true);
+    try {
+      if (gasless) {
+        setStatus("Confirm one signature\u2026");
+        const t = trading ?? await deriveTradingAccount(walletClient, account, chain);
+        if (!trading) setTrading(t);
+        const r = await buyGasless({ chain, side, seriesId: picked, qN, walletClient, account, trading: t });
+        setStatus(`Bought ${qN} contracts. tx ${r.txHash.slice(0, 10)}\u2026`);
+      } else {
+        setStatus("Confirm in your wallet (approve, then buy)\u2026");
+        const r = await buy({ chain, side, seriesId: picked, qN, walletClient, account });
+        setStatus(`Bought ${r.qN} contracts. tx ${r.txHash.slice(0, 10)}\u2026`);
+      }
+      await refreshPosition();
+    } catch (e) {
+      setStatus(`Buy failed: ${errMsg(e)}`);
+    } finally {
+      setBusy(false);
+    }
+  }, [walletClient, account, chain, side, picked, amount, refreshPosition, gasless, trading]);
+  const onClose = useCallback(async () => {
+    if (!walletClient || !account || picked === null) return;
+    setBusy(true);
+    try {
+      if (gasless) {
+        setStatus("Closing\u2026");
+        const t = trading ?? await deriveTradingAccount(walletClient, account, chain);
+        if (!trading) setTrading(t);
+        const r = await closeGasless({ chain, side, seriesId: picked, walletClient, account, trading: t });
+        setStatus(`Closed. tx ${r.txHash.slice(0, 10)}\u2026`);
+      } else {
+        setStatus("Confirm in your wallet (approve, then close)\u2026");
+        const r = await close({ chain, side, seriesId: picked, walletClient, account });
+        setStatus(`Closed ${r.qN} contracts. tx ${r.txHash.slice(0, 10)}\u2026`);
+      }
+      await refreshPosition();
+    } catch (e) {
+      setStatus(`Close failed: ${errMsg(e)}`);
+    } finally {
+      setBusy(false);
+    }
+  }, [walletClient, account, chain, side, picked, refreshPosition, gasless, trading]);
+  const hasPosition = !!position && position.qN > 0;
+  return /* @__PURE__ */ jsxs("div", { className: [rootClass, className].filter(Boolean).join(" "), style: vars, children: [
+    /* @__PURE__ */ jsx("style", { children: css(rootClass) }),
+    /* @__PURE__ */ jsxs("div", { className: "swt-card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "swt-head", children: [
+        /* @__PURE__ */ jsx("strong", { children: "Trade leverage on Split" }),
+        /* @__PURE__ */ jsx("span", { className: "swt-tag", children: "can't be liquidated \xB7 max loss = premium" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "swt-row", children: ["long", "short"].map((s) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSide(s),
+          className: `swt-toggle${side === s ? " is-on" : ""}`,
+          children: s === "long" ? "Long (ETH up)" : "Short (ETH down)"
+        },
+        s
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "swt-tiles", children: [
+        markets.length === 0 && /* @__PURE__ */ jsx("div", { className: "swt-muted", children: "No live markets right now." }),
+        markets.map((m) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setPicked(m.seriesId),
+            className: `swt-tile${picked === m.seriesId ? " is-on" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "swt-lev", children: m.leverage > 0 ? `${m.leverage.toFixed(0)}x` : "\u2014" }),
+              /* @__PURE__ */ jsxs("div", { className: "swt-muted", children: [
+                "$",
+                m.strike.toLocaleString()
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "swt-muted-sm", children: [
+                "$",
+                m.premium.toFixed(2),
+                "/contract"
+              ] })
+            ]
+          },
+          m.seriesId
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "swt-row", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: amount,
+            onChange: (e) => setAmount(e.target.value),
+            inputMode: "decimal",
+            placeholder: "0.1",
+            className: "swt-input"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "swt-muted", children: "contracts" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onBuy,
+            disabled: busy || picked === null,
+            className: "swt-buy",
+            children: busy ? "\u2026" : "Buy"
+          }
+        )
+      ] }),
+      hasPosition && /* @__PURE__ */ jsxs("div", { className: "swt-pos", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "swt-muted", children: "Your position" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("strong", { children: position.qN.toFixed(4) }),
+            " contracts \xB7 mark $",
+            position.markUsd.toFixed(2)
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "swt-muted-sm", children: [
+            "intrinsic $",
+            position.intrinsicUsd.toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, disabled: busy, className: "swt-close", children: busy ? "\u2026" : "Close" })
+      ] }),
+      status && /* @__PURE__ */ jsx("div", { className: "swt-status", children: status })
+    ] })
+  ] });
+}
+function errMsg(e) {
+  if (e && typeof e === "object") {
+    const o = e;
+    if (typeof o.shortMessage === "string") return o.shortMessage;
+    if (typeof o.message === "string") return o.message;
+  }
+  return String(e);
+}
+function css(root) {
+  const r = `.${root}`;
+  return `
+${r} .swt-card{max-width:380px;border:1px solid color-mix(in srgb, var(--swt-text) 12%, transparent);border-radius:var(--swt-radius);padding:16px;background:var(--swt-bg);color:var(--swt-text);font-family:var(--swt-font);display:flex;flex-direction:column;gap:12px}
+${r} .swt-head{display:flex;flex-direction:column;gap:4px}
+${r} .swt-tag{font-size:12px;color:var(--swt-accent)}
+${r} .swt-row{display:flex;gap:8px;align-items:center}
+${r} .swt-toggle{flex:1;padding:8px 10px;border-radius:calc(var(--swt-radius) * 0.6);border:1px solid color-mix(in srgb, var(--swt-text) 16%, transparent);background:transparent;color:var(--swt-muted);cursor:pointer;font-family:inherit}
+${r} .swt-toggle.is-on{background:color-mix(in srgb, var(--swt-accent) 18%, transparent);color:var(--swt-accent);border-color:color-mix(in srgb, var(--swt-accent) 50%, transparent)}
+${r} .swt-tiles{display:grid;grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));gap:8px}
+${r} .swt-tile{padding:10px 8px;border-radius:calc(var(--swt-radius) * 0.6);border:1px solid color-mix(in srgb, var(--swt-text) 16%, transparent);background:transparent;color:var(--swt-text);cursor:pointer;text-align:center;font-family:inherit}
+${r} .swt-tile.is-on{border-color:var(--swt-accent);background:color-mix(in srgb, var(--swt-accent) 14%, transparent)}
+${r} .swt-lev{font-size:18px;font-weight:700}
+${r} .swt-muted{color:var(--swt-muted);font-size:13px}
+${r} .swt-muted-sm{color:color-mix(in srgb, var(--swt-muted) 80%, transparent);font-size:11px}
+${r} .swt-input{flex:1;min-width:0;padding:8px 10px;border-radius:calc(var(--swt-radius) * 0.6);border:1px solid color-mix(in srgb, var(--swt-text) 16%, transparent);background:var(--swt-surface);color:var(--swt-text);font-family:inherit}
+${r} .swt-buy{padding:8px 18px;border-radius:calc(var(--swt-radius) * 0.6);border:none;background:var(--swt-accent);color:#fff;font-weight:600;cursor:pointer;font-family:inherit}
+${r} .swt-buy:disabled,${r} .swt-close:disabled{opacity:.6;cursor:default}
+${r} .swt-pos{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:calc(var(--swt-radius) * 0.75);background:var(--swt-surface)}
+${r} .swt-close{padding:8px 14px;border-radius:calc(var(--swt-radius) * 0.6);border:1px solid color-mix(in srgb, var(--swt-text) 16%, transparent);background:transparent;color:var(--swt-text);cursor:pointer;font-family:inherit}
+${r} .swt-status{font-size:12px;color:var(--swt-muted)}
+`;
+}
+var example_default = SplitTradeWidget;
+
+export { SplitTradeWidget, example_default as default };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@splitmarkets/sdk",
+  "version": "0.2.0",
+  "description": "Oracle-free, non-liquidatable ETH options — viem client + optional React widget for Split (split.markets). Integrate leverage your users can't get liquidated out of.",
+  "license": "MIT",
+  "type": "module",
+  "files": ["dist", "README.md", "SKILL.md"],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
+    "./widget": { "types": "./dist/widget.d.ts", "import": "./dist/widget.js" }
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run test/unit.test.ts",
+    "test:integration": "vitest run test/integration.test.ts",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "keywords": ["ethereum", "base", "arbitrum", "options", "defi", "viem", "split", "no-liquidation"],
+  "homepage": "https://split.markets",
+  "peerDependencies": {
+    "viem": "^2",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true }
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "^19",
+    "tsup": "^8",
+    "typescript": "^5",
+    "viem": "^2",
+    "vitest": "^2"
+  }
+}