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 AddTokenScreen = require('./add-token')
|
||||||
const Import = require('./accounts/import')
|
const Import = require('./accounts/import')
|
||||||
const InfoScreen = require('./info')
|
const InfoScreen = require('./info')
|
||||||
|
const NewUiAnnouncement = require('./new-ui-annoucement')
|
||||||
const AppBar = require('./components/app-bar')
|
const AppBar = require('./components/app-bar')
|
||||||
const Loading = require('./components/loading')
|
const Loading = require('./components/loading')
|
||||||
const BuyView = require('./components/buy-button-subview')
|
const BuyView = require('./components/buy-button-subview')
|
||||||
@ -82,13 +83,29 @@ function mapStateToProps (state) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
App.prototype.render = function () {
|
App.prototype.render = function () {
|
||||||
var props = this.props
|
const {
|
||||||
const { isLoading, loadingMessage, transForward, network } = props
|
currentView,
|
||||||
const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
|
dispatch,
|
||||||
const loadMessage = loadingMessage || isLoadingNetwork ?
|
isLoading,
|
||||||
`Connecting to ${this.getNetworkName()}` : null
|
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')
|
log.debug('Main ui render function')
|
||||||
|
|
||||||
|
if (!featureFlags.skipAnnounceBetaUI) {
|
||||||
|
return (
|
||||||
|
h(NewUiAnnouncement, {
|
||||||
|
dispatch,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('.flex-column.full-height', {
|
h('.flex-column.full-height', {
|
||||||
style: {
|
style: {
|
||||||
@ -99,7 +116,7 @@ App.prototype.render = function () {
|
|||||||
},
|
},
|
||||||
}, [
|
}, [
|
||||||
h(AppBar, {
|
h(AppBar, {
|
||||||
...props,
|
...this.props,
|
||||||
}),
|
}),
|
||||||
this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
|
this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
|
||||||
|
|
||||||
|
@ -81,8 +81,8 @@ module.exports = class AppBar extends Component {
|
|||||||
'Try the New MetaMask',
|
'Try the New MetaMask',
|
||||||
AppBar.renderSpace(),
|
AppBar.renderSpace(),
|
||||||
h('span.banner__link', {
|
h('span.banner__link', {
|
||||||
onClick () {
|
async onClick () {
|
||||||
dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
|
await dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
|
||||||
},
|
},
|
||||||
}, [
|
}, [
|
||||||
'Now',
|
'Now',
|
||||||
|
@ -720,6 +720,110 @@ div.message-container > div:first-child {
|
|||||||
transform: scale(1.1);
|
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 {
|
.app-bar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
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