Update Asset Icons

Author: adebayooriyomi

client/src/app.js

@@ -208,7 +208,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
   , 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({}) :
+  , assetIcons$ = !process.env.ASSET_ICONS_URL ? O.of({}) :
   reply('asset-icons')
 
   // Currently visible view
@@ -339,8 +339,8 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
                               : { 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` }) 
+    , !process.env.ASSET_ICONS_URL ? O.empty() : O.of(
+      { category: 'asset-icons',  method: 'GET', path: process.env.ASSET_ICONS_URL}) 
 
 
     // fetch more txs for asset page

client/src/views/asset-issuance-history.js

@@ -3,46 +3,45 @@ import { formatTime, formatAssetAmount } from './util'
 
 export default (assetTxs, chain_stats, asset, t) => {
 
-    //Calculated AssetTx
-    let calculatedAssetTx = []
-      
-    if(assetTxs != null){ 
+    const getCalculatedAssetTx = () => {   
       // Supply Starts at Zero
       let supply = 0
       // Sort AssetTxs by block_time and Calculate Supply Change / Total Supply
       assetTxs.sort((a,b) => (a.status.block_time > b.status.block_time) ? 1 : ((b.status.block_time > a.status.block_time) ? -1 : 0))
-      assetTxs.map(tx => {
+      let calAssetTx = assetTxs.map(tx => {
         let calTxObj = {}
         calTxObj.txid = tx.txid
         calTxObj.block_height = tx.status.block_height
         calTxObj.block_time = formatTime(tx.status.block_time)
-
+    
         // Find all Issuance and add them to Supply
         tx.vin.map(vinTx => {
           if("issuance" in vinTx){
-            calTxObj.supplyChange = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount(("+ " + vinTx.issuance.assetamount), asset.precision, t)
+            calTxObj.supplyChange = chain_stats.has_blinded_issuances ? t`Confidential` : `+ ${formatAssetAmount((vinTx.issuance.assetamount), asset.precision, t).text}`
             calTxObj.totalSupply = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount((supply + vinTx.issuance.assetamount), asset.precision, t)
             supply = (supply + vinTx.issuance.assetamount)
           }
         })
-
+    
         // Find all Burn Transactions and Remove them from Supply
         tx.vout.map(voutTx => {
           if(voutTx.scriptpubkey_type === "op_return"){
             if(voutTx.value > 0){
-              calTxObj.supplyChange = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount(("- " + voutTx.value), asset.precision, t)
+              calTxObj.supplyChange = chain_stats.has_blinded_issuances ? t`Confidential` : `- ${formatAssetAmount((voutTx.value), asset.precision, t).text}`
               calTxObj.totalSupply = chain_stats.has_blinded_issuances ? t`Confidential` : formatAssetAmount((supply - voutTx.value), asset.precision, t)
               supply = (supply - voutTx.value)
             }
           }
         })
-        calculatedAssetTx.push(calTxObj)
+        return calTxObj
       })
+    
+      // Reverse Calculated AssetTx to Display Newest to Older
+      return calAssetTx.reverse()
     }
-    // Reverse Calculated AssetTx to Display Newest to Older
-    calculatedAssetTx.reverse()
-  
-
+    
+    let calculatedAssetTx = assetTxs === null ? "" : getCalculatedAssetTx()
+    
 
     return(
         <div>

flavors/liquid-mainnet/config.env

@@ -9,6 +9,8 @@ export IS_ELEMENTS=1
 
 export ASSET_MAP_URL=./_data/assets.minimal.json
 
+export ASSET_ICONS_URL=https://assets.blockstream.info/icons.json
+
 export MENU_ACTIVE='Liquid'
 export BASE_HREF=${BASE_HREF:-'/liquid/'}
 

flavors/liquid-mainnet/extras.css

@@ -233,8 +233,16 @@
 
 @media only screen and (max-width: 850px) {
 
-    /* assets table */
+    .asset-label{
+      width: 40%;
+    }
+
+    .asset-text{
+      text-align: right;
+      width: 60%;
+    }
 
+    /* assets table */
     div.assets-table-row.header {
       display:none;
     }