Skip to content

feat: add fee selection ui - #51

Open
nicoletting wants to merge 3 commits into
mainfrom
feat/fee-selection
Open

feat: add fee selection ui#51
nicoletting wants to merge 3 commits into
mainfrom
feat/fee-selection

Conversation

@nicoletting

Copy link
Copy Markdown
Contributor

What changed

Adds the Fee Selection UI for the send Confirm screen (body-only, pure components):

  • AmountFeeGroup — the Amount + Est. Fee group. Two independent tap zones on the Est. Fee row:
    • fee amount (right) → opens the Fee & Speed sheet — Kaspa-native KAS only (feeSelectable)
    • Est. Fee label (left) → opens the existing Est. Fee breakdown sheet
  • FeeSpeedSheet — bottom sheet to pick transaction speed (Low / Medium / High), with a network-status badge (Smooth / Busy / Congested) and a "Recommended" pill.
  • StatusPill — added a backward-compatible icon="dot" variant (used by the network-status badge). Existing tx-status callers are unaffected.

Why

Notion: Fee Selection & Custom Transaction Fee UI (Mobile). Lets Kaspa-native KAS transactions pick a custom fee/speed; Layer-2 (Kasplex / Igra) and Kaspa-network KRC20 use the non-selectable default.

For Paul to confirm

  1. Per-network default — FeeSpeedSheet currently defaults selected/recommended to medium. Please confirm the default speed for each network state (Smooth / Busy / Congested) and select that option by default.
  2. AmountFeeGroup -Default (Non-selectable variant)feeSelectable={false} is for networks that can't custom-set fee. Use it or leave it — your call.
  3. on USD — design shows ≈ $24,000 (no "USD" suffix). Production formatCurrency outputs $24,000 (no ). Is dropped because the USD shown is exactly the real value? If it's an approximation, please prepend "≈ ".
  4. Est. Fee tooltip NOT built — I only wired the left zone to your existing EstFeeSheet component. No new tooltip/breakdown sheet was built.

Design tokens used

white["5%"], border.b200, borderRadius.2xl/3xl/xl/full, spacing.*, typography.t900/t800/t600/t500, background.bg100/bg200/bg400/bg500, success/warning/error.*, info.*, textStyles.*

Testing

  • Storybook web preview (npm run preview)
  • Android phone via Expo Go
  • Component states: AmountFeeGroup (Default / KaspaSelectable / LongAmount), FeeSpeedSheet (Smooth / Busy / Congested)
  • UAT: confirm the AmountFeeGroup card bg (white["5%"]) sits consistently next to the other confirm-page cards (kastle-mobile uses bg-background-950/5 — near-identical faint tint, verify on device)

nicoletting and others added 3 commits June 30, 2026 19:50
Optional icon="dot" prop for network-status badges; existing glyph behaviour unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bottom sheet to pick transaction speed (Low/Medium/High) with network-status badge and recommended pill. Pure UI.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Confirm-screen Amount + Est. Fee group. Two tap zones: fee amount opens Fee & Speed (Kaspa-native KAS only, feeSelectable), label opens the Est. Fee breakdown sheet. Pure UI.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

🎨 Storybook Preview Ready!

Your Storybook preview has been deployed and is available at:

🔗 Preview URL: https://forbole.github.io/kastle-ui/preview/pr-51/

📝 What's included:

  • All components from this PR
  • Interactive component playground
  • Documentation and examples

💡 This preview updates automatically when you push new commits to this PR.

🗑️ Preview will be cleaned up when the PR is merged or closed.;

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.

1 participant