feat(oracle deployed): adding deployment check part 1

src/component/OracleDecoder.tsx

@@ -405,6 +405,7 @@ Provided: ${decimalResult.quoteTokenDecimalsProvided}, Expected: ${decimalResult
             <CheckItemFeeds
               title="Feeds Check"
               isVerified={routeResult?.isValid ?? null}
+              isHardcoded={routeResult?.isHardcoded ?? null}
               details={
                 routeResult
                   ? routeResult.isValid

src/component/OracleTestor.tsx

@@ -14,6 +14,8 @@ import { LuExternalLink } from "react-icons/lu";
 import useOraclePriceCheck from "../hooks/testor/useOraclePriceCheck";
 import CheckItemFeeds from "./common/CheckItemFeeds";
 import { Asset } from "../hooks/types";
+import useOracleDeploymentCheck from "../hooks/testor/useOracleDeploymentCheck";
+import CheckItemDeployment from "./common/CheckItemDeployment";
 
 const ethLogo = "https://cdn.morpho.org/assets/chains/eth.svg";
 const baseLogo = "https://cdn.morpho.org/assets/chains/base.png";
@@ -101,6 +103,14 @@ const OracleTestor = () => {
     assets
   );
 
+  const {
+    result: deploymentResult,
+    loading: deploymentLoading,
+    //eslint-disable-next-line
+    errors: deploymentError,
+    checkDeployment,
+  } = useOracleDeploymentCheck();
+
   useEffect(() => {
     setIsSubmitEnabled(
       collateralAssetTouched &&
@@ -187,6 +197,7 @@ const OracleTestor = () => {
       loanAssetSymbol
     );
     await priceCheck();
+    await checkDeployment(selectedNetwork.value, oracleInputs);
     setIsSubmitting(false);
   };
 
@@ -247,6 +258,14 @@ const OracleTestor = () => {
     },
   ];
 
+  const getExplorerUrl = (address: string) => {
+    const baseUrl =
+      selectedNetwork.value === 1
+        ? "https://etherscan.io/address/"
+        : "https://basescan.org/address/";
+    return `${baseUrl}${address}`;
+  };
+
   return (
     <div className="main-background">
       <div className="oracle-container">
@@ -570,9 +589,43 @@ Provided: ${decimalResult.quoteTokenDecimalsProvided}, Expected: ${decimalResult
               loading={formSubmitted ? decimalLoading : false}
             />
 
+            <CheckItemDeployment
+              title="Deployment Check"
+              isVerified={
+                deploymentResult ? !deploymentResult.isDeployed : null
+              }
+              details={
+                deploymentResult ? (
+                  deploymentResult.isDeployed ? (
+                    <>
+                      An oracle with these inputs is already deployed at
+                      address:{" "}
+                      <a
+                        href={getExplorerUrl(deploymentResult.address || "")}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ fontWeight: "bold" }}
+                      >
+                        {deploymentResult.address}
+                      </a>
+                    </>
+                  ) : (
+                    "No oracle with these inputs has been deployed yet, feel free to proceed."
+                  )
+                ) : (
+                  ""
+                )
+              }
+              description="Check if an oracle with the same inputs has already been deployed."
+              loading={deploymentLoading}
+            />
+
             <CheckItemFeeds
               title="Feeds Check"
               isVerified={formSubmitted ? routeResult?.isValid ?? null : null}
+              isHardcoded={
+                formSubmitted ? routeResult?.isHardcoded ?? null : null
+              }
               details={
                 formSubmitted && routeResult
                   ? routeResult.isValid

src/component/common/CheckItem.tsx

@@ -66,7 +66,7 @@ const CheckItem: React.FC<CheckItemProps> = ({
           {description}
         </p>
       )}
-      {isOpen && (
+      {isOpen && details && (
         <>
           <div
             style={{
@@ -79,17 +79,15 @@ const CheckItem: React.FC<CheckItemProps> = ({
             {loading ? (
               <p style={{ margin: "0", fontSize: "0.7rem" }}>Loading...</p>
             ) : (
-              details && (
-                <div
-                  style={{
-                    fontSize: "0.8rem",
-                    margin: "0",
-                    whiteSpace: "pre-wrap",
-                  }}
-                >
-                  <p>{details}</p>
-                </div>
-              )
+              <div
+                style={{
+                  fontSize: "0.8rem",
+                  margin: "0",
+                  whiteSpace: "pre-wrap",
+                }}
+              >
+                <p>{details}</p>
+              </div>
             )}
           </div>
         </>

src/component/common/CheckItemDeployment.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { BiCheckDouble, BiError, BiCaretDown, BiCaretUp } from "react-icons/bi";
+
+interface CheckItemProps {
+  title: string;
+  isVerified: boolean | null;
+  details?: React.ReactNode;
+  description?: string;
+  loading?: boolean;
+}
+
+const CheckItem: React.FC<CheckItemProps> = ({
+  title,
+  isVerified,
+  details,
+  description,
+  loading,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const backgroundColor =
+    isVerified === null ? "#e2e3e5" : isVerified ? "#d4edda" : "#ffeeba";
+  const textColor =
+    isVerified === null ? "#6c757d" : isVerified ? "#155724" : "#6c757d";
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  return (
+    <div
+      style={{
+        border: `0.5px solid ${backgroundColor}`,
+        borderRadius: "8px",
+        padding: "10px",
+        margin: "10px 0 0 0",
+        backgroundColor: backgroundColor,
+        color: textColor,
+        maxHeight: "130px",
+        overflowY: "auto",
+      }}
+    >
+      <div
+        style={{ display: "flex", alignItems: "center", cursor: "pointer" }}
+        onClick={handleToggle}
+      >
+        {isOpen ? <BiCaretUp /> : <BiCaretDown />}
+        <h2 style={{ margin: "2px", fontSize: "1rem", marginLeft: "8px" }}>
+          {title}{" "}
+          {isVerified === null ? (
+            ""
+          ) : isVerified ? (
+            <BiCheckDouble />
+          ) : (
+            <BiError />
+          )}
+        </h2>
+      </div>
+      {description && (
+        <p
+          style={{
+            fontSize: "0.7rem",
+            color: "#6c757d",
+            fontStyle: "italic",
+            margin: "1px",
+          }}
+        >
+          {description}
+        </p>
+      )}
+      {isOpen && details && (
+        <div
+          style={{
+            background: "white",
+            borderRadius: "4px",
+            padding: "0.3rem",
+            marginTop: "10px",
+          }}
+        >
+          {loading ? (
+            <p style={{ margin: "0", fontSize: "0.7rem" }}>Loading...</p>
+          ) : (
+            <div
+              style={{
+                fontSize: "0.8rem",
+                margin: "0",
+                whiteSpace: "pre-wrap",
+              }}
+            >
+              <p>{details}</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CheckItem;