Feat/market swap button interaction OK-44732 OK-44649 #8730
Conversation
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
WalkthroughUpdates ActionButton component to display colored styling and token symbol before user input. Introduces Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge base: Disabled due to data retention organization setting
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/kit/src/views/Market/MarketDetailV2/components/SwapPanel/components/ActionButton.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: lint (20.x)
- GitHub Check: unittest (20.x)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (java-kotlin)
🔇 Additional comments (5)
packages/kit/src/views/Market/MarketDetailV2/components/SwapPanel/components/ActionButton.tsx (5)
52-52: State never resets—verify this matches UX intent.Once
hasClickedWithoutAmountis true, it stays true for the component's lifetime. If the user clicks without an amount, then enters and later deletes the amount, the button won't revert to showing "Buy TOKEN" in colored style. Confirm this is the intended behavior.
217-220: LGTM—border color matches button background.Setting
borderColorto match the button's background color creates clean visual consistency for the colored button states.
236-240: Early return prevents action until amount is entered.The handler sets state on every press, then returns early if there's no amount. First click without amount provides only visual feedback (button text/style change). This is likely intentional, but ensure users understand they need to enter an amount first.
279-291: Dependency array correctly updated.The new dependencies (
hasAmount,shouldCreateAddress?.result,networkId) are all used within the callback and properly included.
297-297: LGTM—uses computed disabled state.Correctly applies the computed
isButtonDisabledvalue that accounts for all button state conditions.
| let shouldUseColoredStyle = | ||
| hasAmount && !shouldDisable && !noAccount && !disabled; | ||
|
|
||
| let isButtonDisabled = Boolean( | ||
| (shouldDisable || disabled || !hasAmount) && | ||
| !shouldCreateAddress?.result && | ||
| !noAccount, | ||
| ); | ||
|
|
||
| if (!hasAmount && !hasClickedWithoutAmount) { | ||
| shouldUseColoredStyle = true; | ||
| buttonText = `${actionText} ${tokenDetail?.symbol || ''}`.trim(); | ||
| isButtonDisabled = false; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider refactoring complex button state logic for clarity.
The button state calculation mutates shouldUseColoredStyle, buttonText, and isButtonDisabled across multiple conditions. This works but is hard to trace. Consider extracting this into a useMemo that returns an object with all button properties, or add inline comments explaining the first-click UX flow.
Example refactor:
-let shouldUseColoredStyle =
- hasAmount && !shouldDisable && !noAccount && !disabled;
-
-let isButtonDisabled = Boolean(
- (shouldDisable || disabled || !hasAmount) &&
- !shouldCreateAddress?.result &&
- !noAccount,
-);
-
-if (!hasAmount && !hasClickedWithoutAmount) {
- shouldUseColoredStyle = true;
- buttonText = `${actionText} ${tokenDetail?.symbol || ''}`.trim();
- isButtonDisabled = false;
-}
+// Special case: show colored "Buy TOKEN" button before first click
+const isFirstClickWithoutAmount = !hasAmount && !hasClickedWithoutAmount;
+
+const shouldUseColoredStyle = isFirstClickWithoutAmount
+ ? true
+ : hasAmount && !shouldDisable && !noAccount && !disabled;
+
+const isButtonDisabled = isFirstClickWithoutAmount
+ ? false
+ : Boolean(
+ (shouldDisable || disabled || !hasAmount) &&
+ !shouldCreateAddress?.result &&
+ !noAccount,
+ );
+
+if (isFirstClickWithoutAmount) {
+ buttonText = `${actionText} ${tokenDetail?.symbol || ''}`.trim();
+}📝 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.
| let shouldUseColoredStyle = | |
| hasAmount && !shouldDisable && !noAccount && !disabled; | |
| let isButtonDisabled = Boolean( | |
| (shouldDisable || disabled || !hasAmount) && | |
| !shouldCreateAddress?.result && | |
| !noAccount, | |
| ); | |
| if (!hasAmount && !hasClickedWithoutAmount) { | |
| shouldUseColoredStyle = true; | |
| buttonText = `${actionText} ${tokenDetail?.symbol || ''}`.trim(); | |
| isButtonDisabled = false; | |
| } | |
| // Special case: show colored "Buy TOKEN" button before first click | |
| const isFirstClickWithoutAmount = !hasAmount && !hasClickedWithoutAmount; | |
| const shouldUseColoredStyle = isFirstClickWithoutAmount | |
| ? true | |
| : hasAmount && !shouldDisable && !noAccount && !disabled; | |
| const isButtonDisabled = isFirstClickWithoutAmount | |
| ? false | |
| : Boolean( | |
| (shouldDisable || disabled || !hasAmount) && | |
| !shouldCreateAddress?.result && | |
| !noAccount, | |
| ); | |
| if (isFirstClickWithoutAmount) { | |
| buttonText = `${actionText} ${tokenDetail?.symbol || ''}`.trim(); | |
| } |
| !noAccount, | ||
| )} | ||
| disabled={isButtonDisabled} | ||
| onPress={shouldDisable ? undefined : handlePress} |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Remove redundant onPress condition.
When shouldDisable is true, isButtonDisabled is also true (line 199), so the button is already disabled and won't fire press events. Simplify to onPress={handlePress}.
-onPress={shouldDisable ? undefined : handlePress}
+onPress={handlePress}📝 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.
| onPress={shouldDisable ? undefined : handlePress} | |
| onPress={handlePress} |
🤖 Prompt for AI Agents
In
packages/kit/src/views/Market/MarketDetailV2/components/SwapPanel/components/ActionButton.tsx
around line 298, the onPress prop is conditionally set to undefined when
shouldDisable is true even though isButtonDisabled already prevents presses;
remove the redundant conditional and set onPress to handlePress unconditionally
(onPress={handlePress}) so the prop is always passed while button disabled state
continues to block activation.
Summary by CodeRabbit
Bug Fixes
Style