@waaskey/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,733 @@
+'use strict';
+
+var sdk = require('@waaskey/sdk');
+var react = require('react');
+
+// src/provider.ts
+var WaaskeyContext = react.createContext(null);
+
+// src/theme.ts
+var lightTheme = {
+  accent: "#6366f1",
+  accentForeground: "#ffffff",
+  background: "#ffffff",
+  foreground: "#0a0d14",
+  muted: "#6b7280",
+  border: "#e5e7eb",
+  danger: "#dc2626",
+  radius: "12px",
+  fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
+};
+var darkTheme = {
+  accent: "#818cf8",
+  accentForeground: "#0a0d14",
+  background: "#0f1117",
+  foreground: "#f3f4f6",
+  muted: "#9ca3af",
+  border: "#272b36",
+  danger: "#f87171",
+  radius: "12px",
+  fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
+};
+var defaultTheme = lightTheme;
+function resolveTheme(override, base = defaultTheme) {
+  return override ? { ...base, ...override } : base;
+}
+var ThemeContext = react.createContext(defaultTheme);
+function useTheme() {
+  return react.useContext(ThemeContext);
+}
+
+// src/provider.ts
+function WaaskeyProvider(props) {
+  const source = "client" in props ? props.client : props.options;
+  const client = react.useMemo(() => "client" in props ? props.client : new sdk.Waaskey(props.options), [source]);
+  const theme = react.useMemo(() => resolveTheme(props.theme), [props.theme]);
+  return react.createElement(WaaskeyContext.Provider, { value: client }, react.createElement(ThemeContext.Provider, { value: theme }, props.children));
+}
+var WaasProvider = WaaskeyProvider;
+function useWaaskey() {
+  const client = react.useContext(WaaskeyContext);
+  if (!client) throw new Error("useWaaskey must be used within a <WaaskeyProvider>.");
+  return client;
+}
+function useWaas() {
+  const client = useWaaskey();
+  const theme = useTheme();
+  return { client, theme, auth: client.auth };
+}
+function useCreateWallet() {
+  const waaskey = useWaaskey();
+  const [state, setState] = react.useState({ loading: false });
+  const create = react.useCallback(
+    async (params, options) => {
+      setState({ loading: true });
+      try {
+        const wallet = await waaskey.wallets.create(params, options);
+        setState({ loading: false, data: wallet });
+        return wallet;
+      } catch (error) {
+        setState({ loading: false, error });
+        throw error;
+      }
+    },
+    [waaskey]
+  );
+  return { create, wallet: state.data, error: state.error, isPending: state.loading };
+}
+function useWallet(id) {
+  const waaskey = useWaaskey();
+  const [state, setState] = react.useState({ loading: Boolean(id) });
+  const refresh = react.useCallback(async () => {
+    if (!id) return;
+    setState({ loading: true });
+    try {
+      setState({ loading: false, data: await waaskey.wallets.get(id) });
+    } catch (error) {
+      setState({ loading: false, error });
+    }
+  }, [waaskey, id]);
+  react.useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  return { ...state, refresh };
+}
+function useBalance(chain, address) {
+  const waaskey = useWaaskey();
+  const [state, setState] = react.useState({ loading: Boolean(chain && address) });
+  const refresh = react.useCallback(async () => {
+    if (!chain || !address) return;
+    setState({ loading: true });
+    try {
+      setState({ loading: false, data: await waaskey.balances.getBalance(chain, address) });
+    } catch (error) {
+      setState({ loading: false, error });
+    }
+  }, [waaskey, chain, address]);
+  react.useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  return { ...state, refresh };
+}
+function useBalances(chains, address) {
+  const waaskey = useWaaskey();
+  const [state, setState] = react.useState({ loading: Boolean(address && chains.length) });
+  const key = chains.join(",");
+  const refresh = react.useCallback(async () => {
+    if (!address || !key) return;
+    setState({ loading: true });
+    try {
+      const data = await Promise.all(key.split(",").map((chain) => waaskey.balances.getBalance(chain, address)));
+      setState({ loading: false, data });
+    } catch (error) {
+      setState({ loading: false, error });
+    }
+  }, [waaskey, key, address]);
+  react.useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  return { ...state, refresh };
+}
+function useSend(walletId) {
+  const waaskey = useWaaskey();
+  const [status, setStatus] = react.useState("idle");
+  const [result, setResult] = react.useState();
+  const [error, setError] = react.useState();
+  const send = react.useCallback(
+    async (params) => {
+      if (!walletId) throw new Error("useSend: no wallet id.");
+      setStatus("pending");
+      setError(void 0);
+      try {
+        const wallet = await waaskey.wallets.get(walletId);
+        const res = await wallet.send(params);
+        setResult(res);
+        setStatus("sent");
+        return res;
+      } catch (e) {
+        setError(e);
+        setStatus("error");
+        throw e;
+      }
+    },
+    [waaskey, walletId]
+  );
+  const reset = react.useCallback(() => {
+    setStatus("idle");
+    setResult(void 0);
+    setError(void 0);
+  }, []);
+  return { send, status, result, error, reset };
+}
+function useSignatures(walletId) {
+  const waaskey = useWaaskey();
+  const [state, setState] = react.useState({ loading: Boolean(walletId) });
+  const refresh = react.useCallback(async () => {
+    if (!walletId) return;
+    setState({ loading: true });
+    try {
+      const wallet = await waaskey.wallets.get(walletId);
+      const page = await wallet.signatures();
+      setState({ loading: false, data: page.items });
+    } catch (error) {
+      setState({ loading: false, error });
+    }
+  }, [waaskey, walletId]);
+  react.useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  return { ...state, refresh };
+}
+function useLogin() {
+  const waaskey = useWaaskey();
+  const [step, setStep] = react.useState("email");
+  const [email, setEmail] = react.useState("");
+  const [session, setSession] = react.useState();
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState();
+  const start = react.useCallback(
+    async (e) => {
+      setLoading(true);
+      setError(void 0);
+      try {
+        await waaskey.auth.email.start(e);
+        setEmail(e);
+        setStep("code");
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [waaskey]
+  );
+  const verify = react.useCallback(
+    async (code) => {
+      setLoading(true);
+      setError(void 0);
+      try {
+        const s = await waaskey.auth.email.verify(email, code);
+        setSession(s);
+        setStep("done");
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [waaskey, email]
+  );
+  const reset = react.useCallback(() => {
+    setStep("email");
+    setError(void 0);
+  }, []);
+  return { step, email, session, loading, error, start, verify, reset };
+}
+function useQrCode(text) {
+  const [dataUrl, setDataUrl] = react.useState();
+  react.useEffect(() => {
+    let cancelled = false;
+    setDataUrl(void 0);
+    if (!text) return;
+    void (async () => {
+      try {
+        const qr = await import('qrcode');
+        const url = await qr.toDataURL(text, { margin: 1, width: 192 });
+        if (!cancelled) setDataUrl(url);
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [text]);
+  return dataUrl;
+}
+function ConnectModal({ open, onClose, onConnect, title = "Sign in", theme }) {
+  const base = useTheme();
+  const t = { ...base, ...theme };
+  const { step, email, session, loading, error, start, verify, reset } = useLogin();
+  const [emailInput, setEmailInput] = react.useState("");
+  const [codeInput, setCodeInput] = react.useState("");
+  const firstFieldRef = react.useRef(null);
+  react.useEffect(() => {
+    if (step === "done" && session) onConnect?.(session);
+  }, [step, session, onConnect]);
+  react.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    firstFieldRef.current?.focus();
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, step, onClose]);
+  if (!open) return null;
+  const overlay = { position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1e3 };
+  const card = {
+    background: t.background,
+    color: t.foreground,
+    borderRadius: t.radius,
+    padding: 24,
+    width: 360,
+    maxWidth: "90vw",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.2)"
+  };
+  const input = { width: "100%", boxSizing: "border-box", padding: "10px 12px", border: `1px solid ${t.border}`, borderRadius: "8px", fontSize: 14, marginTop: 8 };
+  const button = {
+    width: "100%",
+    padding: "10px 12px",
+    background: t.accent,
+    color: t.accentForeground,
+    border: "none",
+    borderRadius: "8px",
+    fontSize: 14,
+    fontWeight: 600,
+    marginTop: 12,
+    cursor: loading ? "default" : "pointer",
+    opacity: loading ? 0.6 : 1
+  };
+  const link = { background: "none", border: "none", color: t.muted, fontSize: 13, marginTop: 12, cursor: "pointer" };
+  const errText = { color: t.danger, fontSize: 13, marginTop: 8 };
+  const onSubmitEmail = (e) => {
+    e.preventDefault();
+    if (emailInput.trim()) void start(emailInput.trim());
+  };
+  const onSubmitCode = (e) => {
+    e.preventDefault();
+    if (codeInput.trim()) void verify(codeInput.trim());
+  };
+  const close = () => {
+    onClose();
+  };
+  let body;
+  if (step === "email") {
+    body = react.createElement(
+      "form",
+      { onSubmit: onSubmitEmail, key: "email" },
+      react.createElement("label", { style: { fontSize: 13, color: t.muted }, htmlFor: "waaskey-email" }, "Email"),
+      react.createElement("input", {
+        id: "waaskey-email",
+        ref: firstFieldRef,
+        style: input,
+        type: "email",
+        placeholder: "you@example.com",
+        value: emailInput,
+        onChange: (e) => setEmailInput(e.target.value),
+        disabled: loading
+      }),
+      error ? react.createElement("div", { style: errText, role: "alert" }, error.message) : null,
+      react.createElement("button", { style: button, type: "submit", disabled: loading }, loading ? "Sending\u2026" : "Send code")
+    );
+  } else if (step === "code") {
+    body = react.createElement(
+      "form",
+      { onSubmit: onSubmitCode, key: "code" },
+      react.createElement("div", { style: { fontSize: 13, color: t.muted } }, `Enter the code sent to ${email}`),
+      react.createElement("input", {
+        id: "waaskey-code",
+        ref: firstFieldRef,
+        style: input,
+        inputMode: "numeric",
+        placeholder: "123456",
+        value: codeInput,
+        onChange: (e) => setCodeInput(e.target.value),
+        disabled: loading
+      }),
+      error ? react.createElement("div", { style: errText, role: "alert" }, error.message) : null,
+      react.createElement("button", { style: button, type: "submit", disabled: loading }, loading ? "Verifying\u2026" : "Verify"),
+      react.createElement(
+        "button",
+        {
+          style: link,
+          type: "button",
+          onClick: () => {
+            setCodeInput("");
+            reset();
+          }
+        },
+        "\u2190 Use a different email"
+      )
+    );
+  } else {
+    body = react.createElement(
+      "div",
+      { key: "done", style: { textAlign: "center", padding: "12px 0" } },
+      react.createElement("div", { style: { fontSize: 15, fontWeight: 600 } }, "Connected"),
+      react.createElement("button", { style: button, type: "button", onClick: close }, "Continue")
+    );
+  }
+  return react.createElement(
+    "div",
+    { style: overlay, onClick: close },
+    react.createElement(
+      "div",
+      { style: card, role: "dialog", "aria-modal": true, "aria-label": title, onClick: (e) => e.stopPropagation() },
+      react.createElement(
+        "div",
+        { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 } },
+        react.createElement("strong", { style: { fontSize: 16 } }, title),
+        react.createElement("button", { style: { ...link, marginTop: 0 }, type: "button", "aria-label": "Close", onClick: close }, "\u2715")
+      ),
+      body
+    )
+  );
+}
+function WalletWidget({ walletId, chains, sendChainId = "evm:1", sendDecimals = 18, onSent, theme }) {
+  const base = useTheme();
+  const t = { ...base, ...theme };
+  const [tab, setTab] = react.useState("assets");
+  const wallet = useWallet(walletId);
+  const address = wallet.data?.address;
+  const s = react.useMemo(() => styles(t), [t]);
+  const tabs = [
+    ["assets", "Assets"],
+    ["receive", "Receive"],
+    ["send", "Send"],
+    ["activity", "Activity"]
+  ];
+  return react.createElement(
+    "div",
+    { style: s.card, "data-testid": "waaskey-wallet-widget" },
+    react.createElement(
+      "div",
+      { style: s.tabbar },
+      ...tabs.map(([id, label]) => react.createElement("button", { key: id, type: "button", onClick: () => setTab(id), style: { ...s.tab, ...tab === id ? s.tabActive : {} } }, label))
+    ),
+    react.createElement(
+      "div",
+      { style: s.body },
+      tab === "assets" && react.createElement(AssetsTab, { chains, address, loading: wallet.loading, s }),
+      tab === "receive" && react.createElement(ReceiveTab, { address, s }),
+      tab === "send" && react.createElement(SendTab, { walletId, sendChainId, sendDecimals, onSent, s }),
+      tab === "activity" && react.createElement(ActivityTab, { walletId, s })
+    )
+  );
+}
+function AssetsTab({ chains, address, loading, s }) {
+  const { data, error, loading: balLoading } = useBalances(chains, address);
+  if (loading || balLoading) return react.createElement("div", { style: s.muted }, "Loading balances\u2026");
+  if (error) return react.createElement("div", { style: s.error, role: "alert" }, error.message);
+  if (!data || data.length === 0) return react.createElement("div", { style: s.empty }, "No assets yet.");
+  return react.createElement(
+    "ul",
+    { style: s.list },
+    ...data.map(
+      (b, i) => react.createElement("li", { key: chains[i] ?? i, style: s.row }, react.createElement("span", { style: { fontWeight: 600 } }, chains[i] ?? ""), react.createElement("span", {}, `${b.formatted} ${b.symbol ?? ""}`.trim()))
+    )
+  );
+}
+function ReceiveTab({ address, s }) {
+  const qr = useQrCode(address);
+  if (!address) return react.createElement("div", { style: s.muted }, "Address not available yet.");
+  return react.createElement(
+    "div",
+    { style: { textAlign: "center" } },
+    qr ? react.createElement("img", { src: qr, alt: "Wallet address QR", width: 192, height: 192, style: { borderRadius: 8 } }) : null,
+    react.createElement("div", { style: { ...s.muted, marginTop: 12, wordBreak: "break-all", fontFamily: "monospace" } }, address),
+    react.createElement("button", { type: "button", style: s.secondaryButton, onClick: () => void navigator.clipboard?.writeText(address) }, "Copy address")
+  );
+}
+function SendTab({
+  walletId,
+  sendChainId,
+  sendDecimals,
+  onSent,
+  s
+}) {
+  const { send, status, result, error, reset } = useSend(walletId);
+  const [to, setTo] = react.useState("");
+  const [amount, setAmount] = react.useState("");
+  const onSubmit = (e) => {
+    e.preventDefault();
+    if (!to.trim() || !amount.trim()) return;
+    void send({ chainId: sendChainId, to: to.trim(), value: parseUnits(amount.trim(), sendDecimals) }).then((r) => onSent?.(r));
+  };
+  if (status === "sent" && result) {
+    return react.createElement(
+      "div",
+      { style: { textAlign: "center" } },
+      react.createElement("div", { style: { fontWeight: 600, marginBottom: 8 } }, "Signed \u2713"),
+      react.createElement("div", { style: { ...s.muted, wordBreak: "break-all", fontFamily: "monospace" } }, result.txHash),
+      react.createElement("button", { type: "button", style: s.secondaryButton, onClick: reset }, "Send another")
+    );
+  }
+  const pending = status === "pending";
+  return react.createElement(
+    "form",
+    { onSubmit },
+    react.createElement("label", { style: s.label, htmlFor: "waaskey-send-to" }, "Recipient"),
+    react.createElement("input", { id: "waaskey-send-to", style: s.input, placeholder: "0x\u2026", value: to, onChange: (e) => setTo(e.target.value), disabled: pending }),
+    react.createElement("label", { style: { ...s.label, marginTop: 12 }, htmlFor: "waaskey-send-amount" }, "Amount"),
+    react.createElement("input", {
+      id: "waaskey-send-amount",
+      style: s.input,
+      inputMode: "decimal",
+      placeholder: "0.0",
+      value: amount,
+      onChange: (e) => setAmount(e.target.value),
+      disabled: pending
+    }),
+    status === "error" && error ? react.createElement("div", { style: { ...s.error, marginTop: 8 }, role: "alert" }, error.message) : null,
+    react.createElement("button", { type: "submit", style: s.button, disabled: pending }, pending ? "Sending\u2026" : "Send")
+  );
+}
+function ActivityTab({ walletId, s }) {
+  const { data, error, loading } = useSignatures(walletId);
+  if (loading) return react.createElement("div", { style: s.muted }, "Loading activity\u2026");
+  if (error) return react.createElement("div", { style: s.error, role: "alert" }, error.message);
+  if (!data || data.length === 0) return react.createElement("div", { style: s.empty }, "No signing activity yet.");
+  return react.createElement(
+    "ul",
+    { style: s.list },
+    ...data.map(
+      (sig) => react.createElement(
+        "li",
+        { key: sig.id, style: s.row },
+        react.createElement("span", { style: { fontFamily: "monospace" } }, shorten(sig.txHash ?? sig.to ?? sig.digest ?? sig.kind)),
+        react.createElement("span", { style: { ...s.badge, ...statusStyle(sig.status) } }, sig.status ?? sig.kind)
+      )
+    )
+  );
+}
+function parseUnits(value, decimals) {
+  const [whole, frac = ""] = value.split(".");
+  const fracPadded = (frac + "0".repeat(decimals)).slice(0, decimals);
+  const combined = `${whole}${fracPadded}`.replace(/^0+(?=\d)/, "");
+  return combined === "" ? "0" : combined;
+}
+function shorten(v) {
+  return v.length > 14 ? `${v.slice(0, 8)}\u2026${v.slice(-4)}` : v;
+}
+function statusStyle(status) {
+  if (status === "signed") return { background: "#dcfce7", color: "#166534" };
+  if (status === "failed") return { background: "#fee2e2", color: "#991b1b" };
+  return { background: "#fef9c3", color: "#854d0e" };
+}
+function styles(t) {
+  return {
+    card: {
+      background: t.background,
+      color: t.foreground,
+      border: `1px solid ${t.border}`,
+      borderRadius: t.radius,
+      width: 340,
+      maxWidth: "90vw",
+      overflow: "hidden",
+      fontSize: 14,
+      fontFamily: t.fontFamily
+    },
+    tabbar: { display: "flex", borderBottom: `1px solid ${t.border}` },
+    tab: { flex: 1, padding: "10px 8px", background: "none", border: "none", color: t.muted, cursor: "pointer", fontSize: 13 },
+    tabActive: { color: t.accent, fontWeight: 600, boxShadow: `inset 0 -2px 0 ${t.accent}` },
+    body: { padding: 16, minHeight: 160 },
+    list: { listStyle: "none", margin: 0, padding: 0 },
+    row: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: `1px solid ${t.border}` },
+    label: { display: "block", fontSize: 13, color: t.muted },
+    input: { width: "100%", boxSizing: "border-box", padding: "10px 12px", border: `1px solid ${t.border}`, borderRadius: 8, fontSize: 14, marginTop: 6 },
+    button: {
+      width: "100%",
+      padding: "10px 12px",
+      background: t.accent,
+      color: t.accentForeground,
+      border: "none",
+      borderRadius: 8,
+      fontSize: 14,
+      fontWeight: 600,
+      marginTop: 16,
+      cursor: "pointer"
+    },
+    secondaryButton: { padding: "8px 14px", background: "none", color: t.accent, border: `1px solid ${t.accent}`, borderRadius: 8, fontSize: 13, marginTop: 12, cursor: "pointer" },
+    muted: { color: t.muted },
+    empty: { color: t.muted, textAlign: "center", padding: "24px 0" },
+    error: { color: t.danger, fontSize: 13 },
+    badge: { fontSize: 12, padding: "2px 8px", borderRadius: 999 }
+  };
+}
+function useSignPrompt() {
+  const waaskey = useWaaskey();
+  const [req, setReq] = react.useState();
+  const [status, setStatus] = react.useState("idle");
+  const [error, setError] = react.useState();
+  const deferred = react.useRef(void 0);
+  const requestSignature = react.useCallback((next) => {
+    setReq(next);
+    setStatus("idle");
+    setError(void 0);
+    return new Promise((resolve, reject2) => {
+      deferred.current = { resolve, reject: reject2 };
+    });
+  }, []);
+  const close = react.useCallback(() => {
+    setReq(void 0);
+    setStatus("idle");
+    setError(void 0);
+    deferred.current = void 0;
+  }, []);
+  const approve = react.useCallback(async () => {
+    if (!req || !deferred.current) return;
+    setStatus("pending");
+    setError(void 0);
+    try {
+      const wallet = await waaskey.wallets.get(req.walletId);
+      const outcome = req.kind === "sign" ? await wallet.sign(req.digest) : await wallet.send(req.tx);
+      deferred.current.resolve(outcome);
+      close();
+    } catch (e) {
+      setError(e);
+      setStatus("error");
+    }
+  }, [req, waaskey, close]);
+  const reject = react.useCallback(() => {
+    deferred.current?.reject(new Error("Signature request rejected by user"));
+    close();
+  }, [close]);
+  const prompt = req ? react.createElement(SignPrompt, { request: req, status, error, onApprove: () => void approve(), onReject: reject }) : null;
+  return { requestSignature, prompt };
+}
+function SignPrompt({ request, status, error, onApprove, onReject }) {
+  const t = useTheme();
+  const pending = status === "pending";
+  const overlay = { position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1e3 };
+  const card = {
+    background: t.background,
+    color: t.foreground,
+    borderRadius: t.radius,
+    padding: 24,
+    width: 360,
+    maxWidth: "90vw",
+    fontFamily: t.fontFamily,
+    boxShadow: "0 10px 40px rgba(0,0,0,0.2)"
+  };
+  const rowStyle = { display: "flex", justifyContent: "space-between", gap: 12, padding: "6px 0", borderBottom: `1px solid ${t.border}`, fontSize: 14 };
+  const key = { color: t.muted };
+  const val = { fontFamily: "monospace", wordBreak: "break-all", textAlign: "right" };
+  const primary = {
+    flex: 1,
+    padding: "10px 12px",
+    background: t.accent,
+    color: t.accentForeground,
+    border: "none",
+    borderRadius: 8,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer"
+  };
+  const secondary = {
+    flex: 1,
+    padding: "10px 12px",
+    background: "none",
+    color: t.muted,
+    border: `1px solid ${t.border}`,
+    borderRadius: 8,
+    fontSize: 14,
+    cursor: "pointer"
+  };
+  const rows = request.kind === "send" ? [
+    ["Network", request.tx.chainId],
+    ["To", request.tx.to],
+    ["Amount", request.tx.value ?? "0"]
+  ] : [["Message digest", request.digest]];
+  return react.createElement(
+    "div",
+    { style: overlay, role: "dialog", "aria-modal": true, "aria-label": request.title ?? "Confirm" },
+    react.createElement(
+      "div",
+      { style: card },
+      react.createElement("strong", { style: { fontSize: 16 } }, request.title ?? (request.kind === "send" ? "Confirm transaction" : "Confirm signature")),
+      react.createElement("div", { style: { marginTop: 12 } }, ...rows.map(([k, v]) => react.createElement("div", { key: k, style: rowStyle }, react.createElement("span", { style: key }, k), react.createElement("span", { style: val }, v)))),
+      error ? react.createElement("div", { style: { color: t.danger, fontSize: 13, marginTop: 12 }, role: "alert" }, error.message) : null,
+      react.createElement(
+        "div",
+        { style: { display: "flex", gap: 12, marginTop: 20 } },
+        react.createElement("button", { type: "button", style: secondary, onClick: onReject, disabled: pending }, "Reject"),
+        react.createElement("button", { type: "button", style: primary, onClick: onApprove, disabled: pending }, pending ? "Confirming\u2026" : status === "error" ? "Retry" : "Approve")
+      )
+    )
+  );
+}
+function FundWidget({ walletAddress, chainId, cryptoCurrency = "ETH", fiatCurrency, fiatAmount, label = "Add funds", onComplete }) {
+  const waaskey = useWaaskey();
+  const t = useTheme();
+  const [status, setStatus] = react.useState("idle");
+  const [error, setError] = react.useState();
+  const [provider, setProvider] = react.useState();
+  const launch = react.useCallback(async () => {
+    setStatus("loading");
+    setError(void 0);
+    try {
+      const { url, provider: p } = await waaskey.onramp.widgetUrl({ walletAddress, cryptoCurrency, chainId, fiatCurrency, fiatAmount });
+      setProvider(p);
+      window.open(url, "_blank", "noopener,noreferrer");
+      setStatus("open");
+    } catch (e) {
+      setError(e);
+      setStatus("error");
+    }
+  }, [waaskey, walletAddress, cryptoCurrency, chainId, fiatCurrency, fiatAmount]);
+  const done = react.useCallback(() => {
+    setStatus("idle");
+    onComplete?.();
+  }, [onComplete]);
+  const button = {
+    width: "100%",
+    padding: "10px 12px",
+    background: t.accent,
+    color: t.accentForeground,
+    border: "none",
+    borderRadius: 8,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: status === "loading" ? "default" : "pointer",
+    opacity: status === "loading" ? 0.6 : 1,
+    fontFamily: t.fontFamily
+  };
+  const secondary = { ...button, background: "none", color: t.accent, border: `1px solid ${t.accent}`, marginTop: 10 };
+  if (status === "open") {
+    return react.createElement(
+      "div",
+      { style: { fontFamily: t.fontFamily, color: t.foreground, textAlign: "center" } },
+      react.createElement("div", { style: { fontSize: 14 } }, `Complete your purchase in the ${provider ?? "provider"} window.`),
+      react.createElement("button", { type: "button", style: secondary, onClick: done }, "I've finished")
+    );
+  }
+  return react.createElement(
+    "div",
+    { style: { fontFamily: t.fontFamily } },
+    react.createElement("button", { type: "button", style: button, onClick: () => void launch(), disabled: status === "loading" }, status === "loading" ? "Opening\u2026" : label),
+    status === "error" && error ? react.createElement("div", { style: { color: t.danger, fontSize: 13, marginTop: 8 }, role: "alert" }, error.message) : null
+  );
+}
+
+exports.ConnectModal = ConnectModal;
+exports.FundWidget = FundWidget;
+exports.SignPrompt = SignPrompt;
+exports.ThemeContext = ThemeContext;
+exports.WaasProvider = WaasProvider;
+exports.WaaskeyContext = WaaskeyContext;
+exports.WaaskeyProvider = WaaskeyProvider;
+exports.WalletWidget = WalletWidget;
+exports.darkTheme = darkTheme;
+exports.defaultTheme = defaultTheme;
+exports.lightTheme = lightTheme;
+exports.resolveTheme = resolveTheme;
+exports.useBalance = useBalance;
+exports.useBalances = useBalances;
+exports.useCreateWallet = useCreateWallet;
+exports.useLogin = useLogin;
+exports.useQrCode = useQrCode;
+exports.useSend = useSend;
+exports.useSignPrompt = useSignPrompt;
+exports.useSignatures = useSignatures;
+exports.useTheme = useTheme;
+exports.useWaas = useWaas;
+exports.useWaaskey = useWaaskey;
+exports.useWallet = useWallet;
+Object.keys(sdk).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return sdk[k]; }
+  });
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map