Improved altpayments dialog

[Klakurka]

Summary by CodeRabbit

• New Features

  • Added QR code support for SideShift “Scan to Pay” deposits.
  • Introduced a guided three-step “Send”, “To”, and “SideShift ID” payment flow.
  • Added clearer copy-to-clipboard feedback with success and failure notifications.
  • Improved coin names, icons, network labels, and XEC support.

• Bug Fixes

  • Updated widget sizing to better accommodate alternate payment and SideShift flows.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1ac369a1-4f04-4de3-b321-bafdf3669157

📥 Commits

Reviewing files that changed from the base of the PR and between b6e2ed5 and 5badd28.

📒 Files selected for processing (2)

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

---

📝 Walkthrough

Walkthrough

AltpaymentWidget now presents SideShift deposits as a three-step flow with QR-code generation, copy-to-clipboard feedback, active-step state, and updated coin metadata handling. Widget adjusts container dimensions for the expanded ShiftReady layout.

Changes

SideShift payment UI

Layer / File(s)	Summary
Payment data and copy flow react/lib/components/Widget/AltpaymentWidget.tsx	Adds active-step state, clipboard success/failure toasts, reset behavior for new shifts, coin metadata helpers, XEC icon data, and QR payload construction.
ShiftReady interface and icons react/lib/components/Widget/AltpaymentWidget.tsx	Replaces the previous ShiftReady markup with a three-step layout, QR rendering, active-step styling, updated SideShift container styling, and unified coin icon resolution.
Responsive altpayment sizing react/lib/components/Widget/Widget.tsx	Uses conditional width and minimum height values for standard altpayment and expanded ShiftReady states.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Customer
  participant AltpaymentWidget
  participant Clipboard
  participant Toast
  Customer->>AltpaymentWidget: Select payment step or copy value
  AltpaymentWidget->>Clipboard: Write payment value
  Clipboard-->>AltpaymentWidget: Return success or failure
  AltpaymentWidget->>Toast: Display copy result
  AltpaymentWidget->>AltpaymentWidget: Advance active step
  AltpaymentWidget-->>Customer: Display step state and QR payment value

Loading

Possibly related PRs

• PayButton/paybutton#607 — Updates related SideShift container and widget layout styling.
• PayButton/paybutton#651 — Touches the same altpayment configuration and widget integration path.

✨ 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/improved-shift-page

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/components/Widget/Widget.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.}