Description
This is a UI/UX issue. Users currently learn about low vault balance only when a call fails. Add a dismissible warning banner at the top of Dashboard.tsx when the balance falls below a configurable threshold, with a primary "Deposit USDC" button that opens the existing deposit modal.
Requirements and Context
- Reference:
src/components/Dashboard.tsx, src/components/Dashboard.css, deposit modal in src/App.tsx
- Threshold sourced from
src/config/constants.ts
- Banner uses
role="status" and is dismissable for the session
- Survives at 360px without overlap
- Must be secure, tested, and documented
- Should be efficient and easy to review
Suggested Execution
- Fork the repo and create a branch
git checkout -b feature/low-balance-banner
- Implement changes
src/components/LowBalanceBanner.tsx
src/components/Dashboard.tsx — render conditionally
src/config/constants.ts — add LOW_BALANCE_USD
- Test and commit
- Mock balance below threshold and confirm banner
- Confirm dismiss state persists in sessionStorage only
Example commit message
feat: low-balance warning banner on Dashboard
Acceptance Criteria
Guidelines
- Use
--warning token (add if missing)
- Document threshold constant
- Clear documentation and inline comments
- Timeframe: 96 hours
Description
This is a UI/UX issue. Users currently learn about low vault balance only when a call fails. Add a dismissible warning banner at the top of
Dashboard.tsxwhen the balance falls below a configurable threshold, with a primary "Deposit USDC" button that opens the existing deposit modal.Requirements and Context
src/components/Dashboard.tsx,src/components/Dashboard.css, deposit modal insrc/App.tsxsrc/config/constants.tsrole="status"and is dismissable for the sessionSuggested Execution
src/components/LowBalanceBanner.tsxsrc/components/Dashboard.tsx— render conditionallysrc/config/constants.ts— addLOW_BALANCE_USDExample commit message
Acceptance Criteria
Guidelines
--warningtoken (add if missing)