Skip to content

Commit c2d53ac

Browse files
10xSebastian10xSebastian
committed
v4.0.0: upgrade to react 18 and adds support for polygon
1 parent 812c0e1 commit c2d53ac

File tree

6 files changed

+278
-102
lines changed

6 files changed

+278
-102
lines changed

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ render() {
2424
}
2525
```
2626

27+
## Support
28+
29+
This library supports the following blockchains:
30+
31+
- [Ethereum](https://ethereum.org)
32+
- [BNB Smart Chain](https://www.binance.org/smartChain)
33+
- [Polygon](https://polygon.technology)
34+
2735
## Functionalities
2836

2937
### TokenImage

‎cypress/integration/basics.js‎

Lines changed: 52 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dev.html‎

Lines changed: 166 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,173 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="icon" type="image/png" href="https://depay.fi/favicon.png"/>
77
<title>Development</title>
8-
<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">
9-
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
10-
<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@4"></script>
12-
<script crossorigin src="https://unpkg.com/@depay/web3-constants@5"></script>
8+
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
9+
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
10+
<script crossorigin src="https://unpkg.com/@depay/web3-blockchains@4/dist/umd/index.js"></script>
11+
<script crossorigin src="https://unpkg.com/@depay/web3-constants@5/dist/umd/index.js"></script>
1312
<script src="tmp/index.dev.js"></script>
13+
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.css">
14+
<style>
15+
.btn-primary {
16+
color: #fff;
17+
background-color: #ea357a !important;
18+
border: 1px solid #ea357a !important;
19+
padding: 0.35rem 1.2rem !important;
20+
box-shadow: none;
21+
outline: none;
22+
}
23+
.btn-primary:hover {
24+
background-color: #db3071 !important;
25+
}
26+
.token-image img {
27+
max-width: 80%;
28+
}
29+
</style>
1430
</head>
15-
<body>
16-
<div id="tokenOne" class="container d-flex justify-content-center pt-5"></div>
17-
<div id="tokenTwo" class="container d-flex justify-content-center pt-5"></div>
18-
<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>
20-
<div id="tokenFive" class="container d-flex justify-content-center pt-5"></div>
21-
<script>
22-
ReactDOM.render(
23-
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb' }),
24-
document.getElementById('tokenOne')
25-
)
26-
ReactDOM.render(
27-
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xa0bed124a09ac2Bd941b10349d8d224fe3c955eb' }),
28-
document.getElementById('tokenTwo')
29-
)
30-
ReactDOM.render(
31-
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xa0bed124a09ac2Bd941b0349d8d224fe3c955eb' }),
32-
document.getElementById('tokenThree')
33-
)
34-
ReactDOM.render(
35-
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' }),
36-
document.getElementById('tokenFour')
37-
)
38-
ReactDOM.render(
39-
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'bsc', address: '0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82' }),
40-
document.getElementById('tokenFive')
41-
)
42-
</script>
31+
<body style="background-color: #FAFAFA;">
32+
<div class="container py-4">
33+
34+
<div class="py-2 pb-3 text-center">
35+
<a href="https://depay.fi" target="_blank">
36+
<img alt="DePay Logo" class="navbar-logo shadow-sm" src="https://depay.fi/logo.svg" style="height: 50px; width: 50px; border-radius: 999px;"/>
37+
</a>
38+
</div>
39+
40+
<div class="row px-2">
41+
42+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
43+
<div class="px-0 py-4 rounded-lg bg-white border">
44+
<div class="col px-0">
45+
<div class="overflow-auto">
46+
<h5 class="px-4">Token</h5>
47+
<div class="px-4">
48+
<div id="tokenOne" class="container d-flex justify-content-center token-image pt-2"></div>
49+
</div>
50+
</div>
51+
<div class="px-4 pt-3">
52+
<script>
53+
ReactDOM.createRoot(
54+
document.getElementById('tokenOne')
55+
).render(
56+
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb' }),
57+
)
58+
</script>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
65+
<div class="px-0 py-4 rounded-lg bg-white border">
66+
<div class="col px-0">
67+
<div class="overflow-auto">
68+
<h5 class="px-4">Token</h5>
69+
<div class="px-4">
70+
<div id="tokenTwo" class="container d-flex justify-content-center token-image pt-2"></div>
71+
</div>
72+
</div>
73+
<div class="px-4 pt-3">
74+
<script>
75+
ReactDOM.createRoot(
76+
document.getElementById('tokenTwo')
77+
).render(
78+
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xa0bed124a09ac2Bd941b10349d8d224fe3c955eb' })
79+
)
80+
</script>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
86+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
87+
<div class="px-0 py-4 rounded-lg bg-white border">
88+
<div class="col px-0">
89+
<div class="overflow-auto">
90+
<h5 class="px-4">Token: Failed loading</h5>
91+
<div class="px-4">
92+
<div id="tokenThree" class="container d-flex justify-content-center token-image pt-2"></div>
93+
</div>
94+
</div>
95+
<div class="px-4 pt-3">
96+
<script>
97+
ReactDOM.createRoot(
98+
document.getElementById('tokenThree')
99+
).render(
100+
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xa0bed124a09ac2Bd41b10349d8d224fe3c955eb' })
101+
)
102+
</script>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
108+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
109+
<div class="px-0 py-4 rounded-lg bg-white border">
110+
<div class="col px-0">
111+
<div class="overflow-auto">
112+
<h5 class="px-4">Token: Native Ethereum</h5>
113+
<div class="px-4">
114+
<div id="tokenFour" class="container d-flex justify-content-center token-image pt-2"></div>
115+
</div>
116+
</div>
117+
<div class="px-4 pt-3">
118+
<script>
119+
ReactDOM.createRoot(
120+
document.getElementById('tokenFour')
121+
).render(
122+
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'ethereum', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' })
123+
)
124+
</script>
125+
</div>
126+
</div>
127+
</div>
128+
</div>
129+
130+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
131+
<div class="px-0 py-4 rounded-lg bg-white border">
132+
<div class="col px-0">
133+
<div class="overflow-auto">
134+
<h5 class="px-4">Token: Native BSC</h5>
135+
<div class="px-4">
136+
<div id="tokenFive" class="container d-flex justify-content-center token-image pt-2"></div>
137+
</div>
138+
</div>
139+
<div class="px-4 pt-3">
140+
<script>
141+
ReactDOM.createRoot(
142+
document.getElementById('tokenFive')
143+
).render(
144+
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'bsc', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' })
145+
)
146+
</script>
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
152+
<div class="d-block d-md-inline-block p-2 col-12 col-md-4">
153+
<div class="px-0 py-4 rounded-lg bg-white border">
154+
<div class="col px-0">
155+
<div class="overflow-auto">
156+
<h5 class="px-4">Token: Native Polygon</h5>
157+
<div class="px-4">
158+
<div id="tokenSix" class="container d-flex justify-content-center token-image pt-2"></div>
159+
</div>
160+
</div>
161+
<div class="px-4 pt-3">
162+
<script>
163+
ReactDOM.createRoot(
164+
document.getElementById('tokenSix')
165+
).render(
166+
React.createElement(window.ReactTokenImage.TokenImage, { blockchain: 'polygon', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' })
167+
)
168+
</script>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
174+
</div>
175+
</div>
43176
</body>
44177
</html>

‎package.json‎

Lines changed: 11 additions & 11 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": "3.1.0",
4+
"version": "4.0.0",
55
"description": "React component to display token images with fallbacks and unknown state.",
66
"main": "./dist/umd/index.js",
77
"module": "./dist/esm/index.js",
@@ -37,20 +37,20 @@
3737
"dependencies": {
3838
},
3939
"peerDependencies": {
40-
"@depay/web3-blockchains": "^4.0.0",
41-
"@depay/web3-constants": "^5.0.0",
42-
"react": "^17",
43-
"react-dom": "^17"
40+
"@depay/web3-blockchains": "^4.5.0",
41+
"@depay/web3-constants": "^5.1.0",
42+
"react": "^18",
43+
"react-dom": "^18"
4444
},
4545
"engines": {
46-
"node": ">=10"
46+
"node": ">=16"
4747
},
4848
"devDependencies": {
4949
"@babel/core": "^7.12.9",
5050
"@babel/preset-env": "^7.12.7",
5151
"@babel/preset-react": "^7.12.7",
52-
"@depay/web3-blockchains": "^4.0.0",
53-
"@depay/web3-constants": "^5.0.0",
52+
"@depay/web3-blockchains": "^4.5.0",
53+
"@depay/web3-constants": "^5.1.0",
5454
"@rollup/plugin-commonjs": "^18.0.0",
5555
"@rollup/plugin-node-resolve": "^11.2.1",
5656
"@rollup/plugin-replace": "^2.4.2",
@@ -64,9 +64,9 @@
6464
"eslint-plugin-import": "^2.22.1",
6565
"eslint-plugin-react": "^7.21.5",
6666
"eslint-plugin-react-hooks": "^4.2.0",
67-
"react": "^17",
68-
"react-dom": "^17",
69-
"react-test-renderer": "^17",
67+
"react": "^18",
68+
"react-dom": "^18",
69+
"react-test-renderer": "^18",
7070
"react-testing-library": "^8.0.1",
7171
"rollup": "^2.34.2",
7272
"rollup-plugin-livereload": "^2.0.0",

‎src/index.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ let TokenImage = function(props){
3030
case 'bsc':
3131
return 'smartchain'
3232
break;
33+
case 'polygon':
34+
return 'polygon'
35+
break;
3336
default:
3437
throw('DePayReactTokenImage: Unknown blockchain')
3538
}
@@ -41,7 +44,7 @@ let TokenImage = function(props){
4144
setSrc(`https://integrate.depay.fi/tokens/${blockchain}/${address}/image`)
4245
} else {
4346
setSource('unknown')
44-
setSrc('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACABAMAAAAxEHz4AAAAGFBMVEVHcEz///////////////////////////8dS1W+AAAAB3RSTlMAHklzmMLqCsLrGwAAAQ9JREFUeNrtlrsOgkAQRRdFbDcae4IFrZEYazXRVitqQ2Hrk/19BVdX7XYuiQX3VDZzMsxrVYQQQkibGIyzLNHi8OHaVJRLWXgwMy8KLYnfGEchEFTxjp2/wHxRalBg9v4CNAXzwxYVXCSC2ypJstx+g6/ATaAdqImvoHxHzEVFcPGqWwtOnoLFx++6DGdgq9NnG+T0K8EVEPTqnrZbEKGCFO1CDs2BG2UZbpnABEwMJIA1IRSeZfdCgV8wsjdVnEBuLyKyBu51Fb+xpfhPRgdsgYqeM6DlQwQmoA62AvISgIsc2j0EaxgDL0ojx/CCCs4KPGYnVHCk4CEg7SbIKqbqfyeRAgoaERBCCCGESLgDeRfMNogh3QMAAAAASUVORK5CYII=')
47+
setSrc('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjgzLjUgMjgzLjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI4My41IDI4My41OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxjaXJjbGUgZmlsbD0iI0YwRUZFRiIgY3g9IjE0MS43IiBjeT0iMTQxLjciIHI9IjE0MS43Ii8+CjxnPgoJPHBhdGggZmlsbD0iI0FCQUJBQiIgZD0iTTEyNywxNzUuMXYtNC40YzAtOC40LDEuMS0xNS4zLDMuNC0yMC43YzIuMy01LjQsNS4xLTEwLDguNC0xMy44YzMuMy0zLjcsNi42LTcsMTAuMS05LjdzNi4zLTUuNiw4LjYtOC41CgkJYzIuMy0yLjksMy40LTYuNCwzLjQtMTAuNWMwLTUtMS4xLTguNy0zLjMtMTEuMWMtMi4yLTIuNC01LTQtOC40LTQuOGMtMy40LTAuOC02LjktMS4zLTEwLjUtMS4zYy01LjgsMC0xMS44LDEtMTcuOSwyLjkKCQljLTYuMSwxLjktMTEuNSw0LjctMTYsOC40Vjc0YzIuMy0xLjcsNS40LTMuMyw5LjQtNC45YzQtMS42LDguNC0yLjksMTMuNC00YzUtMS4xLDEwLjEtMS42LDE1LjUtMS42YzguMSwwLDE1LjEsMS4xLDIxLjEsMy40CgkJYzYsMi4zLDEwLjgsNS41LDE0LjcsOS41YzMuOCw0LDYuNyw4LjcsOC42LDE0LjFjMS45LDUuMywyLjksMTEuMSwyLjksMTcuMmMwLDYuNi0xLjEsMTItMy40LDE2LjNjLTIuMyw0LjMtNS4xLDgtOC41LDExLjIKCQljLTMuNCwzLjItNi44LDYuNC0xMC4yLDkuNWMtMy40LDMuMS02LjMsNi44LTguNiwxMWMtMi4zLDQuMi0zLjQsOS41LTMuNCwxNS45djMuNEgxMjd6IE0xMjUuMiwyMTguMnYtMjcuN2gzM3YyNy43SDEyNS4yeiIvPgo8L2c+Cjwvc3ZnPgo=')
4548
}
4649
}
4750

0 commit comments

Comments
 (0)