@orkid-labs/widget 0.1.0

package/dist/index.js

@@ -0,0 +1,1042 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  OrkidSwapContext: () => OrkidSwapContext,
+  OrkidSwapIframe: () => OrkidSwapIframe,
+  OrkidSwapProvider: () => OrkidSwapProvider,
+  OrkidSwapWidget: () => OrkidSwapWidget,
+  defaultDarkTheme: () => defaultDarkTheme,
+  defaultLightTheme: () => defaultLightTheme,
+  mountOrkidSwap: () => mountOrkidSwap,
+  resolveTheme: () => resolveTheme,
+  themeToCssVariables: () => themeToCssVariables,
+  useOrkidSwapContext: () => useOrkidSwapContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject(".orkid-widget {\n  font-family: var(--orkid-widget-font-family);\n  color: var(--orkid-widget-text);\n  background: var(--orkid-widget-bg);\n  border-radius: var(--orkid-widget-radius);\n  border: 1px solid var(--orkid-widget-border);\n  padding: 1rem;\n  width: 100%;\n  max-width: 28rem;\n  box-sizing: border-box;\n}\n.orkid-widget *,\n.orkid-widget *::before,\n.orkid-widget *::after {\n  box-sizing: border-box;\n}\n.orkid-widget-card {\n  background: var(--orkid-widget-card);\n  color: var(--orkid-widget-card-foreground);\n  border-radius: var(--orkid-widget-radius);\n  border: 1px solid var(--orkid-widget-border);\n}\n.orkid-widget-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n}\n.orkid-widget-title {\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.orkid-widget-label {\n  font-size: 0.875rem;\n  color: var(--orkid-widget-muted-foreground);\n  margin-bottom: 0.25rem;\n}\n.orkid-widget-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.orkid-widget-input,\n.orkid-widget-select-trigger,\n.orkid-widget-button {\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: var(--orkid-widget-radius);\n  border: 1px solid var(--orkid-widget-input);\n  background: var(--orkid-widget-card);\n  color: var(--orkid-widget-card-foreground);\n  padding: 0.5rem 0.75rem;\n  min-height: 2.5rem;\n}\n.orkid-widget-input {\n  flex: 1;\n  outline: none;\n}\n.orkid-widget-input:focus,\n.orkid-widget-select-trigger:focus,\n.orkid-widget-button:focus {\n  outline: 2px solid var(--orkid-widget-ring);\n  outline-offset: -1px;\n}\n.orkid-widget-button {\n  cursor: pointer;\n  background: var(--orkid-widget-primary);\n  color: var(--orkid-widget-primary-foreground);\n  border-color: var(--orkid-widget-primary);\n  width: 100%;\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n}\n.orkid-widget-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.orkid-widget-button-secondary {\n  background: var(--orkid-widget-muted);\n  color: var(--orkid-widget-muted-foreground);\n  border-color: var(--orkid-widget-border);\n}\n.orkid-widget-select-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  cursor: pointer;\n  min-width: 7rem;\n}\n.orkid-widget-dropdown {\n  position: absolute;\n  z-index: 50;\n  top: 100%;\n  left: 0;\n  margin-top: 0.25rem;\n  width: 18rem;\n  background: var(--orkid-widget-popover);\n  color: var(--orkid-widget-popover-foreground);\n  border: 1px solid var(--orkid-widget-border);\n  border-radius: var(--orkid-widget-radius);\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n.orkid-widget-dropdown-item {\n  width: 100%;\n  text-align: left;\n  padding: 0.5rem 0.75rem;\n  background: transparent;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font-size: 0.875rem;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.orkid-widget-dropdown-item:hover {\n  background: var(--orkid-widget-accent);\n  color: var(--orkid-widget-accent-foreground);\n}\n.orkid-widget-dropdown-item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.orkid-widget-search {\n  width: 100%;\n  border: none;\n  background: transparent;\n  color: inherit;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n}\n.orkid-widget-success {\n  color: var(--orkid-widget-success);\n  background: color-mix(in srgb, var(--orkid-widget-success) 10%, transparent);\n  border: 1px solid color-mix(in srgb, var(--orkid-widget-success) 30%, transparent);\n  border-radius: var(--orkid-widget-radius);\n  padding: 0.75rem;\n  font-size: 0.875rem;\n}\n.orkid-widget-error {\n  color: var(--orkid-widget-danger);\n  background: color-mix(in srgb, var(--orkid-widget-danger) 10%, transparent);\n  border: 1px solid color-mix(in srgb, var(--orkid-widget-danger) 30%, transparent);\n  border-radius: var(--orkid-widget-radius);\n  padding: 0.75rem;\n  font-size: 0.875rem;\n}\n.orkid-widget-warning {\n  color: var(--orkid-widget-warning);\n  background: color-mix(in srgb, var(--orkid-widget-warning) 10%, transparent);\n  border: 1px solid color-mix(in srgb, var(--orkid-widget-warning) 30%, transparent);\n  border-radius: var(--orkid-widget-radius);\n  padding: 0.75rem;\n  font-size: 0.875rem;\n}\n.orkid-widget-info {\n  color: var(--orkid-widget-muted-foreground);\n  background: color-mix(in srgb, var(--orkid-widget-primary) 5%, transparent);\n  border: 1px solid color-mix(in srgb, var(--orkid-widget-primary) 20%, transparent);\n  border-radius: var(--orkid-widget-radius);\n  padding: 0.75rem;\n  font-size: 0.75rem;\n}\n.orkid-widget-footer {\n  font-size: 0.75rem;\n  color: var(--orkid-widget-muted-foreground);\n  text-align: center;\n  margin-top: 0.75rem;\n}\n.orkid-widget-spin {\n  animation: orkid-spin 1s linear infinite;\n}\n@keyframes orkid-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
+
+// src/OrkidSwapProvider.tsx
+var import_react2 = require("react");
+var import_wagmi = require("wagmi");
+var import_chains = require("wagmi/chains");
+var import_connectors = require("wagmi/connectors");
+var import_react_query = require("@tanstack/react-query");
+var import_sdk = require("@orkid/sdk");
+
+// src/context.tsx
+var import_react = require("react");
+var OrkidSwapContext = (0, import_react.createContext)(void 0);
+function useOrkidSwapContext() {
+  const ctx = (0, import_react.useContext)(OrkidSwapContext);
+  if (!ctx) throw new Error("useOrkidSwapContext must be used within OrkidSwapProvider");
+  return ctx;
+}
+
+// src/theme.ts
+var defaultLightTheme = {
+  background: "#ffffff",
+  card: "#ffffff",
+  cardForeground: "#0f172a",
+  primary: "#0052ff",
+  primaryForeground: "#ffffff",
+  text: "#0f172a",
+  muted: "#f1f5f9",
+  mutedForeground: "#64748b",
+  border: "#e2e8f0",
+  success: "#22c55e",
+  warning: "#f59e0b",
+  danger: "#ef4444",
+  radius: "0.625rem",
+  fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  accent: "#f1f5f9",
+  accentForeground: "#0f172a",
+  popover: "#ffffff",
+  popoverForeground: "#0f172a",
+  input: "#e2e8f0",
+  ring: "#0052ff"
+};
+var defaultDarkTheme = {
+  background: "#0f172a",
+  card: "#1e293b",
+  cardForeground: "#f8fafc",
+  primary: "#3b82f6",
+  primaryForeground: "#ffffff",
+  text: "#f8fafc",
+  muted: "#334155",
+  mutedForeground: "#94a3b8",
+  border: "#334155",
+  success: "#4ade80",
+  warning: "#fbbf24",
+  danger: "#f87171",
+  radius: "0.625rem",
+  fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  accent: "#334155",
+  accentForeground: "#f8fafc",
+  popover: "#1e293b",
+  popoverForeground: "#f8fafc",
+  input: "#334155",
+  ring: "#3b82f6"
+};
+function resolveTheme(partial = {}) {
+  return { ...defaultLightTheme, ...partial };
+}
+function themeToCssVariables(theme) {
+  return {
+    "--orkid-widget-bg": theme.background,
+    "--orkid-widget-card": theme.card,
+    "--orkid-widget-card-foreground": theme.cardForeground,
+    "--orkid-widget-primary": theme.primary,
+    "--orkid-widget-primary-foreground": theme.primaryForeground,
+    "--orkid-widget-text": theme.text,
+    "--orkid-widget-muted": theme.muted,
+    "--orkid-widget-muted-foreground": theme.mutedForeground,
+    "--orkid-widget-border": theme.border,
+    "--orkid-widget-success": theme.success,
+    "--orkid-widget-warning": theme.warning,
+    "--orkid-widget-danger": theme.danger,
+    "--orkid-widget-radius": theme.radius,
+    "--orkid-widget-font-family": theme.fontFamily,
+    "--orkid-widget-accent": theme.accent,
+    "--orkid-widget-accent-foreground": theme.accentForeground,
+    "--orkid-widget-popover": theme.popover,
+    "--orkid-widget-popover-foreground": theme.popoverForeground,
+    "--orkid-widget-input": theme.input,
+    "--orkid-widget-ring": theme.ring
+  };
+}
+
+// src/OrkidSwapProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_API_BASE_URL = "https://orkidlabs.xyz";
+var queryClient = new import_react_query.QueryClient();
+function OrkidSwapProvider({
+  apiKey = "",
+  apiBaseUrl = DEFAULT_API_BASE_URL,
+  partnerId,
+  walletMode = "built-in",
+  walletConnectProjectId,
+  wagmiConfig,
+  theme,
+  logoUrl,
+  brandName,
+  showPoweredBy = true,
+  supportedChains = [8453, 1, 42161, 137],
+  defaultFromToken,
+  defaultToToken,
+  defaultAmount,
+  defaultSlippageBps = 50,
+  tokenList,
+  gasless = true,
+  onQuote,
+  onSolve,
+  onError,
+  children
+}) {
+  const client = (0, import_react2.useMemo)(
+    () => new import_sdk.OrkidClient({ apiKey, baseUrl: apiBaseUrl }),
+    [apiKey, apiBaseUrl]
+  );
+  const resolvedTheme = (0, import_react2.useMemo)(() => resolveTheme(theme), [theme]);
+  const resolvedWagmiConfig = (0, import_react2.useMemo)(() => {
+    if (walletMode === "external") return wagmiConfig;
+    if (walletMode !== "built-in") return void 0;
+    const chainsToUse = [import_chains.base];
+    if (supportedChains.includes(1)) chainsToUse.push(import_chains.mainnet);
+    if (supportedChains.includes(42161)) chainsToUse.push(import_chains.arbitrum);
+    if (supportedChains.includes(137)) chainsToUse.push(import_chains.polygon);
+    const connectors = [(0, import_connectors.injected)({ shimDisconnect: true })];
+    if (walletConnectProjectId) {
+      connectors.push(
+        (0, import_connectors.walletConnect)({
+          projectId: walletConnectProjectId,
+          metadata: {
+            name: brandName || "Orkid Swap",
+            description: "Gasless token swaps \u2014 competitive, no gas",
+            url: "https://orkidlabs.xyz",
+            icons: logoUrl ? [logoUrl] : []
+          }
+        })
+      );
+    }
+    return (0, import_wagmi.createConfig)({
+      chains: chainsToUse,
+      connectors,
+      transports: {
+        [import_chains.base.id]: (0, import_wagmi.http)("https://rpc.orkidlabs.com/rpc/base"),
+        [import_chains.mainnet.id]: (0, import_wagmi.http)("https://rpc.orkidlabs.com/rpc/ethereum"),
+        [import_chains.arbitrum.id]: (0, import_wagmi.http)("https://rpc.orkidlabs.com/rpc/arbitrum"),
+        [import_chains.polygon.id]: (0, import_wagmi.http)("https://rpc.orkidlabs.com/rpc/polygon")
+      }
+    });
+  }, [walletMode, wagmiConfig, supportedChains, walletConnectProjectId, brandName, logoUrl]);
+  const value = {
+    client,
+    wagmiConfig: resolvedWagmiConfig,
+    walletMode,
+    theme: resolvedTheme,
+    logoUrl,
+    brandName,
+    showPoweredBy,
+    supportedChains,
+    defaultFromToken,
+    defaultToToken,
+    defaultAmount,
+    defaultSlippageBps,
+    tokenList,
+    gasless,
+    partnerId,
+    onQuote,
+    onSolve,
+    onError
+  };
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OrkidSwapContext.Provider, { value, children });
+  if (walletMode === "built-in" && resolvedWagmiConfig) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wagmi.WagmiProvider, { config: resolvedWagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: content }) });
+  }
+  return content;
+}
+
+// src/OrkidSwapWidget.tsx
+var import_react5 = require("react");
+var import_wagmi2 = require("wagmi");
+var import_viem = require("viem");
+var import_sdk3 = require("@orkid/sdk");
+
+// src/TokenSelect.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function TokenSelect({
+  value,
+  onChange,
+  chainId,
+  chainName,
+  tokenList,
+  client,
+  label
+}) {
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const [search, setSearch] = (0, import_react3.useState)("");
+  const [tokens, setTokens] = (0, import_react3.useState)(tokenList || []);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const ref = (0, import_react3.useRef)(null);
+  const searchRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (tokenList) {
+      setTokens(tokenList.filter((t2) => t2.chain === chainName));
+      return;
+    }
+    if (!open) return;
+    setLoading(true);
+    const t = setTimeout(async () => {
+      try {
+        const res = await client.listTokens({ search, limit: 50, chain: chainName });
+        if (res.ok && res.tokens) {
+          setTokens(res.tokens.filter((t2) => t2.address !== "0x0000000000000000000000000000000000000000"));
+        }
+      } catch (err) {
+        console.error("TokenSelect fetch failed:", err);
+      } finally {
+        setLoading(false);
+      }
+    }, 200);
+    return () => clearTimeout(t);
+  }, [open, search, chainName, tokenList, client]);
+  (0, import_react3.useEffect)(() => {
+    if (open && searchRef.current) searchRef.current.focus();
+  }, [open]);
+  (0, import_react3.useEffect)(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    if (open) document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  (0, import_react3.useEffect)(() => {
+    setSearch("");
+    if (!tokenList) setTokens([]);
+  }, [chainName, tokenList]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "orkid-widget-select-trigger",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: value ? value.symbol : "Select" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u25BC" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "orkid-widget-dropdown", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { borderBottom: "1px solid var(--orkid-widget-border)", padding: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          ref: searchRef,
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          placeholder: "Search token...",
+          className: "orkid-widget-search"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { maxHeight: "16rem", overflowY: "auto" }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "0.75rem", textAlign: "center", color: "var(--orkid-widget-muted-foreground)" }, children: "Loading..." }) : tokens.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "0.75rem", textAlign: "center", color: "var(--orkid-widget-muted-foreground)" }, children: "No tokens found" }) : tokens.map((t) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "orkid-widget-dropdown-item",
+          onClick: () => {
+            onChange(t);
+            setOpen(false);
+            setSearch("");
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 500 }, children: t.symbol }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontSize: "0.75rem", fontFamily: "monospace", color: "var(--orkid-widget-muted-foreground)" }, children: [
+              t.address.slice(0, 6),
+              "...",
+              t.address.slice(-4)
+            ] })
+          ]
+        },
+        t.address
+      )) })
+    ] })
+  ] });
+}
+
+// src/ChainSelect.tsx
+var import_react4 = require("react");
+var import_sdk2 = require("@orkid/sdk");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CHAIN_NAME = {
+  8453: "base",
+  1: "ethereum",
+  42161: "arbitrum",
+  137: "polygon"
+};
+var CHAIN_LIVE = {
+  8453: true,
+  1: true,
+  42161: true,
+  137: true
+};
+function ChainSelect({
+  selected,
+  onSelect,
+  supported
+}) {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    if (open) document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const currentConfig = import_sdk2.ORKID_CHAIN_CONFIG[selected];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "orkid-widget-select-trigger",
+        style: { display: "flex", alignItems: "center", gap: "0.5rem" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "span",
+            {
+              style: {
+                width: "0.5rem",
+                height: "0.5rem",
+                borderRadius: "50%",
+                background: currentConfig?.color || "var(--orkid-widget-primary)"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: currentConfig?.shortName || "BASE" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u25BC" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orkid-widget-dropdown", style: { right: 0, left: "auto", width: "12rem" }, children: supported.map((id) => {
+      const config = import_sdk2.ORKID_CHAIN_CONFIG[id];
+      const live = CHAIN_LIVE[id];
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "orkid-widget-dropdown-item",
+          onClick: () => {
+            if (live) onSelect(id);
+            setOpen(false);
+          },
+          disabled: !live,
+          title: live ? void 0 : "Contact Orkid to enable this chain",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "orkid-widget-row", style: { gap: "0.5rem" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  style: {
+                    width: "0.5rem",
+                    height: "0.5rem",
+                    borderRadius: "50%",
+                    background: config?.color || "var(--orkid-widget-primary)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: config?.name || CHAIN_NAME[id] })
+            ] }),
+            id === selected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "var(--orkid-widget-primary)" }, children: "\u2713" }),
+            !live && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "0.7rem", color: "var(--orkid-widget-muted-foreground)" }, children: "soon" })
+          ]
+        },
+        id
+      );
+    }) })
+  ] });
+}
+
+// src/OrkidSwapWidget.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var erc20Abi = (0, import_viem.parseAbi)([
+  "function allowance(address owner, address spender) view returns (uint256)",
+  "function approve(address spender, uint256 amount) returns (bool)",
+  "function balanceOf(address account) view returns (uint256)"
+]);
+var permit2Abi = (0, import_viem.parseAbi)([
+  "function nonceBitmap(address owner, uint256 wordPos) view returns (uint256)"
+]);
+var PERMIT_TRANSFER_FROM_TYPES = {
+  PermitTransferFrom: [
+    { name: "permitted", type: "TokenPermissions" },
+    { name: "spender", type: "address" },
+    { name: "nonce", type: "uint256" },
+    { name: "deadline", type: "uint256" }
+  ],
+  TokenPermissions: [
+    { name: "token", type: "address" },
+    { name: "amount", type: "uint256" }
+  ]
+};
+var CHAIN_NAME2 = {
+  8453: "base",
+  1: "ethereum",
+  42161: "arbitrum",
+  137: "polygon"
+};
+var CHAIN_LIVE2 = {
+  8453: true,
+  1: true,
+  42161: true,
+  137: true
+};
+function OrkidSwapWidget({ className }) {
+  const ctx = useOrkidSwapContext();
+  const client = ctx.client;
+  const [selectedChainId, setSelectedChainId] = (0, import_react5.useState)(ctx.supportedChains[0] ?? 8453);
+  const [fromToken, setFromToken] = (0, import_react5.useState)(ctx.defaultFromToken);
+  const [toToken, setToToken] = (0, import_react5.useState)(ctx.defaultToToken);
+  const [amount, setAmount] = (0, import_react5.useState)(ctx.defaultAmount ?? "");
+  const [slippageBps, setSlippageBps] = (0, import_react5.useState)(ctx.defaultSlippageBps);
+  const [showSlippage, setShowSlippage] = (0, import_react5.useState)(false);
+  const [quote, setQuote] = (0, import_react5.useState)(null);
+  const [loading, setLoading] = (0, import_react5.useState)(null);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const [txHash, setTxHash] = (0, import_react5.useState)(null);
+  const [execMode, setExecMode] = (0, import_react5.useState)(null);
+  const { address, isConnected } = (0, import_wagmi2.useAccount)();
+  const walletChainId = (0, import_wagmi2.useChainId)();
+  const { connect, connectors, isPending: isConnecting } = (0, import_wagmi2.useConnect)();
+  const { disconnect } = (0, import_wagmi2.useDisconnect)();
+  const { switchChain } = (0, import_wagmi2.useSwitchChain)();
+  const publicClient = (0, import_wagmi2.usePublicClient)({ chainId: selectedChainId });
+  const { signTypedDataAsync } = (0, import_wagmi2.useSignTypedData)();
+  const { writeContract: approveWrite, data: approveTxHash, isPending: isApproving } = (0, import_wagmi2.useWriteContract)();
+  const { isSuccess: approvalConfirmed } = (0, import_wagmi2.useWaitForTransactionReceipt)({ hash: approveTxHash });
+  const { sendTransactionAsync, data: fallbackTxHash, isPending: isSendingFallback } = (0, import_wagmi2.useSendTransaction)();
+  const { isSuccess: fallbackConfirmed } = (0, import_wagmi2.useWaitForTransactionReceipt)({ hash: fallbackTxHash });
+  const { isSuccess: swapConfirmed } = (0, import_wagmi2.useWaitForTransactionReceipt)({
+    hash: txHash,
+    chainId: selectedChainId
+  });
+  const isOnCorrectChain = walletChainId === selectedChainId;
+  const chainName = CHAIN_NAME2[selectedChainId] ?? "base";
+  const chainLive = CHAIN_LIVE2[selectedChainId] ?? false;
+  const { data: fromTokenBalance } = (0, import_wagmi2.useReadContract)({
+    address: fromToken?.address,
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: address && fromToken ? [address] : void 0,
+    chainId: selectedChainId,
+    query: { enabled: !!address && !!fromToken && chainLive }
+  });
+  const { data: erc20Allowance, refetch: refetchAllowance } = (0, import_wagmi2.useReadContract)({
+    address: fromToken?.address,
+    abi: erc20Abi,
+    functionName: "allowance",
+    args: address && fromToken ? [address, import_sdk3.PERMIT2] : void 0,
+    chainId: selectedChainId,
+    query: { enabled: !!address && !!fromToken && chainLive }
+  });
+  (0, import_react5.useEffect)(() => {
+    if (approvalConfirmed) {
+      refetchAllowance();
+      setLoading(null);
+    }
+  }, [approvalConfirmed, refetchAllowance]);
+  (0, import_react5.useEffect)(() => {
+    if (fallbackConfirmed && fallbackTxHash) {
+      setTxHash(fallbackTxHash);
+      setLoading(null);
+      setAmount("");
+      setQuote(null);
+      client.confirmTransaction?.(fallbackTxHash, chainName).catch(() => {
+      });
+      ctx.onSolve?.({ ok: true, transaction: { txHash: fallbackTxHash, to: "", data: "", value: "0", chain: chainName }, computeMs: 0 });
+    }
+  }, [fallbackConfirmed, fallbackTxHash, chainName, ctx, client]);
+  const chainConfig = (0, import_react5.useMemo)(() => {
+    try {
+      return (0, import_sdk3.chainConfigFromName)(chainName);
+    } catch {
+      return void 0;
+    }
+  }, [chainName]);
+  const fetchQuote = (0, import_react5.useCallback)(async () => {
+    if (!amount || Number.parseFloat(amount) <= 0 || !fromToken || !toToken || !chainLive) {
+      setQuote(null);
+      return;
+    }
+    setLoading("quote");
+    setError(null);
+    try {
+      const res = await client.getQuote({
+        from: fromToken.symbol,
+        to: toToken.symbol,
+        amount,
+        chain: chainName,
+        fromAddress: fromToken.address,
+        toAddress: toToken.address,
+        fromDecimals: fromToken.decimals,
+        toDecimals: toToken.decimals
+      });
+      setQuote(res);
+      ctx.onQuote?.(res);
+      if (!res.ok) setError(res.error || "Quote failed");
+    } catch (e) {
+      setError(e.message || "Quote failed");
+      setQuote(null);
+      ctx.onError?.(e.message || "Quote failed");
+    } finally {
+      setLoading(null);
+    }
+  }, [amount, fromToken, toToken, chainName, chainLive, client, ctx]);
+  (0, import_react5.useEffect)(() => {
+    const t = setTimeout(fetchQuote, 400);
+    return () => clearTimeout(t);
+  }, [fetchQuote]);
+  (0, import_react5.useEffect)(() => {
+    setFromToken(ctx.defaultFromToken);
+    setToToken(ctx.defaultToToken);
+    setAmount(ctx.defaultAmount ?? "");
+    setQuote(null);
+    setError(null);
+    setTxHash(null);
+  }, [selectedChainId, ctx.defaultFromToken, ctx.defaultToToken, ctx.defaultAmount]);
+  async function findUnusedNonce(owner) {
+    if (!publicClient) throw new Error("No public client");
+    const arr = new Uint32Array(1);
+    crypto.getRandomValues(arr);
+    const startWord = BigInt(arr[0] >> 8);
+    const MAX_OFFSET = BigInt(1e3);
+    const MODULUS = BigInt(1e6);
+    const EIGHT = BigInt(8);
+    const ONE = BigInt(1);
+    const ZERO = BigInt(0);
+    for (let offset = BigInt(0); offset < MAX_OFFSET; offset++) {
+      const wordPos = (startWord + offset) % MODULUS;
+      const bitmap = await publicClient.readContract({
+        address: import_sdk3.PERMIT2,
+        abi: permit2Abi,
+        functionName: "nonceBitmap",
+        args: [owner, wordPos]
+      });
+      if (bitmap === import_viem.maxUint256) continue;
+      for (let bitPos = 0; bitPos < 256; bitPos++) {
+        const bit = ONE << BigInt(bitPos);
+        if ((bitmap & bit) === ZERO) {
+          return wordPos << EIGHT | BigInt(bitPos);
+        }
+      }
+    }
+    throw new Error("No unused Permit2 nonce found");
+  }
+  function parseAmount(value, decimals) {
+    const normalized = value.trim();
+    if (!/^\d+(\.\d+)?$/.test(normalized)) throw new Error("Invalid amount");
+    const [whole, fraction = ""] = normalized.split(".");
+    if (fraction.length > decimals) throw new Error(`Amount supports at most ${decimals} decimals`);
+    const scale = BigInt("1" + "0".repeat(decimals));
+    return BigInt(whole) * scale + BigInt(fraction.padEnd(decimals, "0") || "0");
+  }
+  async function handleSwap() {
+    if (!isConnected || !address || !fromToken || !toToken || !quote?.ok) {
+      setError("Connect a wallet and get a valid quote");
+      return;
+    }
+    if (!isOnCorrectChain || !chainLive) {
+      setError(`Please switch to ${chainConfig?.shortName || "Base"}`);
+      return;
+    }
+    setError(null);
+    setTxHash(null);
+    try {
+      const amountRaw = parseAmount(amount, fromToken.decimals);
+      if (fromTokenBalance !== void 0 && fromTokenBalance < amountRaw) {
+        const balHuman = Number(fromTokenBalance) / 10 ** fromToken.decimals;
+        setError(`Insufficient ${fromToken.symbol} balance. You have ${balHuman.toFixed(6)} ${fromToken.symbol} but tried ${amount}.`);
+        return;
+      }
+      const needsApproval = erc20Allowance === void 0 || erc20Allowance === BigInt(0);
+      if (needsApproval) {
+        setLoading("approve");
+        approveWrite({
+          address: fromToken.address,
+          abi: erc20Abi,
+          functionName: "approve",
+          args: [import_sdk3.PERMIT2, import_viem.maxUint256],
+          chainId: selectedChainId
+        });
+        return;
+      }
+      const nonce = await findUnusedNonce(address);
+      const deadline = BigInt(Math.floor(Date.now() / 1e3) + 3600);
+      const spender = chainConfig?.tvmExecutor;
+      if (!spender) throw new Error("No TVMExecutor configured for this chain");
+      setLoading("sign");
+      const signature = await signTypedDataAsync({
+        domain: (0, import_sdk3.buildPermit2Domain)(Number(walletChainId)),
+        types: PERMIT_TRANSFER_FROM_TYPES,
+        primaryType: "PermitTransferFrom",
+        message: {
+          permitted: { token: fromToken.address, amount: amountRaw },
+          spender,
+          nonce,
+          deadline
+        }
+      });
+      if (!signature || signature.length < 10) {
+        setError("Signature not provided");
+        setLoading(null);
+        return;
+      }
+      const belowMin = quote?.gaslessEligible === false;
+      const wantsGasless = ctx.gasless && !belowMin;
+      setLoading("solve");
+      setExecMode(wantsGasless ? "gasless" : "user-pays");
+      const permit = {
+        permitted: { token: fromToken.address, amount: amountRaw.toString() },
+        nonce: nonce.toString(),
+        deadline: deadline.toString()
+      };
+      const solveRes = await client.solve({
+        from: fromToken.symbol,
+        to: toToken.symbol,
+        amount,
+        chain: chainName,
+        user: address,
+        fromAddress: fromToken.address,
+        toAddress: toToken.address,
+        fromDecimals: fromToken.decimals,
+        toDecimals: toToken.decimals,
+        permit,
+        signature,
+        slippageBps,
+        dryRun: !wantsGasless
+      });
+      if (solveRes.ok && solveRes.transaction?.txHash) {
+        setTxHash(solveRes.transaction.txHash);
+        setAmount("");
+        setQuote(null);
+        ctx.onSolve?.(solveRes);
+        return;
+      }
+      if (solveRes.error?.includes("Gas estimation failed")) {
+        setError(`Solver rejected the swap: ${solveRes.error}`);
+        setLoading(null);
+        return;
+      }
+      if (!wantsGasless) {
+        if (!solveRes.ok || !solveRes.transaction) {
+          setError(solveRes.error || "Failed to encode swap");
+          setLoading(null);
+          return;
+        }
+        setExecMode("user-pays");
+        await sendTransactionAsync({
+          to: solveRes.transaction.to,
+          data: solveRes.transaction.data,
+          value: BigInt(solveRes.transaction.value || "0"),
+          chainId: selectedChainId
+        });
+        return;
+      }
+      const dryRes = await client.dryRun({
+        from: fromToken.symbol,
+        to: toToken.symbol,
+        amount,
+        chain: chainName,
+        user: address,
+        fromAddress: fromToken.address,
+        toAddress: toToken.address,
+        fromDecimals: fromToken.decimals,
+        toDecimals: toToken.decimals,
+        permit,
+        signature,
+        slippageBps
+      });
+      if (!dryRes.ok || !dryRes.transaction) {
+        setError(dryRes.error || solveRes.error || "Solver failed to encode swap");
+        setLoading(null);
+        return;
+      }
+      setExecMode("user-pays");
+      await sendTransactionAsync({
+        to: dryRes.transaction.to,
+        data: dryRes.transaction.data,
+        value: BigInt(dryRes.transaction.value || "0"),
+        chainId: selectedChainId
+      });
+    } catch (e) {
+      if (e.code === 4001 || e.message?.includes("rejected")) {
+        setError("Signature or transaction rejected");
+      } else {
+        setError(`[${e.code || "?"}] ${e.message || "Swap failed"}`);
+      }
+      setLoading(null);
+      ctx.onError?.(e.message || "Swap failed");
+    }
+  }
+  function handleConnect() {
+    const connector = connectors[0];
+    if (connector) {
+      connect({ connector });
+    } else {
+      setError("No wallet connector found");
+    }
+  }
+  function handleChainChange(id) {
+    if (!CHAIN_LIVE2[id]) return;
+    setSelectedChainId(id);
+    switchChain({ chainId: id });
+  }
+  const isBusy = loading !== null || isConnecting || isApproving || isSendingFallback;
+  const highImpact = quote?.ok && quote.quote?.priceImpactBps != null && quote.quote.priceImpactBps >= 300;
+  const canSwap = isConnected && isOnCorrectChain && chainLive && !!amount && !!fromToken && !!toToken && quote?.ok && !isBusy && !highImpact;
+  const buttonLabel = () => {
+    if (!isConnected) return "Connect Wallet";
+    if (!isOnCorrectChain || !chainLive) return `Switch to ${chainConfig?.shortName || "Base"}`;
+    if (loading === "quote") return "Fetching quote...";
+    if (loading === "approve" || isApproving) return "Approve Permit2...";
+    if (loading === "sign") return "Sign in wallet...";
+    if (loading === "solve" && execMode === "gasless") return "Executing gasless swap...";
+    if (loading === "solve" && execMode === "user-pays") return "Preparing fallback...";
+    if (isSendingFallback) return "Confirm in wallet...";
+    return "Swap";
+  };
+  const handleButtonClick = () => {
+    if (!isConnected) return handleConnect();
+    if (!isOnCorrectChain || !chainLive) {
+      if (chainLive) switchChain({ chainId: selectedChainId });
+      return;
+    }
+    handleSwap();
+  };
+  const explorer = chainConfig?.explorer || "https://basescan.org";
+  const style = (0, import_react5.useMemo)(() => themeToCssVariables(ctx.theme), [ctx.theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `orkid-widget ${className ?? ""}`, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-title", children: [
+        ctx.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: ctx.logoUrl, alt: "", className: "w-6 h-6 object-contain" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: ctx.brandName || "Swap" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChainSelect, { selected: selectedChainId, onSelect: handleChainChange, supported: ctx.supportedChains })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-4", children: [
+      isConnected && address ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", style: { justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "orkid-widget-muted-text", style: { fontFamily: "monospace", fontSize: "0.875rem" }, children: [
+          address.slice(0, 6),
+          "...",
+          address.slice(-4)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "orkid-widget-button-secondary", style: { width: "auto" }, onClick: () => disconnect(), children: "Disconnect" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "orkid-widget-button", onClick: handleConnect, disabled: isConnecting, children: isConnecting ? "Connecting..." : "Connect Wallet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orkid-widget-label", children: "From" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TokenSelect, { value: fromToken, onChange: setFromToken, chainId: selectedChainId, chainName, tokenList: ctx.tokenList, client }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              type: "number",
+              value: amount,
+              onChange: (e) => setAmount(e.target.value),
+              placeholder: "0.0",
+              className: "orkid-widget-input",
+              disabled: !chainLive
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orkid-widget-label", children: "To" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TokenSelect, { value: toToken, onChange: setToToken, chainId: selectedChainId, chainName, tokenList: ctx.tokenList, client }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orkid-widget-input", style: { display: "flex", alignItems: "center", fontFamily: "monospace", fontSize: "0.875rem" }, children: loading === "quote" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "orkid-widget-spin", children: "\u21BB" }) : quote?.ok ? quote.quote?.amountOut || "--" : "--" })
+        ] })
+      ] }),
+      quote?.ok && quote.savings && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-card", style: { padding: "0.75rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", style: { justifyContent: "space-between", fontSize: "0.875rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "var(--orkid-widget-muted-foreground)" }, children: "Orkid Fee" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { color: "var(--orkid-widget-primary)", fontWeight: 600 }, children: [
+            quote.savings.orkidBps,
+            " bps"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", style: { justifyContent: "space-between", fontSize: "0.875rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "var(--orkid-widget-muted-foreground)" }, children: "MetaMask Avg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { textDecoration: "line-through" }, children: [
+            quote.savings.metamaskBps,
+            " bps"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", style: { justifyContent: "space-between", fontSize: "0.875rem", borderTop: "1px solid var(--orkid-widget-border)", paddingTop: "0.5rem", marginTop: "0.5rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "var(--orkid-widget-primary)" }, children: "You Save" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontWeight: 700, color: "var(--orkid-widget-primary)" }, children: [
+            quote.savings.savingsMultiplier,
+            " lower fees"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", style: { justifyContent: "space-between", fontSize: "0.75rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "var(--orkid-widget-muted-foreground)" }, children: "Gas" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "var(--orkid-widget-success)" }, children: quote?.gaslessEligible === false ? "You pay (below $20 gasless min)" : execMode === "user-pays" ? "User pays" : "Gasless" })
+        ] })
+      ] }),
+      quote?.ok && quote.quote?.amountOut && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", style: { justifyContent: "space-between", fontSize: "0.875rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "var(--orkid-widget-muted-foreground)" }, children: "Minimum receive" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontFamily: "monospace" }, children: [
+            (Number(quote.quote.amountOut) * (1 - slippageBps / 1e4)).toFixed(6),
+            " ",
+            toToken?.symbol
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", style: { justifyContent: "space-between", fontSize: "0.75rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { onClick: () => setShowSlippage(!showSlippage), style: { color: "var(--orkid-widget-muted-foreground)", background: "none", border: "none", cursor: "pointer" }, children: [
+            "Slippage: ",
+            (slippageBps / 100).toFixed(1),
+            "% ",
+            showSlippage ? "\u25B2" : "\u25BC"
+          ] }),
+          showSlippage && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-row", children: [
+            [10, 50, 100, 200].map((bps) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "button",
+              {
+                onClick: () => setSlippageBps(bps),
+                className: slippageBps === bps ? "orkid-widget-button" : "orkid-widget-button-secondary",
+                style: { width: "auto", padding: "0.25rem 0.5rem", fontSize: "0.75rem" },
+                children: [
+                  bps / 100,
+                  "%"
+                ]
+              },
+              bps
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 500,
+                step: 1,
+                placeholder: "custom bps",
+                className: "orkid-widget-input",
+                style: { width: "6.5rem", padding: "0.25rem 0.5rem", fontSize: "0.75rem" },
+                onChange: (e) => {
+                  const v = Number(e.target.value);
+                  if (v > 0 && v <= 500) setSlippageBps(v);
+                }
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      quote?.ok && quote.quote?.priceImpactBps != null && quote.quote.priceImpactBps > 100 && (quote.quote.priceImpactBps >= 300 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-warning", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontWeight: 600 }, children: [
+          "High Price Impact: ",
+          (quote.quote.priceImpactBps / 100).toFixed(1),
+          "%"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { fontSize: "0.875rem", margin: "0.25rem 0 0" }, children: "This size exceeds available pool liquidity. Contact Orkid for OTC/API access." })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "var(--orkid-widget-warning)", fontSize: "0.75rem" }, children: [
+        "Price impact: ",
+        (quote.quote.priceImpactBps / 100).toFixed(2),
+        "%"
+      ] })),
+      txHash && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-success", children: [
+        swapConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          "Swap confirmed",
+          execMode === "user-pays" ? " (you paid gas)" : " (gasless)"
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "orkid-widget-spin", style: { marginRight: "0.5rem" }, children: "\u21BB" }),
+          "Swap submitted",
+          execMode === "user-pays" ? " (you paid gas)" : " (gasless)",
+          " \u2014 confirming\u2026"
+        ] }),
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: `${explorer}/tx/${txHash}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: "underline" }, children: "View" }),
+        swapConfirmed && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            className: "orkid-widget-button-secondary",
+            style: { width: "auto", padding: "0.25rem 0.75rem", fontSize: "0.75rem", marginLeft: "0.5rem" },
+            onClick: () => {
+              setTxHash(null);
+              setExecMode(null);
+              setQuote(null);
+              setAmount("");
+            },
+            children: "Swap again"
+          }
+        )
+      ] }),
+      quote?.ok && quote.gaslessEligible === false && !txHash && !error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "var(--orkid-widget-muted-foreground)", fontSize: "0.75rem" }, children: "Below the gasless minimum \u2014 you will submit this swap and pay gas yourself." }),
+      isConnected && canSwap && !txHash && !error && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orkid-widget-info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { fontWeight: 600 }, children: "How this works:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "1. Sign a permit off-chain (no gas) to authorize the solver." }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "2. The solver sends the transaction and pays the gas." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: "orkid-widget-button", onClick: handleButtonClick, disabled: isConnected && !canSwap, children: [
+        isBusy && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "orkid-widget-spin", style: { marginRight: "0.5rem" }, children: "\u21BB" }),
+        buttonLabel()
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orkid-widget-error", children: error }),
+      ctx.showPoweredBy && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orkid-widget-footer", children: "Powered by Orkid \xB7 Competitive fee \xB7 Gasless" })
+    ] })
+  ] });
+}
+
+// src/IframeWidget.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function OrkidSwapIframe({
+  src = "https://widget.orkidlabs.xyz",
+  partner,
+  brandName,
+  logoUrl,
+  theme,
+  fromToken,
+  toToken,
+  amount,
+  showPoweredBy,
+  allowFullScreen,
+  className,
+  style
+}) {
+  const url = (0, import_react6.useMemo)(() => {
+    const u = new URL(src);
+    if (partner) u.searchParams.set("partner", partner);
+    if (brandName) u.searchParams.set("brand", brandName);
+    if (logoUrl) u.searchParams.set("logo", logoUrl);
+    if (theme) u.searchParams.set("theme", encodeURIComponent(JSON.stringify(theme)));
+    if (fromToken) u.searchParams.set("from", fromToken);
+    if (toToken) u.searchParams.set("to", toToken);
+    if (amount) u.searchParams.set("amount", amount);
+    if (showPoweredBy !== void 0) u.searchParams.set("poweredBy", String(showPoweredBy));
+    return u.toString();
+  }, [src, partner, brandName, logoUrl, theme, fromToken, toToken, amount, showPoweredBy]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "iframe",
+    {
+      src: url,
+      className,
+      style: { width: "100%", height: "100%", minHeight: "560px", border: "none", ...style },
+      allowFullScreen,
+      title: "Orkid Swap"
+    }
+  );
+}
+
+// src/embed.ts
+var import_react7 = require("react");
+var import_client = require("react-dom/client");
+function mountOrkidSwap(options) {
+  const { target, ...props } = options;
+  const el = typeof target === "string" ? document.querySelector(target) : target;
+  if (!el) throw new Error(`OrkidSwap: target element not found: ${target}`);
+  const root = (0, import_client.createRoot)(el);
+  root.render(
+    (0, import_react7.createElement)(OrkidSwapProvider, props, (0, import_react7.createElement)(OrkidSwapWidget))
+  );
+  return () => root.unmount();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OrkidSwapContext,
+  OrkidSwapIframe,
+  OrkidSwapProvider,
+  OrkidSwapWidget,
+  defaultDarkTheme,
+  defaultLightTheme,
+  mountOrkidSwap,
+  resolveTheme,
+  themeToCssVariables,
+  useOrkidSwapContext
+});
+//# sourceMappingURL=index.js.map