shadcn.io is not affiliated with official shadcn/ui
Subscription Crypto Web3 Block for Solid
A wallet's subscriptions as allowance runways: five services with a Slider that caps the allowance in months, the last covered charge date, Cancel and Resume, totals by month and year, and the first allowance to run out.
Installation
Overview
See how long each subscription can keep charging a wallet, with this allowance runway panel for Solid with Ark UI. It's the subscription list of Tickover, a membership billing tool. A summary shows what is charged each month, each year and how much is approved in total, with a line naming the first allowance to run out. Five services follow, each with a status Badge, the price in USDC or DAI, the next charge date and a Slider that sets the allowance cap in whole months from 0 to 12; under it a sentence says how many charges are approved and the date of the last one, or that the next charge would fail at 0. Cancel removes the allowance and Resume brings back twelve months. The foot's Shine Button, Renew all, restores twelve months on every active service. For wallets, billing tools and any screen that shows spending approvals as a runway.
FAQ
How is the last charge date worked out?
From the next charge date and the cap: the last covered charge is the next date plus one month less than the cap. A cap of 6 on 22 Oct 2026 covers charges up to 22 Mar 2027. At 0 months the next charge would fail, and the row says so with its date. The dates start from a fixed sample day and use only whole months.
What do the totals count?
Only active services. Each month is the sum of the prices, each year is twelve times that, and approved in total is each price times its months of allowance. USDC and DAI are counted as one dollar each in this sample, and the text says so. Cancelled services drop out of all three.
How is this different from the token allowance block?
The token allowance block regroups approvals by spender or token and edits an exact limit. This one treats each approval as a runway: how many monthly charges it still covers and when it stops, with the cap set in months.
What stays local, and how do I wire it?
All of it. Changing a slider, cancelling or renewing only changes this page; no approval transaction is built or signed. In your app a lower cap is a new approval transaction that the user signs, and a cancel should also tell the biller, since an approval alone does not stop a service from asking.
Is it accessible from the keyboard?
Yes. Each slider moves one month with the arrow keys, reads its value as, for example, 6 months, and is named with its service. Cancel and Resume name the service too, and a cancelled row is taken out of the tab order. One polite status line in the foot reports each change.