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