approve & cancel tx modals wip
This commit is contained in:
Mikhail Mikheev
parent
3aea531b61
commit
d98a768b51
|
|
@ -1,9 +1,9 @@
|
|||
// @flow
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { List } from 'immutable'
|
||||
import { type Token } from '~/logic/tokens/store/model/token'
|
||||
import cn from 'classnames'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import { type Token } from '~/logic/tokens/store/model/token'
|
||||
import Modal from '~/components/Modal'
|
||||
import ChooseTxType from './screens/ChooseTxType'
|
||||
import SendFunds from './screens/SendFunds'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
// @flow
|
||||
import React from 'react'
|
||||
import { List } from 'immutable'
|
||||
import Close from '@material-ui/icons/Close'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import cn from 'classnames'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Modal from '~/components/Modal'
|
||||
import Hairline from '~/components/layout/Hairline'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Row from '~/components/layout/Row'
|
||||
import { styles } from './style'
|
||||
|
||||
type Props = {
|
||||
onClose: () => void,
|
||||
classes: Object,
|
||||
isOpen: boolean,
|
||||
createTransaction: Function,
|
||||
}
|
||||
|
||||
const CancelTxModal = ({
|
||||
onClose, isOpen, classes, createTransaction,
|
||||
}: Props) => (
|
||||
<Modal
|
||||
title="Cancel Transaction"
|
||||
description="CancelTransaction"
|
||||
handleClose={onClose}
|
||||
open={isOpen}
|
||||
// paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
|
||||
>
|
||||
<Row align="center" grow className={classes.heading}>
|
||||
<Paragraph weight="bolder" className={classes.headingText} noMargin>
|
||||
Cancel transaction
|
||||
</Paragraph>
|
||||
<IconButton onClick={onClose} disableRipple>
|
||||
<Close className={classes.closeIcon} />
|
||||
</IconButton>
|
||||
</Row>
|
||||
<Hairline />
|
||||
</Modal>
|
||||
)
|
||||
|
||||
export default withStyles(styles)(CancelTxModal)
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
// @flow
|
||||
import { lg, md, sm } from '~/theme/variables'
|
||||
|
||||
export const styles = () => ({
|
||||
heading: {
|
||||
padding: `${sm} ${lg}`,
|
||||
justifyContent: 'space-between',
|
||||
boxSizing: 'border-box',
|
||||
maxHeight: '75px',
|
||||
},
|
||||
headingText: {
|
||||
fontSize: '24px',
|
||||
},
|
||||
closeIcon: {
|
||||
height: '35px',
|
||||
width: '35px',
|
||||
},
|
||||
container: {
|
||||
padding: `${md} ${lg}`,
|
||||
},
|
||||
buttonRow: {
|
||||
height: '84px',
|
||||
justifyContent: 'center',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
},
|
||||
smallerModalWindow: {
|
||||
height: 'auto',
|
||||
position: 'static',
|
||||
},
|
||||
})
|
||||
|
|
@ -19,6 +19,7 @@ import { shortVersionOf } from '~/logic/wallets/ethAddresses'
|
|||
import { secondary } from '~/theme/variables'
|
||||
import OwnersList from './OwnersList'
|
||||
import ButtonRow from './ButtonRow'
|
||||
import CancelTxModal from './CancelTxModal'
|
||||
import { styles } from './style'
|
||||
import { formatDate } from '../columns'
|
||||
|
||||
|
|
@ -32,6 +33,8 @@ type Props = {
|
|||
owners: List<Owner>,
|
||||
}
|
||||
|
||||
type OpenModal = 'cancelTx' | 'approveTx' | null
|
||||
|
||||
const openIconStyle = {
|
||||
height: '13px',
|
||||
color: secondary,
|
||||
|
|
@ -46,6 +49,11 @@ const ExpandedTx = ({
|
|||
classes, tx, threshold, owners,
|
||||
}: Props) => {
|
||||
const [tabIndex, setTabIndex] = useState<number>(0)
|
||||
const [openModal, setOpenModal] = useState<OpenModal>(null)
|
||||
const openApproveModal = () => setOpenModal('approveTx')
|
||||
const openCancelModal = () => setOpenModal('cancelTx')
|
||||
const closeModal = () => setOpenModal(null)
|
||||
|
||||
const confirmedLabel = `Confirmed [${tx.confirmations.size}/${threshold}]`
|
||||
const unconfirmedLabel = `Unconfirmed [${owners.size - tx.confirmations.size}]`
|
||||
const txStatus = tx.isExecuted ? 'success' : 'awaiting_confirmations'
|
||||
|
|
@ -65,72 +73,75 @@ const ExpandedTx = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<Block>
|
||||
<Row>
|
||||
<Col xs={6} layout="column">
|
||||
<Block className={classes.txDataContainer}>
|
||||
<Paragraph noMargin>
|
||||
<Bold>TX hash: </Bold>
|
||||
{tx.executionTxHash ? (
|
||||
<a href={openTxInEtherScan(tx.executionTxHash, 'rinkeby')} target="_blank" rel="noopener noreferrer">
|
||||
{shortVersionOf(tx.executionTxHash, 4)}
|
||||
<>
|
||||
<Block>
|
||||
<Row>
|
||||
<Col xs={6} layout="column">
|
||||
<Block className={classes.txDataContainer}>
|
||||
<Paragraph noMargin>
|
||||
<Bold>TX hash: </Bold>
|
||||
{tx.executionTxHash ? (
|
||||
<a href={openTxInEtherScan(tx.executionTxHash, 'rinkeby')} target="_blank" rel="noopener noreferrer">
|
||||
{shortVersionOf(tx.executionTxHash, 4)}
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</a>
|
||||
) : (
|
||||
'n/a'
|
||||
)}
|
||||
</Paragraph>
|
||||
<Paragraph noMargin>
|
||||
<Bold>TX status: </Bold>
|
||||
<Span className={classes[txStatus]} style={{ fontWeight: 'bold' }}>
|
||||
{txStatusToLabel[txStatus]}
|
||||
</Span>
|
||||
</Paragraph>
|
||||
<Paragraph noMargin>
|
||||
<Bold>TX created: </Bold>
|
||||
{formatDate(tx.submissionDate)}
|
||||
</Paragraph>
|
||||
{tx.executionDate && (
|
||||
<Paragraph noMargin>
|
||||
<Bold>TX executed: </Bold>
|
||||
{formatDate(tx.executionDate)}
|
||||
</Paragraph>
|
||||
)}
|
||||
</Block>
|
||||
<Hairline />
|
||||
<Block className={classes.txDataContainer}>
|
||||
<Paragraph noMargin>
|
||||
<Bold>
|
||||
Send
|
||||
{' '}
|
||||
{fromWei(toBN(tx.value), 'ether')}
|
||||
{' '}
|
||||
{tx.symbol}
|
||||
{' '}
|
||||
to:
|
||||
</Bold>
|
||||
<br />
|
||||
<a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
|
||||
{shortVersionOf(tx.recipient, 4)}
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</a>
|
||||
) : (
|
||||
'n/a'
|
||||
)}
|
||||
</Paragraph>
|
||||
<Paragraph noMargin>
|
||||
<Bold>TX status: </Bold>
|
||||
<Span className={classes[txStatus]} style={{ fontWeight: 'bold' }}>
|
||||
{txStatusToLabel[txStatus]}
|
||||
</Span>
|
||||
</Paragraph>
|
||||
<Paragraph noMargin>
|
||||
<Bold>TX created: </Bold>
|
||||
{formatDate(tx.submissionDate)}
|
||||
</Paragraph>
|
||||
{tx.executionDate && (
|
||||
<Paragraph noMargin>
|
||||
<Bold>TX executed: </Bold>
|
||||
{formatDate(tx.executionDate)}
|
||||
</Paragraph>
|
||||
)}
|
||||
</Block>
|
||||
<Hairline />
|
||||
<Block className={classes.txDataContainer}>
|
||||
<Paragraph noMargin>
|
||||
<Bold>
|
||||
Send
|
||||
{' '}
|
||||
{fromWei(toBN(tx.value), 'ether')}
|
||||
{' '}
|
||||
{tx.symbol}
|
||||
{' '}
|
||||
to:
|
||||
</Bold>
|
||||
<br />
|
||||
<a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
|
||||
{shortVersionOf(tx.recipient, 4)}
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</a>
|
||||
</Paragraph>
|
||||
</Block>
|
||||
</Col>
|
||||
<Col xs={6} className={classes.rightCol} layout="block">
|
||||
<Row>
|
||||
<Tabs value={tabIndex} onChange={handleTabChange} indicatorColor="secondary" textColor="secondary">
|
||||
<Tab label={confirmedLabel} />
|
||||
<Tab label={unconfirmedLabel} />
|
||||
</Tabs>
|
||||
<Hairline color="#c8ced4" />
|
||||
</Row>
|
||||
<Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
|
||||
<Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
|
||||
<ButtonRow />
|
||||
</Col>
|
||||
</Row>
|
||||
</Block>
|
||||
</Block>
|
||||
</Col>
|
||||
<Col xs={6} className={classes.rightCol} layout="block">
|
||||
<Row>
|
||||
<Tabs value={tabIndex} onChange={handleTabChange} indicatorColor="secondary" textColor="secondary">
|
||||
<Tab label={confirmedLabel} />
|
||||
<Tab label={unconfirmedLabel} />
|
||||
</Tabs>
|
||||
<Hairline color="#c8ced4" />
|
||||
</Row>
|
||||
<Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
|
||||
<Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
|
||||
<ButtonRow onTxApprove={openApproveModal} onTxCancel={openCancelModal} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Block>
|
||||
<CancelTxModal isOpen={openModal === 'cancelTx'} onClose={closeModal} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue