ride-the-lightning / rtl-design Goto Github PK

Menu placement after the Peers/Channel menu under Lightning.
Two sections on the page:

1. Liquidity Ask: The channel amount that the user wants to buy and the channel opening fee rate user is willing to pay
2. Nodes Advertising Liquidity: The ads section, with the following features:

• Filters to search on the basis of node capacity and the channel count
• Top Ad suggestions on the basis of opening cost or routing fee
• Grid to show more Ads from the graph
• Ability to navigate to specific ad to research and request channel from

1. Service nomenclature on the dashboard should be Swap Out or Loop Out depending on the service activated in the config. If both services are activated, the name on the dashboard can be generic and nomenclature can follow the brand, after user selects the service to execute the swap with.
2. Service selection on run time. RTL should not be selecting any service by default and that selection should be entirely user driven.
3. On the navigation, RTL will have a service menu at the same level as Lightning, to house swap services. The menu can be labeled as Service Add-ins. This menu should be enabled only when the user opts into activating any or every service option available.
4. Loop and Boltz will be placed as separate menu items under Service Add-ins, allowing service specific brand placements like infographic and service nomenclature on their respective pages.

Construct a chart to show the routing fee earned on a historical basis.

In 0.10.1 I noticed a new slide right animation that appears when the user navigates between menu options. I think the use of these animations might violate some accessibility best practices. I would recommend removing these animations in the next update.

It’s important to note that excessive use of motion and animation is an accessibility issue: animations with hard cuts between colors or flashing can trigger seizures in epileptic users. Parallax, carousel-forwarding animations, and scroll jacking can make users with vestibular disorders dizzy or nauseated and trigger migraines. Restraint is important, and you should respect those users who have set their browser or device to “reduce motion” by removing

source: https://www.nngroup.com/articles/animation-duration/

This feature can be used to edit the config params of an existing lightning node or add new params for a new node.
The parameters which need to be entered or modified by the user:

1. Node name - To identify your node in RTL
2. Lightning Implementation - LND or C-Lightning
3. Macaroon Path - Folder containing LND or C-Lightning-REST macaroons.
4. Lightning Server URL - The REST API server path to enable RTL to connect with the node e.g. https://localhost:8080/v1
5. Swap Server URL - The url for configuring connection with Loop server (This is an optional config, to enable connecting with loop service and only available for LND)

Related Issue: Ride-The-Lightning/RTL#210
Related to PR: Ride-The-Lightning/RTL#266

Login input validation:

Login response validation:

Enable 2FA Settings (Laptop view):

Enable 2FA Settings (Mobile view):

Disable 2FA Settings:

Currently, a balance score of, say 1, can mean two things: either all the funds are on my side or on their side. Sorting channels by balance score is not currently useful or informative.

A balance score should illustrate balance in either direction.

A -1 to +1 score would illustrate balance in a specific direction.

-1 = all the balance is on my side

+1 = all the balance in on my peers side

0 = perfectly balanced

lndmanage uses this scoring system and it makes sense.

Objective of the website: Highlight the tool's capabilities in one place and provides references to seek help on installation, support and community connect.

Structure:

• Introduction: A power user tool for lightning node operators to manage and exploit all of lightning node's capabilities from a web browser. Highlights: Dashboard, Channel management, Compatibility with LND/C-Lightning/Eclair, Multi-node management, Swap Service integration.
• Out-of-box availability on Lightning node solutions like Raspiblitz, Nodl, myNode and BTC Payserver
• Compatibility with all major lightning implementations like LND, C-Lightning and Eclair with the latest versions which are supported
• Swap service integrations available
• Tech stack: Angular/NodeJs
• Feature highlights with screen grabs
• Links to be made available for Twitter and Github for support and queries.

It would be nice to be able to click on "Active" "Pending" and so on directly from dashboard. And, probably same in "Balances".

Bringing Offers (Draft Bolt#12) to RTL. For the time being this will be treated as an experimental feature that users need to enable within the Node Config section.

Links:
https://bolt12.org/
lightning/bolts#798
https://bootstrap.bolt12.org/

Related to:
Ride-The-Lightning/RTL#792
Ride-The-Lightning/RTL#793
Ride-The-Lightning/RTL#794
Ride-The-Lightning/RTL#795
Ride-The-Lightning/RTL#801
Ride-The-Lightning/RTL#803

Merchant node persona is more concerned with the transaction capability of lightning node.
Hence the dashboard for this persona should focus on transactional features of lighting, like:

1. Lightning and On-chain balances
2. Channel capacity to receive payments
3. Channel capacity to send payments
4. Ability to generate invoices and make payments quickly
   

Circular re-balancing is adjusting local-remote balances between two of your channels to correct the balance of one or both channels, by making a payment to yourself.

Steps for circular rebalancing:

1. Select the channel which you want to re-balance (move part or complete local balance to remote)
2. Enter the amount you want to move to remote side.
3. Select the pubkey of the peer whose channel will be used to receive the payment.
4. Estimate the routing fee and enter the fee limit to pay for routing the payment.
5. Rebalance.

User should be able to scan the pubkey via a QR code, to make connection to the node via a mobile app.

Issue: Ride-The-Lightning/RTL#302

Notes:
In the current implementation upon changing password a confirmation is displayed as a snackbar. This can easily be missed as it is shown far from the form and it dismisses itself after a few seconds. A clearer way is necessary so users are not confused, after sucessfully changing their passwords.

Design RTL Login page, with a simple form to accept the password. The page should cover the below points:

1. RTL Logo
2. Welcome message
3. Form to capture the password with an option to switch the password entered and view it in plain text.
4. Button to Login (optional)

We want to add some detailed expalination on one of the inputs for loop-out like below screen. Is it ok to add tooltip directly on the input hover?

Add another config feature on the "Experimental" tab of the "Node Config" menu to enable configuration settings for Liquidity Ads. The title for the tab should be Channel Funding Policy.

The config should allow the user to update the following parameters:

• Policy Type
• Policy Match %age
• Lease Base Fee
• Lease Base Basis
• Max Channel Routing Base Fee
• Max Channel Routing Fee Rate

A warning should also be displayed for the user to configure the policy permanently via the config file.

Is your feature request related to a problem? Please describe.
I started using RTL when I set up my BTCpay server with lightning. I tried with a few payments and found the UI a bit confusing in terms of copy. The one thing that confused me the most was the fact that in RTL "Wallet" is a term used for on-chain wallet, which is not clear when you're in the Lightning context. This issue is a small proposal to rephrase that and make it more clear for users to understand what they're doing

Describe the solution you'd like
See here. This is how I would call each box:

Wallet Balance (On-chain)
Peers
Channel Balance (Lightning)
Chain Sync Status
Additional context
It took me a while to understand that RTL had also a on-chain set of features and my default place to look for the LN payments I collected was the Wallet.

https://github.com/ShahanaFarooqui/RTL/issues/179

A visual view of the graph to depict the route which a payment can take.
'Query Route' feature under the payments menu, is used to query the graph for the path which a payment can take, to a particular node.
This path can be shown in a visual graph to show the hops and the fee at each hop.

The settings page design needs to be reorganized to separate the RTL level and Node level settings.

Settings (RTL Level):

• Default node
• Add new node
• Authentication
• SSO Settings (optional config) [Cookie path, Logout redirect link]

Node Config (Node level):

• Fiat Currency conversion toggle
• Application layout
• Day/Night mode
• Color Themes
• Lightning server url
• Swap server url (optional)
• Swap service provider (future)

The current flow of opening a channel with a new peer is:

1. Connect with a peer.
2. Open channel with the peer.

This flow can be shortened for better UX, by handling peer connection in the background.

The dashboard should be persona driven.
The Routing Node Operator persona, should have the focus on following aspects:

1. On-Chain/Lightning Balances
2. Routing Fee Earned
3. Channel Statuses
4. Channel Capacity View

Objective:
Create visually insightful summary of routing fee earned on a monthly basis, which provides an overview of fee earned in each month and an ability to drill down to day level to view details.

Proposal:
Under the routing page, create a tab called "Monthly Summary" with the following features.

1. Three month overview at the top, with sats earned for each month.
2. Current month should be the default selection.
3. For the selected month, should a bar chart of fee earned for each day of the month.
4. Under the bar chart, a grid with all the records of the forwarding history, showing the details of all the forwards for the month
5. User should be able to navigate to this page from the dashboard also from the 'Routing Fee' menu.
6. Nice to have - Ability to click on a particular day on the chart and few the forwards for just that day.
   

https://github.com/ShahanaFarooqui/RTL/issues/189

Query Routes currently sits in Lightning -> Transactions but would be better suited to live within the Graph Lookups section.

Currently, user has to manually create and configure JSON file for node settings. It will be easier and error proof, if user can configure/update nodes through UI.

Similar to the monthly summary for routing fee earned, we can create a monthly summary of payments made and received.
#52

Design should follow the similar pattern:

1. For each month display the aggregate amount.
2. Display a bar chart for the daily payments made, for the selected month.
3. Show the payments records in two separate grids for the amts sent and received.
4. Default view should pull up the current month with an ability to select past months

If pending channel open transactions are stuck in mempool because of low fee rate set on the transactions, the channel can be in pending state for a long time. This pending channel open transaction can be accelerated by bumping up the fee of change output transaction, if there is a significant change output associated with the transaction. This is known as CPFP or Child Pays For Parent.
The process to bump the fee requires investigating the transaction in a block explorer to make a determination of the size-able balance and the index of the change output. Once the user knows the detail then they can input the index and the appropriate fee rate to bump up the fee
This process is elaborate and can be confusing, if all the steps are not followed in the right order. If we provide a visual 3-4 step guidance, it can help guides the users better.

The whole process should occur per the below steps:

1. Go to the Pending tab of the channels page and opens the Pending Open section and selects the Bump Fee action.
2. Copy the transaction ID from the Channel point on the modal and search for the transaction on a block explorer, to examine the change output.
3. Determine the change output balance and the index of the transaction. Usually if the channel point index is 1, change out is 0 and vice-versa. If there is no change output or the value is dust level, the transaction cannot be bumped up.
4. Enter the index value of the change output in the modal and the desired fee rate. Click on the Bump Fee button to attempt fee bump.
5. Examine the transaction again in the block explorer to ensure that change output is showing as spent and a new transaction is generated for the change output.