-
Notifications
You must be signed in to change notification settings - Fork 96
/
StakePoolCard.js
101 lines (97 loc) · 3.27 KB
/
StakePoolCard.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
// @flow
import React from 'react';
import { Typography, styled, Box, Stack } from '@mui/material';
import { formatTimeSpan } from './helpers';
import { ReactComponent as WarningSvg } from '../../../../assets/images/revamp/icons/alert.inline.svg';
import { ReactComponent as EmurgoSvg } from '../../../../assets/images/emurgo-logo-small.svg';
import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
import { messages } from './dialog-messages';
import { toSvg } from 'jdenticon';
type Props = {|
label: string,
poolName?: string,
roa?: string,
fee?: string,
deadlineMilliseconds?: number,
suggestedPool?: boolean,
poolHash?: string,
intl: $npm$ReactIntl$IntlFormat,
|};
export const StakePoolCard = ({
label,
poolName,
roa,
fee,
deadlineMilliseconds,
suggestedPool = false,
intl,
poolHash,
}: Props): React$Node => {
const avatarSource = toSvg(poolHash, 36, { padding: 0 });
const avatarGenerated = `data:image/svg+xml;utf8,${encodeURIComponent(avatarSource)}`;
return (
<CustomCard suggestedPool={suggestedPool}>
<Typography variant="body1" fontWeight={500} mb={2}>
{label}
</Typography>
<Stack direction="row" gap={1}>
<Box
sx={{ width: '24px', height: '24px', borderRadius: '50%', display: 'inline-block' }}
component="img"
src={avatarGenerated}
/>
<Typography variant="body1" fontWeight={400}>
{poolName}
</Typography>
</Stack>
<Stack direction="column" gap={1} my={2}>
<Stack direction="row" justifyContent="space-between">
<Typography variant="body1" color="grayscale.600">
{intl.formatMessage(messages.estimatedROA)}
</Typography>
<Typography variant="body1" color="grayscale.600">
{roa}%
</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography variant="body1" color="grayscale.600">
{intl.formatMessage(messages.fee)}
</Typography>
<Typography variant="body1" color="grayscale.600">
{fee}%
</Typography>
</Stack>
</Stack>
<Stack direction="row">
{!suggestedPool && (
<Box mr="4px">
<WarningSvg />
</Box>
)}
<Typography color={suggestedPool ? 'grayscale.max' : 'magenta.500'} component="span">
<Typography variant="body2" component="span">
{suggestedPool
? intl.formatMessage(messages.poolContinues)
: intl.formatMessage(messages.poolStop)}
</Typography>
{!suggestedPool && (
<Typography variant="body2" fontWeight="500" component="span" pl={0.4}>
{deadlineMilliseconds
? formatTimeSpan(deadlineMilliseconds)
: intl.formatMessage(messages.poolNotGenerating)}
</Typography>
)}
</Typography>
</Stack>
</CustomCard>
);
};
const CustomCard = styled(Box)(({ theme, suggestedPool }) => ({
background: suggestedPool ? 'linear-gradient(312deg, #C6F7ED 0%, #E4E8F7 70.58%)' : 'transparent',
padding: theme.spacing(2),
width: '294px',
borderWidth: 1,
borderRadius: 8,
border: `1px solid ${theme.palette.grayscale['200']}`,
boxShadow: 'none',
}));