@hammerock/cca-widget 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shubham Singh Shoora
+
+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,98 @@
+# @hammerock/cca-widget
+
+An embeddable card that shows a live [Uniswap Continuous Clearing Auction](https://github.com/Uniswap/continuous-clearing-auction) and lets visitors bid on it from your own site.
+
+You can use it as a **React component**, or on **any website with a `<script>` tag**, no build step needed.
+
+> **Testnet only.** It works with Sepolia (11155111), Base Sepolia (84532) and Unichain Sepolia (1301), and rejects every other chain id.
+
+The card shows the clearing price, amount raised, supply cleared, supply schedule progress, time remaining and graduation status. It refreshes every 12 seconds and stops polling once the auction ends.
+
+## React
+
+```bash
+npm install @hammerock/cca-widget viem react react-dom
+```
+
+```tsx
+import { AuctionCard } from "@hammerock/cca-widget";
+
+export function Launch() {
+  return (
+    <AuctionCard
+      auction="0x1e40451D6ecabA8640559b7dFbe63B41dA52460d"
+      chainId={11155111}
+      rpcUrl="https://ethereum-sepolia-rpc.publicnode.com"
+    />
+  );
+}
+```
+
+The build includes `"use client"`, so you can import it straight into a **Next.js App Router** page.
+
+## Any website
+
+```html
+<div id="beacon"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/@hammerock/cca-widget@0.1.0/dist/mount.global.js"></script>
+<script>
+  const card = BeaconCCA.mount("#beacon", {
+    auction: "0x1e40451D6ecabA8640559b7dFbe63B41dA52460d",
+    chainId: 11155111,
+    rpcUrl: "https://ethereum-sepolia-rpc.publicnode.com",
+  });
+
+  // Later, if needed:
+  // card.update({ auction: "0x..." });
+  // card.unmount();
+</script>
+```
+
+This bundle includes React, so the page needs nothing else. It is about 540 KB.
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `auction` | `` `0x${string}` `` | yes | The `ContinuousClearingAuction` address |
+| `chainId` | `number` | yes | Must be a supported testnet |
+| `rpcUrl` | `string` | yes | **A public RPC endpoint** — see below |
+| `lensAddress` | `` `0x${string}` `` | no | A deployed `AuctionStateLens`. Leave it out and the widget reads state without one. |
+| `pollIntervalMs` | `number` | no | Refresh interval, default `12000` |
+| `readOnly` | `boolean` | no | Hide the bid form |
+
+**Never pass an RPC URL that contains an API key.** The widget runs in your visitors' browsers, so anything in `rpcUrl` is visible to them.
+
+## Bidding
+
+Visitors need a browser wallet such as MetaMask. The widget connects through the wallet's standard provider (EIP-1193), so you don't need wagmi or any provider setup. It also asks the wallet to switch to the right network.
+
+What the widget handles for the visitor:
+
+- **ERC-20 auctions** need approvals through Permit2 before the bid. The widget sends only the approvals that are missing, then the bid.
+- **Prices are rounded down to the auction's tick spacing**, because the contract rejects any other price. The form shows the adjusted price before the visitor confirms.
+- **Closed or not-yet-open auctions** show a clear message and a disabled button instead of a bid that would fail.
+- It checks the visitor's balance before sending anything.
+
+## Using the hook directly
+
+To build your own UI, use the data hook that powers the card:
+
+```tsx
+import { useAuction } from "@hammerock/cca-widget";
+
+const { data, error, loading, refresh } = useAuction({
+  auction: "0x1e40451D6ecabA8640559b7dFbe63B41dA52460d",
+  chainId: 11155111,
+  rpcUrl: "https://ethereum-sepolia-rpc.publicnode.com",
+});
+```
+
+For lower-level access (discovery, Q96 math, bid construction), use [`@hammerock/cca-sdk`](https://www.npmjs.com/package/@hammerock/cca-sdk), which this widget is built on.
+
+Source: [github.com/Shubham-Singh-Shoora/Beacon-](https://github.com/Shubham-Singh-Shoora/Beacon-).
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,573 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AuctionCard: () => AuctionCard,
+  connectWallet: () => connectWallet,
+  getInjectedProvider: () => getInjectedProvider,
+  hasInjectedWallet: () => hasInjectedWallet,
+  mount: () => mount,
+  useAuction: () => useAuction
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/AuctionCard.tsx
+var import_react2 = require("react");
+var import_cca_sdk2 = require("@hammerock/cca-sdk");
+
+// src/useAuction.ts
+var import_react = require("react");
+var import_cca_sdk = require("@hammerock/cca-sdk");
+function useAuction(options) {
+  const { auction, rpcUrl, chainId, lensAddress, pollIntervalMs = 12e3 } = options;
+  const [data, setData] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [nonce, setNonce] = (0, import_react.useState)(0);
+  const staticRef = (0, import_react.useRef)({});
+  const endedAtRef = (0, import_react.useRef)(false);
+  const clientRef = (0, import_react.useRef)(null);
+  if (!clientRef.current) {
+    try {
+      clientRef.current = (0, import_cca_sdk.createBeaconClient)({ rpcUrl, chainId, lensAddress });
+    } catch {
+      clientRef.current = null;
+    }
+  }
+  const refresh = (0, import_react.useCallback)(() => setNonce((value) => value + 1), []);
+  (0, import_react.useEffect)(() => {
+    const client = clientRef.current;
+    if (!client) {
+      setError(new Error(`Unsupported or non-testnet chain id ${chainId}.`));
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    async function load(isInitial) {
+      try {
+        if (isInitial) setLoading(true);
+        const [info, state, headBlock] = await Promise.all([
+          // Config is immutable, so only read it once.
+          staticRef.current.info ?? (0, import_cca_sdk.getAuctionInfo)(client, auction),
+          (0, import_cca_sdk.getAuctionState)(client, auction),
+          client.publicClient.getBlockNumber()
+        ]);
+        const [token, currency] = await Promise.all([
+          staticRef.current.token ?? (0, import_cca_sdk.getTokenMetadata)(client, info.token),
+          staticRef.current.currency ?? (0, import_cca_sdk.getTokenMetadata)(client, info.currency)
+        ]);
+        staticRef.current = { info, token, currency };
+        if (cancelled) return;
+        const status = (0, import_cca_sdk.deriveStatus)(info, headBlock);
+        endedAtRef.current = status === "ended";
+        const blocksRemaining = status === "pending" ? info.startBlock - headBlock : status === "live" ? info.endBlock - headBlock : 0n;
+        setData({
+          info,
+          state,
+          token,
+          currency,
+          status,
+          headBlock,
+          blocksRemaining,
+          secondsRemaining: Number(blocksRemaining) * client.blockTimeSeconds
+        });
+        setError(null);
+      } catch (cause) {
+        if (!cancelled) setError(cause);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    void load(true);
+    const timer = setInterval(() => {
+      if (staticRef.current.info && endedAtRef.current) {
+        clearInterval(timer);
+        return;
+      }
+      void load(false);
+    }, pollIntervalMs);
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+    };
+  }, [auction, chainId, pollIntervalMs, nonce]);
+  return { data, error, loading, client: clientRef.current, refresh };
+}
+
+// src/wallet.ts
+var import_viem = require("viem");
+function getInjectedProvider() {
+  return typeof window === "undefined" ? void 0 : window.ethereum;
+}
+function hasInjectedWallet() {
+  return getInjectedProvider() !== void 0;
+}
+async function connectWallet(chain) {
+  const provider = getInjectedProvider();
+  if (!provider) {
+    throw new Error("No browser wallet found. Install MetaMask or another EIP-1193 wallet.");
+  }
+  const accounts = await provider.request({ method: "eth_requestAccounts" });
+  const address = accounts[0];
+  if (!address) throw new Error("Wallet returned no accounts.");
+  const currentChainId = Number(
+    await provider.request({ method: "eth_chainId" })
+  );
+  if (currentChainId !== chain.id) {
+    await switchChain(provider, chain);
+  }
+  const walletClient = (0, import_viem.createWalletClient)({ account: address, chain, transport: (0, import_viem.custom)(provider) });
+  return { address, walletClient, chainId: chain.id };
+}
+async function switchChain(provider, chain) {
+  const chainIdHex = `0x${chain.id.toString(16)}`;
+  try {
+    await provider.request({
+      method: "wallet_switchEthereumChain",
+      params: [{ chainId: chainIdHex }]
+    });
+  } catch (error) {
+    const code = error.code;
+    if (code !== 4902) throw error;
+    await provider.request({
+      method: "wallet_addEthereumChain",
+      params: [
+        {
+          chainId: chainIdHex,
+          chainName: chain.name,
+          nativeCurrency: chain.nativeCurrency,
+          rpcUrls: [chain.rpcUrls.default.http[0]],
+          blockExplorerUrls: chain.blockExplorers?.default?.url ? [chain.blockExplorers.default.url] : void 0
+        }
+      ]
+    });
+  }
+}
+
+// src/styles.ts
+var border = "#2a2a2e";
+var surface = "#141417";
+var text = "#f4f4f5";
+var muted = "#8b8b93";
+var styles = {
+  card: {
+    boxSizing: "border-box",
+    width: "100%",
+    maxWidth: 360,
+    padding: 16,
+    borderRadius: 12,
+    border: `1px solid ${border}`,
+    background: surface,
+    color: text,
+    fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    fontSize: 14,
+    lineHeight: 1.45
+  },
+  headerRow: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: 8
+  },
+  symbol: { fontSize: 18, fontWeight: 600 },
+  pillRow: { display: "flex", flexWrap: "wrap", gap: 4, justifyContent: "flex-end" },
+  pill: {
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: 999,
+    fontSize: 11,
+    fontWeight: 500,
+    whiteSpace: "nowrap"
+  },
+  pillLive: { background: "rgba(16,185,129,0.15)", color: "#6ee7b7" },
+  pillPending: { background: "rgba(14,165,233,0.15)", color: "#7dd3fc" },
+  pillEnded: { background: "rgba(113,113,122,0.18)", color: "#c4c4cc" },
+  pillGraduated: { background: "rgba(139,92,246,0.18)", color: "#c4b5fd" },
+  priceBlock: { marginTop: 14 },
+  price: { fontSize: 22, fontWeight: 600, fontVariantNumeric: "tabular-nums", wordBreak: "break-all" },
+  priceUnit: { fontSize: 12, fontWeight: 400, color: muted },
+  grid: { margin: "14px 0 0", display: "grid", gap: 8 },
+  row: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, margin: 0 },
+  label: { fontSize: 11, textTransform: "uppercase", letterSpacing: "0.04em", color: muted, margin: 0 },
+  value: { margin: 0, fontSize: 13, textAlign: "right", fontVariantNumeric: "tabular-nums" },
+  form: { marginTop: 16, display: "grid", gap: 6, borderTop: `1px solid ${border}`, paddingTop: 14 },
+  input: {
+    boxSizing: "border-box",
+    width: "100%",
+    padding: "8px 10px",
+    borderRadius: 8,
+    border: `1px solid ${border}`,
+    background: "#0d0d0f",
+    color: text,
+    fontSize: 14,
+    outline: "none"
+  },
+  button: {
+    marginTop: 6,
+    padding: "10px 12px",
+    borderRadius: 8,
+    border: "none",
+    background: text,
+    color: "#0d0d0f",
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer"
+  },
+  buttonDisabled: {
+    background: "#2a2a2e",
+    color: muted,
+    cursor: "not-allowed"
+  },
+  notice: {
+    padding: "8px 10px",
+    borderRadius: 8,
+    background: "rgba(113,113,122,0.12)",
+    color: muted,
+    fontSize: 12
+  },
+  muted: { color: muted, fontSize: 12 },
+  error: { color: "#fca5a5", fontSize: 12, wordBreak: "break-word" },
+  success: { color: "#6ee7b7", fontSize: 12, wordBreak: "break-word" },
+  link: { color: "#7dd3fc" },
+  footer: {
+    marginTop: 14,
+    paddingTop: 10,
+    borderTop: `1px solid ${border}`,
+    color: muted,
+    fontSize: 11,
+    textAlign: "center"
+  }
+};
+
+// src/AuctionCard.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AuctionCard(props) {
+  const { data, error, loading, client, refresh } = useAuction(props);
+  const [wallet, setWallet] = (0, import_react2.useState)(null);
+  const [maxPrice, setMaxPrice] = (0, import_react2.useState)("");
+  const [amount, setAmount] = (0, import_react2.useState)("");
+  const [tx, setTx] = (0, import_react2.useState)({ kind: "idle" });
+  const parsed = (0, import_react2.useMemo)(() => {
+    let maxPriceQ96 = 0n;
+    let amountUnits = 0n;
+    let parseError = null;
+    try {
+      if (maxPrice.trim()) maxPriceQ96 = (0, import_cca_sdk2.decimalToQ96)(maxPrice.trim());
+    } catch {
+      parseError = "Maximum price must be a decimal number.";
+    }
+    if (amount.trim() && data) {
+      const decimals = data.currency.decimals;
+      if (!/^\d+(\.\d+)?$/.test(amount.trim())) {
+        parseError = "Bid amount must be a decimal number.";
+      } else {
+        const [whole = "0", frac = ""] = amount.trim().split(".");
+        const padded = (frac + "0".repeat(decimals)).slice(0, decimals);
+        amountUnits = BigInt(whole) * 10n ** BigInt(decimals) + BigInt(padded || "0");
+      }
+    }
+    return { maxPriceQ96, amountUnits, parseError };
+  }, [maxPrice, amount, data]);
+  if (loading && !data) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.card, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.muted, children: "Loading auction\u2026" }) });
+  }
+  if (error && !data) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.card, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.error, children: "Could not load auction" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.muted, children: error.message.split("\n")[0] })
+    ] });
+  }
+  if (!data) return null;
+  const { info, state, token, currency, status } = data;
+  const hasCleared = state.totalCleared > 0n;
+  const schedulePercent = ((0, import_cca_sdk2.mpsToFraction)(state.checkpoint.cumulativeMps) * 100).toFixed(0);
+  const blocker = (0, import_cca_sdk2.describeBidBlocker)({
+    status,
+    amount: parsed.amountUnits,
+    maxPriceQ96: parsed.maxPriceQ96,
+    floorPriceQ96: info.floorPriceQ96,
+    tickSpacing: info.tickSpacing
+  });
+  const alignedPriceQ96 = parsed.maxPriceQ96 > 0n ? (0, import_cca_sdk2.alignPriceToTickBoundary)(parsed.maxPriceQ96, info.tickSpacing) : 0n;
+  const priceWasSnapped = alignedPriceQ96 > 0n && alignedPriceQ96 !== parsed.maxPriceQ96;
+  const bidDisabled = props.readOnly || status !== "live" || tx.kind === "working" || parsed.parseError !== null || blocker !== null;
+  async function onConnect() {
+    if (!client) return;
+    setTx({ kind: "working", message: "Connecting wallet\u2026" });
+    try {
+      setWallet(await connectWallet(client.chain));
+      setTx({ kind: "idle" });
+    } catch (cause) {
+      setTx({ kind: "error", message: cause.message });
+    }
+  }
+  async function onSubmitBid() {
+    if (!client || !wallet || !data) return;
+    try {
+      setTx({ kind: "working", message: "Checking balance\u2026" });
+      const readiness = await (0, import_cca_sdk2.checkBidReadiness)(client, {
+        auction: props.auction,
+        currency: data.info.currency,
+        bidder: wallet.address,
+        amount: parsed.amountUnits
+      });
+      if (!readiness.hasBalance) {
+        setTx({
+          kind: "error",
+          message: `Insufficient ${data.currency.symbol}. You hold ${(0, import_cca_sdk2.formatTokenAmount)(readiness.balance, data.currency)}.`
+        });
+        return;
+      }
+      const prevTickPriceQ96 = await (0, import_cca_sdk2.getPrevTickHint)(client, props.auction, parsed.maxPriceQ96);
+      const steps = (0, import_cca_sdk2.buildBidTransactions)({
+        auction: props.auction,
+        currency: data.info.currency,
+        maxPriceQ96: parsed.maxPriceQ96,
+        amount: parsed.amountUnits,
+        owner: wallet.address,
+        readiness,
+        prevTickPriceQ96,
+        // Snapped DOWN to a tick boundary; the contract rejects any other price.
+        tickSpacing: data.info.tickSpacing
+      });
+      let hash = "";
+      for (const [index, step] of steps.entries()) {
+        setTx({ kind: "working", message: `${step.label} (${index + 1}/${steps.length})\u2026` });
+        hash = await wallet.walletClient.sendTransaction({
+          account: wallet.address,
+          chain: client.chain,
+          to: step.request.to,
+          data: step.request.data,
+          value: step.request.value
+        });
+        if (index < steps.length - 1) {
+          await client.publicClient.waitForTransactionReceipt({ hash });
+        }
+      }
+      setTx({ kind: "sent", hash });
+      refresh();
+    } catch (cause) {
+      const message = cause.message.split("\n")[0] ?? "Transaction failed.";
+      setTx({ kind: "error", message });
+    }
+  }
+  const explorer = client?.chain.blockExplorers?.default?.url;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.card, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.headerRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.symbol, children: token.symbol }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.muted, children: token.name })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusPill, { status, isGraduated: state.isGraduated })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.priceBlock, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.label, children: "Clearing price" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.price, children: [
+        (0, import_cca_sdk2.formatQ96Compact)(state.checkpoint.clearingPriceQ96),
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: styles.priceUnit, children: [
+          currency.symbol,
+          " / ",
+          token.symbol
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", { style: styles.grid, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, { label: "Raised", value: (0, import_cca_sdk2.formatTokenAmount)(state.currencyRaised, currency) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Row,
+        {
+          label: "Cleared",
+          value: hasCleared ? `${(0, import_cca_sdk2.formatTokenAmount)(state.totalCleared, token)} of ${(0, import_cca_sdk2.formatTokenAmount)(info.totalSupply, token)}` : "Nothing cleared"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Row,
+        {
+          label: "Supply schedule",
+          value: `${schedulePercent}% released`,
+          hint: "Schedule progress, not the amount sold."
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Row,
+        {
+          label: status === "pending" ? "Starts in" : status === "live" ? "Time left" : "Closed",
+          value: status === "ended" ? `block ${info.endBlock.toString()}` : `~${formatMinutes(data.secondsRemaining)} (${data.blocksRemaining.toString()} blocks)`
+        }
+      )
+    ] }),
+    props.readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.form, children: [
+      status !== "live" ? (
+        // Say why, rather than showing a button that would revert.
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.notice, children: status === "ended" ? "This auction has ended. Bidding is closed." : "This auction has not opened yet." })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: styles.label, htmlFor: "beacon-max-price", children: [
+          "Max price (",
+          currency.symbol,
+          " per ",
+          token.symbol,
+          ")"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            id: "beacon-max-price",
+            style: styles.input,
+            value: maxPrice,
+            onChange: (event) => setMaxPrice(event.target.value),
+            placeholder: (0, import_cca_sdk2.formatQ96)(info.floorPriceQ96),
+            inputMode: "decimal"
+          }
+        ),
+        priceWasSnapped ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.muted, children: [
+          "Will bid at ",
+          (0, import_cca_sdk2.formatQ96Compact)(alignedPriceQ96),
+          " ",
+          currency.symbol,
+          " \u2014 prices snap down to the auction's tick spacing."
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: styles.label, htmlFor: "beacon-amount", children: [
+          "Bid amount (",
+          currency.symbol,
+          ")"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            id: "beacon-amount",
+            style: styles.input,
+            value: amount,
+            onChange: (event) => setAmount(event.target.value),
+            placeholder: "0.0",
+            inputMode: "decimal"
+          }
+        )
+      ] }),
+      wallet === null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, ...status !== "live" ? styles.buttonDisabled : {} },
+          disabled: status !== "live" || !hasInjectedWallet(),
+          onClick: () => void onConnect(),
+          children: hasInjectedWallet() ? "Connect wallet" : "No browser wallet detected"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, ...bidDisabled ? styles.buttonDisabled : {} },
+          disabled: bidDisabled,
+          onClick: () => void onSubmitBid(),
+          title: blocker ?? void 0,
+          children: tx.kind === "working" ? tx.message : "Submit bid"
+        }
+      ),
+      wallet ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.muted, children: [
+        "Connected ",
+        wallet.address.slice(0, 6),
+        "\u2026",
+        wallet.address.slice(-4)
+      ] }) : null,
+      parsed.parseError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.error, children: parsed.parseError }) : null,
+      blocker && status === "live" && !parsed.parseError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.muted, children: blocker }) : null,
+      tx.kind === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.error, children: tx.message }) : null,
+      tx.kind === "sent" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.success, children: [
+        "Bid submitted.",
+        " ",
+        explorer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: `${explorer}/tx/${tx.hash}`,
+            target: "_blank",
+            rel: "noreferrer",
+            style: styles.link,
+            children: "View transaction"
+          }
+        ) : tx.hash
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.footer, children: [
+      "Powered by ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Beacon" }),
+      " \xB7 Uniswap CCA"
+    ] })
+  ] });
+}
+function Row({ label, value, hint }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.row, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { style: styles.label, title: hint, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { style: styles.value, children: value })
+  ] });
+}
+function StatusPill({ status, isGraduated }) {
+  const palette = status === "live" ? styles.pillLive : status === "pending" ? styles.pillPending : styles.pillEnded;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.pillRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...styles.pill, ...palette }, children: status === "live" ? "Live" : status === "pending" ? "Upcoming" : "Ended" }),
+    isGraduated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...styles.pill, ...styles.pillGraduated }, children: "Graduated" }) : null
+  ] });
+}
+function formatMinutes(seconds) {
+  if (seconds <= 0) return "0m";
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.round(seconds % 3600 / 60);
+  return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
+}
+
+// src/mount.ts
+var import_react3 = require("react");
+var import_client = require("react-dom/client");
+var roots = /* @__PURE__ */ new WeakMap();
+function mount(target, props) {
+  const element = typeof target === "string" ? document.querySelector(target) : target;
+  if (!element) {
+    throw new Error(`Beacon widget: no element matched ${String(target)}`);
+  }
+  let root = roots.get(element);
+  if (!root) {
+    root = (0, import_client.createRoot)(element);
+    roots.set(element, root);
+  }
+  let current = props;
+  root.render((0, import_react3.createElement)(AuctionCard, current));
+  return {
+    update(next) {
+      current = { ...current, ...next };
+      root.render((0, import_react3.createElement)(AuctionCard, current));
+    },
+    unmount() {
+      root.unmount();
+      roots.delete(element);
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuctionCard,
+  connectWallet,
+  getInjectedProvider,
+  hasInjectedWallet,
+  mount,
+  useAuction
+});
+//# sourceMappingURL=index.cjs.map