search

johnnuy / ADAView

Cardano Simplified, cardano wallet viewer in realtime
MIT License
0 stars 0 forks source link

Asset Card Component #46

Open johnnuy opened 1 year ago

johnnuy commented 1 year ago

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:

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.

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 commented 1 year ago

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

johnnuy commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

Examples of the image squishing/stretching with various resolutions. image image image