shadcn.io is not affiliated with official shadcn/ui
Token Allowance Web3 Block for React
A wallet safety tool's approvals manager: eight token approvals regrouped by spender or by token, each group showing its exposure in sample USD, with an exact Limit to field, Revoke and Undo on every line.
Installation
Overview
See who can spend your tokens, and cap them, with this token allowance panel for React with Base UI. It's the approvals manager of Scopekeep, a wallet safety tool, and every figure is a typed sample, not market data. A Toggle Group in the toolbar regroups the same eight approvals by spender or by token, and each group is a row that shows its exposure: the smaller of the allowance and the balance, in sample USD, with an unlimited allowance written out and counted as the whole balance. A group opens in place as a Collapsible to its lines, and each line has a Limit to field that lowers the allowance to an exact amount, a Revoke button and, once changed, an Undo. Every change re-derives the group's exposure, the header sentence, for example 4 contracts can spend up to 18,980 USD of your tokens, and the Largest exposure line, and the status line says nothing was sent. For wallets, security tools and any screen that lists spending rights.
FAQ
How is exposure worked out?
For each approval it is the smaller of the allowance and what the wallet holds of that token, times a typed sample USD rate. A group adds up its lines, and the risk word is derived from it: Low under 500 USD, Medium under 5,000 and High above. An unlimited allowance can take everything the wallet holds of the token, so it weighs as the whole balance and is labelled Unlimited rather than as a number.
What does Limit to do, and why can't I raise an allowance?
It lowers one allowance to the exact amount you type, which is safer than revoking when a contract still needs some room. The field only accepts an amount below the current allowance, because raising one is a new approval and belongs in the app that asks for it. An empty or invalid entry is answered under the field and in the status line.
What stays local, and how do I wire it to a chain?
All of it. No wallet is read and no transaction is sent: the approvals (APPROVALS), balances, spenders and rates are typed constants, and Update, Revoke and Undo only change local state. In your app load allowances from your node or indexer, and send a lowered allowance as an approve call (or a permit) signed by the connected wallet, then refresh the line when it confirms.
What does Undo restore?
The allowance the line had before its first change in this session, so a limit followed by a revoke is undone in one step. Undo exists for the demo; a real revoke is a transaction, and you would approve again to reverse it.