import PropTypes from 'prop-types' import React, { Component } from 'react' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import { compose } from 'redux' import log from 'loglevel' import * as actions from '../../store/actions' import txHelper from '../../../lib/tx-helper' import SignatureRequest from '../../components/app/signature-request' import SignatureRequestOriginal from '../../components/app/signature-request-original' import Loading from '../../components/ui/loading-screen' import { getMostRecentOverviewPage } from '../../ducks/history/history' import { MESSAGE_TYPE } from '../../../../shared/constants/app' import { TRANSACTION_STATUSES } from '../../../../shared/constants/transaction' function mapStateToProps(state) { const { metamask, appState } = state const { unapprovedMsgCount, unapprovedPersonalMsgCount, unapprovedTypedMessagesCount, } = metamask const { txId } = appState return { identities: state.metamask.identities, mostRecentOverviewPage: getMostRecentOverviewPage(state), unapprovedTxs: state.metamask.unapprovedTxs, unapprovedMsgs: state.metamask.unapprovedMsgs, unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs, unapprovedTypedMessages: state.metamask.unapprovedTypedMessages, index: txId, warning: state.appState.warning, network: state.metamask.network, currentCurrency: state.metamask.currentCurrency, blockGasLimit: state.metamask.currentBlockGasLimit, unapprovedMsgCount, unapprovedPersonalMsgCount, unapprovedTypedMessagesCount, send: state.metamask.send, currentNetworkTxList: state.metamask.currentNetworkTxList, } } class ConfirmTxScreen extends Component { static propTypes = { mostRecentOverviewPage: PropTypes.string.isRequired, unapprovedMsgCount: PropTypes.number, unapprovedPersonalMsgCount: PropTypes.number, unapprovedTypedMessagesCount: PropTypes.number, network: PropTypes.string, index: PropTypes.number, unapprovedTxs: PropTypes.object, unapprovedMsgs: PropTypes.object, unapprovedPersonalMsgs: PropTypes.object, unapprovedTypedMessages: PropTypes.object, match: PropTypes.shape({ params: PropTypes.shape({ id: PropTypes.string, }), }), currentNetworkTxList: PropTypes.array, currentCurrency: PropTypes.string, blockGasLimit: PropTypes.string, history: PropTypes.object, identities: PropTypes.object, dispatch: PropTypes.func.isRequired, send: PropTypes.shape({ to: PropTypes.string, }).isRequired, } getUnapprovedMessagesTotal() { const { unapprovedMsgCount = 0, unapprovedPersonalMsgCount = 0, unapprovedTypedMessagesCount = 0, } = this.props return ( unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount ) } getTxData() { const { network, index, unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, unapprovedTypedMessages, match: { params: { id: transactionId } = {} }, } = this.props const unconfTxList = txHelper( unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, unapprovedTypedMessages, network, ) log.info(`rendering a combined ${unconfTxList.length} unconf msgs & txs`) return transactionId ? unconfTxList.find(({ id }) => `${id}` === transactionId) : unconfTxList[index] } signatureSelect(type, version) { // Temporarily direct only v3 and v4 requests to new code. if ( type === MESSAGE_TYPE.ETH_SIGN_TYPED_DATA && (version === 'V3' || version === 'V4') ) { return SignatureRequest } return SignatureRequestOriginal } signMessage(msgData, event) { log.info('conf-tx.js: signing message') const params = msgData.msgParams params.metamaskId = msgData.id this.stopPropagation(event) return this.props.dispatch(actions.signMsg(params)) } stopPropagation(event) { if (event.stopPropagation) { event.stopPropagation() } } signPersonalMessage(msgData, event) { log.info('conf-tx.js: signing personal message') const params = msgData.msgParams params.metamaskId = msgData.id this.stopPropagation(event) return this.props.dispatch(actions.signPersonalMsg(params)) } signTypedMessage(msgData, event) { log.info('conf-tx.js: signing typed message') const params = msgData.msgParams params.metamaskId = msgData.id this.stopPropagation(event) return this.props.dispatch(actions.signTypedMsg(params)) } cancelMessage(msgData, event) { log.info('canceling message') this.stopPropagation(event) return this.props.dispatch(actions.cancelMsg(msgData)) } cancelPersonalMessage(msgData, event) { log.info('canceling personal message') this.stopPropagation(event) return this.props.dispatch(actions.cancelPersonalMsg(msgData)) } cancelTypedMessage(msgData, event) { log.info('canceling typed message') this.stopPropagation(event) return this.props.dispatch(actions.cancelTypedMsg(msgData)) } componentDidMount() { const { unapprovedTxs = {}, history, mostRecentOverviewPage, network, send, } = this.props const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network) if ( unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0 ) { history.push(mostRecentOverviewPage) } } componentDidUpdate(prevProps) { const { unapprovedTxs = {}, network, currentNetworkTxList, send, history, match: { params: { id: transactionId } = {} }, mostRecentOverviewPage, } = this.props let prevTx if (transactionId) { prevTx = currentNetworkTxList.find(({ id }) => `${id}` === transactionId) } else { const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps const prevUnconfTxList = txHelper(prevUnapprovedTxs, {}, {}, {}, network) const prevTxData = prevUnconfTxList[prevIndex] || {} prevTx = currentNetworkTxList.find(({ id }) => id === prevTxData.id) || {} } const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network) if (prevTx && prevTx.status === TRANSACTION_STATUSES.DROPPED) { this.props.dispatch( actions.showModal({ name: 'TRANSACTION_CONFIRMED', onSubmit: () => history.push(mostRecentOverviewPage), }), ) return } if ( unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0 ) { this.props.history.push(mostRecentOverviewPage) } } render() { const { currentCurrency, blockGasLimit } = this.props const txData = this.getTxData() || {} const { msgParams, type, msgParams: { version }, } = txData log.debug('msgParams detected, rendering pending msg') if (!msgParams) { return } const SigComponent = this.signatureSelect(type, version) return ( ) } } export default compose(withRouter, connect(mapStateToProps))(ConfirmTxScreen)