Skip to content

feat(frontend): add quick runway preset buttons (+7, +30, +90 days) to TopUpModal - #1685

Open
aazminu wants to merge 1 commit into
LabsCrypt:mainfrom
aazminu:feat/issue-1635-topup-modal-runway-presets
Open

aazminu wants to merge 1 commit into
LabsCrypt:mainfrom
aazminu:feat/issue-1635-topup-modal-runway-presets

Conversation

@aazminu

@aazminu aazminu commented Oct 19, 2026

Copy link
Copy Markdown

Description

Adds quick runway preset pill buttons (+7 Days, +30 Days, +90 Days) and a projected end date preview to TopUpModal (frontend/src/components/stream-creation/TopUpModal.tsx).

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 Documentation update
  • 🔧 Refactoring (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test addition or update

Related Issues

Closes #1635
Fixes #1635
/claim #1635

Changes Made

  • Added and exported calculateRunwayPresetAmount, calculateProjectedEndDate, and formatProjectedEndDate in frontend/src/components/stream-creation/TopUpModal.tsx.
  • Rendered +7 Days, +30 Days, and +90 Days quick-fill preset buttons (role="group", aria-label="Quick runway presets") that calculate ratePerSecond * 86400 * days (capped to 7 Stellar decimals) and populate the top-up amount field.
  • Rendered the projected end date (data-testid="projected-end-date") in the preview section when a valid top-up amount and stream rate are present, and passed ratePerSecond={modal.stream.ratePerSecond} from frontend/src/components/dashboard/dashboard-view.tsx.
  • Added unit tests in frontend/src/components/stream-creation/__tests__/TopUpModal.test.tsx verifying preset button clicks (+7 Days, +30 Days, +90 Days), projected end date rendering, and helper edge cases.

Testing

Test Coverage

  • Unit tests added/updated
  • Integration tests added/updated
  • Manual testing performed

Test Steps

  1. Run npx vitest run src/components/stream-creation/__tests__/TopUpModal.test.tsx src/__tests__/a11y.test.tsx src/components/dashboard/dashboard-view.test.tsx in frontend/ (18/18 tests pass).
  2. Run npx tsc --noEmit in frontend/ (0 errors).
  3. Run npx eslint src/components/stream-creation/TopUpModal.tsx src/components/stream-creation/__tests__/TopUpModal.test.tsx in frontend/ (0 errors, 0 warnings).

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have checked for breaking changes and documented them if applicable

Additional Notes

Payout Details

  • USDT/USDC Receiving Wallet (EVM / ERC-20 / Polygon / Arbitrum / Optimism / Base / BSC): 0x9a51790aC01c54184bcFa067bC38f7F0E7C6F6B6

…e to TopUpModal

Add +7 Days, +30 Days, and +90 Days quick-fill preset pill buttons to
TopUpModal that compute the required token deposit from ratePerSecond
(ratePerSecond * 86400 * days) and display the new projected end date
below the input when a valid top-up amount is entered.

Fixes LabsCrypt#1635

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Add quick runway preset buttons (+7 days, +30 days, +90 days) to TopUpModal

1 participant