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() } 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'), ]), ]) ) } }