Skip to content

Commit b0be8be

Browse files
swellanderswellander
authored
Merge pull request #57 from swellander/explain-colors
Explain color highlighting
2 parents 9746f1d + a583728 commit b0be8be

File tree

8 files changed

+75
-23
lines changed

8 files changed

+75
-23
lines changed

‎packages/hardhat/contracts/StakingOracle.sol‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ contract StakingOracle {
129129

130130
function separateStaleNodes(
131131
address[] memory nodesToSeparate
132-
) internal view returns (address[] memory fresh, address[] memory stale) {
132+
) public view returns (address[] memory fresh, address[] memory stale) {
133133
address[] memory freshNodeAddresses = new address[](nodesToSeparate.length);
134134
address[] memory staleNodeAddresses = new address[](nodesToSeparate.length);
135135
uint256 freshCount = 0;

‎packages/nextjs/components/TooltipInfo.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,31 @@ import React from "react";
22
import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
33

44
interface TooltipInfoProps {
5-
top: number;
6-
right: number;
5+
top?: number;
6+
right?: number;
77
infoText: string;
8+
className?: string;
89
}
910

1011
// Note: The relative positioning is required for the tooltip to work.
11-
const TooltipInfo: React.FC<TooltipInfoProps> = ({ top, right, infoText }) => {
12+
const TooltipInfo: React.FC<TooltipInfoProps> = ({ top, right, infoText, className = "" }) => {
13+
const baseClasses = "tooltip tooltip-secondary font-normal";
14+
const tooltipClasses = className ? `${baseClasses} ${className}` : `${baseClasses} tooltip-right`;
15+
16+
if (top !== undefined && right !== undefined) {
17+
return (
18+
<span className="absolute z-10" style={{ top: `${top * 0.25}rem`, right: `${right * 0.25}rem` }}>
19+
<div className={tooltipClasses} data-tip={infoText}>
20+
<QuestionMarkCircleIcon className="h-5 w-5 m-1" />
21+
</div>
22+
</span>
23+
);
24+
}
25+
1226
return (
13-
<span className="absolute z-10" style={{ top: `${top * 0.25}rem`, right: `${right * 0.25}rem` }}>
14-
<div className="tooltip tooltip-secondary tooltip-left" data-tip={infoText}>
15-
<QuestionMarkCircleIcon className="h-5 w-5" />
16-
</div>
17-
</span>
27+
<div className={tooltipClasses} data-tip={infoText}>
28+
<QuestionMarkCircleIcon className="h-5 w-5 m-1" />
29+
</div>
1830
);
1931
};
2032

‎packages/nextjs/components/oracle/NodeRow.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Address } from "~~/components/scaffold-eth";
88
import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
99
import { getHighlightColorForPrice } from "~~/utils/scaffold-eth/common";
1010

11-
export const NodeRow = ({ address }: NodeRowProps) => {
11+
export const NodeRow = ({ address, isStale }: NodeRowProps) => {
1212
const { data = [] } = useScaffoldReadContract({
1313
contractName: "StakingOracle",
1414
functionName: "nodes",
@@ -87,6 +87,7 @@ export const NodeRow = ({ address }: NodeRowProps) => {
8787
<HighlightedCell
8888
value={lastReportedPriceFormatted}
8989
highlightColor={getHighlightColorForPrice(lastReportedPrice, medianPrice)}
90+
className={isStale ? "opacity-40" : ""}
9091
>
9192
{lastReportedPriceFormatted}
9293
</HighlightedCell>

‎packages/nextjs/components/oracle/NodesTable.tsx‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,22 +43,50 @@ export const NodesTable = () => {
4343
functionName: "getNodeAddresses",
4444
});
4545

46+
const { data: staleNodesData } = useScaffoldReadContract({
47+
contractName: "StakingOracle",
48+
functionName: "separateStaleNodes",
49+
args: [nodeAddresses || []],
50+
});
51+
4652
const tooltipText =
4753
"This table displays registered oracle nodes that provide price data to the system. Nodes are displayed as inactive if they don't have enough ETH staked. You can edit the skip probability and price variance of an oracle node with the slider.";
4854

55+
// Extract stale node addresses from the returned data
56+
const staleNodeAddresses = staleNodesData?.[1] || [];
57+
4958
return (
5059
<div className="flex flex-col gap-2">
51-
<h2 className="text-xl font-bold">Oracle Nodes</h2>
60+
<div className="flex items-center gap-2">
61+
<h2 className="text-xl font-bold">Oracle Nodes</h2>
62+
<span>
63+
<TooltipInfo infoText={tooltipText} />
64+
</span>
65+
</div>
5266
<div className="bg-base-100 rounded-lg p-4 relative">
53-
<TooltipInfo top={0} right={0} infoText={tooltipText} />
5467
<div className="overflow-x-auto">
5568
<table className="table w-full">
5669
<thead>
5770
<tr>
5871
<th>Node Address</th>
59-
<th>Staked Amount (ETH)</th>
60-
<th>Last Reported Price (USD)</th>
61-
<th>ORA Balance</th>
72+
<th>
73+
<div className="flex items-center gap-1">
74+
Staked Amount (ETH)
75+
<TooltipInfo infoText="Red shows slashing event" />
76+
</div>
77+
</th>
78+
<th>
79+
<div className="flex items-center gap-1">
80+
Last Reported Price (USD)
81+
<TooltipInfo infoText="Color shows proximity to median price" />
82+
</div>
83+
</th>
84+
<th>
85+
<div className="flex items-center gap-1">
86+
ORA Balance
87+
<TooltipInfo infoText="Green shows positive balance" />
88+
</div>
89+
</th>
6290
<th>Skip Probability</th>
6391
<th>Price Variance</th>
6492
</tr>
@@ -70,7 +98,7 @@ export const NodesTable = () => {
7098
<NoNodesRow />
7199
) : (
72100
nodeAddresses?.map((address: string, index: number) => (
73-
<NodeRow key={index} index={index} address={address} />
101+
<NodeRow key={index} index={index} address={address} isStale={staleNodeAddresses.includes(address)} />
74102
))
75103
)}
76104
</tbody>

‎packages/nextjs/components/oracle/PriceWidget.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
66
const getHighlightColor = (oldPrice: bigint | undefined, newPrice: bigint | undefined): string => {
77
if (oldPrice === undefined || newPrice === undefined) return "";
88

9-
const change = Math.abs(Number(newPrice) - Number(oldPrice));
9+
const change = Math.abs(parseFloat(formatEther(newPrice)) - parseFloat(formatEther(oldPrice)));
1010

11-
if (change < 3) return "bg-success";
12-
if (change < 10) return "bg-warning";
11+
if (change < 50) return "bg-success";
12+
if (change < 100) return "bg-warning";
1313
return "bg-error";
1414
};
1515

@@ -51,7 +51,7 @@ export const PriceWidget = ({ contractName }: PriceWidgetProps) => {
5151
<TooltipInfo
5252
top={0}
5353
right={0}
54-
infoText="Displays the median price. If no oracle nodes have reported prices in the last 10 seconds, it will display 'No fresh price'."
54+
infoText="Displays the median price. If no oracle nodes have reported prices in the last 10 seconds, it will display 'No fresh price'. Color highlighting indicates how big of a change there was in the price."
5555
/>
5656
<div className={`rounded-lg transition-colors duration-1000 ${highlight ? highlightColor : ""}`}>
5757
<div className="font-bold h-10 text-4xl flex items-center justify-center">

‎packages/nextjs/components/oracle/optimistic/SubmitAssertionButton.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ const SubmitAssertionModal = ({ isOpen, onClose }: SubmitAssertionModalProps) =>
124124
<TooltipInfo
125125
top={-2}
126126
right={5}
127+
className="tooltip-left"
127128
infoText="Create a new assertion with your reward stake. Leave time inputs blank to use default values."
128129
/>
129130
</div>

‎packages/nextjs/components/oracle/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export interface NodeRowProps {
22
address: string;
33
index: number;
4+
isStale?: boolean;
45
}
56

67
export interface WhitelistRowProps extends NodeRowProps {

‎packages/nextjs/components/oracle/whitelist/WhitelistTable.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,19 +63,28 @@ export const WhitelistTable = () => {
6363
return (
6464
<div className="flex flex-col gap-2">
6565
<div className="flex gap-2 justify-between">
66-
<h2 className="text-xl font-bold">Oracle Nodes</h2>
66+
<div className="flex items-center gap-2">
67+
<h2 className="text-xl font-bold">Oracle Nodes</h2>
68+
<span className="text-sm text-gray-500">
69+
<TooltipInfo infoText={tooltipText} className="tooltip-right" />
70+
</span>
71+
</div>
6772
<div className="flex gap-2">
6873
<AddOracleButton />
6974
</div>
7075
</div>
7176
<div className="bg-base-100 rounded-lg p-4 relative">
72-
<TooltipInfo top={0} right={0} infoText={tooltipText} />
7377
<div className="overflow-x-auto">
7478
<table className="table w-full">
7579
<thead>
7680
<tr>
7781
<th>Node Address</th>
78-
<th>Last Reported Price (USD)</th>
82+
<th>
83+
<div className="flex items-center gap-1">
84+
Last Reported Price (USD)
85+
<TooltipInfo infoText="Color shows proximity to median price" />
86+
</div>
87+
</th>
7988
<th>Last Reported Time</th>
8089
</tr>
8190
</thead>

0 commit comments

Comments
 (0)