feat: no cors for sourcify, new beam background, improved examples, p…

…ath fixes
xtools-at · Oct 20, 2023 · 3ba7ec9 · 3ba7ec9
1 parent 4a3e83a
commit 3ba7ec9
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 36 deletions.
diff --git a/components/SourceBrowser/index.tsx b/components/SourceBrowser/index.tsx
@@ -18,8 +18,8 @@ import { Chain } from "types/Chain";
 import { query } from "utils/jsonQuery";
 import Autocomplete from "@mui/material/Autocomplete";
 import { log } from "utils/logger";
-
 import { SlideUpTransition } from "utils/transitions";
+import { basePath, corsProxyUrlPrefix } from "config/app";
 
 export const SourceBrowser = ({
 	onFileChange,
@@ -87,8 +87,12 @@ export const SourceBrowser = ({
 
 	const importAbiSourcify = async (chain: Chain) => {
 		// Sourcify.dev
-		const urlPartial = `https://repo.sourcify.dev/contracts/partial_match/${chain.chainId}/${address}/metadata.json`;
-		const urlFull = `https://repo.sourcify.dev/contracts/full_match/${chain.chainId}/${address}/metadata.json`;
+		const urlPartial = `${corsProxyUrlPrefix}${encodeURIComponent(
+			`https://repo.sourcify.dev/contracts/partial_match/${chain.chainId}/${address}/metadata.json`
+		)}`;
+		const urlFull = `${corsProxyUrlPrefix}${encodeURIComponent(
+			`https://repo.sourcify.dev/contracts/full_match/${chain.chainId}/${address}/metadata.json`
+		)}`;
 		let data;
 
 		toggleImportStatus(true);
@@ -213,37 +217,65 @@ export const SourceBrowser = ({
 				helperText={
 					<>
 						Try quicklinks:{" "}
-						<Link href="/?json=/uniswapV2Router.json&address=0x965B104e250648d01d4B3b72BaC751Cde809D29E&func=getAmountsIn&network=4337">
+						<Link
+							href={`${
+								basePath || ""
+							}/?json=/uniswapV2Router.json&address=0x965B104e250648d01d4B3b72BaC751Cde809D29E&func=getAmountsIn&network=4337`}
+						>
 							BeamSwap
 						</Link>
 						,{" "}
-						<Link href="/?json=/weth.json&address=0xD51BFa777609213A653a2CD067c9A0132a2D316A&func=deposit&network=4337">
+						<Link
+							href={`${
+								basePath || ""
+							}/?json=/weth.json&address=0xD51BFa777609213A653a2CD067c9A0132a2D316A&func=deposit&network=4337`}
+						>
 							WMC
 						</Link>
 						,{" "}
-						<Link href="/?json=/erc20.json&address=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304&func=transfer&network=4337">
+						<Link
+							href={`${
+								basePath || ""
+							}/?json=/erc20.json&address=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304&func=transfer&network=4337`}
+						>
 							USDC
 						</Link>
 						,{" "}
-						<Link href="/?json=/erc721.json&address=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304&func=safeTransferFrom&network=4337">
+						<Link
+							href={`${
+								basePath || ""
+							}/?json=/erc20.json&address=0x00E69e0b6014d77040b28E04F2b8ac25A6EA5d34&func=transfer&network=4337`}
+						>
+							ERC20
+						</Link>
+						,{" "}
+						<Link
+							href={`${
+								basePath || ""
+							}/?json=/erc721.json&address=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304&func=safeTransferFrom&network=4337`}
+						>
 							ERC721
 						</Link>
 						,{" "}
-						<Link href="/?json=/erc1155.json&func=safeTransferFrom">
+						<Link
+							href={`${
+								basePath || ""
+							}/?json=/erc1155.json&func=safeTransferFrom`}
+						>
 							ERC1155
 						</Link>
 						.
 						<br />
-						or{" "}
+						Or{" "}
 						<Link
 							sx={{ cursor: "pointer" }}
 							onClick={() => {
 								toggleImportDialog(true);
 							}}
 						>
 							import from contract
-						</Link>
-						.
+						</Link>{" "}
+						via Etherscan/Sourcify.
 					</>
 				}
 			/>
@@ -273,6 +305,7 @@ export const SourceBrowser = ({
 								)}
 								value={chain}
 								onChange={(_, newValue: Chain | null) => {
+									/*
 									if (newValue !== null) {
 										if (!newValue.abi) {
 											onError(
@@ -281,6 +314,7 @@ export const SourceBrowser = ({
 											return;
 										}
 									}
+									*/
 									onChainChange(newValue);
 								}}
 								inputValue={chainSearchText}

diff --git a/config/app.js b/config/app.js
@@ -1,3 +1,4 @@
 module.exports = {
-	basePath: "/smartcontract-ui",
+	basePath: "/smartcontract-ui", // set to "" if not needed
+	corsProxyUrlPrefix: "https://corsproxy.io/?",
 };
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -43,6 +43,7 @@ import { log, warn, fatal } from "utils/logger";
 import ReplayIcon from "@mui/icons-material/Replay";
 import { signers } from "config/signers";
 import { Signer } from "types/Signer";
+import { basePath } from "../config/app";
 
 export default function Page() {
 	// snackbar
@@ -285,8 +286,9 @@ export default function Page() {
 	useEffect(() => {
 		if (url) {
 			(async () => {
+				const abiUrl = `${basePath ? `${basePath}/` : ""}${url}`;
 				try {
-					const jsonContent = await (await fetch(url)).json();
+					const jsonContent = await (await fetch(abiUrl)).json();
 
 					log("url -> set source");
 					setSource(url);
@@ -433,14 +435,14 @@ export default function Page() {
 	);
 
 	useEffect(() => {
-		let shoudlLockParams = false;
+		let shouldLockParams = false;
 
 		if (router.query.network || router.query.func || router.query.address) {
-			shoudlLockParams = true;
+			shouldLockParams = true;
 		} else {
 			for (let key in router.query) {
 				if (key.startsWith("args.")) {
-					shoudlLockParams = true;
+					shouldLockParams = true;
 					break;
 				}
 			}
@@ -450,7 +452,7 @@ export default function Page() {
 			toggleImportDialog(true);
 		}
 
-		if (shoudlLockParams) {
+		if (shouldLockParams) {
 			log("lock params");
 			toggleParamsLock(true);
 		}
@@ -786,18 +788,19 @@ export default function Page() {
 					sm={3}
 					md={6}
 					lg={7}
-					sx={{
-						backgroundImage:
-							"url(https://images.unsplash.com/photo-1620321023374-d1a68fbc720d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8Y3J5cHRvfHx8fHx8MTY3MDAzODc3OQ&ixlib=rb-4.0.3&q=80&w=1080)",
-						backgroundRepeat: "no-repeat",
-						backgroundColor: (t) =>
-							t.palette.mode === "light"
-								? t.palette.grey[50]
-								: t.palette.grey[900],
-						backgroundSize: "cover",
-						backgroundPosition: "center",
-					}}
-				/>
+					sx={{ display: { xs: "none", sm: "block" } }}
+				>
+					<iframe
+						src="https://onbeam.com"
+						scrolling="no"
+						style={{
+							width: "100%",
+							height: "100%",
+							overflow: "hidden",
+							border: 0,
+						}}
+					/>
+				</Grid>
 				<Grid
 					item
 					xs={12}
@@ -817,16 +820,12 @@ export default function Page() {
 							alignItems: "center",
 						}}
 					>
-						<Link href="/">
+						<Link href={`${basePath || "/"}`}>
 							<Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
 								<AccountTreeIcon />
 							</Avatar>
 						</Link>
-						<Typography
-							component="h1"
-							variant="h5"
-							sx={{ position: "absolute", left: "-99999px" }}
-						>
+						<Typography component="h1" variant="h5">
 							Smart Contract UI
 						</Typography>
 						<Box
@@ -960,7 +959,7 @@ export default function Page() {
 									target="_blank"
 									rel="noopener"
 								>
-									Beam Network
+									Beam network
 								</Link>
 								<br />
 								<Link