search

penumbra-zone / web

Apache License 2.0
12 stars 15 forks source link

Tracking issue: Asset rendering should use `DenomMetadata` #392

Closed hdevalence closed 7 months ago

hdevalence commented 7 months ago

Asset rendering needs to use a ticker symbol and logo defined in the DenomMetadata, so that we are set up to display interchain assets. The current mechanism doesn't work for any except hardcoded assets. Making this work correctly exposes various issues that need fixing.

turbocrime commented 7 months ago

all icons together are only about 150mb, and we could significantly reduce that with small effort. it might be reasonable to simply bundle the complete assetlist with icons.

icons also could be served as web-accessible resources for the convenience of connected apps, or transferred over rpc as blobs.

hdevalence commented 7 months ago

How big are the individual icons? My thought was that if we add a field to the DenomMetadata to include the icon blob, then we could have the view server hand them out inline in the transaction views. Downside is that this is a bit bloaty but the upside is that it gives frontends a way to render icons without making any requests.

Or can extensions serve content to pages in a way that a page could ref in eg img src=... ?

hdevalence commented 7 months ago

it would be helpful to have some stats on the distribution of icon sizes in the asset registry repo

grod220 commented 7 months ago

With assistance from ChatGPT

The repo where everyone sources the icons: https://github.com/cosmos/chain-registry

find . -type f \( -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.png' -o -iname '*.gif' -o -iname '*.bmp' -o -iname '*.tiff' -o -iname '*.svg' \) -exec du -k {} + | awk -F "\t" '{ n = split($2,a,"."); ext = tolower(a[n]); total[ext]+=$1; files[ext]++ } END { for (ext in files) printf "Average size of .%s files: %.2f KB\n", ext, total[ext]/files[ext] }'

Average size of .svg files: 171.29 KB
Average size of .png files: 94.53 KB
find . -type f \( -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.png' -o -iname '*.gif' -o -iname '*.bmp' -o -iname '*.tiff' -o -iname '*.svg' \) -exec du -k {} + | awk -F "\t" '{ n = split($2,a,"."); ext = tolower(a[n]); total[ext]+=$1; } END { for (ext in total) printf "Total size of .%s files: %.2f MB\n", ext, total[ext]/1024 }'

Total size of all .svg files: 82.46 MB
Total size of all .png files: 71.82 MB

Or can extensions serve content to pages in a way that a page could ref in eg img src=... ?

Yes, we can expose "web accessible resources" for those assets if we copy them all over to our extension bundle.

hdevalence commented 7 months ago

What do those URIs look like? Just wondering what our options are for specifying them in DenomMetadata

grod220 commented 7 months ago

Examples:

https://raw.githubusercontent.com/cosmos/chain-registry/master/axelar/images/usdc.svg
https://raw.githubusercontent.com/cosmos/chain-registry/master/celestia/images/celestia.svg
https://raw.githubusercontent.com/cosmos/chain-registry/master/cronos/images/cro.svg
https://raw.githubusercontent.com/cosmos/chain-registry/master/dydx/images/dydx.svg
https://raw.githubusercontent.com/cosmos/chain-registry/master/mars/images/mars-token.svg

There are not hard rules to how these are named/stored in the repo. Though, they generally follow

main:
<chain>/images/<chain>.<svg or png>

variants:
<chain>/images/<chain>-<variant>.<svg or png>
turbocrime commented 7 months ago

experimenting with imagemagick and inkscape last night, i squished everything down to about 12mb for 892 icons, at a larger size than we use (arbitrarily omitting testnets and the few icons that failed to convert)

we only use 20x20 icons, so i think 100x100 is overkill, and some dozens of icons in the repo are not even that large

turbocrime commented 7 months ago

for reference there are 123 testnet icons, and about 1.2k total icons in the repo, so i cut about a third of the icons. a smaller fraction have multiple themed variants, and we could pick a canonical variant or provide all.

theoretically there may be some deduplicated svg eliminated by a pitifully undersized png, but i didn't check.

turbocrime commented 7 months ago

also, since svg can include javascript and external refs, we should absolutely not bundle svg icons.

grod220 commented 7 months ago

In general, it's nicer to use vector images given they scale well. If we feel a bad actor could inject malicious code into the cosmos registry's svgs we could sanitize them prior to storing.

hdevalence commented 7 months ago

Examples:

https://raw.githubusercontent.com/cosmos/chain-registry/master/axelar/images/usdc.svg
https://raw.githubusercontent.com/cosmos/chain-registry/master/celestia/images/celestia.svg
https://raw.githubusercontent.com/cosmos/chain-registry/master/cronos/images/cro.svg
https://raw.githubusercontent.com/cosmos/chain-registry/master/dydx/images/dydx.svg
https://raw.githubusercontent.com/cosmos/chain-registry/master/mars/images/mars-token.svg

Sorry, I meant the URIs for the "web accessible resources", we shouldn't use these URIs as is because they load data over the network. What do those URIs look like?

turbocrime commented 7 months ago

we aren't currently exposing icons as web-accessible resources but if we did it might end up being something like

chrome-extension://lkpmkhpnhknhmibgnmmhdhgdilepfghe/chain-registry/master/axelar/images/usdc.svg

etc

hdevalence commented 7 months ago

Cool. I'm not super worried about icon size since we probably don't need to import every single asset. Even if we did it pales in comparison to the size of the proving parameters.

hdevalence commented 7 months ago

I think it makes sense to split this out into sub-issues. In the meantime https://github.com/penumbra-zone/penumbra/pull/3702 allows including image URIs in DenomMetadata.