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'; import Copy from '../../components/ui/icon/copy-icon.component'; import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../shared/constants/app'; 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 originMetadata = domainMetadata[txData.msgParams.origin]; const name = originMetadata?.hostname || txData.msgParams.origin; const notice = t('decryptMessageNotice', [txData.msgParams.origin]); const { hasCopied, hasDecrypted, hasError, rawMessage, errorMessage, copyToClipboardPressed, } = this.state; return (
{this.renderAccountInfo()}
{originMetadata?.icon ? ( ) : ( {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()}
); }; }