1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js
2023-02-02 20:15:26 +00:00

50 lines
1.6 KiB
JavaScript

import React from 'react';
import { useSelector } from 'react-redux';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { getIsMainnet } from '../../../../selectors';
import Box from '../../../ui/box';
import InfoTooltip from '../../../ui/info-tooltip/info-tooltip';
import Typography from '../../../ui/typography/typography';
const GasDetailsItemTitle = () => {
const t = useI18nContext();
const isMainnet = useSelector(getIsMainnet);
return (
<Box display="flex">
<Box marginRight={1}>{t('gas')}</Box>
<span className="gas-details-item-title__estimate">
({t('transactionDetailGasInfoV2')})
</span>
<InfoTooltip
contentText={
<>
<Typography variant={TypographyVariant.H7}>
{t('transactionDetailGasTooltipIntro', [
isMainnet ? t('networkNameEthereum') : '',
])}
</Typography>
<Typography variant={TypographyVariant.H7}>
{t('transactionDetailGasTooltipExplanation')}
</Typography>
<Typography variant={TypographyVariant.H7}>
<a
href="https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172"
target="_blank"
rel="noopener noreferrer"
>
{t('transactionDetailGasTooltipConversion')}
</a>
</Typography>
</>
}
position="bottom"
/>
</Box>
);
};
export default GasDetailsItemTitle;