lightninglabs / lightning-terminal Goto Github PK

Steps to Reproduce

Go through the Lightning Terminal walkthrough steps 1 - 3

Expected Behavior

Network should remain consistent throughout walkthrough

Actual Behavior

Network in walkthrough changes from testnet to regtest on 3rd step

The native javascript number type only supports values up to 2^53. We will need to properly handle larger values that may be returned from the LND and Loop APIs. Firefox & Chrome already support a new W3C data type BigInt, but Safari does not. Using BigInt would only make the app compatible with ~70% of the browsers being used on the market today.

We will need to use a third-party library to support more browsers. Google created JSBI which can be used in ll browsers today, then later transpiled into native BigInt once it has more widespread adoption.

Looks like the highlighting was a bit off-center here. Also, for the numbers "2 of 24" the monospace font looks a bit out of place. Also, perhaps if both the highlighting and the pop-up text box had the corners rounded very slightly, that might look a bit cleaner, since the other boxes have rounded corners.

This is for for the actual UI, but I think "UP TIME" should be "UPTIME".

If my browser window isn't wide enough, the highighted box isn't visible on the right side. Probably not a huge problem if it's a pain to fix.

I think this should come more toward the end of the walkthrough.

For nodes with many channels, it would be beneficial to be able to filter the channel list by the peer's pubkey or alias. This feature would allow the operator to focus their attention on a single peer.

Add a CI workflow using GitHub Actions

Create the page to display the history of all completed loops performed in the past.

Add ability for the app to receive real-time updates from the server for channels and swaps

When performing a Loop, the highlighted "Loop In" or "Loop Out" button should be decided based on which channels are chosen. If the channels have a low receive balance, then "Loop Out" should be highlighted. If the channels have a high receive balance, then "Loop In" should be highlighted.

https://storybook.js.org/

Today in the network, it's possible to open up many channels to a single node. As a result, if a loop is initiated that ends up traversing that node, we don't have direct control over which channel is used, since the end node is able to select which channel it wants to use. Therefore any operations which select one channel (out of many) for a single node, should also grow to select all the other channels for that node.

There're a few ways to do this, and this may require another brief UI iteration. One idea that pops into mind is to collapse (group) all channels belonging to a target node in the UI. This grouped channel would appears as though it's a single channel, as we would sum up all balance information for that groups of channels.

Currently, the "Max" Loop size seems to be set at the max allowed by Loop in general (10M sats), rather than the max for the selected channels. (Screenshot attached.) It should dynamically adjust (so that in the screenshot attached, the max should be around 195k).

After initiating a swap, if any channels were selected then there should be some indication of that so that users do not mistakenly perform multiple swaps on the same channels.

Add Tooltips on specific parts of the UI to help the user understand what certain information means.

Add popup toasts to display error messages.

In the channel list, LiT currently only displays a small subset of information about each one. It would be beneficial to display more information on a specific channel when clicked. This could be displayed as a modal, expandable row, or viewed in the top panel.

Additional details could include funding transaction id and date, send/receive totals, base fee rate, time lock, reserve amounts.

Users should have the ability to manually sort the channel and history lists.

LiT currently sorts channels by the status of the channel balances, based on the Channel Balance Mode configured in the settings. Occasionally, you may want to sort by the other columns in the list.

The Loop history list is currently sorted by the swap's UpdatedDate descending. This also should allow manually changing the sort order.

In some cases, it is possible to adjust the balance of two channels using a circular rebalance. With this operation, funds are sent over the lightning network from the node back to itself, except the outgoing and incoming channels are specified in the route. This reduces the local balance on the outgoing channel and increases the local balance on the incoming channel. It is not always feasible to use this approach since you need sufficient balances on two channels in the opposite direction, but should this scenario arise, the circular rebalance will usually be an inexpensive solution.

Lit currently does not have this capability, but it would be a great additional tool for operators to manage their node's liquidity.

The app currently requires proto to be pre-compiled. This compilation process generates TS/JS code that is not valid and needs some tweaking. I currently do this manually, but it should be automated.

Changes:

• add var proto = { lnrpc: {} }; to the top of lnd_pb.js
• add var proto = { looprpc: {} }; to the top of loop_pb.js
• add var proto = { google: { api: {} } }; to the top of annotation_pb.js
• add var proto = { google: { api: {} } }; to the top of http_pb.js

Alternatively, I would like to do some further research into protobufjs to see if our usage of proto files can be improved even further.

When in Lightning-Terminal, performing loop out with automatic channel selection with any amount of sats gives the following error:

Unable to perform Loop Out
2: cannot initiate swap: rpc error: code = OutOfRange desc = amount above current maximum

What is the current maximum per the error? Thank you.

The visible page is currently being stored in mobx state. It would be better to use URL based routing so that the browser's back/forward buttons can also be used to navigate the site.

Create a Settings page

• change the units displayed throughout the app (sats, BTC)
• change the channel colors (send-optimized, receive-optimized, routing mode)

With the addition of configurable HTLC expiry into Loop client, should get this into the UI at some point.

Use debug

Implement the Loop In & Loop Out flows

1. Click the Loop button
2. Select one or more channels
3. Click Loop In or Loop Out
4. Display the Quote and summary
5. Implement "Slide to Pay" slider
6. Display loader

Ideally, in the UI, there would be a some kind of indicator that would show whether the UI was running on testnet or mainnet. In our older App, we used "tBTC" as the balance label for testnet. Not sure if that solution would work for the Loop UI as well.

On my screen size/resolution, the size of the font in the menu looks to be quite a bit smaller than the font size for the main pane. The menu font size actually looks more natural/comparable to other apps. Screenshot attached. I'm not sure what the right solution is.

Add support for Lottie animations which can be used throughout the app.

The first animation to add is in the loop process. Lee suggested using this loading animation for now until he creates the final one, just so I can get the configuration setup.

There are a bunch of small fixes that need to be made but aren't big enough to warrant their own individual PRs. So these will be batched together into one cleanup PR.

• update loading icon colors to white & gray
• don't force channel selection when starting a loop
• fix navbar menu icon overlap with page header back arrow
• add message in Loop History when there are no past swaps
• prevent Loop In when multiple channels are selected
• pass channel ids to Loop Out RPC request
• fix findDOMNode console error (react-virtualized)
• set swap speed based on GetInfo 'chain' field. 30mins for mainnet, immediate for regtest
• refactor common components dir into shared and common

Perhaps should note that Chrome doesn't allow accessing sites with self-signed certificates. I was able to access the UI with Safari after clicking through some of the warnings. I didn't see a way to do this with Chrome.

Add the storybook a11y plugin to surface accessibility issues within our app. https://github.com/storybookjs/storybook/tree/next/addons/a11y

Depending on the exact configuration a user is using, it may be the case that after the UI is up, and the user has logged in, the backend is still syncing to the latest tip of the blockchain. In this scenario, certain lnd RPCs won't be available as we only fully start the RPC server once we know the backend is fully synced to the chain.

This has two implications:

1. We should show sync progress in the UI, and gray out certain actions until the backend has been synced.
2. We may want to wait off on starting the loopd portion of the binary (if it's running locally), as a recent change to lnd 0.10.1, makes the ChainNotifier RPC server no longer start up if the chain is still being synced.

Add the Node Status section at the top of the navigation links in the sidebar

Currently, LiT can only use the internal LND, Loop & Faraday nodes. It would be beneficial for some users who already have operational nodes to be able to connect to them. This would support a mix of internal & external nodes based on the user's preference and existing infrastructure.

This would allow easily checking out terminal without messing with the conf file, and easily go back to lnd proper when checking is done.

If I collapse my window size to something small, the various text/graphic items collide into each other. Screenshot attached. I think it might be better if there were a fixed minimum window size with scrollbars that would appear if the browser window is shrunk to below that size. Another option would be to make things responsive, but I think it might be complex to account for many possible options. The menu on the left could possibly collapse in a responsive design.

Refactor mobx state into multiple stores and use TS classes to represent the data we store in those stores. Some best practices are detailed at https://mobx.js.org/best/store.html

LiT currently does not display any of the Faraday accounting information in the UI. It would be beneficial to present these reports and also allow downloading of the generated CSV files.

Add a section at the top to display the current loops processing.

Use the react-i18next package to support additional languages

Elizabeth suggested we experiment to see if "Sats" looks better in the amounts label than "sats". In the previous App, we also used "SAT" which could be an option. I don't remember why we ended up with the capitalized SAT last time. Maybe @Roasbeef or @leegordo remember?

In the channel list on the Loop page, round the fee values to two decimal places instead of the current four. Values such as the LND default 1ppm are insignificantly small and are essentially zero. Maybe display the raw value in a tooltip.

When maximizing the Loop History tile when there are no Loops currently processing, you hit a dead end. We should direct the user to view their full list of all past Loops on the History page. "Loop History" should probably be named "Recent Loops" instead to be more clear.

Steps to Reproduce

Click on Maximize button for Loop History

Expected Behavior

Clicking on Maximize button will give me more information about the past loops I’ve performed

Actual Behavior

The Maximize button expands a window that seems unrelated to Loop History

Implement downloading the CSV of open channels and loop history

Create the table/list displaying all of the channels and their stats

Add initial site layout component with a sidebar navigation

Receiving an error when trying to run loop.

loopd is not running.

litd UI seems to process swaps correctly.

bitcoin@ln-bitcoin:~$ loop terms
Loop Out
--------
rpc error: code = Unavailable desc = all SubConns are in TransientFailure, latest connection error: connection error: desc = "transport: Error while dialing dial tcp 127.0.0.1:11010: connect: connection refused"

Loop In
------
rpc error: code = Unavailable desc = all SubConns are in TransientFailure, latest connection error: connection error: desc = "transport: Error while dialing dial tcp 127.0.0.1:11010: connect: connection refused"

# lnd.conf

[Application Options]
httpslisten=0.0.0.0:4567
uipassword=123

lnd.debuglevel=info
lnd.maxpendingchannels=10
lnd.externalip=example.com
lnd.alias=LNBitcoin
lnd.color=#4169e1
lnd.rpclisten=0.0.0.0:10009
lnd.tlsextraip=10.0.0.86
lnd.tlsextraip=10.0.2.222

lnd.bitcoin.active=1
lnd.bitcoin.mainnet=1
lnd.bitcoin.node=bitcoind

lnd.bitcoind.rpcuser=123
lnd.bitcoind.rpcpass=123
lnd.bitcoind.zmqpubrawblock=tcp://127.0.0.1:28332
lnd.bitcoind.zmqpubrawtx=tcp://127.0.0.1:28333

faraday.min_monitored=48h

An important aspect of managing an LND node's liquidity is to open and close channels. LiT currently does not support these operations and it would be great to implement them.

It looks like the app level config args (httpslisten, uipassword, letsencrypt) that are stored in the config file are not used. I have to provide them as command line args only. If I put httpslisten=0.0.0.0:9443 in my lnd.conf file, the server will still listen on the default port.

2020-06-09 23:14:40.734 [INF] GRUB: Listening for http_tls on: 127.0.0.1:8443

I tested with the other flags as well.

I'm ok if these flags can only be passed in through the command line, but if this is intentional then I just need to update the README to make this clear. Right now, the readme isn't accurate.

cc: @bryanvu @Roasbeef @guggero

These were initially left out of the channel list component because they require additional API calls to fetch and calculate their values. They should be added to the list after research into how to avoid making 1 additional API request for each channel.

Create the Lightning Loop screen and add 3 tiles:

• Loop History
• Total Inbound Liquidity
• Total Outbound Liquidity

The fonts, colors, typography needs to be updated to use the final style guide provided by Lee.