- {loading &&
}
-
+
+ {loading &&
}
+
handleChange(e.target.value)}
+ onBlur={() => setTouched(true)}
+ placeholder="0x…"
+ className={`w-full px-3 py-2 border rounded-md shadow-sm font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ceruleanBlue-500 focus:border-ceruleanBlue-500 ${
+ invalid ? "border-red-400" : "border-gray-300"
+ }`}
+ />
+ {invalid &&
Invalid contract address
}
+
+
);
diff --git a/src/pages/Lookup/Result.tsx b/src/pages/Lookup/Result.tsx
index 6e03236..6902f04 100644
--- a/src/pages/Lookup/Result.tsx
+++ b/src/pages/Lookup/Result.tsx
@@ -1,240 +1,127 @@
import { useContext } from "react";
-import { renderToString } from "react-dom/server";
-import { HiBadgeCheck, HiOutlineArrowLeft, HiOutlineInformationCircle, HiX } from "react-icons/hi";
-import { Link } from "react-router-dom";
-import { Tooltip } from "react-tooltip";
-import Button from "../../components/Button";
-import { REPOSITORY_URL } from "../../constants";
+import { HiOutlineArrowLeft } from "react-icons/hi";
+import { IoOpenOutline } from "react-icons/io5";
+import MatchBadge from "../../components/MatchBadge";
+import { REPOSITORY_URL, VERIFY_URL } from "../../constants";
import { Context } from "../../Context";
-import { CheckAllByAddressResult } from "../../types";
-import { isBrowser } from "react-device-detect";
+import { AllChainsResponse, VerifiedContractMinimal } from "../../types";
type ResultProp = {
- response: CheckAllByAddressResult;
- goBack: React.DispatchWithoutAction;
+ address: string;
+ response: AllChainsResponse;
+ goBack: () => void;
};
-const URL_TYPE = {
- REMIX: "remix",
- REPO: "repo",
-};
+const remixUrl = (chainId: string, address: string) =>
+ `https://remix.ethereum.org/?#activate=contract-verification&call=contract-verification//lookupAndSave//sourcify//${chainId}//${address}`;
-const generateUrl = (type: string, chainId: string, address: string, status: string) => {
- if (type === URL_TYPE.REMIX)
- return `https://remix.ethereum.org/?#activate=contract-verification&call=contract-verification//lookupAndSave//sourcify//${chainId}//${address}`;
- return `${REPOSITORY_URL}/${chainId}/${address}/`;
-};
+const repoUrl = (chainId: string, address: string) => `${REPOSITORY_URL}/${chainId}/${address}/`;
-type NetworkRowProp = {
- chainId: string;
- status: string;
- address: any;
-};
-type FoundProp = {
- response: CheckAllByAddressResult;
- goBack: () => void;
-};
-type NotFoundProp = {
- address: any;
- goBack: () => void;
-};
-type MatchStatusProps = {
- status: string;
-};
-const PerfectMatchInfoText = (
-
- An exact match indicates the Solidity source code does not deviate a single byte from the source code when deployed.{" "}
-
See{" "}
-
- docs
- {" "}
- for details.
-
-);
-const PartialMatchInfoText = (
-
- A match indicates the Solidity source code functionally corresponds to the deployed contract but some aspects of the
- source code might differ from the original source code.
See{" "}
-
- docs
- {" "}
- for details.
-
-);
-const MatchStatusBadge = ({ status }: MatchStatusProps) => {
- if (status === "perfect") {
- return (
- <>
-
-
- exact match
-
-
- );
- }
- if (status === "partial") {
- return (
- <>
-
-
- match
-
-
- );
- }
- return null;
+
+type ChainRowProps = {
+ contract: VerifiedContractMinimal;
};
-const NetworkRow = ({ address, chainId, status }: NetworkRowProp) => {
- const { sourcifyChainMap } = useContext(Context);
- const chainToName = (chainId: any) => {
- return sourcifyChainMap[chainId]?.title || sourcifyChainMap[chainId]?.name;
- };
+const ChainRow = ({ contract }: ChainRowProps) => {
+ const { sourcifyChainMap } = useContext(Context);
+ const chain = sourcifyChainMap[parseInt(contract.chainId)];
+ const chainName = chain?.title || chain?.name || `Chain ${contract.chainId}`;
+ const verifiedDate = new Date(contract.verifiedAt).toISOString().split("T")[0];
return (
- <>
- {isBrowser ? (
-
- |
- {chainToName(chainId)}{" "}
- |
-
-
- |
-
-
- View in Sourcify Repository
-
- |
-
-
- View in Remix
-
- |
-
- ) : (
-
-
- {chainToName(chainId)}{" "}
-
-
-
-
-
-
+
+ |
+ {chainName}
+ Chain ID: {contract.chainId}
+ |
+
+
+ |
+
+
+ |
+ {verifiedDate} |
+
+
- )}
-
+ |
+
);
};
-const InfoText = () => (
-
- Sourcify verification means a matching Solidity source code of the
contract is available on the Sourcify
- repo.
See{" "}
-
- docs
- {" "}
- for details.
-
-);
+const Result = ({ address, response, goBack }: ResultProp) => {
+ const { results } = response;
-const Found = ({ response, goBack }: FoundProp) => {
- const chains = response?.chainIds;
return (
-
-
-
-
- The contract at address {response?.address} is{" "}
-
- verified
-
-
-
-
{chains.length > 0 && on the following networks:}
+
+ {/* Header: back arrow + full address */}
+
+
+
{address}
- {chains.length > 0 ? (
-
- {chains.map(({ chainId, status }) => (
-
- ))}
-
+
+ {results.length > 0 ? (
+
+
+
+
+ | Chain |
+ Creation Match |
+ Runtime Match |
+ Verified At |
+ Source |
+
+
+
+ {results.map((contract) => (
+
+ ))}
+
+
+
) : (
-
This contract has not yet been deployed on any chain
+
+
+ The contract at{" "}
+ {address} is not
+ verified on Sourcify.
+
+
Do you have the source code?
+
+ Verify Contract
+
+
)}
-
-
Not verified on the chain you are looking for?
-
-
-
-
-
-
- );
-};
-const NotFound = ({ address, goBack }: NotFoundProp) => {
- return (
- <>
-
-
- The contract at address {address} is not verified on Sourcify.
-
-
-
-
Do you have the source code and metadata?
-
-
-
-
-
-
- );
-};
-
-const verificationIcon = (status: string | undefined) => {
- if (status === "false") {
- return
;
- }
- return
;
-};
-
-const Result = ({ response, goBack }: ResultProp) => {
- return (
-
-
goBack()} />
-
- {verificationIcon(response?.status)}
- {!!response && response?.status !== "false" ? (
-
- ) : (
-
- )}
-
);
};
diff --git a/src/pages/Lookup/index.tsx b/src/pages/Lookup/index.tsx
index 0bc7c90..79ee994 100644
--- a/src/pages/Lookup/index.tsx
+++ b/src/pages/Lookup/index.tsx
@@ -1,9 +1,10 @@
-import { useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
import Header from "../../components/Header";
+import PageLayout from "../../components/PageLayout";
import Toast from "../../components/Toast";
import { Context } from "../../Context";
-import { CheckAllByAddressResult } from "../../types";
-import { checkAllByAddresses } from "../../utils/api";
+import { AllChainsResponse } from "../../types";
+import { getVerifiedContractAllChains } from "../../utils/api";
import Field from "./Field";
import Result from "./Result";
import { useParams, useNavigate } from "react-router-dom";
@@ -12,67 +13,67 @@ import { isAddress, getAddress } from "@ethersproject/address";
const Lookup = () => {
const navigate = useNavigate();
const [loading, setLoading] = useState
(false);
- const [response, setResponse] = useState(undefined);
+ const [response, setResponse] = useState(undefined);
+ const [displayAddress, setDisplayAddress] = useState(undefined);
+ const queriedAddressRef = useRef(undefined);
const { address } = useParams();
- const { sourcifyChains, errorMessage, setErrorMessage } = useContext(Context);
+ const { errorMessage, setErrorMessage } = useContext(Context);
- const handleRequest = async (_address: string) => {
- if (!sourcifyChains?.length) {
- return;
- }
- setLoading(true);
- try {
- const result = await checkAllByAddresses(
- _address,
- `0,${sourcifyChains.map((c) => c.chainId.toString()).join(",")}`
- );
- const currentAddressMatches = result.find((match) => (match.address = _address));
- setResponse(currentAddressMatches);
- navigate(`/lookup/${_address}`);
- } catch (err: any) {
- setErrorMessage(err.message || "An error occurred, try again!");
- setErrorMessage("")} />;
- } finally {
- setLoading(false);
- }
- };
+ const handleRequest = useCallback(
+ async (_address: string) => {
+ queriedAddressRef.current = _address;
+ setLoading(true);
+ try {
+ const result = await getVerifiedContractAllChains(_address);
+ setResponse(result);
+ setDisplayAddress(_address);
+ navigate(`/address/${_address}`);
+ } catch (err: any) {
+ queriedAddressRef.current = undefined;
+ setErrorMessage(err.message || "An error occurred, try again!");
+ } finally {
+ setLoading(false);
+ }
+ },
+ [navigate, setErrorMessage]
+ );
const goBack = () => {
+ queriedAddressRef.current = undefined;
setResponse(undefined);
- navigate(`/lookup`);
+ setDisplayAddress(undefined);
+ navigate("/address");
};
+ // Only depends on the URL param — state changes from goBack cannot re-trigger this.
useEffect(() => {
- if (address && address !== response?.address) {
- if (!isAddress(address)) {
- return;
- }
- // Get checksummed format
- const checksummedAddress = getAddress(address);
- handleRequest(checksummedAddress);
+ if (!address) {
+ queriedAddressRef.current = undefined;
+ setResponse(undefined);
+ setDisplayAddress(undefined);
+ return;
+ }
+ if (queriedAddressRef.current === address) return;
+ if (!isAddress(address)) {
+ setErrorMessage("Invalid contract address in URL");
+ return;
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [sourcifyChains, address]);
+ const checksummedAddress = getAddress(address);
+ queriedAddressRef.current = checksummedAddress;
+ handleRequest(checksummedAddress);
+ }, [address, handleRequest, setErrorMessage]);
return (
-
+
-
-
setErrorMessage("")} />
-
-
Contract Lookup
-
Look for verified contracts in the Sourcify repository
-
-
- {!!response ? (
-
- ) : (
-
- )}
-
-
+
setErrorMessage("")} />
+
+ {response ? (
+
+ ) : (
+
+ )}
+
);
};
diff --git a/src/types.ts b/src/types.ts
index 34dcd0c..feae48f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,15 +1,20 @@
-export type CheckAllByAddressResult = {
+export interface VerifiedContractMinimal {
+ match: "match" | "exact_match" | null;
+ creationMatch: "match" | "exact_match" | null;
+ runtimeMatch: "match" | "exact_match" | null;
+ chainId: string;
address: string;
- status?: string;
- chainIds: {
- chainId: string;
- status: string;
- }[];
-};
+ verifiedAt: string;
+ matchId: string;
+}
+
+export interface AllChainsResponse {
+ results: VerifiedContractMinimal[];
+}
export type Chain = {
name: string;
- title?: string; // Longer name for some networks
+ title?: string;
chainId: number;
shortName: string;
network: string;
diff --git a/src/utils/api.tsx b/src/utils/api.tsx
index 8e7f763..7ecc86b 100644
--- a/src/utils/api.tsx
+++ b/src/utils/api.tsx
@@ -1,48 +1,13 @@
import { SERVER_URL, BIGQUERY_API_URL } from "../constants";
-import { Chain, CheckAllByAddressResult } from "../types";
+import { AllChainsResponse, Chain } from "../types";
-type ChainIdsResponse = {
- chainId: string;
- status: string;
+export const getVerifiedContractAllChains = async (address: string): Promise
=> {
+ const response = await fetch(`${SERVER_URL}/v2/contract/all-chains/${address}`);
+ if (response.status === 404) return { results: [] };
+ if (!response.ok) throw new Error(`Lookup failed: ${response.status} ${response.statusText}`);
+ return response.json();
};
-export type ServersideAddressCheck = {
- address: string;
- status: string;
- chainIds?: ChainIdsResponse[];
-};
-
-export const checkAllByAddresses = async (
- addresses: string,
- chainIds: string
-): Promise => {
- const response = await fetch(
- `${SERVER_URL}/checkAllByAddresses?addresses=${addresses}&chainIds=${chainIds}`,
- {
- method: "GET",
- }
- );
-
- if (!response.ok) {
- // e.g. HTTP 400 invalid address
- let jsonError;
- try {
- jsonError = await response.json();
- } catch (e) {
- throw new Error("Cannot parse the error message");
- }
- throw new Error(jsonError.message);
- }
-
- return await response.json();
-};
-
-/**
- * @function to fetch Sourcify's chains array and return as an object with the chainId as keys.
- *
- * The Ethereum networks are placed on top, the rest of the networks are sorted alphabetically.
- *
- */
export const getSourcifyChains = async (): Promise => {
const chainsArray = await (await fetch(`${SERVER_URL}/chains`)).json();
return chainsArray;
@@ -62,9 +27,7 @@ export interface BigQueryResponse {
rows: any[];
}
-export const bigquery = async (
- sql: string
-): Promise => {
+export const bigquery = async (sql: string): Promise => {
const response = await fetch(`${BIGQUERY_API_URL}`, {
method: "POST",
headers: {
@@ -74,7 +37,6 @@ export const bigquery = async (
});
if (!response.ok) {
- // e.g. HTTP 400 invalid address
let jsonError;
try {
jsonError = await response.json();
diff --git a/tailwind.config.js b/tailwind.config.js
index 52dda17..a83051b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
extend: {
colors: {
ceruleanBlue: {
+ 50: "#f3f6ff",
100: "#E8EFFF",
200: "#A9BDEE",
300: "#7693DA",