Switch existing modals from using Notification to Modal. Remove Notification component. Add CancelTransaction modal
Alexander Tseung
6 years ago
parent
3e470fee8a
commit
5a6c333506
@ -0,0 +1,32 @@ |
||||
import React, { PureComponent } from 'react' |
||||
import PropTypes from 'prop-types' |
||||
import classnames from 'classnames' |
||||
import CurrencyDisplay from '../../../currency-display' |
||||
import { ETH } from '../../../../constants/common' |
||||
|
||||
export default class CancelTransaction extends PureComponent { |
||||
static propTypes = { |
||||
className: PropTypes.string, |
||||
value: PropTypes.string, |
||||
} |
||||
|
||||
render () { |
||||
const { className, value } = this.props |
||||
console.log('VALUE', value) |
||||
|
||||
return ( |
||||
<div className={classnames('cancel-transaction-gas-fee', className)}> |
||||
<CurrencyDisplay |
||||
className="cancel-transaction-gas-fee__eth" |
||||
currency={ETH} |
||||
value={value} |
||||
numberOfDecimals={6} |
||||
/> |
||||
<CurrencyDisplay |
||||
className="cancel-transaction-gas-fee__fiat" |
||||
value={value} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export { default } from './cancel-transaction-gas-fee.component' |
||||
@ -0,0 +1,17 @@ |
||||
.cancel-transaction-gas-fee { |
||||
background: #F1F4F9; |
||||
padding: 16px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
padding: 12px; |
||||
|
||||
&__eth { |
||||
font-size: 1.5rem; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
&__fiat { |
||||
font-size: .75rem; |
||||
} |
||||
} |
||||
@ -0,0 +1,71 @@ |
||||
import React, { PureComponent } from 'react' |
||||
import PropTypes from 'prop-types' |
||||
import Modal from '../../modal' |
||||
import CancelTransactionGasFee from './cancel-transaction-gas-fee' |
||||
import { SUBMITTED_STATUS } from '../../../constants/transactions' |
||||
import { decimalToHex } from '../../../helpers/conversions.util' |
||||
import { getHexGasTotal } from '../../../helpers/confirm-transaction/util' |
||||
|
||||
export default class CancelTransaction extends PureComponent { |
||||
static contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
static propTypes = { |
||||
createCancelTransaction: PropTypes.func, |
||||
hideModal: PropTypes.func, |
||||
showTransactionConfirmedModal: PropTypes.func, |
||||
transactionStatus: PropTypes.string, |
||||
defaultNewGasPrice: PropTypes.string, |
||||
} |
||||
|
||||
componentDidUpdate () { |
||||
const { transactionStatus, showTransactionConfirmedModal } = this.props |
||||
|
||||
if (transactionStatus !== SUBMITTED_STATUS) { |
||||
showTransactionConfirmedModal() |
||||
return |
||||
} |
||||
} |
||||
|
||||
handleSubmit = async () => { |
||||
const { createCancelTransaction, hideModal } = this.props |
||||
|
||||
await createCancelTransaction() |
||||
hideModal() |
||||
} |
||||
|
||||
handleCancel = () => { |
||||
this.props.hideModal() |
||||
} |
||||
|
||||
render () { |
||||
const { t } = this.context |
||||
const { defaultNewGasPrice: gasPrice } = this.props |
||||
const newGasFee = getHexGasTotal({ gasPrice, gasLimit: decimalToHex(21000) }) |
||||
|
||||
return ( |
||||
<Modal |
||||
headerText={t('attemptToCancel')} |
||||
onSubmit={this.handleSubmit} |
||||
onCancel={this.handleCancel} |
||||
submitText={t('yesLetsTry')} |
||||
cancelText={t('nevermind')} |
||||
submitType="secondary" |
||||
> |
||||
<div> |
||||
<div className="cancel-transaction__title"> |
||||
{ t('cancellationGasFee') } |
||||
</div> |
||||
<CancelTransactionGasFee |
||||
className="cancel-transaction__cancel-transaction-gas-fee-container" |
||||
value={newGasFee} |
||||
/> |
||||
<div className="cancel-transaction__description"> |
||||
{ t('attemptToCancelDescription') } |
||||
</div> |
||||
</div> |
||||
</Modal> |
||||
) |
||||
} |
||||
} |
||||
@ -0,0 +1,55 @@ |
||||
import { connect } from 'react-redux' |
||||
import { compose } from 'recompose' |
||||
import R from 'ramda' |
||||
import { multiplyCurrencies } from '../../../conversion-util' |
||||
import { bnToHex } from '../../../helpers/conversions.util' |
||||
import withModalProps from '../../../higher-order-components/with-modal-props' |
||||
import CancelTransaction from './cancel-transaction.component' |
||||
import { showModal, hideModal, createCancelTransaction } from '../../../actions' |
||||
|
||||
const mapStateToProps = (state, ownProps) => { |
||||
const { metamask } = state |
||||
const { transactionId, originalGasPrice } = ownProps |
||||
const { selectedAddressTxList } = metamask |
||||
const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList) |
||||
const transactionStatus = transaction ? transaction.status : '' |
||||
|
||||
const defaultNewGasPrice = bnToHex(multiplyCurrencies(originalGasPrice, 1.1)) |
||||
|
||||
return { |
||||
transactionId, |
||||
transactionStatus, |
||||
originalGasPrice, |
||||
defaultNewGasPrice, |
||||
} |
||||
} |
||||
|
||||
const mapDispatchToProps = dispatch => { |
||||
return { |
||||
hideModal: () => dispatch(hideModal()), |
||||
createCancelTransaction: txId => dispatch(createCancelTransaction(txId)), |
||||
showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })), |
||||
} |
||||
} |
||||
|
||||
const mergeProps = (stateProps, dispatchProps, ownProps) => { |
||||
const { transactionId, ...restStateProps } = stateProps |
||||
const { |
||||
createCancelTransaction: dispatchCreateCancelTransaction, |
||||
...restDispatchProps |
||||
} = dispatchProps |
||||
|
||||
return { |
||||
...restStateProps, |
||||
...restDispatchProps, |
||||
...ownProps, |
||||
createCancelTransaction: newGasPrice => { |
||||
return dispatchCreateCancelTransaction(transactionId, newGasPrice) |
||||
}, |
||||
} |
||||
} |
||||
|
||||
export default compose( |
||||
withModalProps, |
||||
connect(mapStateToProps, mapDispatchToProps, mergeProps), |
||||
)(CancelTransaction) |
||||
@ -0,0 +1 @@ |
||||
export { default } from './cancel-transaction.container' |
||||
@ -0,0 +1,18 @@ |
||||
@import './cancel-transaction-gas-fee/index'; |
||||
|
||||
.cancel-transaction { |
||||
&__title { |
||||
font-weight: 500; |
||||
padding-bottom: 16px; |
||||
text-align: center; |
||||
} |
||||
|
||||
&__description { |
||||
text-align: center; |
||||
font-size: .875rem; |
||||
} |
||||
|
||||
&__cancel-transaction-gas-fee-container { |
||||
margin-bottom: 16px; |
||||
} |
||||
} |
||||
@ -1,2 +1 @@ |
||||
import ConfirmRemoveAccount from './confirm-remove-account.container' |
||||
module.exports = ConfirmRemoveAccount |
||||
export { default } from './confirm-remove-account.container' |
||||
|
||||
@ -0,0 +1,58 @@ |
||||
.confirm-remove-account { |
||||
&__description { |
||||
text-align: center; |
||||
font-size: .875rem; |
||||
} |
||||
|
||||
&__account { |
||||
border: 1px solid #b7b7b7; |
||||
border-radius: 4px; |
||||
padding: 10px; |
||||
display: flex; |
||||
margin-top: 10px; |
||||
margin-bottom: 20px; |
||||
width: 100%; |
||||
|
||||
&__identicon { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
&__name, |
||||
&__address { |
||||
margin-right: 10px; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
&__name { |
||||
width: 100px; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
&__label { |
||||
font-size: 11px; |
||||
display: block; |
||||
color: #9b9b9b; |
||||
} |
||||
|
||||
&__link { |
||||
margin-top: 14px; |
||||
|
||||
img { |
||||
width: 15px; |
||||
height: 15px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 575px) { |
||||
&__name { |
||||
width: 90px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__link { |
||||
color: #2f9ae0; |
||||
} |
||||
} |
||||
@ -1,13 +1,16 @@ |
||||
import { connect } from 'react-redux' |
||||
import { compose } from 'recompose' |
||||
import withModalProps from '../../../higher-order-components/with-modal-props' |
||||
import ConfirmResetAccount from './confirm-reset-account.component' |
||||
|
||||
const { hideModal, resetAccount } = require('../../../actions') |
||||
import { resetAccount } from '../../../actions' |
||||
|
||||
const mapDispatchToProps = dispatch => { |
||||
return { |
||||
hideModal: () => dispatch(hideModal()), |
||||
resetAccount: () => dispatch(resetAccount()), |
||||
} |
||||
} |
||||
|
||||
export default connect(null, mapDispatchToProps)(ConfirmResetAccount) |
||||
export default compose( |
||||
withModalProps, |
||||
connect(null, mapDispatchToProps) |
||||
)(ConfirmResetAccount) |
||||
|
||||
@ -1,2 +1 @@ |
||||
import ConfirmResetAccount from './confirm-reset-account.container' |
||||
module.exports = ConfirmResetAccount |
||||
export { default } from './confirm-reset-account.container' |
||||
|
||||
@ -1,108 +1,9 @@ |
||||
@import './customize-gas/index'; |
||||
|
||||
@import './qr-scanner/index'; |
||||
|
||||
.modal-container { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
display: flex; |
||||
flex-flow: column; |
||||
border-radius: 8px; |
||||
|
||||
&__title { |
||||
font-size: 1.5rem; |
||||
font-weight: 500; |
||||
padding: 16px 0; |
||||
text-align: center; |
||||
} |
||||
|
||||
&__description { |
||||
text-align: center; |
||||
font-size: .875rem; |
||||
} |
||||
|
||||
&__account { |
||||
border: 1px solid #b7b7b7; |
||||
border-radius: 4px; |
||||
padding: 10px; |
||||
display: flex; |
||||
margin-top: 10px; |
||||
margin-bottom: 20px; |
||||
width: 100%; |
||||
|
||||
&__identicon { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
&__name, |
||||
&__address { |
||||
margin-right: 10px; |
||||
font-size: 14px; |
||||
} |
||||
@import './cancel-transaction/index'; |
||||
|
||||
&__name { |
||||
width: 100px; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
@import './confirm-remove-account/index'; |
||||
|
||||
&__label { |
||||
font-size: 11px; |
||||
display: block; |
||||
color: #9b9b9b; |
||||
} |
||||
|
||||
&__link { |
||||
margin-top: 14px; |
||||
|
||||
img { |
||||
width: 15px; |
||||
height: 15px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 575px) { |
||||
&__name { |
||||
width: 90px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__link { |
||||
color: #2f9ae0; |
||||
} |
||||
|
||||
&__content { |
||||
overflow-y: auto; |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
padding: 32px; |
||||
|
||||
@media screen and (max-width: 575px) { |
||||
justify-content: center; |
||||
padding: 28px 20px; |
||||
} |
||||
} |
||||
|
||||
&__footer { |
||||
display: flex; |
||||
flex-flow: row; |
||||
justify-content: center; |
||||
border-top: 1px solid #d2d8dd; |
||||
padding: 16px; |
||||
flex: 0 0 auto; |
||||
@import './customize-gas/index'; |
||||
|
||||
&-button { |
||||
min-width: 0; |
||||
margin-right: 16px; |
||||
@import './qr-scanner/index'; |
||||
|
||||
&:last-of-type { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@import './transaction-confirmed/index'; |
||||
|
||||
@ -1,2 +0,0 @@ |
||||
import Notification from './notification.container' |
||||
module.exports = Notification |
||||
@ -1,30 +0,0 @@ |
||||
import React from 'react' |
||||
import PropTypes from 'prop-types' |
||||
import Button from '../../button' |
||||
|
||||
const Notification = (props, context) => { |
||||
return ( |
||||
<div className="modal-container"> |
||||
{ props.children } |
||||
<div className="modal-container__footer"> |
||||
<Button |
||||
type="primary" |
||||
onClick={() => props.onHide()} |
||||
> |
||||
{ context.t('ok') } |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
Notification.propTypes = { |
||||
onHide: PropTypes.func.isRequired, |
||||
children: PropTypes.element, |
||||
} |
||||
|
||||
Notification.contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
export default Notification |
||||
@ -1,38 +0,0 @@ |
||||
import { connect } from 'react-redux' |
||||
import Notification from './notification.component' |
||||
|
||||
const { hideModal } = require('../../../actions') |
||||
|
||||
const mapStateToProps = state => { |
||||
const { appState: { modal: { modalState: { props } } } } = state |
||||
const { onHide } = props |
||||
return { |
||||
onHide, |
||||
} |
||||
} |
||||
|
||||
const mapDispatchToProps = dispatch => { |
||||
return { |
||||
hideModal: () => dispatch(hideModal()), |
||||
} |
||||
} |
||||
|
||||
const mergeProps = (stateProps, dispatchProps, ownProps) => { |
||||
const { onHide, ...otherStateProps } = stateProps |
||||
const { hideModal, ...otherDispatchProps } = dispatchProps |
||||
|
||||
return { |
||||
...otherStateProps, |
||||
...otherDispatchProps, |
||||
...ownProps, |
||||
onHide: () => { |
||||
hideModal() |
||||
|
||||
if (onHide && typeof onHide === 'function') { |
||||
onHide() |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notification) |
||||
@ -1,2 +1 @@ |
||||
import TransactionConfirmed from './transaction-confirmed.component' |
||||
module.exports = TransactionConfirmed |
||||
export { default } from './transaction-confirmed.container' |
||||
|
||||
@ -0,0 +1,22 @@ |
||||
.transaction-confirmed { |
||||
&__title { |
||||
font-size: 1.5rem; |
||||
font-weight: 500; |
||||
padding: 16px 0; |
||||
text-align: center; |
||||
} |
||||
|
||||
&__description { |
||||
text-align: center; |
||||
font-size: .875rem; |
||||
} |
||||
|
||||
&__content { |
||||
overflow-y: auto; |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
padding: 16px; |
||||
} |
||||
} |
||||
@ -1,24 +1,45 @@ |
||||
import React from 'react' |
||||
import React, { PureComponent } from 'react' |
||||
import PropTypes from 'prop-types' |
||||
import Modal from '../../modal' |
||||
|
||||
const TransactionConfirmed = (props, context) => { |
||||
const { t } = context |
||||
export default class TransactionConfirmed extends PureComponent { |
||||
static contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
return ( |
||||
<div className="modal-container__content"> |
||||
<img src="images/check-icon.svg" /> |
||||
<div className="modal-container__title"> |
||||
{ `${t('confirmed')}!` } |
||||
</div> |
||||
<div className="modal-container__description"> |
||||
{ t('initialTransactionConfirmed') } |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
static propTypes = { |
||||
onSubmit: PropTypes.func, |
||||
hideModal: PropTypes.func, |
||||
} |
||||
|
||||
TransactionConfirmed.contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
handleSubmit = () => { |
||||
const { hideModal, onSubmit } = this.props |
||||
|
||||
hideModal() |
||||
|
||||
export default TransactionConfirmed |
||||
if (onSubmit && typeof onSubmit === 'function') { |
||||
onSubmit() |
||||
} |
||||
} |
||||
|
||||
render () { |
||||
const { t } = this.context |
||||
|
||||
return ( |
||||
<Modal |
||||
onSubmit={this.handleSubmit} |
||||
submitText={t('ok')} |
||||
> |
||||
<div className="transaction-confirmed__content"> |
||||
<img src="images/check-icon.svg" /> |
||||
<div className="transaction-confirmed__title"> |
||||
{ `${t('confirmed')}!` } |
||||
</div> |
||||
<div className="transaction-confirmed__description"> |
||||
{ t('initialTransactionConfirmed') } |
||||
</div> |
||||
</div> |
||||
</Modal> |
||||
) |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,4 @@ |
||||
import TransactionConfirmed from './transaction-confirmed.component' |
||||
import withModalProps from '../../../higher-order-components/with-modal-props' |
||||
|
||||
export default withModalProps(TransactionConfirmed) |
||||
@ -1,2 +1 @@ |
||||
import WelcomeBeta from './welcome-beta.component' |
||||
module.exports = WelcomeBeta |
||||
export { default } from './welcome-beta.container' |
||||
|
||||
@ -0,0 +1,4 @@ |
||||
import WelcomeBeta from './welcome-beta.component' |
||||
import withModalProps from '../../../higher-order-components/with-modal-props' |
||||
|
||||
export default withModalProps(WelcomeBeta) |
||||
Loading…
Reference in new issue