Skip to content

Commit b654862

Browse files
rickstaarickstaa
committed
refactor: strip warning code from graph feature for split PR
Splits the reward/fee cut history feature from the bait-and-switch warning system. PR 1 (this commit) keeps only the charts and the data hook required to drive them. PR 2 will reintroduce warning detection on top. - Remove warning UI from RewardCutHistory, now a pure ExplorerChart consumer - Strip warning detection from useRewardCutHistory hook - Restore full-width TGP above the charts - Add tooltipNote override and stepAfter line curve support to ExplorerChart
1 parent 01ac724 commit b654862

4 files changed

Lines changed: 193 additions & 458 deletions

File tree

‎components/ExplorerChart/index.tsx‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -55,19 +55,32 @@ const CustomizedXAxisTick = ({ x, y, payload }) => {
5555

5656
export type Group = "day" | "week" | "year" | "all";
5757

58+
const DEFAULT_TOOLTIP_NOTE = (
59+
<>
60+
{`The estimation methodology was updated on 8/21/23. `}
61+
<a href="https://forum.livepeer.org/t/livepeer-explorer-minutes-estimation-methodology/2140">
62+
Read more about the changes
63+
</a>
64+
{"."}
65+
</>
66+
);
67+
5868
const ExplorerChart = ({
5969
title,
6070
tooltip,
71+
tooltipNote = DEFAULT_TOOLTIP_NOTE,
6172
data,
6273
base,
6374
basePercentChange,
6475
unit = "none",
6576
type,
77+
lineCurve = "monotone",
6678
grouping = "day",
6779
onToggleGrouping,
6880
}: {
6981
title: string;
7082
tooltip: string;
83+
tooltipNote?: React.ReactNode | null;
7184
base: number;
7285
basePercentChange: number;
7386
data: ChartDatum[];
@@ -80,6 +93,7 @@ const ExplorerChart = ({
8093
| "small-unitless"
8194
| "none";
8295
type: "bar" | "line";
96+
lineCurve?: "monotone" | "stepAfter" | "linear";
8397
grouping?: Group;
8498
onToggleGrouping?: (grouping: Group) => void;
8599
}) => {
@@ -223,7 +237,7 @@ const ExplorerChart = ({
223237
unit === "small-percent"
224238
? 45
225239
: unit === "percent"
226-
? 35
240+
? 42
227241
: unit === "minutes"
228242
? 35
229243
: unit === "eth"
@@ -249,14 +263,12 @@ const ExplorerChart = ({
249263
tooltip ? (
250264
<>
251265
<div>{tooltip}</div>
252-
<br />
253-
<div>
254-
{`The estimation methodology was updated on 8/21/23. `}
255-
<a href="https://forum.livepeer.org/t/livepeer-explorer-minutes-estimation-methodology/2140">
256-
Read more about the changes
257-
</a>
258-
{"."}
259-
</div>
266+
{tooltipNote && (
267+
<>
268+
<br />
269+
<div>{tooltipNote}</div>
270+
</>
271+
)}
260272
</>
261273
) : (
262274
<></>
@@ -485,7 +497,7 @@ const ExplorerChart = ({
485497

486498
<Line
487499
dataKey="y"
488-
type="monotone"
500+
type={lineCurve}
489501
dot={{ r: 0, strokeWidth: 0 }}
490502
activeDot={{ r: 3, strokeWidth: 0 }}
491503
stroke="rgba(0, 235, 136, 0.8)"

‎components/OrchestratingView/index.tsx‎

Lines changed: 108 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,6 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
165165
},
166166
}}
167167
>
168-
<RewardCutHistory transcoderId={transcoder?.id} />
169168
<Masonry
170169
breakpointCols={breakpointColumnsObj}
171170
className="masonry-grid"
@@ -250,21 +249,6 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
250249
"0,0"
251250
)}`}
252251
/> */}
253-
<Stat
254-
className="masonry-grid_item"
255-
label="Fee Cut"
256-
tooltip={
257-
"The percent of the transcoding fees which are kept by the orchestrator, with the remainder distributed to its delegators by percent stake."
258-
}
259-
value={
260-
transcoder?.feeShare
261-
? numbro(1 - +(transcoder?.feeShare || 0) / 1000000).format({
262-
output: "percent",
263-
mantissa: 0,
264-
})
265-
: "N/A"
266-
}
267-
/>
268252
<Stat
269253
className="masonry-grid_item"
270254
label="Reward Cut"
@@ -282,6 +266,21 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
282266
: "N/A"
283267
}
284268
/>
269+
<Stat
270+
className="masonry-grid_item"
271+
label="Fee Cut"
272+
tooltip={
273+
"The percent of the transcoding fees which are kept by the orchestrator, with the remainder distributed to its delegators by percent stake."
274+
}
275+
value={
276+
transcoder?.feeShare
277+
? numbro(1 - +(transcoder?.feeShare || 0) / 1000000).format({
278+
output: "percent",
279+
mantissa: 0,
280+
})
281+
: "N/A"
282+
}
283+
/>
285284
<Stat
286285
className="masonry-grid_item"
287286
label="Reward Calls"
@@ -331,112 +330,110 @@ const Index = ({ currentRound, transcoder, isActive }: Props) => {
331330
}
332331
/>
333332
)}
334-
<A
335-
as={Link}
336-
href={`/accounts/${transcoder?.id}/history`}
337-
passHref
338-
className="masonry-grid_item"
339-
css={{
340-
display: "block",
333+
</Masonry>
334+
<A
335+
as={Link}
336+
href={`/accounts/${transcoder?.id}/history`}
337+
passHref
338+
css={{
339+
display: "block",
340+
textDecoration: "none",
341+
marginBottom: "$3",
342+
"&:hover": {
341343
textDecoration: "none",
342-
"&:hover": {
343-
textDecoration: "none",
344-
".see-history": {
345-
textDecoration: "underline",
346-
color: "$primary11",
347-
transition: "color .3s",
348-
},
344+
".see-history": {
345+
textDecoration: "underline",
346+
color: "$primary11",
347+
transition: "color .3s",
349348
},
350-
}}
351-
>
352-
<Stat
353-
label="Treasury Governance Participation"
354-
variant="interactive"
355-
tooltip={
356-
<Box>
357-
Number of proposals voted on relative to the number of proposals
358-
the orchestrator was eligible for while active.
359-
</Box>
360-
}
361-
value={
362-
govStats ? (
363-
<Flex css={{ alignItems: "baseline", gap: "$1" }}>
364-
<Box css={{ color: "$hiContrast" }}>{govStats.voted}</Box>
349+
},
350+
}}
351+
>
352+
<Stat
353+
label="Treasury Governance Participation"
354+
variant="interactive"
355+
tooltip={
356+
<Box>
357+
Number of proposals voted on relative to the number of proposals
358+
the orchestrator was eligible for while active.
359+
</Box>
360+
}
361+
value={
362+
govStats ? (
363+
<Flex css={{ alignItems: "baseline", gap: "$1" }}>
364+
<Box css={{ color: "$hiContrast" }}>{govStats.voted}</Box>
365+
<Box
366+
css={{
367+
fontSize: "$3",
368+
color: "$neutral11",
369+
fontWeight: 500,
370+
}}
371+
>
372+
/ {govStats.eligible} Proposals
373+
</Box>
374+
</Flex>
375+
) : (
376+
"N/A"
377+
)
378+
}
379+
meta={
380+
<Box css={{ width: "100%", marginTop: "$2" }}>
381+
{govStats && (
382+
<Box
383+
css={{
384+
width: "100%",
385+
height: 4,
386+
backgroundColor: "$neutral4",
387+
borderRadius: "$2",
388+
overflow: "hidden",
389+
marginBottom: "$2",
390+
}}
391+
>
365392
<Box
366393
css={{
367-
fontSize: "$3",
368-
color: "$neutral11",
369-
fontWeight: 500,
394+
width: `${(govStats.voted / govStats.eligible) * 100}%`,
395+
height: "100%",
396+
backgroundColor: "$primary11",
370397
}}
371-
>
372-
/ {govStats.eligible} Proposals
373-
</Box>
374-
</Flex>
375-
) : (
376-
"N/A"
377-
)
378-
}
379-
meta={
380-
<Box css={{ width: "100%", marginTop: "$2" }}>
398+
/>
399+
</Box>
400+
)}
401+
<Flex
402+
css={{
403+
alignItems: "center",
404+
justifyContent: "space-between",
405+
width: "100%",
406+
}}
407+
>
381408
{govStats && (
382-
<Box
383-
css={{
384-
width: "100%",
385-
height: 4,
386-
backgroundColor: "$neutral4",
387-
borderRadius: "$2",
388-
overflow: "hidden",
389-
marginBottom: "$2",
390-
}}
391-
>
392-
<Box
393-
css={{
394-
width: `${(govStats.voted / govStats.eligible) * 100}%`,
395-
height: "100%",
396-
backgroundColor: "$primary11",
397-
}}
398-
/>
399-
</Box>
409+
<Text size="2" css={{ color: "$neutral11", fontWeight: 600 }}>
410+
{numbro(govStats.voted / govStats.eligible).format({
411+
output: "percent",
412+
mantissa: 0,
413+
})}{" "}
414+
Participation
415+
</Text>
400416
)}
401-
<Flex
417+
<Text
418+
className="see-history"
419+
size="2"
402420
css={{
421+
color: "$primary11",
422+
fontWeight: 600,
423+
display: "flex",
403424
alignItems: "center",
404-
justifyContent: "space-between",
405-
width: "100%",
425+
gap: "$0.75",
406426
}}
407427
>
408-
{govStats && (
409-
<Text
410-
size="2"
411-
css={{ color: "$neutral11", fontWeight: 600 }}
412-
>
413-
{numbro(govStats.voted / govStats.eligible).format({
414-
output: "percent",
415-
mantissa: 0,
416-
})}{" "}
417-
Participation
418-
</Text>
419-
)}
420-
<Text
421-
className="see-history"
422-
size="2"
423-
css={{
424-
color: "$primary11",
425-
fontWeight: 600,
426-
display: "flex",
427-
alignItems: "center",
428-
gap: "$0.75",
429-
}}
430-
>
431-
See history
432-
<Box as={ArrowTopRightIcon} width={15} height={15} />
433-
</Text>
434-
</Flex>
435-
</Box>
436-
}
437-
/>
438-
</A>
439-
</Masonry>
428+
See history
429+
<Box as={ArrowTopRightIcon} width={15} height={15} />
430+
</Text>
431+
</Flex>
432+
</Box>
433+
}
434+
/>
435+
</A>
436+
<RewardCutHistory transcoderId={transcoder?.id} />
440437
</Box>
441438
);
442439
};

0 commit comments

Comments
 (0)