mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 07:24:56 +01:00
266 lines
7.7 KiB
JavaScript
266 lines
7.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import { Tabs, Tab } from '../../../ui/tabs';
|
|
import Button from '../../../ui/button';
|
|
import ActionableMessage from '../../../ui/actionable-message/actionable-message';
|
|
import { PageContainerFooter } from '../../../ui/page-container';
|
|
import ErrorMessage from '../../../ui/error-message';
|
|
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/error-keys';
|
|
import Typography from '../../../ui/typography';
|
|
import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
|
|
import DepositPopover from '../../deposit-popover/deposit-popover';
|
|
|
|
import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
|
|
|
|
export default class ConfirmPageContainerContent extends Component {
|
|
static contextTypes = {
|
|
t: PropTypes.func.isRequired,
|
|
};
|
|
|
|
static propTypes = {
|
|
action: PropTypes.string,
|
|
dataComponent: PropTypes.node,
|
|
dataHexComponent: PropTypes.node,
|
|
detailsComponent: PropTypes.node,
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
insightComponent: PropTypes.node,
|
|
///: END:ONLY_INCLUDE_IN
|
|
errorKey: PropTypes.string,
|
|
errorMessage: PropTypes.string,
|
|
hideSubtitle: PropTypes.bool,
|
|
tokenAddress: PropTypes.string,
|
|
nonce: PropTypes.string,
|
|
subtitleComponent: PropTypes.node,
|
|
title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
image: PropTypes.string,
|
|
titleComponent: PropTypes.node,
|
|
warning: PropTypes.string,
|
|
origin: PropTypes.string.isRequired,
|
|
ethGasPriceWarning: PropTypes.string,
|
|
// Footer
|
|
onCancelAll: PropTypes.func,
|
|
onCancel: PropTypes.func,
|
|
cancelText: PropTypes.string,
|
|
onSubmit: PropTypes.func,
|
|
submitText: PropTypes.string,
|
|
disabled: PropTypes.bool,
|
|
unapprovedTxCount: PropTypes.number,
|
|
rejectNText: PropTypes.string,
|
|
hideTitle: PropTypes.bool,
|
|
supportsEIP1559V2: PropTypes.bool,
|
|
hasTopBorder: PropTypes.bool,
|
|
nativeCurrency: PropTypes.string,
|
|
networkName: PropTypes.string,
|
|
toAddress: PropTypes.string,
|
|
transactionType: PropTypes.string,
|
|
isBuyableChain: PropTypes.bool,
|
|
};
|
|
|
|
state = {
|
|
setShowDepositPopover: false,
|
|
};
|
|
|
|
renderContent() {
|
|
const { detailsComponent, dataComponent } = this.props;
|
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
const { insightComponent } = this.props;
|
|
|
|
if (insightComponent && (detailsComponent || dataComponent)) {
|
|
return this.renderTabs();
|
|
}
|
|
///: END:ONLY_INCLUDE_IN
|
|
|
|
if (detailsComponent && dataComponent) {
|
|
return this.renderTabs();
|
|
}
|
|
|
|
return (
|
|
detailsComponent ||
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
insightComponent ||
|
|
///: END:ONLY_INCLUDE_IN
|
|
dataComponent
|
|
);
|
|
}
|
|
|
|
renderTabs() {
|
|
const { t } = this.context;
|
|
const {
|
|
detailsComponent,
|
|
dataComponent,
|
|
dataHexComponent,
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
insightComponent,
|
|
///: END:ONLY_INCLUDE_IN
|
|
} = this.props;
|
|
|
|
return (
|
|
<Tabs>
|
|
<Tab
|
|
className="confirm-page-container-content__tab"
|
|
name={t('details')}
|
|
>
|
|
{detailsComponent}
|
|
</Tab>
|
|
{dataComponent && (
|
|
<Tab className="confirm-page-container-content__tab" name={t('data')}>
|
|
{dataComponent}
|
|
</Tab>
|
|
)}
|
|
{dataHexComponent && (
|
|
<Tab
|
|
className="confirm-page-container-content__tab"
|
|
name={t('dataHex')}
|
|
>
|
|
{dataHexComponent}
|
|
</Tab>
|
|
)}
|
|
|
|
{
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
insightComponent
|
|
///: END:ONLY_INCLUDE_IN
|
|
}
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
action,
|
|
errorKey,
|
|
errorMessage,
|
|
title,
|
|
image,
|
|
titleComponent,
|
|
subtitleComponent,
|
|
hideSubtitle,
|
|
tokenAddress,
|
|
nonce,
|
|
detailsComponent,
|
|
dataComponent,
|
|
warning,
|
|
onCancelAll,
|
|
onCancel,
|
|
cancelText,
|
|
onSubmit,
|
|
submitText,
|
|
disabled,
|
|
unapprovedTxCount,
|
|
rejectNText,
|
|
origin,
|
|
ethGasPriceWarning,
|
|
hideTitle,
|
|
supportsEIP1559V2,
|
|
hasTopBorder,
|
|
nativeCurrency,
|
|
networkName,
|
|
toAddress,
|
|
transactionType,
|
|
isBuyableChain,
|
|
} = this.props;
|
|
|
|
const { t } = this.context;
|
|
|
|
const showInsuffienctFundsError =
|
|
supportsEIP1559V2 &&
|
|
(errorKey || errorMessage) &&
|
|
errorKey === INSUFFICIENT_FUNDS_ERROR_KEY;
|
|
|
|
const { setShowDepositPopover } = this.state;
|
|
|
|
return (
|
|
<div
|
|
className={classnames('confirm-page-container-content', {
|
|
'confirm-page-container-content--with-top-border': hasTopBorder,
|
|
})}
|
|
>
|
|
{warning ? <ConfirmPageContainerWarning warning={warning} /> : null}
|
|
{ethGasPriceWarning && (
|
|
<ConfirmPageContainerWarning warning={ethGasPriceWarning} />
|
|
)}
|
|
<ConfirmPageContainerSummary
|
|
className={classnames({
|
|
'confirm-page-container-summary--border':
|
|
!detailsComponent || !dataComponent,
|
|
})}
|
|
action={action}
|
|
title={title}
|
|
image={image}
|
|
titleComponent={titleComponent}
|
|
subtitleComponent={subtitleComponent}
|
|
hideSubtitle={hideSubtitle}
|
|
tokenAddress={tokenAddress}
|
|
nonce={nonce}
|
|
origin={origin}
|
|
hideTitle={hideTitle}
|
|
toAddress={toAddress}
|
|
transactionType={transactionType}
|
|
/>
|
|
{this.renderContent()}
|
|
{!supportsEIP1559V2 && (errorKey || errorMessage) && (
|
|
<div className="confirm-page-container-content__error-container">
|
|
<ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
|
|
</div>
|
|
)}
|
|
{showInsuffienctFundsError && (
|
|
<div className="confirm-page-container-content__error-container">
|
|
<ActionableMessage
|
|
className="actionable-message--warning"
|
|
message={
|
|
isBuyableChain ? (
|
|
<Typography variant={TYPOGRAPHY.H7} align="left">
|
|
{t('insufficientCurrencyBuyOrDeposit', [
|
|
nativeCurrency,
|
|
networkName,
|
|
|
|
<Button
|
|
type="inline"
|
|
className="confirm-page-container-content__link"
|
|
onClick={() =>
|
|
this.setState({ setShowDepositPopover: true })
|
|
}
|
|
key={`${nativeCurrency}-buy-button`}
|
|
>
|
|
{t('buyAsset', [nativeCurrency])}
|
|
</Button>,
|
|
])}
|
|
</Typography>
|
|
) : (
|
|
<Typography variant={TYPOGRAPHY.H7} align="left">
|
|
{t('insufficientCurrencyDeposit', [
|
|
nativeCurrency,
|
|
networkName,
|
|
])}
|
|
</Typography>
|
|
)
|
|
}
|
|
useIcon
|
|
iconFillColor="var(--color-error-default)"
|
|
type="danger"
|
|
/>
|
|
</div>
|
|
)}
|
|
{setShowDepositPopover && (
|
|
<DepositPopover
|
|
onClose={() => this.setState({ setShowDepositPopover: false })}
|
|
/>
|
|
)}
|
|
<PageContainerFooter
|
|
onCancel={onCancel}
|
|
cancelText={cancelText}
|
|
onSubmit={onSubmit}
|
|
submitText={submitText}
|
|
disabled={disabled}
|
|
>
|
|
{unapprovedTxCount > 1 ? (
|
|
<a onClick={onCancelAll}>{rejectNText}</a>
|
|
) : null}
|
|
</PageContainerFooter>
|
|
</div>
|
|
);
|
|
}
|
|
}
|