mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
36 lines
959 B
JavaScript
36 lines
959 B
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Typography from '../../ui/typography/typography';
|
|
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
|
|
|
|
export default function TransactionTotalBanner({
|
|
total = '',
|
|
detail = '',
|
|
timing,
|
|
}) {
|
|
return (
|
|
<div className="transaction-total-banner">
|
|
<Typography color={COLORS.TEXT_DEFAULT} variant={TYPOGRAPHY.H1}>
|
|
{total}
|
|
</Typography>
|
|
{detail && (
|
|
<Typography
|
|
color={COLORS.TEXT_DEFAULT}
|
|
variant={TYPOGRAPHY.H6}
|
|
className="transaction-total-banner__detail"
|
|
>
|
|
{detail}
|
|
</Typography>
|
|
)}
|
|
{timing}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
TransactionTotalBanner.propTypes = {
|
|
total: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
detail: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
timing: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
};
|