mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-12 12:47:14 +01:00
0fd37cd5ff
* removed i18nValue component * fixed bracket issue
107 lines
3.5 KiB
JavaScript
107 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
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';
|
|
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"
|
|
detailTitle={<GasDetailsItemTitle />}
|
|
detailTitleColor={COLORS.TEXT_DEFAULT}
|
|
detailText={
|
|
<div className="gas-details-item__currency-container">
|
|
<LoadingHeartBeat estimateUsed={estimateUsed} />
|
|
<UserPreferencedCurrencyDisplay
|
|
type={SECONDARY}
|
|
value={hexMinimumTransactionFee}
|
|
hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
|
|
/>
|
|
</div>
|
|
}
|
|
detailTotal={
|
|
<div className="gas-details-item__currency-container">
|
|
<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',
|
|
})}
|
|
>
|
|
<LoadingHeartBeat estimateUsed={estimateUsed} />
|
|
<Box marginRight={1}>
|
|
<strong>
|
|
{estimateUsed === 'high' && '⚠ '}
|
|
{t('editGasSubTextFeeLabel')}
|
|
</strong>
|
|
</Box>
|
|
<div
|
|
key="editGasSubTextFeeValue"
|
|
className="gas-details-item__currency-container"
|
|
>
|
|
<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;
|