Display Coin Icons Next to Listings

[hoffmabc]

Would be good to show the icons from each coin next to it if there is one so that listings can be differentiated. I believe these are available from Coinmarketcap as well.

[morebrownies]

Agreed. New designs now have coin icons included.

[rmisio]

Hmm... there's some things to consider with this. I'm not aware of cmc exposing this icon in their API. I doubt they want to serve as an icon static image provider.

Which means we'd probably need to obtain the icons ourselves (manually) and store them locally in the client. That would be whole lot of work if we implement 1500+ coins from CMC. (plus it would also add some bloat to the app, especially since we would need to have 2x sized icons to account for retina displays and potentially bigger sized ones if we ever want to display them larger than icon size somewhere in the UI).

@morebrownies Would you want to take on the task of creating 1500+ image files?

At the very least, we would need to consider the case where an icon is not available (do we show nothing or a generic icon).

[BazaarDog]

At 64x64 the 1500 icons weigh in at 9.8MB, so 32x32 would be ~2.4MB

[rmisio]

At 64x64 the 1500 icons weigh in at 9.8MB, so 32x32 would be ~2.4MB

Well, if we're displaying it as 32X32 in the app, we'd need the 64X64 option to satisfy retina displays.

In any case, the extra bloat was the more minor concern for me. The bigger one is someone having to manually create and image file for each coin.

[hoffmabc]

https://github.com/OB1Company/openbazaar.com/tree/update-homepage/assets/img/coins @rmisio

[hoffmabc]

There's 64x64 and 128x128

[hoffmabc]

I also just created a conversion function from symbol to icon name if you want to leverage or ignore, up to you.

function coin_to_icon($coin) {
    $coin_matching_dict = array(
        "ADA"=> "cardano",
        "ARK"=> "ark",
        "BCH"=> "bitcoin-cash",
        "BCN"=> "bytecoin",
        "BTC"=> "bitcoin",
        "BTCD"=> "bitcoindark",
        "BTG"=> "bitcoin-gold",
        "BTS"=> "bitshares",
        "DASH"=> "dash",
        "DCR"=> "decred",
        "DGB"=> "digibyte",
        "DOGE"=> "dogecoin",
        "ETC"=> "ethereum-classic",
        "ETH"=> "ethereum",
        "FCT"=> "factom",
        "HSR"=> "hshare",
        "IOTA"=> "iota",
        "KMD"=> "komodo",
        "LSK"=> "lisk",
        "LTC"=> "litecoin",
        "MONA"=> "monacoin",
        "NANO"=> "nano",
        "NEBL"=> "neblio",
        "NEO"=> "neo",
        "NXS"=> "nexus",
        "NXT"=> "nxt",
        "PIVX"=> "pivx",
        "QTUM"=> "qtum",
        "RDD"=> "reddcoin",
        "SC"=> "siacoin",
        "STEEM"=> "steem",
        "STRAT"=> "stratis",
        "SYS"=> "syscoin",
        "VEN"=> "vechain",
        "WAVES"=> "waves",
        "XDN"=> "digitalnote",
        "XEM"=> "nem",
        "XLM"=> "stellar",
        "XMR"=> "monero",
        "XRP"=> "ripple",
        "XVC"=> "vcash",
        "XVG"=> "verge",
        "ZCL"=> "zclassic",
        "ZEC"=> "zcash"
    );
    return $coin_matching_dict[$coin];
}

[hoffmabc]

That's just for the coins we already support. But I plan on updating it for all of them soon.

[rmisio]

@hoffmabc Can you add me to the openbazaar.com repo?

[BazaarDog]

import json
import urllib.request

coin_url = "https://s2.coinmarketcap.com/generated/search/quick_search.json"
coin_data = urllib.request.urlopen(coin_url).read()
coins = json.loads(coin_data.decode('utf-8'))

def download_icon(index, symbol, size):
     filename = symbol + '.png'
     url = "https://s2.coinmarketcap.com/static/img/coins/{}x{}/{}.png".format(size, size, index)
     urllib.request.urlretrieve(url, filename)

for c in coins[:10]:
  print('Downloading :'+ c['symbol'])
  download_icon(c['id'],c['symbol'],32)

[morebrownies]

@morebrownies Would you want to take on the task of creating 1500+ image files?

No thank you. :) I agree with script approach. No reason we need to gather all of these icons manually.

At the very least, we would need to consider the case where an icon is not available (do we show nothing or a generic icon).

A grey circle with a question mark would probably be good enough.

[hoffmabc]

Well one issue would be that you don't agree with the icon. We currently use green BCH icons so we will need to refactor those all out. Also if CMC if ever changes the API we will not be notified and have to repair that issue. Also hitting other endpoints may give them information regarding usage of OB (if we care).

[morebrownies]

I'm fine with using whatever CMC provides as far as icons go. Much better than trying to manage it all internally. They probably have a small team working only on icon management at this point.

[rmisio]

@morebrownies @hoffmabc Can one of you give some details on where specifically in the UI you want this icon to be. Are we talking about in the drop down where you select the coin type? Anywhere beyond that?

[hoffmabc]

EVERYWHERE~ JK. @morebrownies is updating the designs to account for this. I'll defer to him.

[morebrownies]

Yeah I'm working on new designs that incorporate the icons in all major sections: Discover, Listing detail, Checkout, Transactions.

I'll share them out tomorrow.

[BazaarDog]

Can I just point out that all clients should have access to a sizable and highly distributed content distribution network for static files. And perhaps distributing the IPFS hashes rather than actual icons might be better in the long run, particularly as the native mobile apps roll out.

Also, if all a client needs to add a new coin is the icon, symbol and CMC endpoint slug, perhaps there should be a little UI to add a coin on the fly, rather than wait for a release.

There is going to be an endless churn of coins that are being added and removed,

[jjeffryes]

What would be the benefit of putting icons on IPFS instead of storing them in the client? Being able to load assets without a network request and the delay that goes with it seems like a compelling advantage to me.

Our current plan is to offer a defined list of coins from our own currency API, so we can add or change the sources for that data whenever we want, and so we can avoid problems with coins that have duplicate currency codes, which is invalid data for us.

Adding a new coin will just be a matter of adding it to our currency endpoint, the client will pick it up automatically. That may include downloading icons for coins we don't have saved locally yet, or just showing the default icon until the next release.

[BazaarDog]

A standard OB1 crypto API will save a lot of headache. There are a lot of nasty issues with different symbols across different sites.

I feel like there are several billion people with older or low-end android devices on 3G networks. I think adding 1600+ retina icons to the app would negatively affect that experience; while having them included in the package wouldn't noticeably impact desktop users with fast internet.

Most of the icons and images are loaded over IPFS now and it's relatively fine.

[jjeffryes]

We're only talking about the desktop app here. How we do this on Android hasn't been determined.

[rmisio]

This was done.