Merge pull request #4596 from blockscout/vb-token-icon-bridged-with-m…

…ainnet

Display token icon for tokens from TrustWallet assets repository

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Features
 - [#4608](https://github.com/blockscout/blockscout/pull/4608) - Block Details page: Improved style of transactions button
+- [#4596](https://github.com/blockscout/blockscout/pull/4596) - Display token icon for bridged with Mainnet tokens or identicons for other tokens
 - [#4520](https://github.com/blockscout/blockscout/pull/4520) - Add support for EIP-1559
 - [#4593](https://github.com/blockscout/blockscout/pull/4593) - Add status in `Position` pane for txs have no block
 - [#4579](https://github.com/blockscout/blockscout/pull/4579) - Write contract page: Resize inputs; Improve multiplier selector

apps/block_scout_web/assets/css/components/_navbar.scss

@@ -248,7 +248,8 @@ $navbar-logo-width: auto !default;
 
 .logo-text {
   color: #333;
-  font-size: 0.7rem;
+  font-size: 1rem;
+  font-weight: 700;
   margin-left: 5px;
   line-height: 28px;
 

apps/block_scout_web/assets/css/components/_search.scss

@@ -50,6 +50,7 @@
     font-weight: 100;
     text-transform: uppercase;
     color: rgb(33,33,33);
+    margin-left: auto;
 }
 
 .autoComplete_highlight {

apps/block_scout_web/assets/js/lib/autocomplete.js

@@ -1,6 +1,8 @@
-import AutoComplete from '@tarekraafat/autocomplete.js/dist/autoComplete.js'
-import { getTextAdData, fetchTextAdData } from './ad.js'
+import $ from 'jquery'
+import AutoComplete from '@tarekraafat/autocomplete.js/dist/autoComplete'
+import { getTextAdData, fetchTextAdData } from './ad'
 import { DateTime } from 'luxon'
+import { appendTokenIcon } from './token_icon'
 
 const placeHolder = 'Search by address, token symbol, name, transaction hash, or block number'
 const dataSrc = async (query, id) => {
@@ -51,11 +53,13 @@ const searchEngine = (query, record) => {
       (record.block_hash && record.block_hash.toLowerCase().includes(query.toLowerCase()))
   )
   ) {
-    var searchResult = `${record.address_hash || record.tx_hash || record.block_hash}<br/>`
+    var searchResult = '<div>'
+    searchResult += `<div>${record.address_hash || record.tx_hash || record.block_hash}</div>`
 
     if (record.type === 'label') {
       searchResult += `<div class="fontawesome-icon tag"></div><span> <b>${record.name}</b></span>`
     } else {
+      searchResult += '<div>'
       if (record.name) {
         searchResult += `<b>${record.name}</b>`
       }
@@ -68,23 +72,31 @@ const searchEngine = (query, record) => {
       if (record.inserted_at) {
         searchResult += ` (${DateTime.fromISO(record.inserted_at).toLocaleString(DateTime.DATETIME_SHORT)})`
       }
+      searchResult += '</div>'
     }
+    searchResult += '</div>'
     var re = new RegExp(query, 'ig')
     searchResult = searchResult.replace(re, '<mark class=\'autoComplete_highlight\'>$&</mark>')
     return searchResult
   }
 }
-const resultItemElement = (item, data) => {
-  // Modify Results Item Style
-  item.style = 'display: flex; justify-content: space-between;'
-  // Modify Results Item Content
+const resultItemElement = async (item, data) => {
+  item.style = 'display: flex;'
+
   item.innerHTML = `
-  <span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
+  <div id='token-icon-${data.value.address_hash}' style='margin-top: -1px;'></div>
+  <div style="padding-left: 10px; padding-right: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
     ${data.match}
-  </span>
-  <span class="autocomplete-category">
+  </div>
+  <div class="autocomplete-category">
     ${data.value.type}
-  </span>`
+  </div>`
+
+  const $tokenIconContainer = $(item).find(`#token-icon-${data.value.address_hash}`)
+  const $searchInput = $('#main-search-autocomplete')
+  const chainID = $searchInput.data('chain-id')
+  const displayTokenIcons = $searchInput.data('display-token-icons')
+  appendTokenIcon($tokenIconContainer, chainID, data.value.address_hash, data.value.foreign_chain_id, data.value.foreign_token_hash, displayTokenIcons, 15)
 }
 const config = (id) => {
   return {

apps/block_scout_web/assets/js/lib/token_icon.js

@@ -0,0 +1,59 @@
+function getTokenIconUrl (chainID, addressHash) {
+  var chainName = null
+  switch (chainID) {
+    case '1':
+      chainName = 'ethereum'
+      break
+    case '99':
+      chainName = 'poa'
+      break
+    case '100':
+      chainName = 'xdai'
+      break
+    default:
+      chainName = null
+      break
+  }
+  if (chainName) {
+    return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${chainName}/assets/${addressHash}/logo.png`
+  } else {
+    return null
+  }
+}
+
+function appendTokenIcon ($tokenIconContainer, chainID, addressHash, foreignChainID, foreignAddressHash, displayTokenIcons, size) {
+  const iconSize = size || 20
+  var tokenIconURL = null
+  if (foreignChainID) {
+    tokenIconURL = getTokenIconUrl(foreignChainID.toString(), foreignAddressHash)
+  } else if (chainID) {
+    tokenIconURL = getTokenIconUrl(chainID.toString(), addressHash)
+  }
+  if (displayTokenIcons) {
+    checkLink(tokenIconURL)
+      .then(checkTokenIconLink => {
+        if (checkTokenIconLink) {
+          if ($tokenIconContainer) {
+            var img = new Image(iconSize, iconSize)
+            img.src = tokenIconURL
+            $tokenIconContainer.append(img)
+          }
+        }
+      })
+  }
+}
+
+async function checkLink (url) {
+  if (url) {
+    try {
+      const res = await fetch(url)
+      return res.ok
+    } catch (_error) {
+      return false
+    }
+  } else {
+    return false
+  }
+}
+
+export { appendTokenIcon, checkLink, getTokenIconUrl }

apps/block_scout_web/assets/js/pages/token/overview.js

@@ -0,0 +1,13 @@
+import $ from 'jquery'
+import { appendTokenIcon } from '../../lib/token_icon'
+
+if ($('[data-page="token-details"]').length) {
+  const $tokenIconContainer = $('#token-icon')
+  const chainID = $tokenIconContainer.data('chain-id')
+  const addressHash = $tokenIconContainer.data('address-hash')
+  const foreignChainID = $tokenIconContainer.data('foreign-chain-id')
+  const foreignAddressHash = $tokenIconContainer.data('foreign-address-hash')
+  const displayTokenIcons = $tokenIconContainer.data('display-token-icons')
+
+  appendTokenIcon($tokenIconContainer, chainID, addressHash, foreignChainID, foreignAddressHash, displayTokenIcons)
+}