Skip to content

Commit

Permalink
v4.14.2: fix new blockchain and metaplex integration, fix cache and u…
Browse files Browse the repository at this point in the history 
…pdate on props update
  • Loading branch information
@10xSebastian
10xSebastian committed Aug 18, 2023
1 parent f726b00 commit 8b0cce1
Show file tree
Hide file tree
Showing 12 changed files with 423 additions and 247 deletions.
96 changes: 94 additions & 2 deletions dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,7 +386,7 @@ <h5 class="px-4 pb-4">Solana Token from MetaPlex</h5>
ReactDOM.createRoot(
document.getElementById('solanaTokenFromMetaPlex')
).render(
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'SRMuApVNdxXokk5GT7XD5cUUgXMBCoAz2LHeuAoKWRt' }),
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'METAewgxyPbgwsseH8T16a39CQ5VyVxZi9zXiDPY18m' }),
)
</script>
</div>
Expand Down Expand Up @@ -512,7 +512,7 @@ <h5 class="px-4 pb-4">Fantom Token from Trustwallet</h5>
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto">
<h5 class="px-4 pb-4">Polygon Token from DePay API</h5>
<h5 class="px-4 pb-4">Fantom Token from DePay API</h5>
<div class="px-4">
<div id="fantomTokenFromDepayApi" class="container d-flex justify-content-center token-image pt-2"></div>
</div>
Expand All @@ -531,6 +531,98 @@ <h5 class="px-4 pb-4">Polygon Token from DePay API</h5>
</div>
</div>

<div class="row px-2 pt-5">
<h1>Avalanche</h1>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto">
<h5 class="px-4 pb-4">Token: Avalanche Fantom</h5>
<div class="px-4">
<div id="tokenNativeAvalanche" class="container d-flex justify-content-center token-image pt-2"></div>
</div>
</div>
<div class="px-4 pt-3">
<script>
ReactDOM.createRoot(
document.getElementById('tokenNativeAvalanche')
).render(
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'avalanche', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' })
)
</script>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto">
<h5 class="px-4 pb-4">Avalance Token from web3-blockchains</h5>
<div class="px-4">
<div id="avalancheTokenFromWeb3Blockchains" class="container d-flex justify-content-center token-image pt-2"></div>
</div>
</div>
<div class="px-4 pt-3">
<script>
ReactDOM.createRoot(
document.getElementById('avalancheTokenFromWeb3Blockchains')
).render(
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'avalanche', address: '0x9702230A8Ea53601f5cD2dc00fDBc13d4dF4A8c7' }),
)
</script>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto">
<h5 class="px-4 pb-4">Avalanche Token from Trustwallet</h5>
<div class="px-4">
<div id="avalancheTokenFromTrustwallet" class="container d-flex justify-content-center token-image pt-2"></div>
</div>
</div>
<div class="px-4 pt-3">
<script>
ReactDOM.createRoot(
document.getElementById('avalancheTokenFromTrustwallet')
).render(
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'avalanche', address: '0x02D980A0D7AF3fb7Cf7Df8cB35d9eDBCF355f665' }),
)
</script>
</div>
</div>
</div>
</div>

<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
<div class="px-0 py-4 rounded-lg bg-white border">
<div class="col px-0">
<div class="overflow-auto">
<h5 class="px-4 pb-4">Avalanche Token from DePay API</h5>
<div class="px-4">
<div id="avalancheTokenFromDepayApi" class="container d-flex justify-content-center token-image pt-2"></div>
</div>
</div>
<div class="px-4 pt-3">
<script>
ReactDOM.createRoot(
document.getElementById('avalancheTokenFromDepayApi')
).render(
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'avalanche', address: '0x1B6382DBDEa11d97f24495C9A90b7c88469134a4' })
)
</script>
</div>
</div>
</div>
</div>
</div>

<div class="row px-2 pt-5">
<h1>NFTS</h1>

Expand Down
82 changes: 47 additions & 35 deletions dist/esm/index.evm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import Token from '@depay/web3-tokens-evm';
import React, { useState, useEffect } from 'react';
import Blockchains from '@depay/web3-blockchains';

let supported = ['ethereum', 'bsc', 'polygon', 'fantom', 'velas'];
supported.evm = ['ethereum', 'bsc', 'polygon', 'fantom', 'velas'];
let supported = ['ethereum', 'bsc', 'polygon', 'fantom', 'arbitrum', 'avalanche', 'gnosis', 'optimism'];
supported.evm = ['ethereum', 'bsc', 'polygon', 'fantom', 'arbitrum', 'avalanche', 'gnosis', 'optimism'];
supported.solana = [];

const _jsxFileName = "/Users/sebastian/Work/DePay/react-token-image/src/index.js"; function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
Expand All @@ -15,34 +15,46 @@ const UNKNOWN_IMAGE = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN

let TokenImage = function(props){

const [src, _setSrc] = useState();
const [source, setSource] = useState();
const [src, setSrc] = useState();
const [source, _setSource] = useState();

const blockchain = props.blockchain.toLowerCase();
const address = props.address;
const id = props.id;
const date = new Date();
const localStorageKey = ['react-token-image', blockchain, address, [date.getFullYear(), date.getMonth(), date.getDate()].join('-')].join('-');
const getLocalStorageKey = (blockchain, address)=>{
return [
'react-token-image',
blockchain,
address,
[date.getFullYear(), date.getMonth(), date.getDate()].join('-')
].join('-')
};

const setSrc = (_src)=>{
localStorage.setItem(localStorageKey, _src);
_setSrc(_src);
const setSource = (src, source)=>{
setSrc(src);
_setSource(source);
if(source != 'unknown') {
localStorage.setItem(getLocalStorageKey(blockchain, address), src);
}
};

useEffect(()=>{
const storedImage = localStorage.getItem(localStorageKey);
if(storedImage && storedImage.length && storedImage != UNKNOWN_IMAGE) { return setSrc(storedImage) }
const storedImage = localStorage.getItem(getLocalStorageKey(blockchain, address));
if(storedImage && storedImage.length && storedImage != UNKNOWN_IMAGE) {
return setSource(storedImage, 'stored')
}
const foundMajorToken = Blockchains[blockchain].tokens.find((token)=> token.address.toLowerCase() === address.toLowerCase());
if(foundMajorToken) {
setSrc(foundMajorToken.logo);
setSource(foundMajorToken.logo, 'web3-blockchains');
} else {
if(supported.evm.includes(blockchain)) {
setSource('repository');
setSrc(logoFromRepository({ blockchain, address }));
setSource(logoFromRepository({ blockchain, address }), 'repository');
} else if(blockchain === 'solana') {
setSource('metaplex');
logoFromMetaplex({ blockchain, address }).then((image)=>{
setSrc(image);
setSource(image, 'metaplex');
}).catch((error)=>{
setSource(logoFromRepository({ blockchain, address }), 'repository');
});
}
}
Expand All @@ -69,6 +81,7 @@ let TokenImage = function(props){
api: Token.solana.METADATA_LAYOUT,
cache: 86400000, // 1 day
});


if(_optionalChain([metaData, 'optionalAccess', _ => _.data, 'optionalAccess', _2 => _2.uri])) {

Expand All @@ -80,26 +93,22 @@ let TokenImage = function(props){
if(json && json.image) {
resolve(json.image);
} else {
resolve('');
reject('image not found on metaplex');
}
}).catch(()=>resolve(''));
}).catch(()=>reject('image not found on metaplex'));
} else {
resolve('');
reject('image not found on metaplex');
}
} else {
resolve('');
reject('image not found on metaplex');
}

} catch (e) { resolve(''); }
} catch (e) { reject('image not found on metaplex'); }
})
};

const logoFromRepository = ({ blockchain, address })=> {
if(['ethereum', 'bsc', 'polygon', 'fantom', 'solana'].includes(blockchain)) {
return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${mapBlockchainNameToTrustWalletAssets(blockchain)}/assets/${address}/logo.png`
} else if(blockchain == 'velas'){
return `https://raw.githubusercontent.com/wagyuswapapp/assets/master/blockchains/velas/assets/${address.toLowerCase()}/logo.png`
}
return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${mapBlockchainNameToTrustWalletAssets(blockchain)}/assets/${address}/logo.png`
};

const mapBlockchainNameToTrustWalletAssets = (blockchain)=>{
Expand Down Expand Up @@ -128,8 +137,7 @@ let TokenImage = function(props){
};

const setUnknown = ()=>{
setSource('unknown');
setSrc(UNKNOWN_IMAGE);
setSource(UNKNOWN_IMAGE, 'unknown');
};

const uriToImage = (tokenURI)=>{
Expand All @@ -147,8 +155,7 @@ let TokenImage = function(props){
if(image.match(/^ipfs/)) {
image = `https://ipfs.io/ipfs/${image.split('://')[1]}`;
}
setSource('meta');
setSrc(image);
setSource(image, 'meta');
} else {
setUnknown();
}
Expand All @@ -157,12 +164,13 @@ let TokenImage = function(props){
};

const handleLoadError = (error)=> {
delete localStorage[getLocalStorageKey(blockchain, address)];
if(source == 'metaplex') {
setSource('repository');
setSrc(logoFromRepository({ blockchain, address }));
setSource(logoFromRepository({ blockchain, address }), 'repository');
} else if(source == 'web3-blockchains') {
setSource(logoFromRepository({ blockchain, address }), 'repository');
} else if(source == 'repository') {
setSource('depay');
setSrc(`https://integrate.depay.com/tokens/${blockchain}/${address}/image`);
setSource(`https://integrate.depay.com/tokens/${blockchain}/${address}/image`, 'depay');
} else if (source == 'depay' && supported.evm.includes(blockchain)) {
if(id) {
request({ blockchain, address, api: uriAPI, method: 'uri', params: [id] }).then((uri)=>{
Expand All @@ -177,13 +185,17 @@ let TokenImage = function(props){
}
};

if(src == undefined) { return null }
if(src == undefined) {
return(
React.createElement('div', { className: props.className , __self: this, __source: {fileName: _jsxFileName, lineNumber: 197}} )
)
}

return(
React.createElement('img', {
className: props.className ,
src: src ,
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 190}}
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 202}}
)
)
};
Expand Down
Loading

0 comments on commit 8b0cce1

Please sign in to comment.