Display non-fungible token (NFT) standard attributes (per SIP 009)

[jasperjansz]

Design how to display collectibles. These have a unique identifier, are minted by a contract and can optionally contain the following metadata (per the SIP):

• Image
• Name
• Symbol

See SIP 009 stacksgov/sips#3

[jasperjansz]

@aulneau @hstove collectibles balance for review:

https://www.figma.com/file/8CaxP6TRWskoTO9cmlvX9M/%F0%9F%96%A5-Wallet-web?node-id=1584%3A28287

There's one version where metadata is available, like a human-readable name and an image. The other, with the gradient, is using data that should be available even without some standard or registry.

Here's how it looks in context: https://www.figma.com/file/8CaxP6TRWskoTO9cmlvX9M/%F0%9F%96%A5-Wallet-web?node-id=1585%3A31490

Let me know if there's anything I've missed or any general thoughts!

[hstove]

No major comments here, love it.

The auto-caps of "BNS" calls out to me as an implementation detail. How and when do we capitalize? Obviously we can hard-code the known contracts like .bns and .pox - do all other contract names follow title case? What if they have the phrase "stx" in them? This is also related the the transaction views.

For the generic fallback of "329 BOO" - BOO is an assumption that there is a ticker, when there may not be, right? Or, do we want to always have a fallback for a "ticker" that is generated from the asset name (as is done now, and looks a bit sloppy?).

Also for the generic fallback, is there some way we can more clearly identify "you have 329 of the nft defined at this contract"? It seems slightly confusing - for the standards we have the individual NFT title, but for the fallbacks we only have the quantity + nft name.

Generally I would love for us to come to hard guidance for the names we display. For example, the boom NFTs contract does not follow the trait, so we'd need to use the generic. How exactly does this translate into the design?

In the contract:

• Contract name = boom-nfts
• NFT name = boom

In the design:

• 329 = quantity you own, seems clear
• BOO = what?
• "Boom" = what?

For now, do these click off to nothing? They could click off to the contract page on the explorer, which is probably the best we can do right now.

[jasperjansz]

I've made a minor update to the fallback: https://www.figma.com/file/8CaxP6TRWskoTO9cmlvX9M/%F0%9F%96%A5-Wallet-web?node-id=1584%3A28287

It shows the ID (e.g. 329) or value, and as a subtitle the contract name. Let me know if that works.

As far as linking off, I don't think we have anywhere good to link off to, so I suggest we don't. We don't have pages on the Explorer for individual tokens or nft's, so the only place we could possibly link is the contract.

[whoabuddy]

Do we have a similar implementation planned for SIP-010 tokens?

MiamiCoin on mainnet: contract and token uri

CityCoins on testnet: contract and token uri

[aulneau]

Do we have a similar implementation planned for SIP-010 tokens?

MiamiCoin on mainnet: contract and token uri

CityCoins on testnet: contract and token uri

Once hirosystems/stacks-blockchain-api#576 lands, we'll be able to support SIP10 token meta data. If you need this faster, please comment on the PR and express your needs.

[markmhendrickson]

We plan to implement this enhancement once Hiro's new NFTs metadata service is available, probably in early Q1 https://github.com/hirosystems/token-metadata-service cc @rafaelcr

[markmhendrickson]

Beta release for service: hirosystems/token-metadata-api#62

[mica000]

@edu-stx

Designs for the NFT and Ordinals on the popup wallet:

• I adjusted the padding on the component to give a bit more breathing

https://www.figma.com/file/OSQocEEJnfcMkniEl8u3U8/%231483---Initial-Bitcoin-support?node-id=1182%3A63497&t=Shl5eSB4xRFAbQkH-4

---

For the full width wed wallet, designs are here: https://www.figma.com/file/OSQocEEJnfcMkniEl8u3U8/%231483---Initial-Bitcoin-support?node-id=1182%3A83910&t=Shl5eSB4xRFAbQkH-4

[fbwoolf]

It appears I am working on this as an enhancement to the bitcoin release, so I'm going to reassign it to myself.