const PropTypes = require('prop-types')
const {PureComponent} = require('react')
const h = require('react-hyperscript')
const actions = require('../../ui/app/actions')
module.exports = class NewUiAnnouncement extends PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
};
close = async () => {
await this.props.dispatch(actions.setFeatureFlag('skipAnnounceBetaUI', true))
}
switchToNewUi = async () => {
const flag = 'betaUI'
const enabled = true
await this.props.dispatch(actions.setFeatureFlag(
flag,
enabled,
))
await this.close()
global.platform.openExtensionInBrowser()
}
render () {
return (
h('div.new-ui-announcement', [
h('section.new-ui-announcement__announcement-header', [
h('h1', 'Announcement'),
h('a.close', {
onClick: this.close,
}, '×'),
]),
h('section.new-ui-announcement__body', [
h('h1', 'A New Version of MetaMask'),
h('p', [
"We're excited to announce a brand-new version of MetaMask with enhanced features and functionality.",
]),
h('div.updates-list', [
h('h2', 'Updates include'),
h('ul', [
h('li', 'New user interface'),
h('li', 'Full-screen mode'),
h('li', 'Better token support'),
h('li', 'Better gas controls'),
h('li', 'Advanced features for developers'),
h('li', 'New confirmation screens'),
h('li', 'And more!'),
]),
]),
h('p', [
'You can still use the current version of MetaMask. The new version is still in beta, ' +
'however we encourage you to try it out as we transition into this exciting new update.',
h('span', {
dangerouslySetInnerHTML: {
__html: ' ',
},
}),
h('a', {
href: 'https://medium.com/metamask/74dba32cc7f7',
onClick ({target}) {
const url = target.href
global.platform.openWindow({
url,
})
},
}, [
'Learn more.',
]),
]),
]),
h('section.new-ui-announcement__footer', [
h('h1', 'Ready to try the new MetaMask?'),
h('button.positive', {
onClick: this.switchToNewUi,
}, 'Try it now'),
h('button.negative', {
onClick: this.close,
}, 'No thanks, maybe later'),
]),
])
)
}
}
