Add Asset-Icons to Asset-List Page

Author: adebayooriyomi

client/.DS_Store

@@ -207,6 +207,10 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
   // In elements, we block rendering until the assetMap is loaded. Otherwise, we can start immediately.
   , isReady$ = process.env.ASSET_MAP_URL ? assetMap$.mapTo(true).startWith(false) : O.of(true)
 
+  // Asset Icons Response
+  , assetIcons$ = !process.env.ASSET_MAP_URL ? O.of({}) :
+  reply('asset-icons')
+
   // Currently visible view
   , view$ = O.merge(page$.mapTo(null)
                   , goHome$.mapTo('recentBlocks')
@@ -241,7 +245,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
                      , mempool$, mempoolRecent$, feeEst$
                      , tx$, txAnalysis$, openTx$
                      , goAddr$, addr$, addrTxs$, addrQR$
-                     , assetMap$, goAsset$, asset$, assetTxs$
+                     , assetMap$, assetIcons$, goAsset$, asset$, assetTxs$
                      , isReady$, loading$, page$, view$, title$, theme$
                      })
 
@@ -334,6 +338,11 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
                               ? { category: 'asset-txs',  method: 'GET', path: `/asset/${d.asset_id}/txs/chain/${last(d.last_txids)}` }
                               : { category: 'asset-txs',  method: 'GET', path: `/asset/${d.asset_id}/txs` }])
 
+    // Fetch Asset Icons                             
+    , !process.env.ASSET_MAP_URL ? O.empty() : O.of(
+      { category: 'asset-icons',  method: 'GET', path: `https://assets.blockstream.info/icons.json` }) 
+
+
     // fetch more txs for asset page
     , moreSTxs$.map(d       => ({ category: 'asset-txs-more', method: 'GET', path: `/asset/${d.asset_id}/txs/chain/${d.last_txid}` }))
     ).map(setBase)

client/src/.DS_Store

@@ -2,7 +2,7 @@ import Snabbdom from 'snabbdom-pragma'
 
 import layout from './layout'
 
-export default ({ assetMap, t, ...S }) => {
+export default ({ assetMap, assetIcons, t, ...S }) => {
 
   const assets = Object.entries(assetMap)
     .map(([ asset_id, [ domain, ticker, name ] ]) => ({ asset_id, domain, ticker, name  }))
@@ -28,7 +28,15 @@ export default ({ assetMap, t, ...S }) => {
               {assets.map(asset =>
                 <div className="assets-table-link-row">
                   <a className="assets-table-row asset-data" href={`asset/${asset.asset_id}`}>
-                    <div className="assets-table-cell" data-label={t`Name`}>{asset.name}</div>
+                    <div className="assets-table-cell" data-label={t`Name`}>
+                      <div className="assets-table-name">
+                        {assetIcons === null ? "" : 
+                          assetIcons[`${asset.asset_id}`] === undefined ? 
+                            <div className="asset-icon-placeholder"></div> :
+                            <img src={`data:image/png;base64,${assetIcons[`${asset.asset_id}`]}`} className="asset-icon"/>}
+                            <span>{asset.name}</span>
+                      </div>
+                    </div>
                     <div className="assets-table-cell ticker" data-label={t`Ticker`}>{asset.ticker || <em>None</em>}</div>
                     <div className="assets-table-cell" data-label={t`Issuer domain`}>{asset.domain}</div>
                     <div className="assets-table-cell asset-id highlighted-text" data-label={t`Asset ID`}>{asset.asset_id}</div>

client/src/app.js

@@ -21,6 +21,28 @@
     background-image: linear-gradient(-90deg, rgba(13, 141, 119, 1) 0%, rgba(17, 103, 97, 1) 16%, rgba(25, 68, 74, 1) 35%, rgba(29, 42, 48, 1) 57%, rgba(14, 16, 17, 1) 100%);
 }
 
+/* Asset List Icons*/
+
+.assets-table-cell .asset-icon-placeholder{
+  width: 25px;
+  height: 25px;
+  float: left;
+  margin-right: 10px;
+  background: url(img/icons/asset_unknown.png);
+  background-size: cover;
+}
+
+.assets-table-cell .asset-icon{
+  width: 25px;
+  height: 25px;
+  float: left;
+  margin-right: 10px;
+}
+
+.assets-table-name span{
+  word-break: break-all;
+}
+
 .assets-table .assets-table-row {
   display: table;
   table-layout: fixed;
@@ -68,6 +90,7 @@
 
 .assets-table .assets-table-row > div:nth-child(1) {
   padding-left: 12px;
+  padding-right: 15px;
 }
 
 .assets-table-row {