Update display of Tx amount, gas, fee, total. Sub-case: multisig tx proposal template.

[onvisions]

@CedrikNikita @smaroudas

Story: We need design update of the display of transaction Amount + Gas used cost + Fee = Total.

Acceptance criteria:

• implement the feature following design below. Recheck margins between elements and update where needed;
• implement the design for sub-case of multisig transaction proposal where user should see the Proposed transaction amount and fee + Proposal gas cost, fee and Total. See design below;
• Update the template for Multisig Tx Proposal details accordingly. See design below.

Design:

Send Funds flow:

.................................................................................

Multisig tx proposal:

Figma reference:

1. Send Funds Flow:

https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=32135-195480&t=4Ghuxw4IqUzgRRKi-0

2. Multisig Transaction Proposal, Review, Details:

https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=32135-202575&t=VkSNKnzv1XJGXQ1H-0

[smaroudasunicorn]

Screen Review Transaction Do we need to display 90504 @000000.....

Screen Transaction details

why do we say minus in the 10.10? I see it in other screens too.

Multisig Proposal Details

Maybe to change the wording of Proposal to Proposal Used gas cost (and the below labels) to something like Approval Gas Cost?

[onvisions]

@smaroudasunicorn 1. We don't need to but it shows how much gas is spent, at what price and what's the total cost of gas used for the transaction. So can be also presented in three different lines but it will take much more space (scrolling) and it won't make it much more readable IMO. However I can suggest an alternative version below. Or we can display only the Gas cost or may be remove just the gas price and display Gas used and Gas cost.

Alternative version comparison side by side:

2. -10.10 AE means the amount is going out of your wallet (being sent or spent). So it's deducted of your balance. It's an SPEND OUT transaction, fee, gas etc. The minus is a way of showing this without using red color or something like that.

On the contrary, when you are receiving some amount we show it in green (without plus sign because it makes everything more visually cluttered and "busy" and it's clear enough because of the color).

This visualization was suggested by me and Paolo. Implemented 2 years ago I think. Other wallets are using similar design approach such as:

[smaroudasunicorn]

I prefer the alternative about gas info, Regarding the -minus and colouring it makes sense IMO in the transaction list (along with the colours). In transaction details I am fine (although I believe just the number would be ok).

[onvisions]

@CedrikNikita Updated designs:

Send Flow:

Multisig FLow:

Figma reference:

Send Funds Flow: https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=32135-195480&t=4Ghuxw4IqUzgRRKi-0

Multisig Transaction Proposal, Review, Details: https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=32135-202575&t=VkSNKnzv1XJGXQ1H-0