@recoilpay/intent-react 0.1.0

package/dist/index.js

@@ -0,0 +1,354 @@
+// src/RecoilIntent.tsx
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+
+// src/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var base = {
+  width: 16,
+  height: 16,
+  viewBox: "0 0 16 16",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.5,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+var ArrowRight = () => /* @__PURE__ */ jsx("svg", { ...base, children: /* @__PURE__ */ jsx("path", { d: "M3 8h10M9 4l4 4-4 4" }) });
+var Check = () => /* @__PURE__ */ jsx("svg", { ...base, children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-7" }) });
+var Cross = () => /* @__PURE__ */ jsx("svg", { ...base, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
+var Alert = () => /* @__PURE__ */ jsxs("svg", { ...base, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 5v3.5M8 11h.01" })
+] });
+var Spinner = () => /* @__PURE__ */ jsx("svg", { ...base, className: "rp-spin", children: /* @__PURE__ */ jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) });
+var Route = () => /* @__PURE__ */ jsxs("svg", { ...base, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", r: "1.5" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.5 12H10a2 2 0 0 0 0-4H6a2 2 0 0 1 0-4h4.5" })
+] });
+var External = () => /* @__PURE__ */ jsx("svg", { ...base, width: 12, height: 12, children: /* @__PURE__ */ jsx("path", { d: "M6 3H3v10h10v-3M9 3h4v4M13 3L7 9" }) });
+
+// src/useRecoilIntent.ts
+import { createIntentSession } from "@recoilpay/intent-core";
+import { useEffect, useState, useSyncExternalStore } from "react";
+function useRecoilIntent(options = {}) {
+  const [session] = useState(() => options.session ?? createIntentSession({ apiUrl: options.apiUrl, hfAccessToken: options.hfAccessToken }));
+  const state = useSyncExternalStore(session.subscribe, session.getState, session.getState);
+  const wallet = options.wallet ?? null;
+  useEffect(() => session.setWallet(wallet), [session, wallet]);
+  const hfAccessToken = options.hfAccessToken;
+  useEffect(() => {
+    if (hfAccessToken !== void 0) session.setHfAccessToken(hfAccessToken);
+  }, [session, hfAccessToken]);
+  return { ...state, run: session.run, confirm: session.confirm, reset: session.reset, session };
+}
+
+// src/RecoilIntent.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_EXAMPLES = [
+  { label: "Swap 1 USDC from OP Sepolia to Base Sepolia", sentence: "swap 1 USDC on op sepolia for USDC on base sepolia" },
+  { label: "Swap 5 USDC from Base Sepolia to OP Sepolia", sentence: "swap 5 USDC on base sepolia for USDC on op sepolia" }
+];
+var BUSY = ["switchingChain", "approving", "signing", "submitting"];
+var CARD_PHASES = ["quoted", "needsWallet", ...BUSY];
+function themeVars(theme = {}) {
+  const vars = {};
+  if (theme.accent) vars["--rp-accent"] = theme.accent;
+  if (theme.accentText) vars["--rp-accent-text"] = theme.accentText;
+  if (theme.radius !== void 0) vars["--rp-radius"] = `${theme.radius}px`;
+  if (theme.fontFamily) vars["--rp-font"] = theme.fontFamily;
+  return vars;
+}
+function RecoilIntent(props) {
+  const intent = useRecoilIntent({ apiUrl: props.apiUrl, session: props.session, wallet: props.wallet, hfAccessToken: props.hfAccessToken });
+  const [value, setValue] = useState2(props.defaultValue ?? "");
+  const examples = props.examples === false ? [] : props.examples ?? DEFAULT_EXAMPLES;
+  useLifecycleCallbacks(intent, props);
+  const submit = (sentence = value) => {
+    const text = sentence.trim();
+    if (text && intent.ready) void intent.run(text);
+  };
+  const startOver = () => {
+    intent.reset();
+    setValue("");
+  };
+  const connect = () => props.onConnectWallet?.();
+  const showCard = intent.preview && (CARD_PHASES.includes(intent.phase) || intent.phase === "error" && intent.route);
+  return /* @__PURE__ */ jsxs2("div", { className: ["rp-root", props.className].filter(Boolean).join(" "), "data-mode": props.theme?.mode ?? "dark", style: themeVars(props.theme), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rp-composer", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "rp-composer-head", children: [
+        /* @__PURE__ */ jsxs2("span", { className: "rp-eyebrow", children: [
+          /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "/" }),
+          "intent"
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "rp-powered", children: "RecoilPay" })
+      ] }),
+      /* @__PURE__ */ jsxs2(
+        "form",
+        {
+          className: "rp-composer-row",
+          onSubmit: (e) => {
+            e.preventDefault();
+            submit();
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                className: "rp-input",
+                value,
+                onChange: (e) => setValue(e.target.value),
+                placeholder: props.placeholder ?? "swap 1 USDC on OP Sepolia for USDC on Base Sepolia",
+                "aria-label": "Describe a swap or send",
+                autoComplete: "off",
+                spellCheck: false,
+                maxLength: 500
+              }
+            ),
+            /* @__PURE__ */ jsx2("button", { type: "submit", className: "rp-run", "aria-label": "Run intent", disabled: !intent.ready || !value.trim(), children: /* @__PURE__ */ jsx2(ArrowRight, {}) })
+          ]
+        }
+      ),
+      intent.phase === "idle" && examples.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "rp-examples", children: [
+        /* @__PURE__ */ jsx2("span", { className: "rp-examples-label", children: "try" }),
+        /* @__PURE__ */ jsx2("div", { className: "rp-example-list", children: examples.map((ex) => /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "rp-example",
+            disabled: !intent.ready,
+            onClick: () => {
+              setValue(ex.sentence);
+              submit(ex.sentence);
+            },
+            children: ex.label
+          },
+          ex.sentence
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "rp-results", "aria-live": "polite", children: [
+      intent.assetsError && intent.phase === "idle" && /* @__PURE__ */ jsxs2(Note, { icon: /* @__PURE__ */ jsx2(Alert, {}), children: [
+        "Could not reach the solver network.",
+        " ",
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-link", onClick: () => void intent.session.refreshAssets(), children: "Retry" })
+      ] }),
+      intent.phase === "parsing" && /* @__PURE__ */ jsx2(Note, { icon: /* @__PURE__ */ jsx2(Spinner, {}), children: "Reading your intent\u2026" }),
+      intent.phase === "offTemplate" && intent.hint && /* @__PURE__ */ jsx2(Note, { icon: /* @__PURE__ */ jsx2(Alert, {}), children: intent.hint }),
+      intent.phase === "invalid" && /* @__PURE__ */ jsx2("ul", { className: "rp-issues", children: intent.issues.map((issue, i) => /* @__PURE__ */ jsxs2("li", { children: [
+        /* @__PURE__ */ jsx2(Alert, {}),
+        /* @__PURE__ */ jsx2("span", { children: issue.message })
+      ] }, `${issue.field}-${i}`)) }),
+      intent.phase === "quoting" && /* @__PURE__ */ jsx2(Note, { icon: /* @__PURE__ */ jsx2(Route, {}), tone: "accent", children: intent.queueTotal > 1 ? `Intent ${intent.queueIndex + 1} of ${intent.queueTotal}: asking solvers for a quote\u2026` : "Asking solvers for a quote\u2026" }),
+      intent.phase === "needsWallet" && !intent.preview && /* @__PURE__ */ jsxs2("div", { className: "rp-connect", children: [
+        /* @__PURE__ */ jsx2("p", { children: "Connect a wallet to get a quote." }),
+        props.onConnectWallet && /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-button", onClick: connect, children: "Connect wallet" })
+      ] }),
+      intent.queueTotal > 1 && !["idle", "parsing", "offTemplate", "invalid"].includes(intent.phase) && /* @__PURE__ */ jsxs2("div", { className: "rp-queue", children: [
+        /* @__PURE__ */ jsxs2("span", { children: [
+          "Intent ",
+          intent.queueIndex + 1,
+          " of ",
+          intent.queueTotal
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "rp-queue-track", children: /* @__PURE__ */ jsx2("div", { style: { width: `${(intent.queueIndex + (intent.phase === "done" ? 1 : 0)) / intent.queueTotal * 100}%` } }) })
+      ] }),
+      showCard && intent.preview && /* @__PURE__ */ jsx2(
+        ConfirmCard,
+        {
+          preview: intent.preview,
+          phase: intent.phase,
+          needsApproval: intent.needsApproval,
+          isConnected: intent.isConnected,
+          direct: intent.route === "direct",
+          error: intent.phase === "error" ? intent.error : null,
+          onConfirm: () => void intent.confirm(),
+          onConnect: props.onConnectWallet ? connect : void 0,
+          onCancel: startOver
+        }
+      ),
+      (intent.phase === "tracking" || intent.phase === "done") && intent.orderId && /* @__PURE__ */ jsx2(OrderProgress, { status: intent.status, direct: intent.route === "direct", explorerUrl: intent.explorerUrl, onNew: startOver }),
+      intent.phase === "error" && !intent.route && /* @__PURE__ */ jsxs2("div", { className: "rp-error", children: [
+        /* @__PURE__ */ jsx2("p", { children: intent.error }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-button rp-button-quiet", onClick: startOver, children: "Dismiss" })
+      ] })
+    ] })
+  ] });
+}
+function useLifecycleCallbacks(intent, props) {
+  const prev = useRef(intent);
+  const cbs = useRef(props);
+  cbs.current = props;
+  useEffect2(() => {
+    const before = prev.current;
+    prev.current = intent;
+    if (intent.orderId && intent.orderId !== before.orderId) cbs.current.onOrderSubmitted?.(intent.orderId);
+    if (intent.phase === "done" && before.phase !== "done") cbs.current.onComplete?.(intent);
+    if (intent.phase === "error" && before.phase !== "error" && intent.error) cbs.current.onError?.(intent.error);
+  }, [intent]);
+}
+function Note({ icon, tone = "muted", children }) {
+  return /* @__PURE__ */ jsxs2("p", { className: "rp-note", "data-tone": tone, children: [
+    /* @__PURE__ */ jsx2("span", { className: "rp-note-icon", children: icon }),
+    /* @__PURE__ */ jsx2("span", { children })
+  ] });
+}
+var shortAddr = (a) => a.length > 12 ? `${a.slice(0, 6)}\u2026${a.slice(-4)}` : a;
+function actionLabel(phase, isConnected, needsApproval, symbol, direct) {
+  if (!isConnected || phase === "needsWallet") return "Connect wallet";
+  switch (phase) {
+    case "switchingChain":
+      return "Switching network\u2026";
+    case "approving":
+      return `Approving ${symbol}\u2026`;
+    case "signing":
+      return "Confirm in your wallet\u2026";
+    case "submitting":
+      return "Submitting\u2026";
+    case "error":
+      return "Try again";
+    default:
+      if (direct) return `Send ${symbol}`;
+      return needsApproval ? `Approve ${symbol} and swap` : "Confirm and sign";
+  }
+}
+function ConfirmCard(p) {
+  const busy = BUSY.includes(p.phase);
+  const send = p.preview.action === "send";
+  const wantsWallet = !p.isConnected || p.phase === "needsWallet";
+  const { solverCount, solversQueried } = p.preview;
+  return /* @__PURE__ */ jsxs2("div", { className: "rp-card", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rp-card-head", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("div", { className: "rp-overline", children: "Review" }),
+        /* @__PURE__ */ jsx2("div", { className: "rp-card-title", children: p.direct ? "Direct transfer" : "Best solver route" })
+      ] }),
+      /* @__PURE__ */ jsxs2("span", { className: "rp-badge", children: [
+        /* @__PURE__ */ jsx2(Check, {}),
+        " Quoted"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "rp-route", children: [
+      /* @__PURE__ */ jsx2(Amount, { label: send ? "You send" : "You pay", amount: p.preview.payAmount, symbol: p.preview.paySymbol, chain: p.preview.srcChainName }),
+      /* @__PURE__ */ jsx2("span", { className: "rp-route-arrow", children: /* @__PURE__ */ jsx2(ArrowRight, {}) }),
+      /* @__PURE__ */ jsx2(
+        Amount,
+        {
+          align: "end",
+          label: send ? "They receive" : "You receive",
+          amount: p.direct ? p.preview.receiveAmount : `~${p.preview.receiveAmount}`,
+          symbol: p.preview.receiveSymbol,
+          chain: p.preview.dstChainName
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("dl", { className: "rp-meta", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("dt", { children: "Settles in" }),
+        /* @__PURE__ */ jsx2("dd", { children: p.preview.etaSeconds ? `~${p.preview.etaSeconds}s` : "Fast" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("dt", { children: p.direct ? "Route" : "Solvers" }),
+        /* @__PURE__ */ jsx2("dd", { "data-accent": true, children: p.direct ? "Your wallet" : solversQueried && solversQueried > solverCount ? `${solverCount} of ${solversQueried} quoted` : `${solverCount} quoted` })
+      ] }),
+      send && p.preview.recipient && /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("dt", { children: "Recipient" }),
+        /* @__PURE__ */ jsx2("dd", { className: "rp-mono", children: shortAddr(p.preview.recipient) })
+      ] })
+    ] }),
+    p.needsApproval && !busy && !wantsWallet && /* @__PURE__ */ jsxs2("p", { className: "rp-fineprint", children: [
+      "First time with ",
+      p.preview.paySymbol,
+      ": your wallet will ask for a one-time approval, then a signature."
+    ] }),
+    p.error && /* @__PURE__ */ jsx2("p", { className: "rp-card-error", children: p.error }),
+    /* @__PURE__ */ jsxs2("div", { className: "rp-card-actions", children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          className: "rp-button",
+          disabled: busy || wantsWallet && !p.onConnect,
+          onClick: wantsWallet ? p.onConnect : p.onConfirm,
+          children: [
+            busy && /* @__PURE__ */ jsx2(Spinner, {}),
+            actionLabel(p.phase, p.isConnected, p.needsApproval, p.preview.paySymbol, p.direct)
+          ]
+        }
+      ),
+      !busy && /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-link", onClick: p.onCancel, children: "Cancel" })
+    ] })
+  ] });
+}
+function Amount({ label, amount, symbol, chain, align = "start" }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "rp-amount", "data-align": align, children: [
+    /* @__PURE__ */ jsx2("div", { className: "rp-overline", children: label }),
+    /* @__PURE__ */ jsxs2("div", { className: "rp-amount-value", children: [
+      amount,
+      " ",
+      symbol
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "rp-amount-chain", children: [
+      "on ",
+      chain
+    ] })
+  ] });
+}
+var STEPS = ["Submitted", "Filling", "Filled", "Settling", "Done"];
+function stepOf(status) {
+  switch (status) {
+    case "executing":
+      return 1;
+    case "executed":
+      return 2;
+    case "settled":
+    case "settling":
+      return 3;
+    case "finalized":
+      return 4;
+    default:
+      return 0;
+  }
+}
+function OrderProgress({ status, direct, explorerUrl, onNew }) {
+  const failed = !!status && typeof status === "object" && "failed" in status;
+  const refunded = status === "refunded";
+  const finished = status === "finalized";
+  const active = stepOf(status);
+  const title = failed ? "Order failed" : refunded ? "Refunded" : finished ? direct ? "Sent" : "Settled" : "Settling\u2026";
+  return /* @__PURE__ */ jsxs2("div", { className: "rp-card", "data-state": failed || refunded ? "bad" : finished ? "good" : "pending", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rp-card-head", children: [
+      /* @__PURE__ */ jsx2("div", { className: "rp-card-title", children: title }),
+      explorerUrl && /* @__PURE__ */ jsxs2("a", { className: "rp-link", href: explorerUrl, target: "_blank", rel: "noopener noreferrer", children: [
+        "View on explorer ",
+        /* @__PURE__ */ jsx2(External, {})
+      ] })
+    ] }),
+    !direct && /* @__PURE__ */ jsx2("ol", { className: "rp-steps", children: STEPS.map((label, i) => {
+      const state = failed || refunded ? "bad" : i < active || finished ? "done" : i === active ? "current" : "todo";
+      return /* @__PURE__ */ jsxs2("li", { "data-state": state, children: [
+        /* @__PURE__ */ jsx2("span", { className: "rp-step-dot", children: state === "bad" ? /* @__PURE__ */ jsx2(Cross, {}) : state === "done" ? /* @__PURE__ */ jsx2(Check, {}) : state === "current" ? /* @__PURE__ */ jsx2(Spinner, {}) : null }),
+        /* @__PURE__ */ jsx2("span", { className: "rp-step-label", children: label })
+      ] }, label);
+    }) }),
+    failed && /* @__PURE__ */ jsxs2("p", { className: "rp-card-error", children: [
+      status.failed[0],
+      ": ",
+      status.failed[1]
+    ] }),
+    (finished || failed || refunded) && /* @__PURE__ */ jsx2("div", { className: "rp-card-actions", children: /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-button rp-button-quiet", onClick: onNew, children: "New intent" }) })
+  ] });
+}
+
+// src/index.ts
+import {
+  createIntentSession as createIntentSession2,
+  viemWallet
+} from "@recoilpay/intent-core";
+export {
+  RecoilIntent,
+  createIntentSession2 as createIntentSession,
+  useRecoilIntent,
+  viemWallet
+};