diff --git a/cypress/integration/basics.js b/cypress/integration/basics.js index d92f3d5..dfe1de3 100644 --- a/cypress/integration/basics.js +++ b/cypress/integration/basics.js @@ -94,51 +94,6 @@ describe('ReactTokenImage', () => { }) }) - it('Uses base64 png for blockchain native token on ethereum', () => { - cy.visit('cypress/test.html').then((contentWindow) => { - cy.document().then((document) => { - - ReactDOM.createRoot( - document.getElementById('app') - ).render( - React.createElement(TokenImage, { blockchain: 'ethereum', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' }), - ) - - cy.get('img').should('have.attr', 'src', 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiCgkgaW1hZ2UtcmVuZGVyaW5nPSJvcHRpbWl6ZVF1YWxpdHkiIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiB0ZXh0LXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIgoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjgzLjUgMjgzLjUiCgkgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjgzLjUgMjgzLjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMzQzNDM0IiBkPSJNMTQxLjcsMjUuOWwtMS41LDUuMnYxNTMuM2wxLjUsMS41bDcxLjItNDIuMUwxNDEuNywyNS45eiIvPgoJCTxwYXRoIGZpbGw9IiM4QzhDOEMiIGQ9Ik0xNDEuNywyNS45TDcwLjYsMTQzLjhsNzEuMSw0Mi4xdi03NC40VjI1Ljl6Ii8+CgkJPHBhdGggZmlsbD0iIzNDM0MzQiIgZD0iTTE0MS43LDE5OS40bC0wLjgsMS4xdjU0LjZsMC44LDIuNWw3MS4yLTEwMC4zTDE0MS43LDE5OS40eiIvPgoJCTxwYXRoIGZpbGw9IiM4QzhDOEMiIGQ9Ik0xNDEuNywyNTcuNnYtNTguMmwtNzEuMS00Mi4xTDE0MS43LDI1Ny42eiIvPgoJCTxwYXRoIGZpbGw9IiMxNDE0MTQiIGQ9Ik0xNDEuNywxODUuOWw3MS4yLTQyLjFsLTcxLjItMzIuM1YxODUuOXoiLz4KCQk8cGF0aCBmaWxsPSIjMzkzOTM5IiBkPSJNNzAuNiwxNDMuOGw3MS4xLDQyLjF2LTc0LjRMNzAuNiwxNDMuOHoiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K') - }) - }) - }) - - it('Uses base64 png for blockchain native token on bsc', () => { - cy.visit('cypress/test.html').then((contentWindow) => { - cy.document().then((document) => { - - ReactDOM.createRoot( - document.getElementById('app') - ).render( - React.createElement(TokenImage, { blockchain: 'bsc', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' }), - ) - - cy.get('img').should('have.attr', 'src', 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxOTIgMTkyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOTIgMTkyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGZpbGw9IiNGMEI5MEIiIGQ9Ik01NCw0MS4xbDQyLTI0LjJsNDIsMjQuMmwtMTUuNCw4LjlMOTYsMzQuOUw2OS40LDUwTDU0LDQxLjF6IE0xMzgsNzEuN2wtMTUuNC04LjlMOTYsNzhMNjkuNCw2Mi43bC0xNS40LDl2MTgKCUw4MC42LDEwNXYzMC41bDE1LjQsOWwxNS40LTlWMTA1TDEzOCw4OS43VjcxLjd6IE0xMzgsMTIwLjN2LTE4bC0xNS40LDguOXYxOEMxMjIuNiwxMjkuMSwxMzgsMTIwLjMsMTM4LDEyMC4zeiBNMTQ4LjksMTI2LjQKCWwtMjYuNiwxNS4zdjE4bDQyLTI0LjJWODdsLTE1LjQsOUMxNDguOSw5NiwxNDguOSwxMjYuNCwxNDguOSwxMjYuNHogTTEzMy41LDU2LjRsMTUuNCw5djE4bDE1LjQtOXYtMThsLTE1LjQtOUwxMzMuNSw1Ni40CglMMTMzLjUsNTYuNHogTTgwLjYsMTQ4LjN2MThsMTUuNCw5bDE1LjQtOXYtMThMOTYsMTU3LjFMODAuNiwxNDguM3ogTTU0LDEyMC4zbDE1LjQsOXYtMTguMUw1NCwxMDIuM0w1NCwxMjAuM0w1NCwxMjAuM3oKCSBNODAuNiw1Ni40bDE1LjQsOWwxNS40LTlMOTYsNDcuNUM5Niw0Ny40LDgwLjYsNTYuNCw4MC42LDU2LjRMODAuNiw1Ni40eiBNNDMuMSw2NS40bDE1LjQtOWwtMTUuNC05bC0xNS40LDl2MThsMTUuNCw5TDQzLjEsNjUuNAoJTDQzLjEsNjUuNHogTTQzLjEsOTUuOUwyNy43LDg3djQ4LjVsNDIsMjQuMnYtMThsLTI2LjYtMTUuM1Y5NS45TDQzLjEsOTUuOXoiLz4KPC9zdmc+Cg==') - }) - }) - }) - - it('Uses base64 png for blockchain native token on polygon', () => { - cy.visit('cypress/test.html').then((contentWindow) => { - cy.document().then((document) => { - - ReactDOM.createRoot( - document.getElementById('app') - ).render( - React.createElement(TokenImage, { blockchain: 'polygon', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' }), - ) - - cy.get('img').should('have.attr', 'src', 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NS40IDQ1LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ1LjQgNDUuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM4MjQ3RTU7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNiwyMWMtMC43LDAuNC0xLjEsMS4xLTEuMSwydjguOGMwLDAuOSwwLjQsMS42LDEuMSwybDcuNSw0LjRjMC43LDAuNCwxLjUsMC40LDIuMiwwbDcuNS00LjQKCWMwLjctMC40LDEuMS0xLjEsMS4xLTJ2LTMuMWwtMy41LTJ2Mi45YzAsMC45LTAuNCwxLjYtMS4xLDJsLTQsMi4zYy0wLjcsMC40LTEuNSwwLjQtMi4yLDBsLTMuOS0yLjNjLTAuNy0wLjQtMS4xLTEuMS0xLjEtMlYyNQoJYzAtMC45LDAuNC0xLjYsMS4xLTJsNC0yLjNjMC42LTAuNCwxLjUtMC40LDIuMiwwbDUuMSwyLjlsMy41LDIuMWw1LjEsMi45YzAuNywwLjQsMS41LDAuNCwyLjIsMGw3LjYtNC40YzAuNy0wLjQsMS4xLTEuMSwxLjEtMgoJdi04LjdjMC0wLjctMC40LTEuNC0xLjEtMS44bC03LjYtNC40Yy0wLjctMC40LTEuNS0wLjQtMi4yLDBMMjIsMTEuN2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjMuMmwzLjUsMi4xdi0zLjFjMC0wLjksMC40LTEuNiwxLjEtMgoJbDQtMi40YzAuNy0wLjQsMS41LTAuNCwyLjIsMGw0LDIuM2MwLjYsMC40LDEuMSwxLjEsMS4xLDJ2NC42YzAsMC45LTAuNSwxLjYtMS4xLDJsLTQsMi40Yy0wLjYsMC40LTEuNSwwLjQtMi4yLDBsLTUuMS0zLjFsLTMuNS0yCglsLTUuMy0zLjFjLTAuNi0wLjQtMS41LTAuNC0yLjIsMEMxMy40LDE2LjYsNi4xLDIxLDYsMjF6Ii8+Cjwvc3ZnPgo=') - }) - }) - }) - it('renders NFT token images through', () => { cy.visit('cypress/test.html').then((contentWindow) => { cy.document().then((document) => { diff --git a/demo.html b/demo.html index 1fd2609..55868c7 100644 --- a/demo.html +++ b/demo.html @@ -9,7 +9,7 @@ <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script crossorigin src="https://unpkg.com/@depay/solana-web3.js@1"></script> - <script crossorigin src="https://unpkg.com/@depay/web3-blockchains@8"></script> + <script crossorigin src="https://unpkg.com/@depay/web3-blockchains@9"></script> <script crossorigin src="https://unpkg.com/@depay/web3-client@10"></script> <script crossorigin src="https://unpkg.com/@depay/web3-tokens@10"></script> <script src="/dist/umd/index.js"></script> @@ -33,6 +33,8 @@ .Token { width: 200px; height: 200px; + border-radius: 999px; + box-shadow: 0 0 2px black; } </style> </head> @@ -45,492 +47,607 @@ </a> </div> - <div class="row px-2"> - - <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">Ethereum Token from Trustwallet</h5> - <div class="px-4"> - <div id="ethereumTokenFromTrustwallet" class="container d-flex justify-content-center token-image pt-2"></div> + <div> + + <div class="row px-2"> + <h1>Ethereum</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: Native Ethereum</h5> + <div class="px-4"> + <div id="tokenFour" 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('tokenFour') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('ethereumTokenFromTrustwallet') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb' }), - ) - </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">Ethereum Token from DePay API</h5> - <div class="px-4"> - <div id="ethereumTokenFromDepayApi" class="container d-flex justify-content-center token-image pt-2"></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">Ethereum Token from web3-blockchains</h5> + <div class="px-4"> + <div id="ethereumTokenFromWeb3Blockchains" 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('ethereumTokenFromWeb3Blockchains') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0xa0bed124a09ac2Bd941b10349d8d224fe3c955eb' }) + ) + </script> </div> </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('ethereumTokenFromDepayApi') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0xa0bed124a09ac2Bd941b10349d8d224fe3c955eb' }) - ) - </script> + </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">Ethereum Token from Trustwallet</h5> + <div class="px-4"> + <div id="ethereumTokenFromTrustwallet" 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('ethereumTokenFromTrustwallet') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0x00059AE69c1622A7542EdC15E8d17b060fE307b6' }), + ) + </script> + </div> </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">BSC Token from Trustwallet</h5> - <div class="px-4"> - <div id="bscTokenFromTrustwallet" class="container d-flex justify-content-center token-image pt-2"></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">Ethereum Token from DePay API</h5> + <div class="px-4"> + <div id="ethereumTokenFromDepayApi" 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('ethereumTokenFromDepayApi') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0x5a666c7d92e5fa7edcb6390e4efd6d0cdd69cf37' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('bscTokenFromTrustwallet') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'bsc', address: '0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82' }), - ) - </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">BSC Token from DePay API</h5> - <div class="px-4"> - <div id="bscTokenFromDepayApi" class="container d-flex justify-content-center token-image pt-2"></div> + <div class="row px-2 pt-5"> + <h1>BNB Smart Chain</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: Native BSC</h5> + <div class="px-4"> + <div id="tokenFive" 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('tokenFive') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'bsc', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('bscTokenFromDepayApi') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'bsc', address: '0xa0bed124a09ac2Bd941b10349d8d224fe3c955eb' }) - ) - </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">Polygon Token from Trustwallet</h5> - <div class="px-4"> - <div id="polygonTokenFromTrustwallet" class="container d-flex justify-content-center token-image pt-2"></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">BSC Token from web3-blockchains</h5> + <div class="px-4"> + <div id="bscTokenFromWeb3Blockchains" 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('bscTokenFromWeb3Blockchains') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'bsc', address: '0xa0bed124a09ac2Bd941b10349d8d224fe3c955eb' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('polygonTokenFromTrustwallet') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'polygon', address: '0x831753DD7087CaC61aB5644b308642cc1c33Dc13' }), - ) - </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">Polygon Token from DePay API</h5> - <div class="px-4"> - <div id="polygonTokenFromDepayApi" class="container d-flex justify-content-center token-image pt-2"></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">BSC Token from Trustwallet</h5> + <div class="px-4"> + <div id="bscTokenFromTrustwallet" 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('bscTokenFromTrustwallet') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'bsc', address: '0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82' }), + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('polygonTokenFromDepayApi') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'polygon', address: '0x831753dd7087cac61ab5644b308642cc1c33dc13' }) - ) - </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">Solana Token from Metaplex</h5> - <div class="px-4"> - <div id="solanaTokenFromMetaplex" class="container d-flex justify-content-center token-image pt-2"></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">BSC Token from DePay API</h5> + <div class="px-4"> + <div id="bscTokenFromDepayApi" 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('bscTokenFromDepayApi') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'bsc', address: '0x8f0528ce5ef7b51152a59745befdd91d97091d2f' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('solanaTokenFromMetaplex') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'DePay1miDBPWXs6PVQrdC5Vch2jemgEPaiyXLNLLa2NF' }), - ) - </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">Solana Token from Trustwallet</h5> - <div class="px-4"> - <div id="solanaTokenFromTrustwallet" class="container d-flex justify-content-center token-image pt-2"></div> + <div class="row px-2 pt-5"> + <h1>Polygon (POS)</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: Native Polygon</h5> + <div class="px-4"> + <div id="tokenSix" 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('tokenSix') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'polygon', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('solanaTokenFromTrustwallet') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v' }), - ) - </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">Solana Token from DePay API</h5> - <div class="px-4"> - <div id="solanaTokenFromDepayApi" class="container d-flex justify-content-center token-image pt-2"></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">Polygon Token from web3-blockchains</h5> + <div class="px-4"> + <div id="polygonTokenFromWeb3Blockchains" 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('polygonTokenFromWeb3Blockchains') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'polygon', address: '0xf6261529C6C2fBEB313aB25cDEcD243613b40EB5' }), + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('solanaTokenFromDepayApi') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'epjfwdd5aufqssqem2qn1xzybapc8g4weggkzwytdt1v' }) - ) - </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">Fantom Token</h5> - <div class="px-4"> - <div id="fantomToken" class="container d-flex justify-content-center token-image pt-2"></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">Polygon Token from Trustwallet</h5> + <div class="px-4"> + <div id="polygonTokenFromTrustwallet" 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('polygonTokenFromTrustwallet') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'polygon', address: '0x831753DD7087CaC61aB5644b308642cc1c33Dc13' }), + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('fantomToken') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'fantom', address: '0x04068DA6C83AFCFA0e13ba15A6696662335D5B75' }), - ) - </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">Velas Token from Wagyu</h5> - <div class="px-4"> - <div id="velasTokenFromWagyu" class="container d-flex justify-content-center token-image pt-2"></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">Polygon Token from DePay API</h5> + <div class="px-4"> + <div id="polygonTokenFromDepayApi" 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('polygonTokenFromDepayApi') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'polygon', address: '0x831753dd7087cac61ab5644b308642cc1c33dc13' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('velasTokenFromWagyu') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'velas', address: '0xabf26902fd7b624e0db40d31171ea9dddf078351' }), - ) - </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">Token: Failed loading</h5> - <div class="px-4"> - <div id="tokenThree" class="container d-flex justify-content-center token-image pt-2"></div> + <div class="row px-2 pt-5"> + <h1>Solana</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: Native SOL</h5> + <div class="px-4"> + <div id="tokenSeven" 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('tokenSeven') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: '11111111111111111111111111111111' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('tokenThree') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0xa0bed124a09ac2Bd41b10349d8d224fe3c955eb' }) - ) - </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">Token: Native Ethereum</h5> - <div class="px-4"> - <div id="tokenFour" class="container d-flex justify-content-center token-image pt-2"></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">Solana Token from Web3Blockchains</h5> + <div class="px-4"> + <div id="solanaTokenFromWeb3Blockchains" 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('solanaTokenFromWeb3Blockchains') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'DePay1miDBPWXs6PVQrdC5Vch2jemgEPaiyXLNLLa2NF' }), + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('tokenFour') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', 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">Token: Native BSC</h5> - <div class="px-4"> - <div id="tokenFive" class="container d-flex justify-content-center token-image pt-2"></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">Solana Token from MetaPlex</h5> + <div class="px-4"> + <div id="solanaTokenFromMetaPlex" 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('solanaTokenFromMetaPlex') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'SRMuApVNdxXokk5GT7XD5cUUgXMBCoAz2LHeuAoKWRt' }), + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('tokenFive') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'bsc', 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">Token: Native Polygon</h5> - <div class="px-4"> - <div id="tokenSix" class="container d-flex justify-content-center token-image pt-2"></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">Solana Token from Trustwallet</h5> + <div class="px-4"> + <div id="solanaTokenFromTrustwallet" 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('solanaTokenFromTrustwallet') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'ATLASXmbPQxBUYbxPsV97usA3fPQYEqzQBUHgiFCUsXx' }), + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('tokenSix') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'polygon', 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">Token: Native SOL</h5> - <div class="px-4"> - <div id="tokenSeven" class="container d-flex justify-content-center token-image pt-2"></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">Solana Token from DePay API</h5> + <div class="px-4"> + <div id="solanaTokenFromDepayApi" 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('solanaTokenFromDepayApi') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: 'RLBxxFkseAZ4RgJH3Sqn8jXxhmGoz9jWxDNJMh8pL7a' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('tokenSeven') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'solana', address: '11111111111111111111111111111111' }) - ) - </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">Token: Native VELAS</h5> - <div class="px-4"> - <div id="tokenNativeVelas" class="container d-flex justify-content-center token-image pt-2"></div> + <div class="row px-2 pt-5"> + <h1>Fantom</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: Native Fantom</h5> + <div class="px-4"> + <div id="tokenNativeFantom" 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('tokenNativeFantom') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'fantom', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('tokenNativeVelas') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'velas', 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">Token: Native FANTOM</h5> - <div class="px-4"> - <div id="tokenNativeFantom" class="container d-flex justify-content-center token-image pt-2"></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">Fantom Token from web3-blockchains</h5> + <div class="px-4"> + <div id="fantomTokenFromWeb3Blockchains" 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('fantomTokenFromWeb3Blockchains') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'fantom', address: '0x28a92dde19D9989F39A49905d7C9C2FAc7799bDf' }), + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('tokenNativeFantom') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'fantom', 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">NFT Example: through JSON meta data</h5> - <div class="px-4"> - <div id="nftJsonMetaData" class="container d-flex justify-content-center token-image pt-2"></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">Fantom Token from Trustwallet</h5> + <div class="px-4"> + <div id="fantomTokenFromTrustwallet" 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('fantomTokenFromTrustwallet') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'fantom', address: '0x1B6382DBDEa11d97f24495C9A90b7c88469134a4' }), + ) + </script> </div> </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('nftJsonMetaData') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0x90B3832e2F2aDe2FE382a911805B6933C056D6ed' }) - ) - </script> + </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">Polygon 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> + </div> + <div class="px-4 pt-3"> + <script> + ReactDOM.createRoot( + document.getElementById('fantomTokenFromDepayApi') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'fantom', address: '0x1B6382DBDEa11d97f24495C9A90b7c88469134a4' }) + ) + </script> + </div> </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">NFT Example: through JSON meta data</h5> - <div class="px-4"> - <div id="nftJsonMetaDataAlt2" class="container d-flex justify-content-center token-image pt-2"></div> + <div class="row px-2 pt-5"> + <h1>NFTS</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">NFT Example: through JSON meta data</h5> + <div class="px-4"> + <div id="nftJsonMetaData" 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('nftJsonMetaData') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0x90B3832e2F2aDe2FE382a911805B6933C056D6ed' }) + ) + </script> </div> </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('nftJsonMetaDataAlt2') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0xb18380485f7ba9c23deb729bedd3a3499dbd4449' }) - ) - </script> + </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">NFT Example: through JSON meta data</h5> + <div class="px-4"> + <div id="nftJsonMetaDataAlt2" 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('nftJsonMetaDataAlt2') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0xb18380485f7ba9c23deb729bedd3a3499dbd4449' }) + ) + </script> + </div> </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">NFT Example: through JSON meta data</h5> - <div class="px-4"> - <div id="nftJsonMetaDataAlt3" class="container d-flex justify-content-center token-image pt-2"></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">NFT Example: through JSON meta data</h5> + <div class="px-4"> + <div id="nftJsonMetaDataAlt3" 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('nftJsonMetaDataAlt3') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0x60e4d786628fea6478f785a6d7e704777c86a7c6' }) + ) + </script> </div> </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('nftJsonMetaDataAlt3') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0x60e4d786628fea6478f785a6d7e704777c86a7c6' }) - ) - </script> + </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">NFT Example: through JSON meta data</h5> + <div class="px-4"> + <div id="nftJsonMetaDataAlt4" 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('nftJsonMetaDataAlt4') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0x495f947276749ce646f68ac8c248420045cb7b5e', id: '42745998150656004690816543961586238000273307462307754421658803578179357246440' }) + ) + </script> + </div> </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">NFT Example: through JSON meta data</h5> - <div class="px-4"> - <div id="nftJsonMetaDataAlt4" class="container d-flex justify-content-center token-image pt-2"></div> + <div class="row px-2 pt-5"> + <h1>Others</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: Failed loading</h5> + <div class="px-4"> + <div id="tokenThree" 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('tokenThree') + ).render( + React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0xa0bed124a09ac2Bd41b10349d8d224fe3c955eb' }) + ) + </script> </div> - </div> - <div class="px-4 pt-3"> - <script> - ReactDOM.createRoot( - document.getElementById('nftJsonMetaDataAlt4') - ).render( - React.createElement(window.ReactTokenImage.TokenImage, { className:"Token", blockchain: 'ethereum', address: '0x495f947276749ce646f68ac8c248420045cb7b5e', id: '42745998150656004690816543961586238000273307462307754421658803578179357246440' }) - ) - </script> </div> </div> </div> </div> - </div> </div> </body> diff --git a/dev.html b/dev.html index 0b052e7..9645e11 100644 --- a/dev.html +++ b/dev.html @@ -9,7 +9,7 @@ <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script crossorigin src="https://unpkg.com/@depay/solana-web3.js@1"></script> - <script crossorigin src="https://unpkg.com/@depay/web3-blockchains@8"></script> + <script crossorigin src="https://unpkg.com/@depay/web3-blockchains@9"></script> <script crossorigin src="https://unpkg.com/@depay/web3-client@10"></script> <script crossorigin src="https://unpkg.com/@depay/web3-tokens@10"></script> <script src="tmp/index.dev.js"></script> diff --git a/package.evm.json b/package.evm.json index 9167769..a3880f6 100644 --- a/package.evm.json +++ b/package.evm.json @@ -1,7 +1,7 @@ { "name": "@depay/react-token-image-evm", "moduleName": "ReactTokenImage", - "version": "4.13.0", + "version": "4.14.0", "description": "React component to display token images with fallbacks and unknown state.", "main": "./dist/umd/index.evm.js", "module": "./dist/esm/index.evm.js", @@ -24,7 +24,7 @@ "homepage": "https://depay.com", "private": false, "peerDependencies": { - "@depay/web3-blockchains": "^8.4.2", + "@depay/web3-blockchains": "^9.0.0", "@depay/web3-client-evm": "^10.16.3", "@depay/web3-tokens-evm": "^10.1.0", "ethers": "^5.7.1", diff --git a/package.json b/package.json index 7e556e1..914f527 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@depay/react-token-image", "moduleName": "ReactTokenImage", - "version": "4.13.0", + "version": "4.14.0", "description": "React component to display token images with fallbacks and unknown state.", "main": "./dist/umd/index.js", "module": "./dist/esm/index.js", @@ -36,7 +36,7 @@ "private": false, "peerDependencies": { "@depay/solana-web3.js": "^1.25.1", - "@depay/web3-blockchains": "^8.4.2", + "@depay/web3-blockchains": "^9.0.0", "@depay/web3-client": "^10.16.3", "@depay/web3-tokens": "^10.1.0", "ethers": "^5.7.1", @@ -51,7 +51,7 @@ "@babel/preset-env": "^7.12.7", "@babel/preset-react": "^7.12.7", "@depay/solana-web3.js": "^1.25.1", - "@depay/web3-blockchains": "^8.4.2", + "@depay/web3-blockchains": "^9.0.0", "@depay/web3-client": "^10.16.3", "@depay/web3-tokens": "^10.1.0", "@rollup/plugin-commonjs": "^18.0.0", diff --git a/package.solana.json b/package.solana.json index 8504edb..49330a2 100644 --- a/package.solana.json +++ b/package.solana.json @@ -1,7 +1,7 @@ { "name": "@depay/react-token-image-solana", "moduleName": "ReactTokenImage", - "version": "4.13.0", + "version": "4.14.0", "description": "React component to display token images with fallbacks and unknown state.", "main": "./dist/umd/index.solana.js", "module": "./dist/esm/index.solana.js", @@ -25,7 +25,7 @@ "private": false, "peerDependencies": { "@depay/solana-web3.js": "^1.25.1", - "@depay/web3-blockchains": "^8.4.2", + "@depay/web3-blockchains": "^9.0.0", "@depay/web3-client-solana": "^10.16.3", "@depay/web3-tokens-solana": "^10.1.0", "ethers": "^5.7.1", diff --git a/yarn.lock b/yarn.lock index c6ed3fa..8a90ff3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -967,10 +967,10 @@ dependencies: bs58 "^5.0.0" -"@depay/web3-blockchains@^8.4.2": - version "8.4.2" - resolved "https://registry.yarnpkg.com/@depay/web3-blockchains/-/web3-blockchains-8.4.2.tgz#3f5f072f337acc334e5f0f097627dd85af85848c" - integrity sha512-kvzTy0R7zBqL6w2CSRGm3SO1K9QuYpuOCa0BTMt4O7ATqxFg+uXor3uWjS8oWvlQwOdqLl8WT7aaKT8OD63KXw== +"@depay/web3-blockchains@^9.0.0": + version "9.0.0" + resolved "https://registry.yarnpkg.com/@depay/web3-blockchains/-/web3-blockchains-9.0.0.tgz#eaac5491e8f2c0dea84474af7db1a6af4f8cfb35" + integrity sha512-E1LhENbPbJ5JtQ1Im2ojwVPsqCM9H/VT937ZEXC2gs12M9NnzRM6XqvFsyhLh2zH4VnCDDbkyNYFvfigdn0HaA== "@depay/web3-client@^10.16.3": version "10.16.3"