Skip to content

Commit c2caf10

Browse files
kuzdogankuzdogan
committed
Fix etherscanUrls
1 parent daa424f commit c2caf10

File tree

3 files changed

+30
-71
lines changed

3 files changed

+30
-71
lines changed

‎src/App.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ function App() {
4141
const [chainIndex, setChainIndex] = useState(0);
4242
const [chainObject, setChainObject] = useState();
4343
const [sourcifyChains, setSourcifyChains] = useState();
44+
const [etherscanChains, setEtherscanChains] = useState();
4445
const [isModalOpen, setModalOpen] = useState(false);
4546
const [customByteCode, setCustomByteCode] = useState();
4647
const [chainArray, setChainArray] = useState(); // chainId.network/chains.json result
@@ -68,7 +69,7 @@ function App() {
6869
fetch("https://chainid.network/chains.json")
6970
.then((res) => res.json())
7071
.then((arr) => {
71-
const ethereumChainIds = [1, 5, 11155111];
72+
const ethereumChainIds = [1, 11155111, 1337];
7273
// move ethereum networks to the top
7374
const sortedArr = arr.sort((a, b) => {
7475
if (ethereumChainIds.includes(a.chainId) && ethereumChainIds.includes(b.chainId)) {
@@ -102,6 +103,12 @@ function App() {
102103
.then((arr) => {
103104
setSourcifyChains(arr);
104105
});
106+
107+
fetch("https://api.etherscan.io/v2/chainlist")
108+
.then((res) => res.json())
109+
.then((response) => {
110+
setEtherscanChains(response.result);
111+
});
105112
}, []);
106113

107114
// On chainIndex change
@@ -277,6 +284,7 @@ function App() {
277284
address={address}
278285
chainObject={chainArray[chainIndex]}
279286
sourcifyChains={sourcifyChains}
287+
etherscanChains={etherscanChains}
280288
/>
281289
<div className="flex flex-col items-center">
282290
<img className="w-12 md:w-16" src={process.env.PUBLIC_URL + "/solidity.png"} alt="Solidity logo" />

‎src/components/BlockExplorerButton.jsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
11
import blockscoutLogo from "../assets/blockscout.png";
22
import etherscanLogo from "../assets/etherscan.webp";
3-
const BlockExplorerButton = ({ chain, address, sourcifyChains }) => {
4-
const sourcifyChainObject = sourcifyChains.find((sourcifyChain) => sourcifyChain.chainId === chain);
5-
// Filter chains that include an 'etherscanAPI' and transform their URLs to exclude the api part in https://api.etherscan.io/api
6-
let etherscanURL;
7-
8-
if (sourcifyChainObject?.etherscanAPI) {
9-
const url = new URL(sourcifyChainObject.etherscanAPI);
10-
const subdomains = url.hostname.split("."); // Split the hostname into parts
11-
const cleanedHostname = subdomains.slice(1).join("."); // Join parts back without the first subdomain
12-
etherscanURL = `https://${cleanedHostname}`; // Prepend 'https://' to the cleaned hostname, ignoring any paths
13-
}
14-
15-
console.log(etherscanURL);
3+
const BlockExplorerButton = ({ chain, address, sourcifyChains, etherscanChains }) => {
4+
console.log(etherscanChains);
5+
const etherscanURL = etherscanChains.find((etherscanChain) => etherscanChain.chainid == chain)?.blockexplorer;
166

177
const blockscoutDomains = {
188
100: "xdai/mainnet",

‎src/components/Modal.jsx‎

Lines changed: 18 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ const SolcVersion = ({ hexversion }) => {
1515
}
1616
const rawHex = hexversion.slice(2); // remove 0x
1717
const rawHexFields = rawHex.match(/.{1,2}/g); // split into two chars
18-
const decimalFields = rawHexFields
19-
.map((rawHex) => "0x" + rawHex)
20-
.map((prefixedHex) => Number(prefixedHex));
18+
const decimalFields = rawHexFields.map((rawHex) => "0x" + rawHex).map((prefixedHex) => Number(prefixedHex));
2119
const version = decimalFields.join(".");
2220
return version;
2321
};
@@ -27,20 +25,12 @@ const ByteCodeInput = ({ children, cborByteLength }) => {
2725
useEffect(() => {
2826
bottom.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
2927
// Scroll again to fix when sometimes it does not scroll fully to the bottom.
30-
setTimeout(
31-
() =>
32-
bottom.current.scrollIntoView({ behavior: "smooth", block: "nearest" }),
33-
200
34-
);
28+
setTimeout(() => bottom.current.scrollIntoView({ behavior: "smooth", block: "nearest" }), 200);
3529
});
3630
// If cborByteLength === 0, don't highlight.
3731
const cborStrLength = 2 * cborByteLength;
38-
const unhighlighted = cborByteLength
39-
? children.slice(0, -cborStrLength - 4)
40-
: children;
41-
const highlighted = cborByteLength
42-
? children.slice(-cborStrLength - 4, -4)
43-
: null;
32+
const unhighlighted = cborByteLength ? children.slice(0, -cborStrLength - 4) : children;
33+
const highlighted = cborByteLength ? children.slice(-cborStrLength - 4, -4) : null;
4434
const cborBytes = cborByteLength ? children.slice(-4) : null;
4535
return (
4636
<div className="text-gray-700 overflow-y-auto break-all max-h-48 md:max-h-56 font-mono">
@@ -62,6 +52,7 @@ export default function Modal({
6252
address,
6353
chainObject,
6454
sourcifyChains,
55+
etherscanChains,
6556
}) {
6657
const focusButtonRef = useRef();
6758
useEffect(() => {
@@ -72,18 +63,11 @@ export default function Modal({
7263
return null;
7364
}
7465
const { chainId: chain, name: networkName } = chainObject;
75-
const cborByteLength = decodedCbor
76-
? parseInt(Number("0x" + byteCode.slice(-4)), 10)
77-
: 0;
66+
const cborByteLength = decodedCbor ? parseInt(Number("0x" + byteCode.slice(-4)), 10) : 0;
7867

7968
return (
8069
<Transition.Root show={isOpen} as={Fragment}>
81-
<Dialog
82-
as="div"
83-
className="fixed z-10 inset-0 md:mx-24 "
84-
initialFocus={focusButtonRef}
85-
onClose={onClose}
86-
>
70+
<Dialog as="div" className="fixed z-10 inset-0 md:mx-24 " initialFocus={focusButtonRef} onClose={onClose}>
8771
<div className="flex justify-center items-center h-screen py-4 px-4 pb-4 text-center sm:p-0 text-sm md:text-base">
8872
<Transition.Child
8973
as={Fragment}
@@ -98,10 +82,7 @@ export default function Modal({
9882
</Transition.Child>
9983

10084
{/* This element is to trick the browser into centering the modal contents. */}
101-
<span
102-
className="hidden sm:inline-block sm:align-middle sm:h-screen"
103-
aria-hidden="true"
104-
>
85+
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
10586
&#8203;
10687
</span>
10788
<Transition.Child
@@ -119,50 +100,34 @@ export default function Modal({
119100
<div className="mt-3 sm:mt-0 sm:ml-4 sm:text-left white">
120101
{address ? (
121102
<div>
122-
<Dialog.Title
123-
as="h3"
124-
className="text-center text-lg leading-6 font-medium text-gray-900"
125-
>
103+
<Dialog.Title as="h3" className="text-center text-lg leading-6 font-medium text-gray-900">
126104
Contract {address} on {networkName}
127105
</Dialog.Title>
128106

129-
<div
130-
className="flex justify-center align-middle my-2"
131-
ref={focusButtonRef}
132-
>
107+
<div className="flex justify-center align-middle my-2" ref={focusButtonRef}>
133108
<SourcifyButton chain={chain} address={address} />
134109
<BlockExplorerButton
135110
chain={chain}
136111
address={address}
137112
sourcifyChains={sourcifyChains}
113+
etherscanChains={etherscanChains}
138114
/>
139115
</div>
140116
</div>
141117
) : null}
142-
<p className="text-lg font-bold text-gray-900">
143-
Contract Bytecode
144-
</p>
145-
<ByteCodeInput cborByteLength={cborByteLength}>
146-
{byteCode}
147-
</ByteCodeInput>
118+
<p className="text-lg font-bold text-gray-900">Contract Bytecode</p>
119+
<ByteCodeInput cborByteLength={cborByteLength}>{byteCode}</ByteCodeInput>
148120
{/* Decoded */}
149121
<div className="mt-4">
150-
<p className="text-lg font-bold text-gray-900">
151-
CBOR decoding
152-
</p>
122+
<p className="text-lg font-bold text-gray-900">CBOR decoding</p>
153123

154124
{decodedCbor ? (
155125
<div>
156126
<span>CBOR length:</span>{" "}
157-
<pre className={"inline-block " + cborHighlightStyle}>
158-
{cborByteLength} Bytes
159-
</pre>
127+
<pre className={"inline-block " + cborHighlightStyle}>{cborByteLength} Bytes</pre>
160128
<span className="text-xs underline ml-2 text-gray-700">
161129
<a
162-
href={`https://cbor.me/?bytes=${byteCode.slice(
163-
-(2 * cborByteLength) - 4,
164-
-4
165-
)}`}
130+
href={`https://cbor.me/?bytes=${byteCode.slice(-(2 * cborByteLength) - 4, -4)}`}
166131
target="_blank"
167132
rel="noreferrer"
168133
>
@@ -180,17 +145,13 @@ export default function Modal({
180145
{/* solc version */}
181146
{decodedCbor?.solc && (
182147
<div className="mt-4">
183-
<p className="text-lg font-bold text-gray-900">
184-
Solidity compiler version (decoded)
185-
</p>
148+
<p className="text-lg font-bold text-gray-900">Solidity compiler version (decoded)</p>
186149
<SolcVersion hexversion={decodedCbor.solc} />
187150
</div>
188151
)}
189152
{/* IPFS Link */}
190153
<div className="mt-4">
191-
<p className="text-lg font-bold text-gray-900">
192-
Metadata Hash (decoded)
193-
</p>
154+
<p className="text-lg font-bold text-gray-900">Metadata Hash (decoded)</p>
194155
<MetadataAndSources metadataHash={metadataHash} />
195156
</div>
196157
</div>

0 commit comments

Comments
 (0)