feat: Misc Sideshift page polish#667
Conversation
📝 WalkthroughWalkthroughAltpayment widget layout sizing and loading/error presentation were revised. Manual amount validation now uses a computed message, while Back navigation conditionally resets trades, returns to rate selection, or exits the widget. ChangesAltpayment UI flow
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
react/lib/components/Widget/AltpaymentWidget.tsxParsing error: error TS5012: Cannot read file '/tsconfig.json': ENOENT: no such file or directory, open '/tsconfig.json'. react/lib/components/Widget/Widget.tsxParsing error: error TS5012: Cannot read file '/tsconfig.json': ENOENT: no such file or directory, open '/tsconfig.json'. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@react/lib/components/Widget/AltpaymentWidget.tsx`:
- Around line 748-755: Update the altpaymentError branch in AltpaymentWidget so
non-editable flows also render an exit or retry action when
showManualAmountBackButton is false. Use backToWidget or the existing resetTrade
path as appropriate, while preserving the current manual-amount Back behavior.
- Around line 734-736: Update backToWidget to reset the parent-owned altpayment
trade, loading, shift, and error state before calling setUseAltpayment(false).
Reuse the existing state-reset mechanism or setters exposed by Widget.tsx, and
apply the same reset behavior to the other Back handler around the alternate
location.
- Around line 709-715: Update the amountValidationMessage logic in
AltpaymentWidget so null validation flags do not produce error messages; only
display the below- or above-maximum messages when isAboveMinimumAltpaymentAmount
or isBelowMaximumAltpaymentAmount is explicitly false, while preserving the
existing pairAmount requirement.
- Around line 414-417: Update the BackLink clickable element to use a native
button with type="button" or an equivalent MUI button primitive, preserving its
existing styling and click handling while making it keyboard-focusable and
operable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 8c1362df-ef23-49f3-ad44-8a04c9a2371d
📒 Files selected for processing (2)
react/lib/components/Widget/AltpaymentWidget.tsxreact/lib/components/Widget/Widget.tsx
| fontSize: '14px', cursor: 'pointer', | ||
| border: '1px solid #000', opacity: '0.7', padding: '2px 20px', | ||
| borderRadius: '3px', '&:hover': { opacity: '1' }, | ||
| }) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== locate file =="
fd -a 'AltpaymentWidget.tsx$' . || true
echo "== file stats =="
wc -l react/lib/components/Widget/AltpaymentWidget.tsx
echo "== BackLink usages and definitions around referenced ranges =="
sed -n '390,430p' react/lib/components/Widget/AltpaymentWidget.tsx
printf '\n--- range 740-760 ---\n'
sed -n '740,760p' react/lib/components/Widget/AltpaymentWidget.tsx
printf '\n--- range 845-865 ---\n'
sed -n '845,865p' react/lib/components/Widget/AltpaymentWidget.tsx
printf '\n--- range 905-925 ---\n'
sed -n '905,925p' react/lib/components/Widget/AltpaymentWidget.tsx
printf '\n--- range 994-1014 ---\n'
sed -n '994,1014p' react/lib/components/Widget/AltpaymentWidget.tsx
echo "== search BackLink definitions/usages =="
rg -n "BackLink|backToWidget|showManualAmountBackButton|AmountBackButton" react/lib/components/Widget/AltpaymentWidget.tsxRepository: PayButton/paybutton
Length of output: 5044
Make BackLink keyboard-accessible.
BackLink is rendered as a clickable <div> without focusability or a keyboard handler, so keyboard and assistive-technology users cannot operate these navigation controls. Use a real <button type="button"> or MUI button primitive while preserving the same styling and handling.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@react/lib/components/Widget/AltpaymentWidget.tsx` around lines 414 - 417,
Update the BackLink clickable element to use a native button with type="button"
or an equivalent MUI button primitive, preserving its existing styling and click
handling while making it keyboard-focusable and operable.
| const showManualAmountBackButton = altpaymentEditable | ||
| const amountValidationMessage = | ||
| pairAmount && !isAboveMinimumAltpaymentAmount | ||
| ? 'Amount is below minimum.' | ||
| : pairAmount && !isBelowMaximumAltpaymentAmount | ||
| ? 'Amount is above maximum.' | ||
| : '' |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Do not treat uninitialized validation flags as failures.
Both flags initially equal null; while pairAmount is truthy, !null evaluates to true, so a valid amount can briefly render “Amount is below minimum” before the validation effect runs. Compare explicitly with === false or initialize the flags to a neutral valid state.
Proposed fix
const amountValidationMessage =
- pairAmount && !isAboveMinimumAltpaymentAmount
+ pairAmount && isAboveMinimumAltpaymentAmount === false
? 'Amount is below minimum.'
- : pairAmount && !isBelowMaximumAltpaymentAmount
+ : pairAmount && isBelowMaximumAltpaymentAmount === false📝 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.
| const showManualAmountBackButton = altpaymentEditable | |
| const amountValidationMessage = | |
| pairAmount && !isAboveMinimumAltpaymentAmount | |
| ? 'Amount is below minimum.' | |
| : pairAmount && !isBelowMaximumAltpaymentAmount | |
| ? 'Amount is above maximum.' | |
| : '' | |
| const showManualAmountBackButton = altpaymentEditable | |
| const amountValidationMessage = | |
| pairAmount && isAboveMinimumAltpaymentAmount === false | |
| ? 'Amount is below minimum.' | |
| : pairAmount && isBelowMaximumAltpaymentAmount === false | |
| ? 'Amount is above maximum.' | |
| : '' |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@react/lib/components/Widget/AltpaymentWidget.tsx` around lines 709 - 715,
Update the amountValidationMessage logic in AltpaymentWidget so null validation
flags do not produce error messages; only display the below- or above-maximum
messages when isAboveMinimumAltpaymentAmount or isBelowMaximumAltpaymentAmount
is explicitly false, while preserving the existing pairAmount requirement.
| const backToWidget = () => { | ||
| setUseAltpayment(false) | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Reset parent-owned altpayment state before hiding the widget.
Widget.tsx retains coinPair, loadingPair, loadingShift, and shift/error state after setUseAltpayment(false). If Back is pressed during a pending request, the socket is disconnected but loading flags and stale rates remain; reopening can show stale data or hide the rate-selection button indefinitely.
Clear the trade and loading state before leaving the widget.
Proposed fix
const backToWidget = () => {
+ resetTrade()
+ setLoadingPair(false)
+ setLoadingShift(false)
setUseAltpayment(false)
}Also applies to: 1004-1006
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@react/lib/components/Widget/AltpaymentWidget.tsx` around lines 734 - 736,
Update backToWidget to reset the parent-owned altpayment trade, loading, shift,
and error state before calling setUseAltpayment(false). Reuse the existing
state-reset mechanism or setters exposed by Widget.tsx, and apply the same reset
behavior to the other Back handler around the alternate location.
| {altpaymentError ? ( | ||
| <Fragment> | ||
| <ErrorMsg>Error: {altpaymentError.errorMessage}</ErrorMsg> | ||
| <BackLink onClick={resetTrade}>Back</BackLink> | ||
| {showManualAmountBackButton ? ( | ||
| <BackRow> | ||
| <BackLink onClick={resetTrade}>Back</BackLink> | ||
| </BackRow> | ||
| ) : null} |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Keep an exit or retry action available for every altpayment error.
When altpaymentEditable is false, showManualAmountBackButton is false, so the error branch renders only the error text. Auto-start and fixed-amount users can become trapped in altpayment mode with no way to recover.
Render a Back/Retry action for non-editable flows as well, using backToWidget or an equivalent reset path.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@react/lib/components/Widget/AltpaymentWidget.tsx` around lines 748 - 755,
Update the altpaymentError branch in AltpaymentWidget so non-editable flows also
render an exit or retry action when showManualAmountBackButton is false. Use
backToWidget or the existing resetTrade path as appropriate, while preserving
the current manual-amount Back behavior.
1 participant
Summary by CodeRabbit