Proxify NFT images

golos-blockchain · Nov 24, 2023 · ef92592 · ef92592
1 parent 670154b
commit ef92592
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/app/components/elements/market/MarketPair.jsx b/app/components/elements/market/MarketPair.jsx
@@ -7,6 +7,7 @@ import PagedDropdownMenu from 'app/components/elements/PagedDropdownMenu'
 import Icon from 'app/components/elements/Icon'
 import { apidexGetAll } from 'app/utils/ApidexApiClient'
 import { getAssetMeta, getTradablesFor } from 'app/utils/market/utils'
+import { proxifyNFTImage } from 'app/utils/ProxifyUrl'
 
 class MarketPair extends React.Component {
     static propTypes = {
@@ -157,8 +158,12 @@ class MarketPair extends React.Component {
         if (!symbols1 && !symbols2) return <div></div>
 
         const renderSym1 = (asset) => {
-            const { symbol, image_url } = asset
+            const { symbol, } = asset
             const { style, dataset } = this.makeItem(asset, depths1, maxDepth1)
+            let { image_url } = asset
+            if (image_url) {
+                image_url = proxifyNFTImage(image_url)
+            }
             return {
                 key: symbol, value: symbol,
                 label: (<span className={'Market__bg-' + symbol} style={{lineHeight: '28px'}} data-usd={dataset.market_usd}><img src={image_url} width='28' height='28'/>&nbsp;&nbsp;&nbsp;{symbol}</span>),
@@ -171,8 +176,12 @@ class MarketPair extends React.Component {
         }
 
         const renderSym2 = (asset) => {
-            const { symbol, image_url } = asset
+            const { symbol } = asset
             const { style, dataset } = this.makeItem(asset, depths2, maxDepth2)
+            let { image_url } = asset
+            if (image_url) {
+                image_url = proxifyNFTImage(image_url)
+            }
             return {
                 key: symbol, value: symbol,
                 label: (<span className={'Market__bg-' + symbol} style={{lineHeight: '28px'}} data-usd={dataset.market_usd}><img src={image_url} width='28' height='28'/>&nbsp;&nbsp;&nbsp;{symbol}</span>),
@@ -183,26 +192,34 @@ class MarketPair extends React.Component {
                 }
             }
         }
-
+
+        let sym1Image = getAssetMeta(assets[sym1]).image_url
+        if (sym1Image) {
+            sym1Image = proxifyNFTImage(sym1Image)
+        }
         let left = <div style={{ display: 'inline-block' }}>
                 <div className='MarketPair__label'>{label1}</div>
                 <PagedDropdownMenu el='div' className='top-most' items={symbols1} perPage={itemsPerPage}
                         renderItem={renderSym1}>
                     <span>
-                        <img src={getAssetMeta(assets[sym1]).image_url || ''}
+                        <img src={sym1Image || ''}
                             className='MarketPair__selected' />
                         {sym1}
                         {symbols1.length > 0 && <Icon name='dropdown-arrow' />}
                     </span>
                 </PagedDropdownMenu>
             </div>
 
+        let sym2Image = getAssetMeta(assets[sym2]).image_url
+        if (sym2Image) {
+            sym2Image = proxifyNFTImage(sym2Image)
+        }
         let right = <div style={{ display: 'inline-block' }}>
                 <div className='MarketPair__label'>{label2}</div>
                 <PagedDropdownMenu el='div' className='top-most' items={symbols2} perPage={itemsPerPage}
                         renderItem={renderSym2}>
                     <span>
-                        <img src={getAssetMeta(assets[sym2]).image_url || ''}
+                        <img src={sym2Image || ''}
                             className='MarketPair__selected' />
                         {sym2}
                         {symbols2.length > 0 && <Icon name='dropdown-arrow' />}

diff --git a/app/components/modules/uia/Assets.jsx b/app/components/modules/uia/Assets.jsx
@@ -20,6 +20,7 @@ import AssetRules from 'app/components/modules/uia/AssetRules';
 import Reveal from 'react-foundation-components/lib/global/reveal';
 import Tooltip from 'app/components/elements/Tooltip';
 import { normalizeAssets, getTradablesFor } from 'app/utils/market/utils'
+import { proxifyNFTImage } from 'app/utils/ProxifyUrl'
 
 class Assets extends Component {
     static propTypes = {
@@ -167,7 +168,7 @@ class Assets extends Component {
             if (item.json_metadata.startsWith('{')) {
                 let json_metadata = JSON.parse(item.json_metadata)
                 description = json_metadata.description
-                image_url = json_metadata.image_url
+                image_url = proxifyNFTImage(json_metadata.image_url)
                 telegram = json_metadata.telegram
                 deposit = json_metadata.deposit;
                 withdrawal = json_metadata.withdrawal;

diff --git a/app/components/pages/Rating.jsx b/app/components/pages/Rating.jsx
@@ -7,6 +7,7 @@ import { api } from 'golos-lib-js'
 import LoadingIndicator from 'app/components/elements/LoadingIndicator'
 import { getAssetMeta, } from 'app/utils/market/utils'
 import { apidexGetAll } from 'app/utils/ApidexApiClient'
+import { proxifyNFTImage } from 'app/utils/ProxifyUrl'
 
 const RELOAD_EACH_MSEC = 30*1000
 
@@ -104,10 +105,15 @@ class Rating extends React.Component {
 
         const link = '/market/' + sym1 + '/' + sym2
 
+        let image_url = getAssetMeta(asset).image_url
+        if (image_url) {
+            image_url = proxifyNFTImage(image_url)
+        }
+
         return <Link to={link}><div className='Pair PairTop1'>
             <div className='Pair__logo'>
                 <img src={require('app/assets/images/badge.png')} width='110px' alt='' /><br />
-                <img src={getAssetMeta(asset).image_url || ''}
+                <img src={image_url || ''}
                     className='Pair__logo-img' />
             </div>
             <div className='Pair__main'>
@@ -173,9 +179,14 @@ class Rating extends React.Component {
 
             const link = '/market/' + sym1 + '/' + sym2
 
+            let image_url = getAssetMeta(asset).image_url
+            if (image_url) {
+                image_url = proxifyNFTImage(image_url)
+            }
+
             pairItems.push(<Link to={link} key='link'><div className='Pair'>
                 <div className='Pair__logo'>
-                    <img src={getAssetMeta(asset).image_url || ''}
+                    <img src={image_url || ''}
                         className='Pair__logo-img' />
                 </div>
                 <div className='Pair__main'>

diff --git a/app/utils/ProxifyUrl.js b/app/utils/ProxifyUrl.js
@@ -33,6 +33,8 @@ export const proxifyImageUrl = (url, dimensions = '0x0') => {
 export const proxifyNFTImage = (url) => {
     if (!$STM_Config)
       return url
+    if (!url.startsWith('http'))
+      return url
     let prefix = ''
     if ($STM_Config.images.img_proxy_prefix && $STM_Config.images.use_img_proxy !== false) prefix += fixHost($STM_Config.images.img_proxy_prefix) + '/orig/png/'
     if ($STM_Config.images.img_proxy_backup_prefix) prefix += fixHost($STM_Config.images.img_proxy_backup_prefix) + '/0x0/'