Fix UI improvements in the Create Order screen #109
Conversation
WalkthroughThis update introduces dynamic positioning for the AddOrderButton on the home screen, enhances order list item UI to distinguish fixed and market price orders, adds tooltips to form sections, and improves safe area handling for navigation and button components. Several widgets are visually refined, with new tooltip dialogs and conditional icon rendering. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HomeScreen
participant AddOrderButton
participant MediaQuery
User->>HomeScreen: Opens home screen
HomeScreen->>MediaQuery: Get device bottom padding
HomeScreen->>AddOrderButton: Position button at (80 + bottom padding + 16) from bottom
AddOrderButton-->>User: Renders at dynamic position
sequenceDiagram
participant User
participant OrderListItem
User->>OrderListItem: View order details
OrderListItem->>OrderListItem: Determine isFixedOrder
alt isFixedOrder
OrderListItem-->>User: Show "For X sats"
else
OrderListItem-->>User: Show "Market Price" + premium %
end
sequenceDiagram
participant User
participant FormSection
participant Dialog
User->>FormSection: Sees section with info icon
User->>FormSection: Taps info icon
FormSection->>Dialog: Show tooltip modal
User->>Dialog: Reads and dismisses
Dialog->>FormSection: Close modal
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🔇 Additional comments (3)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 (2)
lib/features/order/widgets/premium_section.dart (1)
17-21: Good simplification for premium display.Showing whole numbers using
value.round()simplifies the UI as requested. However, be aware that this introduces a visual precision loss - the actual slider value might be 1.5% but displays as "2". Consider whether this discrepancy between displayed and actual values could confuse users during fine-tuning.lib/shared/widgets/add_order_button.dart (1)
90-90: Consider semantic meaning of empty SizedBox for icon parameter.While the empty SizedBox maintains layout, it might be clearer to use a more explicit approach since the icon parameter is now essentially unused.
Consider using a more semantic approach:
- icon: const SizedBox(width: 16, height: 16), + icon: const SizedBox.shrink(), // No icon, using overlay insteadOr consider using
ElevatedButtoninstead ofElevatedButton.iconsince no icon is actually being used in the traditional sense.Also applies to: 119-119
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
lib/features/home/screens/home_screen.dart(1 hunks)lib/features/home/widgets/order_list_item.dart(2 hunks)lib/features/order/widgets/form_section.dart(3 hunks)lib/features/order/widgets/premium_section.dart(2 hunks)lib/features/order/widgets/price_type_section.dart(1 hunks)lib/shared/widgets/add_order_button.dart(2 hunks)lib/shared/widgets/bottom_nav_bar.dart(2 hunks)
🔇 Additional comments (10)
lib/shared/widgets/bottom_nav_bar.dart (1)
21-23: LGTM! Proper safe area implementation.The
SafeAreawrapper withtop: falsecorrectly ensures the bottom navigation bar respects device safe areas (like home indicators on newer devices) while preserving the existing layout structure. This aligns well with the dynamic positioning changes in the home screen.lib/features/home/screens/home_screen.dart (1)
82-82: Excellent dynamic positioning implementation.The calculation
80 + MediaQuery.of(context).viewPadding.bottom + 16properly accounts for device-specific safe areas while maintaining consistent spacing. This ensures the AddOrderButton is always positioned correctly above the bottom navigation, regardless of device type (notched phones, phones with home indicators, etc.).lib/features/order/widgets/price_type_section.dart (2)
28-28: Well-crafted informational tooltip.The tooltip text clearly explains the difference between Market Price and Fixed Price options, helping users make informed decisions. The bullet-point format makes it easy to understand both options.
32-36: Excellent dynamic label implementation.The conditional text display
isMarketRate ? 'Market price' : 'Fixed price'provides immediate visual feedback about the current selection, improving user understanding of their choice. This enhances the UX by making the interface more responsive and informative.lib/features/order/widgets/premium_section.dart (1)
28-28: Excellent explanatory tooltip for premium concept.The tooltip clearly explains the premium percentage concept and reassures users about the default 0% setting. This is particularly helpful for users new to P2P trading who might not understand what "premium" means in this context.
lib/features/order/widgets/form_section.dart (2)
10-10: LGTM! Clean addition of optional tooltip parameter.The optional
infoTooltipparameter is well-designed and maintains backward compatibility.
34-96: Well-implemented tooltip dialog with good UX.The implementation successfully centralizes tooltip functionality with several strong points:
- Clean conditional rendering that only shows the info icon when tooltip content exists
- Consistent dialog styling that matches the app theme (dark background, green button)
- Proper spacing and layout with centered text and full-width button
- Good accessibility with tappable area and clear visual feedback
lib/features/home/widgets/order_list_item.dart (1)
115-189: Excellent UI restructuring for better order type clarity.The layout changes provide clear visual distinction between fixed and market price orders:
- Clean separation of currency display and price type information
- Consistent styling with proper color coding for premium values
- Intuitive labeling ("For X sats" vs "Market Price (+X%)")
lib/shared/widgets/add_order_button.dart (2)
74-101: Clean implementation of overlay arrow icons.The Stack approach with conditional Positioned arrows is well-executed:
- Arrow directions are semantically appropriate (downward for BUY indicating price decrease expectation)
- Proper positioning at left: 16 aligns with visual hierarchy
- Conditional rendering ensures arrows only appear when menu is open
103-130: Consistent implementation for SELL button.The SELL button follows the same pattern with appropriate upward arrow direction, maintaining visual and functional consistency.
| // Determine if this is a fixed order (has specific sats amount and is not zero) | ||
| final bool isFixedOrder = | ||
| order.amount != null && order.amount != "0" && order.amount!.isNotEmpty; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the logic for determining fixed orders.
The logic checks for non-null, non-zero, and non-empty amount, but should we also validate that the amount is a valid number?
🏁 Script executed:
#!/bin/bash
# Description: Search for other usages of order.amount to understand the expected data format and validation patterns
# Search for other places where order.amount is used
rg -A 3 -B 3 "order\.amount" --type dart
# Look for amount validation patterns
rg -A 5 "amount.*validation\|validate.*amount" --type dartLength of output: 3143
Validate order.amount as a numeric value before treating it as “fixed”
To avoid treating non‐numeric or malformed strings as valid sat amounts, parse and check the numeric value instead of just non‐null/non‐empty:
lib/features/home/widgets/order_list_item.dart (around lines 20–22):
- // Determine if this is a fixed order (has specific sats amount and is not zero)
- final bool isFixedOrder =
- order.amount != null && order.amount != "0" && order.amount!.isNotEmpty;
+ // Determine if this is a fixed order (valid positive sats amount)
+ final int? satAmount = int.tryParse(order.amount ?? '');
+ final bool isFixedOrder = satAmount != null && satAmount > 0;This guarantees that only valid, positive integer amounts are treated as fixed orders.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Determine if this is a fixed order (has specific sats amount and is not zero) | |
| final bool isFixedOrder = | |
| order.amount != null && order.amount != "0" && order.amount!.isNotEmpty; | |
| // Determine if this is a fixed order (valid positive sats amount) | |
| final int? satAmount = int.tryParse(order.amount ?? ''); | |
| final bool isFixedOrder = satAmount != null && satAmount > 0; |
🤖 Prompt for AI Agents
In lib/features/home/widgets/order_list_item.dart around lines 20 to 22, the
current logic to determine if an order is fixed only checks if order.amount is
non-null, non-zero, and non-empty, but does not verify if it is a valid numeric
value. Update the code to parse order.amount as an integer and confirm it is a
positive number before setting isFixedOrder to true. This ensures only valid
numeric amounts are considered fixed orders.
3 participants
This PR addresses issue #105 with the following improvements:
These changes improve the usability and clarity of the Create Order screen.
Summary by CodeRabbit