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/approve-content-card/approve-content-card.js
2022-11-07 12:21:38 -06:00

305 lines
8.9 KiB
JavaScript

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import Button from '../../ui/button';
import EditGasFeeButton from '../edit-gas-fee-button/edit-gas-fee-button';
import Typography from '../../ui/typography/typography';
import {
ALIGN_ITEMS,
BLOCK_SIZES,
COLORS,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
JUSTIFY_CONTENT,
TEXT_ALIGN,
TYPOGRAPHY,
} from '../../../helpers/constants/design-system';
import { I18nContext } from '../../../../.storybook/i18n';
import GasDetailsItem from '../gas-details-item/gas-details-item';
import MultiLayerFeeMessage from '../multilayer-fee-message/multi-layer-fee-message';
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
export default function ApproveContentCard({
showHeader = true,
symbol,
title,
showEdit,
showAdvanceGasFeeOptions = false,
onEditClick,
footer,
noBorder,
supportsEIP1559V2,
renderTransactionDetailsContent,
renderDataContent,
isMultiLayerFeeNetwork,
ethTransactionTotal,
nativeCurrency,
fullTxData,
hexTransactionTotal,
fiatTransactionTotal,
currentCurrency,
isSetApproveForAll,
isApprovalOrRejection,
data,
}) {
const t = useContext(I18nContext);
return (
<Box
className={classnames({
'approve-content-card-container__card': !noBorder,
'approve-content-card-container__card--no-border': noBorder,
})}
>
{showHeader && (
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.FLEX_END}
className="approve-content-card-container__card-header"
>
{supportsEIP1559V2 && title === t('transactionFee') ? null : (
<>
<Box className="approve-content-card-container__card-header__symbol">
{symbol}
</Box>
<Box
marginLeft={4}
className="approve-content-card-container__card-header__title"
>
<Typography
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.BOLD}
>
{title}
</Typography>
</Box>
</>
)}
{showEdit && (!showAdvanceGasFeeOptions || !supportsEIP1559V2) && (
<Box width={BLOCK_SIZES.ONE_SIXTH}>
<Button type="link" onClick={() => onEditClick()}>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.PRIMARY_DEFAULT}
>
{t('edit')}
</Typography>
</Button>
</Box>
)}
{showEdit && showAdvanceGasFeeOptions && supportsEIP1559V2 && (
<EditGasFeeButton />
)}
</Box>
)}
<Box
marginTop={1}
marginBottom={3}
className="approve-content-card-container__card-content"
>
{renderTransactionDetailsContent &&
(!isMultiLayerFeeNetwork && supportsEIP1559V2 ? (
<GasDetailsItem />
) : (
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
>
{isMultiLayerFeeNetwork ? (
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
className="approve-content-card-container__transaction-details-extra-content"
>
<Box
display={DISPLAY.FLEX}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
>
<Typography
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
color={COLORS.TEXT_MUTED}
>
<span>{t('transactionDetailLayer2GasHeading')}</span>
{`${ethTransactionTotal} ${nativeCurrency}`}
</Typography>
</Box>
<MultiLayerFeeMessage
transaction={fullTxData}
layer2fee={hexTransactionTotal}
nativeCurrency={nativeCurrency}
plainStyle
/>
</Box>
) : (
<>
<Box>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
>
{t('feeAssociatedRequest')}
</Typography>
</Box>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
alignItems={ALIGN_ITEMS.FLEX_END}
textAlign={TEXT_ALIGN.RIGHT}
>
<Box>
<Typography
variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD}
color={COLORS.TEXT_DEFAULT}
>
{formatCurrency(fiatTransactionTotal, currentCurrency)}
</Typography>
</Box>
<Box>
<Typography
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
color={COLORS.TEXT_MUTED}
>
{`${ethTransactionTotal} ${nativeCurrency}`}
</Typography>
</Box>
</Box>
</>
)}
</Box>
))}
{renderDataContent && (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
<Box>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
>
{isSetApproveForAll
? t('functionSetApprovalForAll')
: t('functionApprove')}
</Typography>
</Box>
{isSetApproveForAll && isApprovalOrRejection !== undefined ? (
<Box>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
>
{`${t('parameters')}: ${isApprovalOrRejection}`}
</Typography>
</Box>
) : null}
<Box
marginRight={4}
className="approve-content-card-container__data__data-block"
>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_ALTERNATIVE}
>
{data}
</Typography>
</Box>
</Box>
)}
</Box>
{footer}
</Box>
);
}
ApproveContentCard.propTypes = {
/**
* Whether to show header including icon, transaction fee text and edit button
*/
showHeader: PropTypes.bool,
/**
* Symbol icon
*/
symbol: PropTypes.node,
/**
* Title to be included in the header
*/
title: PropTypes.string,
/**
* Whether to show edit button or not
*/
showEdit: PropTypes.bool,
/**
* Whether to show advanced gas fee options or not
*/
showAdvanceGasFeeOptions: PropTypes.bool,
/**
* Should open customize gas modal when edit button is clicked
*/
onEditClick: PropTypes.func,
/**
* Footer to be shown
*/
footer: PropTypes.node,
/**
* Whether to include border-bottom or not
*/
noBorder: PropTypes.bool,
/**
* Is enhanced gas fee enabled or not
*/
supportsEIP1559V2: PropTypes.bool,
/**
* Whether to render transaction details content or not
*/
renderTransactionDetailsContent: PropTypes.bool,
/**
* Whether to render data content or not
*/
renderDataContent: PropTypes.bool,
/**
* Is multi-layer fee network or not
*/
isMultiLayerFeeNetwork: PropTypes.bool,
/**
* Total sum of the transaction in native currency
*/
ethTransactionTotal: PropTypes.string,
/**
* Current native currency
*/
nativeCurrency: PropTypes.string,
/**
* Current transaction
*/
fullTxData: PropTypes.object,
/**
* Total sum of the transaction converted to hex value
*/
hexTransactionTotal: PropTypes.string,
/**
* Total sum of the transaction in fiat currency
*/
fiatTransactionTotal: PropTypes.string,
/**
* Current fiat currency
*/
currentCurrency: PropTypes.string,
/**
* Is set approve for all or not
*/
isSetApproveForAll: PropTypes.bool,
/**
* Whether a current set approval for all transaction will approve or revoke access
*/
isApprovalOrRejection: PropTypes.bool,
/**
* Current transaction data
*/
data: PropTypes.string,
};