Adding user setting option for EIP-1559 V2 (#13242)
Jyoti Puri
3 years ago
committed by
GitHub
parent
14704917c6
commit
88faef7e19
@ -0,0 +1,94 @@ |
||||
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'; |
||||
|
||||
const EIP_1559_V2_ENABLED = |
||||
// This is a string in unit tests but is a boolean in the browser
|
||||
process.env.EIP_1559_V2 === true || process.env.EIP_1559_V2 === 'true'; |
||||
|
||||
export default function EnableEIP1559V2Notice({ isFirstAlert }) { |
||||
const t = useI18nContext(); |
||||
const history = useHistory(); |
||||
const enableEIP1559V2NoticeDismissed = useSelector( |
||||
getEnableEIP1559V2NoticeDismissed, |
||||
); |
||||
const eip1559V2Enabled = useSelector(getEIP1559V2Enabled); |
||||
|
||||
if ( |
||||
!EIP_1559_V2_ENABLED || |
||||
eip1559V2Enabled || |
||||
enableEIP1559V2NoticeDismissed |
||||
) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<Box |
||||
margin={[0, 4, 4, 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.BLACK} |
||||
align={TEXT_ALIGN.LEFT} |
||||
variant={TYPOGRAPHY.H7} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
> |
||||
{t('enableEIP1559V2Header')} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
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, |
||||
}; |
||||
@ -0,0 +1 @@ |
||||
export { default } from './enableEIP1559V2-notice'; |
||||
@ -0,0 +1,33 @@ |
||||
.enableEIP1559V2-notice { |
||||
&__dialog { |
||||
position: relative; |
||||
} |
||||
|
||||
&__close-button { |
||||
background-color: transparent; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
content: '\00D7'; |
||||
font-size: 29px; |
||||
font-weight: 200; |
||||
color: var(--black); |
||||
background-color: transparent; |
||||
top: 0; |
||||
right: 12px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
a.enableEIP1559V2-notice__link { |
||||
@include H7; |
||||
|
||||
padding: 0; |
||||
justify-content: flex-start; |
||||
font-weight: bold; |
||||
font-size: 0.75rem; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue