shadcn.io is not affiliated with official shadcn/ui
Insurance Pool Web3 Block for React
A cover quote for a protocol: a select of five protocols with risk tiers, an amount and a 30, 90 or 365 day period, a premium and the pool's capacity free in a side cell, and a policy list with dates, a claim window and an Expired state.
Installation
Overview
Quote cover against a protocol failing and keep the policies you hold, with this cover marketplace for React with Base UI. It's the page of Covermoor, a fictional cover marketplace, and the quote is a sample: nothing is underwritten, paid or sent, and cover can fail to pay. A Native Select lists five kinds of protocol, each with a typed risk tier and an example yearly rate, an amount field takes the cover in USDC, and a Segment Group sets the period to 30, 90 or 365 days. A side cell works out the premium (the yearly rate times the amount times the days over 365) and a Progress bar for the pool's capacity free after your cover; Buy cover, the one primary, adds a policy row with its start and end counted from the fixed demo day and the claim window, 14 days after an incident. A policy that ended before that day says Expired. For DeFi dashboards and wallets.
FAQ
How is the premium worked out?
Amount times the protocol's yearly rate times the days over 365. Ten thousand USDC for 90 days at 3.8 percent is about 94 USDC. The rates are typed examples between 1 and 12 percent, with a higher tier for riskier protocols.
What is capacity free?
Each pool can write a fixed amount of cover and has written part of it. The bar shows the share of that capacity still free after your amount. Asking for more than the pool can still cover is refused with a problem that says how much it can cover.
What do the policy rows show?
The protocol, the amount and period, the start and end dates, and either the 14 day claim window or Expired. New policies appear at the top of a scroll region that keeps its height, and one typed policy has already expired so both states exist.
What stays local, and how do I wire it?
All of it. The protocols, rates, capacity and policies are constants and state in the tab, and Buy cover only adds a row and a status line. In your app price cover from your underwriter, read policies from its contract, and send the purchase as a wallet transaction.