Skip to content

Commit 8b0cce1

Browse files
10xSebastian10xSebastian
committed
v4.14.2: fix new blockchain and metaplex integration, fix cache and update on props update
1 parent f726b00 commit 8b0cce1

File tree

12 files changed

+423
-247
lines changed

12 files changed

+423
-247
lines changed

‎dev.html‎

Lines changed: 94 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,7 @@ <h5 class="px-4 pb-4">Solana Token from MetaPlex</h5>
386386
ReactDOM.createRoot(
387387
document.getElementById('solanaTokenFromMetaPlex')
388388
).render(
389-
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'SRMuApVNdxXokk5GT7XD5cUUgXMBCoAz2LHeuAoKWRt' }),
389+
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'METAewgxyPbgwsseH8T16a39CQ5VyVxZi9zXiDPY18m' }),
390390
)
391391
</script>
392392
</div>
@@ -512,7 +512,7 @@ <h5 class="px-4 pb-4">Fantom Token from Trustwallet</h5>
512512
<div class="px-0 py-4 rounded-lg bg-white border">
513513
<div class="col px-0">
514514
<div class="overflow-auto">
515-
<h5 class="px-4 pb-4">Polygon Token from DePay API</h5>
515+
<h5 class="px-4 pb-4">Fantom Token from DePay API</h5>
516516
<div class="px-4">
517517
<div id="fantomTokenFromDepayApi" class="container d-flex justify-content-center token-image pt-2"></div>
518518
</div>
@@ -531,6 +531,98 @@ <h5 class="px-4 pb-4">Polygon Token from DePay API</h5>
531531
</div>
532532
</div>
533533

534+
<div class="row px-2 pt-5">
535+
<h1>Avalanche</h1>
536+
537+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
538+
<div class="px-0 py-4 rounded-lg bg-white border">
539+
<div class="col px-0">
540+
<div class="overflow-auto">
541+
<h5 class="px-4 pb-4">Token: Avalanche Fantom</h5>
542+
<div class="px-4">
543+
<div id="tokenNativeAvalanche" class="container d-flex justify-content-center token-image pt-2"></div>
544+
</div>
545+
</div>
546+
<div class="px-4 pt-3">
547+
<script>
548+
ReactDOM.createRoot(
549+
document.getElementById('tokenNativeAvalanche')
550+
).render(
551+
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'avalanche', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' })
552+
)
553+
</script>
554+
</div>
555+
</div>
556+
</div>
557+
</div>
558+
559+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
560+
<div class="px-0 py-4 rounded-lg bg-white border">
561+
<div class="col px-0">
562+
<div class="overflow-auto">
563+
<h5 class="px-4 pb-4">Avalance Token from web3-blockchains</h5>
564+
<div class="px-4">
565+
<div id="avalancheTokenFromWeb3Blockchains" class="container d-flex justify-content-center token-image pt-2"></div>
566+
</div>
567+
</div>
568+
<div class="px-4 pt-3">
569+
<script>
570+
ReactDOM.createRoot(
571+
document.getElementById('avalancheTokenFromWeb3Blockchains')
572+
).render(
573+
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'avalanche', address: '0x9702230A8Ea53601f5cD2dc00fDBc13d4dF4A8c7' }),
574+
)
575+
</script>
576+
</div>
577+
</div>
578+
</div>
579+
</div>
580+
581+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
582+
<div class="px-0 py-4 rounded-lg bg-white border">
583+
<div class="col px-0">
584+
<div class="overflow-auto">
585+
<h5 class="px-4 pb-4">Avalanche Token from Trustwallet</h5>
586+
<div class="px-4">
587+
<div id="avalancheTokenFromTrustwallet" class="container d-flex justify-content-center token-image pt-2"></div>
588+
</div>
589+
</div>
590+
<div class="px-4 pt-3">
591+
<script>
592+
ReactDOM.createRoot(
593+
document.getElementById('avalancheTokenFromTrustwallet')
594+
).render(
595+
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'avalanche', address: '0x02D980A0D7AF3fb7Cf7Df8cB35d9eDBCF355f665' }),
596+
)
597+
</script>
598+
</div>
599+
</div>
600+
</div>
601+
</div>
602+
603+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
604+
<div class="px-0 py-4 rounded-lg bg-white border">
605+
<div class="col px-0">
606+
<div class="overflow-auto">
607+
<h5 class="px-4 pb-4">Avalanche Token from DePay API</h5>
608+
<div class="px-4">
609+
<div id="avalancheTokenFromDepayApi" class="container d-flex justify-content-center token-image pt-2"></div>
610+
</div>
611+
</div>
612+
<div class="px-4 pt-3">
613+
<script>
614+
ReactDOM.createRoot(
615+
document.getElementById('avalancheTokenFromDepayApi')
616+
).render(
617+
React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'avalanche', address: '0x1B6382DBDEa11d97f24495C9A90b7c88469134a4' })
618+
)
619+
</script>
620+
</div>
621+
</div>
622+
</div>
623+
</div>
624+
</div>
625+
534626
<div class="row px-2 pt-5">
535627
<h1>NFTS</h1>
536628

‎dist/esm/index.evm.js‎

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import Token from '@depay/web3-tokens-evm';
33
import React, { useState, useEffect } from 'react';
44
import Blockchains from '@depay/web3-blockchains';
55

6-
let supported = ['ethereum', 'bsc', 'polygon', 'fantom', 'velas'];
7-
supported.evm = ['ethereum', 'bsc', 'polygon', 'fantom', 'velas'];
6+
let supported = ['ethereum', 'bsc', 'polygon', 'fantom', 'arbitrum', 'avalanche', 'gnosis', 'optimism'];
7+
supported.evm = ['ethereum', 'bsc', 'polygon', 'fantom', 'arbitrum', 'avalanche', 'gnosis', 'optimism'];
88
supported.solana = [];
99

1010
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; }
@@ -15,34 +15,46 @@ const UNKNOWN_IMAGE = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN
1515

1616
let TokenImage = function(props){
1717

18-
const [src, _setSrc] = useState();
19-
const [source, setSource] = useState();
18+
const [src, setSrc] = useState();
19+
const [source, _setSource] = useState();
2020

2121
const blockchain = props.blockchain.toLowerCase();
2222
const address = props.address;
2323
const id = props.id;
2424
const date = new Date();
25-
const localStorageKey = ['react-token-image', blockchain, address, [date.getFullYear(), date.getMonth(), date.getDate()].join('-')].join('-');
25+
const getLocalStorageKey = (blockchain, address)=>{
26+
return [
27+
'react-token-image',
28+
blockchain,
29+
address,
30+
[date.getFullYear(), date.getMonth(), date.getDate()].join('-')
31+
].join('-')
32+
};
2633

27-
const setSrc = (_src)=>{
28-
localStorage.setItem(localStorageKey, _src);
29-
_setSrc(_src);
34+
const setSource = (src, source)=>{
35+
setSrc(src);
36+
_setSource(source);
37+
if(source != 'unknown') {
38+
localStorage.setItem(getLocalStorageKey(blockchain, address), src);
39+
}
3040
};
3141

3242
useEffect(()=>{
33-
const storedImage = localStorage.getItem(localStorageKey);
34-
if(storedImage && storedImage.length && storedImage != UNKNOWN_IMAGE) { return setSrc(storedImage) }
43+
const storedImage = localStorage.getItem(getLocalStorageKey(blockchain, address));
44+
if(storedImage && storedImage.length && storedImage != UNKNOWN_IMAGE) {
45+
return setSource(storedImage, 'stored')
46+
}
3547
const foundMajorToken = Blockchains[blockchain].tokens.find((token)=> token.address.toLowerCase() === address.toLowerCase());
3648
if(foundMajorToken) {
37-
setSrc(foundMajorToken.logo);
49+
setSource(foundMajorToken.logo, 'web3-blockchains');
3850
} else {
3951
if(supported.evm.includes(blockchain)) {
40-
setSource('repository');
41-
setSrc(logoFromRepository({ blockchain, address }));
52+
setSource(logoFromRepository({ blockchain, address }), 'repository');
4253
} else if(blockchain === 'solana') {
43-
setSource('metaplex');
4454
logoFromMetaplex({ blockchain, address }).then((image)=>{
45-
setSrc(image);
55+
setSource(image, 'metaplex');
56+
}).catch((error)=>{
57+
setSource(logoFromRepository({ blockchain, address }), 'repository');
4658
});
4759
}
4860
}
@@ -69,6 +81,7 @@ let TokenImage = function(props){
6981
api: Token.solana.METADATA_LAYOUT,
7082
cache: 86400000, // 1 day
7183
});
84+
7285

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

@@ -80,26 +93,22 @@ let TokenImage = function(props){
8093
if(json && json.image) {
8194
resolve(json.image);
8295
} else {
83-
resolve('');
96+
reject('image not found on metaplex');
8497
}
85-
}).catch(()=>resolve(''));
98+
}).catch(()=>reject('image not found on metaplex'));
8699
} else {
87-
resolve('');
100+
reject('image not found on metaplex');
88101
}
89102
} else {
90-
resolve('');
103+
reject('image not found on metaplex');
91104
}
92105

93-
} catch (e) { resolve(''); }
106+
} catch (e) { reject('image not found on metaplex'); }
94107
})
95108
};
96109

97110
const logoFromRepository = ({ blockchain, address })=> {
98-
if(['ethereum', 'bsc', 'polygon', 'fantom', 'solana'].includes(blockchain)) {
99-
return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${mapBlockchainNameToTrustWalletAssets(blockchain)}/assets/${address}/logo.png`
100-
} else if(blockchain == 'velas'){
101-
return `https://raw.githubusercontent.com/wagyuswapapp/assets/master/blockchains/velas/assets/${address.toLowerCase()}/logo.png`
102-
}
111+
return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${mapBlockchainNameToTrustWalletAssets(blockchain)}/assets/${address}/logo.png`
103112
};
104113

105114
const mapBlockchainNameToTrustWalletAssets = (blockchain)=>{
@@ -128,8 +137,7 @@ let TokenImage = function(props){
128137
};
129138

130139
const setUnknown = ()=>{
131-
setSource('unknown');
132-
setSrc(UNKNOWN_IMAGE);
140+
setSource(UNKNOWN_IMAGE, 'unknown');
133141
};
134142

135143
const uriToImage = (tokenURI)=>{
@@ -147,8 +155,7 @@ let TokenImage = function(props){
147155
if(image.match(/^ipfs/)) {
148156
image = `https://ipfs.io/ipfs/${image.split('://')[1]}`;
149157
}
150-
setSource('meta');
151-
setSrc(image);
158+
setSource(image, 'meta');
152159
} else {
153160
setUnknown();
154161
}
@@ -157,12 +164,13 @@ let TokenImage = function(props){
157164
};
158165

159166
const handleLoadError = (error)=> {
167+
delete localStorage[getLocalStorageKey(blockchain, address)];
160168
if(source == 'metaplex') {
161-
setSource('repository');
162-
setSrc(logoFromRepository({ blockchain, address }));
169+
setSource(logoFromRepository({ blockchain, address }), 'repository');
170+
} else if(source == 'web3-blockchains') {
171+
setSource(logoFromRepository({ blockchain, address }), 'repository');
163172
} else if(source == 'repository') {
164-
setSource('depay');
165-
setSrc(`https://integrate.depay.com/tokens/${blockchain}/${address}/image`);
173+
setSource(`https://integrate.depay.com/tokens/${blockchain}/${address}/image`, 'depay');
166174
} else if (source == 'depay' && supported.evm.includes(blockchain)) {
167175
if(id) {
168176
request({ blockchain, address, api: uriAPI, method: 'uri', params: [id] }).then((uri)=>{
@@ -177,13 +185,17 @@ let TokenImage = function(props){
177185
}
178186
};
179187

180-
if(src == undefined) { return null }
188+
if(src == undefined) {
189+
return(
190+
React.createElement('div', { className: props.className , __self: this, __source: {fileName: _jsxFileName, lineNumber: 197}} )
191+
)
192+
}
181193

182194
return(
183195
React.createElement('img', {
184196
className: props.className ,
185197
src: src ,
186-
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 190}}
198+
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 202}}
187199
)
188200
)
189201
};

0 commit comments

Comments
 (0)