1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/components/app/gas-details-item/gas-details-item.js

107 lines
3.5 KiB
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useSelector } from 'react-redux';
2021-12-12 00:26:28 +01:00
import { COLORS } from '../../../helpers/constants/design-system';
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
import { getPreferences } from '../../../selectors';
import { useGasFeeContext } from '../../../contexts/gasFee';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box';
import LoadingHeartBeat from '../../ui/loading-heartbeat';
import GasTiming from '../gas-timing/gas-timing.component';
import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
2021-12-12 00:26:28 +01:00
import GasDetailsItemTitle from './gas-details-item-title';
const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
const t = useI18nContext();
const {
estimateUsed,
hasSimulationError,
maximumCostInHexWei: hexMaximumTransactionFee,
minimumCostInHexWei: hexMinimumTransactionFee,
maxPriorityFeePerGas,
maxFeePerGas,
} = useGasFeeContext();
const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
if (hasSimulationError && !userAcknowledgedGasMissing) {
return null;
}
return (
<TransactionDetailItem
key="gas-item"
2021-12-12 00:26:28 +01:00
detailTitle={<GasDetailsItemTitle />}
detailTitleColor={COLORS.TEXT_DEFAULT}
detailText={
<div className="gas-details-item__currency-container">
2022-01-26 19:18:43 +01:00
<LoadingHeartBeat estimateUsed={estimateUsed} />
<UserPreferencedCurrencyDisplay
type={SECONDARY}
value={hexMinimumTransactionFee}
hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
/>
</div>
}
detailTotal={
<div className="gas-details-item__currency-container">
2022-01-26 19:18:43 +01:00
<LoadingHeartBeat estimateUsed={estimateUsed} />
<UserPreferencedCurrencyDisplay
type={PRIMARY}
value={hexMinimumTransactionFee}
hideLabel={!useNativeCurrencyAsPrimaryCurrency}
/>
</div>
}
subText={
<>
<Box
key="editGasSubTextFeeLabel"
display="inline-flex"
className={classNames('gas-details-item__gasfee-label', {
'gas-details-item__gas-fee-warning': estimateUsed === 'high',
})}
>
2022-01-26 19:18:43 +01:00
<LoadingHeartBeat estimateUsed={estimateUsed} />
<Box marginRight={1}>
<strong>
{estimateUsed === 'high' && '⚠ '}
{t('editGasSubTextFeeLabel')}
</strong>
</Box>
<div
key="editGasSubTextFeeValue"
className="gas-details-item__currency-container"
>
2022-01-26 19:18:43 +01:00
<LoadingHeartBeat estimateUsed={estimateUsed} />
<UserPreferencedCurrencyDisplay
key="editGasSubTextFeeAmount"
type={PRIMARY}
value={hexMaximumTransactionFee}
hideLabel={!useNativeCurrencyAsPrimaryCurrency}
/>
</div>
</Box>
</>
}
subTitle={
<GasTiming
maxPriorityFeePerGas={maxPriorityFeePerGas.toString()}
maxFeePerGas={maxFeePerGas.toString()}
/>
}
/>
);
};
GasDetailsItem.propTypes = {
userAcknowledgedGasMissing: PropTypes.bool,
};
export default GasDetailsItem;