1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/app/transaction-total-banner/transaction-total-banner.component.js

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