import React, { Component } from 'react' import PropTypes from 'prop-types' import copyToClipboard from 'copy-to-clipboard' import classnames from 'classnames' import AccountListItem from '../../components/app/account-list-item' import Button from '../../components/ui/button' import Identicon from '../../components/ui/identicon' import Tooltip from '../../components/ui/tooltip-v2' import Copy from '../../components/ui/icon/copy-icon.component' import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../app/scripts/lib/enums' import { getEnvironmentType } from '../../../../app/scripts/lib/util' import { conversionUtil } from '../../helpers/utils/conversion-util' export default class ConfirmDecryptMessage extends Component { static contextTypes = { t: PropTypes.func.isRequired, metricsEvent: PropTypes.func.isRequired, } static propTypes = { fromAccount: PropTypes.shape({ address: PropTypes.string.isRequired, balance: PropTypes.string, name: PropTypes.string, }).isRequired, clearConfirmTransaction: PropTypes.func.isRequired, cancelDecryptMessage: PropTypes.func.isRequired, decryptMessage: PropTypes.func.isRequired, decryptMessageInline: PropTypes.func.isRequired, conversionRate: PropTypes.number, history: PropTypes.object.isRequired, mostRecentOverviewPage: PropTypes.string.isRequired, requesterAddress: PropTypes.string, txData: PropTypes.object, domainMetadata: PropTypes.object, } state = { fromAccount: this.props.fromAccount, copyToClipboardPressed: false, hasCopied: false, } componentDidMount = () => { if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION) { window.addEventListener('beforeunload', this._beforeUnload) } } componentWillUnmount = () => { this._removeBeforeUnload() } _beforeUnload = async (event) => { const { clearConfirmTransaction, cancelDecryptMessage, txData, } = this.props const { metricsEvent } = this.context await cancelDecryptMessage(txData, event) metricsEvent({ eventOpts: { category: 'Messages', action: 'Decrypt Message Request', name: 'Cancel Via Notification Close', }, }) clearConfirmTransaction() } _removeBeforeUnload = () => { if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION) { window.removeEventListener('beforeunload', this._beforeUnload) } } copyMessage = () => { copyToClipboard(this.state.rawMessage) this.context.metricsEvent({ eventOpts: { category: 'Messages', action: 'Decrypt Message Copy', name: 'Copy', }, }) this.setState({ hasCopied: true }) setTimeout(() => this.setState({ hasCopied: false }), 3000) } renderHeader = () => { return (
{ this.context.t('decryptRequest') }
) } renderAccount = () => { const { fromAccount } = this.state const { t } = this.context return (
{ `${t('account')}:` }
) } renderBalance = () => { const { conversionRate } = this.props const { fromAccount: { balance } } = this.state const { t } = this.context const balanceInEther = conversionUtil(balance, { fromNumericBase: 'hex', toNumericBase: 'dec', fromDenomination: 'WEI', numberOfDecimals: 6, conversionRate, }) return (
{ `${t('balance')}:` }
{ `${balanceInEther} ETH` }
) } renderRequestIcon = () => { const { requesterAddress } = this.props return (
) } renderAccountInfo = () => { return (
{ this.renderAccount() } { this.renderRequestIcon() } { this.renderBalance() }
) } renderBody = () => { const { decryptMessageInline, domainMetadata, txData } = this.props const { t } = this.context const origin = domainMetadata[txData.msgParams.origin] const notice = t('decryptMessageNotice', [origin.name]) const { hasCopied, hasDecrypted, hasError, rawMessage, errorMessage, copyToClipboardPressed, } = this.state return (
{ this.renderAccountInfo() }
{origin.icon ? ( ) : ( {origin.name.charAt(0).toUpperCase()} )}
{ notice }
{ !hasDecrypted && !hasError ? txData.msgParams.data : rawMessage } { hasError ? errorMessage : '' }
{ decryptMessageInline(txData, event).then((result) => { if (result.error) { this.setState({ hasError: true, errorMessage: this.context.t('decryptInlineError', [result.error]) }) } else { this.setState({ hasDecrypted: true, rawMessage: result.rawData }) } }) }} >
{t('decryptMetamask')}
{ hasDecrypted ? (
this.copyMessage()} onMouseDown={() => this.setState({ copyToClipboardPressed: true })} onMouseUp={() => this.setState({ copyToClipboardPressed: false })} >
{t('decryptCopy')}
) :
}
) } renderFooter = () => { const { cancelDecryptMessage, clearConfirmTransaction, decryptMessage, history, mostRecentOverviewPage, txData, } = this.props const { metricsEvent, t } = this.context return (
) } render = () => { return (
{ this.renderHeader() } { this.renderBody() } { this.renderFooter() }
) } }