Display deducted and additional fees in separate fields #33
Conversation
WalkthroughThe changes introduce a clearer separation and display of transaction fees in the bridge UI, distinguishing between "deducted" and "additional" fees. Supporting updates include a new enum for fee behavior, UI adjustments for improved fee explanation, CSS tweaks for alignment and icon styling, and a minor label change from "Fee" to "Fees" in transaction history. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BridgeFields
participant FeeData
participant UI
User->>BridgeFields: Enter transaction details
BridgeFields->>FeeData: Retrieve estimated_fees
FeeData-->>BridgeFields: Return fees with fee_behavior
BridgeFields->>BridgeFields: Separate fees into deductedFees and additionalFees
BridgeFields->>UI: Render deductedFees with tooltip
BridgeFields->>UI: Render additionalFees with tooltip
UI-->>User: Display separated fees and info icons
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/widget-react/src/pages/bridge/BridgeFields.tsx (1)
266-267: Standardize icon sizes for consistency.The
IconInfoFilledcomponent uses different sizes:size={12}on line 267 and no size specified on line 280. Consider standardizing the icon size for visual consistency.<WidgetTooltip label="This fee is paid on top of the current amount"> - <IconInfoFilled /> + <IconInfoFilled size={12} /> </WidgetTooltip>Also applies to: 280-280
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
packages/widget-react/package.json(1 hunks)packages/widget-react/src/pages/bridge/BridgeFields.module.css(1 hunks)packages/widget-react/src/pages/bridge/BridgeFields.tsx(4 hunks)packages/widget-react/src/pages/bridge/data/simulate.ts(1 hunks)
🔇 Additional comments (5)
packages/widget-react/src/pages/bridge/BridgeFields.module.css (1)
66-69: LGTM! Consistent icon styling added.The new CSS rule properly styles info icons within descriptions using the established color variable pattern.
packages/widget-react/package.json (1)
92-92: Verify the updated package version for availability and security.The dependency version was narrowed from "^1" to "^1.3.6", which suggests specific features are required from this version. Please ensure this version exists and has no known security vulnerabilities.
What is the latest version of @skip-go/client package and are there any known security advisories for version 1.3.6?packages/widget-react/src/pages/bridge/data/simulate.ts (1)
99-102: LGTM! Well-structured enum for fee behavior classification.The enum follows TypeScript best practices with descriptive names and string literal values that match the enum keys.
packages/widget-react/src/pages/bridge/BridgeFields.tsx (2)
5-10: LGTM! Import updates support the new fee display functionality.The added imports for
IconInfoFilledandWidgetTooltipalign with the UI enhancements for displaying fee information with explanatory tooltips.
260-284: Excellent implementation of fee separation with clear UX.The separation of deducted and additional fees with explanatory tooltips significantly improves user understanding of fee structures. The implementation correctly uses the new enum and provides clear messaging about fee behavior.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/widget-react/src/pages/bridge/BridgeFields.module.css (1)
50-54: Check layout after switching toalign-items: flex-startChanging vertical alignment from
centertoflex-startwill left-align all items within every.row. Verify screens with long fee descriptions or when no description is present—there’s a chance text/icon pairs now hug the top while the right-hand numeric value still sits lower, creating visual imbalance.If you need left alignment only for the left column, consider:
.row { display: flex; justify-content: space-between; - align-items: flex-start; + align-items: flex-start; /* keep */ + /* left column only */ + & > :first-child { + align-self: flex-start; + } + /* but keep numbers vertically centered */ + & > :last-child { + align-self: center; + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/widget-react/src/pages/bridge/BridgeFields.module.css(2 hunks)packages/widget-react/src/pages/bridge/BridgeFields.tsx(4 hunks)packages/widget-react/src/pages/bridge/data/simulate.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/widget-react/src/pages/bridge/data/simulate.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/widget-react/src/pages/bridge/BridgeFields.tsx
🔇 Additional comments (1)
packages/widget-react/src/pages/bridge/BridgeFields.module.css (1)
60-70: Good addition of scoped icon stylingIntroducing a nested
.iconrule keeps fee-tooltip icons visually consistent and avoids polluting global styles—nice touch.
simcheolhwan
force-pushed
the
update-estimated-fees
branch
from
c46638b to
bdb900b
Compare
simcheolhwan
force-pushed
the
update-estimated-fees
branch
from
bdb900b to
96a2c23
Compare
Summary by CodeRabbit
New Features
Style
Bug Fixes
Documentation