Improve layout of transaction confirmation dialog #11606

The dialog currently looks like this (taken from #11556):

<img width="439" alt="32405190-8027db44-c160-11e7-84af-a137da9ea47d" src="https://user-images.githubusercontent.com/425166/32405638-95c0ff90-c169-11e7-8445-ec8676613c28.png">

The layout is quite messy, which makes it ahrd to see what's going on (and thus easy to overlook some problem). IMHO it would be a lot easier to comprehend if the information was structured like this:

Ack

On Nov 4, 2017 06:10, "flack" notifications@github.com wrote:

The dialog currently looks like this (taken from #11556 https://github.com/bitcoin/bitcoin/pull/11556):

[image: 32405190-8027db44-c160-11e7-84af-a137da9ea47d] https://user-images.githubusercontent.com/425166/32405638-95c0ff90-c169-11e7-8445-ec8676613c28.png

The layout is quite messy, which makes it ahrd to see what's going on (and thus easy to overlook some problem). IMHO it would be a lot easier to comprehend if the information was structured like this:

[image: dialog] https://user-images.githubusercontent.com/425166/32405650-cb5c592e-c169-11e7-8c25-d3d22601fa6a.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bitcoin/bitcoin/issues/11606, or mute the thread https://github.com/notifications/unsubscribe-auth/AGGmvxq2KM5nMWru42HcJ9B5mm8Ftp0cks5szGI4gaJpZM4QSAJC .

lgtm

Good improvement.

I woud leave out "added" and capitalize the first word.

To make it more clear that users pay per (v)byte, you could also change it to "Transaction fee for 0.168 kB".

Perhaps a separate change, but you could show the fee as a percentage, in small font under the fee.

Yes, I agree that "added" is superfluous and can be removed (also i made a little error when I copied your RBF text, so it's not intended to be different from what you proposed in #11556). I'm also wondering if the "= 1.08400 mBTC.." line shouldn't rather go in the right column (underneath the total sum), but those are details that can be worked out once someone actually codes this :-)

Based on the design of @flack, but with a few adjustments.

Feel free to create a pull request for this. I think we can fine tune the nits later, but the general design seems a good way to go.

@gmverdon what would it look like if you send to more than one address?

@flack that is a good one, haven't thought of that possibility yet. The solution you provided is indeed more elegant when sending to more than one address.

@flack @gmverdon - do either of you plan to open a PR for this?

If not, I suggest we close this as stale.

@jnewbery nah, I'm good. I was actually thinking about suggesting giving stuff like this a "good first issue" tag, because it's pretty self-contained and you don't need to know a lot about the code to work on it, but do whatever fits your workflow

Thanks @flack . Generally I think it's better to close out WIBNI issues rather than let them sit for months or years.

Could close with up for grabs

Can I pick this up?

@sugandhnow of course! @MarcoFalke @jnewbery 👍

Maybe this could be considered solved by https://github.com/bitcoin/bitcoin/commit/81c533c6f481ebf6a4f6349c05731306e3a2402f and closed? At least, until there are new specific demands/improvements to be made. It is somewhat a duplicate of the already closed #10613. :)

@marcoagner true, it actually is a duplicate of #10613, didn't see this one before :-)

Your version in #13158 is definitely a readability improvement, although I have to say that for me, the point of both tickets is more to get the numbers all aligned into one column, so that it's easier to check the math by adding them:

is way easier to manually check than

14.200101 to some address

Transaction fee (0.123 kB): 0.200010

Total Amount: 14.400111

I attempted to achieve that with a span style=float:left for the left column and a span style=float:right for the right column, but it appeared as if the style was ignored. Feel free to fix this up @flack or @marcoagner, but I think it is not worth keeping this issue open.

@MarcoFalke looks like float is only supported on tables and images according to http://doc.qt.io/archives/qt-4.8/richtext-html-subset.html#css-properties . If the individual lines were wrapped in p or div, align=right should work, although the cleanest version would probably be to convert the dialog to use <table>. At some point, I might try to implement this, but don't hold your breath :-) (also, I'm very happy if someone beats me to it!)

In my opinion, the alignment of numbers to the right side-by-side with addresses gets tricky if the addresses are not truncated and I don't think the addresses should be truncated here. But, in case anybody decides to work on this in the future, what @flack commented holds (same behavior qt5) and <table> will probably be the way to go.

If truncation is the issue (could be mitigated with a tooltip showing the full address if that's deemed acceptable), then an alternative might be something like this:

To: somereallyreallylongaddresswewanttoseecompletelywithoutanytruncation
                                                            14.20330393 BTC
Transaction fees (0.122 kB)
                                                             0.20000000 BTC
Total Amount:
                                                            14.40330393 BTC

The advantage is that this should be doable without tables, i.e. simply with <p> tags, the drawback is that it uses more vertical space