diff options
Diffstat (limited to 'ui/app/components/ui-migration-annoucement')
4 files changed, 77 insertions, 0 deletions
diff --git a/ui/app/components/ui-migration-annoucement/index.js b/ui/app/components/ui-migration-annoucement/index.js new file mode 100644 index 000000000..c6c8cc619 --- /dev/null +++ b/ui/app/components/ui-migration-annoucement/index.js @@ -0,0 +1 @@ +export {default} from './ui-migration-announcement.container' diff --git a/ui/app/components/ui-migration-annoucement/index.scss b/ui/app/components/ui-migration-annoucement/index.scss new file mode 100644 index 000000000..6138a3079 --- /dev/null +++ b/ui/app/components/ui-migration-annoucement/index.scss @@ -0,0 +1,22 @@ +.ui-migration-announcement { + position: absolute; + z-index: 9999; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + background: $white; + + p { + box-sizing: border-box; + padding: 1em; + font-size: 12pt; + } + + p:last-of-type { + cursor: pointer; + text-decoration: underline; + font-weight: bold; + } +} diff --git a/ui/app/components/ui-migration-annoucement/ui-migration-annoucement.component.js b/ui/app/components/ui-migration-annoucement/ui-migration-annoucement.component.js new file mode 100644 index 000000000..7a4124972 --- /dev/null +++ b/ui/app/components/ui-migration-annoucement/ui-migration-annoucement.component.js @@ -0,0 +1,33 @@ +import PropTypes from 'prop-types' +import React, {PureComponent} from 'react' + +export default class UiMigrationAnnouncement extends PureComponent { + static contextTypes = { + t: PropTypes.func.isRequired, + } + + static defaultProps = { + shouldShowAnnouncement: true, + }; + + static propTypes = { + onClose: PropTypes.func.isRequired, + shouldShowAnnouncement: PropTypes.bool, + } + + render () { + const { t } = this.context + const { onClose, shouldShowAnnouncement } = this.props + + if (!shouldShowAnnouncement) { + return null + } + + return ( + <div className="ui-migration-announcement"> + <p>{t('uiMigrationAnnouncement')}</p> + <p onClick={onClose}>{t('close')}</p> + </div> + ) + } +} diff --git a/ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js b/ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js new file mode 100644 index 000000000..6dc993b87 --- /dev/null +++ b/ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux' +import UiMigrationAnnouncement from './ui-migration-annoucement.component' +import { setCompletedUiMigration } from '../../actions' + +const mapStateToProps = (state) => { + const shouldShowAnnouncement = !state.metamask.completedUiMigration + + return { + shouldShowAnnouncement, + } +} + +const mapDispatchToProps = dispatch => { + return { + onClose () { + dispatch(setCompletedUiMigration()) + }, + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(UiMigrationAnnouncement) |