edge / wallet

We have quite a bit of horizontal screen real estate but the transaction hashes are shortened more than they need to be.

@adamkdean - Was about to make a similar issue, but more about a larger refactor of the tables in general. When I added the new StakesTable and StakesTableItem, I did it in a way to make the table more responsive and completely did away with the sliceString() function that's used in other tables, using just CSS in its place.

In the below video you'll see how the stakes table strings reduce to size and add an ellipsis wherever it overflows. Then the transaction table has either really short strings or wrapping into multiple lines, weird underlining, etc.

Anny's idea was to use the template of this stakes table and apply it to all other tables in Wallet and Explorer.

chrome_otGt0UnjPY.mp4

The main code that's responsible for this is here (could be a bit tidier, and maybe there are some redundant/repeated bits in there):

wallet/src/components/StakesTable.vue

Lines 110 to 112 in be9eae1

    
           table { 
        
             @apply w-full table-fixed 
        
           }

wallet/src/components/StakesTableItem.vue

Lines 129 to 135 in be9eae1

    
           td span { 
        
             @apply w-full overflow-ellipsis overflow-hidden whitespace-nowrap 
        
           } 
        
           td a { 
        
             @apply overflow-ellipsis overflow-hidden whitespace-nowrap 
        
           }

Sounds good to me

@feroviktor @adamkdean - I think I have already completed this work as part of another update when I went through and tidied up all the tables. Same goes for #224 which I think is a duplicate ticket.

@willgarrett64 if you get a moment today, could you look through the wallet and ensure that this was applied across the board? I'm sure I saw a shorter transaction hash on a swap a few weeks ago

@adamkdean - checked all pages/modals in Wallet and all seems fine. I am pretty sure I went through and did this all as part of separate work a little while back. Will close this issue now.

Are you sure the changes are live? Could you check on testnet at the very least to be sure?

…

On Thu, 21 Apr 2022 at 11:29, Will Garrett ***@***.***> wrote: @feroviktor <https://github.com/feroviktor> @adamkdean <https://github.com/adamkdean> - I think I have already completed this work as part of another update when I went through and tidied up all the tables. Same goes for #224 <#224> which I think is a duplicate ticket. — Reply to this email directly, view it on GitHub <#187 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMQIZ7D6RXFQCB2WKCOFRTVGEUYXANCNFSM5OFHTF3Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

@adamkdean - pretty sure yes.
These images are from TN. Before there was a strange manual truncation of values, regardless of screen width. The original issue was around this, that on wide screens, we still truncated values. I changed it to use CSS to truncate on text-overflow.

	td span {
	@apply w-full overflow-ellipsis overflow-hidden whitespace-nowrap
	}

	td a {
	@apply overflow-ellipsis overflow-hidden whitespace-nowrap
	}

Transaction links to be shortened less