-
Notifications
You must be signed in to change notification settings - Fork 120
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[LN] UI/UX improvements #2641
[LN] UI/UX improvements #2641
Conversation
fguisso
commented
Aug 27, 2020
- Use module css in all tabs pages
- add Inbound balance in the invoices tab
- add Outbound balance in the payments tab
- remove the total balance from channels tab
- add a progress bar in open channels to show the difference in Remote and Local balance(outbound/inbound individual balance)
- improve the wallet tab UI and backup UX
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking nice!
A few suggestions to improve the design:
Use the same color consistently for total, inbound and outbound bandwidth.
For example, in the "Channels" tab you show the local and remote balances in different colors. You should use the same (corresponding) colors on the max outbound/max inbound panels so that it's clear that the max inbound corresponds to the sum of remote balances and max outbound corresponds to the sum of local balances.
I don't think you need to show the Total Bandwidth in the "Invoices" and "Payments" tab (only the corresponding balance).
Hey @fguisso could you drop some screenshots of all the subviews. More insight to give some feedback on. |
@linnutee Let me finish this and I make a video with all subviews and their functionality. I'm in the last task. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Latest iteration is looking very nice :P
A few additional things I think would be worth modifying it here:
- Allow copying the node id in:
- The channel list page
- The payments page, after decoding an invoice
- The network page, after listing a node (that is, allow to copy the counterparty when listing a channel)
- On the query routes page (hops)
- Link the channel points in the network tab to the block explorer
|
||
const Route = ({ route }) => ( | ||
<div className={styles.route}> | ||
<span>Total amount</span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This (and the following labels) need to use the <T ...
elements.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually, I found two other nits.
* Update LN protos from dcrlnd * Improve UI/UX This change improve and adds some new elements like balances tiles, copyable nodeIDs, improve query nodes aentation and a new wallet page. * Add query routes actions in the network page.