feat: add nonce indicator on pending transactions when viewing an address (#622)

[linden]

Adds a indicator next to pending transactions, reasons detailed here (#622).

[linden]

I've got 3 options for how this could be displayed:

A:

Simple, although looks awkward when compared to non-pending transactions.

B:

Easy to associate with a pending transaction.

C:

Blends in, would need to add some sort of hover-over description.

Any feedback on what looks the best?

[kyranjamie]

Great stuff, thanks for the contribution. Def C with a tooltip. Maybe the number styleized as e.g. 17n? 🤔

[314159265359879]

Thanks for picking this up @linden here are my thoughts:

A is most descriptive, but I like C most because it is least noticeable and I think that is fine in most cases. I think it is clever to put in a line we were already using as to not increase the height required per item shown.

What about C including the word nonce?
Pending - 0xa31d...f886 - nonce: 14

[314159265359879]

What Kyran says even better 14n, the hover will do the rest.

[fbwoolf]

Great stuff, thanks for the contribution. Def C with a tooltip. Maybe the number styleized as e.g. 17n? 🤔

I like this idea bc on the home page there is limited space across. I don't think spelling out nonce is necessary? I would say C is best and add the n

[linden]

Thanks for the feedback! Here's what it looks like with the tooltip and the n.

explorer.nonce.mov

[314159265359879]

LGTM

[Hero-Gamer]

Great stuff, thanks for the contribution. Def C with a tooltip. Maybe the number styleized as e.g. 17n? 🤔

I like this idea bc on the home page there is limited space across. I don't think spelling out nonce is necessary? I would say C is best and add the n

I'll speak from users perspective if I may?

as much as I like "n"
I think spelled out "Nonce" is easier for the less advanced users, which there are a lot across the ecosystem. One less thing for us having to explain. There should be plenty of space on the page (majority uses desktop to access Explorer)

I'd also like to suggest add "Fees" to the Explorer. Both Explorer and Hiro wallet if possible.
Sorry!

I've made the comment on separate issues:
#622
leather-io/extension#2129

[landitus]

Even though I see good points for making the nonce more discoverable for new users, I'm thinking it's best to keep the line items as simple as possible given they repeat multiple times. Right now, each information doesn't have a label, which is a good decision to avoid repeating text and crowding the interface.

Having the tooltip as shown here should do the trick now.

For adding more information, such as fees, it will be more challenging (since there are no labels to explain what each piece of information means). I think then it may be time to review the line item's design a bit further.

[andresgalante]

@He1DAr Fernando is ok with the design, let's move on to a code review please

[He1DAr]

LGTM! left a couple of small comments. Could you resolve CI issues?

[linden]

Looks ready to me, anything else needed @He1DAr?

[blockstack-devops]

🎉 This issue has been resolved in version 1.20.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[314159265359879]

This is brilliant, I love it!
Makes it so much easier to troubleshoot nonce issues.