ThresholdModal wip

This commit is contained in:
Mikhail Mikheev 2019-06-17 16:51:37 +04:00
parent 523157e414
commit 6fcab5ced6
4 changed files with 139 additions and 25 deletions

View File

@ -0,0 +1,45 @@
// @flow
import React from 'react'
import { List } from 'immutable'
import { withStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close'
import IconButton from '@material-ui/core/IconButton'
import Hairline from '~/components/layout/Hairline'
import Paragraph from '~/components/layout/Paragraph'
import Button from '~/components/layout/Button'
import Block from '~/components/layout/Block'
import Row from '~/components/layout/Row'
import Col from '~/components/layout/Col'
import type { Owner } from '~/routes/safe/store/models/owner'
import { styles } from './style'
type Props = {
onClose: () => void,
classes: Object,
threshold: number,
owners: List<Owner>,
}
const ChangeThreshold = ({ onClose, owners, threshold, classes, }: Props) => (
<React.Fragment>
<Row align="center" grow className={classes.heading}>
<Paragraph className={classes.manage} weight="bolder" noMargin>
Remove owner
</Paragraph>
<IconButton onClick={onClose} disableRipple>
<Close className={classes.close} />
</IconButton>
</Row>
<Col layout="column" middle="xs" className={classes.detailsContainer}>
<Hairline />
</Col>
<Hairline />
<Row align="center" className={classes.buttonRow}>
<Button color="primary" className={classes.button} minWidth={140} onClick={onClose} variant="contained">
Done
</Button>
</Row>
</React.Fragment>
)
export default withStyles(styles)(ChangeThreshold)

View File

@ -0,0 +1,37 @@
// @flow
import { lg, md, sm } from '~/theme/variables'
export const styles = () => ({
heading: {
padding: `${sm} ${lg}`,
justifyContent: 'flex-start',
boxSizing: 'border-box',
maxHeight: '75px',
},
annotation: {
letterSpacing: '-1px',
color: '#a2a8ba',
marginRight: 'auto',
marginLeft: '20px',
},
headingText: {
fontSize: '24px',
},
closeIcon: {
height: '35px',
width: '35px',
},
container: {
padding: `${md} ${lg}`,
},
amount: {
marginLeft: sm,
},
buttonRow: {
height: '84px',
justifyContent: 'center',
position: 'absolute',
bottom: 0,
width: '100%',
},
})

View File

@ -1,43 +1,73 @@
// @flow
import React from 'react'
import React, { useState } from 'react'
import { withStyles } from '@material-ui/core/styles'
import { List } from 'immutable'
import Heading from '~/components/layout/Heading'
import Button from '~/components/layout/Button'
import Bold from '~/components/layout/Bold'
import Block from '~/components/layout/Block'
import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph/index'
import Modal from '~/components/Modal'
import Paragraph from '~/components/layout/Paragraph'
import ChangeThreshold from './ChangeThreshold'
import type { Owner } from '~/routes/safe/store/models/owner'
import { styles } from './style'
type Props = {
owners: any,
owners: List<Owner>,
threshold: number,
classes: Object,
}
const ThresholdSettings = ({ owners, threshold, classes }: Props) => (
<Block className={classes.container}>
<Heading tag="h3">Required confirmations</Heading>
<Paragraph>
Any transaction over any daily limit
<br />
{' '}
const ThresholdSettings = ({ owners, threshold, classes }: Props) => {
const [isModalOpen, setModalOpen] = useState(false)
const toggleModal = () => {
setModalOpen(prevOpen => !prevOpen)
}
return (
<React.Fragment>
<Block className={classes.container}>
<Heading tag="h3">Required confirmations</Heading>
<Paragraph>
Any transaction over any daily limit
<br />
{' '}
requires the confirmation of:
</Paragraph>
<Paragraph size="xxl" className={classes.ownersText}>
<Bold>{threshold}</Bold>
{' '}
</Paragraph>
<Paragraph size="xxl" className={classes.ownersText}>
<Bold>{threshold}</Bold>
{' '}
out of
<Bold>{owners.size}</Bold>
{' '}
<Bold>{owners.size}</Bold>
{' '}
owners
</Paragraph>
<Row align="center" className={classes.buttonRow}>
<Button color="primary" minWidth={120} className={classes.modifyBtn} onClick={() => {}} variant="contained">
Modify
</Button>
</Row>
</Block>
)
</Paragraph>
<Row align="center" className={classes.buttonRow}>
<Button
color="primary"
minWidth={120}
className={classes.modifyBtn}
onClick={toggleModal}
variant="contained"
>
Modify
</Button>
</Row>
</Block>
<Modal
title="Change Required Confirmations"
description="Change Required Confirmations Form"
handleClose={toggleModal}
open={isModalOpen}
>
<ChangeThreshold
onClose={toggleModal}
/>
</Modal>
</React.Fragment>
)
}
export default withStyles(styles)(ThresholdSettings)

View File

@ -1,5 +1,7 @@
// @flow
import { fontColor, lg, smallFontSize, md } from '~/theme/variables'
import {
fontColor, lg, smallFontSize, md,
} from '~/theme/variables'
export const styles = () => ({
ownersText: {