Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alerts Web3 Block for Svelte

An alerts desk with a dry run: a New alert dialog for price, gas or whale transfers, switchable rules that say how often they would have fired in 7 days, and a band of the latest firings.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people set rules and see what they would have caught, with this alerts panel for Svelte with Ark UI. It's the alerts desk of Belltower, and every series is a typed sample, so no alert is ever sent. The header's New alert button, the block's one primary, opens a real Dialog with a Segment Group for the kind (Price, Gas or Whale transfer), a Number Input for the threshold with its unit and a check on the range, and a Native Select for the channel (In this page, or Email, which is only text here). Each rule is a row with a Switch, a name such as "Gas below 10 gwei" and a dry run, "Would have fired 7 times in the last 7 days", counted against 168 typed hourly samples. A Fired in this demo band lists the five latest times an enabled rule would have fired. For trading tools, wallets and monitoring dashboards that let people watch a number.

FAQ

How is would have fired worked out?

Each kind has a typed series of 168 hourly samples: a sample ether price, a base fee in gwei and the largest transfer in the hour. A rule fires each time its condition starts to hold, meaning the sample crosses the threshold and the hour before did not. Turning a rule on or off changes the history band but not its own count.

What does each kind watch?

Price fires above the threshold in USD, Gas fires below it in gwei, and Whale transfer fires above it in USD. The direction follows the kind, so the form states it in the field's name, and the threshold must be in range or the field says what the range is.

What stays local, and how do I wire it?

Everything. Rules live in the tab, the channel is a label, and nothing is delivered. In your app save rules per user, evaluate them on the server against your price, fee and transfer feeds, send through your own email or push service, and keep the dry run: it is how people learn what a threshold means.

Can I take a rule back?

Remove deletes the rule and the foot offers one level of Undo. With no rules left, the list shows an empty state that points at New alert. The list keeps its height either way.

Is it accessible from the keyboard?

Yes. The dialog traps focus, returns it to New alert and closes with Escape; every switch and remove button names its rule; errors in the form are read out and tied to the field.

How does it look on a phone?

Rows stay on three lines with the switch at the start and Remove at the end, the header button drops under the sentence, and the dialog scrolls inside the screen.