feat: Misc Sideshift page polish

[Klakurka]

Summary by CodeRabbit

• New Features
  • Added clearer back-navigation behavior in the alternative payment flow, including conditional “Back” actions during error and amount-validation states.
• Bug Fixes
  • Improved amount min/max validation messaging and streamlined error views, with correct state reset behavior for editable vs. non-editable scenarios.
• Style
  • Refined loading and error layouts for the alternative payment widget, improving centering and consistent sizing across states.
• Tests
  • Added/extended coverage for alternative payment error “Back” behavior and enhanced coin test configurations.

[coderabbitai]

📝 Walkthrough

Walkthrough

Altpayment 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.

Changes

Altpayment UI flow

Layer / File(s)	Summary
Altpayment layout and presentation react/lib/components/Widget/AltpaymentWidget.tsx, react/lib/components/Widget/Widget.tsx	Updated altpayment container sizing, loading alignment, Back link styling, amount error presentation, and parent wrapper dimensions.
Back-navigation state and callbacks react/lib/components/Widget/AltpaymentWidget.tsx, react/lib/tests/components/AltpaymentWidget.test.tsx	Expanded trade reset state, added manual amount navigation callbacks, conditionally rendered Back controls, and tested editable versus non-editable error behavior.
Amount validation rendering react/lib/components/Widget/AltpaymentWidget.tsx, react/lib/tests/components/AltpaymentWidget.test.tsx	Derived amount validation messaging and replaced separate error blocks with one visibility-controlled AmountError.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• PayButton/paybutton#607: Both changes modify altpayment layout sizing and positioning in AltpaymentWidget.tsx.
• PayButton/paybutton#653: Both changes update altpayment UI and sizing in the widget components.

Suggested reviewers: chedieck

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is empty and missing all required template sections.	Fill in Related to, Description, and Test plan, and add Depends on only if needed; include the linked issue number.
Title check	❓ Inconclusive	The title is related to the PR but too vague to convey the main change.	Use a concise, specific title that names the primary UI/layout change, e.g. Sideshift altpayment back-navigation and layout polish.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/sideshift-polish-20260723

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

react/lib/components/Widget/AltpaymentWidget.tsx

Parsing error: error TS5012: Cannot read file '/tsconfig.json': ENOENT: no such file or directory, open '/tsconfig.json'.

react/lib/tests/components/AltpaymentWidget.test.tsx

Parsing 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

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

📥 Commits

Reviewing files that changed from the base of the PR and between e32983a and f63ffbb.

📒 Files selected for processing (2)

• react/lib/components/Widget/AltpaymentWidget.tsx
• react/lib/components/Widget/Widget.tsx

[coderabbitai]

🧹 Nitpick comments (2)

react/lib/tests/components/AltpaymentWidget.test.tsx (2)

144-146: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Assert the final reset occurs before exiting altpayment.

This only checks setAltpaymentShift ordering; it would still pass if setLoadingPair, setLoadingShift, or setShiftCompleted ran after setUseAltpayment(false). Assert that all parent-owned reset setters—or at least the final setShiftCompleted call—precede the exit call. (github.com)

🤖 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/tests/components/AltpaymentWidget.test.tsx` around lines 144 - 146,
Update the ordering assertions in the AltpaymentWidget test to verify that the
final parent-owned reset, at minimum setShiftCompleted, occurs before
setUseAltpayment is called with false; include setLoadingPair and
setLoadingShift as well if asserting all reset setters. Preserve the existing
setAltpaymentShift ordering check.

---

124-164: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add coverage for manual-amount Back navigation.

These tests cover error-state Back handlers, but not the new backToRateSelection branch for invalid manual amounts. Add a regression test asserting that it clears the error, shift, loading, and pair state without calling setUseAltpayment. (github.com)

🤖 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/tests/components/AltpaymentWidget.test.tsx` around lines 124 - 164,
The test suite lacks coverage for the invalid manual-amount Back path. Add a
regression test in AltpaymentWidget tests that renders the manual-amount error
state, clicks the Back button, and verifies setAltpaymentError,
setAltpaymentShift, setLoadingPair, setLoadingShift, and setCoinPair are reset
while setUseAltpayment is not called, covering the backToRateSelection branch.

🤖 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.

Nitpick comments:
In `@react/lib/tests/components/AltpaymentWidget.test.tsx`:
- Around line 144-146: Update the ordering assertions in the AltpaymentWidget
test to verify that the final parent-owned reset, at minimum setShiftCompleted,
occurs before setUseAltpayment is called with false; include setLoadingPair and
setLoadingShift as well if asserting all reset setters. Preserve the existing
setAltpaymentShift ordering check.
- Around line 124-164: The test suite lacks coverage for the invalid
manual-amount Back path. Add a regression test in AltpaymentWidget tests that
renders the manual-amount error state, clicks the Back button, and verifies
setAltpaymentError, setAltpaymentShift, setLoadingPair, setLoadingShift, and
setCoinPair are reset while setUseAltpayment is not called, covering the
backToRateSelection branch.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 31170617-309a-461c-a4ae-f5377c51add0

📥 Commits

Reviewing files that changed from the base of the PR and between f63ffbb and 929a491.

📒 Files selected for processing (2)

• react/lib/components/Widget/AltpaymentWidget.tsx
• react/lib/tests/components/AltpaymentWidget.test.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• react/lib/components/Widget/AltpaymentWidget.tsx