a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'release/v2022.04.01-otterscan'

This commit is contained in:
Willian Mitsuda 2022-04-12 16:18:25 -03:00
parent 0f9f1e5211 65cb02bfc2
commit 6f0db7654d
28 changed files with 527 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
chains

@ -1 +1 @@
Subproject commit af79eb7387b2a4f747bf31cb318d4f1db43c4d84 Subproject commit 9a908009cd88293a08222f75888d7f1bb82c13c8

106
package-lock.json generated
View File

@ -22,7 +22,7 @@
"@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18", "@fortawesome/react-fontawesome": "^0.1.18",
"@headlessui/react": "^1.5.0", "@headlessui/react": "^1.5.0",
"@testing-library/jest-dom": "^5.16.3", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.24", "@types/jest": "^26.0.24",
@ -33,7 +33,7 @@
"@types/react-highlight": "^0.12.5", "@types/react-highlight": "^0.12.5",
"@types/react-syntax-highlighter": "^13.5.2", "@types/react-syntax-highlighter": "^13.5.2",
"chart.js": "^3.7.1", "chart.js": "^3.7.1",
"ethers": "^5.6.1", "ethers": "^5.6.2",
"highlightjs-solidity": "^2.0.5", "highlightjs-solidity": "^2.0.5",
"react": "^17.0.2", "react": "^17.0.2",
"react-blockies": "^1.4.1", "react-blockies": "^1.4.1",
@ -42,7 +42,7 @@
"react-error-boundary": "^3.1.4", "react-error-boundary": "^3.1.4",
"react-helmet-async": "^1.2.3", "react-helmet-async": "^1.2.3",
"react-image": "^4.0.3", "react-image": "^4.0.3",
"react-router-dom": "^6.2.2", "react-router-dom": "^6.3.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-syntax-highlighter": "^15.5.0", "react-syntax-highlighter": "^15.5.0",
"serve": "^13.0.2", "serve": "^13.0.2",
@ -1594,9 +1594,9 @@
} }
}, },
"node_modules/@ethersproject/bytes": { "node_modules/@ethersproject/bytes": {
"version": "5.6.0", "version": "5.6.1",
"resolved": "https://registry.npmjs.org/@ethersproject/bytes/-/bytes-5.6.0.tgz", "resolved": "https://registry.npmjs.org/@ethersproject/bytes/-/bytes-5.6.1.tgz",
"integrity": "sha512-3hJPlYemb9V4VLfJF5BfN0+55vltPZSHU3QKUyP9M3Y2TcajbiRrz65UG+xVHOzBereB1b9mn7r12o177xgN7w==", "integrity": "sha512-NwQt7cKn5+ZE4uDn+X5RAXLp46E1chXoaMmrxAyA0rblpxz8t58lVkrHXoRIn0lz1joQElQ8410GqhTqMOwc6g==",
"funding": [ "funding": [
{ {
"type": "individual", "type": "individual",
@ -1775,9 +1775,9 @@
] ]
}, },
"node_modules/@ethersproject/networks": { "node_modules/@ethersproject/networks": {
"version": "5.6.0", "version": "5.6.1",
"resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.6.0.tgz", "resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.6.1.tgz",
"integrity": "sha512-DaVzgyThzHgSDLuURhvkp4oviGoGe9iTZW4jMEORHDRCgSZ9K9THGFKqL+qGXqPAYLEgZTf5z2w56mRrPR1MjQ==", "integrity": "sha512-b2rrupf3kCTcc3jr9xOWBuHylSFtbpJf79Ga7QR98ienU2UqGimPGEsYMgbI29KHJfA5Us89XwGVmxrlxmSrMg==",
"funding": [ "funding": [
{ {
"type": "individual", "type": "individual",
@ -1830,9 +1830,9 @@
} }
}, },
"node_modules/@ethersproject/providers": { "node_modules/@ethersproject/providers": {
"version": "5.6.1", "version": "5.6.2",
"resolved": "https://registry.npmjs.org/@ethersproject/providers/-/providers-5.6.1.tgz", "resolved": "https://registry.npmjs.org/@ethersproject/providers/-/providers-5.6.2.tgz",
"integrity": "sha512-w8Wx15nH+aVDvnoKCyI1f3x0B5idmk/bDJXMEUqCfdO8Eadd0QpDx9lDMTMmenhOmf9vufLJXjpSm24D3ZnVpg==", "integrity": "sha512-6/EaFW/hNWz+224FXwl8+HdMRzVHt8DpPmu5MZaIQqx/K/ELnC9eY236SMV7mleCM3NnEArFwcAAxH5kUUgaRg==",
"funding": [ "funding": [
{ {
"type": "individual", "type": "individual",
@ -2970,9 +2970,9 @@
} }
}, },
"node_modules/@testing-library/jest-dom": { "node_modules/@testing-library/jest-dom": {
"version": "5.16.3", "version": "5.16.4",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.3.tgz", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
"integrity": "sha512-u5DfKj4wfSt6akfndfu1eG06jsdyA/IUrlX2n3pyq5UXgXMhXY+NJb8eNK/7pqPWAhCKsCGWDdDO0zKMKAYkEA==", "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.9.2", "@babel/runtime": "^7.9.2",
"@types/testing-library__jest-dom": "^5.9.1", "@types/testing-library__jest-dom": "^5.9.1",
@ -8266,9 +8266,9 @@
} }
}, },
"node_modules/ethers": { "node_modules/ethers": {
"version": "5.6.1", "version": "5.6.2",
"resolved": "https://registry.npmjs.org/ethers/-/ethers-5.6.1.tgz", "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.6.2.tgz",
"integrity": "sha512-qtl/2W+dwmUa5Z3JqwsbV3JEBZZHNARe5K/A2ePcNAuhJYnEKIgGOT/O9ouPwBijSqVoQnmQMzi5D48LFNOY2A==", "integrity": "sha512-EzGCbns24/Yluu7+ToWnMca3SXJ1Jk1BvWB7CCmVNxyOeM4LLvw2OLuIHhlkhQk1dtOcj9UMsdkxUh8RiG1dxQ==",
"funding": [ "funding": [
{ {
"type": "individual", "type": "individual",
@ -8287,7 +8287,7 @@
"@ethersproject/base64": "5.6.0", "@ethersproject/base64": "5.6.0",
"@ethersproject/basex": "5.6.0", "@ethersproject/basex": "5.6.0",
"@ethersproject/bignumber": "5.6.0", "@ethersproject/bignumber": "5.6.0",
"@ethersproject/bytes": "5.6.0", "@ethersproject/bytes": "5.6.1",
"@ethersproject/constants": "5.6.0", "@ethersproject/constants": "5.6.0",
"@ethersproject/contracts": "5.6.0", "@ethersproject/contracts": "5.6.0",
"@ethersproject/hash": "5.6.0", "@ethersproject/hash": "5.6.0",
@ -8295,10 +8295,10 @@
"@ethersproject/json-wallets": "5.6.0", "@ethersproject/json-wallets": "5.6.0",
"@ethersproject/keccak256": "5.6.0", "@ethersproject/keccak256": "5.6.0",
"@ethersproject/logger": "5.6.0", "@ethersproject/logger": "5.6.0",
"@ethersproject/networks": "5.6.0", "@ethersproject/networks": "5.6.1",
"@ethersproject/pbkdf2": "5.6.0", "@ethersproject/pbkdf2": "5.6.0",
"@ethersproject/properties": "5.6.0", "@ethersproject/properties": "5.6.0",
"@ethersproject/providers": "5.6.1", "@ethersproject/providers": "5.6.2",
"@ethersproject/random": "5.6.0", "@ethersproject/random": "5.6.0",
"@ethersproject/rlp": "5.6.0", "@ethersproject/rlp": "5.6.0",
"@ethersproject/sha2": "5.6.0", "@ethersproject/sha2": "5.6.0",
@ -14692,9 +14692,9 @@
} }
}, },
"node_modules/react-router": { "node_modules/react-router": {
"version": "6.2.2", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==", "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"dependencies": { "dependencies": {
"history": "^5.2.0" "history": "^5.2.0"
}, },
@ -14703,12 +14703,12 @@
} }
}, },
"node_modules/react-router-dom": { "node_modules/react-router-dom": {
"version": "6.2.2", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==", "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"dependencies": { "dependencies": {
"history": "^5.2.0", "history": "^5.2.0",
"react-router": "6.2.2" "react-router": "6.3.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=16.8", "react": ">=16.8",
@ -20690,9 +20690,9 @@
} }
}, },
"@ethersproject/bytes": { "@ethersproject/bytes": {
"version": "5.6.0", "version": "5.6.1",
"resolved": "https://registry.npmjs.org/@ethersproject/bytes/-/bytes-5.6.0.tgz", "resolved": "https://registry.npmjs.org/@ethersproject/bytes/-/bytes-5.6.1.tgz",
"integrity": "sha512-3hJPlYemb9V4VLfJF5BfN0+55vltPZSHU3QKUyP9M3Y2TcajbiRrz65UG+xVHOzBereB1b9mn7r12o177xgN7w==", "integrity": "sha512-NwQt7cKn5+ZE4uDn+X5RAXLp46E1chXoaMmrxAyA0rblpxz8t58lVkrHXoRIn0lz1joQElQ8410GqhTqMOwc6g==",
"requires": { "requires": {
"@ethersproject/logger": "^5.6.0" "@ethersproject/logger": "^5.6.0"
} }
@ -20791,9 +20791,9 @@
"integrity": "sha512-BiBWllUROH9w+P21RzoxJKzqoqpkyM1pRnEKG69bulE9TSQD8SAIvTQqIMZmmCO8pUNkgLP1wndX1gKghSpBmg==" "integrity": "sha512-BiBWllUROH9w+P21RzoxJKzqoqpkyM1pRnEKG69bulE9TSQD8SAIvTQqIMZmmCO8pUNkgLP1wndX1gKghSpBmg=="
}, },
"@ethersproject/networks": { "@ethersproject/networks": {
"version": "5.6.0", "version": "5.6.1",
"resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.6.0.tgz", "resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.6.1.tgz",
"integrity": "sha512-DaVzgyThzHgSDLuURhvkp4oviGoGe9iTZW4jMEORHDRCgSZ9K9THGFKqL+qGXqPAYLEgZTf5z2w56mRrPR1MjQ==", "integrity": "sha512-b2rrupf3kCTcc3jr9xOWBuHylSFtbpJf79Ga7QR98ienU2UqGimPGEsYMgbI29KHJfA5Us89XwGVmxrlxmSrMg==",
"requires": { "requires": {
"@ethersproject/logger": "^5.6.0" "@ethersproject/logger": "^5.6.0"
} }
@ -20816,9 +20816,9 @@
} }
}, },
"@ethersproject/providers": { "@ethersproject/providers": {
"version": "5.6.1", "version": "5.6.2",
"resolved": "https://registry.npmjs.org/@ethersproject/providers/-/providers-5.6.1.tgz", "resolved": "https://registry.npmjs.org/@ethersproject/providers/-/providers-5.6.2.tgz",
"integrity": "sha512-w8Wx15nH+aVDvnoKCyI1f3x0B5idmk/bDJXMEUqCfdO8Eadd0QpDx9lDMTMmenhOmf9vufLJXjpSm24D3ZnVpg==", "integrity": "sha512-6/EaFW/hNWz+224FXwl8+HdMRzVHt8DpPmu5MZaIQqx/K/ELnC9eY236SMV7mleCM3NnEArFwcAAxH5kUUgaRg==",
"requires": { "requires": {
"@ethersproject/abstract-provider": "^5.6.0", "@ethersproject/abstract-provider": "^5.6.0",
"@ethersproject/abstract-signer": "^5.6.0", "@ethersproject/abstract-signer": "^5.6.0",
@ -21506,9 +21506,9 @@
} }
}, },
"@testing-library/jest-dom": { "@testing-library/jest-dom": {
"version": "5.16.3", "version": "5.16.4",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.3.tgz", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
"integrity": "sha512-u5DfKj4wfSt6akfndfu1eG06jsdyA/IUrlX2n3pyq5UXgXMhXY+NJb8eNK/7pqPWAhCKsCGWDdDO0zKMKAYkEA==", "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
"requires": { "requires": {
"@babel/runtime": "^7.9.2", "@babel/runtime": "^7.9.2",
"@types/testing-library__jest-dom": "^5.9.1", "@types/testing-library__jest-dom": "^5.9.1",
@ -25126,9 +25126,9 @@
"version": "1.8.1" "version": "1.8.1"
}, },
"ethers": { "ethers": {
"version": "5.6.1", "version": "5.6.2",
"resolved": "https://registry.npmjs.org/ethers/-/ethers-5.6.1.tgz", "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.6.2.tgz",
"integrity": "sha512-qtl/2W+dwmUa5Z3JqwsbV3JEBZZHNARe5K/A2ePcNAuhJYnEKIgGOT/O9ouPwBijSqVoQnmQMzi5D48LFNOY2A==", "integrity": "sha512-EzGCbns24/Yluu7+ToWnMca3SXJ1Jk1BvWB7CCmVNxyOeM4LLvw2OLuIHhlkhQk1dtOcj9UMsdkxUh8RiG1dxQ==",
"requires": { "requires": {
"@ethersproject/abi": "5.6.0", "@ethersproject/abi": "5.6.0",
"@ethersproject/abstract-provider": "5.6.0", "@ethersproject/abstract-provider": "5.6.0",
@ -25137,7 +25137,7 @@
"@ethersproject/base64": "5.6.0", "@ethersproject/base64": "5.6.0",
"@ethersproject/basex": "5.6.0", "@ethersproject/basex": "5.6.0",
"@ethersproject/bignumber": "5.6.0", "@ethersproject/bignumber": "5.6.0",
"@ethersproject/bytes": "5.6.0", "@ethersproject/bytes": "5.6.1",
"@ethersproject/constants": "5.6.0", "@ethersproject/constants": "5.6.0",
"@ethersproject/contracts": "5.6.0", "@ethersproject/contracts": "5.6.0",
"@ethersproject/hash": "5.6.0", "@ethersproject/hash": "5.6.0",
@ -25145,10 +25145,10 @@
"@ethersproject/json-wallets": "5.6.0", "@ethersproject/json-wallets": "5.6.0",
"@ethersproject/keccak256": "5.6.0", "@ethersproject/keccak256": "5.6.0",
"@ethersproject/logger": "5.6.0", "@ethersproject/logger": "5.6.0",
"@ethersproject/networks": "5.6.0", "@ethersproject/networks": "5.6.1",
"@ethersproject/pbkdf2": "5.6.0", "@ethersproject/pbkdf2": "5.6.0",
"@ethersproject/properties": "5.6.0", "@ethersproject/properties": "5.6.0",
"@ethersproject/providers": "5.6.1", "@ethersproject/providers": "5.6.2",
"@ethersproject/random": "5.6.0", "@ethersproject/random": "5.6.0",
"@ethersproject/rlp": "5.6.0", "@ethersproject/rlp": "5.6.0",
"@ethersproject/sha2": "5.6.0", "@ethersproject/sha2": "5.6.0",
@ -29417,20 +29417,20 @@
"version": "0.8.3" "version": "0.8.3"
}, },
"react-router": { "react-router": {
"version": "6.2.2", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==", "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"requires": { "requires": {
"history": "^5.2.0" "history": "^5.2.0"
} }
}, },
"react-router-dom": { "react-router-dom": {
"version": "6.2.2", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==", "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"requires": { "requires": {
"history": "^5.2.0", "history": "^5.2.0",
"react-router": "6.2.2" "react-router": "6.3.0"
} }
}, },
"react-scripts": { "react-scripts": {

6
package.json
View File

@ -17,7 +17,7 @@
"@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18", "@fortawesome/react-fontawesome": "^0.1.18",
"@headlessui/react": "^1.5.0", "@headlessui/react": "^1.5.0",
"@testing-library/jest-dom": "^5.16.3", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.24", "@types/jest": "^26.0.24",
@ -28,7 +28,7 @@
"@types/react-highlight": "^0.12.5", "@types/react-highlight": "^0.12.5",
"@types/react-syntax-highlighter": "^13.5.2", "@types/react-syntax-highlighter": "^13.5.2",
"chart.js": "^3.7.1", "chart.js": "^3.7.1",
"ethers": "^5.6.1", "ethers": "^5.6.2",
"highlightjs-solidity": "^2.0.5", "highlightjs-solidity": "^2.0.5",
"react": "^17.0.2", "react": "^17.0.2",
"react-blockies": "^1.4.1", "react-blockies": "^1.4.1",
@ -37,7 +37,7 @@
"react-error-boundary": "^3.1.4", "react-error-boundary": "^3.1.4",
"react-helmet-async": "^1.2.3", "react-helmet-async": "^1.2.3",
"react-image": "^4.0.3", "react-image": "^4.0.3",
"react-router-dom": "^6.2.2", "react-router-dom": "^6.3.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-syntax-highlighter": "^15.5.0", "react-syntax-highlighter": "^15.5.0",
"serve": "^13.0.2", "serve": "^13.0.2",

8
src/Address.tsx
View File

@ -15,6 +15,7 @@ import StandardFrame from "./StandardFrame";
import StandardSubtitle from "./StandardSubtitle"; import StandardSubtitle from "./StandardSubtitle";
import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound"; import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound";
import Copy from "./components/Copy"; import Copy from "./components/Copy";
import Faucet from "./components/Faucet";
import NavTab from "./components/NavTab"; import NavTab from "./components/NavTab";
import SourcifyLogo from "./sourcify/SourcifyLogo"; import SourcifyLogo from "./sourcify/SourcifyLogo";
import AddressTransactionResults from "./address/AddressTransactionResults"; import AddressTransactionResults from "./address/AddressTransactionResults";
@ -25,6 +26,7 @@ import { useAddressOrENS } from "./useResolvedAddresses";
import { useMultipleMetadata } from "./sourcify/useSourcify"; import { useMultipleMetadata } from "./sourcify/useSourcify";
import { ChecksummedAddress } from "./types"; import { ChecksummedAddress } from "./types";
import { useAddressesWithCode } from "./useErigonHooks"; import { useAddressesWithCode } from "./useErigonHooks";
import { useChainInfo } from "./useChainInfo";
const AddressTransactionByNonce = React.lazy( const AddressTransactionByNonce = React.lazy(
() => () =>
@ -86,6 +88,8 @@ const Address: React.FC = () => {
? metadatas[checksummedAddress] ? metadatas[checksummedAddress]
: undefined; : undefined;
const { network, faucets } = useChainInfo();
// Search address by nonce === transaction @ nonce // Search address by nonce === transaction @ nonce
const rawNonce = searchParams.get("nonce"); const rawNonce = searchParams.get("nonce");
if (rawNonce !== null) { if (rawNonce !== null) {
@ -119,6 +123,10 @@ const Address: React.FC = () => {
{checksummedAddress} {checksummedAddress}
</span> </span>
<Copy value={checksummedAddress} rounded /> <Copy value={checksummedAddress} rounded />
{/* Only display faucets for testnets who actually have any */}
{network === "testnet" && faucets && faucets.length > 0 && (
<Faucet address={checksummedAddress} rounded />
)}
{isENS && ( {isENS && (
<span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs"> <span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
ENS: {addressOrName} ENS: {addressOrName}

9
src/App.tsx
View File

@ -27,10 +27,10 @@ const Transaction = React.lazy(
import(/* webpackChunkName: "tx", webpackPrefetch: true */ "./Transaction") import(/* webpackChunkName: "tx", webpackPrefetch: true */ "./Transaction")
); );
const London = React.lazy( const London = React.lazy(
() => () => import(/* webpackChunkName: "london" */ "./special/london/London")
import( );
/* webpackChunkName: "london", webpackPrefetch: true */ "./special/london/London" const Faucets = React.lazy(
) () => import(/* webpackChunkName: "faucets" */ "./Faucets")
); );
const PageNotFound = React.lazy( const PageNotFound = React.lazy(
() => () =>
@ -74,6 +74,7 @@ const App = () => {
path="address/:addressOrName/*" path="address/:addressOrName/*"
element={<Address />} element={<Address />}
/> />
<Route path="faucets/*" element={<Faucets />} />
<Route path="*" element={<PageNotFound />} /> <Route path="*" element={<PageNotFound />} />
</Route> </Route>
</Routes> </Routes>

8
src/Block.tsx
View File

@ -34,7 +34,9 @@ const Block: React.FC = () => {
if (blockNumberOrHash === undefined) { if (blockNumberOrHash === undefined) {
throw new Error("blockNumberOrHash couldn't be undefined here"); throw new Error("blockNumberOrHash couldn't be undefined here");
} }
const { nativeName, nativeSymbol } = useChainInfo(); const {
nativeCurrency: { name, symbol },
} = useChainInfo();
const block = useBlockData(provider, blockNumberOrHash); const block = useBlockData(provider, blockNumberOrHash);
useEffect(() => { useEffect(() => {
@ -146,7 +148,7 @@ const Block: React.FC = () => {
<span className="line-through"> <span className="line-through">
<FormattedBalance value={burntFees} /> <FormattedBalance value={burntFees} />
</span>{" "} </span>{" "}
{nativeSymbol} {symbol}
</span> </span>
</span> </span>
</div> </div>
@ -165,7 +167,7 @@ const Block: React.FC = () => {
{extraStr} (Hex:{" "} {extraStr} (Hex:{" "}
<span className="font-data break-all">{block.extraData}</span>) <span className="font-data break-all">{block.extraData}</span>)
</InfoRow> </InfoRow>
<InfoRow title={`${nativeName} Price`}> <InfoRow title={`${name} Price`}>
<USDValue value={blockETHUSDPrice} /> <USDValue value={blockETHUSDPrice} />
</InfoRow> </InfoRow>
<InfoRow title="Difficult"> <InfoRow title="Difficult">

90
src/Faucets.tsx Normal file
View File

@ -0,0 +1,90 @@
import React, { useMemo } from "react";
import { useLocation } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
import { faFaucetDrip } from "@fortawesome/free-solid-svg-icons/faFaucetDrip";
import ExternalLink from "./components/ExternalLink";
import ContentFrame from "./ContentFrame";
import StandardFrame from "./StandardFrame";
import StandardSubtitle from "./StandardSubtitle";
import { useChainInfo } from "./useChainInfo";
const Faucets: React.FC = () => {
const { network, faucets } = useChainInfo();
const loc = useLocation();
const urls = useMemo(() => {
const s = new URLSearchParams(loc.search);
const address = s.get("address");
const _urls: string[] =
network === "testnet"
? faucets.map((u) =>
// eslint-disable-next-line no-template-curly-in-string
address !== null ? u.replaceAll("${ADDRESS}", address) : u
)
: [];
// Shuffle faucets to avoid UI bias
for (let i = _urls.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[_urls[i], _urls[j]] = [_urls[j], _urls[i]];
}
return _urls;
}, [network, faucets, loc]);
return (
<StandardFrame>
<StandardSubtitle>Faucets</StandardSubtitle>
<ContentFrame>
<div className="py-4 space-y-3">
{urls.length > 0 && (
<div className="flex space-x-2 items-baseline rounded bg-yellow-200 text-red-800 font-bold underline px-2 py-1">
<FontAwesomeIcon
className="self-center"
icon={faTriangleExclamation}
size="1x"
/>
<span>
The following external links come from
https://github.com/ethereum-lists/chains and are *NOT* endorsed
by us. Use at your own risk.
</span>
</div>
)}
{/* Display the shuffling notice only if there are 1+ faucets */}
{urls.length > 1 && (
<div className="flex space-x-2 items-baseline rounded bg-yellow-200 text-yellow-700 px-2 py-1">
<FontAwesomeIcon
className="self-center"
icon={faTriangleExclamation}
size="1x"
/>
<span>The faucet links below are shuffled on page load.</span>
</div>
)}
{urls.length > 0 ? (
<div className="pt-2 space-y-3">
{urls.map((url) => (
<div className="flex space-x-2 items-baseline">
<FontAwesomeIcon
className="text-gray-400"
icon={faFaucetDrip}
size="1x"
/>
<ExternalLink key={url} href={url}>
<span>{url}</span>
</ExternalLink>
</div>
))}
</div>
) : (
<div>There are no registered faucets.</div>
)}
</div>
</ContentFrame>
</StandardFrame>
);
};
export default Faucets;

8
src/PriceBox.tsx
View File

@ -14,7 +14,9 @@ const ETH_FEED_DECIMALS = 8;
// TODO: reduce duplication with useETHUSDOracle // TODO: reduce duplication with useETHUSDOracle
const PriceBox: React.FC = () => { const PriceBox: React.FC = () => {
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
const { nativeSymbol } = useChainInfo(); const {
nativeCurrency: { symbol },
} = useChainInfo();
const latestBlock = useLatestBlock(provider); const latestBlock = useLatestBlock(provider);
const maybeOutdated: boolean = const maybeOutdated: boolean =
@ -82,9 +84,9 @@ const PriceBox: React.FC = () => {
} font-sans text-xs text-gray-800`} } font-sans text-xs text-gray-800`}
> >
<span <span
title={`${nativeSymbol}/USD last updated at: ${latestPriceTimestamp?.toString()}`} title={`${symbol}/USD last updated at: ${latestPriceTimestamp?.toString()}`}
> >
{nativeSymbol}: $<span className="font-balance">{latestPrice}</span> {symbol}: $<span className="font-balance">{latestPrice}</span>
</span> </span>
{latestGasData && ( {latestGasData && (
<> <>

41
src/TokenTransferItem.tsx
View File

@ -1,16 +1,21 @@
import React from "react"; import React, { useContext } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight"; import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
import TransactionAddress from "./components/TransactionAddress"; import TransactionAddress from "./components/TransactionAddress";
import ValueHighlighter from "./components/ValueHighlighter"; import ValueHighlighter from "./components/ValueHighlighter";
import FormattedBalance from "./components/FormattedBalance"; import FormattedBalance from "./components/FormattedBalance";
import USDAmount from "./components/USDAmount";
import { import {
AddressContext, AddressContext,
ChecksummedAddress, ChecksummedAddress,
TokenMeta, TokenMeta,
TokenTransfer, TokenTransfer,
} from "./types"; } from "./types";
import { RuntimeContext } from "./useRuntime";
import { useBlockNumberContext } from "./useBlockTagContext";
import { Metadata } from "./sourcify/useSourcify"; import { Metadata } from "./sourcify/useSourcify";
import { useTokenUSDOracle } from "./usePriceOracle";
type TokenTransferItemProps = { type TokenTransferItemProps = {
t: TokenTransfer; t: TokenTransfer;
@ -24,14 +29,14 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
tokenMeta, tokenMeta,
metadatas, metadatas,
}) => { }) => {
const { provider } = useContext(RuntimeContext);
const blockNumber = useBlockNumberContext();
const [quote, decimals] = useTokenUSDOracle(provider, blockNumber, t.token);
return ( return (
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100"> <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
<span className="text-gray-500"> <div className="grid grid-cols-4 gap-x-1 w-full items-baseline">
<FontAwesomeIcon icon={faCaretRight} size="1x" /> <div className="flex items-baseline space-x-1">
</span>
<div className="grid grid-cols-7 gap-x-1 w-full">
<div className="col-span-2 flex space-x-1">
<span className="font-bold">From</span>
<TransactionAddress <TransactionAddress
address={t.from} address={t.from}
addressCtx={AddressContext.FROM} addressCtx={AddressContext.FROM}
@ -39,8 +44,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
showCodeIndicator showCodeIndicator
/> />
</div> </div>
<div className="col-span-2 flex space-x-1"> <div className="flex items-baseline space-x-1">
<span className="font-bold">To</span> <span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<TransactionAddress <TransactionAddress
address={t.to} address={t.to}
addressCtx={AddressContext.TO} addressCtx={AddressContext.TO}
@ -48,8 +55,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
showCodeIndicator showCodeIndicator
/> />
</div> </div>
<div className="col-span-3 flex space-x-1"> <div className="col-span-2 flex items-baseline space-x-1">
<span className="font-bold">For</span> <span className="text-gray-500">
<FontAwesomeIcon icon={faSackDollar} size="1x" />
</span>
<span> <span>
<ValueHighlighter value={t.value}> <ValueHighlighter value={t.value}>
<FormattedBalance <FormattedBalance
@ -59,6 +68,16 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
</ValueHighlighter> </ValueHighlighter>
</span> </span>
<TransactionAddress address={t.token} metadata={metadatas[t.token]} /> <TransactionAddress address={t.token} metadata={metadatas[t.token]} />
{tokenMeta && quote !== undefined && decimals !== undefined && (
<span className="px-2 border-gray-200 border rounded-lg bg-gray-100 text-gray-600">
<USDAmount
amount={t.value}
amountDecimals={tokenMeta.decimals}
quote={quote}
quoteDecimals={decimals}
/>
</span>
)}
</div> </div>
</div> </div>
</div> </div>

7
src/TransactionPageContent.tsx
View File

@ -10,7 +10,6 @@ import { useInternalOperations, useTxData } from "./useErigonHooks";
import { SelectionContext, useSelection } from "./useSelection"; import { SelectionContext, useSelection } from "./useSelection";
import { SelectedTransactionContext } from "./useSelectedTransaction"; import { SelectedTransactionContext } from "./useSelectedTransaction";
import { BlockNumberContext } from "./useBlockTagContext"; import { BlockNumberContext } from "./useBlockTagContext";
import { useETHUSDOracle } from "./usePriceOracle";
import { useAppConfigContext } from "./useAppConfig"; import { useAppConfigContext } from "./useAppConfig";
import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify"; import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
@ -60,11 +59,6 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
const selectionCtx = useSelection(); const selectionCtx = useSelection();
const blockETHUSDPrice = useETHUSDOracle(
provider,
txData?.confirmedData?.blockNumber
);
const { sourcifySource } = useAppConfigContext(); const { sourcifySource } = useAppConfigContext();
const metadata = useSourcify( const metadata = useSourcify(
txData?.to, txData?.to,
@ -114,7 +108,6 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
devDoc={metadata?.output.devdoc} devDoc={metadata?.output.devdoc}
internalOps={internalOps} internalOps={internalOps}
sendsEthToMiner={sendsEthToMiner} sendsEthToMiner={sendsEthToMiner}
ethUSDPrice={blockETHUSDPrice}
/> />
} }
/> />

3
src/api/address-resolver/hardcoded-addresses/11155111.json Normal file
View File

@ -0,0 +1,3 @@
{
"0xcFe95817aC44C3f8CE75F1EE6EC1431F586AB5A3": "Faucet: FaucETH"
}

8
src/api/address-resolver/index.ts
View File

@ -45,11 +45,11 @@ const resolvers: Record<number, IAddressResolver<SelectedResolvedName<any>>> = {
export const getResolver = ( export const getResolver = (
chainId: number chainId: number
): IAddressResolver<SelectedResolvedName<any>> => { ): IAddressResolver<SelectedResolvedName<any>> => {
const resolver = resolvers[chainId]; const res = resolvers[chainId];
if (resolver === undefined) { if (res === undefined) {
return resolver[0]; // default MAGIC NUMBER return resolvers[0]; // default MAGIC NUMBER
} }
return resolver; return res;
}; };
export const resolverRendererRegistry = new Map< export const resolverRendererRegistry = new Map<

26
src/components/Faucet.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import { NavLink } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFaucetDrip } from "@fortawesome/free-solid-svg-icons/faFaucetDrip";
import { ChecksummedAddress } from "../types";
type FaucetProps = {
address: ChecksummedAddress;
rounded?: boolean;
};
const Faucet: React.FC<FaucetProps> = ({ address, rounded }) => (
<NavLink
className={`self-center flex flex-no-wrap justify-center items-center space-x-1 text-gray-500 focus:outline-none ${
rounded
? "transition-colors transition-shadows bg-gray-200 hover:bg-gray-500 hover:text-gray-200 hover:shadow w-7 h-7 rounded-full text-xs"
: "text-sm"
}`}
to={`/faucets?address=${address}`}
title="Click to go to faucets page"
>
<FontAwesomeIcon icon={faFaucetDrip} size="1x" />
</NavLink>
);
export default React.memo(Faucet);

12
src/components/InternalCreate.tsx
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import TransactionAddress from "./TransactionAddress"; import TransactionAddress from "./TransactionAddress";
import AddressHighlighter from "./AddressHighlighter"; import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink"; import DecoratedAddressLink from "./DecoratedAddressLink";
@ -15,16 +16,17 @@ const InternalCreate: React.FC<InternalCreateProps> = ({ internalOp }) => (
<span className="text-gray-500"> <span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE <FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
</span> </span>
<span>Contract</span> <span className="flex items-baseline text-gray-400">
<TransactionAddress address={internalOp.from} showCodeIndicator />
</span>
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<div className="flex items-baseline"> <div className="flex items-baseline">
<AddressHighlighter address={internalOp.to}> <AddressHighlighter address={internalOp.to}>
<DecoratedAddressLink address={internalOp.to} creation /> <DecoratedAddressLink address={internalOp.to} creation />
</AddressHighlighter> </AddressHighlighter>
</div> </div>
<span className="flex items-baseline text-gray-400">
(Creator:{" "}
<TransactionAddress address={internalOp.from} showCodeIndicator />)
</span>
</div> </div>
); );

7
src/components/InternalSelfDestruct.tsx
View File

@ -17,7 +17,9 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
txData, txData,
internalOp, internalOp,
}) => { }) => {
const { nativeSymbol } = useChainInfo(); const {
nativeCurrency: { symbol },
} = useChainInfo();
const toMiner = const toMiner =
txData.confirmedData?.miner !== undefined && txData.confirmedData?.miner !== undefined &&
internalOp.to === txData.confirmedData.miner; internalOp.to === txData.confirmedData.miner;
@ -28,7 +30,6 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
<span className="text-gray-500"> <span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> SELF DESTRUCT <FontAwesomeIcon icon={faAngleRight} size="1x" /> SELF DESTRUCT
</span> </span>
<span>Contract</span>
<div className="flex items-baseline"> <div className="flex items-baseline">
<AddressHighlighter address={internalOp.from}> <AddressHighlighter address={internalOp.from}>
<DecoratedAddressLink address={internalOp.from} selfDestruct /> <DecoratedAddressLink address={internalOp.from} selfDestruct />
@ -46,7 +47,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
</span> </span>
<span> <span>
{formatEther(internalOp.value)} {nativeSymbol} {formatEther(internalOp.value)} {symbol}
</span> </span>
<div className="flex items-baseline"> <div className="flex items-baseline">
<span className="text-gray-500">To</span> <span className="text-gray-500">To</span>

14
src/components/InternalTransactionOperation.tsx
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import { BigNumber } from "@ethersproject/bignumber";
import InternalTransfer from "./InternalTransfer"; import InternalTransfer from "./InternalTransfer";
import InternalSelfDestruct from "./InternalSelfDestruct"; import InternalSelfDestruct from "./InternalSelfDestruct";
import InternalCreate from "./InternalCreate"; import InternalCreate from "./InternalCreate";
@ -7,13 +8,20 @@ import { TransactionData, InternalOperation, OperationType } from "../types";
type InternalTransactionOperationProps = { type InternalTransactionOperationProps = {
txData: TransactionData; txData: TransactionData;
internalOp: InternalOperation; internalOp: InternalOperation;
// TODO: migrate all this logic to SWR
ethUSDPrice: BigNumber | undefined;
}; };
const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> = const InternalTransactionOperation: React.FC<
({ txData, internalOp }) => ( InternalTransactionOperationProps
> = ({ txData, internalOp, ethUSDPrice }) => (
<> <>
{internalOp.type === OperationType.TRANSFER && ( {internalOp.type === OperationType.TRANSFER && (
<InternalTransfer txData={txData} internalOp={internalOp} /> <InternalTransfer
txData={txData}
internalOp={internalOp}
ethUSDPrice={ethUSDPrice}
/>
)} )}
{internalOp.type === OperationType.SELF_DESTRUCT && ( {internalOp.type === OperationType.SELF_DESTRUCT && (
<InternalSelfDestruct txData={txData} internalOp={internalOp} /> <InternalSelfDestruct txData={txData} internalOp={internalOp} />

48
src/components/InternalTransfer.tsx
View File

@ -1,9 +1,13 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { BigNumber } from "@ethersproject/bignumber";
import { formatEther } from "@ethersproject/units"; import { formatEther } from "@ethersproject/units";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
import AddressHighlighter from "./AddressHighlighter"; import AddressHighlighter from "./AddressHighlighter";
import DecoratedAddressLink from "./DecoratedAddressLink"; import DecoratedAddressLink from "./DecoratedAddressLink";
import USDAmount from "./USDAmount";
import { RuntimeContext } from "../useRuntime"; import { RuntimeContext } from "../useRuntime";
import { useHasCode } from "../useErigonHooks"; import { useHasCode } from "../useErigonHooks";
import { useChainInfo } from "../useChainInfo"; import { useChainInfo } from "../useChainInfo";
@ -12,13 +16,18 @@ import { TransactionData, InternalOperation } from "../types";
type InternalTransferProps = { type InternalTransferProps = {
txData: TransactionData; txData: TransactionData;
internalOp: InternalOperation; internalOp: InternalOperation;
// TODO: migrate all this logic to SWR
ethUSDPrice: BigNumber | undefined;
}; };
const InternalTransfer: React.FC<InternalTransferProps> = ({ const InternalTransfer: React.FC<InternalTransferProps> = ({
txData, txData,
internalOp, internalOp,
ethUSDPrice,
}) => { }) => {
const { nativeSymbol } = useChainInfo(); const {
nativeCurrency: { symbol, decimals },
} = useChainInfo();
const fromMiner = const fromMiner =
txData.confirmedData?.miner !== undefined && txData.confirmedData?.miner !== undefined &&
internalOp.from === txData.confirmedData.miner; internalOp.from === txData.confirmedData.miner;
@ -39,15 +48,13 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
); );
return ( return (
<div className="flex items-baseline space-x-1 whitespace-nowrap"> <div className="flex items-baseline space-x-1 truncate">
<div className="grid grid-cols-6 gap-x-1 w-full items-baseline">
<div className="col-span-2 flex items-baseline space-x-1">
<span className="text-gray-500"> <span className="text-gray-500">
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
</span> </span>
<span> <div className="flex items-baseline truncate">
{formatEther(internalOp.value)} {nativeSymbol}
</span>
<div className="flex items-baseline">
<span className="text-gray-500">From</span>
<AddressHighlighter address={internalOp.from}> <AddressHighlighter address={internalOp.from}>
<div <div
className={`flex items-baseline space-x-1 ${ className={`flex items-baseline space-x-1 ${
@ -64,8 +71,11 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
</div> </div>
</AddressHighlighter> </AddressHighlighter>
</div> </div>
<div className="flex items-baseline"> </div>
<span className="text-gray-500">To</span> <div className="col-span-2 flex items-baseline space-x-1">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<AddressHighlighter address={internalOp.to}> <AddressHighlighter address={internalOp.to}>
<div <div
className={`flex items-baseline space-x-1 ${ className={`flex items-baseline space-x-1 ${
@ -82,6 +92,26 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
</div> </div>
</AddressHighlighter> </AddressHighlighter>
</div> </div>
<div className="col-span-2 flex items-baseline space-x-1">
<span className="text-gray-500">
<FontAwesomeIcon icon={faSackDollar} size="1x" />
</span>
<span>
{formatEther(internalOp.value)} {symbol}
</span>
{ethUSDPrice && (
<span className="px-2 border-gray-200 border rounded-lg bg-gray-100 text-gray-600">
<USDAmount
amount={internalOp.value}
amountDecimals={decimals}
quote={ethUSDPrice}
// TODO: migrate to SWR and standardize this magic number
quoteDecimals={8}
/>
</span>
)}
</div>
</div>
</div> </div>
); );
}; };

10
src/components/TransactionValue.tsx
View File

@ -22,16 +22,18 @@ const TransactionValue: React.FC<TransactionValueProps> = ({
value, value,
hideUnit, hideUnit,
}) => { }) => {
const { nativeSymbol, nativeDecimals } = useChainInfo(); const {
const formattedValue = formatValue(value, nativeDecimals); nativeCurrency: { symbol, decimals },
} = useChainInfo();
const formattedValue = formatValue(value, decimals);
return ( return (
<span <span
className={`text-sm ${value.isZero() ? "text-gray-400" : ""}`} className={`text-sm ${value.isZero() ? "text-gray-400" : ""}`}
title={`${formattedValue} ${nativeSymbol}`} title={`${formattedValue} ${symbol}`}
> >
<span className={`font-balance`}>{formattedValue}</span> <span className={`font-balance`}>{formattedValue}</span>
{!hideUnit && ` ${nativeSymbol}`} {!hideUnit && ` ${symbol}`}
</span> </span>
); );
}; };

44
src/components/USDAmount.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from "react";
import { BigNumber, FixedNumber } from "@ethersproject/bignumber";
import { commify } from "@ethersproject/units";
type USDAmountProps = {
amount: BigNumber;
amountDecimals: number;
quote: BigNumber;
quoteDecimals: number;
};
// TODO: fix the duplication mess with other currency display components
/**
* Basic display of USD amount WITHOUT box decoration, only
* text formatting.
*
* USD amounts are displayed commified with 2 decimals places and $ prefix,
* i.e., "$1,000.00".
*/
const USDAmount: React.FC<USDAmountProps> = ({
amount,
amountDecimals,
quote,
quoteDecimals,
}) => {
const value = amount.mul(quote);
const decimals = amountDecimals + quoteDecimals;
return (
<span className="text-xs">
$
<span className="font-balance">
{commify(
FixedNumber.fromValue(value, decimals, `ufixed256x${decimals}`)
.round(2)
.toString()
)}
</span>
</span>
);
};
export default React.memo(USDAmount);

6
src/components/USDValue.tsx
View File

@ -10,7 +10,9 @@ type USDValueProps = {
}; };
const USDValue: React.FC<USDValueProps> = ({ value }) => { const USDValue: React.FC<USDValueProps> = ({ value }) => {
const { nativeSymbol } = useChainInfo(); const {
nativeCurrency: { symbol },
} = useChainInfo();
return ( return (
<span className="text-sm"> <span className="text-sm">
@ -24,7 +26,7 @@ const USDValue: React.FC<USDValueProps> = ({ value }) => {
.toString() .toString()
)} )}
</span>{" "} </span>{" "}
<span className="text-xs text-gray-500">/ {nativeSymbol}</span> <span className="text-xs text-gray-500">/ {symbol}</span>
</> </>
) : ( ) : (
"N/A" "N/A"

9
src/special/london/BlockRow.tsx
View File

@ -16,7 +16,9 @@ type BlockRowProps = {
}; };
const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => { const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
const { nativeSymbol } = useChainInfo(); const {
nativeCurrency: { symbol },
} = useChainInfo();
const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER); const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
const burntFees = const burntFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed); block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@ -55,11 +57,10 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
</div> </div>
</div> </div>
<div className="text-right col-span-2"> <div className="text-right col-span-2">
{commify(formatEther(totalReward))} {nativeSymbol} {commify(formatEther(totalReward))} {symbol}
</div> </div>
<div className="text-right col-span-2 line-through text-orange-500"> <div className="text-right col-span-2 line-through text-orange-500">
{commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))}{" "} {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))} {symbol}
{nativeSymbol}
</div> </div>
<div className="text-right text-gray-400"> <div className="text-right text-gray-400">
<TimestampAge now={now / 1000} timestamp={block.timestamp} /> <TimestampAge now={now / 1000} timestamp={block.timestamp} />

42
src/transaction/Details.tsx
View File

@ -1,7 +1,6 @@
import React, { useContext, useMemo, useState } from "react"; import React, { useContext, useMemo, useState } from "react";
import { Tab } from "@headlessui/react"; import { Tab } from "@headlessui/react";
import { TransactionDescription } from "@ethersproject/abi"; import { TransactionDescription } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle"; import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faCube } from "@fortawesome/free-solid-svg-icons/faCube"; import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@ -47,6 +46,7 @@ import { RuntimeContext } from "../useRuntime";
import { useContractsMetadata } from "../hooks"; import { useContractsMetadata } from "../hooks";
import { useTransactionError } from "../useErigonHooks"; import { useTransactionError } from "../useErigonHooks";
import { useChainInfo } from "../useChainInfo"; import { useChainInfo } from "../useChainInfo";
import { useETHUSDOracle } from "../usePriceOracle";
type DetailsProps = { type DetailsProps = {
txData: TransactionData; txData: TransactionData;
@ -56,7 +56,6 @@ type DetailsProps = {
devDoc?: DevDoc | undefined; devDoc?: DevDoc | undefined;
internalOps?: InternalOperation[]; internalOps?: InternalOperation[];
sendsEthToMiner: boolean; sendsEthToMiner: boolean;
ethUSDPrice: BigNumber | undefined;
}; };
const Details: React.FC<DetailsProps> = ({ const Details: React.FC<DetailsProps> = ({
@ -67,7 +66,6 @@ const Details: React.FC<DetailsProps> = ({
devDoc, devDoc,
internalOps, internalOps,
sendsEthToMiner, sendsEthToMiner,
ethUSDPrice,
}) => { }) => {
const hasEIP1559 = const hasEIP1559 =
txData.confirmedData?.blockBaseFeePerGas !== undefined && txData.confirmedData?.blockBaseFeePerGas !== undefined &&
@ -87,7 +85,15 @@ const Details: React.FC<DetailsProps> = ({
const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined; const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
const { nativeName, nativeSymbol } = useChainInfo(); const {
nativeCurrency: { name, symbol },
} = useChainInfo();
const blockETHUSDPrice = useETHUSDOracle(
provider,
txData?.confirmedData?.blockNumber
);
const addresses = useMemo(() => { const addresses = useMemo(() => {
const _addresses: ChecksummedAddress[] = []; const _addresses: ChecksummedAddress[] = [];
if (txData.to) { if (txData.to) {
@ -292,6 +298,7 @@ const Details: React.FC<DetailsProps> = ({
key={i} key={i}
txData={txData} txData={txData}
internalOp={op} internalOp={op}
ethUSDPrice={blockETHUSDPrice}
/> />
))} ))}
</div> </div>
@ -315,10 +322,13 @@ const Details: React.FC<DetailsProps> = ({
</InfoRow> </InfoRow>
)} )}
<InfoRow title="Value"> <InfoRow title="Value">
<FormattedBalance value={txData.value} /> {nativeSymbol}{" "} <FormattedBalance value={txData.value} /> {symbol}{" "}
{!txData.value.isZero() && ethUSDPrice && ( {!txData.value.isZero() && blockETHUSDPrice && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from"> <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<ETH2USDValue ethAmount={txData.value} eth2USDValue={ethUSDPrice} /> <ETH2USDValue
ethAmount={txData.value}
eth2USDValue={blockETHUSDPrice}
/>
</span> </span>
)} )}
</InfoRow> </InfoRow>
@ -338,8 +348,7 @@ const Details: React.FC<DetailsProps> = ({
{txData.type === 2 && ( {txData.type === 2 && (
<> <>
<InfoRow title="Max Priority Fee Per Gas"> <InfoRow title="Max Priority Fee Per Gas">
<FormattedBalance value={txData.maxPriorityFeePerGas!} />{" "} <FormattedBalance value={txData.maxPriorityFeePerGas!} /> {symbol} (
{nativeSymbol} (
<FormattedBalance <FormattedBalance
value={txData.maxPriorityFeePerGas!} value={txData.maxPriorityFeePerGas!}
decimals={9} decimals={9}
@ -347,7 +356,7 @@ const Details: React.FC<DetailsProps> = ({
Gwei) Gwei)
</InfoRow> </InfoRow>
<InfoRow title="Max Fee Per Gas"> <InfoRow title="Max Fee Per Gas">
<FormattedBalance value={txData.maxFeePerGas!} /> {nativeSymbol} ( <FormattedBalance value={txData.maxFeePerGas!} /> {symbol} (
<FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei) <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
</InfoRow> </InfoRow>
</> </>
@ -356,7 +365,7 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="Gas Price"> <InfoRow title="Gas Price">
<div className="flex items-baseline space-x-1"> <div className="flex items-baseline space-x-1">
<span> <span>
<FormattedBalance value={txData.gasPrice} /> {nativeSymbol} ( <FormattedBalance value={txData.gasPrice} /> {symbol} (
<FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei) <FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
</span> </span>
{sendsEthToMiner && ( {sendsEthToMiner && (
@ -407,13 +416,12 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="Transaction Fee"> <InfoRow title="Transaction Fee">
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<FormattedBalance value={txData.confirmedData.fee} />{" "} <FormattedBalance value={txData.confirmedData.fee} /> {symbol}{" "}
{nativeSymbol}{" "} {blockETHUSDPrice && (
{ethUSDPrice && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from"> <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<ETH2USDValue <ETH2USDValue
ethAmount={txData.confirmedData.fee} ethAmount={txData.confirmedData.fee}
eth2USDValue={ethUSDPrice} eth2USDValue={blockETHUSDPrice}
/> />
</span> </span>
)} )}
@ -421,8 +429,8 @@ const Details: React.FC<DetailsProps> = ({
{hasEIP1559 && <RewardSplit txData={txData} />} {hasEIP1559 && <RewardSplit txData={txData} />}
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title={`${nativeName} Price`}> <InfoRow title={`${name} Price`}>
<USDValue value={ethUSDPrice} /> <USDValue value={blockETHUSDPrice} />
</InfoRow> </InfoRow>
</> </>
)} )}

8
src/transaction/RewardSplit.tsx
View File

@ -12,7 +12,9 @@ type RewardSplitProps = {
}; };
const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => { const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
const { nativeSymbol } = useChainInfo(); const {
nativeCurrency: { symbol },
} = useChainInfo();
const paidFees = txData.gasPrice.mul(txData.confirmedData!.gasUsed); const paidFees = txData.gasPrice.mul(txData.confirmedData!.gasUsed);
const burntFees = txData.confirmedData!.blockBaseFeePerGas!.mul( const burntFees = txData.confirmedData!.blockBaseFeePerGas!.mul(
txData.confirmedData!.gasUsed txData.confirmedData!.gasUsed
@ -41,7 +43,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
<span className="line-through"> <span className="line-through">
<FormattedBalance value={burntFees} /> <FormattedBalance value={burntFees} />
</span>{" "} </span>{" "}
{nativeSymbol} {symbol}
</span> </span>
</span> </span>
</div> </div>
@ -57,7 +59,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
<FontAwesomeIcon icon={faCoins} size="1x" /> <FontAwesomeIcon icon={faCoins} size="1x" />
</span> </span>
<span> <span>
<FormattedBalance value={minerReward} /> {nativeSymbol} <FormattedBalance value={minerReward} /> {symbol}
</span> </span>
</span> </span>
</div> </div>

7
src/transaction/TraceInput.tsx
View File

@ -19,7 +19,9 @@ type TraceInputProps = {
}; };
const TraceInput: React.FC<TraceInputProps> = ({ t }) => { const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
const { nativeSymbol } = useChainInfo(); const {
nativeCurrency: { symbol },
} = useChainInfo();
const raw4Bytes = extract4Bytes(t.input); const raw4Bytes = extract4Bytes(t.input);
const fourBytes = use4Bytes(raw4Bytes); const fourBytes = use4Bytes(raw4Bytes);
const sigText = const sigText =
@ -57,8 +59,7 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
<FunctionSignature callType={t.type} sig={sigText} /> <FunctionSignature callType={t.type} sig={sigText} />
{t.value && !t.value.isZero() && ( {t.value && !t.value.isZero() && (
<span className="text-red-700 whitespace-nowrap"> <span className="text-red-700 whitespace-nowrap">
{"{"}value: <FormattedBalance value={t.value} />{" "} {"{"}value: <FormattedBalance value={t.value} /> {symbol}
{nativeSymbol}
{"}"} {"}"}
</span> </span>
)} )}

38
src/useChainInfo.ts
View File

@ -3,15 +3,23 @@ import { chainInfoURL } from "./url";
import { OtterscanRuntime } from "./useRuntime"; import { OtterscanRuntime } from "./useRuntime";
export type ChainInfo = { export type ChainInfo = {
nativeName: string; network: string | undefined;
nativeSymbol: string; faucets: string[];
nativeDecimals: number; nativeCurrency: {
name: string;
symbol: string;
decimals: number;
};
}; };
export const defaultChainInfo: ChainInfo = { export const defaultChainInfo: ChainInfo = {
nativeName: "Ether", network: undefined,
nativeSymbol: "ETH", faucets: [],
nativeDecimals: 18, nativeCurrency: {
name: "Ether",
symbol: "ETH",
decimals: 18,
},
}; };
export const ChainInfoContext = createContext<ChainInfo | undefined>(undefined); export const ChainInfoContext = createContext<ChainInfo | undefined>(undefined);
@ -25,24 +33,26 @@ export const useChainInfoFromMetadataFile = (
const [chainInfo, setChainInfo] = useState<ChainInfo | undefined>(undefined); const [chainInfo, setChainInfo] = useState<ChainInfo | undefined>(undefined);
useEffect(() => { useEffect(() => {
if (chainId === undefined) { if (assetsURLPrefix === undefined || chainId === undefined) {
setChainInfo(undefined); setChainInfo(undefined);
return; return;
} }
const readChainInfo = async () => { const readChainInfo = async () => {
const res = await fetch(chainInfoURL(assetsURLPrefix!, chainId)); try {
const res = await fetch(chainInfoURL(assetsURLPrefix, chainId));
if (!res.ok) { if (!res.ok) {
setChainInfo(defaultChainInfo); setChainInfo(defaultChainInfo);
return; return;
} }
const info = await res.json();
setChainInfo({ const info: ChainInfo = await res.json();
nativeName: info.nativeCurrency.name, setChainInfo(info);
nativeDecimals: info.nativeCurrency.decimals, } catch (err) {
nativeSymbol: info.nativeCurrency.symbol, // ignore
}); setChainInfo(defaultChainInfo);
return;
}
}; };
readChainInfo(); readChainInfo();
}, [assetsURLPrefix, chainId]); }, [assetsURLPrefix, chainId]);

67
src/usePriceOracle.ts
View File

@ -3,6 +3,72 @@ import { JsonRpcProvider, BlockTag } from "@ethersproject/providers";
import { Contract } from "@ethersproject/contracts"; import { Contract } from "@ethersproject/contracts";
import { BigNumber } from "@ethersproject/bignumber"; import { BigNumber } from "@ethersproject/bignumber";
import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Interface.json"; import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Interface.json";
import FeedRegistryInterface from "@chainlink/contracts/abi/v0.8/FeedRegistryInterface.json";
import { Fetcher } from "swr";
import useSWRImmutable from "swr/immutable";
import { ChecksummedAddress } from "./types";
const FEED_REGISTRY_MAINNET: ChecksummedAddress =
"0x47Fb2585D2C56Fe188D0E6ec628a38b74fCeeeDf";
// The USD "token" address for Chainlink feed registry's purposes
const USD = "0x0000000000000000000000000000000000000348";
type FeedRegistryFetcherKey = [ChecksummedAddress, BlockTag];
type FeedRegistryFetcherData = [BigNumber | undefined, number | undefined];
const feedRegistryFetcherKey = (
tokenAddress: ChecksummedAddress,
blockTag: BlockTag | undefined
): FeedRegistryFetcherKey | null => {
if (blockTag === undefined) {
return null;
}
return [tokenAddress, blockTag];
};
const feedRegistryFetcher =
(
provider: JsonRpcProvider | undefined
): Fetcher<FeedRegistryFetcherData, FeedRegistryFetcherKey> =>
async (tokenAddress, blockTag) => {
// It work works on ethereum mainnet and kovan, see:
// https://docs.chain.link/docs/feed-registry/
if (provider!.network.chainId !== 1) {
throw new Error("FeedRegistry is supported only on mainnet");
}
// Let SWR handle error
const feedRegistry = new Contract(
FEED_REGISTRY_MAINNET,
FeedRegistryInterface,
provider
);
const priceData = await feedRegistry.latestRoundData(tokenAddress, USD, {
blockTag,
});
const quote = BigNumber.from(priceData.answer);
const decimals = await feedRegistry.decimals(tokenAddress, USD, {
blockTag,
});
return [quote, decimals];
};
export const useTokenUSDOracle = (
provider: JsonRpcProvider | undefined,
blockTag: BlockTag | undefined,
tokenAddress: ChecksummedAddress
): [BigNumber | undefined, number | undefined] => {
const fetcher = feedRegistryFetcher(provider);
const { data, error } = useSWRImmutable(
feedRegistryFetcherKey(tokenAddress, blockTag),
fetcher
);
if (error) {
return [undefined, undefined];
}
return data ?? [undefined, undefined];
};
export const useETHUSDOracle = ( export const useETHUSDOracle = (
provider: JsonRpcProvider | undefined, provider: JsonRpcProvider | undefined,
@ -22,6 +88,7 @@ export const useMultipleETHUSDOracle = (
blockTags: (BlockTag | undefined)[] blockTags: (BlockTag | undefined)[]
) => { ) => {
const ethFeed = useMemo(() => { const ethFeed = useMemo(() => {
// TODO: it currently is hardcoded to support only mainnet
if (!provider || provider.network.chainId !== 1) { if (!provider || provider.network.chainId !== 1) {
return undefined; return undefined;
} }

2
topic0

@ -1 +1 @@
Subproject commit cb6abe87055d2e2d54ba6a985903031420c4cbb1 Subproject commit e7be61f955f53fa2131cd14155d6891993772ff7

2
trustwallet

@ -1 +1 @@
Subproject commit b8d1c58acfd93b1b698fe5854f2c09bff70e9fdf Subproject commit dd4ba75fb6da47c3ec1130109c4411c006267d56