Skip to content

Commit

Permalink
feat(UI): improving the UI of the oracle testor
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomrpl
tomrpl committed Jul 31, 2024
1 parent 6fae2b1 commit 149e1d9
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 151 deletions.
22 changes: 10 additions & 12 deletions src/component/common/CheckItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const CheckItem: React.FC<CheckItemProps> = ({
{description}
</p>
)}
{isOpen && (
{isOpen && details && (
<>
<div
style={{
Expand All @@ -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>
</>
Expand Down
50 changes: 23 additions & 27 deletions src/component/common/CheckItemDeployment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
112 changes: 54 additions & 58 deletions src/component/common/CheckItemFeeds.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface CheckItemFeedsProps {
feedsMetadata?: FeedMetadata[];
errors?: ErrorTypes[];
}

const CheckItemFeeds: React.FC<CheckItemFeedsProps> = ({
title,
isVerified,
Expand All @@ -36,7 +37,7 @@ const CheckItemFeeds: React.FC<CheckItemFeedsProps> = ({
isVerified === null
? "#e2e3e5"
: isHardcoded
? "#ffeeba" // Light orange color for hardcoded case
? "#ffeeba"
: isVerified
? "#d4edda"
: "#f8d7da";
Expand Down Expand Up @@ -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>
);
Expand Down
107 changes: 53 additions & 54 deletions src/component/common/CheckItemPrice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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>
)}
Expand Down

0 comments on commit 149e1d9

Please sign in to comment.