[Frontend] Show visual percentage bar of streamed vs refunded tokens in CancelConfirmModal
メンテナーはふだん 7 日以内に返信
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 85/100
- issue の種類
- 機能追加
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- nextjs, typescript
- 領域
- fintech-quant, frontend, web-dev
調査の方向性
frontend/src/components/stream-creation/CancelConfirmModal.tsxと、既存の権利確定額および返金可能額の計算を確認してください。2セグメントのバーと小数点以下1桁のパーセンテージラベルを追加し、権利確定がゼロの場合と完了した場合に対応してください。frontend/src/components/stream-creation/__tests__/CancelConfirmModal.test.tsxを使って、比率と境界ケースを確認してください。
索引モデルが issue の本文から書いたものです。
説明
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.
- 主要言語
- TypeScript
- スター
- 18
- フォーク
- 250
- 平均マージ
- 5日 6時間
- マージ済み PR（30日）
- 82
環境構築
- Dockerfile または Docker Compose ファイルあり
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
LabsCrypt/flowfi のほかの issue
-
backend points: 150 testing
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 7 日以内に返信
-
backend points: 150 testing
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 7 日以内に返信
-
backend points: 150 testing
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
メンテナーはふだん 7 日以内に返信
-
backend points: 150 testing
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 7 日以内に返信
-
backend points: 150 testing
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 7 日以内に返信
LabsCrypt/flowfi の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
db-ux-design-system/core-web#8613 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
foxglove/mcap#1907 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
bug internal-plugin pr-welcome upstream
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
dsh-tauri-desk/deepseek-harness-desktop#1225 · コメント 1 件 ·
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
unjs/unhead#1027 · リアクション 1 件 ·
メンテナーはふだん 1 日以内に返信