ui: Add reserve balance display to Lightning and On-chain wallet rows

[kaloudis]

Description

Related issue: ZEUS-3092

Shows channel and anchor reserves on the wallet balance rows and payment method selection screen, giving users a clearer picture of their actual spendable balance. WIP, still working on how this is displayed.

Before	After

This pull request is categorized as a:

• New feature
• Bug fix
• Code refactor
• Configuration change
• Locales update
• Quality assurance
• Other

Checklist

• I’ve run yarn run tsc and made sure my code compiles correctly
• I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
• I’ve run yarn run prettier and made sure my code is formatted correctly
• I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

• No, I’m a fool
• Yes
• N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

• Android
• iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

• Embedded LND
• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (CLNRest)
• Nostr Wallet Connect
• LndHub

Locales

• I’ve added new locale text that requires translations
• I’m aware that new translations should be made on the ZEUS Transfix page and not directly to this repo

Third Party Dependencies and Packages

• Contributors will need to run yarn after this PR is merged in
• 3rd party dependencies have been modified:
  • verify that package.json and yarn.lock have been properly updated
  • verify that dependencies are installed for both iOS and Android platforms

Other:

• Changes were made that require an update to the README
• Changes were made that require an update to onboarding

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user interface by integrating reserve balance information directly into the Lightning and On-chain wallet displays. The primary goal is to improve transparency regarding available funds, allowing users to easily distinguish between their total balance and the portion that is reserved due to channel or anchor requirements. This change ensures that all balance-related UI elements, including spendable amounts and insufficient balance warnings, are more accurate and informative.

Highlights

• Reserve Balance Display: Introduced the display of reserve balances for both Lightning and On-chain wallets, providing users with a clearer understanding of their actual spendable funds by differentiating between total balance and reserved amounts.
• Spendable Balance Calculation: Updated balance calculations across payment method selection and layer balance displays to subtract reserve amounts, ensuring that 'insufficient balance' checks accurately reflect spendable funds.
• Data Model Enhancements: Extended the BalanceStore to include reservedBalanceAnchorChan and updated DataRow types to accommodate a reserve property, facilitating the propagation and display of reserve information throughout the UI.

Changelog

• components/LayerBalances/PaymentMethodList.tsx
  • Imported BigNumber and channelsStore for reserve calculations.
  • Added onchainReserve to PaymentMethodListProps and reserve to DataRow type.
  • Modified hasInsufficientBalance to factor in reserve amounts.
  • Updated Row and SwipeableRow components to utilize the new reserve property.
  • Implemented UI to display the spendable balance (total minus reserve) and the reserve amount separately for Lightning and On-chain rows.
  • Calculated lightningChannelReserve from active channels and passed it to relevant DataRow items.
• components/LayerBalances/index.tsx
  • Imported channelsStore to access channel reserve data.
  • Added reserve property to the DataRow type.
  • Adjusted the balance display in the Row component to show spendable balance and a separate reserve amount.
  • Integrated reservedBalanceAnchorChan from BalanceStore and calculated lightningChannelReserve for display.
• locales/en.json
  • Added a new localization key general.reserve for displaying the reserve label.
• stores/BalanceStore.ts
  • Introduced reservedBalanceAnchorChan as an observable property.
  • Initialized reservedBalanceAnchorChan in resetStore.
  • Updated fetchBlockchainBalance to retrieve and store reserved_balance_anchor_chan from API responses.
  • Ensured reservedBalanceAnchorChan is included in the returned data and hydrated from persistent storage.
• views/ChoosePaymentMethod.tsx
  • Destructured reservedBalanceAnchorChan from BalanceStore.
  • Passed onchainReserve prop to the PaymentMethodList component, utilizing the newly available reserve data.

Activity

• The pull request was created by kaloudis.
• The author provided a detailed description including screenshots of the UI changes (before and after).
• The author categorized the PR as 'Other' and completed the checklist for compilation, linting, formatting, and testing on iOS with LND (REST).
• No human activity (comments, reviews) has been recorded yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively adds the display of reserve balances for Lightning and On-chain wallets, which is a great enhancement for user clarity on spendable funds. The implementation is solid, but I've identified a few areas for improvement. There's a minor bug in the hasInsufficientBalance logic when a balance is undefined. Additionally, I've noticed some code duplication in rendering the balance and reserve amounts, and the use of any type where a specific Channel type could be used. Addressing these points will improve code correctness and maintainability.

[kaloudis]

Right now I'm thinking of tying this into the Balance view rework and instead displaying the reserve balances in their own row.

This icon could potentially be used for that row: https://www.svgrepo.com/svg/535485/lock-closed