@relai-fi/subscriptions-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 RelAI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,171 @@
+# @relai-fi/subscriptions-react
+
+Drop-in **React UI** for [RelAI subscriptions](https://relai.fi/documentation/subscriptions) — a
+Stripe-style pricing table and subscribe button for **recurring USDC billing on Solana**.
+
+- **One component** — `<PricingTable>` fetches your plans, renders cards, and runs the subscribe flow.
+- **No API key in the browser** — uses only RelAI's public endpoints (plan terms, status, subscribe).
+- **Wallet-agnostic** — pass a `signAndSend`, or use the built-in `@solana/wallet-adapter` helper.
+- **Themeable** — ship the stylesheet, override a few CSS variables, done.
+
+```bash
+npm install @relai-fi/subscriptions-react
+```
+
+> Peer deps: `react`/`react-dom` (≥18). The wallet helper additionally needs
+> `@solana/wallet-adapter-react` + `@solana/web3.js` (optional — skip them if you bring your own `signAndSend`).
+
+Create and price your plans first with the [`@relai-fi/subscriptions`](https://relai.fi/documentation/subscriptions)
+SDK or the dashboard, then drop their `planId`s into the table below.
+
+---
+
+## Quick start
+
+Import the stylesheet once (e.g. in your root layout), then render the table.
+
+```tsx
+import "@relai-fi/subscriptions-react/styles.css";
+import { PricingTable } from "@relai-fi/subscriptions-react";
+import { useRelaiSignAndSend, useRelaiWallet } from "@relai-fi/subscriptions-react/wallet";
+
+export function Pricing() {
+  const wallet = useRelaiWallet();        // from your <WalletProvider>
+  const signAndSend = useRelaiSignAndSend();
+
+  return (
+    <PricingTable
+      planIds={["pl_basic", "pl_pro"]}
+      highlightPlanId="pl_pro"
+      wallet={wallet}
+      signAndSend={signAndSend}
+      cards={{
+        pl_basic: { description: "For side projects", features: ["1 project", "Community support"] },
+        pl_pro:   { description: "For teams",        features: ["Unlimited projects", "Webhooks", "Priority support"] },
+      }}
+      onSubscribed={(sub) => console.log("active:", sub.subscriptionId)}
+    />
+  );
+}
+```
+
+That renders a pricing table, and clicking **Subscribe** runs the full on-chain flow
+(prepare → sign → confirm) against the subscriber's wallet. Cards the wallet already
+holds show **Subscribed** automatically.
+
+### Not using wallet-adapter?
+
+Pass your own `signAndSend` — anything that signs + broadcasts a base64 Solana tx and
+returns the signature (Privy, Crossmint, a backend signer, a raw `Keypair`…):
+
+```tsx
+<PricingTable
+  planId="pl_pro"
+  wallet={address}
+  signAndSend={async (txBase64) => {
+    const sig = await myWallet.signAndSendBase64(txBase64);
+    return sig; // transaction signature
+  }}
+/>
+```
+
+### Skip the props with a provider
+
+```tsx
+import { RelaiProvider } from "@relai-fi/subscriptions-react";
+
+<RelaiProvider wallet={wallet} signAndSend={signAndSend} theme={{ primary: "#7c3aed" }}>
+  <PricingTable planIds={["pl_basic", "pl_pro"]} highlightPlanId="pl_pro" />
+</RelaiProvider>
+```
+
+---
+
+## Components
+
+### `<PricingTable>`
+
+| Prop | Type | Notes |
+|---|---|---|
+| `planIds` | `string[]` | Plans to show, in order. Or use `plans` / `planId`. |
+| `plans` | `PlanMeta[]` | Preloaded plan metadata (skips fetching). |
+| `planId` | `string` | Shorthand for a one-plan table. |
+| `cards` | `Record<planId, { features?, description?, highlight?, badge? }>` | Per-plan presentation. |
+| `highlightPlanId` | `string` | Emphasize one plan (adds a "Popular" ribbon). |
+| `wallet` | `string` | Connected subscriber address. |
+| `signAndSend` | `SignAndSend` | Signs + sends the wire tx. |
+| `theme` | `RelaiTheme` | CSS-variable overrides. |
+| `baseUrl` | `string` | Defaults to `https://api.relai.fi`. |
+| `onSubscribed` / `onError` / `onConnectWallet` | callbacks | |
+| `labels` | `SubscribeButtonLabels` | Button copy overrides. |
+
+### `<PricingCard>`
+
+One card for a `PlanMeta` you already have. Same subscribe props as the button, plus
+`features`, `description`, `highlight`, `badge`.
+
+### `<SubscribeButton>`
+
+The atomic piece — a single button for a `planId` that resolves wallet / `signAndSend`
+from props or `<RelaiProvider>`, runs the flow, and reflects live state
+(`Preparing… → Confirm in wallet… → Activating… → Subscribed`).
+
+```tsx
+<SubscribeButton planId="pl_pro" wallet={address} signAndSend={signAndSend} />
+```
+
+---
+
+## Hooks
+
+For fully custom UI:
+
+```tsx
+import { usePlanMeta, useSubscriptionStatus, useSubscribe, createRelaiClient } from "@relai-fi/subscriptions-react";
+
+const client = createRelaiClient();                       // public endpoints, no key
+const { plan } = usePlanMeta("pl_pro", client);
+const { status } = useSubscriptionStatus("pl_pro", wallet, client);
+const { subscribe, state, busy, error } = useSubscribe({ planId: "pl_pro", wallet, signAndSend });
+```
+
+`state`: `idle | preparing | signing | confirming | done | error`.
+
+---
+
+## Theming
+
+Set the `theme` prop (mapped to CSS variables on the component root) or override the
+variables in your own CSS. Defaults to the RelAI electric-violet palette, light surface.
+
+```tsx
+<PricingTable planIds={ids} theme={{ primary: "#7c3aed", radius: "20px", card: "#0f1117", foreground: "#fff" }} />
+```
+
+```css
+.relai-root {
+  --relai-primary: #7c3aed;
+  --relai-card: #ffffff;
+  --relai-fg: #0c0e16;
+  --relai-muted-fg: #6b7280;
+  --relai-border: #e7e8ee;
+  --relai-radius: 16px;
+}
+```
+
+---
+
+## How it works
+
+All calls hit RelAI's **public** subscription endpoints — no service key is exposed to the browser:
+
+- `GET /s/:planId/meta` — plan terms for the card
+- `GET /s/:planId/status?wallet=…` — drives the "Subscribed" state
+- `POST /s/:planId/subscribe` → `POST /s/:planId/confirm` — the two-stage, wallet-signed subscribe
+
+The subscriber signs at most two transactions: a one-time delegate-authority init
+(first subscribe per wallet), then the subscribe itself. RelAI fee-pays the recurring pulls.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,456 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/context.tsx
+
+// src/client.ts
+var DEFAULT_BASE_URL = "https://api.relai.fi";
+var RelaiApiError = class extends Error {
+  constructor(status, message, body) {
+    super(message);
+    this.status = status;
+    this.body = body;
+    this.name = "RelaiApiError";
+  }
+};
+function createRelaiClient(opts = {}) {
+  const baseUrl = (opts.baseUrl ?? DEFAULT_BASE_URL).replace(/\/$/, "");
+  const _fetch = opts.fetch ?? globalThis.fetch;
+  if (!_fetch) throw new Error("No fetch available \u2014 pass `fetch` in options.");
+  async function request(method, path, init = {}) {
+    const url = new URL(baseUrl + path);
+    for (const [k, v] of Object.entries(init.query ?? {})) url.searchParams.set(k, v);
+    const res = await _fetch(url.toString(), {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: init.body === void 0 ? void 0 : JSON.stringify(init.body)
+    });
+    const text = await res.text();
+    let json;
+    try {
+      json = text ? JSON.parse(text) : void 0;
+    } catch {
+      json = text;
+    }
+    if (!res.ok) {
+      const msg = json?.error ?? `RelAI ${method} ${path} failed (${res.status})`;
+      throw new RelaiApiError(res.status, msg, json ?? text);
+    }
+    return json;
+  }
+  const enc = encodeURIComponent;
+  return {
+    baseUrl,
+    meta: (planId) => request("GET", `/s/${enc(planId)}/meta`),
+    status: (planId, wallet) => request("GET", `/s/${enc(planId)}/status`, { query: { wallet } }),
+    prepareSubscribe: (planId, wallet) => request("POST", `/s/${enc(planId)}/subscribe`, {
+      body: { subscriberWallet: wallet }
+    }),
+    confirmSubscribe: async (planId, wallet, signature) => {
+      const { subscription } = await request(
+        "POST",
+        `/s/${enc(planId)}/confirm`,
+        { body: { subscriberWallet: wallet, signature } }
+      );
+      return subscription;
+    }
+  };
+}
+var RelaiContext = react.createContext(null);
+function RelaiProvider({
+  client,
+  baseUrl,
+  wallet,
+  signAndSend,
+  theme,
+  children
+}) {
+  const value = react.useMemo(
+    () => ({
+      client: client ?? createRelaiClient({ baseUrl }),
+      wallet,
+      signAndSend,
+      theme
+    }),
+    [client, baseUrl, wallet, signAndSend, theme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(RelaiContext.Provider, { value, children });
+}
+function useRelaiContext() {
+  return react.useContext(RelaiContext);
+}
+function useRelaiResolved(opts = {}) {
+  const ctx = useRelaiContext();
+  return react.useMemo(() => {
+    const client = opts.client ?? ctx?.client ?? createRelaiClient({ baseUrl: opts.baseUrl });
+    return {
+      client,
+      wallet: opts.wallet ?? ctx?.wallet,
+      signAndSend: opts.signAndSend ?? ctx?.signAndSend
+    };
+  }, [opts.client, opts.baseUrl, opts.wallet, opts.signAndSend, ctx]);
+}
+function usePlanMeta(planId, client) {
+  const [state, setState] = react.useState({ loading: true });
+  react.useEffect(() => {
+    let alive = true;
+    setState({ loading: true });
+    client.meta(planId).then((plan) => alive && setState({ plan, loading: false })).catch((error) => alive && setState({ loading: false, error }));
+    return () => {
+      alive = false;
+    };
+  }, [planId, client]);
+  return state;
+}
+function useSubscriptionStatus(planId, wallet, client) {
+  const [state, setState] = react.useState({
+    loading: false
+  });
+  const [nonce, setNonce] = react.useState(0);
+  const refetch = react.useCallback(() => setNonce((n) => n + 1), []);
+  react.useEffect(() => {
+    if (!wallet) {
+      setState({ loading: false, status: void 0 });
+      return;
+    }
+    let alive = true;
+    setState({ loading: true });
+    client.status(planId, wallet).then((status) => alive && setState({ status, loading: false })).catch((error) => alive && setState({ loading: false, error }));
+    return () => {
+      alive = false;
+    };
+  }, [planId, wallet, client, nonce]);
+  return { ...state, refetch };
+}
+function useSubscribe(opts) {
+  const { client, wallet, signAndSend } = useRelaiResolved(opts);
+  const [state, setState] = react.useState("idle");
+  const [error, setError] = react.useState();
+  const [subscription, setSubscription] = react.useState();
+  const running = react.useRef(false);
+  const reset = react.useCallback(() => {
+    setState("idle");
+    setError(void 0);
+    setSubscription(void 0);
+  }, []);
+  const subscribe = react.useCallback(async () => {
+    if (running.current) return void 0;
+    if (!wallet) {
+      const err = new Error("No wallet \u2014 connect a wallet before subscribing.");
+      setError(err);
+      setState("error");
+      opts.onError?.(err);
+      return void 0;
+    }
+    if (!signAndSend) {
+      const err = new Error("No signAndSend \u2014 pass one (see @relai-fi/subscriptions-react/wallet).");
+      setError(err);
+      setState("error");
+      opts.onError?.(err);
+      return void 0;
+    }
+    running.current = true;
+    setError(void 0);
+    try {
+      setState("preparing");
+      let prep = await client.prepareSubscribe(opts.planId, wallet);
+      if (prep.stage === "init-authority") {
+        setState("signing");
+        await signAndSend(prep.wireTransaction);
+        setState("preparing");
+        prep = await client.prepareSubscribe(opts.planId, wallet);
+      }
+      setState("signing");
+      const sig = await signAndSend(prep.wireTransaction);
+      setState("confirming");
+      const sub = await client.confirmSubscribe(opts.planId, wallet, sig);
+      setSubscription(sub);
+      setState("done");
+      opts.onSubscribed?.(sub);
+      return sub;
+    } catch (e) {
+      const err = e instanceof Error ? e : new Error(String(e));
+      setError(err);
+      setState("error");
+      opts.onError?.(err);
+      return void 0;
+    } finally {
+      running.current = false;
+    }
+  }, [client, wallet, signAndSend, opts]);
+  const busy = state === "preparing" || state === "signing" || state === "confirming";
+  return { subscribe, state, error, subscription, busy, reset };
+}
+var DEFAULT_LABELS = {
+  subscribe: "Subscribe",
+  connect: "Connect wallet",
+  preparing: "Preparing\u2026",
+  signing: "Confirm in wallet\u2026",
+  confirming: "Activating\u2026",
+  active: "Subscribed",
+  retry: "Try again"
+};
+function SubscribeButton(props) {
+  const { planId, onConnectWallet, hideStatus, className, style, children } = props;
+  const labels = { ...DEFAULT_LABELS, ...props.labels };
+  const { client, wallet } = useRelaiResolved(props);
+  const { status, refetch } = useSubscriptionStatus(
+    planId,
+    hideStatus ? void 0 : wallet,
+    client
+  );
+  const { subscribe, state, busy } = useSubscribe({
+    ...props,
+    onSubscribed: (sub) => {
+      refetch();
+      props.onSubscribed?.(sub);
+    }
+  });
+  const alreadyActive = !hideStatus && status?.active === true;
+  let label;
+  let disabled = false;
+  let dataState = state;
+  if (alreadyActive || state === "done") {
+    label = labels.active;
+    disabled = true;
+    dataState = "done";
+  } else if (!wallet) {
+    label = labels.connect;
+    disabled = !onConnectWallet;
+  } else if (state === "preparing") {
+    label = labels.preparing;
+    disabled = true;
+  } else if (state === "signing") {
+    label = labels.signing;
+    disabled = true;
+  } else if (state === "confirming") {
+    label = labels.confirming;
+    disabled = true;
+  } else if (state === "error") {
+    label = labels.retry;
+  } else {
+    label = labels.subscribe;
+  }
+  const onClick = () => {
+    if (busy || alreadyActive) return;
+    if (!wallet) {
+      onConnectWallet?.();
+      return;
+    }
+    void subscribe();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: ["relai-btn", className].filter(Boolean).join(" "),
+      style,
+      "data-state": dataState,
+      "data-busy": busy ? "true" : void 0,
+      "aria-busy": busy || void 0,
+      disabled,
+      onClick,
+      children: [
+        busy && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relai-spinner", "aria-hidden": "true" }),
+        children ?? label
+      ]
+    }
+  );
+}
+
+// src/format.ts
+var USDC_DECIMALS = 6;
+function formatUsdc(amountBaseUnits, opts = {}) {
+  const decimals = opts.decimals ?? USDC_DECIMALS;
+  const n = Number(amountBaseUnits) / 10 ** decimals;
+  const dp = Number.isInteger(n * 100) ? 2 : Math.min(decimals, 6);
+  const s = n.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: dp });
+  return opts.withTicker ? `${s} USDC` : s;
+}
+function formatPeriodSuffix(periodHours) {
+  switch (periodHours) {
+    case 1:
+      return "/hr";
+    case 24:
+      return "/day";
+    case 168:
+      return "/wk";
+    case 720:
+      return "/mo";
+    case 8760:
+      return "/yr";
+    default:
+      return periodHours % 24 === 0 ? `/${periodHours / 24}d` : `/${periodHours}h`;
+  }
+}
+function formatPeriodLabel(periodHours) {
+  const map = {
+    1: "hourly",
+    24: "daily",
+    168: "weekly",
+    720: "monthly",
+    8760: "yearly"
+  };
+  const known = map[periodHours];
+  if (known) return `Billed ${known}`;
+  if (periodHours % 24 === 0) return `Billed every ${periodHours / 24} days`;
+  return `Billed every ${periodHours} hours`;
+}
+function formatNetwork(network) {
+  return network === "solana-devnet" ? "Solana devnet" : "Solana";
+}
+var Check = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "relai-check", viewBox: "0 0 20 20", width: "18", height: "18", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.3 3.29 6.8-6.8a1 1 0 0 1 1.4 0Z",
+    fill: "currentColor"
+  }
+) });
+function PricingCard(props) {
+  const { plan, features, description, highlight, hideNetwork, className, style } = props;
+  const badge = props.badge ?? (highlight ? "Popular" : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ["relai-card", highlight ? "relai-card--highlight" : "", className].filter(Boolean).join(" "),
+      style,
+      "data-plan": plan.planId,
+      children: [
+        badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relai-badge", children: badge }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relai-card__head", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "relai-card__name", children: plan.name }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relai-card__desc", children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relai-price", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relai-price__amount", children: formatUsdc(plan.amountBaseUnits) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relai-price__unit", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relai-price__ticker", children: "USDC" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relai-price__period", children: formatPeriodSuffix(plan.periodHours) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "relai-price__caption", children: [
+          formatPeriodLabel(plan.periodHours),
+          !hideNetwork && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            " \xB7 ",
+            formatNetwork(plan.network)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SubscribeButton,
+          {
+            planId: plan.planId,
+            client: props.client,
+            baseUrl: props.baseUrl,
+            wallet: props.wallet,
+            signAndSend: props.signAndSend,
+            onConnectWallet: props.onConnectWallet,
+            onSubscribed: props.onSubscribed,
+            onError: props.onError,
+            labels: props.labels
+          }
+        ),
+        features && features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "relai-features", children: features.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relai-features__item", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Check, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: f })
+        ] }, i)) })
+      ]
+    }
+  );
+}
+
+// src/theme.ts
+function themeToCssVars(theme) {
+  if (!theme) return {};
+  const v = {};
+  if (theme.primary) v["--relai-primary"] = theme.primary;
+  if (theme.primaryForeground) v["--relai-primary-fg"] = theme.primaryForeground;
+  if (theme.background) v["--relai-bg"] = theme.background;
+  if (theme.card) v["--relai-card"] = theme.card;
+  if (theme.foreground) v["--relai-fg"] = theme.foreground;
+  if (theme.mutedForeground) v["--relai-muted-fg"] = theme.mutedForeground;
+  if (theme.border) v["--relai-border"] = theme.border;
+  if (theme.radius) v["--relai-radius"] = theme.radius;
+  return v;
+}
+function useManyPlanMetas(ids, preloaded, client) {
+  const key = ids.join(",");
+  const [state, setState] = react.useState(
+    () => ({ plans: preloaded ?? [], loading: !preloaded })
+  );
+  react.useEffect(() => {
+    if (preloaded) {
+      setState({ plans: preloaded, loading: false });
+      return;
+    }
+    if (ids.length === 0) {
+      setState({ plans: [], loading: false });
+      return;
+    }
+    let alive = true;
+    setState({ plans: [], loading: true });
+    Promise.all(ids.map((id) => client.meta(id))).then((plans) => alive && setState({ plans, loading: false })).catch((error) => alive && setState({ plans: [], loading: false, error }));
+    return () => {
+      alive = false;
+    };
+  }, [key, preloaded, client]);
+  return state;
+}
+function PricingTable(props) {
+  const { client, wallet, signAndSend } = useRelaiResolved(props);
+  const ctx = useRelaiContext();
+  const theme = props.theme ?? ctx?.theme;
+  const ids = props.plans ? props.plans.map((p) => p.planId) : props.planIds ?? (props.planId ? [props.planId] : []);
+  const { plans, loading, error } = useManyPlanMetas(ids, props.plans, client);
+  const rootStyle = { ...themeToCssVars(theme), ...props.style };
+  const rootClass = ["relai-root", "relai-table", props.className].filter(Boolean).join(" ");
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: rootClass, style: rootStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relai-state relai-state--loading", children: props.loadingText ?? "Loading plans\u2026" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: rootClass, style: rootStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relai-state relai-state--error", children: props.errorText ?? "Couldn't load plans." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: rootClass, style: rootStyle, "data-count": plans.length, children: plans.map((plan) => {
+    const cfg = props.cards?.[plan.planId];
+    const highlight = cfg?.highlight ?? props.highlightPlanId === plan.planId;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PricingCard,
+      {
+        plan,
+        features: cfg?.features,
+        description: cfg?.description,
+        highlight,
+        badge: cfg?.badge,
+        client,
+        wallet,
+        signAndSend,
+        onConnectWallet: props.onConnectWallet,
+        onSubscribed: props.onSubscribed,
+        onError: props.onError,
+        labels: props.labels
+      },
+      plan.planId
+    );
+  }) });
+}
+
+exports.DEFAULT_BASE_URL = DEFAULT_BASE_URL;
+exports.PricingCard = PricingCard;
+exports.PricingTable = PricingTable;
+exports.RelaiApiError = RelaiApiError;
+exports.RelaiProvider = RelaiProvider;
+exports.SubscribeButton = SubscribeButton;
+exports.createRelaiClient = createRelaiClient;
+exports.formatNetwork = formatNetwork;
+exports.formatPeriodLabel = formatPeriodLabel;
+exports.formatPeriodSuffix = formatPeriodSuffix;
+exports.formatUsdc = formatUsdc;
+exports.themeToCssVars = themeToCssVars;
+exports.usePlanMeta = usePlanMeta;
+exports.useRelaiContext = useRelaiContext;
+exports.useRelaiResolved = useRelaiResolved;
+exports.useSubscribe = useSubscribe;
+exports.useSubscriptionStatus = useSubscriptionStatus;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map