fix(classifieds): use npm + bundler instead of CDN, fix v7/v8 wallet API mismatch

[biwasxyz]

Why this PR

After #682 merged, the new "Post a Classified" modal failed in two ways:

1. "Wallet connection cancelled" — fired even when the user never saw a wallet prompt.
2. "Couldn't load wallet support" — intermittent, especially on cold caches.

Both came from the same root cause: I had pinned @stacks/connect@7.10.1 on esm.sh but written the source against @stacks/connect@8. The v8 API (connect(), request()) does not exist in v7, so calling libs.connect() threw "connect is not a function" and my catch block mapped that to the misleading "cancelled" copy. The intermittent load failures came from esm.sh's deep dep tree (@stacks/auth, @stacks/common, @stacks/transactions, @stacks/connect-ui, jsontokens, …) flaking under cache misses.

This PR replaces the CDN approach with a real npm + bundler setup — the same thing Next.js / Vite does, just done explicitly because this repo serves plain HTML out of public/ with no framework in front.

What changed

Build pipeline (new, ~15 lines of glue)

• package.json adds @stacks/connect@^8, @stacks/transactions@^7, @stacks/blockchain-api-client@^8 as runtime deps and esbuild as a devDep.
• scripts/build-frontend.mjs (new, ~30 lines) walks src-frontend/*.ts entrypoints with esbuild and emits self-contained ESM bundles into public/.
• wrangler.jsonc gains a build.command. CI runs npx wrangler deploy directly, and that path picks up the hook — no CI changes needed.
• package.json also adds predev / predeploy hooks for the local npm run … flow.
• public/classifieds/wallet-flow.bundle.js is gitignored.

Source rewrite

• src-frontend/classifieds-wallet.ts (new) — the entire wallet flow as a normal TypeScript module with normal import statements. Uses:

  • @stacks/connect@8 — connect(), request("stx_transferSip10Ft", …), getLocalStorage(), disconnect(), isConnected(). The Promise API the source has always been written against.
  • Proper post-conditions via Pc:

    Pc.principal(stxAddress)
      .willSendEq(CLASSIFIED_PRICE_SATS)
      .ft(SBTC_CONTRACT_FULL, SBTC_ASSET_NAME)

    valid SIP-010 fungible post-condition that the wallet prompts the user to approve. Caps the transfer at exactly 3,000 sats; the network rejects anything else.
  • Dedicated stx_transferSip10Ft instead of a hand-rolled stx_callContract. Wallet UX is clearer — Leather/Xverse render a "send sBTC" prompt instead of "call contract".
  • MutationObserver to bind once #post-listing-btn appears in the DOM, so we don't race the inline grid-rendering code.
  • window.__aibtcClassifieds debug helpers (disconnect, isConnected, clearPending) for stuck-connection triage from the browser console.

• public/classifieds/index.html drops 540 lines of inline JS and replaces them with one <script type="module" src="/classifieds/wallet-flow.bundle.js" defer> tag. The grid-rendering code stays inline.

Verification

$ rm -f public/classifieds/wallet-flow.bundle.js
$ npm run deploy:dry-run
…
[custom build] Running: node scripts/build-frontend.mjs
[custom build]   public/classifieds/wallet-flow.bundle.js  1.4mb ⚠️
[custom build] ⚡ Done in 200ms
[custom build] built public/classifieds/wallet-flow.bundle.js
Total Upload: 1316.94 KiB / gzip: 251.57 KiB
--dry-run: exiting now.

Bundle is ~252 KB gzipped, loaded once per /classifieds/ page (<script type="module" defer>), cached browser-side after first hit. No effect on other pages — /, /wire/, /agents/, etc. don't import it.

Test plan

• npm run deploy:dry-run — wrangler picks up build.command, esbuild builds in 200ms, dry-run succeeds with the bundle uploaded as a static asset.
• git status --ignored — bundle is correctly gitignored.
• npm run typecheck is unaffected — tsconfig.json include is ["src/**/*.ts"], deliberately skipping src-frontend/.
• Manual smoke test against staging: open the modal, connect Leather, sign + broadcast, watch the live status update, verify the row appears in pending_review and the "View my submissions →" link works.
• Manual smoke test of the resume path: start a payment, close the tab after the wallet confirms, reopen /classifieds/, confirm the resume banner appears and finalizes successfully.

Commit-by-commit

1. chore(deps) — npm packages.
2. build — scripts/build-frontend.mjs + gitignore.
3. build — wrangler build.command hook.
4. feat(classifieds-wallet) — TypeScript source rewrite.
5. fix(classifieds-ui) — HTML loads bundle, drops inline CDN code.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	agent-news	017b6e7	Apr 30 2026, 03:09 PM

[github-actions]

Preview deployed: https://agent-news-staging.hosting-962.workers.dev

This preview uses sample data — beats, signals, and streaks are seeded automatically.

[arc0btc]

Replaces the broken CDN-based @stacks/connect@7 code with a proper npm + esbuild pipeline and a v8-compatible TypeScript module — good fix for two real bugs that were making the classified modal fail silently.

What works well:

• Root cause diagnosis is accurate. The v7 CDN pin against v8 API surface is exactly the kind of silent breakage that shows up as a misleading user error, and the fix is correct.
• The Pc.principal().willSendEq().ft() post-condition is the right way to construct an FT post-condition. The hand-rolled object literal in the old code was indeed wallet-reject prone.
• postConditionMode: "deny" + explicit post-condition is a solid defense-in-depth: even if the wallet auto-generates one, this caps the transfer at exactly 3,000 sats at the network level.
• Dual tracking (WebSocket primary + REST polling fallback) is the right architecture for tx confirmation. The POLL_MAX_MS = 4 min covers 24 Stacks blocks with a clean timeout message.
• Resume-across-reloads via localStorage with a 1-hour expiry is thoughtful UX. The submitToServer retry with graded delays handles indexing lag well.
• MutationObserver for waiting on #post-listing-btn is the correct pattern here — no race against the async grid render.
• Build pipeline is clean: wrangler build.command + npm pre-hooks, bundle gitignored, esbuild in <200ms. CI picks up the hook without any workflow changes.

[question] Post-conditions on stx_transferSip10Ft (src-frontend/classifieds-wallet.ts)
Passing explicit postConditions + postConditionMode: "deny" alongside stx_transferSip10Ft is valid intent, but the SIP-030 FT transfer method is expected to generate its own post-condition internally. If the wallet (Leather/Xverse) merges them, the user sees one cap; if it lists both, the user sees a duplicate condition. Worth a quick smoke test in Leather's staging mode to confirm the wallet prompt renders cleanly (single post-condition, labeled "Send 3000 sats sBTC"). If it's redundant, removing the explicit postConditions from the FT-transfer call simplifies the code and lets the wallet handle it idiomatically — the network enforces the cap regardless.

[suggestion] Serial entrypoints in build script (scripts/build-frontend.mjs:28)
The for...of loop awaits each entry serially. One entry now, but as the src-frontend/ directory grows this becomes a bottleneck. Parallel is a one-line change:

await Promise.all(entries.map(({ in: entryIn, out }) => {
  mkdirSync(dirname(out), { recursive: true });
  return build({
    entryPoints: [entryIn],
    bundle: true,
    format: "esm",
    target: "es2022",
    platform: "browser",
    outfile: out,
    minify: true,
    sourcemap: false,
    legalComments: "none",
    logLevel: "info",
    define: {
      "process.env.NODE_ENV": '"production"',
      "global": "globalThis",
    },
  });
}));

[nit] Duplicate blank line in wrangler.jsonc
Two empty lines between the closing brace of "build" and "preview_urls". Single blank line is enough.

[nit] SBTC_CONTRACT_NAME and SBTC_ASSET_NAME are the same string
Both are "sbtc-token". If the sBTC contract ever changes the asset name independently of the contract name, having two constants is correct — but a brief comment would clarify the distinction for a future reader.

Code quality notes:

• The $ and `` helpers are a clean micro-DOM-utility pattern. The strict-throw variant for required elements and null-return for optional ones is exactly the right split.
• validateForm returns a string | null error — clean functional approach, no exceptions for validation.
• The setStatus / setError / setDone trio is a clear state-machine output layer. Easy to follow.
• The window.__aibtcClassifieds debug export with a TypeScript declare global ambient augmentation is well-done — opt-in, typed, won't pollute production state.

Operational note: We poll the Hiro API in our own sensors and occasionally see elevated error rates on /extended/v1/tx/. The catch { /* swallow */ } in the poll tick handles that correctly — the error is not surfaced to the user, and the tick retries on the next interval. The 4-minute ceiling is well above any transient Hiro outage we've observed.