Asset Card Component

[johnnuy]

Construct an Asset Card Component that can be reused across transaction events (minting, burning), sending/receiving assets on the transaction details. The Asset card should be similar to the stakepool card, in that it uses a flex grid layout for responsiveness.

Each asset contains the following fields:

• Name
• Policy
• Fingerprint (this is like the unique id for an asset)
• Total Supply

Assets contain optional Metadata that describes the asset. Unfortunately the optional metadata is schemaless and can contain almost anything. However there are some key characteristics we need to verify.

• Image - This is the main image associated with the token, in general this will be a web url, or an IPFS identifier.
  • Ipfs Identifiers may need to be translated into a URL.
    • ipfs://ipfs/QmXc7RbxHrTg7KumsMS2BrZjk7aKCbG7hRDKpAG5ZX86oT =>https://ipfs.io/ipfs/QmXc7RbxHrTg7KumsMS2BrZjk7aKCbG7hRDKpAG5ZX86oT
    • ipfs://QmXc7RbxHrTg7KumsMS2BrZjk7aKCbG7hRDKpAG5ZX86oT =>https://ipfs.io/ipfs/QmXc7RbxHrTg7KumsMS2BrZjk7aKCbG7hRDKpAG5ZX86oT
  • Arweave identifiers may need to be translated
    • ar://bTYB-gK-DLKO1roap6-ZR-jR5P3UA-6RxR3o4ndDVCk => https://arweave.net/bTYB-gK-DLKO1roap6-ZR-jR5P3UA-6RxR3o4ndDVCk
  • will need to do some analysis on schemaless metadata to determine where the image keys are most often found.
• Attributes - Often times an NFT will contain attributes (rarity, etc) and there should be an attributes section of the card.
  • again will need to do some analysis on the schemaless metadata to determine how to get the attributes

Might look at doing some of this translation work on the serverside so the API returns standard values so we don't need this logic in the UI. For example adding a specific image attribute to the json response. Will do some analysis on this.

A couple options for using the card on the wallet view.

1. Could add a drill down from the Asset Holdings table when you click on a row to bring up the details for the asset holding (including asset card)
2. Modify the asset holdings from a table to a gallery of asset cards. (I prefer this option)

Sample wallet with assets: stake1uylw5ges065hhcexl7vyc8fgpeqpdja9mqlmpxp4fr6lmvsqn9m47

[lefebvk]

@johnnuy Do we have a default image that should be displayed for cases when the assets image is unable to be parsed?

[johnnuy]

@lefebvk I'm working on adding an imageUrl attribute to the Asset json model. If I am unable to determine an image url from the asset metadata then I will be setting this value to a default url supplied by our CDN, which will have the following format:

https://cdn-dev.canadastakes.ca//tokens//logo.png

where network is {testnet, preview, preprod, mainnet) and fingerprint is the asset fingerprint. This endpoint on the CDN is available on the cdn-dev only at the moment.

working example with the default image:
https://cdn-dev.canadastakes.ca/preview/tokens/asset1tvh6cs0q40l6nlgf8a52les0jg94gzfuvl2e7q/logo.png

One thing to note, there is no standard image size or ratio (4:3, 16:9, etc), so hopefully there's a way you can set a fixed width on them, and then the browser (or a js lib) can auto scale them to keep them from displaying large...

I'm hoping to have the updated Asset model done this week. Additionally i've added some new fields for registered tokens that I will be posting at the same time. Registered tokens, are assets that have been registered with the cardano token registry and have a couple additional elements to their name. Generally these are fungible tokens that act as separate currencies on the cardano network, such as World Mobile Tokens.

[johnnuy]

The asset metadata is just unbelievably diverse with no real standards, so might need to have some sort of a generic bucket that can show a range from 1 to in some cases 50 different key/value pairs that are associated with a given asset. I'm hoping you won't have to actually parse the metadata, and you can maybe display it in like a tree structure or something? because some of the metadata attributes are objects themselves.

[johnnuy]

@lefebvk
Adding 3 new fields to the asset response that are derived from the metadata. Not yet available, will update this when available. Rebuilding the hydrations right now for the data.

contentUrl --> fully qualified url translation of the asset content
contentType --> mime type of the asset content
contentData --> when the asset content is on chain, instead of offchain at a url, this is generally an embedded image format.

There will always be at least one of {contentUrl, contentData}. There could be both. if contentData is available, this is onchain data and should take precedence. The url will be from onchain data, or will be a default image from the CDN. You shouldn't have to parse the metadata to get the URL now. There certainly are gobs of garbage on chain, so I will be able to over time add additional logic to help parse metadata, but for now it appears to be about 95% of assets have a contentUrl.

One thing is I can't guarantee the onchain content url's are valid. I will be looking at potentially validating all of the asset content URL's and downloading associated image data to the CDN so that all contentURL will load from our CDN, but that process is likely to be slow when validating/downloading 8m+ assets, so I will need to determine a systematic way to do that, also one that minimizes storach needs.

** note this will be for dev api's for the moment only

[johnnuy]

The following wallet currently has an Asset with onchain content rather than offchain content
https://api-dev.canadastakes.ca/mainnet/api/wallets/stake1u8lf2avlhd3zvu4jzymrxnm2yew90euqz46nkt2ewmg4xdsqxg3hl/assets/asset100065rx7jxjxrkq362npyglyure0c8wltkz4wy

[johnnuy]

Can the grid be modified so that it goes as up to 6 cols x 2 rows for ultrawide?

Can you remove the fingerprint from the initial grid, it's on the drilldown and looks odd there.

Registered tokens have additional information such as precision which should be used to display the quantity. Such as
https://api-dev.canadastakes.ca/mainnet/api/wallets/stake1uylw5ges065hhcexl7vyc8fgpeqpdja9mqlmpxp4fr6lmvsqn9m47/assets/asset105nh988tzzzk3duk6relug69td98ja3nl3uv2c

where supply and quantity should be divided by 1,000,000. displayed similar to ada values which are 6 decimals precision also.

[johnnuy]

@lefebvk
when the precision is availble for a registered token, the value should be divided by 10^p where p is the precision.
So for example with precision 6 take the value and divide by 1,000,000.

so 16,878,000 with precision 6 would display as 16.878

this is similar to ADA which is really lovelace with a precision of 6.

[johnnuy]

Examples of the image squishing/stretching with various resolutions.