mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Add NewUiAnnouncement component
This commit is contained in:
parent
6ae76fee33
commit
d16f25fc20
@ -24,6 +24,7 @@ const ConfigScreen = require('./config')
|
||||
const AddTokenScreen = require('./add-token')
|
||||
const Import = require('./accounts/import')
|
||||
const InfoScreen = require('./info')
|
||||
const NewUiAnnouncement = require('./new-ui-annoucement')
|
||||
const AppBar = require('./components/app-bar')
|
||||
const Loading = require('./components/loading')
|
||||
const BuyView = require('./components/buy-button-subview')
|
||||
@ -82,13 +83,29 @@ function mapStateToProps (state) {
|
||||
}
|
||||
|
||||
App.prototype.render = function () {
|
||||
var props = this.props
|
||||
const { isLoading, loadingMessage, transForward, network } = props
|
||||
const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
|
||||
const loadMessage = loadingMessage || isLoadingNetwork ?
|
||||
`Connecting to ${this.getNetworkName()}` : null
|
||||
const {
|
||||
currentView,
|
||||
dispatch,
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
transForward,
|
||||
network,
|
||||
featureFlags,
|
||||
} = this.props
|
||||
const isLoadingNetwork = network === 'loading' && currentView.name !== 'config'
|
||||
const loadMessage = loadingMessage || isLoadingNetwork
|
||||
? `Connecting to ${this.getNetworkName()}`
|
||||
: null
|
||||
log.debug('Main ui render function')
|
||||
|
||||
if (!featureFlags.skipAnnounceBetaUI) {
|
||||
return (
|
||||
h(NewUiAnnouncement, {
|
||||
dispatch,
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
h('.flex-column.full-height', {
|
||||
style: {
|
||||
@ -99,7 +116,7 @@ App.prototype.render = function () {
|
||||
},
|
||||
}, [
|
||||
h(AppBar, {
|
||||
...props,
|
||||
...this.props,
|
||||
}),
|
||||
this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
|
||||
|
||||
|
@ -81,8 +81,8 @@ module.exports = class AppBar extends Component {
|
||||
'Try the New MetaMask',
|
||||
AppBar.renderSpace(),
|
||||
h('span.banner__link', {
|
||||
onClick () {
|
||||
dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
|
||||
async onClick () {
|
||||
await dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
|
||||
},
|
||||
}, [
|
||||
'Now',
|
||||
|
@ -720,6 +720,110 @@ div.message-container > div:first-child {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.new-ui-announcement {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: white;
|
||||
color: #4D4D4D;
|
||||
font-family: Roboto, Arial, sans-serif;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.new-ui-announcement__announcement-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.new-ui-announcement__announcement-header a.close {
|
||||
cursor: pointer;
|
||||
font-size: 32px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.new-ui-announcement__announcement-header a.close:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.new-ui-announcement__announcement-header h1 {
|
||||
color: #33A4E7;
|
||||
text-transform: uppercase;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.new-ui-announcement__body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
font-size: 10.5pt;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.new-ui-announcement__body h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.new-ui-announcement__body a {
|
||||
color: #33A4E7;
|
||||
}
|
||||
|
||||
.new-ui-announcement__body .updates-list {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.new-ui-announcement__body .updates-list h2 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.new-ui-announcement__body .updates-list ul {
|
||||
list-style: disc inside;
|
||||
}
|
||||
|
||||
.new-ui-announcement__footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.new-ui-announcement__footer h1 {
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.new-ui-announcement__footer button:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.new-ui-announcement__footer button.positive {
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
background: #33A4E7;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
box-shadow: none;
|
||||
border-radius: 5px;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.new-ui-announcement__footer button.negative {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white;
|
||||
color: #33A4E7;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
86
old-ui/app/new-ui-annoucement.js
Normal file
86
old-ui/app/new-ui-annoucement.js
Normal file
@ -0,0 +1,86 @@
|
||||
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
|
||||
const notificationType = 'BETA_UI_NOTIFICATION_MODAL'
|
||||
await this.props.dispatch(actions.setFeatureFlag(
|
||||
flag,
|
||||
enabled,
|
||||
notificationType,
|
||||
))
|
||||
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'),
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user