1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
2022-11-09 09:36:21 -06:00

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