1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Create Gas Timing component for EIP-1559 (#11405)

This commit is contained in:
David Walsh 2021-07-02 14:12:13 -05:00 committed by GitHub
parent afe06adb7a
commit 6fa3cce7ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 115 additions and 12 deletions

View File

@ -16,6 +16,7 @@
@import 'gas-customization/gas-modal-page-container/index';
@import 'gas-customization/gas-price-button-group/index';
@import 'gas-customization/index';
@import 'gas-timing/index';
@import 'home-notification/index';
@import 'info-box/index';
@import 'menu-bar/index';

View File

@ -0,0 +1,32 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Typography from '../../ui/typography/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
import InfoTooltip from '../../ui/info-tooltip';
export default function GasTiming({ text, tooltipText, attitude }) {
return (
<Typography
variant={TYPOGRAPHY.H7}
className={classNames('gas-timing', {
[`gas-timing--${attitude}`]: attitude,
})}
>
{text}
{tooltipText && <InfoTooltip position="top" contentText={tooltipText} />}
</Typography>
);
}
GasTiming.propTypes = {
text: PropTypes.string.isRequired,
tooltipText: PropTypes.string,
attitude: PropTypes.oneOf(['positive', 'negative', 'warning', '']),
};
GasTiming.defaultProps = {
tooltipText: '',
attitude: '',
};

View File

@ -0,0 +1,49 @@
import React from 'react';
import GasTiming from '.';
export default {
title: 'Gas Timing',
};
export const simple = () => {
return (
<div style={{ width: '600px' }}>
<GasTiming text="Likely within 30 seconds" />
</div>
);
};
export const withTooltip = () => {
return (
<div style={{ width: '600px' }}>
<GasTiming
text="Likely within 30 seconds"
tooltipText="This is the tooltip text"
/>
</div>
);
};
export const withAttitudes = () => {
return (
<div style={{ width: '600px' }}>
<GasTiming text="Likely within 30 seconds" />
<GasTiming
text="Likely within 30 seconds"
tooltipText="This is the tooltip text"
attitude="negative"
/>
<GasTiming
text="Likely within 30 seconds"
tooltipText="This is the tooltip text"
attitude="positive"
/>
<GasTiming
text="Likely within 30 seconds"
tooltipText="This is the tooltip text"
attitude="warning"
/>
</div>
);
};

View File

@ -0,0 +1 @@
export { default } from './gas-timing.component';

View File

@ -0,0 +1,20 @@
.typography.gas-timing {
color: $ui-4;
&--positive {
color: $success-3;
}
&--warning {
color: $alert-3;
}
&--negative {
color: $error-1;
}
.info-tooltip {
display: inline-block;
margin-inline-start: 4px;
}
}

View File

@ -30,6 +30,7 @@ export default function TransactionDetailItem({
<Typography
variant={TYPOGRAPHY.H6}
className="transaction-detail-item__detail-text"
color={COLORS.UI4}
>
{detailText}
</Typography>
@ -48,11 +49,14 @@ export default function TransactionDetailItem({
<Typography
variant={TYPOGRAPHY.H7}
className="transaction-detail-item__subtitle"
color={COLORS.UI4}
>
{subTitle}
</Typography>
)}
<Typography variant={TYPOGRAPHY.H7}>{subText}</Typography>
<Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
{subText}
</Typography>
</div>
</div>
);

View File

@ -1,5 +1,6 @@
import React from 'react';
import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
import GasTiming from '../gas-timing/gas-timing.component';
import TransactionDetailItem from '.';
export default {
@ -20,7 +21,7 @@ export const basic = () => {
}
detailText="16565.30"
detailTotal="0.0089 ETH"
subTitle="Very likely in < 15 seconds"
subTitle={<GasTiming text="Very likely in < 15 seconds" />}
subText={
<>
From <strong>$16565 - $19000</strong>

View File

@ -1,6 +1,7 @@
import React from 'react';
import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
import GasTiming from '../gas-timing/gas-timing.component';
import TransactionDetail from '.';
export default {
@ -20,7 +21,7 @@ const rows = [
}
detailText="0.00896 ETH"
detailTotal="$15.73"
subTitle="Very likely in < 15 seconds"
subTitle={<GasTiming text="Very likely in < 15 seconds" />}
subText={
<>
From <strong>$15.73 - $19.81</strong>

View File

@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
import Typography from '../../ui/typography/typography';
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
import GasTiming from '../gas-timing/gas-timing.component';
export default function TransactionTotalBanner({ total, detail, timing }) {
return (
<div className="transaction-total-banner">
@ -19,15 +21,7 @@ export default function TransactionTotalBanner({ total, detail, timing }) {
{detail}
</Typography>
)}
{timing && (
<Typography
color={COLORS.UI4}
variant={TYPOGRAPHY.H7}
className="transaction-total-banner__timing"
>
{timing}
</Typography>
)}
{timing && <GasTiming text={timing} />}
</div>
);
}