status-im/safe-react
2
0
Fork 0
mirror of https://github.com/status-im/safe-react.git synced 2025-01-13 03:24:09 +00:00
Code Issues Projects Releases Wiki Activity

add recepient input

Browse Source
This commit is contained in:
mmv 2019-04-30 17:13:07 +04:00
parent b1fe6a7db0
commit 1b25a6c29e
1 changed files with 73 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
View File

@ -10,13 +10,15 @@ import Row from '~/components/layout/Row'
import GnoForm from '~/components/forms/GnoForm' import GnoForm from '~/components/forms/GnoForm'
import Link from '~/components/layout/Link' import Link from '~/components/layout/Link'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
import Field from '~/components/forms/Field'
import TextField from '~/components/forms/TextField'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Bold from '~/components/layout/Bold' import Bold from '~/components/layout/Bold'
import Hairline from '~/components/layout/Hairline' import Hairline from '~/components/layout/Hairline'
import { import {
lg, md, sm, secondary, xs, lg, md, sm, secondary, xs,
} from '~/theme/variables' } from '~/theme/variables'
import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
import { copyToClipboard } from '~/utils/clipboard' import { copyToClipboard } from '~/utils/clipboard'
import ArrowDown from './assets/arrow-down.svg' import ArrowDown from './assets/arrow-down.svg'
@ -65,56 +67,76 @@ type Props = {
const SendFunds = ({ const SendFunds = ({
classes, onClose, safeAddress, etherScanLink, safeName, ethBalance, classes, onClose, safeAddress, etherScanLink, safeName, ethBalance,
}: Props) => ( }: Props) => {
<React.Fragment> const handleSubmit = () => {}
<Row align="center" grow className={classes.heading}>
<Paragraph weight="bolder" className={classes.manage} noMargin> return (
Send Funds <React.Fragment>
</Paragraph> <Row align="center" grow className={classes.heading}>
<IconButton onClick={onClose} disableRipple> <Paragraph weight="bolder" className={classes.manage} noMargin>
<Close className={classes.closeIcon} /> Send Funds
</IconButton> </Paragraph>
</Row> <IconButton onClick={onClose} disableRipple>
<Hairline /> <Close className={classes.closeIcon} />
<Block className={classes.formContainer}> </IconButton>
<Row margin="md"> </Row>
<Col xs={1}> <Hairline />
<Identicon address={safeAddress} diameter={32} /> <Block className={classes.formContainer}>
</Col> <Row margin="md">
<Col xs={11} layout="column"> <Col xs={1}>
<Paragraph weight="bolder" noMargin style={{ lineHeight: 1 }}> <Identicon address={safeAddress} diameter={32} />
{safeName} </Col>
</Paragraph> <Col xs={11} layout="column">
<Paragraph weight="bolder" onClick={copyToClipboard} noMargin> <Paragraph weight="bolder" noMargin style={{ lineHeight: 1 }}>
{safeAddress} {safeName}
<Link to={etherScanLink} target="_blank">
<OpenInNew style={openIconStyle} />
</Link>
</Paragraph>
<Block className={classes.balanceContainer}>
<Paragraph noMargin>
Balance:
{' '}
<Bold>
{ethBalance}
{' '}
ETH
</Bold>
</Paragraph> </Paragraph>
</Block> <Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
</Col> {safeAddress}
</Row> <Link to={etherScanLink} target="_blank">
<Row> <OpenInNew style={openIconStyle} />
<Col xs={1}> </Link>
<img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} /> </Paragraph>
</Col> <Block className={classes.balanceContainer}>
<Col xs={11} center="xs" layout="column"> <Paragraph noMargin>
<Hairline /> Balance:
</Col> {' '}
</Row> <Bold>
<GnoForm>{() => <Row />}</GnoForm> {ethBalance}
</Block> {' '}
</React.Fragment> ETH
) </Bold>
</Paragraph>
</Block>
</Col>
</Row>
<Row margin="md">
<Col xs={1}>
<img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
</Col>
<Col xs={11} center="xs" layout="column">
<Hairline />
</Col>
</Row>
<GnoForm onSubmit={handleSubmit}>
{() => (
<Row>
<Col xs={12}>
<Field
name="address"
component={TextField}
type="text"
validate={composeValidators(required, mustBeEthereumAddress)}
placeholder="Recipient*"
text="Recipient*"
className={classes.addressInput}
/>
</Col>
</Row>
)}
</GnoForm>
</Block>
</React.Fragment>
)
}
export default withStyles(styles)(SendFunds) export default withStyles(styles)(SendFunds)