From bf4fa5160b438ca53ffde9707fbd107fb6cd0fd8 Mon Sep 17 00:00:00 2001
From: Reppelin Tom <tomireppelin@gmail.com>
Date: Wed, 7 Aug 2024 11:27:26 +0200
Subject: [PATCH] feat(oracles): updating the suggestor

---
 src/component/OracleSuggestor.tsx             |  22 ++-
 .../common/CheckItemOraclesDeployed.tsx       | 132 ++++++++++--------
 2 files changed, 87 insertions(+), 67 deletions(-)

diff --git a/src/component/OracleSuggestor.tsx b/src/component/OracleSuggestor.tsx
index f029d7f..d5b39cc 100644
--- a/src/component/OracleSuggestor.tsx
+++ b/src/component/OracleSuggestor.tsx
@@ -207,6 +207,16 @@ const OracleSuggestor = () => {
     return `${baseUrl}${address}`;
   };
 
+  const handleNetworkChange = (selectedOption: any) => {
+    setSelectedNetwork(selectedOption || networkOptions[0]);
+    // Reset collateral and loan asset states
+    setCollateralAsset("");
+    setLoanAsset("");
+    setCollateralAssetTouched(false);
+    setLoanAssetTouched(false);
+    setShowOracleDetails(false); // Hide oracle details when network changes
+  };
+
   return (
     <div className="main-background">
       <div className="oracle-container">
@@ -239,9 +249,7 @@ const OracleSuggestor = () => {
                   <Select
                     options={networkOptions}
                     value={selectedNetwork}
-                    onChange={(selectedOption) => {
-                      setSelectedNetwork(selectedOption || networkOptions[0]);
-                    }}
+                    onChange={handleNetworkChange}
                     styles={{
                       control: (base) => ({
                         ...base,
@@ -259,6 +267,9 @@ const OracleSuggestor = () => {
                   </label>
                   <Select
                     options={assets}
+                    value={assets.find(
+                      (asset) => asset.value === collateralAsset
+                    )}
                     onChange={(selectedOption) => {
                       setCollateralAsset(selectedOption?.value || "");
                       setCollateralAssetTouched(true);
@@ -280,6 +291,7 @@ const OracleSuggestor = () => {
                   </label>
                   <Select
                     options={assets}
+                    value={assets.find((asset) => asset.value === loanAsset)}
                     onChange={(selectedOption) => {
                       setLoanAsset(selectedOption?.value || "");
                       setLoanAssetTouched(true);
@@ -312,9 +324,7 @@ const OracleSuggestor = () => {
           </div>
 
           <div className="checks-section">
-            <h2 style={{ marginLeft: "10px" }}>
-              Existing Oracles for such pair:
-            </h2>
+            <h2 style={{ marginLeft: "10px" }}>Existing Oracles?</h2>
             <CheckItemOraclesDeployed
               title=""
               isVerified={deployedResult?.isValid ?? null}
diff --git a/src/component/common/CheckItemOraclesDeployed.tsx b/src/component/common/CheckItemOraclesDeployed.tsx
index 86c1340..f33f8ee 100644
--- a/src/component/common/CheckItemOraclesDeployed.tsx
+++ b/src/component/common/CheckItemOraclesDeployed.tsx
@@ -29,7 +29,9 @@ const CheckItemOraclesDeployed: React.FC<CheckItemProps> = ({
   const toggleOracleDetails = (index: number) => {
     setExpandedOracles((prev) => ({ ...prev, [index]: !prev[index] }));
   };
-
+  if (!showDetails) {
+    return null; // Return null if showDetails is false
+  }
   return (
     <div
       style={{
@@ -110,7 +112,7 @@ const CheckItemOraclesDeployed: React.FC<CheckItemProps> = ({
                     )}
                   </button>
                 </div>
-                {expandedOracles[index] && oracleItem.oracle.data && (
+                {expandedOracles[index] && (
                   <div
                     style={{
                       backgroundColor: "#f7fafc",
@@ -120,66 +122,74 @@ const CheckItemOraclesDeployed: React.FC<CheckItemProps> = ({
                       fontSize: "0.7rem",
                     }}
                   >
-                    <p
-                      style={{
-                        fontWeight: "600",
-                        marginBottom: "8px",
-                        fontSize: "0.8rem",
-                      }}
-                    >
-                      Feed Information:
-                    </p>
-                    <div
-                      style={{
-                        display: "grid",
-                        gridTemplateColumns: "1fr 1fr",
-                        gap: "16px",
-                        fontSize: "0.6rem",
-                      }}
-                    >
-                      <FeedInfo
-                        title="Base Feed One"
-                        feed={oracleItem.oracle.data.baseFeedOne}
-                      />
-                      <FeedInfo
-                        title="Base Feed Two"
-                        feed={oracleItem.oracle.data.baseFeedTwo}
-                      />
-                      <FeedInfo
-                        title="Quote Feed One"
-                        feed={oracleItem.oracle.data.quoteFeedOne}
-                      />
-                      <FeedInfo
-                        title="Quote Feed Two"
-                        feed={oracleItem.oracle.data.quoteFeedTwo}
-                      />
-                    </div>
-                    <div
-                      style={{
-                        marginTop: "16px",
-                        display: "grid",
-                        gridTemplateColumns: "1fr 1fr",
-                        gap: "16px",
-                        fontSize: "0.6rem",
-                      }}
-                    >
-                      <p>
-                        <strong>Base Vault:</strong>{" "}
-                        {oracleItem.oracle.data.baseVault}
-                      </p>
-                      <p>
-                        <strong>Quote Vault:</strong>{" "}
-                        {oracleItem.oracle.data.quoteVault}
-                      </p>
-                      <p>
-                        <strong>Base Vault Conversion Sample:</strong>{" "}
-                        {oracleItem.oracle.data.baseVaultConversionSample}
-                      </p>
-                      <p>
-                        <strong>Quote Vault Conversion Sample:</strong>{" "}
-                        {oracleItem.oracle.data.quoteVaultConversionSample}
+                    {oracleItem.oracle.data ? (
+                      <>
+                        <p
+                          style={{
+                            fontWeight: "600",
+                            marginBottom: "8px",
+                            fontSize: "0.8rem",
+                          }}
+                        >
+                          Feed Information:
+                        </p>
+                        <div
+                          style={{
+                            display: "grid",
+                            gridTemplateColumns: "1fr 1fr",
+                            gap: "16px",
+                            fontSize: "0.6rem",
+                          }}
+                        >
+                          <FeedInfo
+                            title="Base Feed One"
+                            feed={oracleItem.oracle.data.baseFeedOne}
+                          />
+                          <FeedInfo
+                            title="Base Feed Two"
+                            feed={oracleItem.oracle.data.baseFeedTwo}
+                          />
+                          <FeedInfo
+                            title="Quote Feed One"
+                            feed={oracleItem.oracle.data.quoteFeedOne}
+                          />
+                          <FeedInfo
+                            title="Quote Feed Two"
+                            feed={oracleItem.oracle.data.quoteFeedTwo}
+                          />
+                        </div>
+                        <div
+                          style={{
+                            marginTop: "16px",
+                            display: "grid",
+                            gridTemplateColumns: "1fr 1fr",
+                            gap: "16px",
+                            fontSize: "0.6rem",
+                          }}
+                        >
+                          <p>
+                            <strong>Base Vault:</strong>{" "}
+                            {oracleItem.oracle.data.baseVault}
+                          </p>
+                          <p>
+                            <strong>Quote Vault:</strong>{" "}
+                            {oracleItem.oracle.data.quoteVault}
+                          </p>
+                          <p>
+                            <strong>Base Vault Conversion Sample:</strong>{" "}
+                            {oracleItem.oracle.data.baseVaultConversionSample}
+                          </p>
+                          <p>
+                            <strong>Quote Vault Conversion Sample:</strong>{" "}
+                            {oracleItem.oracle.data.quoteVaultConversionSample}
+                          </p>
+                        </div>
+                      </>
+                    ) : (
+                      <p style={{ color: "#e53e3e", fontWeight: "bold" }}>
+                        No info is provided on this oracle. Do not use it!
                       </p>
-                    </div>
+                    )}
                   </div>
                 )}
               </div>