Short address on account screen and full address on transfer recap screen #337
Comments
Tbaut
changed the title
|
I'd also love to see a solution to not having to see the value of the 'To' field wrap around onto the next line that doesn't involve making it unreadable |
|
+1, that's probably for another issue though. I'd also like to have the identicon for the recipient. And address book.. /me going to create a bunch of longer term issues. |
|
For the short address that's clickable, we could animate a transition to display its full address on hover, and on blur animate a transition back to the short address |
|
@Tbaut On your proposed "Transaction recap" screen you've removed showing the available account balance of the token that the user wants to send, so they'd always have to remember what precisely what their available account balance is before they click a token to go to its "Send <TOKEN_NAME>" page, or alternatively they'd have to temporarily show it by pressing the "MAX" button to remind themselves (but they might not realise this initially)
|
|
@Tbaut Sorry my mistake, I re-read it again, the "Transaction recap" screen is the Unlock component screen where the user just enters their password (not the TxForm screen as I thought). |
…ount design * Change Account screen so its header uses the Information component with a big identicon, a short address, so it is clickable, and with identicon on left of name and address. * Apply extra bottom margin between name and account address when Information component used in the header * Update header so it uses Flexbox according to docs as intended * Since we're using Flexbox without placeholder spacing for the left and right header buttons, when the title is shown in the header it is offset if there is only a left or right button. So a `titleOffset` prop is used on pages where the Header component is used to indicate if the title needs to be offset to the left or right so it appears centered in the screen. We also pass a `screen` prop (named after the component where the Header component is being used so we can tailor the header spacing on specific screens. * Re-order props alphabetically * QUESTION - should we consider always adding placeholder spacing for where both right and left buttons in header would be as an alternative so no offset for the title is require?
* Create TokenAddress similar to TokenBalance but doesn't need balance info from @withbalance
* Create TokenAddress similar to TokenBalance but doesn't need balance info from @withbalance
…ount design * Change Account screen so its header uses the Information component with a big identicon, a short address, so it is clickable, and with identicon on left of name and address. * Apply extra bottom margin between name and account address when Information component used in the header * Update header so it uses Flexbox according to docs as intended * Since we're using Flexbox without placeholder spacing for the left and right header buttons, when the title is shown in the header it is offset if there is only a left or right button. So a `titleOffset` prop is used on pages where the Header component is used to indicate if the title needs to be offset to the left or right so it appears centered in the screen. We also pass a `screen` prop (named after the component where the Header component is being used so we can tailor the header spacing on specific screens. * Re-order props alphabetically * QUESTION - should we consider always adding placeholder spacing for where both right and left buttons in header would be as an alternative so no offset for the title is require?
feat: Relates to #337. Part 1 of 2 - Account view - Change header account design
…ddress feat: Relates to #337. Part 2 of 2 - Change Tx Recap Unlock design
|
Fixed 🎉 |
I think that we give too much importance to the account full address at the wrong place.
The address is shown in full on the account screen, but not on the transaction recap (!). Also the identicon is very small which doesn't look great for Signer accounts.
What I propose:
Account view:
We use the same presentation as the account list, short address, big identicon, and keep the address clickable to copy it.
Transaction recap:
We show the account with the identicon and the full address (today we have a useless account balance card):
The text was updated successfully, but these errors were encountered: