/
EpochProgressCard.js
113 lines (108 loc) · 2.75 KB
/
EpochProgressCard.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// @flow
import type { Node } from 'react';
import { Box } from '@mui/system';
import { CircularProgress, Stack, Typography } from '@mui/material';
type Props = {|
+percentage: number,
+days: string,
+currentEpoch: number,
+startEpochDate: string,
+endEpochDate: string,
|};
export function EpochProgressCard({
percentage,
days,
currentEpoch,
startEpochDate,
endEpochDate,
}: Props): Node {
return (
<Box>
<Stack direction="row" spacing={2} justifyContent="flex-start">
<Graph value={percentage} days={days} />
<Stack direction="column" flexGrow="1">
<Title label="Current Epoch" value={currentEpoch} />
<Stack direction="row" spacing={3} mt="50px" justifyContent="space-between">
<LabelWithValue label="Epoch started at" value={startEpochDate} />
<LabelWithValue label="Epoch ends at" value={endEpochDate} />
</Stack>
</Stack>
</Stack>
</Box>
);
}
type TitleProps = {|
+label: string,
+value: string | number,
|};
const Title = ({ label, value }: TitleProps): Node => {
return (
<Box>
<Typography fontWeight="500" color="var(--yoroi-palette-primary-300)">
{label}: {value}
</Typography>
</Box>
);
};
type InfoColumnProps = {|
+label: string,
+value: string | number,
|};
const LabelWithValue = ({ label, value }: InfoColumnProps): Node => {
return (
<Box>
<Typography
style={{ textTransform: 'uppercase' }}
variant="caption"
mb="4px"
color="var(--yoroi-palette-gray-600)"
>
{label}
</Typography>
<Typography color="var(--yoroi-palette-gray-900)">{value}</Typography>
</Box>
);
};
const Graph = ({ value, days }): Node => {
return (
<Box mr="8px" position="relative" display="flex" justifyContent="center">
<CircularProgress
size={120}
thickness={7}
variant="determinate"
value={value}
sx={{
color: 'var(--yoroi-palette-primary-300)',
animationDuration: '550ms',
position: 'absolute',
zIndex: 1,
}}
/>
<CircularProgress
size={120}
thickness={7}
variant="determinate"
sx={{
color: 'var(--yoroi-palette-gray-50)',
}}
value={100}
/>
<Box
position="absolute"
sx={{
top: '30%',
left: '50%',
transform: 'translate(-50%)',
textAlign: 'center',
}}
>
<Typography variant="h4" color="var(--yoroi-palette-gray-900)">
{value}%
</Typography>
<Typography variant="caption1" fontSize="12px" color="var(--yoroi-palette-gray-600)">
{days} days
</Typography>
</Box>
</Box>
);
};