Skip to content

Conversation

@blackcoffeexbt
Copy link

Summary

A redesign of the LNbits Split Payments extension UI into a modern, mobile-first 3-step wizard with flow chart visualisation. This PR adds a wizard style UI for split payments config.

3-Step Wizard

  • Step 1: Source wallet selection with card-style interface
  • Step 2: Split payment configuration with real-time validation
  • Step 3: Review & confirmation with detailed summary
  • Mobile-First Responsive Design
  • Form Validation
  • Payment Flow Chart
Step 1 Step 2 Step 3 Chart

@blackcoffeexbt blackcoffeexbt requested a review from dni July 14, 2025 16:43
line-height: 1.4;
}
}
</style>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you maybe it it to splitpayment-wzard.css and link it like that?

package.json Outdated
{
"name": "splitpayments",
"version": "1.0.0",
"version": "1.0.2",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets bump the version in another commit, and we can maybe go for v1.1.0 because its a feature

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just seeing its a verison in the package.json, which is not used anywhere, maybe just revert to 1.0.0

@blackcoffeexbt
Copy link
Author

blackcoffeexbt commented Jul 15, 2025

Todos

  • Revert version in package.json to 1.0.0
  • Move flow chart into standalone Vue component to help with maintainability
  • Review in dark theme and check that styles are not overriding darkness
  • In step one - wallets list, add some details showing if splits are already set up and a summary of what they are
  • Add a confirmation step - Step 4 that confirms a split payment has been saved
  • If there are no split payments set up, the flow chart should show a single payment to the source wallet rather than the blank chart

Comment on lines 357 to 358
percentText.setAttribute('font-family', 'Arial, sans-serif')
percentText.setAttribute('font-size', '16px')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we get rid of font styles inside the svg? and maybe let the be picked up from the style?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants