Alert Toasts

Alert toasts are a connect-react default: <ConnectProvider> mounts them, so every venue gets new-market and resolution alerts with zero wiring — plus reply and price-alert kinds already wired for the day their producers land. They read the alerts engine feed and do no matching of their own. The durable bell/drawer is a separate surface — a toast is for the live moment.

The feed on this page is a stub — a real toast needs a real fan-out. Everything else is the shipped component: press a button and what appears is exactly what a venue gets. Switch to Live feed to watch a real one land.

market.created and market.resolved have live producers today. comment.reply and price.crossed render correctly but no engine emits them yet — they are wired ahead of their producers on purpose, so a venue on today's build doesn't break the day they turn on. Fire both market.resolved buttons to see the one payload field that is per-recipient rather than per-event: won. The winner has a payout to claim, so they get their own line; a loss stays the neutral resolution, and an account whose wallets held BOTH sides gets no won at all and reads as the neutral line too.

Fire more than 3 quickly to see the +N more collapse. Toasts are keyboard-reachable and dismissible, the stack is an aria-live="polite" region, and the slide-in is dropped under prefers-reduced-motion. Only the toasts take pointer events — the gaps between them never swallow a click, because a toast layer must not be able to cost someone a trade.

Nothing yet — fire one above. Note the backlog rule: rows already present when the layer mounts never toast, only rows that arrive after.

Click a toast — Connect can't know your routes, so it hands you the item and you navigate. The click also marks it read.

// This is the entire integration. There is no step two.
<ConnectProvider auth={auth}>
  <App />          {/* toasts already mounted */}
</ConnectProvider>

// Tune them, or opt out entirely:
// <ConnectProvider auth={auth} notifications={{ position: 'top-right', max: 5, onOpen: (n) => nav(`/market/${n.marketId}`) }}>
// <ConnectProvider auth={auth} notifications={false}>   — substituting your own toast rendering

// The row copy is shared with the bell/drawer, so the two never drift:
notificationLine(item)            // "New market: …" / "Resolved: …"

Placement & behaviour

onOpen