A wallet card with a counting balance, quick top-up amounts, recent activity and an eye button that blurs the figures.
$0.00
Balance $2,486.50Recent activity
npx shadcn@latest add https://hyperblur.dev/r/pay-wallet-balance.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-wallet-balance.tsx.
import { PayWalletBalance } from "@/components/hyperblur/pay-wallet-balance"
<PayWalletBalance balance={248650} onTopUp={(amount) => startTopUp(amount)} />| Prop | Type | Default | Description |
|---|---|---|---|
| balance | number | 248650 | Balance in minor units (cents). A change counts up to the new value. |
| currency | string | "$" | Currency symbol put in front of amounts. |
| name | string | "Main wallet" | Wallet name in the header. |
| topUps | number[] | [2500, 5000, 10000] | Quick top-up amounts in minor units. Empty hides the row. |
| activity | { id: string; label: string; time: string; amount: number }[] | three sample rows | Recent activity. Negative amounts are spending. |
| maxActivity | number | 3 | Most activity rows shown. |
| optimistic | boolean | true | Add a top-up to the balance and the list right away. Turn off to drive them from props. |
| onTopUp | (amount: number) => void | Called with the amount in minor units when a quick amount is clicked. | |
| hidden | boolean | Controlled hidden state. Pair with onHiddenChange. | |
| defaultHidden | boolean | false | Initial hidden state when uncontrolled. |
| onHiddenChange | (hidden: boolean) => void | Called when the eye button is toggled. | |
| accent | string | "#2f7bff" | Header glow and focus color. |