Revoke Approval Web3 Block for Vue

Each approval scores two points for an unlimited allowance, two for an unverified contract and one if it has not been used for 90 days (or never) against the page's fixed date. Three or more is High, one or two is Medium and none is Low. The Risk column also spells out the reasons, so the word is never the only signal, and High rows are set in a heavier weight instead of a color.

A revoke is a small transaction, so the demo takes 46,000 gas for each at a typed 30 gwei and a sample ETH rate, and multiplies by the number selected. It says about, in ETH and in sample USD, and changes with the selection. Real gas moves with the network, so read it from your provider before you ask for a signature.

All of it. Nothing is signed or sent: the approvals (APPROVALS), dates and gas inputs are typed, and Revoke only marks rows in local state. In your app read approvals from your indexer, send one approve call with a zero allowance per row (or batch them through a wallet that supports it), and mark a row revoked when its transaction confirms.

So nothing jumps under your pointer and the work can be checked. A revoked row is dimmed, says Revoked in this demo and offers Undo, and the Revoked filter lists them, which is also the empty state you can reach before revoking anything.

It selects the rows that are shown and not yet revoked, and goes mixed when only some of them are selected. Changing the filter drops any selected rows that are no longer shown, so the count in the foot always matches what you can see.

The table keeps the checkbox, the spender with its token and allowance, and the risk as a short line under them; the other columns appear from wider screens. The table lives in a named scroll region with a sticky head, and the foot is pinned at the bottom of the screen.