Token Approvals
Spending allowances granted to contracts, with revoke. An unlimited approval is stated as "unlimited" rather than rendered as 2²⁵⁶−1, which reads like a display bug — it is a standing permission to move the whole balance, forever.
src/components/ui/token-approvals.tsxAbout
From the component's own source, where it was written.
Spending allowances granted to contracts, and a way to revoke them.
An unlimited approval is called out as a risk rather than shown as a number. Wallets grant 2^256-1 by default and it renders as an absurd figure that reads like a display bug; stating "unlimited" is the only honest rendering, because that is exactly what it is — a standing permission to move the entire balance, forever, with no further signature.
Revoking is confirmed inline beside the row. A modal that hides which approval is being revoked is how the wrong one goes.
Install
npx astralyx-ui add token-approvals
Usage
import { TokenApprovals } from '@/components/ui/token-approvals'
<TokenApprovals approvals={approvals} onRevoke={revoke} />Composer
Change the props and the source below follows.
- USDCUnlimitedspenderUniswap Routerlast used US$12,480.00 at risk
- WETH5.00 WETHspender1inchlast used
- DAIUnlimitedspender0x7a25…488DUS$840.00 at risk
<TokenApprovals approvals={approvals} onRevoke={revoke} />Examples
Allowances
<TokenApprovals approvals={approvals} onRevoke={revoke} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
TokenApprovals
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | 'Approvals' | — |
| approvals | Approval[] | required | { id, token, spender, spenderName?, allowance?, unlimited?, lastUsed?, atRisk? }. |
| onRevoke | (id: string) => void | — | Confirmed inline beside the row, since a modal hiding which approval is being revoked is how the wrong one goes. |
| currency | string | 'USD' | — |
| locale | string | 'en-GB' | — |
| now | Date | — | — |
| emptyLabel | ReactNode | 'No active approvals' | — |
| unlimitedLabel | ReactNode | 'Unlimited' | Badge on an unbounded allowance. |
| revokeLabel | ReactNode | 'Revoke' | — |
| spenderLabel | ReactNode | 'spender' | Precedes the spender address. |
| lastUsedLabel | ReactNode | 'last used' | Precedes the last-used time. |
| confirmNote | ReactNode | 'Revoking costs gas and requires a signature.' | — |
| confirmLabel | ReactNode | 'Confirm' | — |
| cancelLabel | ReactNode | 'Cancel' | — |
Types
Approval
Spending allowances granted to contracts, and a way to revoke them.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| token | ReactNode | — |
| tokenIcon? | ReactNode | — |
| spender | string | The contract holding the allowance. |
| spenderName? | ReactNode | — |
| allowance? | ReactNode | Formatted amount, or omit for unlimited. |
| unlimited? | boolean | Badged as a risk rather than shown as a number. |
| lastUsed? | Date | — |
| atRisk? | number | Fiat value currently exposed under the approval — the figure that makes it concrete. |
| explorerHref? | string | — |