import React, { Component } from 'react'; import PropTypes from 'prop-types'; import log from 'loglevel'; import AccountListItem from '../../components/app/account-list-item'; import Identicon from '../../components/ui/identicon'; import { PageContainerFooter } from '../../components/ui/page-container'; import { EVENT } from '../../../shared/constants/metametrics'; import SiteOrigin from '../../components/ui/site-origin'; import { Numeric } from '../../../shared/modules/Numeric'; import { EtherDenomination } from '../../../shared/constants/common'; import { formatCurrency } from '../../helpers/utils/confirm-tx.util'; import { getValueFromWeiHex } from '../../../shared/modules/conversion.utils'; export default class ConfirmEncryptionPublicKey extends Component { static contextTypes = { t: PropTypes.func.isRequired, trackEvent: 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, history: PropTypes.object.isRequired, requesterAddress: PropTypes.string, txData: PropTypes.object, subjectMetadata: PropTypes.object, mostRecentOverviewPage: PropTypes.string.isRequired, nativeCurrency: PropTypes.string.isRequired, currentCurrency: PropTypes.string.isRequired, conversionRate: PropTypes.number, }; renderHeader = () => { return (
{this.context.t('encryptionPublicKeyRequest')}
); }; renderAccount = () => { const { fromAccount } = this.props; const { t } = this.context; return (
{`${t('account')}:`}
); }; renderBalance = () => { const { conversionRate, nativeCurrency, currentCurrency, fromAccount: { balance }, } = this.props; const { t } = this.context; const nativeCurrencyBalance = conversionRate ? formatCurrency( getValueFromWeiHex({ value: balance, fromCurrency: nativeCurrency, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 6, toDenomination: EtherDenomination.ETH, }), currentCurrency, ) : new Numeric(balance, 16, EtherDenomination.WEI) .toDenomination(EtherDenomination.ETH) .round(6) .toBase(10) .toString(); return (
{`${t('balance')}:`}
{`${nativeCurrencyBalance} ${ conversionRate ? currentCurrency?.toUpperCase() : nativeCurrency }`}
); }; renderRequestIcon = () => { const { requesterAddress } = this.props; return (
); }; renderAccountInfo = () => { return (
{this.renderAccount()} {this.renderRequestIcon()} {this.renderBalance()}
); }; renderBody = () => { const { subjectMetadata, txData } = this.props; const { t } = this.context; const targetSubjectMetadata = subjectMetadata[txData.origin]; const notice = t('encryptionPublicKeyNotice', [ , ]); const name = targetSubjectMetadata?.hostname || txData.origin; return (
{this.renderAccountInfo()}
{targetSubjectMetadata?.iconUrl ? ( ) : ( {name.charAt(0).toUpperCase()} )}
{notice}
); }; renderFooter = () => { const { cancelEncryptionPublicKey, clearConfirmTransaction, encryptionPublicKey, history, mostRecentOverviewPage, txData, } = this.props; const { t, trackEvent } = this.context; return ( { await cancelEncryptionPublicKey(txData, event); trackEvent({ category: EVENT.CATEGORIES.MESSAGES, event: 'Cancel', properties: { action: 'Encryption public key Request', legacy_event: true, }, }); clearConfirmTransaction(); history.push(mostRecentOverviewPage); }} onSubmit={async (event) => { await encryptionPublicKey(txData, event); this.context.trackEvent({ category: EVENT.CATEGORIES.MESSAGES, event: 'Confirm', properties: { action: 'Encryption public key Request', legacy_event: true, }, }); clearConfirmTransaction(); history.push(mostRecentOverviewPage); }} /> ); }; render = () => { if (!this.props.txData) { log.warn('ConfirmEncryptionPublicKey Page: Missing txData prop.'); return null; } return (
{this.renderHeader()} {this.renderBody()} {this.renderFooter()}
); }; }