Feat/swap UI feat #6488
Feat/swap UI feat #6488
Conversation
Kahnchan
requested review from
ezailWang,
loatheb,
sidmorizon,
originalix and
huhuanming
as code owners
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
WalkthroughThe pull request introduces visual and styling modifications across several components in the Swap module. The changes primarily focus on adjusting layout, spacing, colors, and component properties without altering core functionality. Modifications include updates to badge text styling, image sizes, tab item backgrounds, input container designs, and quote input layout. Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 3
🔭 Outside diff range comments (2)
packages/kit/src/views/Swap/pages/components/SwapQuoteInput.tsx (1)
Line range hint
60-93: Extract complex balance calculation logicMove the maxAmount calculation logic into a separate utility function. This will improve readability and make the code easier to test.
+ const calculateMaxAmount = (balance: string, reservationValue?: string) => { + if (!reservationValue) return balance; + const balanceBN = new BigNumber(balance ?? 0); + const reservationBN = new BigNumber(reservationValue); + return balanceBN.minus(reservationBN).isGreaterThan(0) + ? balanceBN.minus(reservationBN).toFixed() + : '0'; + }; onBalanceMaxPress={() => { - let maxAmount = fromTokenBalance; - if (fromToken?.reservationValue) { - const fromTokenBalanceBN = new BigNumber(fromTokenBalance ?? 0); - const fromTokenReservationValueBN = new BigNumber( - fromToken.reservationValue, - ); - if ( - fromTokenBalanceBN - .minus(fromTokenReservationValueBN) - .isGreaterThan(0) - ) { - maxAmount = fromTokenBalanceBN - .minus(fromTokenReservationValueBN) - .toFixed(); - } - } + const maxAmount = calculateMaxAmount(fromTokenBalance, fromToken?.reservationValue); setFromInputAmount(maxAmount); }}packages/kit/src/views/Swap/pages/components/SwapInputContainer.tsx (1)
Add missing accessibility attributes to input elements
The component needs these accessibility improvements:
- Add aria-label to identify the amount input field
- Include aria-invalid and aria-errormessage for error states
- Make balance and price information available to screen readers
- Add role="spinbutton" with aria-valuemin/max for numeric input
Example locations:
- packages/kit/src/components/AmountInput/index.tsx
- packages/components/src/forms/Input/Input.android.tsx
- packages/components/src/forms/Input/index.tsx
🔗 Analysis chain
Line range hint
1-228: Verify accessibility for input elements.The component handles complex input interactions. Ensure it meets accessibility standards:
- Color contrast for error states
- Screen reader support for balance and price information
- Clear focus indicators
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for accessibility-related props in the codebase rg -i "aria-|role=|accessib" packages/kit/src/views/Swap/Length of output: 602
Script:
#!/bin/bash # Check AmountInput implementation and accessibility features ast-grep --pattern 'export const AmountInput = $$$' # Search for accessibility-related props in components rg -i "aria-|role=|accessib" packages/kit/src/components/AmountInput/ rg -i "aria-|role=|accessib" packages/components/src/Length of output: 66051
Script:
#!/bin/bash # Check AmountInput implementation for accessibility features ast-grep --pattern 'export const AmountInput = $$$' # Search for accessibility attributes in AmountInput rg -i "aria-|role=|accessib" packages/kit/src/components/AmountInput/ # Check base components for built-in accessibility rg -i "aria-|role=|accessib" packages/components/src/primitives/Stack/Length of output: 198
Script:
#!/bin/bash # Search for input-related accessibility attributes in AmountInput rg -A 5 -B 5 "input|Input" packages/kit/src/components/AmountInput/ # Search for ARIA attributes and roles in the component rg -i "aria-|role=|label|description|errormessage" packages/kit/src/components/AmountInput/ # Check for error state handling rg -A 5 "hasError|error|invalid" packages/kit/src/components/AmountInput/Length of output: 9323
Script:
#!/bin/bash # Check base Input component implementation rg -A 10 "export (const|function) Input" packages/components/src/forms/Input/ rg -i "aria-|role=|label|description" packages/components/src/forms/Input/Length of output: 4035
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
packages/kit/src/views/Swap/components/SwapPercentageStageBadge.tsx(1 hunks)packages/kit/src/views/Swap/pages/components/SwapAccountAddressContainer.tsx(2 hunks)packages/kit/src/views/Swap/pages/components/SwapHeaderContainer.tsx(1 hunks)packages/kit/src/views/Swap/pages/components/SwapInputActions.tsx(1 hunks)packages/kit/src/views/Swap/pages/components/SwapInputContainer.tsx(2 hunks)packages/kit/src/views/Swap/pages/components/SwapQuoteInput.tsx(3 hunks)
🔇 Additional comments (7)
packages/kit/src/views/Swap/components/SwapPercentageStageBadge.tsx (1)
35-37: Nice styling improvements!The new text properties enhance readability and maintain visual hierarchy.
packages/kit/src/views/Swap/pages/components/SwapInputActions.tsx (1)
52-52: Tighter spacing improves visual densityThe reduced gap creates a more compact layout without compromising readability.
packages/kit/src/views/Swap/pages/components/SwapAccountAddressContainer.tsx (2)
68-68: Better image proportionsThe smaller 16x16 image size creates better visual balance with the text.
86-86: Clean layout structureThe simplified XStack props maintain proper alignment while removing unnecessary padding.
packages/kit/src/views/Swap/pages/components/SwapHeaderContainer.tsx (1)
47-47: Improved selected state visibilityThe subdued background creates better contrast for the selected tab while maintaining the interactive states.
packages/kit/src/views/Swap/pages/components/SwapInputContainer.tsx (2)
159-159: LGTM! Clean styling update.The YStack styling changes improve visual consistency with a subtle background and rounded corners.
160-160: LGTM! Good spacing adjustment.The padding changes create better visual balance between elements.
Summary by CodeRabbit
UI Improvements
Visual Updates
These changes focus on improving the visual consistency and user experience of the swap interface without altering core functionality.