finish the ui for sending tokens

This commit is contained in:
mmv 2019-05-24 14:08:33 +04:00
parent f2ec21ef33
commit 051f26aa76
5 changed files with 36 additions and 9 deletions

View File

@ -14,12 +14,14 @@ const calculateStyleFrom = (color?: string, margin?: Size) => ({
type Props = { type Props = {
margin?: Size, margin?: Size,
color?: string, color?: string,
style?: Object
} }
const Hairline = ({ margin, color }: Props) => { const Hairline = ({ margin, color, style }: Props) => {
const style = calculateStyleFrom(color, margin) const calculatedStyles = calculateStyleFrom(color, margin)
const mergedStyles = { ...calculatedStyles, ...(style || {}) }
return <div style={style} /> return <div style={mergedStyles} />
} }
export default Hairline export default Hairline

View File

@ -55,10 +55,12 @@ const Send = ({
setActiveScreen('reviewTx') setActiveScreen('reviewTx')
setTx(txInfo) setTx(txInfo)
} }
const onClickBack = () => setActiveScreen('sendFunds')
useEffect( useEffect(
() => () => { () => () => {
setActiveScreen('sendFunds') setActiveScreen('sendFunds')
setTx({})
}, },
[isOpen], [isOpen],
) )
@ -84,6 +86,7 @@ const Send = ({
tokens={tokens} tokens={tokens}
selectedToken={selectedToken} selectedToken={selectedToken}
onSubmit={handleTxCreation} onSubmit={handleTxCreation}
initialValues={tx}
/> />
)} )}
{activeScreen === 'reviewTx' && ( {activeScreen === 'reviewTx' && (
@ -94,6 +97,7 @@ const Send = ({
etherScanLink={etherScanLink} etherScanLink={etherScanLink}
safeName={safeName} safeName={safeName}
ethBalance={ethBalance} ethBalance={ethBalance}
onClickBack={onClickBack}
/> />
)} )}
</React.Fragment> </React.Fragment>

View File

@ -9,11 +9,13 @@ import Row from '~/components/layout/Row'
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 Button from '~/components/layout/Button' import Button from '~/components/layout/Button'
import Img from '~/components/layout/Img'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Identicon from '~/components/Identicon' import Identicon from '~/components/Identicon'
import { copyToClipboard } from '~/utils/clipboard' import { copyToClipboard } from '~/utils/clipboard'
import Hairline from '~/components/layout/Hairline' import Hairline from '~/components/layout/Hairline'
import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo' import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
import ArrowDown from '../assets/arrow-down.svg' import ArrowDown from '../assets/arrow-down.svg'
import { secondary } from '~/theme/variables' import { secondary } from '~/theme/variables'
import { styles } from './style' import { styles } from './style'
@ -24,6 +26,7 @@ type Props = {
safeAddress: string, safeAddress: string,
etherScanLink: string, etherScanLink: string,
safeName: string, safeName: string,
onClickBack: Function,
ethBalance: string, ethBalance: string,
tx: Object, tx: Object,
} }
@ -34,7 +37,7 @@ const openIconStyle = {
} }
const ReviewTx = ({ const ReviewTx = ({
onClose, classes, safeAddress, etherScanLink, safeName, ethBalance, tx, onClose, classes, safeAddress, etherScanLink, safeName, ethBalance, tx, onClickBack,
}: Props) => ( }: Props) => (
<React.Fragment> <React.Fragment>
<Row align="center" grow className={classes.heading}> <Row align="center" grow className={classes.heading}>
@ -62,7 +65,7 @@ const ReviewTx = ({
Recipient Recipient
</Paragraph> </Paragraph>
</Row> </Row>
<Row margin="md"> <Row margin="md" align="center">
<Col xs={1}> <Col xs={1}>
<Identicon address={tx.recipientAddress} diameter={32} /> <Identicon address={tx.recipientAddress} diameter={32} />
</Col> </Col>
@ -75,11 +78,24 @@ const ReviewTx = ({
</Paragraph> </Paragraph>
</Col> </Col>
</Row> </Row>
<Row margin="xs">
<Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
Amount
</Paragraph>
</Row>
<Row margin="md" align="center">
<Img src={tx.token.logoUri} height={28} alt={tx.token.name} onError={setImageToPlaceholder} />
<Paragraph size="md" noMargin>
{tx.amount}
{' '}
{tx.token.symbol}
</Paragraph>
</Row>
</Block> </Block>
<Hairline /> <Hairline style={{ position: 'absolute', bottom: 85 }} />
<Row align="center" className={classes.buttonRow}> <Row align="center" className={classes.buttonRow}>
<Button className={classes.button} minWidth={140} onClick={onClose}> <Button className={classes.button} minWidth={140} onClick={onClickBack}>
Cancel Back
</Button> </Button>
<Button type="submit" className={classes.button} variant="contained" minWidth={140} color="primary"> <Button type="submit" className={classes.button} variant="contained" minWidth={140} color="primary">
Review Review

View File

@ -27,5 +27,8 @@ export const styles = () => ({
buttonRow: { buttonRow: {
height: '84px', height: '84px',
justifyContent: 'center', justifyContent: 'center',
position: 'absolute',
bottom: 0,
width: '100%',
}, },
}) })

View File

@ -40,6 +40,7 @@ type Props = {
selectedToken: string, selectedToken: string,
tokens: List<Token>, tokens: List<Token>,
onSubmit: Function, onSubmit: Function,
initialValues: Object,
} }
const SendFunds = ({ const SendFunds = ({
@ -51,6 +52,7 @@ const SendFunds = ({
ethBalance, ethBalance,
tokens, tokens,
selectedToken, selectedToken,
initialValues,
onSubmit, onSubmit,
}: Props) => { }: Props) => {
const handleSubmit = (values) => { const handleSubmit = (values) => {
@ -90,7 +92,7 @@ const SendFunds = ({
<Hairline /> <Hairline />
</Col> </Col>
</Row> </Row>
<GnoForm onSubmit={handleSubmit} formMutators={formMutators}> <GnoForm onSubmit={handleSubmit} formMutators={formMutators} initialValues={initialValues}>
{(...args) => { {(...args) => {
const formState = args[2] const formState = args[2]
const mutators = args[3] const mutators = args[3]