1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/confirm-page-container/enableEIP1559V2-notice/enableEIP1559V2-notice.js
George Marshall 05a20bb721
Add responsive props to Box component (#15106)
* Adding responsive props to Box component

* Updating margin array prop instances

* Updating padding array prop instances

* Updates to docs, tests and margin, padding instances

* Optimizing class name object

* Simplifying single value logic

* replacing for loop with switch statement

* Memoizing generateClassNames function
2022-07-20 13:47:51 -07:00

89 lines
2.7 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Box from '../../../ui/box';
import Dialog from '../../../ui/dialog';
import Typography from '../../../ui/typography/typography';
import {
COLORS,
TYPOGRAPHY,
TEXT_ALIGN,
FONT_WEIGHT,
DISPLAY,
} from '../../../../helpers/constants/design-system';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import Button from '../../../ui/button';
import { EXPERIMENTAL_ROUTE } from '../../../../helpers/constants/routes';
import { setEnableEIP1559V2NoticeDismissed } from '../../../../store/actions';
import { getEnableEIP1559V2NoticeDismissed } from '../../../../ducks/metamask/metamask';
import { getEIP1559V2Enabled } from '../../../../selectors';
export default function EnableEIP1559V2Notice({ isFirstAlert }) {
const t = useI18nContext();
const history = useHistory();
const enableEIP1559V2NoticeDismissed = useSelector(
getEnableEIP1559V2NoticeDismissed,
);
const eip1559V2Enabled = useSelector(getEIP1559V2Enabled);
if (eip1559V2Enabled || enableEIP1559V2NoticeDismissed) {
return null;
}
return (
<Box
marginRight={4}
marginBottom={4}
marginLeft={4}
marginTop={isFirstAlert ? 4 : 0}
className="enableEIP1559V2-notice"
>
<Dialog type="message" className="enableEIP1559V2-notice__dialog">
<button
onClick={setEnableEIP1559V2NoticeDismissed}
className="enableEIP1559V2-notice__close-button"
data-testid="enableEIP1559V2-notice-close"
/>
<Box display={DISPLAY.FLEX}>
<Box paddingTop={2}>
<i style={{ fontSize: '1rem' }} className="fa fa-info-circle" />
</Box>
<Box paddingLeft={4}>
<Typography
color={COLORS.TEXT_DEFAULT}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.H7}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('enableEIP1559V2Header')}
</Typography>
<Typography
color={COLORS.TEXT_DEFAULT}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.H7}
boxProps={{ marginBottom: 2 }}
>
{t('enableEIP1559V2AlertMessage')}
</Typography>
<Button
type="link"
onClick={() => {
history.push(EXPERIMENTAL_ROUTE);
}}
className="enableEIP1559V2-notice__link"
>
{t('enableEIP1559V2ButtonText')}
</Button>
</Box>
</Box>
</Dialog>
</Box>
);
}
EnableEIP1559V2Notice.propTypes = {
isFirstAlert: PropTypes.bool,
};