[aazminu]

Description

Adds a two-segment horizontal progress bar in CancelConfirmModal (frontend/src/components/stream-creation/CancelConfirmModal.tsx) showing the percentage of vested/streamed tokens (recipient) vs refundable tokens (sender) formatted to 1 decimal place (64.5% Streamed / 35.5% Refunded).

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 #1639
Fixes #1639
/claim #1639

Changes Made

• Added and exported calculateCancelSplitPercentages(deposited, withdrawn) in frontend/src/components/stream-creation/CancelConfirmModal.tsx to compute clamped 1-decimal percentage splits (streamedFormatted, refundedFormatted, summaryLabel) without NaN or overflow on 0%, 100%, or zero-deposit edge cases.
• Rendered an accessible two-segment horizontal progress bar (role="progressbar", data-testid="cancel-split-bar") with emerald (streamed) and accent (refunded) segments and a formatted summary label ({streamedFormatted}% Streamed / {refundedFormatted}% Refunded).
• Added unit tests in frontend/src/components/stream-creation/__tests__/CancelConfirmModal.test.tsx verifying the dual-segment bar widths, 1-decimal formatting (64.5% Streamed / 35.5% Refunded), and 0% / 100% / overflow / NaN 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__/CancelConfirmModal.test.tsx src/__tests__/a11y.test.tsx in frontend/ (10/10 tests pass).
2. Run npx tsc --noEmit in frontend/ (0 errors).
3. Run npx eslint src/components/stream-creation/CancelConfirmModal.tsx src/components/stream-creation/__tests__/CancelConfirmModal.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