Skip to content

Commit 4fae210

Browse files
10xSebastian10xSebastian
committed
v1.1.0: uses base64 image png for native tokens
1 parent 6b22053 commit 4fae210

File tree

9 files changed

+114
-705
lines changed

9 files changed

+114
-705
lines changed

‎cypress/integration/basics.js‎

Lines changed: 29 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dev.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@
88
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
99
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
1010
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
11+
<script crossorigin src="https://unpkg.com/depay-web3-blockchains@2/dist/umd/index.js"></script>
12+
<script crossorigin src="https://unpkg.com/depay-web3-constants@2/dist/umd/index.js"></script>
1113
<script src="dist/umd/index.dev.js"></script>
1214
</head>
1315
<body>
1416
<div id="tokenOne" class="container d-flex justify-content-center pt-5"></div>
1517
<div id="tokenTwo" class="container d-flex justify-content-center pt-5"></div>
1618
<div style="background: red; width: 80px; height: 80px; border-radius: 999px;" id="tokenThree" class="container d-flex justify-content-center pt-5"></div>
19+
<div id="tokenFour" class="container d-flex justify-content-center pt-5"></div>
1720
<script>
1821
ReactDOM.render(
1922
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb' }),
@@ -27,6 +30,10 @@
2730
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xa0bed124a09ac2Bd941b0349d8d224fe3c955eb' }),
2831
document.getElementById('tokenThree')
2932
)
33+
ReactDOM.render(
34+
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' }),
35+
document.getElementById('tokenFour')
36+
)
3037
</script>
3138
</body>
3239
</html>

‎dist/cjs/index.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
Object.defineProperty(exports, '__esModule', { value: true });
44

55
var React = require('react');
6+
var depayWeb3Blockchains = require('depay-web3-blockchains');
7+
var depayWeb3Constants = require('depay-web3-constants');
68

79
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
810

@@ -17,7 +19,13 @@ let TokenImage = function(props){
1719
const blockchain = props.blockchain.toLowerCase();
1820
const address = props.address;
1921

20-
React.useEffect(()=>setSrc(trustWalletAddress({ blockchain, address })), [blockchain, address]);
22+
React.useEffect(()=>{
23+
if(depayWeb3Constants.CONSTANTS[blockchain].NATIVE.toLowerCase() == address.toLowerCase()) {
24+
setSrc(depayWeb3Blockchains.Blockchain.findByName(blockchain).logo);
25+
} else {
26+
setSrc(trustWalletAddress({ blockchain, address }));
27+
}
28+
}, [blockchain, address]);
2129

2230
const trustWalletAddress = ({ blockchain, address })=> {
2331
return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${blockchain}/assets/${address}/logo.png`
@@ -33,10 +41,12 @@ let TokenImage = function(props){
3341
}
3442
};
3543

44+
if(src == undefined) { return null }
45+
3646
return(
3747
React__default['default'].createElement('img', {
3848
src: src ,
39-
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 28}}
49+
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 38}}
4050
)
4151
)
4252
};

‎dist/es/index.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React, { useState, useEffect } from 'react';
2+
import { Blockchain } from 'depay-web3-blockchains';
3+
import { CONSTANTS } from 'depay-web3-constants';
24

35
const _jsxFileName = "/Users/sebastian/Work/DePay/depay-react-token-image/src/index.jsx";
46
let TokenImage = function(props){
@@ -9,7 +11,13 @@ let TokenImage = function(props){
911
const blockchain = props.blockchain.toLowerCase();
1012
const address = props.address;
1113

12-
useEffect(()=>setSrc(trustWalletAddress({ blockchain, address })), [blockchain, address]);
14+
useEffect(()=>{
15+
if(CONSTANTS[blockchain].NATIVE.toLowerCase() == address.toLowerCase()) {
16+
setSrc(Blockchain.findByName(blockchain).logo);
17+
} else {
18+
setSrc(trustWalletAddress({ blockchain, address }));
19+
}
20+
}, [blockchain, address]);
1321

1422
const trustWalletAddress = ({ blockchain, address })=> {
1523
return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${blockchain}/assets/${address}/logo.png`
@@ -25,10 +33,12 @@ let TokenImage = function(props){
2533
}
2634
};
2735

36+
if(src == undefined) { return null }
37+
2838
return(
2939
React.createElement('img', {
3040
src: src ,
31-
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 28}}
41+
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 38}}
3242
)
3343
)
3444
};

‎dist/umd/index.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
(function (global, factory) {
2-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
3-
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
4-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTokenImage = {}, global.React));
5-
}(this, (function (exports, React) { 'use strict';
2+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('depay-web3-blockchains'), require('depay-web3-constants')) :
3+
typeof define === 'function' && define.amd ? define(['exports', 'react', 'depay-web3-blockchains', 'depay-web3-constants'], factory) :
4+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTokenImage = {}, global.React, global.Web3Blockchains, global.Web3Constants));
5+
}(this, (function (exports, React, depayWeb3Blockchains, depayWeb3Constants) { 'use strict';
66

77
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
88

@@ -17,7 +17,13 @@
1717
const blockchain = props.blockchain.toLowerCase();
1818
const address = props.address;
1919

20-
React.useEffect(()=>setSrc(trustWalletAddress({ blockchain, address })), [blockchain, address]);
20+
React.useEffect(()=>{
21+
if(depayWeb3Constants.CONSTANTS[blockchain].NATIVE.toLowerCase() == address.toLowerCase()) {
22+
setSrc(depayWeb3Blockchains.Blockchain.findByName(blockchain).logo);
23+
} else {
24+
setSrc(trustWalletAddress({ blockchain, address }));
25+
}
26+
}, [blockchain, address]);
2127

2228
const trustWalletAddress = ({ blockchain, address })=> {
2329
return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${blockchain}/assets/${address}/logo.png`
@@ -33,10 +39,12 @@
3339
}
3440
};
3541

42+
if(src == undefined) { return null }
43+
3644
return(
3745
React__default['default'].createElement('img', {
3846
src: src ,
39-
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 28}}
47+
onError: handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 38}}
4048
)
4149
)
4250
};

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "depay-react-token-image",
33
"moduleName": "ReactTokenImage",
4-
"version": "1.0.0",
4+
"version": "1.1.0",
55
"description": "React component to display token images with fallbacks and unknown state.",
66
"main": "./dist/cjs/index.js",
77
"files": [
@@ -33,7 +33,10 @@
3333
},
3434
"homepage": "https://github.com/DePayFi/depay-react-token-image#readme",
3535
"private": false,
36-
"dependencies": {},
36+
"dependencies": {
37+
"depay-web3-blockchains": "^2.1.0",
38+
"depay-web3-constants": "^2.1.0"
39+
},
3740
"peerDependencies": {
3841
"react": "^17",
3942
"react-dom": "^17"

‎rollup.globals.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export default {
22
'react': 'React',
33
'react-dom': 'ReactDOM',
4-
'depay-react-dialog': 'ReactDialog'
4+
'depay-web3-constants': 'Web3Constants',
5+
'depay-web3-blockchains': 'Web3Blockchains',
56
}

‎src/index.jsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React, { useState, useEffect } from 'react'
2+
import { Blockchain } from 'depay-web3-blockchains'
3+
import { CONSTANTS } from 'depay-web3-constants'
24

35
let TokenImage = function(props){
46

@@ -8,7 +10,13 @@ let TokenImage = function(props){
810
const blockchain = props.blockchain.toLowerCase()
911
const address = props.address
1012

11-
useEffect(()=>setSrc(trustWalletAddress({ blockchain, address })), [blockchain, address])
13+
useEffect(()=>{
14+
if(CONSTANTS[blockchain].NATIVE.toLowerCase() == address.toLowerCase()) {
15+
setSrc(Blockchain.findByName(blockchain).logo)
16+
} else {
17+
setSrc(trustWalletAddress({ blockchain, address }))
18+
}
19+
}, [blockchain, address])
1220

1321
const trustWalletAddress = ({ blockchain, address })=> {
1422
return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${blockchain}/assets/${address}/logo.png`
@@ -24,6 +32,8 @@ let TokenImage = function(props){
2432
}
2533
}
2634

35+
if(src == undefined) { return null }
36+
2737
return(
2838
<img
2939
src={ src }

0 commit comments

Comments
 (0)