-
Notifications
You must be signed in to change notification settings - Fork 96
/
PoolTransitionDialog.js
96 lines (91 loc) · 2.75 KB
/
PoolTransitionDialog.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
// @flow
import React from 'react';
import Dialog from '../../../../components/widgets/Dialog';
import {
DialogContent,
DialogActions,
Typography,
Button,
Card,
CardContent,
Grid,
Alert,
Modal,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import DialogCloseButton from '../../../../components/widgets/DialogCloseButton';
import type { PoolTransition } from '../../../../stores/toplevel/DelegationStore';
import type { Node } from 'react';
import { StakePoolCard } from './StakePoolCard';
import { Stack } from '@mui/material';
import { messages } from './dialog-messages';
import { intlShape } from 'react-intl';
import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
type Props = {|
onClose: () => void,
poolTransition?: PoolTransition | null,
onUpdatePool: () => void,
currentPoolId?: string,
intl: $npm$ReactIntl$IntlFormat,
|};
export const PoolTransitionDialog = ({
onClose,
poolTransition,
onUpdatePool,
currentPoolId,
intl,
}: Props): React$Node => {
const { currentPool, suggestedPool } = poolTransition || {};
return (
<Dialog
onClose={onClose}
title={intl.formatMessage(messages.upgradeStakePool)}
styleOverride={{ width: '648px', padding: 0 }}
closeButton={<DialogCloseButton onClose={onClose} />}
>
<Typography variant="body1" mb={2}>
{intl.formatMessage(messages.currentStakePool)}
</Typography>
<Stack direction="row" spacing={2} alignItems="center">
<StakePoolCard
label={intl.formatMessage(messages.currentPool)}
poolName={currentPool?.name}
roa={currentPool?.roa}
fee={currentPool?.share}
deadlineMilliseconds={poolTransition?.deadlineMilliseconds}
poolHash={currentPoolId}
intl={intl}
/>
<Typography variant="body1" fontWeight="500">
→
</Typography>
<StakePoolCard
label={intl.formatMessage(messages.newPool)}
poolName={suggestedPool?.name}
roa={suggestedPool?.roa}
fee={suggestedPool?.share}
poolHash={suggestedPool?.id}
suggestedPool
intl={intl}
/>
</Stack>
<Grid
container
justifyContent="space-between"
alignItems="center"
direction="column"
style={{ marginTop: 20, gap: 24 }}
>
<CustomButton variant="text" onClick={onClose}>
{intl.formatMessage(messages.skipAndStop)}
</CustomButton>
<CustomButton variant="contained" color="primary" width="100%" onClick={onUpdatePool}>
{intl.formatMessage(messages.updateNow)}
</CustomButton>
</Grid>
</Dialog>
);
};
const CustomButton = styled(Button)(({ theme }) => ({
width: '100%',
}));