@goodcash/react 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,527 @@
+'use client';
+
+// src/context.tsx
+import { createContext, useContext, useMemo } from "react";
+import { GoodCash } from "@goodcash/sdk";
+import { jsx } from "react/jsx-runtime";
+var GoodCashContext = createContext(null);
+function GoodCashProvider({ publishableKey, appId, baseUrl, rpcUrl, fetch, theme, client, children }) {
+  const value = useMemo(
+    () => ({ client: client ?? new GoodCash({ publishableKey, appId, baseUrl, rpcUrl, fetch }), theme: theme ?? {} }),
+    [client, publishableKey, appId, baseUrl, rpcUrl, fetch, theme]
+  );
+  return /* @__PURE__ */ jsx(GoodCashContext.Provider, { value, children });
+}
+function useGoodCash() {
+  const ctx = useContext(GoodCashContext);
+  if (!ctx) throw new Error('Wrap your app (or the cash out button) in <GoodCashProvider publishableKey="gc_pk_...">.');
+  return ctx;
+}
+
+// src/hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GoodCashError } from "@goodcash/sdk";
+var asError = (e) => e instanceof GoodCashError ? e : new GoodCashError("unavailable", { detail: String(e?.message ?? e) });
+function useQuote(amountG, opts = {}) {
+  const { client } = useGoodCash();
+  const [quote, setQuote] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const amount = amountG === null || amountG === void 0 ? "" : String(amountG).trim();
+  useEffect(() => {
+    if (!/^\d+(\.\d{1,6})?$/.test(amount) || Number(amount) <= 0) {
+      setQuote(null);
+      setError(null);
+      return;
+    }
+    let live = true;
+    let timer;
+    const run = async () => {
+      setLoading(true);
+      try {
+        const q = await client.quote({ amountG: amount });
+        if (live) {
+          setQuote(q);
+          setError(null);
+        }
+      } catch (e) {
+        if (live) setError(asError(e));
+      } finally {
+        if (live) setLoading(false);
+      }
+      if (live) timer = setTimeout(run, opts.refreshMs ?? 25e3);
+    };
+    timer = setTimeout(run, opts.debounceMs ?? 400);
+    return () => {
+      live = false;
+      clearTimeout(timer);
+    };
+  }, [client, amount, opts.debounceMs, opts.refreshMs]);
+  return { quote, error, loading };
+}
+function useBanks() {
+  const { client } = useGoodCash();
+  const [banks, setBanks] = useState([]);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let live = true;
+    client.banks().then((b) => live && setBanks(b)).catch((e) => live && setError(asError(e))).finally(() => live && setLoading(false));
+    return () => {
+      live = false;
+    };
+  }, [client]);
+  return { banks, error, loading };
+}
+function useVerifyAccount(bankCode, accountNumber) {
+  const { client } = useGoodCash();
+  const [accountName, setName] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    setName(null);
+    setError(null);
+    if (!bankCode || !/^\d{10}$/.test(accountNumber)) return;
+    let live = true;
+    setLoading(true);
+    client.verifyAccount({ bankCode, accountNumber }).then((r) => live && setName(r.accountName)).catch((e) => live && setError(asError(e))).finally(() => live && setLoading(false));
+    return () => {
+      live = false;
+    };
+  }, [client, bankCode, accountNumber]);
+  return { accountName, error, loading };
+}
+function useCashOut() {
+  const { client } = useGoodCash();
+  const [step, setStep] = useState(null);
+  const [cashOut, setCashOut] = useState(null);
+  const [error, setError] = useState(null);
+  const running = useRef(false);
+  const start = useCallback(
+    async (args, onStep) => {
+      if (running.current) return null;
+      running.current = true;
+      setError(null);
+      try {
+        const out = await client.cashOut({
+          ...args,
+          onStep: (s, c) => {
+            setStep(s);
+            if (c) setCashOut(c);
+            onStep?.(s, c);
+          }
+        });
+        setCashOut(out.cashOut);
+        return out;
+      } catch (e) {
+        setError(asError(e));
+        setStep(null);
+        return null;
+      } finally {
+        running.current = false;
+      }
+    },
+    [client]
+  );
+  const reset = useCallback(() => {
+    setStep(null);
+    setCashOut(null);
+    setError(null);
+  }, []);
+  return { start, step, cashOut, error, reset };
+}
+function useCashOutStatus(id) {
+  const { client } = useGoodCash();
+  const [cashOut, setCashOut] = useState(null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!id) return;
+    const ac = new AbortController();
+    client.watchCashOut(id, setCashOut, { signal: ac.signal }).catch((e) => !ac.signal.aborted && setError(asError(e)));
+    return () => ac.abort();
+  }, [client, id]);
+  return { cashOut, error };
+}
+
+// src/CashOutFlow.tsx
+import { useEffect as useEffect2, useId, useMemo as useMemo2, useState as useState2 } from "react";
+
+// src/styles.ts
+var CSS = `
+.gcw{font-family:var(--gcw-font);color:var(--gcw-ink);background:var(--gcw-bg);border-radius:calc(var(--gcw-radius) + 6px);padding:16px;box-sizing:border-box;max-width:440px;width:100%;line-height:1.35;-webkit-font-smoothing:antialiased}
+.gcw *{box-sizing:border-box}
+.gcw-h{font-size:22px;font-weight:800;margin:0 0 4px;letter-spacing:-.3px}
+.gcw-sub{font-size:14px;margin:0 0 12px;opacity:.85}
+.gcw-card{background:var(--gcw-surface);border:2.5px solid var(--gcw-ink);border-radius:var(--gcw-radius);padding:14px;margin:0 0 10px;box-shadow:4px 4px 0 var(--gcw-ink)}
+.gcw-card--ok{background:var(--gcw-success)}
+.gcw-lab{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;opacity:.8;margin:0 0 6px;display:block}
+.gcw-big{font-size:30px;font-weight:800;letter-spacing:-.6px}
+.gcw-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;padding:3px 0}
+.gcw-input{width:100%;font:inherit;font-size:18px;font-weight:700;color:var(--gcw-ink);background:var(--gcw-surface);border:2.5px solid var(--gcw-ink);border-radius:calc(var(--gcw-radius) - 6px);padding:12px 14px;outline:none}
+.gcw-input:focus-visible,.gcw-btn:focus-visible,.gcw-bank:focus-visible,.gcw-x:focus-visible{outline:3px solid var(--gcw-accent);outline-offset:2px}
+.gcw-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;font:inherit;font-size:17px;font-weight:800;color:var(--gcw-accent-ink);background:var(--gcw-accent);border:2.5px solid var(--gcw-ink);border-radius:999px;box-shadow:4px 4px 0 var(--gcw-ink);cursor:pointer;margin-top:6px}
+.gcw-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--gcw-ink)}
+.gcw-btn[disabled]{opacity:.55;cursor:not-allowed}
+.gcw-btn--ghost{background:var(--gcw-surface);color:var(--gcw-ink)}
+.gcw-note{font-size:14px;background:var(--gcw-surface);border:2px dashed var(--gcw-ink);border-radius:calc(var(--gcw-radius) - 6px);padding:10px 12px;margin:8px 0}
+.gcw-err{font-size:14px;font-weight:700;background:#ffe1e1;color:#5a0000;border:2.5px solid #5a0000;border-radius:calc(var(--gcw-radius) - 6px);padding:10px 12px;margin:8px 0}
+.gcw-steps{display:flex;gap:6px;margin:0 0 12px}
+.gcw-step{flex:1;height:8px;border-radius:99px;border:2px solid var(--gcw-ink);background:var(--gcw-surface)}
+.gcw-step--done{background:var(--gcw-success)}
+.gcw-step--on{background:var(--gcw-accent)}
+.gcw-banks{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-top:8px}
+.gcw-bank{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-weight:700;color:var(--gcw-ink);background:var(--gcw-surface);border:2.5px solid var(--gcw-ink);border-radius:calc(var(--gcw-radius) - 6px);padding:10px 12px;cursor:pointer}
+.gcw-bank[aria-selected=true]{background:var(--gcw-success)}
+.gcw-chip{display:inline-block;font-size:12px;font-weight:800;background:var(--gcw-highlight);color:#111;border:2px solid var(--gcw-ink);border-radius:99px;padding:2px 8px}
+.gcw-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px}
+.gcw-top .gcw-h{flex:1;min-width:0;margin:0}
+.gcw-x{flex:none;font:inherit;font-size:18px;font-weight:800;width:40px;height:40px;border-radius:99px;border:2.5px solid var(--gcw-ink);background:var(--gcw-surface);color:var(--gcw-ink);cursor:pointer}
+.gcw-foot{font-size:12px;text-align:center;opacity:.75;margin-top:10px}
+.gcw-spin{width:40px;height:40px;border-radius:99px;border:4px solid var(--gcw-ink);border-top-color:transparent;margin:10px auto;animation:gcw-spin 1s linear infinite}
+@keyframes gcw-spin{to{transform:rotate(360deg)}}
+@media (prefers-reduced-motion:reduce){.gcw-spin{animation:none;border-top-color:var(--gcw-ink)}.gcw-btn:active{transform:none}}
+.gcw-overlay{position:fixed;inset:0;background:rgba(17,17,17,.55);display:flex;align-items:flex-end;justify-content:center;z-index:2147483000;padding:12px}
+@media (min-width:560px){.gcw-overlay{align-items:center}}
+.gcw-dialog{max-height:calc(100vh - 24px);overflow-y:auto;width:100%;max-width:440px;border:2.5px solid #111;border-radius:24px;box-shadow:6px 6px 0 #111}
+.gcw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+`;
+var injected = false;
+function injectStyles() {
+  if (injected || typeof document === "undefined") return;
+  if (document.querySelector("style[data-goodcash]")) {
+    injected = true;
+    return;
+  }
+  const el = document.createElement("style");
+  el.setAttribute("data-goodcash", "");
+  el.textContent = CSS;
+  document.head.appendChild(el);
+  injected = true;
+}
+
+// src/theme.ts
+var LIGHT = {
+  background: "#cdb8ff",
+  surface: "#ffffff",
+  ink: "#111111",
+  accent: "#7b39fc",
+  accentInk: "#ffffff",
+  highlight: "#ffd23f",
+  success: "#8cf0c0",
+  radius: 18,
+  font: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif'
+};
+var DARK = {
+  background: "#1c1533",
+  surface: "#2a2246",
+  ink: "#f5f1ff",
+  accent: "#9b6bff",
+  accentInk: "#ffffff",
+  highlight: "#ffd23f",
+  success: "#5fd6a0"
+};
+function themeVars(t = {}, dark = false) {
+  const base = { ...LIGHT, ...dark ? DARK : {}, ...stripUndefined(t) };
+  return {
+    "--gcw-bg": base.background,
+    "--gcw-surface": base.surface,
+    "--gcw-ink": base.ink,
+    "--gcw-accent": base.accent,
+    "--gcw-accent-ink": base.accentInk,
+    "--gcw-highlight": base.highlight,
+    "--gcw-success": base.success,
+    "--gcw-radius": `${base.radius}px`,
+    "--gcw-font": base.font
+  };
+}
+function stripUndefined(o) {
+  return Object.fromEntries(Object.entries(o).filter(([k, v]) => v !== void 0 && k !== "mode"));
+}
+
+// src/CashOutFlow.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var naira = (n) => `\u20A6${Math.round(n).toLocaleString("en-US")}`;
+var gText = (n) => `${Number(n).toLocaleString("en-US", { maximumFractionDigits: 2 })} G$`;
+var WORKING = {
+  checking: "Checking your wallet\u2026",
+  creating: "Preparing your payout\u2026",
+  confirm_in_wallet: "Confirm in your wallet. Open your wallet app, tap Confirm, then come back here.",
+  confirming: "Sending\u2026",
+  reporting: "Sending\u2026",
+  done: "Sent."
+};
+function defaultSigner() {
+  const eth = typeof window !== "undefined" ? window.ethereum : void 0;
+  return eth ?? void 0;
+}
+function CashOutFlow({ signer, wallet, defaultAmountG, partnerRef, onEvent, onClose, titleId }) {
+  injectStyles();
+  const { theme, client } = useGoodCash();
+  const [dark, setDark] = useState2(false);
+  useEffect2(() => {
+    if (theme.mode !== "auto" || typeof window === "undefined" || !window.matchMedia) return setDark(theme.mode === "dark");
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setDark(mq.matches);
+    const on = () => setDark(mq.matches);
+    mq.addEventListener?.("change", on);
+    return () => mq.removeEventListener?.("change", on);
+  }, [theme.mode]);
+  const vars = useMemo2(() => themeVars(theme, dark), [theme, dark]);
+  const [stage, setStage] = useState2("amount");
+  const [amount, setAmount] = useState2(defaultAmountG === void 0 ? "" : String(defaultAmountG));
+  const [bank, setBank] = useState2(null);
+  const [account, setAccount] = useState2("");
+  const [search, setSearch] = useState2("");
+  const { quote, error: quoteError, loading: quoting } = useQuote(amount);
+  const { banks, error: banksError, loading: banksLoading } = useBanks();
+  const { accountName, error: nameError, loading: naming } = useVerifyAccount(bank?.code ?? "", account);
+  const run = useCashOut();
+  const [trackId, setTrackId] = useState2(null);
+  const status = useCashOutStatus(trackId);
+  const ownTitle = useId();
+  const amountId = useId();
+  const acctId = useId();
+  const searchId = useId();
+  const ids = { title: titleId ?? ownTitle, amount: amountId, acct: acctId, search: searchId };
+  const live = status.cashOut ?? run.cashOut;
+  useEffect2(() => {
+    if (!status.cashOut) return;
+    if (status.cashOut.status === "paid") onEvent?.({ type: "cashout.paid", cashOut: status.cashOut });
+    if (["failed", "refunded", "expired"].includes(status.cashOut.status)) onEvent?.({ type: "cashout.failed", cashOut: status.cashOut });
+  }, [status.cashOut?.status]);
+  const shownBanks = useMemo2(() => {
+    const q = search.trim().toLowerCase();
+    return banks.filter((b) => !q || b.name.toLowerCase().includes(q));
+  }, [banks, search]);
+  const enough = !!quote && quote.enough;
+  const stepIndex = { amount: 0, bank: 1, review: 2, working: 3, tracking: 3 }[stage];
+  async function confirm() {
+    if (!quote || !bank || !accountName) return;
+    const s = signer ?? defaultSigner();
+    setStage("working");
+    const out = await run.start(
+      { signer: s, wallet, amountG: amount, recipient: { bankCode: bank.code, accountNumber: account, accountName }, quote, partnerRef },
+      (step, c) => {
+        if (step === "confirm_in_wallet" && c) onEvent?.({ type: "cashout.created", cashOut: c });
+      }
+    );
+    if (out) {
+      onEvent?.({ type: "cashout.sent", cashOut: out.cashOut });
+      setTrackId(out.cashOut.id);
+      setStage("tracking");
+    } else {
+      setStage("review");
+    }
+  }
+  const noWallet = !signer && !defaultSigner() && client.mode === "live";
+  return /* @__PURE__ */ jsxs("div", { className: "gcw", style: vars, "data-goodcash-flow": "", children: [
+    /* @__PURE__ */ jsxs("div", { className: "gcw-top", children: [
+      /* @__PURE__ */ jsx2("h2", { className: "gcw-h", id: ids.title, children: "Cash out to your bank" }),
+      onClose && /* @__PURE__ */ jsx2("button", { type: "button", className: "gcw-x", "aria-label": "Close", onClick: onClose, children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "gcw-steps", "aria-hidden": true, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx2("span", { className: `gcw-step ${i < stepIndex ? "gcw-step--done" : i === stepIndex ? "gcw-step--on" : ""}` }, i)) }),
+    client.mode === "test" && /* @__PURE__ */ jsx2("p", { className: "gcw-note", children: "Test mode: no real money moves." }),
+    stage === "amount" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "gcw-card", children: [
+        /* @__PURE__ */ jsx2("label", { className: "gcw-lab", htmlFor: ids.amount, children: "How much G$?" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: ids.amount,
+            className: "gcw-input",
+            inputMode: "decimal",
+            autoComplete: "off",
+            placeholder: "0",
+            value: amount,
+            onChange: (e) => setAmount(e.target.value.replace(/[^\d.]/g, ""))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "gcw-card gcw-card--ok", "aria-live": "polite", children: [
+        /* @__PURE__ */ jsx2("span", { className: "gcw-lab", children: "You get about" }),
+        /* @__PURE__ */ jsx2("div", { className: "gcw-big", children: quote ? naira(quote.receive.naira) : quoting ? "\u2026" : "\u20A60" }),
+        quote && /* @__PURE__ */ jsxs("div", { className: "gcw-row", children: [
+          "at least ",
+          naira(quote.receive.minimumNaira)
+        ] })
+      ] }),
+      quote && !quote.enough && /* @__PURE__ */ jsxs("p", { className: "gcw-note", children: [
+        "The smallest cash out is about ",
+        gText(quote.minimumG),
+        "."
+      ] }),
+      quoteError && /* @__PURE__ */ jsx2("p", { className: "gcw-err", children: quoteError.message }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "gcw-btn", disabled: !enough, onClick: () => setStage("bank"), children: "Next" })
+    ] }),
+    stage === "bank" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "gcw-card", children: [
+        /* @__PURE__ */ jsx2("label", { className: "gcw-lab", htmlFor: ids.search, children: "Your bank" }),
+        /* @__PURE__ */ jsx2("input", { id: ids.search, className: "gcw-input", type: "search", placeholder: "Search banks", value: search, onChange: (e) => setSearch(e.target.value) }),
+        /* @__PURE__ */ jsxs("div", { className: "gcw-banks", role: "listbox", "aria-label": "Banks", children: [
+          banksLoading && /* @__PURE__ */ jsx2("span", { children: "Loading banks\u2026" }),
+          shownBanks.map((b) => /* @__PURE__ */ jsxs("button", { type: "button", role: "option", "aria-selected": bank?.code === b.code, className: "gcw-bank", onClick: () => setBank(b), children: [
+            b.name,
+            bank?.code === b.code && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: " \u2713" })
+          ] }, b.code)),
+          !banksLoading && shownBanks.length === 0 && /* @__PURE__ */ jsxs("span", { children: [
+            "No bank matches \u201C",
+            search,
+            "\u201D. Check the spelling."
+          ] })
+        ] }),
+        banksError && /* @__PURE__ */ jsx2("p", { className: "gcw-err", children: banksError.message })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "gcw-card", children: [
+        /* @__PURE__ */ jsx2("label", { className: "gcw-lab", htmlFor: ids.acct, children: "Account number" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: ids.acct,
+            className: "gcw-input",
+            inputMode: "numeric",
+            autoComplete: "off",
+            maxLength: 10,
+            placeholder: "10 digits",
+            value: account,
+            onChange: (e) => setAccount(e.target.value.replace(/\D/g, "").slice(0, 10))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [
+          naming && /* @__PURE__ */ jsx2("p", { className: "gcw-sub", children: "Checking the account name\u2026" }),
+          accountName && /* @__PURE__ */ jsx2("p", { className: "gcw-sub", children: /* @__PURE__ */ jsx2("b", { children: accountName }) }),
+          nameError && /* @__PURE__ */ jsx2("p", { className: "gcw-err", children: nameError.message })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "gcw-btn", disabled: !accountName, onClick: () => setStage("review"), children: "Review" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "gcw-btn gcw-btn--ghost", onClick: () => setStage("amount"), children: "Back" })
+    ] }),
+    stage === "review" && quote && bank && accountName && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "gcw-card gcw-card--ok", children: [
+        /* @__PURE__ */ jsx2("span", { className: "gcw-lab", children: "You get about" }),
+        /* @__PURE__ */ jsx2("div", { className: "gcw-big", children: naira(quote.receive.naira) }),
+        /* @__PURE__ */ jsxs("div", { className: "gcw-row", children: [
+          "for ",
+          gText(amount),
+          " \xB7 at least ",
+          naira(quote.receive.minimumNaira)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "gcw-card", children: [
+        /* @__PURE__ */ jsx2("span", { className: "gcw-lab", children: "Paid to" }),
+        /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2("b", { children: accountName }) }),
+        /* @__PURE__ */ jsxs("div", { className: "gcw-row", children: [
+          bank.name,
+          " \xB7 \u2022\u2022\u2022\u2022",
+          account.slice(-4)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "gcw-card", children: [
+        /* @__PURE__ */ jsx2("span", { className: "gcw-lab", children: "Fees" }),
+        quote.fees.map((f) => /* @__PURE__ */ jsxs("div", { className: "gcw-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: f.label }),
+          /* @__PURE__ */ jsx2("span", { children: f.amountG ? `\u2212${gText(f.amountG)}` : f.naira !== void 0 ? naira(f.naira) : "" })
+        ] }, f.type)),
+        /* @__PURE__ */ jsxs("div", { className: "gcw-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Network fee" }),
+          /* @__PURE__ */ jsx2("span", { children: "paid in CELO from your wallet" })
+        ] })
+      ] }),
+      run.error && /* @__PURE__ */ jsx2("p", { className: "gcw-err", children: run.error.message }),
+      noWallet && /* @__PURE__ */ jsx2("p", { className: "gcw-err", children: "Connect a wallet first." }),
+      /* @__PURE__ */ jsxs("p", { className: "gcw-note", children: [
+        /* @__PURE__ */ jsx2("b", { children: "You'll confirm once in your wallet." }),
+        " Your G$ only leaves your wallet when you confirm."
+      ] }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "gcw-btn", disabled: noWallet, onClick: confirm, children: "Confirm cash out" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "gcw-btn gcw-btn--ghost", onClick: () => setStage("bank"), children: "Back" })
+    ] }),
+    stage === "working" && /* @__PURE__ */ jsxs("div", { className: "gcw-card", "aria-live": "polite", role: "status", children: [
+      /* @__PURE__ */ jsx2("div", { className: "gcw-spin", "aria-hidden": true }),
+      /* @__PURE__ */ jsx2("p", { className: "gcw-sub", style: { textAlign: "center" }, children: run.step ? WORKING[run.step] : "Working on it\u2026" })
+    ] }),
+    stage === "tracking" && live && /* @__PURE__ */ jsxs("div", { "aria-live": "polite", role: "status", children: [
+      live.status === "paid" ? /* @__PURE__ */ jsxs("div", { className: "gcw-card gcw-card--ok", children: [
+        /* @__PURE__ */ jsx2("span", { className: "gcw-lab", children: "Paid" }),
+        /* @__PURE__ */ jsx2("div", { className: "gcw-big", children: naira(live.receive.naira) }),
+        /* @__PURE__ */ jsx2("p", { className: "gcw-sub", children: "is in your bank account. Thank you!" })
+      ] }) : ["failed", "refunded", "expired"].includes(live.status) ? /* @__PURE__ */ jsxs("div", { className: "gcw-card", children: [
+        /* @__PURE__ */ jsx2("span", { className: "gcw-lab", children: "Not paid" }),
+        /* @__PURE__ */ jsx2("p", { className: "gcw-sub", children: live.status === "refunded" ? "The payout could not be completed, so your money is being returned to your wallet." : "The payout could not be completed. Please contact support with your reference." }),
+        /* @__PURE__ */ jsxs("div", { className: "gcw-row", children: [
+          "Reference: ",
+          live.id.slice(0, 8)
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "gcw-card", children: [
+        /* @__PURE__ */ jsx2("div", { className: "gcw-spin", "aria-hidden": true }),
+        /* @__PURE__ */ jsx2("p", { className: "gcw-sub", style: { textAlign: "center" }, children: "Your money is on its way to your bank. This usually takes a few minutes. You can close this; it will still arrive." })
+      ] }),
+      onClose && /* @__PURE__ */ jsx2("button", { type: "button", className: "gcw-btn gcw-btn--ghost", onClick: onClose, children: "Done" })
+    ] }),
+    /* @__PURE__ */ jsx2("p", { className: "gcw-foot", children: "Powered by GoodCash" })
+  ] });
+}
+
+// src/CashOutButton.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])';
+function CashOutButton({ label = "Cash out to bank", className, style, onEvent, ...flow }) {
+  injectStyles();
+  const [open, setOpen] = useState3(false);
+  const titleId = useId2();
+  const panel = useRef2(null);
+  const opener = useRef2(null);
+  const close = useCallback2(() => {
+    setOpen(false);
+    onEvent?.({ type: "closed" });
+    setTimeout(() => opener.current?.focus(), 0);
+  }, [onEvent]);
+  useEffect3(() => {
+    if (!open) return;
+    const first = panel.current?.querySelector(FOCUSABLE);
+    first?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const items = [...panel.current.querySelectorAll(FOCUSABLE)];
+      if (!items.length) return;
+      const firstEl = items[0];
+      const lastEl = items[items.length - 1];
+      if (e.shiftKey && document.activeElement === firstEl) {
+        e.preventDefault();
+        lastEl.focus();
+      } else if (!e.shiftKey && document.activeElement === lastEl) {
+        e.preventDefault();
+        firstEl.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, close]);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("button", { ref: opener, type: "button", className: className ?? "gcw-btn", style, onClick: () => setOpen(true), "aria-haspopup": "dialog", children: label }),
+    open && /* @__PURE__ */ jsx3("div", { className: "gcw-overlay", onMouseDown: (e) => e.target === e.currentTarget && close(), children: /* @__PURE__ */ jsx3("div", { ref: panel, className: "gcw-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: /* @__PURE__ */ jsx3(CashOutFlow, { ...flow, onEvent, onClose: close, titleId }) }) })
+  ] });
+}
+export {
+  CashOutButton,
+  CashOutFlow,
+  CSS as GOODCASH_CSS,
+  GoodCashProvider,
+  injectStyles,
+  themeVars,
+  useBanks,
+  useCashOut,
+  useCashOutStatus,
+  useGoodCash,
+  useQuote,
+  useVerifyAccount
+};

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@goodcash/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "A ready-made 'Cash out to bank' button and hooks for GoodDollar (G$) to naira, for React apps.",
+  "license": "MIT",
+  "homepage": "https://goodcash.xyz",
+  "repository": { "type": "git", "url": "https://github.com/OtowoSamuel/goodcash.git", "directory": "packages/react" },
+  "keywords": ["gooddollar", "celo", "naira", "cash out", "react", "widget"],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js", "require": "./dist/index.cjs" },
+    "./package.json": "./package.json"
+  },
+  "files": ["dist", "README.md", "CHANGELOG.md", "LICENSE"],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build"
+  },
+  "peerDependencies": {
+    "@goodcash/sdk": "^0.1.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@goodcash/sdk": "0.1.0",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "jsdom": "^30.1.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  }
+}