Scalable solution for displaying long account IDs

[Patrick1904]

We display account IDs throughout the Wallet app and our current UI is not always optimized for longer account IDs, resulting in suboptimal UX. This has become especially apparent after we introduced implicit account IDs (64 chars).

One solution that @corwinharrell came up with applies a max character count and adds an ellipsis in the middle, e.g. corwin2q7894343234234.poolv1.near --> corwin2....poolv1.near

A demo with a few variations can be found here: https://codesandbox.io/s/truncatedaccountid-v2-unstyled-ixvlg?file=/src/NearId.js

After starting to implement a version of the above solution I realized that there may not be one solution that fits all. I took some notes on different sections where we display the users account ID and my observations:

1. Top section of /profile

• Not seeing the full account ID anymore made me question the value of showing it. Also, this is my go-to whenever I want to quickly copy my account ID. I find it useful when disabling a recovery method, since we ask the user to confirm their account ID before doing so.

2. Mid section of /profile (profile details)

• May want to consider removing it all together since it's already displayed right above it. However, it feels more 'official' since other important account information is included in this section (balance).

3. /receive-money page

• It felt weird not seeing the full account ID on this page, especially since it's so important. I didn't feel confident about what I just copied. A tooltip on hover helps a little bit, but I see this as a bank account number.

4. /staking page account selector

• This might be rare, but my account and lockup account are very similar, and it wasn't immediately clear which account I had selected.

5. Top navigation (mobile and desktop)

• Here it looks quite nice. However, applying the same max character length makes it look a bit odd whenever there's plenty of space (mobile nav, etc). Max character count depending on location is confusing.

6. /recover-with-link page

• We should probably not apply any ellipsis here since you'd want to quickly confirm that it's the correct account.

7. Account dropdown on /sign and /login pages

• I didn't feel 100% confident about the account I selected in the dropdown. It also felt harder to distinguish between the available accounts

8. Additional accounts in the navigation dropdown

• I'm not so worried about selecting the wrong account so ellipsis is not an issue, but not as easy to distinguish between accounts (same as 7)

9. /create page below account ID input

• Should probably not apply ellipsis since it's important to see the full account ID.

It seems we're showing the users account ID quite a lot. Is it really useful for the user to constantly be reminded about it? It seems useful to show the account ID on the /profile (once) and /receive-money, though we might be able to combine these pages. The navbar account dropdown is obviously important (good place to apply the ellipsis).

Other than that, I think we can avoid showing the account ID. On staking for example, one alternative could be to say 'Account' and the lockup account says 'Lockup'. Probably more clear anyway. Not sure if it's useful to see the complete lockup account ID. I don't see a good reason to allow switching between accounts on /sign and /login, it feels unsafe.

In terms of /recover-with-link, I wonder if it's necessary to 'confirm' that you want to recover the account at all. In theory we could just log the user in when they click on the link. Personally I would prefer that but I'm not sure if there are any security concerns with that approach.

[Patrick1904]

@corwinharrell @kcole16 sorry for dumping this here, just had to put it somewhere. Maybe some of it can be useful as we consider the re-design for the Wallet.

My WIP branch for this is here in case you want to test it: 79aa1b8

[heycorwin]

Don't apologize! This is great. Love the attention to detail. Will reply once I get a chance to review 👍

[vgrichina]

I don't see a good reason to allow switching between accounts on /sign and /login, it feels unsafe.

@Patrick1904 agree that account should be switchable on /sign (but super important to see which account is signing).

For /login I am not sure your reasoning – how do I select which account to login with otherwise?