Add basic custom tx review
This commit is contained in:
Germán Martínez
parent
cf8a4ed506
commit
b88972e7a0
|
|
@ -9,6 +9,7 @@ import ChooseTxType from './screens/ChooseTxType'
|
|||
import SendFunds from './screens/SendFunds'
|
||||
import ReviewTx from './screens/ReviewTx'
|
||||
import SendCustomTx from './screens/SendCustomTx'
|
||||
import ReviewCustomTx from './screens/ReviewCustomTx'
|
||||
|
||||
type Props = {
|
||||
onClose: () => void,
|
||||
|
|
@ -38,6 +39,9 @@ type TxStateType =
|
|||
const styles = () => ({
|
||||
scalableModalWindow: {
|
||||
height: 'auto',
|
||||
},
|
||||
scalableStaticModalWindow: {
|
||||
height: 'auto',
|
||||
position: 'static',
|
||||
},
|
||||
})
|
||||
|
|
@ -63,7 +67,8 @@ const Send = ({
|
|||
setTx({})
|
||||
}, [isOpen])
|
||||
|
||||
const scalableModalSize = activeScreen === 'chooseTxType' || activeScreen === 'sendCustomTx'
|
||||
const scalableModalSize = activeScreen === 'sendCustomTx' || activeScreen === 'reviewCustomTx'
|
||||
const scalableStaticModalSize = activeScreen === 'chooseTxType'
|
||||
|
||||
const handleTxCreation = (txInfo) => {
|
||||
setActiveScreen('reviewTx')
|
||||
|
|
@ -81,7 +86,10 @@ const Send = ({
|
|||
description="Send Tokens Form"
|
||||
handleClose={onClose}
|
||||
open={isOpen}
|
||||
paperClassName={cn(scalableModalSize && classes.scalableModalWindow)}
|
||||
paperClassName={cn(
|
||||
scalableStaticModalSize && classes.scalableStaticModalWindow,
|
||||
scalableModalSize && classes.scalableModalWindow,
|
||||
)}
|
||||
>
|
||||
<>
|
||||
{activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
|
||||
|
|
@ -121,6 +129,18 @@ const Send = ({
|
|||
initialValues={tx}
|
||||
/>
|
||||
)}
|
||||
{activeScreen === 'reviewCustomTx' && (
|
||||
<ReviewCustomTx
|
||||
tx={tx}
|
||||
onClose={onClose}
|
||||
setActiveScreen={setActiveScreen}
|
||||
safeAddress={safeAddress}
|
||||
etherScanLink={etherScanLink}
|
||||
safeName={safeName}
|
||||
ethBalance={ethBalance}
|
||||
createTransaction={createTransaction}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</Modal>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
// @flow
|
||||
import React from 'react'
|
||||
import OpenInNew from '@material-ui/icons/OpenInNew'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Close from '@material-ui/icons/Close'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Row from '~/components/layout/Row'
|
||||
import Link from '~/components/layout/Link'
|
||||
import Col from '~/components/layout/Col'
|
||||
import Button from '~/components/layout/Button'
|
||||
import Img from '~/components/layout/Img'
|
||||
import Block from '~/components/layout/Block'
|
||||
import Identicon from '~/components/Identicon'
|
||||
import { copyToClipboard } from '~/utils/clipboard'
|
||||
import Hairline from '~/components/layout/Hairline'
|
||||
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 { secondary } from '~/theme/variables'
|
||||
import { styles } from './style'
|
||||
|
||||
type Props = {
|
||||
onClose: () => void,
|
||||
setActiveScreen: Function,
|
||||
classes: Object,
|
||||
safeAddress: string,
|
||||
etherScanLink: string,
|
||||
safeName: string,
|
||||
ethBalance: string,
|
||||
tx: Object,
|
||||
}
|
||||
|
||||
const openIconStyle = {
|
||||
height: '16px',
|
||||
color: secondary,
|
||||
}
|
||||
|
||||
const ReviewCustomTx = ({
|
||||
onClose,
|
||||
setActiveScreen,
|
||||
classes,
|
||||
safeAddress,
|
||||
etherScanLink,
|
||||
safeName,
|
||||
ethBalance,
|
||||
tx,
|
||||
}: Props) => (
|
||||
<SharedSnackbarConsumer>
|
||||
{() => {
|
||||
const submitTx = async () => {
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row align="center" grow className={classes.heading}>
|
||||
<Paragraph weight="bolder" className={classes.headingText} noMargin>
|
||||
Send Funds
|
||||
</Paragraph>
|
||||
<Paragraph className={classes.annotation}>2 of 2</Paragraph>
|
||||
<IconButton onClick={onClose} disableRipple>
|
||||
<Close className={classes.closeIcon} />
|
||||
</IconButton>
|
||||
</Row>
|
||||
<Hairline />
|
||||
<Block className={classes.container}>
|
||||
<SafeInfo
|
||||
safeAddress={safeAddress}
|
||||
etherScanLink={etherScanLink}
|
||||
safeName={safeName}
|
||||
ethBalance={ethBalance}
|
||||
/>
|
||||
<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>
|
||||
<Row margin="xs">
|
||||
<Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
|
||||
Recipient
|
||||
</Paragraph>
|
||||
</Row>
|
||||
<Row margin="md" align="center">
|
||||
<Col xs={1}>
|
||||
<Identicon address={tx.recipientAddress} diameter={32} />
|
||||
</Col>
|
||||
<Col xs={11} layout="column">
|
||||
<Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
|
||||
{tx.recipientAddress}
|
||||
<Link to={etherScanLink} target="_blank">
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</Link>
|
||||
</Paragraph>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row margin="xs">
|
||||
<Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
|
||||
Value
|
||||
</Paragraph>
|
||||
</Row>
|
||||
<Row margin="md" align="center">
|
||||
<Img src="tx.token.logoUri" height={28} alt="Ether" onError={setImageToPlaceholder} />
|
||||
<Paragraph size="md" noMargin className={classes.value}>
|
||||
{tx.value}
|
||||
{'ETH'}
|
||||
</Paragraph>
|
||||
</Row>
|
||||
<Row margin="md" align="center">
|
||||
<Col className={classes.outerData}>
|
||||
<Row size="md" noMargin className={classes.data}>
|
||||
{tx.data}
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Block>
|
||||
<Hairline />
|
||||
<Row align="center" className={classes.buttonRow}>
|
||||
<Button minWidth={140} minHeight={42} onClick={() => setActiveScreen('sendCustomTx')}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={submitTx}
|
||||
variant="contained"
|
||||
minWidth={140}
|
||||
minHeight={42}
|
||||
color="primary"
|
||||
data-testid="submit-tx-btn"
|
||||
>
|
||||
SUBMIT
|
||||
</Button>
|
||||
</Row>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
</SharedSnackbarConsumer>
|
||||
)
|
||||
|
||||
export default withStyles(styles)(ReviewCustomTx)
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
// @flow
|
||||
import {
|
||||
lg, md, sm, secondaryText, border,
|
||||
} from '~/theme/variables'
|
||||
|
||||
export const styles = () => ({
|
||||
heading: {
|
||||
padding: `${sm} ${lg}`,
|
||||
justifyContent: 'flex-start',
|
||||
boxSizing: 'border-box',
|
||||
maxHeight: '75px',
|
||||
},
|
||||
annotation: {
|
||||
letterSpacing: '-1px',
|
||||
color: secondaryText,
|
||||
marginRight: 'auto',
|
||||
marginLeft: '20px',
|
||||
},
|
||||
headingText: {
|
||||
fontSize: '24px',
|
||||
},
|
||||
closeIcon: {
|
||||
height: '35px',
|
||||
width: '35px',
|
||||
},
|
||||
container: {
|
||||
padding: `${md} ${lg}`,
|
||||
},
|
||||
value: {
|
||||
marginLeft: sm,
|
||||
},
|
||||
outerData: {
|
||||
borderRadius: '5px',
|
||||
border: `1px solid ${border}`,
|
||||
padding: '11px',
|
||||
},
|
||||
data: {
|
||||
wordBreak: 'break-all',
|
||||
overflow: 'auto',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Averta',
|
||||
maxHeight: '100px',
|
||||
letterSpacing: 'normal',
|
||||
fontStretch: 'normal',
|
||||
lineHeight: '1.43',
|
||||
},
|
||||
buttonRow: {
|
||||
height: '84px',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue