From 0f703b5b6a4880f32f4d811315a8c93fd5640c61 Mon Sep 17 00:00:00 2001 From: Sebastian Pape Date: Fri, 20 Aug 2021 21:13:44 +0200 Subject: [PATCH] v1.1.2: fix trustwallet assets mapping for bsc --- cypress/integration/basics.js | 15 ++++++++ dev.html | 5 +++ dist/umd/index.dev.js | 69 +++++++++++++++++++++++++++++++++++ package.json | 2 +- src/index.jsx | 15 +++++++- 5 files changed, 104 insertions(+), 2 deletions(-) create mode 100644 dist/umd/index.dev.js diff --git a/cypress/integration/basics.js b/cypress/integration/basics.js index a5f4574..a852417 100644 --- a/cypress/integration/basics.js +++ b/cypress/integration/basics.js @@ -17,6 +17,20 @@ describe('ReactTokenImage', () => { }) }) }) + + it('Loads token images from Trust Wallet correctly for bsc', () => { + cy.visit('cypress/test.html').then((contentWindow) => { + cy.document().then((document) => { + + ReactDOM.render( + React.createElement(TokenImage, { blockchain: 'bsc', address: '0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82' }), + document.getElementById('app') + ) + + cy.get('img').should('have.attr', 'src', 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain/assets/0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82/logo.png') + }) + }) + }) it('Loads token images from DePay PRO if Trust Wallet image was not found', () => { cy.visit('cypress/test.html').then((contentWindow) => { @@ -73,4 +87,5 @@ describe('ReactTokenImage', () => { }) }) }) + }) diff --git a/dev.html b/dev.html index 2c58125..f0f5ddf 100644 --- a/dev.html +++ b/dev.html @@ -17,6 +17,7 @@
+
diff --git a/dist/umd/index.dev.js b/dist/umd/index.dev.js new file mode 100644 index 0000000..e7b94b9 --- /dev/null +++ b/dist/umd/index.dev.js @@ -0,0 +1,69 @@ + +(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document); +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('depay-web3-blockchains'), require('depay-web3-constants')) : + typeof define === 'function' && define.amd ? define(['exports', 'react', 'depay-web3-blockchains', 'depay-web3-constants'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTokenImage = {}, global.React, global.Web3Blockchains, global.Web3Constants)); +}(this, (function (exports, React, depayWeb3Blockchains, depayWeb3Constants) { 'use strict'; + + function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + + var React__default = /*#__PURE__*/_interopDefaultLegacy(React); + + const _jsxFileName = "/Users/sebastian/Work/DePay/depay-react-token-image/src/index.jsx"; + let TokenImage = function(props){ + + const [src, setSrc] = React.useState(); + const [source, setSource] = React.useState('trustwallet'); + + const blockchain = props.blockchain.toLowerCase(); + const address = props.address; + + React.useEffect(()=>{ + if(depayWeb3Constants.CONSTANTS[blockchain].NATIVE.toLowerCase() == address.toLowerCase()) { + setSrc(depayWeb3Blockchains.Blockchain.findByName(blockchain).logo); + } else { + setSrc(trustWalletAddress({ blockchain, address })); + } + }, [blockchain, address]); + + const trustWalletAddress = ({ blockchain, address })=> { + return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${mapBlockchainName(blockchain)}/assets/${address}/logo.png` + }; + + const mapBlockchainName = (blockchain)=>{ + switch (blockchain) { + case 'ethereum': + return 'ethereum' + case 'bsc': + return 'smartchain' + default: + throw('DePayReactTokenImage: Unknown blockchain') + } + }; + + const handleLoadError = (error)=> { + if(source == 'trustwallet') { + setSource('depay'); + setSrc(`https://api.depay.pro/v1/images/tokens/${blockchain}/${address}`); + } else { + setSource('unknown'); + setSrc('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACABAMAAAAxEHz4AAAAGFBMVEVHcEz///////////////////////////8dS1W+AAAAB3RSTlMAHklzmMLqCsLrGwAAAQ9JREFUeNrtlrsOgkAQRRdFbDcae4IFrZEYazXRVitqQ2Hrk/19BVdX7XYuiQX3VDZzMsxrVYQQQkibGIyzLNHi8OHaVJRLWXgwMy8KLYnfGEchEFTxjp2/wHxRalBg9v4CNAXzwxYVXCSC2ypJstx+g6/ATaAdqImvoHxHzEVFcPGqWwtOnoLFx++6DGdgq9NnG+T0K8EVEPTqnrZbEKGCFO1CDs2BG2UZbpnABEwMJIA1IRSeZfdCgV8wsjdVnEBuLyKyBu51Fb+xpfhPRgdsgYqeM6DlQwQmoA62AvISgIsc2j0EaxgDL0ojx/CCCs4KPGYnVHCk4CEg7SbIKqbqfyeRAgoaERBCCCGESLgDeRfMNogh3QMAAAAASUVORK5CYII='); + } + }; + + if(src == undefined) { return null } + + return( + React__default['default'].createElement('img', { + src: src , + onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 51}} + ) + ) + }; + + exports.TokenImage = TokenImage; + + Object.defineProperty(exports, '__esModule', { value: true }); + +}))); diff --git a/package.json b/package.json index d9479bc..ac0eee2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "depay-react-token-image", "moduleName": "ReactTokenImage", - "version": "1.1.1", + "version": "1.1.2", "description": "React component to display token images with fallbacks and unknown state.", "main": "./dist/cjs/index.js", "files": [ diff --git a/src/index.jsx b/src/index.jsx index b2a581b..122264e 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -19,7 +19,20 @@ let TokenImage = function(props){ }, [blockchain, address]) const trustWalletAddress = ({ blockchain, address })=> { - return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${blockchain}/assets/${address}/logo.png` + return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${mapBlockchainName(blockchain)}/assets/${address}/logo.png` + } + + const mapBlockchainName = (blockchain)=>{ + switch (blockchain) { + case 'ethereum': + return 'ethereum' + break; + case 'bsc': + return 'smartchain' + break; + default: + throw('DePayReactTokenImage: Unknown blockchain') + } } const handleLoadError = (error)=> {