From 149e1d93e0c56b87ca37596eaa9a74e7a184d82c Mon Sep 17 00:00:00 2001
From: Reppelin Tom <tomireppelin@gmail.com>
Date: Wed, 31 Jul 2024 17:31:43 +0200
Subject: [PATCH] feat(UI): improving the UI of the oracle testor

---
 src/component/common/CheckItem.tsx           |  22 ++--
 src/component/common/CheckItemDeployment.tsx |  50 ++++-----
 src/component/common/CheckItemFeeds.tsx      | 112 +++++++++----------
 src/component/common/CheckItemPrice.tsx      | 107 +++++++++---------
 4 files changed, 140 insertions(+), 151 deletions(-)

diff --git a/src/component/common/CheckItem.tsx b/src/component/common/CheckItem.tsx
index aae9f48..4c750dd 100644
--- a/src/component/common/CheckItem.tsx
+++ b/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>
         </>
diff --git a/src/component/common/CheckItemDeployment.tsx b/src/component/common/CheckItemDeployment.tsx
index 3d1e174..dedf855 100644
--- a/src/component/common/CheckItemDeployment.tsx
+++ b/src/component/common/CheckItemDeployment.tsx
@@ -66,33 +66,29 @@ const CheckItem: React.FC<CheckItemProps> = ({
           {description}
         </p>
       )}
-      {isOpen && (
-        <>
-          <div
-            style={{
-              background: "white",
-              borderRadius: "4px",
-              padding: "0.3rem",
-              marginTop: "10px",
-            }}
-          >
-            {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>
-        </>
+      {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>
   );
diff --git a/src/component/common/CheckItemFeeds.tsx b/src/component/common/CheckItemFeeds.tsx
index 1d79747..e1f7213 100644
--- a/src/component/common/CheckItemFeeds.tsx
+++ b/src/component/common/CheckItemFeeds.tsx
@@ -21,6 +21,7 @@ interface CheckItemFeedsProps {
   feedsMetadata?: FeedMetadata[];
   errors?: ErrorTypes[];
 }
+
 const CheckItemFeeds: React.FC<CheckItemFeedsProps> = ({
   title,
   isVerified,
@@ -36,7 +37,7 @@ const CheckItemFeeds: React.FC<CheckItemFeedsProps> = ({
     isVerified === null
       ? "#e2e3e5"
       : isHardcoded
-      ? "#ffeeba" // Light orange color for hardcoded case
+      ? "#ffeeba"
       : isVerified
       ? "#d4edda"
       : "#f8d7da";
@@ -114,70 +115,65 @@ const CheckItemFeeds: React.FC<CheckItemFeedsProps> = ({
           <strong>{details}</strong>
         </p>
       )}
-      {isOpen && (
-        <>
+      {isOpen && (feedsMetadata || (errors && errors.length > 0)) && (
+        <div
+          style={{
+            background: "white",
+            borderRadius: "4px",
+            padding: "0.3rem",
+            marginTop: "10px",
+          }}
+        >
           {loading ? (
             <p style={{ margin: "0", fontSize: "0.7rem" }}>Loading...</p>
           ) : (
             <>
-              <div
-                style={{
-                  background: "white",
-                  borderRadius: "4px",
-                  padding: "0.3rem",
-                  marginTop: "10px",
-                }}
-              >
-                {feedsMetadata && (
-                  <div style={{ marginTop: "10px" }}>
-                    <p
-                      style={{
-                        margin: "0",
-                        fontSize: "0.9rem",
-                        whiteSpace: "pre-wrap",
-                      }}
-                    >
-                      {formatDescription(feedsMetadata)}
-                      {"\n "}
-                    </p>
-                    {feedsMetadata.map((feed, index) => (
-                      <div key={index} style={{ marginBottom: "10px" }}>
-                        <p style={{ margin: "0", fontSize: "0.8rem" }}>
-                          <strong>Address:</strong> {feed.address}
-                        </p>
-                        <p style={{ margin: "0", fontSize: "0.8rem" }}>
-                          <strong>Vendor:</strong> {feed.vendor}
-                        </p>
-                        <p style={{ margin: "0", fontSize: "0.8rem" }}>
-                          <strong>Description:</strong> {feed.description}
-                        </p>
-                        <p style={{ margin: "0", fontSize: "0.8rem" }}>
-                          <strong>Pair:</strong>{" "}
-                          {feed.pair ? feed.pair.join(" / ") : "N/A"}
-                        </p>
-                        <p style={{ margin: "0", fontSize: "0.8rem" }}>
-                          <strong>Chain ID:</strong> {feed.chainId}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                )}
-                {errors && errors.length > 0 && (
-                  <div style={{ marginTop: "10px", color: "red" }}>
-                    {errors.map((error, index) => (
-                      <p
-                        key={index}
-                        style={{ margin: "0", fontSize: "0.8rem" }}
-                      >
-                        {ErrorMessages[error] || error}
+              {feedsMetadata && (
+                <div style={{ marginTop: "10px" }}>
+                  <p
+                    style={{
+                      margin: "0",
+                      fontSize: "0.9rem",
+                      whiteSpace: "pre-wrap",
+                    }}
+                  >
+                    {formatDescription(feedsMetadata)}
+                    {"\n "}
+                  </p>
+                  {feedsMetadata.map((feed, index) => (
+                    <div key={index} style={{ marginBottom: "10px" }}>
+                      <p style={{ margin: "0", fontSize: "0.8rem" }}>
+                        <strong>Address:</strong> {feed.address}
                       </p>
-                    ))}
-                  </div>
-                )}
-              </div>
+                      <p style={{ margin: "0", fontSize: "0.8rem" }}>
+                        <strong>Vendor:</strong> {feed.vendor}
+                      </p>
+                      <p style={{ margin: "0", fontSize: "0.8rem" }}>
+                        <strong>Description:</strong> {feed.description}
+                      </p>
+                      <p style={{ margin: "0", fontSize: "0.8rem" }}>
+                        <strong>Pair:</strong>{" "}
+                        {feed.pair ? feed.pair.join(" / ") : "N/A"}
+                      </p>
+                      <p style={{ margin: "0", fontSize: "0.8rem" }}>
+                        <strong>Chain ID:</strong> {feed.chainId}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {errors && errors.length > 0 && (
+                <div style={{ marginTop: "10px", color: "red" }}>
+                  {errors.map((error, index) => (
+                    <p key={index} style={{ margin: "0", fontSize: "0.8rem" }}>
+                      {ErrorMessages[error] || error}
+                    </p>
+                  ))}
+                </div>
+              )}
             </>
           )}
-        </>
+        </div>
       )}
     </div>
   );
diff --git a/src/component/common/CheckItemPrice.tsx b/src/component/common/CheckItemPrice.tsx
index b01467a..9c45a38 100644
--- a/src/component/common/CheckItemPrice.tsx
+++ b/src/component/common/CheckItemPrice.tsx
@@ -138,7 +138,7 @@ const CheckItemPrice: React.FC<CheckItemProps> = ({
           {formatNumber(details.percentageDifference, 2)}%
         </p>
       )}
-      {isOpen && (
+      {isOpen && (details || (errors && errors.length > 0)) && (
         <div
           style={{
             background: "white",
@@ -150,67 +150,66 @@ const CheckItemPrice: React.FC<CheckItemProps> = ({
           {loading ? (
             <p style={{ margin: "0", fontSize: "0.7rem" }}>Loading...</p>
           ) : (
-            details && (
-              <div style={{ fontSize: "0.8rem", margin: "0" }}>
-                {renderDetailItem(
-                  "Scale Factor",
-                  details.scaleFactor,
-                  formatNumber(details.scaleFactor)
-                )}
-                {renderDetailItem(
-                  "Oracle Price",
-                  details.oraclePrice,
-                  formatNumber(details.oraclePrice, 0)
-                )}
-                {renderDetailItem(
-                  "Price in Collateral Token Decimals",
-                  formatNumber(
-                    details.priceUnscaledInCollateralTokenDecimals,
-                    4
-                  )
-                )}
-                {renderDetailItem(
-                  "Collateral USD Price",
-                  `$${formatNumber(details.collateralPriceUsd)}`
-                )}
-                {renderDetailItem(
-                  "Loan USD Price",
-                  `$${formatNumber(details.loanPriceUsd)}`
-                )}
-                <div
-                  style={{
-                    marginTop: "15px",
-                    fontWeight: "bold",
-                    color: "blue",
-                  }}
-                >
+            <>
+              {details && (
+                <div style={{ fontSize: "0.8rem", margin: "0" }}>
                   {renderDetailItem(
-                    "Ratio USD Price",
-                    formatNumber(details.ratioUsdPrice, 4)
+                    "Scale Factor",
+                    details.scaleFactor,
+                    formatNumber(details.scaleFactor)
                   )}
                   {renderDetailItem(
-                    "Oracle price equivalent",
-                    formatNumber(details.oraclePriceEquivalent, 4)
+                    "Oracle Price",
+                    details.oraclePrice,
+                    formatNumber(details.oraclePrice, 0)
                   )}
                   {renderDetailItem(
-                    "Deviation",
-                    `${formatNumber(details.percentageDifference, 2)}%`
+                    "Price in Collateral Token Decimals",
+                    formatNumber(
+                      details.priceUnscaledInCollateralTokenDecimals,
+                      4
+                    )
                   )}
-                  {errors && errors.length > 0 && (
-                    <div style={{ marginTop: "10px", color: "red" }}>
-                      {errors.map((error, index) => (
-                        <p
-                          key={index}
-                          style={{ margin: "0", fontSize: "0.8rem" }}
-                        >
-                          {ErrorMessages[error] || error}
-                        </p>
-                      ))}
-                    </div>
+                  {renderDetailItem(
+                    "Collateral USD Price",
+                    `$${formatNumber(details.collateralPriceUsd)}`
+                  )}
+                  {renderDetailItem(
+                    "Loan USD Price",
+                    `$${formatNumber(details.loanPriceUsd)}`
                   )}
+                  <div
+                    style={{
+                      marginTop: "15px",
+                      fontWeight: "bold",
+                      color: "blue",
+                    }}
+                  >
+                    {renderDetailItem(
+                      "Ratio USD Price",
+                      formatNumber(details.ratioUsdPrice, 4)
+                    )}
+                    {renderDetailItem(
+                      "Oracle price equivalent",
+                      formatNumber(details.oraclePriceEquivalent, 4)
+                    )}
+                    {renderDetailItem(
+                      "Deviation",
+                      `${formatNumber(details.percentageDifference, 2)}%`
+                    )}
+                  </div>
+                </div>
+              )}
+              {errors && errors.length > 0 && (
+                <div style={{ marginTop: "10px", color: "red" }}>
+                  {errors.map((error, index) => (
+                    <p key={index} style={{ margin: "0", fontSize: "0.8rem" }}>
+                      {ErrorMessages[error] || error}
+                    </p>
+                  ))}
                 </div>
-              </div>
-            )
+              )}
+            </>
           )}
         </div>
       )}