[Frontend] Show visual percentage bar of streamed vs refunded tokens in CancelConfirmModal
Los mantenedores suelen responder en 7 días
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 85/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bien especificado
- Estado de actividad
- Activo
- Stack tecnológico
- nextjs, typescript
- Área
- fintech-quant, frontend, web-dev
Línea de trabajo
Lee frontend/src/components/stream-creation/CancelConfirmModal.tsx y sus cálculos existentes de los importes consolidados y reembolsables. Añade la barra de dos segmentos y las etiquetas de porcentaje con un decimal, teniendo en cuenta el vesting nulo y completo; usa frontend/src/components/stream-creation/__tests__/CancelConfirmModal.test.tsx para comprobar las proporciones y los casos límite.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Overview
When cancelling a stream in frontend/src/components/stream-creation/CancelConfirmModal.tsx, the modal displays text numbers for the recipient's vested amount and sender's refundable balance, but lacks a visual split bar.
Problem
- Senders confirming an irreversible cancellation benefit from an immediate visual proportion of how much has already vested versus how much will be returned to their wallet.
Proposed Changes
- Add a two-segment horizontal progress bar in
CancelConfirmModal.tsxshowing the percentage vested (recipient) vs percentage refunded (sender). - Format both percentage values to 1 decimal place (e.g.
64.5% Streamed / 35.5% Refunded).
Acceptance Criteria
- Dual-color bar accurately reflects vested vs unvested token ratio.
- Handles edge cases (0% streamed, 100% streamed) without NaN or overflow.
- Unit test added in
frontend/src/components/stream-creation/__tests__/CancelConfirmModal.test.tsx.
- Lenguaje dominante
- TypeScript
- Estrellas
- 18
- Forks
- 250
- Merge medio
- 5 d 6 h
- PR fusionados (30 d)
- 82
Preparar el entorno
- Incluye un Dockerfile o un archivo de Docker Compose
- Tiene una plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de LabsCrypt/flowfi
-
backend points: 150 testing
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
Los mantenedores suelen responder en 7 días
-
backend points: 150 testing
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
Los mantenedores suelen responder en 7 días
-
backend points: 150 testing
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
Los mantenedores suelen responder en 7 días
-
backend points: 150 testing
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
Los mantenedores suelen responder en 7 días
-
backend points: 150 testing
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
Los mantenedores suelen responder en 7 días
Todos los issues de LabsCrypt/flowfi
Issues similares
-
area: image-engine bug priority: low
Dificultad 2/5 1-3 horas Aptitud para principiantes 88/100
snapotter-hq/SnapOtter#3885 ·
Los mantenedores suelen responder en 1 día
-
Mend: dependency security vulnerability
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
Los mantenedores suelen responder en 3 días
-
pending triage
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
Los mantenedores suelen responder en 1 día
-
bug P3 UI/UX
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
Los mantenedores suelen responder en 1 día
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Dificultad 2/5 1-3 horas Aptitud para principiantes 73/100
openclaw/openclaw#182077 · 1 comentario · 1 reacción ·
Los mantenedores suelen responder en 1 día