[Frontend] Show visual percentage bar of streamed vs refunded tokens in CancelConfirmModal
I maintainer di solito rispondono entro 7 giorni
Valutazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Idoneità per principianti
- 85/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Specificata chiaramente
- Stato di attività
- Attiva
- Stack tecnologico
- nextjs, typescript
- Ambito
- fintech-quant, frontend, web-dev
Direzione di ricerca
Leggi frontend/src/components/stream-creation/CancelConfirmModal.tsx e i calcoli esistenti degli importi maturati e rimborsabili. Aggiungi la barra a due segmenti e le etichette percentuali con una cifra decimale, gestendo il vesting nullo e completo; usa frontend/src/components/stream-creation/__tests__/CancelConfirmModal.test.tsx per verificare i rapporti e i casi limite.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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.
- Lingua principale
- TypeScript
- Stelle
- 18
- Fork
- 250
- Merge medio
- 5g 6h
- PR unite (30g)
- 82
Preparare l'ambiente
- Include un Dockerfile o un file Docker Compose
- Ha un modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di LabsCrypt/flowfi
-
backend points: 150 testing
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
I maintainer di solito rispondono entro 7 giorni
-
backend points: 150 testing
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
I maintainer di solito rispondono entro 7 giorni
-
backend points: 150 testing
Difficoltà 2/5 1-3 ore Idoneità per principianti 76/100
I maintainer di solito rispondono entro 7 giorni
-
backend points: 150 testing
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
I maintainer di solito rispondono entro 7 giorni
-
backend points: 150 testing
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
I maintainer di solito rispondono entro 7 giorni
Tutte le issue di LabsCrypt/flowfi
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 66/100
db-ux-design-system/core-web#8613 ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 82/100
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 62/100
foxglove/mcap#1907 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
bug internal-plugin pr-welcome upstream
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
dsh-tauri-desk/deepseek-harness-desktop#1225 · 1 commento ·
-
enhancement
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
unjs/unhead#1027 · 1 reazione ·
I maintainer di solito rispondono entro 1 giorno