import React, { Component } from 'react'; import PropTypes from 'prop-types'; import AccountListItem from '../../components/app/account-list-item'; import Button from '../../components/ui/button'; import Identicon from '../../components/ui/identicon'; import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app'; import { getEnvironmentType } from '../../../app/scripts/lib/util'; import { conversionUtil } from '../../../shared/modules/conversion.utils'; export default class ConfirmEncryptionPublicKey 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, cancelEncryptionPublicKey: PropTypes.func.isRequired, encryptionPublicKey: PropTypes.func.isRequired, conversionRate: PropTypes.number, history: PropTypes.object.isRequired, requesterAddress: PropTypes.string, txData: PropTypes.object, domainMetadata: PropTypes.object, mostRecentOverviewPage: PropTypes.string.isRequired, nativeCurrency: PropTypes.string.isRequired, }; componentDidMount = () => { if ( getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION ) { window.addEventListener('beforeunload', this._beforeUnload); } }; componentWillUnmount = () => { this._removeBeforeUnload(); }; _beforeUnload = async (event) => { const { clearConfirmTransaction, cancelEncryptionPublicKey, txData, } = this.props; const { metricsEvent } = this.context; await cancelEncryptionPublicKey(txData, event); metricsEvent({ eventOpts: { category: 'Messages', action: 'Encryption public key Request', name: 'Cancel Via Notification Close', }, }); clearConfirmTransaction(); }; _removeBeforeUnload = () => { if ( getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION ) { window.removeEventListener('beforeunload', this._beforeUnload); } }; renderHeader = () => { return (
{this.context.t('encryptionPublicKeyRequest')}
); }; renderAccount = () => { const { fromAccount } = this.props; const { t } = this.context; return (
{`${t('account')}:`}
); }; renderBalance = () => { const { conversionRate, nativeCurrency, fromAccount: { balance }, } = this.props; const { t } = this.context; const nativeCurrencyBalance = conversionUtil(balance, { fromNumericBase: 'hex', toNumericBase: 'dec', fromDenomination: 'WEI', numberOfDecimals: 6, conversionRate, }); return (
{`${t('balance')}:`}
{`${nativeCurrencyBalance} ${nativeCurrency}`}
); }; renderRequestIcon = () => { const { requesterAddress } = this.props; return (
); }; renderAccountInfo = () => { return (
{this.renderAccount()} {this.renderRequestIcon()} {this.renderBalance()}
); }; renderBody = () => { const { domainMetadata, txData } = this.props; const { t } = this.context; const originMetadata = domainMetadata[txData.origin]; const notice = t('encryptionPublicKeyNotice', [txData.origin]); const name = originMetadata?.hostname || txData.origin; return (
{this.renderAccountInfo()}
{originMetadata?.icon ? ( ) : ( {name.charAt(0).toUpperCase()} )}
{notice}
); }; renderFooter = () => { const { cancelEncryptionPublicKey, clearConfirmTransaction, encryptionPublicKey, history, mostRecentOverviewPage, txData, } = this.props; const { t, metricsEvent } = this.context; return (
); }; render = () => { return (
{this.renderHeader()} {this.renderBody()} {this.renderFooter()}
); }; }