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 (
)
}
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() }
)
}
}