1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
Alex Donesky 634cf70a71
Enhance reusable SiteOrigin component (#14720)
* extend and reuse SiteOrigin component
2022-05-20 09:35:18 -05:00

219 lines
6.3 KiB
JavaScript

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 { EVENT } from '../../../shared/constants/metametrics';
import { conversionUtil } from '../../../shared/modules/conversion.utils';
import SiteOrigin from '../../components/ui/site-origin';
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,
conversionRate: PropTypes.number,
history: PropTypes.object.isRequired,
requesterAddress: PropTypes.string,
txData: PropTypes.object,
subjectMetadata: PropTypes.object,
mostRecentOverviewPage: PropTypes.string.isRequired,
nativeCurrency: PropTypes.string.isRequired,
};
renderHeader = () => {
return (
<div className="request-encryption-public-key__header">
<div className="request-encryption-public-key__header-background" />
<div className="request-encryption-public-key__header__text">
{this.context.t('encryptionPublicKeyRequest')}
</div>
<div className="request-encryption-public-key__header__tip-container">
<div className="request-encryption-public-key__header__tip" />
</div>
</div>
);
};
renderAccount = () => {
const { fromAccount } = this.props;
const { t } = this.context;
return (
<div className="request-encryption-public-key__account">
<div className="request-encryption-public-key__account-text">
{`${t('account')}:`}
</div>
<div className="request-encryption-public-key__account-item">
<AccountListItem account={fromAccount} />
</div>
</div>
);
};
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 (
<div className="request-encryption-public-key__balance">
<div className="request-encryption-public-key__balance-text">
{`${t('balance')}:`}
</div>
<div className="request-encryption-public-key__balance-value">
{`${nativeCurrencyBalance} ${nativeCurrency}`}
</div>
</div>
);
};
renderRequestIcon = () => {
const { requesterAddress } = this.props;
return (
<div className="request-encryption-public-key__request-icon">
<Identicon diameter={40} address={requesterAddress} />
</div>
);
};
renderAccountInfo = () => {
return (
<div className="request-encryption-public-key__account-info">
{this.renderAccount()}
{this.renderRequestIcon()}
{this.renderBalance()}
</div>
);
};
renderBody = () => {
const { subjectMetadata, txData } = this.props;
const { t } = this.context;
const targetSubjectMetadata = subjectMetadata[txData.origin];
const notice = t('encryptionPublicKeyNotice', [
<SiteOrigin siteOrigin={txData.origin} key={txData.origin} />,
]);
const name = targetSubjectMetadata?.hostname || txData.origin;
return (
<div className="request-encryption-public-key__body">
{this.renderAccountInfo()}
<div className="request-encryption-public-key__visual">
<section>
{targetSubjectMetadata?.iconUrl ? (
<img
className="request-encryption-public-key__visual-identicon"
src={targetSubjectMetadata.iconUrl}
alt=""
/>
) : (
<i className="request-encryption-public-key__visual-identicon--default">
{name.charAt(0).toUpperCase()}
</i>
)}
<div className="request-encryption-public-key__notice">
{notice}
</div>
</section>
</div>
</div>
);
};
renderFooter = () => {
const {
cancelEncryptionPublicKey,
clearConfirmTransaction,
encryptionPublicKey,
history,
mostRecentOverviewPage,
txData,
} = this.props;
const { t, trackEvent } = this.context;
return (
<div className="request-encryption-public-key__footer">
<Button
type="secondary"
large
className="request-encryption-public-key__footer__cancel-button"
onClick={async (event) => {
await cancelEncryptionPublicKey(txData, event);
trackEvent({
category: EVENT.CATEGORIES.MESSAGES,
event: 'Cancel',
properties: {
action: 'Encryption public key Request',
legacy_event: true,
},
});
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
>
{this.context.t('cancel')}
</Button>
<Button
type="primary"
large
className="request-encryption-public-key__footer__sign-button"
onClick={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);
}}
>
{t('provide')}
</Button>
</div>
);
};
render = () => {
return (
<div className="request-encryption-public-key__container">
{this.renderHeader()}
{this.renderBody()}
{this.renderFooter()}
</div>
);
};
}