@recoilpay/intent-react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/RecoilIntent.tsx
-import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect4, useRef, useState as useState4 } from "react";
 
 // src/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -29,29 +29,334 @@ var Route = () => /* @__PURE__ */ jsxs("svg", { ...base, children: [
 ] });
 var External = () => /* @__PURE__ */ jsx("svg", { ...base, width: 12, height: 12, children: /* @__PURE__ */ jsx("path", { d: "M6 3H3v10h10v-3M9 3h4v4M13 3L7 9" }) });
 
+// src/Offramp.tsx
+import { formatFiat } from "@recoilpay/intent-core";
+import { useEffect, useState } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var BUSY = ["switchingChain", "approving", "opening", "signing", "locking"];
+function busyLabel(phase, symbol) {
+  switch (phase) {
+    case "switchingChain":
+      return "Switching network\u2026";
+    case "approving":
+      return `Approving ${symbol}\u2026`;
+    case "opening":
+      return "Encrypting your details\u2026";
+    case "signing":
+      return "Confirm in your wallet\u2026";
+    default:
+      return `Locking your ${symbol}\u2026`;
+  }
+}
+function Offramp({ offramp, request, isConnected, onConnect, onDone }) {
+  useEffect(() => {
+    if (request) void offramp.requestQuote(request);
+  }, [request]);
+  const { phase, preview, trade, error } = offramp;
+  const corridor = offramp.request?.corridor ?? null;
+  if (phase === "quoting")
+    return /* @__PURE__ */ jsxs2("p", { className: "rp-note", "data-tone": "accent", children: [
+      /* @__PURE__ */ jsx2("span", { className: "rp-note-icon", children: /* @__PURE__ */ jsx2(Spinner, {}) }),
+      /* @__PURE__ */ jsx2("span", { children: trade ? "Loading your cash-out\u2026" : "Finding the best cash-out rate\u2026" })
+    ] });
+  if (phase === "needsWallet")
+    return /* @__PURE__ */ jsxs2("div", { className: "rp-connect", children: [
+      /* @__PURE__ */ jsx2("p", { children: "Connect a wallet to cash out." }),
+      onConnect && /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-button", onClick: onConnect, children: "Connect wallet" })
+    ] });
+  if (phase === "error" && !trade)
+    return /* @__PURE__ */ jsxs2("div", { className: "rp-error", children: [
+      /* @__PURE__ */ jsx2("p", { children: error }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-button rp-button-quiet", onClick: onDone, children: "Dismiss" })
+    ] });
+  if ((phase === "quoted" || BUSY.includes(phase)) && phase !== "locking" && preview && corridor)
+    return /* @__PURE__ */ jsx2(QuoteForm, { offramp, preview, corridor, isConnected, onConnect, onCancel: onDone });
+  if (trade) return /* @__PURE__ */ jsx2(TradeStatus, { offramp, trade, onDone });
+  return null;
+}
+function QuoteForm(p) {
+  const { offramp, preview, corridor } = p;
+  const [bankCode, setBankCode] = useState("");
+  const [account, setAccount] = useState("");
+  const [name, setName] = useState("");
+  const busy = BUSY.includes(offramp.phase);
+  const complete = Boolean(bankCode && account.trim() && name.trim());
+  const submit = (e) => {
+    e.preventDefault();
+    if (!p.isConnected) return p.onConnect?.();
+    if (complete && !busy) void offramp.confirm({ rail: corridor.rail, bankCode, account, name });
+  };
+  return /* @__PURE__ */ jsxs2("form", { className: "rp-card", onSubmit: submit, "aria-label": "Cash out", 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: "Cash out to your bank" })
+      ] }),
+      /* @__PURE__ */ jsxs2("span", { className: "rp-badge", children: [
+        /* @__PURE__ */ jsx2(Check, {}),
+        " Quoted"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "rp-route", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "rp-amount", children: [
+        /* @__PURE__ */ jsx2("div", { className: "rp-overline", children: "You pay" }),
+        /* @__PURE__ */ jsxs2("div", { className: "rp-amount-value", children: [
+          preview.payAmount,
+          " ",
+          preview.paySymbol
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rp-amount-chain", children: [
+          "on ",
+          preview.chainName
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2("span", { className: "rp-route-arrow", children: /* @__PURE__ */ jsx2(ArrowRight, {}) }),
+      /* @__PURE__ */ jsxs2("div", { className: "rp-amount", "data-align": "end", children: [
+        /* @__PURE__ */ jsx2("div", { className: "rp-overline", children: "You receive" }),
+        /* @__PURE__ */ jsxs2("div", { className: "rp-amount-value", children: [
+          preview.currencySymbol,
+          preview.receiveAmount
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "rp-amount-chain", children: "in your bank account" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("dl", { className: "rp-meta", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("dt", { children: "Rate" }),
+        /* @__PURE__ */ jsxs2("dd", { children: [
+          preview.currencySymbol,
+          preview.rate,
+          " / ",
+          preview.paySymbol
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("dt", { children: "Fee" }),
+        /* @__PURE__ */ jsxs2("dd", { children: [
+          preview.currencySymbol,
+          preview.fee
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("dt", { children: "Paid within" }),
+        /* @__PURE__ */ jsxs2("dd", { "data-accent": true, children: [
+          Math.max(1, Math.round(preview.paymentWindowSecs / 60)),
+          " min"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("fieldset", { className: "rp-fields", disabled: busy, children: [
+      /* @__PURE__ */ jsxs2("label", { className: "rp-field", children: [
+        /* @__PURE__ */ jsx2("span", { children: "Bank" }),
+        /* @__PURE__ */ jsxs2("select", { value: bankCode, onChange: (e) => setBankCode(e.target.value), required: true, children: [
+          /* @__PURE__ */ jsx2("option", { value: "", children: "Choose your bank" }),
+          corridor.banks.map((b) => /* @__PURE__ */ jsx2("option", { value: b.code, children: b.name }, b.code))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "rp-field", children: [
+        /* @__PURE__ */ jsx2("span", { children: corridor.accountLabel }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            value: account,
+            onChange: (e) => setAccount(e.target.value),
+            inputMode: "numeric",
+            autoComplete: "off",
+            spellCheck: false,
+            maxLength: 34,
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "rp-field", children: [
+        /* @__PURE__ */ jsx2("span", { children: "Account name" }),
+        /* @__PURE__ */ jsx2("input", { value: name, onChange: (e) => setName(e.target.value), autoComplete: "name", maxLength: 140, required: true })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("p", { className: "rp-fineprint", children: "Your bank details are encrypted on this device for the solver who pays you. RecoilPay only keeps a fingerprint of them, so it can check the payout went to this account." }),
+    offramp.needsApproval && !busy && p.isConnected && /* @__PURE__ */ jsxs2("p", { className: "rp-fineprint", children: [
+      "First time with ",
+      preview.paySymbol,
+      ": your wallet will ask for a one-time approval, then a signature."
+    ] }),
+    offramp.error && /* @__PURE__ */ jsx2("p", { className: "rp-card-error", children: offramp.error }),
+    /* @__PURE__ */ jsxs2("div", { className: "rp-card-actions", children: [
+      /* @__PURE__ */ jsxs2("button", { type: "submit", className: "rp-button", disabled: busy || (p.isConnected ? !complete : !p.onConnect), children: [
+        busy && /* @__PURE__ */ jsx2(Spinner, {}),
+        busy ? busyLabel(offramp.phase, preview.paySymbol) : !p.isConnected ? "Connect wallet" : offramp.needsApproval ? `Approve ${preview.paySymbol} and cash out` : "Cash out"
+      ] }),
+      !busy && /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-link", onClick: p.onCancel, children: "Cancel" })
+    ] })
+  ] });
+}
+var STEPS = ["Locked", "Paying you", "You confirm", "Done"];
+function stepOf(trade) {
+  switch (trade.state) {
+    case "quoted":
+      return 0;
+    case "awaiting_fiat":
+      return 1;
+    case "awaiting_confirmation":
+    case "disputed":
+      return 2;
+    default:
+      return 3;
+  }
+}
+function TradeStatus({ offramp, trade, onDone }) {
+  const [disputing, setDisputing] = useState(false);
+  const [reason, setReason] = useState("");
+  const corridor = offramp.request?.corridor;
+  const amount = corridor ? `${corridor.symbol}${formatFiat(trade.fiat_minor_units, corridor)}` : `${trade.fiat_minor_units} (minor units) ${trade.fiat_currency}`;
+  const acting = offramp.phase === "confirming" || offramp.phase === "disputing";
+  const bad = trade.state === "refunded_to_funder" || trade.state === "failed";
+  const good = trade.state === "settled_to_fiat_payer";
+  const ended = good || bad;
+  const active = stepOf(trade);
+  const title = {
+    quoted: `Locking your ${trade.asset}\u2026`,
+    awaiting_fiat: `Sending ${amount} to your bank\u2026`,
+    awaiting_confirmation: `Did ${amount} arrive?`,
+    disputed: "Under review",
+    settled_to_fiat_payer: "Cashed out",
+    refunded_to_funder: `${trade.asset} returned`,
+    failed: "Cash-out did not start"
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "rp-card", "data-state": bad ? "bad" : good ? "good" : "pending", children: [
+    /* @__PURE__ */ jsx2("div", { className: "rp-card-head", children: /* @__PURE__ */ jsx2("div", { className: "rp-card-title", children: title[trade.state] }) }),
+    /* @__PURE__ */ jsx2("ol", { className: "rp-steps", style: { gridTemplateColumns: `repeat(${STEPS.length}, 1fr)` }, children: STEPS.map((label, i) => {
+      const state = bad ? "bad" : i < active || good ? "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);
+    }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "rp-card-body", children: [
+      trade.state === "awaiting_fiat" && /* @__PURE__ */ jsxs2("p", { children: [
+        "Your ",
+        trade.asset,
+        " is locked in escrow. The solver is paying you now; you'll be asked to confirm when they say it's sent."
+      ] }),
+      trade.state === "awaiting_confirmation" && /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsxs2("p", { children: [
+        "The solver says they sent ",
+        amount,
+        trade.payment_reference ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          " ",
+          "with reference ",
+          /* @__PURE__ */ jsx2("span", { className: "rp-mono", children: trade.payment_reference })
+        ] }) : null,
+        ". Check your bank app. Your ",
+        trade.asset,
+        " stays locked until you answer, so only confirm once the money is in your account."
+      ] }) }),
+      trade.state === "disputed" && /* @__PURE__ */ jsxs2("p", { children: [
+        "An admin is reviewing this cash-out. Your ",
+        trade.asset,
+        " stays in escrow until they decide."
+      ] }),
+      good && /* @__PURE__ */ jsxs2("p", { children: [
+        amount,
+        " was paid to your account."
+      ] }),
+      trade.state === "refunded_to_funder" && /* @__PURE__ */ jsxs2("p", { children: [
+        "Your ",
+        trade.asset,
+        " was returned to your wallet."
+      ] }),
+      trade.state === "failed" && /* @__PURE__ */ jsx2("p", { children: "The lock never landed, so nothing left your wallet." })
+    ] }),
+    offramp.error && /* @__PURE__ */ jsx2("p", { className: "rp-card-error", children: offramp.error }),
+    trade.state === "awaiting_confirmation" && !disputing && /* @__PURE__ */ jsxs2("div", { className: "rp-card-actions", children: [
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "rp-button", disabled: acting, onClick: () => void offramp.confirmReceived(), children: [
+        offramp.phase === "confirming" && /* @__PURE__ */ jsx2(Spinner, {}),
+        offramp.phase === "confirming" ? "Confirm in your wallet\u2026" : `I received ${amount}`
+      ] }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-link", disabled: acting, onClick: () => setDisputing(true), children: "It hasn't arrived" })
+    ] }),
+    trade.state === "awaiting_confirmation" && disputing && /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        className: "rp-card-actions",
+        onSubmit: (e) => {
+          e.preventDefault();
+          void offramp.dispute(reason);
+        },
+        children: [
+          /* @__PURE__ */ jsxs2("label", { className: "rp-field rp-field-wide", children: [
+            /* @__PURE__ */ jsx2("span", { children: "What went wrong?" }),
+            /* @__PURE__ */ jsx2("textarea", { value: reason, onChange: (e) => setReason(e.target.value), maxLength: 500, rows: 3, required: true })
+          ] }),
+          /* @__PURE__ */ jsxs2("button", { type: "submit", className: "rp-button", disabled: acting || !reason.trim(), children: [
+            offramp.phase === "disputing" && /* @__PURE__ */ jsx2(Spinner, {}),
+            offramp.phase === "disputing" ? "Confirm in your wallet\u2026" : "Open a dispute"
+          ] }),
+          /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-link", disabled: acting, onClick: () => setDisputing(false), children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2("details", { className: "rp-receipt", children: [
+      /* @__PURE__ */ jsx2("summary", { children: "Receipt" }),
+      /* @__PURE__ */ jsxs2("dl", { children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("dt", { children: "Trade" }),
+          /* @__PURE__ */ jsx2("dd", { className: "rp-mono", children: trade.id })
+        ] }),
+        offramp.payeeSalt && /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("dt", { children: "Bank details proof" }),
+          /* @__PURE__ */ jsx2("dd", { className: "rp-mono", children: offramp.payeeSalt })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2("p", { children: "Keep these if you might need to dispute: with your bank details, they prove which account the solver was told to pay." })
+    ] }),
+    ended && /* @__PURE__ */ jsx2("div", { className: "rp-card-actions", children: /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-button rp-button-quiet", onClick: onDone, children: "New intent" }) }),
+    trade.state === "quoted" && offramp.error && /* @__PURE__ */ jsx2("div", { className: "rp-card-actions", children: /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-button rp-button-quiet", onClick: onDone, children: "Start over" }) })
+  ] });
+}
+
+// src/useOfframp.ts
+import { createOfframpSession } from "@recoilpay/intent-core";
+import { useEffect as useEffect2, useState as useState2, useSyncExternalStore } from "react";
+function useOfframp(options = {}) {
+  const [session] = useState2(() => options.session ?? createOfframpSession({ apiUrl: options.apiUrl }));
+  const state = useSyncExternalStore(session.subscribe, session.getState, session.getState);
+  const wallet = options.wallet ?? null;
+  useEffect2(() => session.setWallet(wallet), [session, wallet]);
+  return {
+    ...state,
+    requestQuote: session.quote,
+    confirm: session.confirm,
+    confirmReceived: session.confirmReceived,
+    dispute: session.dispute,
+    resume: session.resume,
+    reset: session.reset,
+    session
+  };
+}
+
 // src/useRecoilIntent.ts
 import { createIntentSession } from "@recoilpay/intent-core";
-import { useEffect, useState, useSyncExternalStore } from "react";
+import { useEffect as useEffect3, useState as useState3, useSyncExternalStore as useSyncExternalStore2 } 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 [session] = useState3(() => options.session ?? createIntentSession({ apiUrl: options.apiUrl, hfAccessToken: options.hfAccessToken }));
+  const state = useSyncExternalStore2(session.subscribe, session.getState, session.getState);
   const wallet = options.wallet ?? null;
-  useEffect(() => session.setWallet(wallet), [session, wallet]);
+  useEffect3(() => session.setWallet(wallet), [session, wallet]);
   const hfAccessToken = options.hfAccessToken;
-  useEffect(() => {
+  useEffect3(() => {
     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";
+import { jsx as jsx3, jsxs as jsxs3 } 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];
+var BUSY2 = ["switchingChain", "approving", "signing", "submitting"];
+var CASH_OUT_UNDERWAY = ["switchingChain", "approving", "opening", "signing", "locking", "awaitingFiat", "awaitingConfirmation", "confirming", "disputing"];
+var CARD_PHASES = ["quoted", "needsWallet", ...BUSY2];
 function themeVars(theme = {}) {
   const vars = {};
   if (theme.accent) vars["--rp-accent"] = theme.accent;
@@ -62,29 +367,49 @@ function themeVars(theme = {}) {
 }
 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 [value, setValue] = useState4(props.defaultValue ?? "");
+  const offramp = useOfframp({ apiUrl: props.apiUrl, session: props.offrampSession, wallet: props.wallet });
   const examples = props.examples === false ? [] : props.examples ?? DEFAULT_EXAMPLES;
   useLifecycleCallbacks(intent, props);
+  const cashOutUnderway = CASH_OUT_UNDERWAY.includes(offramp.phase) && !(offramp.phase === "locking" && offramp.error);
+  const showOfframp = intent.phase === "offramp" || offramp.phase !== "idle";
+  const resumeId = props.resumeCashOut;
+  useEffect4(() => {
+    if (resumeId) void offramp.resume(resumeId);
+  }, [resumeId]);
+  const tradeId = offramp.trade?.id;
+  const cashOutCbs = useRef(props);
+  cashOutCbs.current = props;
+  useEffect4(() => {
+    if (tradeId && tradeId !== resumeId) cashOutCbs.current.onCashOutStarted?.(tradeId);
+  }, [tradeId, resumeId]);
+  const ended = offramp.trade && ["settled_to_fiat_payer", "refunded_to_funder", "failed"].includes(offramp.trade.state) ? offramp.trade : null;
+  useEffect4(() => {
+    if (ended) cashOutCbs.current.onCashOutEnded?.(ended);
+  }, [ended?.id, ended?.state]);
   const submit = (sentence = value) => {
     const text = sentence.trim();
-    if (text && intent.ready) void intent.run(text);
+    if (!text || !intent.ready) return;
+    offramp.reset();
+    void intent.run(text);
   };
   const startOver = () => {
     intent.reset();
+    offramp.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: "/" }),
+  return /* @__PURE__ */ jsxs3("div", { className: ["rp-root", props.className].filter(Boolean).join(" "), "data-mode": props.theme?.mode ?? "dark", style: themeVars(props.theme), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "rp-composer", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "rp-composer-head", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "rp-eyebrow", children: [
+          /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "/" }),
           "intent"
         ] }),
-        /* @__PURE__ */ jsx2("span", { className: "rp-powered", children: "RecoilPay" })
+        /* @__PURE__ */ jsx3("span", { className: "rp-powered", children: "RecoilPay" })
       ] }),
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3(
         "form",
         {
           className: "rp-composer-row",
@@ -93,26 +418,27 @@ function RecoilIntent(props) {
             submit();
           },
           children: [
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               "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",
+                placeholder: cashOutUnderway ? "Finish your cash-out first" : props.placeholder ?? "swap 1 USDC on OP Sepolia for USDC on Base Sepolia",
+                disabled: cashOutUnderway,
                 "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, {}) })
+            /* @__PURE__ */ jsx3("button", { type: "submit", className: "rp-run", "aria-label": "Run intent", disabled: !intent.ready || !value.trim() || cashOutUnderway, children: /* @__PURE__ */ jsx3(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(
+      intent.phase === "idle" && !showOfframp && examples.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "rp-examples", children: [
+        /* @__PURE__ */ jsx3("span", { className: "rp-examples-label", children: "try" }),
+        /* @__PURE__ */ jsx3("div", { className: "rp-example-list", children: examples.map((ex) => /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
@@ -128,33 +454,43 @@ function RecoilIntent(props) {
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "rp-results", "aria-live": "polite", children: [
-      intent.assetsError && intent.phase === "idle" && /* @__PURE__ */ jsxs2(Note, { icon: /* @__PURE__ */ jsx2(Alert, {}), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "rp-results", "aria-live": "polite", children: [
+      showOfframp && /* @__PURE__ */ jsx3(
+        Offramp,
+        {
+          offramp,
+          request: intent.phase === "offramp" ? intent.offramp : null,
+          isConnected: intent.isConnected,
+          onConnect: props.onConnectWallet ? connect : void 0,
+          onDone: startOver
+        }
+      ),
+      intent.assetsError && intent.phase === "idle" && !showOfframp && /* @__PURE__ */ jsxs3(Note, { icon: /* @__PURE__ */ jsx3(Alert, {}), children: [
         "Could not reach the solver network.",
         " ",
-        /* @__PURE__ */ jsx2("button", { type: "button", className: "rp-link", onClick: () => void intent.session.refreshAssets(), children: "Retry" })
+        /* @__PURE__ */ jsx3("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 })
+      intent.phase === "parsing" && /* @__PURE__ */ jsx3(Note, { icon: /* @__PURE__ */ jsx3(Spinner, {}), children: "Reading your intent\u2026" }),
+      intent.phase === "offTemplate" && intent.hint && /* @__PURE__ */ jsx3(Note, { icon: /* @__PURE__ */ jsx3(Alert, {}), children: intent.hint }),
+      intent.phase === "invalid" && /* @__PURE__ */ jsx3("ul", { className: "rp-issues", children: intent.issues.map((issue, i) => /* @__PURE__ */ jsxs3("li", { children: [
+        /* @__PURE__ */ jsx3(Alert, {}),
+        /* @__PURE__ */ jsx3("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.phase === "quoting" && /* @__PURE__ */ jsx3(Note, { icon: /* @__PURE__ */ jsx3(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__ */ jsxs3("div", { className: "rp-connect", children: [
+        /* @__PURE__ */ jsx3("p", { children: "Connect a wallet to get a quote." }),
+        props.onConnectWallet && /* @__PURE__ */ jsx3("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.queueTotal > 1 && !["idle", "parsing", "offTemplate", "invalid"].includes(intent.phase) && /* @__PURE__ */ jsxs3("div", { className: "rp-queue", children: [
+        /* @__PURE__ */ jsxs3("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}%` } }) })
+        /* @__PURE__ */ jsx3("div", { className: "rp-queue-track", children: /* @__PURE__ */ jsx3("div", { style: { width: `${(intent.queueIndex + (intent.phase === "done" ? 1 : 0)) / intent.queueTotal * 100}%` } }) })
       ] }),
-      showCard && intent.preview && /* @__PURE__ */ jsx2(
+      showCard && intent.preview && /* @__PURE__ */ jsx3(
         ConfirmCard,
         {
           preview: intent.preview,
@@ -168,10 +504,10 @@ function RecoilIntent(props) {
           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" })
+      (intent.phase === "tracking" || intent.phase === "done") && intent.orderId && /* @__PURE__ */ jsx3(OrderProgress, { status: intent.status, direct: intent.route === "direct", explorerUrl: intent.explorerUrl, onNew: startOver }),
+      intent.phase === "error" && !intent.route && /* @__PURE__ */ jsxs3("div", { className: "rp-error", children: [
+        /* @__PURE__ */ jsx3("p", { children: intent.error }),
+        /* @__PURE__ */ jsx3("button", { type: "button", className: "rp-button rp-button-quiet", onClick: startOver, children: "Dismiss" })
       ] })
     ] })
   ] });
@@ -180,7 +516,7 @@ function useLifecycleCallbacks(intent, props) {
   const prev = useRef(intent);
   const cbs = useRef(props);
   cbs.current = props;
-  useEffect2(() => {
+  useEffect4(() => {
     const before = prev.current;
     prev.current = intent;
     if (intent.orderId && intent.orderId !== before.orderId) cbs.current.onOrderSubmitted?.(intent.orderId);
@@ -189,9 +525,9 @@ function useLifecycleCallbacks(intent, props) {
   }, [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 })
+  return /* @__PURE__ */ jsxs3("p", { className: "rp-note", "data-tone": tone, children: [
+    /* @__PURE__ */ jsx3("span", { className: "rp-note-icon", children: icon }),
+    /* @__PURE__ */ jsx3("span", { children })
   ] });
 }
 var shortAddr = (a) => a.length > 12 ? `${a.slice(0, 6)}\u2026${a.slice(-4)}` : a;
@@ -214,25 +550,25 @@ function actionLabel(phase, isConnected, needsApproval, symbol, direct) {
   }
 }
 function ConfirmCard(p) {
-  const busy = BUSY.includes(p.phase);
+  const busy = BUSY2.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" })
+  return /* @__PURE__ */ jsxs3("div", { className: "rp-card", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "rp-card-head", children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("div", { className: "rp-overline", children: "Review" }),
+        /* @__PURE__ */ jsx3("div", { className: "rp-card-title", children: p.direct ? "Direct transfer" : "Best solver route" })
       ] }),
-      /* @__PURE__ */ jsxs2("span", { className: "rp-badge", children: [
-        /* @__PURE__ */ jsx2(Check, {}),
+      /* @__PURE__ */ jsxs3("span", { className: "rp-badge", children: [
+        /* @__PURE__ */ jsx3(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(
+    /* @__PURE__ */ jsxs3("div", { className: "rp-route", children: [
+      /* @__PURE__ */ jsx3(Amount, { label: send ? "You send" : "You pay", amount: p.preview.payAmount, symbol: p.preview.paySymbol, chain: p.preview.srcChainName }),
+      /* @__PURE__ */ jsx3("span", { className: "rp-route-arrow", children: /* @__PURE__ */ jsx3(ArrowRight, {}) }),
+      /* @__PURE__ */ jsx3(
         Amount,
         {
           align: "end",
@@ -243,28 +579,28 @@ function ConfirmCard(p) {
         }
       )
     ] }),
-    /* @__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__ */ jsxs3("dl", { className: "rp-meta", children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("dt", { children: "Settles in" }),
+        /* @__PURE__ */ jsx3("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` })
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("dt", { children: p.direct ? "Route" : "Solvers" }),
+        /* @__PURE__ */ jsx3("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) })
+      send && p.preview.recipient && /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("dt", { children: "Recipient" }),
+        /* @__PURE__ */ jsx3("dd", { className: "rp-mono", children: shortAddr(p.preview.recipient) })
       ] })
     ] }),
-    p.needsApproval && !busy && !wantsWallet && /* @__PURE__ */ jsxs2("p", { className: "rp-fineprint", children: [
+    p.needsApproval && !busy && !wantsWallet && /* @__PURE__ */ jsxs3("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(
+    p.error && /* @__PURE__ */ jsx3("p", { className: "rp-card-error", children: p.error }),
+    /* @__PURE__ */ jsxs3("div", { className: "rp-card-actions", children: [
+      /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
@@ -272,31 +608,31 @@ function ConfirmCard(p) {
           disabled: busy || wantsWallet && !p.onConnect,
           onClick: wantsWallet ? p.onConnect : p.onConfirm,
           children: [
-            busy && /* @__PURE__ */ jsx2(Spinner, {}),
+            busy && /* @__PURE__ */ jsx3(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" })
+      !busy && /* @__PURE__ */ jsx3("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: [
+  return /* @__PURE__ */ jsxs3("div", { className: "rp-amount", "data-align": align, children: [
+    /* @__PURE__ */ jsx3("div", { className: "rp-overline", children: label }),
+    /* @__PURE__ */ jsxs3("div", { className: "rp-amount-value", children: [
       amount,
       " ",
       symbol
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "rp-amount-chain", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "rp-amount-chain", children: [
       "on ",
       chain
     ] })
   ] });
 }
-var STEPS = ["Submitted", "Filling", "Filled", "Settling", "Done"];
-function stepOf(status) {
+var STEPS2 = ["Submitted", "Filling", "Filled", "Settling", "Done"];
+function stepOf2(status) {
   switch (status) {
     case "executing":
       return 1;
@@ -315,40 +651,43 @@ 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 active = stepOf2(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: [
+  return /* @__PURE__ */ jsxs3("div", { className: "rp-card", "data-state": failed || refunded ? "bad" : finished ? "good" : "pending", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "rp-card-head", children: [
+      /* @__PURE__ */ jsx3("div", { className: "rp-card-title", children: title }),
+      explorerUrl && /* @__PURE__ */ jsxs3("a", { className: "rp-link", href: explorerUrl, target: "_blank", rel: "noopener noreferrer", children: [
         "View on explorer ",
-        /* @__PURE__ */ jsx2(External, {})
+        /* @__PURE__ */ jsx3(External, {})
       ] })
     ] }),
-    !direct && /* @__PURE__ */ jsx2("ol", { className: "rp-steps", children: STEPS.map((label, i) => {
+    !direct && /* @__PURE__ */ jsx3("ol", { className: "rp-steps", children: STEPS2.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 })
+      return /* @__PURE__ */ jsxs3("li", { "data-state": state, children: [
+        /* @__PURE__ */ jsx3("span", { className: "rp-step-dot", children: state === "bad" ? /* @__PURE__ */ jsx3(Cross, {}) : state === "done" ? /* @__PURE__ */ jsx3(Check, {}) : state === "current" ? /* @__PURE__ */ jsx3(Spinner, {}) : null }),
+        /* @__PURE__ */ jsx3("span", { className: "rp-step-label", children: label })
       ] }, label);
     }) }),
-    failed && /* @__PURE__ */ jsxs2("p", { className: "rp-card-error", children: [
+    failed && /* @__PURE__ */ jsxs3("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" }) })
+    (finished || failed || refunded) && /* @__PURE__ */ jsx3("div", { className: "rp-card-actions", children: /* @__PURE__ */ jsx3("button", { type: "button", className: "rp-button rp-button-quiet", onClick: onNew, children: "New intent" }) })
   ] });
 }
 
 // src/index.ts
 import {
   createIntentSession as createIntentSession2,
+  createOfframpSession as createOfframpSession2,
   viemWallet
 } from "@recoilpay/intent-core";
 export {
   RecoilIntent,
   createIntentSession2 as createIntentSession,
+  createOfframpSession2 as createOfframpSession,
+  useOfframp,
   useRecoilIntent,
   viemWallet
 };