Display type in tokens table

[csillag]

Now that we have two types of tokens, ERC-20 and ERC-721, it helps to show which is which in the tables.

Before	After
Token list horizontal	l
Token list vertical
Token dashboard
Account details

[github-actions]

Deployed to Cloudflare Pages

Latest commit:	3985b5b8cd17edabb2c006e507df37947653c759
Status:	✅ Deploy successful!
Preview URL:	https://b4c06e19.oasis-explorer.pages.dev

[csillag]

@donouwens what do you think?

[csillag]

We could also consider using some kind of icons instead of written text, if there were good icons for this. (Are there?)

[donouwens]

I'm very happy with how it looks already @csillag

I agree that icons would be nice, but I've struggled to come up with anything that's clearly identifiable at a glance (erc20 vs erc721), so I'd opt for having tags like this (not set on the colors yet but obviously each type would have its own color). Would that be okay for you?

[csillag]

@donouwens To be honest, I am not sure about our nomenclature here. Looking at Etherscan, they simply call the ERC-20 stuff "Tokens" and the ERC-721 and similar stuff "NFTs". (But then for the second category, they do show "type" in the table. Maybe what they are doing is not a bad idea?

But then this brings up the question, do we even want to have these two categories (tokens and NFTs) in the same table? If yes, let's just say "Tokens" and "NFTs" as the type? Or have two different tables? Does this also mean new routes and new pages?

So many possibilities.

In any case, I'm ok with colored tags, but I also would also consider adding "NFT" to the tags like this: NFT (ERC-721)

[lukaw3d]

My suggestion would be: same table for both, no type column, name = "Wrapped Rose" | "AI ROSE (NFT)". But then vertical view becomes "AI ROSE (AI ROSE) (NFT)"

[donouwens]

@csillag True, but that leaves us in a pickle further down the line when we add ERC-1155 to the list as these can be NFTs or fungible tokens. I think your final suggestion could work in which we combine the type and "NFT" or "Token", just not only "NFT" or "Token". I've updated the visual now.

We should keep everything combined in one table as we will add filtering options in the next iteration after public launch which should address that point.

@lukaw3d - but again if we add ERC-1155 to that mix we'd need to show more than just NFT or Token, right?

Still working through the colors btw..

[csillag]

My suggestion would be: same table for both, no type column, name = "Wrapped Rose" | "AI ROSE (NFT)". But then vertical view becomes "AI ROSE (AI ROSE) (NFT)"

Could the (NFT) added to the name be a tag like this?

And can we put the ERC-721 into the tooltip?

[csillag]

Tweaked the look according to the visuals Updated screenshots above.

[donouwens]

@csillag

1. Can we try it with the type not being bold, like in the visuals - there is a different font color, but the same weight within the pills.

2. The pills seem taller than the visuals (compare them to the verified pills - I used the same sizing for both)

3. Hopefully reducing the height would hopefully make them look better on mobile

[csillag]

Updated styling. I replaced the first 2 screenshot, but not the others.

[lukaw3d]

This is similar to TokenPills that wraps around mui's Chip.

We should choose more consistent names for "the background rounded label thing"

[csillag]

How about DogTag ?

[csillag]

(I mean for a common ancestor, with common sizing and fond settings, and then create or descendants from that, with consistent names, either Tag or Pill)