Send View: Implement Network Selection UI For Withdrawals With Proper Balance Communication

by ADMIN 93 views

Background

The BTCPay App has made significant strides in unifying the Lightning Network (LN) and on-chain experience across the app. This unification has led to a seamless and user-friendly experience for users, showcasing the unified default currency balance in the dashboard and the unified LN and on-chain QR at the checkout. However, this abstraction of complexities means that once a user wants to send out funds (withdraw), we need to communicate the breakdown of total balance into different networks and navigate users towards sending the available amount with as little friction as possible.

Initially, we optimized for input field, where users add destination addresses, and we showcase the balance. However, after careful consideration, we realized that abstracting these complexities is more likely to lead to frustration. Users need to be aware of the different network balances and the available amount they can withdraw to avoid any confusion or errors.

Current UI Issues

The current UI has several issues that need to be addressed:

  • UI doesn't clearly communicate which network a user is withdrawing from: The current UI does not provide any clear indication of which network a user is withdrawing from, leading to confusion and potential errors.
  • No indication of separate balances for different networks (on-chain vs Lightning): The current UI does not provide any indication of the separate balances for different networks, making it difficult for users to understand their available balance.
  • For Lightning, users aren't aware of the 1% channel reserve requirement: The current UI does not provide any information about the 1% channel reserve requirement for Lightning, which can lead to confusion and potential errors.
Image

Proposed Solution

To address the current UI issues, we propose a new withdrawal flow that includes the following features:

  1. Shows total balance at the top: The new withdrawal flow will display the total balance at the top, providing users with a clear understanding of their available balance.
  2. Adds a network selection step with clear balance breakdown: The new withdrawal flow will include a network selection step that clearly communicates the balance breakdown for each network. For example:
    • Bitcoin (On-chain): $80.00
    • Lightning Network: $20.00 total / $19.80 withdrawable (1% reserve fee)
  3. Clearly communicates the withdrawable vs total balance for Lightning: The new withdrawal flow will clearly communicate the withdrawable vs total balance for Lightning, providing users with a clear understanding of their available balance.
  4. Explains the 1% channel reserve concept via tooltip: The new withdrawal flow will include a tooltip that explains the 1% channel reserve concept, providing users with a clear understanding of the reserve requirement.
  5. Maintains the existing unified experience as much as possible while providing necessary network details: The new withdrawal flow will maintain the existing unified experience as much as possible while providing necessary network details to users.

Design Details

The proposed UI includes the following design details:

  • Total balance display at the top: The total balance will be displayed at the top of the withdrawal flow, providing users with a clear understanding of their available balance.
  • "Select Network" section with two options: The "Select Network" section will include two options:
    • Bitcoin (On-chain) showing full balance
    • Lightning Network showing both total and withdrawable balances
  • "Available: $19.80" with help icon for Lightning: The "Available" section will display the available balance for Lightning, along with a help icon that provides additional information about the 1% channel reserve requirement.
  • Clear explanation that "1% of your Lightning balance ($0.20) is reserved as a channel reserve and cannot be withdrawn": The new withdrawal flow will include a clear explanation of the 1% channel reserve requirement, providing users with a clear understanding of the reserve requirement.
  • Network-specific info (fees, speed, compatibility): The new withdrawal flow will include network-specific information, such as fees, speed, and compatibility, to provide users with a clear understanding of the network details.
Image

Benefits of the Proposed Solution

The proposed solution provides several benefits, including:

  • Improved user experience: The new withdrawal flow provides a clear and intuitive user experience, making it easier for users to understand their available balance and navigate the withdrawal process.
  • Reduced friction: The new withdrawal flow reduces friction by providing clear and concise information about the network balances and the available amount that can be withdrawn.
  • Increased transparency: The new withdrawal flow increases transparency by providing clear and concise information about the 1% channel reserve requirement and the network details.

Conclusion

The proposed solution addresses the current UI issues and provides a clear and intuitive user experience for users. The new withdrawal flow includes a network selection step with clear balance breakdown, clearly communicates the withdrawable vs total balance for Lightning, and explains the 1% channel reserve concept via tooltip. The proposed solution maintains the existing unified experience as much as possible while providing necessary network details to users.

Introduction

In our previous article, we proposed a new withdrawal flow that includes a network selection step with clear balance breakdown, clearly communicates the withdrawable vs total balance for Lightning, and explains the 1% channel reserve concept via tooltip. In this article, we will answer some frequently asked questions (FAQs) about the proposed solution.

Q&A

Q: Why do we need a new withdrawal flow?

A: The current withdrawal flow does not clearly communicate which network a user is withdrawing from, leading to confusion and potential errors. Additionally, the current flow does not provide any indication of separate balances for different networks (on-chain vs Lightning), making it difficult for users to understand their available balance.

Q: What are the benefits of the proposed solution?

A: The proposed solution provides several benefits, including:

  • Improved user experience: The new withdrawal flow provides a clear and intuitive user experience, making it easier for users to understand their available balance and navigate the withdrawal process.
  • Reduced friction: The new withdrawal flow reduces friction by providing clear and concise information about the network balances and the available amount that can be withdrawn.
  • Increased transparency: The new withdrawal flow increases transparency by providing clear and concise information about the 1% channel reserve requirement and the network details.

Q: How will the new withdrawal flow affect users?

A: The new withdrawal flow will provide users with a clear and intuitive experience, making it easier for them to understand their available balance and navigate the withdrawal process. Users will be able to select their preferred network and see the clear balance breakdown, including the withdrawable vs total balance for Lightning.

Q: What about the 1% channel reserve requirement?

A: The new withdrawal flow will clearly communicate the 1% channel reserve requirement, providing users with a clear understanding of the reserve requirement. Users will be able to see the available balance for Lightning, along with a help icon that provides additional information about the 1% channel reserve requirement.

Q: How will the new withdrawal flow affect the user interface?

A: The new withdrawal flow will maintain the existing unified experience as much as possible while providing necessary network details to users. The user interface will be updated to include a network selection step with clear balance breakdown, clearly communicates the withdrawable vs total balance for Lightning, and explains the 1% channel reserve concept via tooltip.

Q: What about the technical implementation?

A: The technical implementation of the new withdrawal flow will involve updating the user interface and backend logic to provide the necessary network details and balance breakdown. The implementation will be done in a way that minimizes disruption to the existing user experience.

Q: What are the next steps?

A: The next steps will involve implementing the new withdrawal flow and testing it thoroughly to ensure that it meets the requirements and provides a smooth user experience. The implementation will be done in a phased manner, with the first phase focusing on the network selection step and the second phase focusing on the balance breakdown and 1% channel reserve requirement.

Conclusion

The proposed solution addresses the current UI issues and provides a clear and intuitive user experience for users. The new withdrawal flow includes a network selection step with clear balance breakdown, clearly communicates the withdrawable vs total balance for Lightning, and explains the 1% channel reserve concept via tooltip. We hope that this Q&A article has provided additional clarity on the proposed solution and its benefits.

Additional Resources

  • [Previous article: Send View: Implement Network Selection UI for Withdrawals with Proper Balance Communication](link to previous article)
  • [Design details: Send View: Implement Network Selection UI for Withdrawals with Proper Balance Communication](link to design details)
  • [Technical implementation: Send View: Implement Network Selection UI for Withdrawals with Proper Balance Communication](link to technical implementation)